@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap');
:root{--navy:#003764;--yellow:#FFC626;--blue:#009ADE;--white:#FFFFFF;--ink:#1f2d3a;--line:#D9E4EE;--grey:#7C8A9A;--soft:#F4F8FB;}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'DM Sans',sans-serif;background:var(--white);color:var(--ink);line-height:1.6;}
h1,h2,h3{font-family:'Quicksand',sans-serif;font-weight:700;}
body.lang-es .en{display:none;}
body.lang-en .es{display:none;}
.wrap{max-width:1024px;margin:0 auto;padding:0 24px;}
a{color:var(--blue);}

/* Barra superior */
.topbar{background:var(--white);border-bottom:1px solid #e6eaef;position:sticky;top:0;z-index:20;}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0;}
.logo img{height:42px;width:auto;display:block;}
.logo svg{width:52px;height:34px;}
.logo .name{font-family:'Quicksand',sans-serif;font-weight:700;font-size:1.02rem;line-height:1.05;}
.logo .name span{display:block;}
.logo .name .a{color:var(--blue);}
.logo .name .m{color:var(--navy);}
.topnav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end;}
.topnav a{font-family:'Quicksand',sans-serif;font-weight:600;color:var(--navy);text-decoration:none;font-size:.92rem;}
.topnav a:hover{color:var(--blue);}
.topnav a.on{color:var(--blue);}

/* EL WIDGET DE TRUSTPILOT EN LA BARRA.
   Va en el centro, entre el logo y el menú. Se esconde por debajo de
   900px porque en celular la barra ya se parte en dos líneas. */
.tp{flex:1;display:flex;justify-content:center;align-items:flex-end;
  align-self:stretch;min-width:0;padding:0 12px;}
.tp .trustpilot-widget{max-width:260px;width:100%;}
@media(max-width:900px){ .tp{display:none;} }
.lang-switch{display:flex;gap:6px;}
.lang-switch button{font-family:'Quicksand',sans-serif;font-weight:600;border:1px solid var(--navy);background:var(--white);color:var(--navy);padding:5px 13px;border-radius:20px;cursor:pointer;font-size:.78rem;}
.lang-switch button.active{background:var(--yellow);border-color:var(--yellow);color:var(--navy);}

/* Hero */
.hero{background:var(--navy);color:var(--white);padding:64px 0 58px;}
.kicker{font-family:'Quicksand',sans-serif;font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;color:var(--yellow);margin-bottom:20px;}
.hero h1{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.14;margin-bottom:18px;max-width:980px;}
.hero h1 .hl{color:var(--yellow);}
.hero .lead{font-size:1.12rem;max-width:900px;opacity:.95;margin-bottom:26px;}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.btn{font-family:'Quicksand',sans-serif;font-weight:700;text-decoration:none;padding:15px 30px;border-radius:32px;font-size:1rem;display:inline-block;border:none;cursor:pointer;}
.btn-primary{background:var(--yellow);color:var(--navy);}
.btn-ghost{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.7);}
.free-line{margin-top:12px;font-size:.88rem;opacity:.8;}

/* ===================================================================
   EL HERO CON LA IMAGEN DE FONDO · 15 de septiembre de 2026
   Antes la imagen iba en una celda al lado del texto. Ahora ocupa todo
   el fondo, con la escena a la derecha y el texto encima, a la izquierda.
   La imagen ya trae el lado izquierdo vacío, así que el texto cae sobre
   azul limpio. El degradado de abajo es el seguro: si el recorte se
   mueve en alguna pantalla, el texto se sigue leyendo igual.
   Para cambiarla: reemplaza hero.jpg, horizontal y ancha, con el aire
   a la izquierda. =================================================== */
.hero-fondo{
  background-color:var(--navy);
  background-image:
    linear-gradient(to right,
      rgba(0,55,100,1)   0%,
      rgba(0,55,100,.99) 16%,
      rgba(0,55,100,.70) 36%,
      rgba(0,55,100,.18) 56%,
      rgba(0,55,100,0)   70%),
    url('hero.jpg');
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
  display:flex;
  align-items:center;
  padding:0;
}
/* ===================================================================
   EL HÉROE CONTENIDO · decisión de Adri, 15 de septiembre de 2026
   El héroe NO es una banda de lado a lado: es un rectángulo dentro de
   la misma columna centrada que usa todo el sitio, con el mismo aire a
   los dos lados. Se alinea exacto con "Elige tu juego" y con el resto.
   La caja toma la forma de la imagen (aspect-ratio), así que la escena
   entra completa, sin recortes.
   ⚠️ Si cambias hero.jpg por una de otra proporción, cambia también el
   aspect-ratio de abajo con las medidas nuevas. =================== */
@media(min-width:900px){
  .hero-fondo{
    /* La SECCIÓN va de lado a lado en azul marino, como siempre.
       Lo que se queda dentro de la columna centrada es la IMAGEN:
       mide exactamente el ancho del contenido (1024) y va al centro.
       Así se respeta el aire a los lados y no aparece blanco. */
    max-width:none;
    margin:0;
    background-size:1024px auto, 1024px auto;
    background-position:center center, center center;
    aspect-ratio:auto;
    min-height:455px;
    max-height:none;
  }
  .hero-fondo .wrap{max-width:1024px;width:100%;padding:0 40px;}
  .hero-fondo .hero-texto{max-width:56%;}
  .hero-fondo h1{max-width:none;font-size:clamp(1.7rem,2.6vw,2.4rem);}
  .hero-fondo .lead{max-width:none;font-size:1rem;}
}
/* En celular vuelve a ser banda: una caja con esa forma quedaría de
   167px de alto y no cabría ni el titular. */
@media(max-width:899px){
  .hero-fondo{
    min-height:auto;
    background-position:72% center, 72% center;
    background-image:
      linear-gradient(180deg,
        rgba(0,55,100,.96) 0%,
        rgba(0,55,100,.92) 52%,
        rgba(0,55,100,.62) 78%,
        rgba(0,55,100,.38) 100%),
      url('hero.jpg');
    padding:44px 0 48px;
  }
}


/* EL HERO CON FOTO · texto a la izquierda, foto a la derecha.
   La foto es vertical, así que se recorta sola con object-fit para
   llenar su lado sin deformarse. Si cambias la foto por una horizontal,
   sigue funcionando: se recorta distinto, pero no se estira. */
.hero-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;}
@media(min-width:900px){
  .hero-grid{grid-template-columns:1.25fr .75fr;gap:44px;}
  .hero-grid .hero-texto{min-width:0;}
}
.hero-foto{width:100%;height:100%;max-height:430px;object-fit:cover;object-position:center 30%;
  border-radius:14px;display:block;}
@media(max-width:899px){ .hero-foto{max-height:300px;} }

/* Hero corto: el gancho, no el ensayo */
.hero.corto{padding:52px 0 46px;}
.hero.corto h1{margin-bottom:14px;}
.hero.corto .lead{font-size:1.06rem;max-width:820px;margin-bottom:12px;opacity:.95;}
.hero.corto .free-line{margin-top:0;font-size:.9rem;opacity:.8;}

/* EL PATIO · la sección de juegos, en azul. Es la parte divertida. */
.patio{background:var(--blue);color:var(--white);padding:52px 0 58px;}
.patio .kicker{color:var(--yellow);}
.patio h2{color:var(--white);font-size:clamp(1.5rem,3.4vw,2.2rem);margin-bottom:26px;}
.patio h2 .hl{color:var(--yellow);}
.games.sobre-azul .game{border:none;border-left:5px solid var(--yellow);box-shadow:0 4px 18px rgba(0,40,75,.18);transition:transform .15s ease;}
.games.sobre-azul .game:hover{transform:translateY(-3px);}
.games.sobre-azul .game.locked{background:#EAF3FA;border-left-color:#B9CEDF;box-shadow:none;}
.games.sobre-azul .game.puerta .num{background:var(--yellow);color:var(--navy);}

/* LA IDEA · una línea, sin sermón.
   Va en azul marino a propósito: es la frase que sostiene todo el sitio,
   y el fondo oscuro la separa de lo que hay antes y después. Sobre navy
   el resaltado va en amarillo, igual que en el hero. En azul no se leería. */
.idea{background:var(--navy);padding:52px 0;text-align:center;}
.idea p{font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(1.2rem,2.8vw,1.75rem);line-height:1.3;color:var(--white);max-width:820px;margin:0 auto;}
.idea p .hl{color:var(--yellow);}
.idea p.chico{font-size:1rem;font-weight:600;color:rgba(255,255,255,.72);margin-top:14px;max-width:760px;}

/* Dos columnas: prueba social + correo */
/* Las dos columnas empiezan y terminan a la misma altura. "stretch" hace
   que la columna de la foto crezca hasta donde llegue la del texto, y la
   foto la llena recortándose sola, sin deformarse. */
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch;}
.dos-col > div{min-width:0;display:flex;flex-direction:column;}
.dos-col .capture{padding:24px 24px 20px;margin-top:22px;}
.dos-col .foto{flex:1;width:100%;height:100%;object-fit:cover;object-position:center 25%;}
/* Variante "alineado": la foto NO se estira a la altura de la columna,
   se queda de su tamaño y el texto se centra a su lado. Sirve cuando al
   lado hay poco texto, para que no quede un bloque vacío. */
.dos-col.alineado{align-items:center;}
.dos-col.alineado .foto{flex:none;max-height:420px;border-radius:14px;}
.dos-col.alineado .centrado-v h3{font-size:1.35rem;color:var(--navy);margin-bottom:12px;}
.dos-col.alineado .centrado-v h3 .hl{color:var(--blue);}
.dos-col.alineado .centrado-v p{color:var(--ink);}

/* ===================================================================
   LA SECCIÓN DE LOS TRES · 16 de septiembre de 2026
   Va en el azul de marca y la foto se funde, igual que en el puente.
   Funciona porque la imagen viene SIN FONDO y se aplanó sobre ese
   mismo azul: el fondo de la foto y el de la sección son el mismo
   color, así que no hay borde ni esquina que se note.
   ⚠️ Si cambias equipo.jpg, que venga sin fondo o con ese azul plano.
   =================================================================== */
.sec.azul{background:var(--blue);color:var(--white);}
.sec.azul .foto{border-radius:0;}
.sec.azul .centrado-v h3{color:var(--white);}
.sec.azul .centrado-v h3 .hl{color:var(--yellow);}
.sec.azul .centrado-v p{color:var(--white);opacity:.95;}
.capture h3{color:var(--white);font-size:1.3rem;margin-bottom:16px;}
@media(max-width:820px){ .dos-col{grid-template-columns:1fr;} }

/* Cabecera de páginas internas */
.pagehead{background:var(--navy);color:var(--white);padding:52px 0 46px;}
.pagehead h1{font-size:clamp(1.7rem,3.8vw,2.6rem);line-height:1.18;margin-bottom:14px;max-width:900px;}
.pagehead h1 .hl{color:var(--yellow);}
.pagehead p{max-width:780px;opacity:.93;}

/* Secciones */
.sec{padding:58px 0;border-top:1px solid var(--line);}
.sec.soft{background:var(--soft);}
.sec.plain{border-top:none;}
.sec .kicker{color:var(--blue);}
.sec h2{font-size:clamp(1.55rem,3.4vw,2.2rem);line-height:1.22;margin-bottom:10px;color:var(--navy);}
.sec h2 .hl{color:var(--yellow);}
.sec p.intro{font-size:1.05rem;max-width:800px;margin-bottom:28px;}
.verlink{display:inline-block;margin-top:26px;font-family:'Quicksand',sans-serif;font-weight:700;font-size:.95rem;text-decoration:none;}
.verlink.claro{color:var(--white);opacity:.95;}

/* Destacado de la semana */
/* Los hallazgos de la semana van en dos columnas, para que la portada
   no se alargue. En pantalla angosta bajan solos a una sola columna. */
#destacados{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:900px){ #destacados{grid-template-columns:repeat(2,1fr);} }
.destacado{border:1px solid var(--line);border-left:6px solid var(--yellow);border-radius:14px;padding:24px;margin-bottom:0;background:var(--white);display:flex;flex-direction:column;}
.destacado .acts{margin-top:auto;}
.destacado .date{font-family:'Quicksand',sans-serif;font-weight:600;font-size:.75rem;letter-spacing:.12em;color:var(--blue);text-transform:uppercase;}
.destacado blockquote{font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(1.1rem,2vw,1.32rem);color:var(--navy);margin:10px 0 12px;line-height:1.32;}
.destacado p{font-size:1rem;margin-bottom:18px;max-width:760px;}
.destacado .acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.destacado .go{font-family:'Quicksand',sans-serif;font-weight:700;text-decoration:none;background:var(--yellow);color:var(--navy);padding:13px 26px;border-radius:28px;font-size:.98rem;}
.destacado .art,.destacado .tag{font-family:'Quicksand',sans-serif;font-weight:600;font-size:.92rem;}
.destacado .tag{color:var(--grey);}
.destacado .reto{background:var(--soft);border-radius:10px;padding:13px 16px;font-size:.95rem;color:var(--navy);margin-bottom:16px;}

/* Grilla de juegos */
.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;}
@media(min-width:900px){ .games{grid-template-columns:repeat(2,1fr);} }
@media(min-width:900px){ .games.sobre-azul{grid-template-columns:repeat(3,1fr);} }
/* La tarjeta fija SU PROPIO color de letra. Sin esto, dentro de la
   sección azul heredaba el blanco de .patio y el texto desaparecía
   sobre el fondo blanco de la tarjeta. */
.game{border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:12px;padding:22px;background:var(--white);display:flex;flex-direction:column;color:var(--ink);}
.game .num{font-family:'Quicksand',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:8px;}
.game h3{font-size:1.2rem;color:var(--navy);margin-bottom:8px;line-height:1.25;}
.game p{font-size:.94rem;margin-bottom:16px;flex:1;}
.game .go{font-family:'Quicksand',sans-serif;font-weight:700;text-decoration:none;background:var(--yellow);color:var(--navy);padding:11px 22px;border-radius:26px;font-size:.9rem;align-self:flex-start;}
.game.locked{border-left-color:var(--line);background:var(--soft);}
.game.locked h3,.game.locked p{color:var(--grey);}
.game .soon{font-family:'Quicksand',sans-serif;font-weight:700;font-size:.82rem;color:var(--grey);display:flex;align-items:center;gap:7px;}

/* La puerta */
.game.puerta{border-left-color:var(--yellow);box-shadow:0 2px 14px rgba(0,55,100,.09);}
.game.puerta .num{color:var(--navy);background:var(--yellow);display:inline-block;padding:3px 10px;border-radius:20px;}

/* Hallazgos */
.finding{border-left:5px solid var(--yellow);padding:4px 0 4px 20px;margin-bottom:32px;max-width:780px;}
.finding .date{font-family:'Quicksand',sans-serif;font-weight:600;font-size:.75rem;letter-spacing:.12em;color:var(--blue);text-transform:uppercase;}
.finding blockquote{font-family:'Quicksand',sans-serif;font-weight:700;font-size:1.2rem;color:var(--navy);margin:7px 0 9px;line-height:1.35;}
.finding p{font-size:.98rem;margin-bottom:12px;}
.finding .reto{background:var(--soft);border-radius:10px;padding:12px 16px;font-size:.93rem;color:var(--navy);margin-bottom:12px;}
.finding .acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.finding .go{font-family:'Quicksand',sans-serif;font-weight:700;text-decoration:none;background:var(--yellow);color:var(--navy);padding:9px 20px;border-radius:24px;font-size:.88rem;}
.finding .art{font-family:'Quicksand',sans-serif;font-weight:600;font-size:.88rem;}
.finding .tag{font-family:'Quicksand',sans-serif;font-weight:600;font-size:.85rem;color:var(--grey);}
p.nota{max-width:780px;font-size:.85rem;color:var(--grey);border-top:1px solid var(--line);padding-top:16px;margin-top:34px;}

/* En qué creemos */
.creencia{border-left:6px solid var(--yellow);padding:4px 0 4px 22px;margin-top:30px;max-width:840px;}
.creencia .grande{font-family:'Quicksand',sans-serif;font-weight:700;font-size:clamp(1.25rem,2.8vw,1.7rem);line-height:1.3;color:var(--navy);margin-bottom:10px;}
.creencia .grande .hl{color:var(--blue);}
.creencia .porque{font-family:'Quicksand',sans-serif;font-weight:700;font-size:1.1rem;color:var(--blue);margin-bottom:14px;}
.creencia .remate{font-size:1rem;max-width:760px;}
.creencia .remate strong{color:var(--navy);}

/* Cifras */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-top:26px;max-width:800px;}
.cifras div{border-top:3px solid var(--yellow);padding-top:10px;}
.cifras b{display:block;font-family:'Quicksand',sans-serif;font-weight:700;font-size:1.9rem;color:var(--navy);line-height:1.1;}
.cifras span{font-size:.88rem;color:var(--grey);}

/* Prueba social */
.quote{background:var(--soft);border-radius:14px;padding:26px 28px;max-width:800px;}
/* Al lado de la foto, la reseña va sin caja ni relleno. La caja no se ve
   (es del mismo color del fondo) pero empujaba el texto hacia abajo y
   descuadraba el arranque de las dos columnas. */
.dos-col .quote{background:transparent;padding:0;}
.quote q{font-family:'Quicksand',sans-serif;font-weight:600;font-style:italic;font-size:1.16rem;color:var(--navy);}
.quote .who{display:block;margin-top:10px;font-family:'Quicksand',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);}
.proof{margin-top:18px;max-width:700px;color:var(--ink);}
/* Foto en la columna de al lado del formulario. Lista para cuando
   Adriana mande la imagen: se pone <img class="foto" src="..." alt="..."> */
.foto{width:100%;height:auto;border-radius:16px;display:block;}

/* Captura */
/* LA BANDA DEL CORREO · una sola tarea, nada que compita.
   Angosta a propósito: en una columna estrecha el ojo no tiene a dónde
   irse, y la reseña queda pegada al formulario para empujar la decisión. */
/* La banda entera va en azul marino, y la tarjeta pierde su fondo y se
   queda solo con el borde. Así deja de verse una caja flotando en el
   vacío: la sección completa es la zona del correo.
   Efecto secundario que conviene: lo único blanco que queda es el
   formulario, y ahí es exactamente donde debe ir el ojo. */
.banda{background:var(--navy);padding:56px 0;}
.banda + footer{border-top:1px solid rgba(255,255,255,.14);}
/* Mismo lenguaje que las tarjetas de juego: marco fino y una barra
   gruesa de color a la izquierda. Aquí en amarillo, que es el acento
   sobre azul marino. El texto se alinea a la izquierda porque una barra
   lateral con texto centrado se ve descuadrada, y además así coincide
   con el formulario, que también alinea sus campos a la izquierda. */
.capture.centrada{max-width:520px;margin:0 auto;text-align:left;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.18);
  border-left:5px solid var(--yellow);
  border-radius:12px;
  padding:30px 28px 26px;}
.capture.centrada .kicker{margin-bottom:14px;}
.capture.centrada h3{margin-bottom:18px;}
.capture.centrada .privacidad{margin-top:14px;}

/* LA CALIFICACIÓN DE TRUSTPILOT, dentro de la banda del correo.
   Va justo debajo de la reseña y encima del formulario: primero lees
   lo que dijo alguien, después ves que hay 18 más, y ahí está la casilla. */
.trust{display:flex;align-items:center;gap:8px;text-decoration:none;
  margin:-6px 0 18px;font-family:'Quicksand',sans-serif;font-weight:600;
  font-size:.85rem;color:rgba(255,255,255,.85);}
.trust:hover{color:#fff;}
.trust .estrellas{color:var(--yellow);letter-spacing:.05em;font-size:.95rem;}
.quote.chica{background:rgba(255,255,255,.08);border-radius:12px;padding:16px 18px;margin-bottom:20px;max-width:none;}
.quote.chica q{font-size:.98rem;color:var(--white);opacity:.95;font-style:italic;}
.quote.chica .who{margin-top:8px;font-size:.7rem;color:var(--yellow);}

.capture{background:var(--navy);color:var(--white);border-radius:16px;padding:34px;}
.capture .kicker{color:var(--yellow);}
.capture h2{color:var(--white);}
.capture p{opacity:.92;max-width:640px;margin-bottom:20px;}
.capture .privacidad{font-size:.84rem;opacity:.75;margin-top:12px;margin-bottom:0;}
/* EL RECORTE DEL FORMULARIO.
   JotForm deja un espacio en blanco arriba que no se puede quitar desde
   aquí, porque el formulario vive en otro sitio. La solución: se sube el
   iframe con un margen negativo y la caja le corta lo que sobra.
   Si algún día se ve cortado el "Your name", este número es el culpable. */
/* SIN DOBLE BARRA DE DESPLAZAMIENTO.
   Si el marco es más corto que el formulario, JotForm mete su propia
   barra adentro y quedan dos. La solución: al marco se le da altura de
   sobra por dentro (así JotForm nunca necesita barra) y esta caja le
   recorta lo que sobra por fuera, arriba y abajo. */
/* 🔴 CAMBIADO el 15 de septiembre de 2026. Antes la caja medía 228px y
   el iframe se subía 52px con margen negativo, para esconder el relleno
   de JotForm. El formulario creció y ese recorte empezó a cortarle el
   campo del nombre por arriba.
   Ahora el iframe arranca en su borde de verdad (sin margen negativo) y
   la caja es holgada. Si sobra espacio abajo no se nota, porque la caja
   y el formulario son los dos blancos. Si algún día el formulario crece
   otra vez, SUBE este número y listo: es el único que hay que mover. */
.formbox{background:var(--white);border-radius:12px;padding:4px;overflow:hidden;height:252px;}
.formbox iframe{width:100%;height:520px;margin-top:0;border:none;display:block;}
/* En pantalla angosta JotForm apila los campos y se hace más alto. */
@media(max-width:560px){ .formbox{height:318px;} }
/* el selector de idioma ya oculta .en o .es, esto evita el hueco que deja el iframe escondido */
body.lang-es .formbox iframe.en,
body.lang-en .formbox iframe.es{display:none;}
.formbox .todo{color:#8a3b00;background:#FFF4E0;border:1px dashed #E0A050;border-radius:8px;padding:16px;font-size:.9rem;}

/* Puente a Adriana */
.bridge{background:var(--blue);color:var(--white);padding:52px 0;}
.bridge .kicker{color:var(--yellow);}
.bridge h2{color:var(--white);font-size:clamp(1.5rem,3.2vw,2.1rem);margin-bottom:12px;max-width:820px;}
.bridge p{max-width:700px;margin-bottom:22px;opacity:.95;}
.bridge .doors{margin-top:36px;}
/* EL PUENTE CON FOTO · foto a la izquierda, texto a la derecha.
   Es el punto donde el lector decide si te escribe, y por eso aquí va
   una foto tuya de verdad y no una de banco de imágenes. */
/* La foto va a la DERECHA. En la sección de arriba la foto está a la
   izquierda, y dos seguidas del mismo lado desbalancean la página.
   Se invierte con "order", sin tocar el HTML: así el texto queda
   primero también en celular, que es como se debe leer. */
.bridge-grid{display:grid;grid-template-columns:1fr;gap:26px;align-items:center;}
.bridge-texto{order:1;}
.bridge-foto{order:2;}
@media(min-width:900px){ .bridge-grid{grid-template-columns:1.15fr .85fr;gap:40px;} }
.bridge-foto img{width:100%;height:100%;max-height:340px;object-fit:cover;object-position:center 22%;
  border-radius:14px;display:block;}

/* ===================================================================
   EL PUENTE INTEGRADO · 15 de septiembre de 2026, corregido
   La foto ya no sangra hasta el borde de la pantalla: vive dentro de
   la misma columna centrada que el resto del sitio, con el mismo aire
   a los lados.
   Se sigue viendo integrada porque el fondo de la imagen y el de la
   sección son el MISMO azul de marca (#009ADE). Sin esquinas redondas
   y sin borde, la foto se funde por los cuatro lados.
   ⚠️ Si cambias la foto, que su fondo siga siendo ese azul plano.
   =================================================================== */
@media(min-width:900px){
  .bridge-grid{grid-template-columns:1fr .92fr;gap:36px;align-items:center;}
  .bridge-foto img{max-height:380px;border-radius:0;
    object-fit:cover;object-position:center 30%;}
}
/* En celular la foto va abajo, dentro del mismo margen. */
@media(max-width:899px){
  .bridge-foto img{border-radius:0;max-height:300px;}
}
.bridge-texto h2{margin-bottom:12px;}
.bridge-texto p{margin-bottom:22px;}
.bridge .door{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);border-left:5px solid var(--yellow);color:var(--white);}
.bridge .door strong{color:var(--white);}
.bridge .door span{color:rgba(255,255,255,.8);}

/* Puertas */
.doors{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px;}
.door{border:1px solid var(--line);border-left:5px solid var(--yellow);border-radius:12px;padding:18px;text-decoration:none;display:block;color:var(--ink);}
.door strong{font-family:'Quicksand',sans-serif;color:var(--navy);display:block;margin-bottom:4px;font-size:1.03rem;}
.door span{font-size:.89rem;color:var(--grey);}

/* Pie */
footer{background:var(--navy);color:var(--white);padding:44px 0;}
footer .wrap{max-width:840px;}
footer p{margin:0 0 7px;font-size:.76rem;line-height:1.5;opacity:.62;}
footer p.legal-strong{font-weight:700;opacity:.95;font-size:.85rem;margin-bottom:10px;}
footer p.contacto{margin-top:14px;opacity:.95;font-weight:600;}
footer a{color:var(--yellow);}

@media(max-width:640px){
  .topbar .wrap{flex-wrap:wrap;}
  .topnav{width:100%;justify-content:flex-start;gap:14px;}
}


/* ===== SIN PALABRAS HUÉRFANAS =========================================
   El problema: un titular que termina con una sola palabra colgando
   en la última línea. Se ve mal y pasa distinto en español y en inglés.

   "balance" reparte las líneas de los títulos parejo, así ninguna
   queda sola. "pretty" hace lo mismo, más suave, en los párrafos.

   Lo resuelve el navegador solo, en los dos idiomas, y también en los
   textos que tú escribas después en datos.js. No hay que hacer nada.
   Los navegadores viejos lo ignoran y todo sigue funcionando igual.
   ===================================================================== */
h1, h2, h3, .kicker, .lead, .quote q, .games h3, .finding h3 {
  text-wrap: balance;
}
p, li, .nota, .privacidad, .proof, .chico {
  text-wrap: pretty;
}


/* ═══════════════════════════════════════════════════════════════════
   LAS CUATRO LÍNEAS · dentro del héroe, en UN SOLO recuadro.

   🔴 TRES Y UNO, NO CUATRO IGUALES. Las tres primeras describen el
   mundo: van en voz baja. "Aquí" es la única que habla de este sitio:
   va separada por una línea, más grande, en blanco pleno, y con su
   rótulo en amarillo. Es lo único amarillo del bloque, y por eso ancla.

   🔴 SIN ANCHO MÁXIMO PROPIO. Hereda el del contenedor para que su
   borde derecho quede a ras del borde derecho de la foto del héroe.

   🔴 LA COLUMNA DE LAS ETIQUETAS TIENE ANCHO FIJO, porque los rótulos
   miden distinto y sin eso cada frase arranca en un punto distinto.
   ═══════════════════════════════════════════════════════════════════ */
.declara{margin-top:32px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.18);
  border-left:5px solid var(--yellow);
  border-radius:12px;
  padding:24px 26px;}
.lineas{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.lineas li{display:grid;grid-template-columns:118px 1fr;gap:0 16px;
  align-items:baseline;line-height:1.5;}
.lineas b{font-family:'Quicksand',sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;}

/* El mundo, en voz baja */
.lineas li.fondo{font-size:.97rem;color:rgba(255,255,255,.72);}
.lineas li.fondo b{color:rgba(255,255,255,.55);}

/* El remate: lo único que habla de este sitio */
.lineas li.remate{font-size:1.12rem;color:var(--white);font-weight:500;
  border-top:1px solid rgba(255,255,255,.18);
  margin-top:7px;padding-top:18px;line-height:1.4;}
.lineas li.remate b{color:var(--yellow);font-weight:700;}

@media(max-width:600px){
  .declara{padding:20px;}
  .lineas li{grid-template-columns:1fr;gap:3px;}
  .lineas li.fondo{font-size:.94rem;}
  .lineas li.remate{font-size:1.04rem;}
}

/* Títulos que solo existen para los lectores de pantalla. */
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}