/* ============================================================
   1. TOKENS
   ============================================================ */
:root{
  --azul-profundo:#00263A;
  --azul-noche:#001B2A;
  --azul-petroleo:#006A86;
  --cian:#00ADEA;
  --verde:#00835D;
  --verde-vivo:#00A86B;
  --navy-hn:#00264B;
  --lima-hn:#8DCA24;
  --verde-hn:#269C36;
  --tinta:#231F20;
  --gris:#5A6672;
  --gris-claro:#8A96A2;
  --linea:#DDE5EA;
  --hueso:#F4F7F9;
  --blanco:#FFFFFF;
  --gradiente:linear-gradient(118deg,#00ADEA 0%,#0089A6 45%,#00835D 100%);
  --gradiente-suave:linear-gradient(118deg,rgba(0,173,234,.14) 0%,rgba(0,131,93,.14) 100%);
  --sombra:0 18px 44px rgba(0,38,58,.10);
  --sombra-alta:0 28px 70px rgba(0,38,58,.20);
}

/* ============================================================
   2. BASE
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:17px;
  line-height:1.72;
  color:var(--gris);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{
  font-family:'Archivo','Inter',Arial,sans-serif;
  color:var(--azul-profundo);
  margin:0;
  letter-spacing:-.02em;
  line-height:1.1;
}
h1{font-size:64px;font-weight:800}
h2{font-size:44px;font-weight:700}
h3{font-size:23px;font-weight:700;line-height:1.28}
h4{font-size:18px;font-weight:700;line-height:1.35}
p{margin:0}
figure{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}
ul{margin:0;padding:0;list-style:none}
body{overflow-x:hidden}

.contenedor{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding-left:32px;
  padding-right:32px;
}
.seccion{padding-top:110px;padding-bottom:110px}
.seccion-hueso{background:var(--hueso)}
.seccion-oscura{background:var(--azul-profundo);color:rgba(255,255,255,.93)}
.seccion-oscura h2,.seccion-oscura h3,.seccion-oscura h4{color:#fff}

/* --- Kicker: el motivo de marca (cápsula con gradiente del isotipo) -------- */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'Archivo',Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--azul-petroleo);
  margin-bottom:22px;
}
.kicker::before{
  content:"";
  width:34px;
  height:10px;
  border-radius:5px;
  background:var(--gradiente);
  flex:none;
}
.seccion-oscura .kicker{color:var(--cian)}

.entradilla{font-size:20px;line-height:1.68;color:var(--gris)}
.seccion-oscura .entradilla,.honduras .entradilla{color:#fff}

/* --- Botones -------------------------------------------------------------- */
.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:17px 34px;
  border-radius:44px;
  font-family:'Archivo',Arial,sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:.01em;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,color .22s ease,border-color .22s ease;
}
.boton-primario{background:var(--gradiente);color:#fff;box-shadow:0 12px 30px rgba(0,106,134,.34)}
.boton-primario:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,106,134,.44)}
.boton-linea{border-color:rgba(255,255,255,.5);color:#fff}
.boton-linea:hover{background:#fff;color:var(--azul-profundo);border-color:#fff}
.boton-linea-oscuro{border-color:var(--linea);color:var(--azul-profundo);background:#fff}
.boton-linea-oscuro:hover{border-color:var(--azul-petroleo);color:var(--azul-petroleo)}

/* ============================================================
   3. CABECERA
   ============================================================ */
.barra-superior{
  background:var(--azul-noche);
  color:#fff;
  font-size:13.5px;
}
.barra-superior-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:11px;
  padding-bottom:11px;
}
.barra-superior-datos{display:flex;align-items:center;gap:28px}
.barra-superior a{display:inline-flex;align-items:center;gap:8px;transition:color .2s ease}
.barra-superior a:hover{color:var(--cian)}
.barra-superior svg{flex:none;opacity:.8}
.barra-superior-lema{
  font-family:'Archivo',Arial,sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.85);
}

.cabecera{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--linea);
}
.cabecera-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:18px;
  padding-bottom:18px;
}
.marca img{width:206px}
.menu{display:flex;align-items:center;gap:24px}
.menu a{
  font-size:14.5px;
  font-weight:500;
  white-space:nowrap;   /* un enlace de menú nunca debe partirse en dos líneas */
  color:var(--azul-profundo);
  padding-bottom:4px;
  border-bottom:2px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.menu a:hover{color:var(--azul-petroleo);border-bottom-color:var(--cian)}
.cabecera-acciones{display:flex;align-items:center;gap:12px}
.cabecera .boton{padding:12px 22px;font-size:13.5px;white-space:nowrap}

.boton-menu{
  display:none;
  width:46px;
  height:46px;
  border:1px solid var(--linea);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  padding:0;
}
.boton-menu span{display:block;width:20px;height:2px;background:var(--azul-profundo);border-radius:2px}

/* ============================================================
   4. HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:660px;
  display:flex;
  align-items:center;
  /* Fotografía: grupo electrógeno a gas en sala de planta.
     Es una imagen de banco (licencia Freepik) — sustituir por la foto real del generador
     de Energy Bond en cuanto esté disponible, manteniendo el mismo nombre de archivo.
     (NO usar planta-solar-aerea.jpg: son paneles solares, no generación con Gas LP.) */
  background-color:var(--azul-profundo);
  background-image:
    linear-gradient(100deg,rgba(0,24,38,.97) 0%,rgba(0,32,50,.94) 42%,rgba(0,42,60,.78) 66%,rgba(0,58,74,.55) 100%),
    url('../img/generador-gas-lp.jpg');
  background-size:cover;
  background-position:center right;
  padding-top:120px;
  padding-bottom:120px;
  overflow:hidden;
}
/* Sin max-width propio: hereda el ancho de .contenedor para que el titular
   arranque exactamente en la misma vertical que el logo de la cabecera.
   El ancho del texto se limita en cada elemento, no en el bloque. */
.hero-inner{position:relative;z-index:2}
.hero .kicker{color:var(--cian)}
.hero h1{color:#fff;margin-bottom:26px;max-width:1080px}
/* Salto controlado para que el titular ocupe exactamente dos líneas. */
.salto-hero{display:inline}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,#4FD2FF 0%,#37D6A2 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-texto{font-size:20px;line-height:1.7;color:#fff;max-width:660px;margin-bottom:40px}
.hero-acciones{display:flex;flex-wrap:wrap;gap:16px}

/* decoración: las dos cápsulas cruzadas del isotipo */
.isotipo-deco{
  position:absolute;
  right:-140px;
  bottom:-160px;
  width:660px;
  height:660px;
  z-index:1;
  opacity:.26;
  pointer-events:none;
}

/* ============================================================
   5. FRANJA DE CIFRAS
   ============================================================ */
.cifras{background:var(--azul-noche);color:#fff}
.cifras-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:rgba(255,255,255,.12);
  border-left:1px solid rgba(255,255,255,.12);
  border-right:1px solid rgba(255,255,255,.12);
}
.cifra{background:var(--azul-noche);padding:44px 30px}
.cifra-valor{
  font-family:'Archivo',Arial,sans-serif;
  font-size:42px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  background:linear-gradient(100deg,#4FD2FF 0%,#37D6A2 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:12px;
}
.cifra-texto{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.92)}

/* ============================================================
   6. BLOQUES DE DOS COLUMNAS
   ============================================================ */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.split-texto p + p{margin-top:20px}
.split-media{position:relative}
.split-media img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:22px;
  box-shadow:var(--sombra-alta);
}

.tarjeta-flotante{
  position:absolute;
  left:-36px;
  bottom:-34px;
  width:290px;
  background:#fff;
  border-radius:18px;
  padding:28px 30px;
  box-shadow:var(--sombra-alta);
  border-top:5px solid transparent;
  background-image:linear-gradient(#fff,#fff),var(--gradiente);
  background-origin:border-box;
  background-clip:padding-box,border-box;
}
.tarjeta-flotante-titulo{
  font-family:'Archivo',Arial,sans-serif;
  font-size:15px;
  font-weight:700;
  color:var(--azul-profundo);
  margin-bottom:8px;
}
.tarjeta-flotante p{font-size:14.5px;line-height:1.6}

.lista-check{margin-top:30px;display:flex;flex-direction:column;gap:16px}
.lista-check li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;line-height:1.6}
.lista-check svg{flex:none;margin-top:4px}

/* ============================================================
   7. TARJETAS / GRID DE SOLUCIÓN
   ============================================================ */
.encabezado-seccion{max-width:760px;margin-bottom:60px}
.encabezado-seccion.centrado{margin-left:auto;margin-right:auto;text-align:center}
.encabezado-seccion h2{margin-bottom:22px}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}

.tarjeta{
  background:#fff;
  border:1px solid var(--linea);
  border-radius:20px;
  padding:38px 32px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.tarjeta:hover{transform:translateY(-5px);box-shadow:var(--sombra);border-color:transparent}
.tarjeta h3{margin-bottom:14px}
.tarjeta p{font-size:16px;line-height:1.68}
.icono{
  width:60px;
  height:60px;
  border-radius:17px;
  background:var(--gradiente);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:26px;
}
.icono svg{width:28px;height:28px}

/* --- Identidad: tres bloques numerados ------------------------------------ */
.bloque-identidad{
  background:#fff;
  border-radius:20px;
  padding:40px 34px;
  border:1px solid var(--linea);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.numero{
  font-family:'Archivo',Arial,sans-serif;
  font-size:15px;
  font-weight:800;
  width:46px;
  height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:var(--gradiente);
}
.bloque-identidad p{font-size:16px;line-height:1.68}

/* ============================================================
   8. GAS LP — COMPARATIVA
   ============================================================ */
.comparativa{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(255,255,255,.14);
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  margin-top:60px;
}
.comparativa-celda{background:var(--azul-profundo);padding:40px 34px}
.comparativa-celda h4{margin-bottom:14px}
.comparativa-celda p{font-size:15.5px;line-height:1.66;color:rgba(255,255,255,.92)}
.etiqueta-gradiente{
  display:inline-block;
  font-family:'Archivo',Arial,sans-serif;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:7px 16px;
  border-radius:30px;
  background:var(--gradiente);
  color:#fff;
  margin-bottom:20px;
}

/* ============================================================
   9. PROYECTO HONDURAS
   ============================================================ */
.honduras{
  background-color:var(--navy-hn);
  background-image:linear-gradient(180deg,rgba(0,38,75,.97) 0%,rgba(0,38,75,.90) 55%,rgba(0,27,42,.97) 100%),url('../img/montanas-honduras.jpg');
  background-size:cover;
  background-position:center top;
  color:rgba(255,255,255,.93);
}
.honduras h2,.honduras h3,.honduras h4{color:#fff}
.honduras .kicker{color:var(--lima-hn)}
.honduras .kicker::before{background:linear-gradient(100deg,#8DCA24 0%,#269C36 100%)}

.honduras-cabecera{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:70px;
  align-items:center;
  margin-bottom:70px;
}
.honduras-mapa{display:flex;flex-direction:column;align-items:center;gap:18px}
.honduras-mapa img{width:340px;filter:drop-shadow(0 16px 34px rgba(0,0,0,.4))}
.honduras-mapa figcaption{
  text-align:center;
  font-size:15px;
  line-height:1.6;
  color:#fff;
  max-width:300px;
}

.honduras-fases{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.fase{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  padding:34px 28px;
}
.fase-numero{
  font-family:'Archivo',Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--lima-hn);
  margin-bottom:12px;
}
.fase h4{margin-bottom:18px}
.fase ul{display:flex;flex-direction:column;gap:12px}
.fase li{
  position:relative;
  padding-left:20px;
  font-size:15px;
  line-height:1.6;
  color:rgba(255,255,255,.94);
}
.fase li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:linear-gradient(100deg,#8DCA24,#269C36);
}

/* --- Cronograma ----------------------------------------------------------- */
.cronograma{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-top:70px;
  position:relative;
}
.hito{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  padding:32px 30px;
  border-left:4px solid var(--lima-hn);
}
.hito-fecha{
  font-family:'Archivo',Arial,sans-serif;
  font-size:20px;
  font-weight:800;
  color:#fff;
  margin-bottom:8px;
}
.hito p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.94)}

.honduras-infografia{margin-top:70px}
.honduras-infografia img{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 70px rgba(0,0,0,.42);
}
.pie-figura{
  margin-top:16px;
  font-size:14px;
  color:rgba(255,255,255,.88);
  text-align:center;
}

/* ============================================================
   10. PRÓXIMOS PASOS
   ============================================================ */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.paso{
  background:#fff;
  border:1px solid var(--linea);
  border-radius:20px;
  padding:38px 32px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.paso-indice{
  font-family:'Archivo',Arial,sans-serif;
  font-size:44px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.04em;
  background:var(--gradiente);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.paso p{font-size:16px;line-height:1.66}

/* ============================================================
   11. CTA
   ============================================================ */
/* Fotografía: subestación eléctrica al anochecer — la infraestructura a la que
   Energy Bond se interconecta. (Antes había un aerogenerador, que no corresponde.) */
.cta{
  background-image:linear-gradient(100deg,rgba(0,24,38,.94) 0%,rgba(0,66,90,.88) 55%,rgba(0,92,70,.84) 100%),url('../img/subestacion-anochecer.jpg');
  background-size:cover;
  background-position:center;
  text-align:center;
}
.cta h2{color:#fff;max-width:880px;margin:0 auto 24px}
.cta p{font-size:20px;color:#fff;max-width:660px;margin:0 auto 40px}
.cta-acciones{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}

/* ============================================================
   12. CONTACTO
   ============================================================ */
.contacto-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:70px;align-items:start}
.contactos{display:flex;flex-direction:column;gap:22px;margin-top:38px}
.tarjeta-contacto{
  background:#fff;
  border:1px solid var(--linea);
  border-radius:20px;
  padding:32px 30px;
}
.tarjeta-contacto-cabecera{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.avatar{
  width:52px;
  height:52px;
  border-radius:16px;
  background:var(--gradiente);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Archivo',Arial,sans-serif;
  font-weight:800;
  font-size:19px;
  color:#fff;
  flex:none;
}
.tarjeta-contacto-cabecera h4{margin-bottom:3px}
.zona{
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--azul-petroleo);
}
.datos-contacto{display:flex;flex-direction:column;gap:12px}
.datos-contacto a{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:16px;
  color:var(--gris);
  transition:color .2s ease;
  word-break:break-word;
}
.datos-contacto a:hover{color:var(--azul-petroleo)}
.datos-contacto svg{flex:none;color:var(--azul-petroleo)}

.formulario{
  background:#fff;
  border:1px solid var(--linea);
  border-radius:22px;
  padding:44px 40px;
  box-shadow:var(--sombra);
}
.campo{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.campo label{
  font-family:'Archivo',Arial,sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--azul-profundo);
}
.campo input,.campo select,.campo textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--linea);
  border-radius:12px;
  font-family:'Inter',Arial,sans-serif;
  font-size:16px;
  color:var(--tinta);
  background:var(--hueso);
  transition:border-color .2s ease,background-color .2s ease;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;
  border-color:var(--azul-petroleo);
  background:#fff;
}
.campo textarea{min-height:130px;resize:vertical}
.nota-legal{font-size:13.5px;line-height:1.6;color:var(--gris);margin-top:18px}

/* Campo trampa anti-bot: fuera de la vista pero presente en el DOM.
   No usar display:none — algunos bots detectan esa señal y lo saltan. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.respuesta-formulario{
  display:none;
  margin-top:18px;
  padding:14px 16px;
  border-radius:12px;
  font-size:14.5px;
  line-height:1.6;
}
.respuesta-formulario.ok{display:block;background:#E7F7F0;border:1px solid #A9E0C9;color:#0A6B4A}
.respuesta-formulario.error{display:block;background:#FDECEC;border:1px solid #F5C6C6;color:#9B1C1C}
.formulario .boton{width:100%}

/* ============================================================
   13. PIE
   ============================================================ */
.pie{background:var(--azul-noche);color:#fff;font-size:15px}
.pie-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:60px;
  padding-top:80px;
  padding-bottom:60px;
}
.pie img{width:230px;margin-bottom:26px}
.pie p{line-height:1.72;max-width:400px}
.pie h4{
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:22px;
  font-weight:700;
}
.pie-navegacion{grid-column:3}
.pie-enlaces{display:flex;flex-direction:column;gap:13px}
.pie-enlaces a{transition:color .2s ease}
.pie-enlaces a:hover{color:var(--cian)}
.pie-inferior{
  border-top:1px solid rgba(255,255,255,.11);
  padding-top:26px;
  padding-bottom:34px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  font-size:13.5px;
  color:#fff;
}

/* ============================================================
   14. FONDOS VIVOS Y MOVIMIENTO DE ENTRADA
   NOTA ELEMENTOR: nada de esto tiene equivalente nativo directo.
     · Los fondos vivos (.fondo-vivo / .foco-cursor) → CSS personalizado de la
       sección, o un widget "html" con este bloque.
     · Las entradas → usar "Animaciones de entrada" de Elementor Pro por widget
       y borrar entonces este bloque junto con su <script>.
   Todo el movimiento se desactiva solo si el sistema pide menos animación
   (prefers-reduced-motion): la clase js-anim ni siquiera se añade.
   ============================================================ */

.foco-cursor,.fondo-vivo{position:relative;overflow:hidden}
.foco-cursor > .contenedor,.fondo-vivo > .contenedor{position:relative;z-index:3}

/* halo que sigue al puntero */
.foco-cursor::after,.fondo-vivo::after{
  content:"";
  position:absolute;
  top:0;right:0;bottom:0;left:0;
  z-index:2;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s ease;
  background:radial-gradient(400px 400px at var(--foco-x,50%) var(--foco-y,50%),rgba(0,173,234,.20),transparent 72%);
}
.foco-cursor.foco-activo::after,.fondo-vivo.foco-activo::after{opacity:1}

/* capa de gradientes en deriva lenta */
.fondo-vivo::before{
  content:"";
  position:absolute;
  top:-30%;right:-30%;bottom:-30%;left:-30%;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(560px 460px at 20% 26%,rgba(0,173,234,.20),transparent 64%),
    radial-gradient(520px 480px at 80% 74%,rgba(0,168,107,.20),transparent 64%),
    radial-gradient(460px 400px at 58% 6%,rgba(0,106,134,.16),transparent 62%);
  animation:deriva 26s ease-in-out infinite alternate;
}

/* variante suave para las secciones claras */
.fondo-vivo-claro::before{
  background:
    radial-gradient(560px 460px at 18% 24%,rgba(0,173,234,.14),transparent 64%),
    radial-gradient(520px 480px at 82% 76%,rgba(0,168,107,.13),transparent 64%);
}
.fondo-vivo-claro::after{
  background:radial-gradient(400px 400px at var(--foco-x,50%) var(--foco-y,50%),rgba(0,106,134,.10),transparent 72%);
}

@keyframes deriva{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-4%,3%,0) scale(1.08)}
  100%{transform:translate3d(4%,-3%,0) scale(1.04)}
}

/* --- Movimiento de entrada -------------------------------------------- */
/* Todos los selectores de esta lista tienen que ser de UNA sola clase, para que
   la regla .visible de abajo (misma especificidad, declarada después) los gane.
   Con selectores descendentes tipo ".hero h1" el elemento se quedaría invisible. */
html.js-anim .anim-hero,
html.js-anim .anim-cta,
html.js-anim .encabezado-seccion,
html.js-anim .split-texto,
html.js-anim .split-media,
html.js-anim .cifra,
html.js-anim .tarjeta,
html.js-anim .bloque-identidad,
html.js-anim .comparativa-celda,
html.js-anim .fase,
html.js-anim .hito,
html.js-anim .paso,
html.js-anim .honduras-mapa,
html.js-anim .honduras-infografia,
html.js-anim .tarjeta-contacto,
html.js-anim .formulario,
html.js-anim .cta-acciones{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1);
}
html.js-anim .visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .fondo-vivo::before{animation:none}
}

/* ============================================================
   15. RESPONSIVE — breakpoints de Elementor
   ============================================================ */
/* Con seis enlaces, el selector de idioma y el botón, la cabecera se queda sin
   sitio antes de 1024. Se pasa a menú desplegable un poco antes para que los
   enlaces nunca se partan en dos líneas. */
@media (max-width:1180px){
  .menu{display:none}
  .cabecera-acciones .boton{display:none}
  .boton-menu{display:flex}
}

@media (max-width:1024px){
  html{scroll-padding-top:80px}
  h1{font-size:46px}
  h2{font-size:35px}
  .seccion{padding-top:80px;padding-bottom:80px}
  .contenedor{padding-left:26px;padding-right:26px}
  .menu,.cabecera-acciones .boton{display:none}
  .boton-menu{display:flex}
  .marca img{width:186px}
  .hero{min-height:auto;padding-top:90px;padding-bottom:90px}
  .hero h1{max-width:none}
  .salto-hero{display:none}   /* por debajo de 1024 el titular fluye solo */
  .hero-texto{font-size:18px}
  .isotipo-deco{width:440px;height:440px;right:-160px;bottom:-180px;opacity:.32}
  .cifras-grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:50px}
  .tarjeta-flotante{position:static;width:auto;margin-top:22px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3,.pasos{grid-template-columns:repeat(2,1fr)}
  .comparativa{grid-template-columns:1fr}
  .honduras-cabecera{grid-template-columns:1fr;gap:44px}
  .honduras-fases{grid-template-columns:repeat(2,1fr)}
  .cronograma{grid-template-columns:1fr}
  .contacto-grid{grid-template-columns:1fr;gap:50px}
  .pie-grid{grid-template-columns:1fr 1fr;gap:44px}
  .pie-navegacion{grid-column:auto}
  .barra-superior-lema{display:none}
}

@media (max-width:767px){
  body{font-size:16px}
  h1{font-size:34px}
  h2{font-size:28px}
  h3{font-size:20px}
  .seccion{padding-top:62px;padding-bottom:62px}
  .contenedor{padding-left:20px;padding-right:20px}
  .entradilla,.hero-texto{font-size:17px}
  .barra-superior-datos{gap:14px;font-size:12.5px;flex-wrap:wrap;justify-content:center}
  .barra-superior-inner{justify-content:center}
  .barra-superior-datos a:first-child{display:none}
  .hero{padding-top:66px;padding-bottom:66px}
  .hero-acciones .boton,.cta-acciones .boton{width:100%}
  .isotipo-deco{display:none}
  .cifras-grid{grid-template-columns:1fr}
  .cifra{padding:32px 24px}
  .cifra-valor{font-size:36px}
  .grid-4,.grid-3,.grid-2,.pasos,.honduras-fases{grid-template-columns:1fr}
  .encabezado-seccion{margin-bottom:40px}
  .tarjeta,.bloque-identidad,.paso,.tarjeta-contacto{padding:30px 24px}
  .formulario{padding:32px 24px}
  .honduras-mapa img{width:250px}
  .pie-grid{grid-template-columns:1fr;gap:40px;padding-top:56px}
  .pie-inferior{flex-direction:column;align-items:flex-start;text-align:left}
}

/* menú móvil desplegable */
.menu.abierto{
  display:flex;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  background:#fff;
  border-bottom:1px solid var(--linea);
  padding:12px 26px 26px;
  box-shadow:var(--sombra);
}
.menu.abierto a{width:100%;padding:15px 0;border-bottom:1px solid var(--linea)}

/* ============================================================
   16. SELECTOR DE IDIOMA
   Las banderas van en SVG y no como emoji: Windows no dibuja los
   emoji de bandera y se verían como dos letras sueltas.
   ============================================================ */
.idiomas{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid var(--linea);
  border-radius:30px;
  background:#fff;
}
.idioma{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 11px;
  border-radius:24px;
  font-family:'Archivo',Arial,sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--gris);
  transition:background-color .2s ease,color .2s ease;
}
.idioma:hover{background:var(--hueso);color:var(--azul-profundo)}
.idioma.activo{background:var(--azul-profundo);color:#fff}
.idioma.activo:hover{background:var(--azul-profundo);color:#fff}
.idioma svg{
  width:19px;
  height:13px;
  display:block;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,38,58,.16);
}

@media (max-width:1024px){
  .idiomas{margin-right:4px}
  .idioma{padding:7px 10px;font-size:12px}
  .idioma span{display:none}   /* en pantallas pequeñas basta la bandera */
  .idioma svg{width:22px;height:15px}
}