/* ═══════════════════════════════════════════════════════════════════
   La portada
   ───────────────────────────────────────────────────────────────────
   Hoja propia y completa: la portada no carga estilos.css ni
   estilos-b.css. Nace del boceto bocetos/hero.html, que se sigue
   usando para probar cambios antes de traerlos acá.

   El orden de las superficies es el que sostiene la página: noche
   (el hero) → papel → blanco → papel → blanco → papel → noche (el
   cierre). Nunca dos secciones seguidas del mismo color.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* El azul noche que ya tiene la página (estilos-b.css) */
  --cielo-alto:#2C3B78; --cielo-medio:#1E2A5E; --cielo-bajo:#141E46;
  /* Las sierras, tintadas con el mismo azul */
  --sierra-lejos:#2A3872; --sierra-cerca:#131B42;
  --zocalo:#0E132E; --oro-greca:#ECCF63;
  --crema:#FFF8E6; --oro:#FFC93C; --oro-suave:#C9A94A; --tinta:#141E46;
  /* El papel donde se apoya lo que hay que leer, y el color de lo que va mal */
  --papel:#FDF6E6; --alarma:#FF7A59;
  --violeta:#5B3FD9; --violeta-2:#4A31B8; --texto-papel:#55506B;
  --blanco:#FFFFFF; --bronce:#7A5A16;
  /* La misma letra que adentro del juego */
  --redonda:'Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --sans:'Karla',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--zocalo);color:var(--crema);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.75rem}

/* Para quien navega con el teclado: el salto al contenido */
.saltar{position:fixed;top:0;left:0;z-index:100;transform:translateY(-130%);
  background:var(--tinta);color:var(--crema);padding:1rem 1.6rem;text-decoration:none;
  font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;transition:transform .2s ease}
.saltar:focus,.saltar:focus-visible{transform:translateY(0)}

/* ── La barra ── */
header{position:relative;z-index:10;background:linear-gradient(180deg,#9578F2,#6B4AE0 46%,#5231C4);
  border-bottom:2px solid #A78BFA}
header .wrap{display:flex;align-items:center;gap:1.75rem;min-height:74px}
.marca{font-family:var(--redonda);font-size:1.6rem;font-weight:800;letter-spacing:-.01em;
  color:var(--crema);text-decoration:none}
.marca b{color:var(--oro);font-weight:800}
nav{margin-left:auto;display:flex;gap:1.8rem;align-items:center}
nav a{color:var(--crema);text-decoration:none;font-family:var(--redonda);font-size:1rem;
  font-weight:600;padding-bottom:3px;border-bottom:1px solid transparent;transition:border-color .3s}
nav a:hover{border-color:var(--oro)}
nav a.btn-nav{border:2px solid rgba(255,248,230,.5);border-radius:999px;padding:.5rem 1.2rem}
nav a.btn-nav:hover{background:var(--crema);color:#3A2D80;border-color:var(--crema)}

/* ── El hero ──
   Alto = pantalla − barra − greca, para que la franja entera entre de una
   sola vez y el aire sobrante quede adentro del texto, no debajo.
   El paisaje tiene su franja reservada al pie y el texto se acomoda en el
   cielo que queda: así el botón nunca puede caer encima del sol.        */
.hero{--paisaje-alto:clamp(180px,30vh,300px);
  --aire-horizonte:clamp(1.2rem,3vh,2.4rem);
  position:relative;min-height:min(calc(100vh - 106px),880px);overflow:hidden;
  display:flex;flex-direction:column;
  padding-top:clamp(1.5rem,5vh,4rem);
  padding-bottom:calc(var(--paisaje-alto) + var(--aire-horizonte));
  background:
    radial-gradient(56% 34% at 50% 80%,rgba(120,146,225,.34),rgba(120,146,225,0) 70%),
    radial-gradient(120% 90% at 50% 14%,var(--cielo-alto),var(--cielo-medio) 52%,var(--cielo-bajo))}
/* El paisaje: las dos hileras y el sol entre ellas, todo en la misma caja
   para que las proporciones no se desarmen al cambiar el alto de la pantalla */
.paisaje{position:absolute;left:0;right:0;bottom:0;height:var(--paisaje-alto);z-index:1}
.sierras{position:absolute;inset:0;width:100%;height:100%}
.sierras--lejos{z-index:1}
.sierras--cerca{z-index:3}

.texto{position:relative;z-index:4;text-align:center;margin-top:auto;margin-bottom:auto}
.rotulo{margin-bottom:.6rem}
.rotulo{display:inline-block;font-family:var(--redonda);font-weight:500;
  font-size:clamp(1rem,1.5vw,1.25rem);letter-spacing:.01em;color:var(--oro)}
h1{font-family:var(--redonda);font-weight:700;font-size:clamp(2.2rem,6.4vw,4.6rem);
  line-height:1.16;letter-spacing:0;margin:clamp(1.2rem,3.5vh,2.4rem) 0 0}
.verbos{font-family:var(--redonda);font-weight:600;
  font-size:clamp(1.05rem,2.3vw,1.7rem);margin-top:clamp(1rem,3vh,2.2rem);color:var(--crema)}
.verbos i{font-style:normal;color:var(--oro);padding:0 .35em}

/* El botón sale del sol y se para solo, para que se lea */
.entrar{display:inline-flex;align-items:center;justify-content:center;min-height:56px;
  margin-top:clamp(1.6rem,5vh,4rem);padding:0 2.6rem;border-radius:999px;background:var(--oro);color:var(--tinta);
  font-family:var(--redonda);font-size:1.1rem;font-weight:600;text-decoration:none;
  box-shadow:0 10px 30px rgba(255,201,60,.26);
  transition:transform .25s cubic-bezier(.2,.7,.3,1),background .25s,color .25s}
.entrar:hover{transform:translateY(-2px);background:var(--crema)}
.entrar:focus-visible{outline:3px solid var(--crema);outline-offset:4px}

/* ── El sol naciente, como en la franja del slogan: chico y con anillos ── */
.sol{position:absolute;left:50%;bottom:36%;transform:translate(-50%,50%);z-index:2;
  width:min(30vw,190px,calc(var(--paisaje-alto) * 1.1));aspect-ratio:1}
.sol svg{width:100%;height:100%;overflow:visible}
.sol .rayo{stroke:var(--oro-suave);stroke-width:2.6;stroke-linecap:round;opacity:.85}
.sol .anillo{fill:none;stroke:var(--oro-suave)}
.sol .halo{fill:none;stroke:#8CA5E6;opacity:.15}
.sol .disco{fill:var(--oro)}
.sol .resplandor{fill:var(--oro);opacity:.14;filter:blur(14px)}

/* ── El zócalo con la greca ── */
.zocalo{position:relative;z-index:4;height:26px;background:var(--zocalo)}
.zocalo svg{width:100%;height:100%}

/* ══════════ EL PROBLEMA ══════════
   La sección cambia de superficie: el hero es la noche, acá empieza el papel.
   La tarjeta va en el violeta de la marca —no en el azul del cielo— para que
   el dato no se lea como una continuación del hero.                        */
.problema{background:var(--papel);padding:clamp(3.5rem,8vh,6rem) 0}
.tarjeta{max-width:980px;margin:0 auto;border-radius:32px;padding:clamp(2rem,4vw,3.4rem);
  background:linear-gradient(155deg,#3F2F8E,#2A1F63);color:var(--crema);
  box-shadow:0 26px 60px rgba(42,31,99,.26)}
.tarjeta .dato{font-family:var(--sans);font-size:clamp(1rem,1.6vw,1.22rem);line-height:1.75;
  text-align:center;max-width:62ch;margin:0 auto}
.tarjeta .dato b{font-weight:700;color:#fff}
.grafico{margin-top:clamp(1.8rem,4vw,2.8rem)}
.grafico svg{width:100%;height:auto;display:block}
.g-reja{stroke:rgba(255,248,230,.16);stroke-width:1}
.g-area{fill:url(#relleno)}
.g-linea{fill:none;stroke:var(--crema);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.g-punto{fill:var(--crema)}
/* El tramo que cae no va en oro: el oro es de lo que está bien resuelto */
.g-caida{fill:none;stroke:var(--alarma);stroke-width:4;stroke-linecap:round}
.g-punto--caida{fill:var(--alarma)}
.g-cifra{font-family:var(--sans);font-size:19px;fill:rgba(255,248,230,.9)}
.g-cifra--caida{fill:var(--alarma);font-weight:700}
.g-anio{font-family:var(--sans);font-size:19px;fill:rgba(255,248,230,.75);text-anchor:middle}
.pie-grafico{margin-top:1.4rem;text-align:center;font-size:.86rem;letter-spacing:.02em;
  color:rgba(255,248,230,.55)}

/* ══════════ LO QUE SE PUEDE LOGRAR ══════════
   Seis soles sobre el papel, sin tarjetas: la caja de cada uno es el aire.
   El sol es el mismo del hero, en chico, para que la página tenga un solo
   vocabulario de formas.                                                  */
.logros{background:var(--blanco);padding:clamp(3rem,7vh,5.5rem) 0 clamp(4rem,9vh,7rem)}
/* El oro pleno sobre papel da 2:1 y no se lee: para texto dorado sobre claro
   va el bronce. */
.marca-titulo{white-space:nowrap}
.marca-titulo b{color:var(--bronce);font-weight:inherit}
.logros h2{font-family:var(--redonda);font-weight:700;color:var(--violeta);
  font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.15;text-align:center;
  max-width:18ch;margin:0 auto clamp(2.4rem,5vw,3.6rem)}
.soles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2.4rem,4vw,3.4rem) clamp(1.6rem,3vw,2.6rem)}
/* Tres momentos fuertes y tres que acompañan. La diferencia la hace la
   superficie —la noche contra el papel—, no el tamaño: los seis se leen
   igual de grandes. */
.banda-noche{border-radius:34px;padding:clamp(2.8rem,6vw,4.4rem) clamp(1.2rem,3vw,2.4rem);
  background:radial-gradient(120% 120% at 50% 12%,var(--cielo-alto),var(--cielo-medio) 55%,var(--cielo-bajo));
  box-shadow:0 26px 60px rgba(20,30,70,.22)}
.banda-noche .logro h3{color:var(--crema)}
.banda-noche .logro p{color:rgba(255,248,230,.8)}
.soles--secundarios{margin-top:clamp(2.6rem,5vw,4rem)}
.logro{text-align:center;max-width:34ch;margin:0 auto}
.logro svg{width:clamp(78px,7.2vw,96px);height:auto;display:block;margin:0 auto 1.2rem}
.logro .sol-disco{fill:var(--oro)}
.logro .sol-rayo{stroke:var(--oro);stroke-width:6;stroke-linecap:round}
.logro h3{font-family:var(--redonda);font-weight:700;color:var(--violeta);
  font-size:clamp(1.35rem,2.45vw,1.8rem);line-height:1.18;margin-bottom:.6rem}
.logro p{font-family:var(--sans);font-size:1rem;line-height:1.6;color:var(--texto-papel);margin:0}

@media(max-width:920px){.soles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){
  .soles{grid-template-columns:1fr;gap:2.6rem}
  .logros h2{max-width:22ch}
  .pie-redes{flex-direction:column;gap:1.2rem}
}

/* ══════════ EL RITMO DE SUPERFICIES ══════════
   A partir del problema, las secciones alternan papel y blanco. El blanco no
   es el suelo: es la superficie que se apoya encima del papel.             */
.blanca{background:var(--blanco)}

/* ── ¿Cómo lo hace? ── */
.como{background:var(--papel);padding:clamp(3.5rem,8vh,6rem) 0}
.como h2,.ingreso h2,.relatos h2{font-family:var(--redonda);font-weight:700;color:var(--violeta);
  font-size:clamp(1.7rem,3.8vw,2.7rem);line-height:1.15}
.como h2{text-align:center}
.como .intro{font-family:var(--sans);font-size:clamp(1rem,1.55vw,1.18rem);line-height:1.75;
  text-align:center;max-width:72ch;margin:1.4rem auto 0;color:var(--texto-papel)}
.como .intro b{color:var(--violeta);font-weight:700}
.como .intro mark{background:var(--oro);color:#2A1F63;font-weight:700;
  padding:.1em .45em;border-radius:6px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.pasos{display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch;
  gap:clamp(.8rem,1.6vw,1.4rem);margin-top:clamp(2.4rem,5vw,3.4rem)}
.paso{background:linear-gradient(160deg,#5B3FD9,#4A31B8);border-radius:22px;
  padding:clamp(1.3rem,2vw,1.8rem);text-align:center;color:var(--crema);position:relative}
.paso svg{width:44px;height:44px;margin:0 auto .9rem;display:block;
  fill:none;stroke:var(--crema);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.paso .marca-oro{stroke:var(--oro)}
.paso .n{display:block;font-family:var(--redonda);font-weight:700;font-size:1.9rem;
  color:var(--oro);line-height:1;margin-bottom:.6rem}
.paso p{font-family:var(--sans);font-size:.98rem;line-height:1.55;margin:0}
.paso p b{font-weight:700;color:#fff}
.paso::after{content:'→';position:absolute;top:50%;right:calc(-1 * clamp(.8rem,1.6vw,1.4rem) / 2);
  transform:translate(50%,-50%);color:var(--oro);font-size:1.4rem;line-height:1}
.paso:last-child::after{content:none}

/* ── El ingreso ── */
.ingreso{padding:clamp(3.5rem,8vh,6rem) 0}
.ingreso .bajada{margin-top:.7rem;color:var(--texto-papel)}
.puertas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.2vw,1.8rem);
  margin-top:clamp(2rem,4vw,2.8rem)}
.puerta{background:var(--papel);border:1px solid rgba(91,63,217,.18);border-radius:26px;
  padding:clamp(1.8rem,3vw,2.6rem);text-decoration:none;color:inherit;display:block;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}
.puerta:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(42,31,99,.14)}
.puerta .aro{width:74px;height:74px;border-radius:50%;border:1px solid rgba(20,30,70,.18);
  display:grid;place-items:center;margin-bottom:1.6rem;background:var(--blanco)}
.puerta .aro svg{width:38px;height:38px;fill:none;stroke:var(--tinta);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.puerta .aro .marca-oro{stroke:var(--bronce)}
.puerta .acceso{display:block;font-family:var(--sans);font-size:.76rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--violeta)}
.puerta h3{font-family:var(--redonda);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.7rem);
  color:var(--tinta);margin:.5rem 0 .6rem}
.puerta p{font-family:var(--sans);font-size:1rem;line-height:1.6;color:var(--texto-papel);margin:0}
.pill{display:inline-flex;align-items:center;gap:.5rem;min-height:52px;margin-top:1.6rem;
  padding:0 1.7rem;border-radius:999px;background:var(--oro);color:#2A1F63;
  font-family:var(--redonda);font-weight:600;font-size:1.02rem}
.puerta--proximo{opacity:.72}
.puerta--proximo .pill{background:rgba(255,201,60,.55)}

/* ── Relatos e historias ── */
.relatos{background:var(--papel);padding:clamp(3.5rem,8vh,6rem) 0}
/* Una tira que sigue de largo en vez de puntos suspensivos: se ve que hay
   más, y se llega a ellos arrastrando.                                    */
.tira{display:flex;gap:clamp(1rem,2vw,1.8rem);overflow-x:auto;
  margin-top:clamp(2rem,4vw,2.8rem);padding:.4rem .4rem 1.4rem;
  scroll-snap-type:x proximity;scrollbar-width:thin;
  scrollbar-color:rgba(91,63,217,.4) transparent;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 93%,rgba(0,0,0,.45) 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 93%,rgba(0,0,0,.45) 100%)}
.tira::-webkit-scrollbar{height:8px}
.tira::-webkit-scrollbar-thumb{background:rgba(91,63,217,.35);border-radius:999px}
.relato{flex:0 0 clamp(124px,13vw,158px);text-align:center;text-decoration:none;
  color:inherit;scroll-snap-align:start}
.disco{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,var(--aura),#141E46 74%);
  box-shadow:inset 0 0 0 1px rgba(242,206,75,.45);transition:transform .25s,box-shadow .25s}
.relato:hover .disco{transform:translateY(-5px);box-shadow:inset 0 0 0 2px var(--oro)}
.disco svg{width:52%;height:52%}
.relato .nombre{display:block;margin-top:.9rem;font-family:var(--redonda);font-weight:700;
  font-size:1.02rem;color:var(--tinta);line-height:1.2}
.relato .region{display:block;margin-top:.35rem;font-family:var(--sans);font-size:.72rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--violeta)}
.relato .region.vacia{visibility:hidden}
.arrastra{margin-top:.4rem;font-family:var(--sans);font-size:.82rem;
  color:var(--texto-papel);opacity:.8}

/* ── La frase de cierre: vuelve la noche, y la página cierra como abrió ── */
.cierre{padding:clamp(4.5rem,11vh,7.5rem) 0;
  background:radial-gradient(120% 110% at 50% 20%,var(--cielo-alto),var(--cielo-medio) 52%,var(--cielo-bajo))}
.cierre p{font-family:var(--redonda);font-weight:500;color:var(--crema);
  font-size:clamp(1.25rem,2.6vw,2rem);line-height:1.35;text-align:center;
  max-width:34ch;margin:0 auto}

/* ── El pie ── */
footer{background:var(--zocalo);color:rgba(255,248,230,.72);padding:clamp(2.2rem,5vh,3.2rem) 0}
footer .wrap{display:flex;justify-content:center}
.pie-redes{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;justify-content:center}
.pie-marca{font-family:var(--redonda);font-weight:800;font-size:1.35rem;color:var(--crema)}
.pie-marca b{color:var(--oro);font-weight:800}
.pie-iconos{display:flex;gap:.8rem}
.pie-iconos a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,248,230,.28);transition:border-color .25s,background .25s}
.pie-iconos a:hover{border-color:var(--oro);background:rgba(255,201,60,.12)}
.pie-iconos svg{width:21px;height:21px;fill:none;stroke:rgba(255,248,230,.82);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pie-iconos svg .f{fill:rgba(255,248,230,.82);stroke:none}
.pie-iconos a:hover svg{stroke:var(--oro)}
.pie-iconos a:hover svg .f{fill:var(--oro)}

@media(max-width:980px){
  .puertas{grid-template-columns:1fr}
  .pasos{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  .paso:nth-child(2)::after{content:none}

}
@media(max-width:620px){
  .pasos{grid-template-columns:1fr}
  .paso::after{content:'↓';top:auto;bottom:calc(-1 * 1.4rem / 2);right:50%;
    transform:translate(50%,50%)}
  .paso:nth-child(2)::after{content:'↓'}
  .paso:last-child::after{content:none}
  .puertas{grid-template-columns:1fr}

}

@media(max-width:700px){
  .tarjeta{border-radius:24px}
  .g-cifra,.g-anio{font-size:46px}
  /* En pantalla angosta las cifras grandes se pisan con los puntos: queda
     solo la que importa, la que cae. */
  .g-cifra{display:none}
  .g-cifra--caida{display:block;transform:translateY(36px)}
  /* En el celular quedan solo el primero, el pico y el último: con los seis
     los años se pisan entre sí */
  .g-anio--extra{display:none}
  .g-linea{stroke-width:9}
  .g-caida{stroke-width:12}
  .g-punto{r:17}
  .g-punto--caida{r:24}
  .g-reja{stroke-width:3}
  .pie-grafico{font-size:.78rem}
}

@media(max-width:700px){
  /* Con un solo enlace la barra entra en una línea y le deja el alto al hero */
  nav a.btn-nav{padding:.45rem 1.1rem}
  .hero{--paisaje-alto:clamp(150px,24vh,210px);
    min-height:min(calc(100vh - 100px),620px);padding-top:1.8rem}
  .sol{bottom:34%;width:min(44vw,190px,calc(var(--paisaje-alto) * 1.1))}
  h1{margin-top:1.6rem}
  .verbos{font-size:.98rem;margin-top:1.5rem;white-space:nowrap}
  .verbos i{padding:0 .25em}
  .entrar{margin-top:2.2rem;min-height:50px;padding:0 1.9rem;font-size:1rem}
}