/* =========================================================================
   Genesal Energy — Landings de agradecimiento (ES · EN · FR)
   Hoja de estilos única y compartida por las 16 páginas.
   Sin frameworks, sin CDN, sin Google Fonts: todo local.
   ========================================================================= */

/* ------------------------------ Tokens ---------------------------------- */
:root{
  --rojo:          #b8012d;
  --rojo-hover:    #93042d;
  --texto-oscuro:  #151515;
  --texto-medio:   #434343;
  --texto-cuerpo:  #626262;
  --gris-borde:    #e6e6e6;
  --gris-suave:    #fafafa;
  --negro-footer:  #151515;
  --gris-socket:   #9f9f9f;

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --container-max: 960px;
  --container-pad: 24px;
}

/* ------------------------------ Reset ----------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:var(--font);
  font-size:15px;
  line-height:1.65;
  color:var(--texto-cuerpo);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;border:0;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p{margin:0;}

.container{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 var(--container-pad);
}

/* Accesibilidad: saltar al contenido */
.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--rojo);color:#fff;padding:10px 16px;z-index:10;
}
.skip-link:focus{left:0;}

/* ------------------------------ Cabecera -------------------------------- */
.site-header{padding:32px 0 0;}
.site-logo{display:inline-block;}
.site-logo img{width:186px;height:auto;}

/* ------------------------------ Mensaje --------------------------------- */
.ag-main{flex:1 0 auto;padding-bottom:72px;}

.ag-mensaje{
  padding:48px 0 8px;
  max-width:720px;
  opacity:0;
  transform:translateY(12px);
  animation:ag-entrada .6s ease-out .05s forwards;
}
.ag-check{
  width:44px;height:44px;
  margin:0 0 24px;
  color:var(--rojo);
}
.ag-eyebrow{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--rojo);
  font-weight:700;
  margin:0 0 14px;
}
.ag-titulo{
  font-size:32px;
  line-height:1.25;
  font-weight:700;
  color:var(--texto-oscuro);
  margin:0 0 24px;
}
.ag-sub{
  font-size:18px;
  line-height:1.55;
  color:var(--texto-medio);
  margin:0 0 16px;
}
.ag-texto{
  font-size:15px;
  color:var(--texto-cuerpo);
  margin:0;
}

/* ------------------------------ CTA ------------------------------------- */
.ag-cta{
  margin-top:48px;
  padding-top:40px;
  border-top:1px solid var(--gris-borde);
  opacity:0;
  transform:translateY(12px);
  animation:ag-entrada .6s ease-out .25s forwards;
}
.ag-cta__titulo{
  font-size:20px;
  font-weight:700;
  color:var(--texto-oscuro);
  margin:0 0 28px;
}

.cta-cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.cta-card{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:24px 22px 22px;
  background:var(--gris-suave);
  border:1px solid var(--gris-borde);
  transition:border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.cta-card:hover,
.cta-card:focus-visible{
  border-color:var(--rojo);
  background:#fff;
  transform:translateY(-2px);
}
.cta-card__icono{
  width:26px;height:26px;
  color:var(--rojo);
  margin-bottom:16px;
}
.cta-card__titulo{
  font-size:15px;
  font-weight:700;
  color:var(--texto-oscuro);
  margin-bottom:6px;
}
.cta-card__texto{
  font-size:13px;
  line-height:1.55;
  color:var(--texto-cuerpo);
  margin-bottom:16px;
}
.cta-card__flecha{
  margin-top:auto;
  font-size:13px;
  font-weight:700;
  color:var(--rojo);
}
.cta-card:hover .cta-card__flecha{color:var(--rojo-hover);}

.ag-telefono{
  margin-top:28px;
  font-size:14px;
  color:var(--texto-cuerpo);
}
.ag-telefono a{
  font-weight:700;
  color:var(--rojo);
  transition:color .3s ease;
}
.ag-telefono a:hover{color:var(--texto-oscuro);}

/* ------------------------------ Pie ------------------------------------- */
.site-socket{
  flex-shrink:0;
  background:var(--negro-footer);
  color:var(--gris-socket);
  font-size:12px;
  padding:18px 0;
}
.site-socket .container{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  align-items:center;
  justify-content:space-between;
}
.socket-menu ul{display:flex;flex-wrap:wrap;gap:8px 24px;}
.site-socket a{transition:color .3s ease;}
.site-socket a:hover{color:#fff;}

/* ------------------------------ Animación ------------------------------- */
@keyframes ag-entrada{to{opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce){
  .ag-mensaje,.ag-cta{animation:none;opacity:1;transform:none;}
  .cta-card{transition:none;}
  .cta-card:hover{transform:none;}
}

/* ------------------------------ Responsive ------------------------------ */
@media (max-width:860px){
  .cta-cards{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  body{font-size:14px;}
  .site-header{padding-top:24px;}
  .site-logo img{width:150px;}
  .ag-mensaje{padding:36px 0 4px;}
  .ag-titulo{font-size:25px;}
  .ag-sub{font-size:16px;}
  .ag-cta{margin-top:36px;padding-top:32px;}
  .cta-cards{grid-template-columns:1fr;}
  .site-socket .container{justify-content:flex-start;}
}

/* ------------------------------ Índice (solo index.html raíz) ----------- */
.indice{padding:40px 0 64px;}
.indice h1{font-size:26px;color:var(--texto-oscuro);margin-bottom:8px;}
.indice p.lead{margin-bottom:32px;}
.indice h2{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--rojo);
  margin:32px 0 12px;
}
.indice ol{margin:0;padding-left:20px;}
.indice li{margin-bottom:6px;font-size:14px;}
.indice li a{color:var(--texto-oscuro);border-bottom:1px solid var(--gris-borde);}
.indice li a:hover{color:var(--rojo);border-color:var(--rojo);}
.indice li span{color:#9a9a9a;font-size:12px;}