/* ═══════════ PALMYTHO — sistema Alegre, registro editorial ═══════════
   Arena dorada con grano, tinta marina, crema y oro.
   Serif de alto contraste en versales para los títulos, sans directa
   para el cuerpo. Nada plano: todo lleva textura, luz o filo.        */
:root{
  /* Arena aclarada: el dorado saturado en campos grandes cansa la vista */
  --arena:#E9D6B4; --arena-2:#DBC69F; --arena-cl:#F8EEDA;
  --tinta:#101637; --tinta-2:#1C2450;
  --crema:#FBF1DC; --crema-2:#FEF8EA;
  /* El blanco no es el suelo de la página: es la superficie que se apoya
     encima. Suelo crema, superficie blanca — así el blanco da luz sin
     borrar el carácter del crema. */
  --blanco:#FFFFFF;
  --durazno:#E8724F;
  --oro:#F2CE4B;
  --bronce:#7A5A16;          /* el dorado claro sobre crema da 2:1: ilegible */
  --azul:#1E6CAF; --azul-2:#15558C;
  /* El celeste del cielo de la banda PALMYTHO: sobre crema sirve para
     trazos y fondos, no para texto chico (3.5:1). El azul-2 sí (6.7:1). */
  --celeste:#2E86C7; --celeste-cl:#8FC9EA;
  --texto:#101637; --texto-suave:#4A4F70; --texto-arena:#2A2211;
  --error:#9B2C1B;          /* 7:1 sobre crema */

  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Karla',system-ui,sans-serif;

  --s-2:1rem; --s-3:1.75rem; --s-4:3rem; --s-5:5.5rem; --s-6:8rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Con la cabecera sticky, un salto a #ancla dejaba el título debajo de ella */
section[id],main[id]{scroll-margin-top:96px}
@media(max-width:560px){section[id],main[id]{scroll-margin-top:124px}}
body{background:var(--crema);color:var(--texto);font-family:var(--sans);
  font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased}

/* El grano: una sola regla, y es lo que más saca a la página del plano digital */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.5;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E")}

h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;line-height:1.02;
  letter-spacing:.055em;text-transform:uppercase}
h1{font-size:clamp(1.9rem,8.5vw,6rem)}
h2{font-size:clamp(1.5rem,5vw,3.4rem)}
h3{font-size:clamp(1.1rem,2vw,1.6rem);letter-spacing:.08em}
h1,h2{overflow-wrap:break-word}
@media(max-width:520px){h1,h2{letter-spacing:.03em}}
p{max-width:56ch}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--s-3)}
.seccion{position:relative;padding:var(--s-5) 0}

/* Versalita espaciada: reemplaza a las píldoras de colores */
.rotulo{display:inline-block;font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.34em;text-transform:uppercase}
.rotulo--bronce{color:var(--bronce)}
.rotulo--oro{color:var(--oro)}

/* ── Botones: filo, no relleno ── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;
  padding:0 2.4rem;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;transition:all .35s cubic-bezier(.2,.7,.3,1)}
.btn--solido{background:var(--azul-2);color:var(--crema)}
.btn--solido:hover{background:var(--tinta);letter-spacing:.32em}
.btn--filo{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1px currentColor}
.btn--filo:hover{background:var(--tinta);color:var(--crema);letter-spacing:.32em}
.btn:focus-visible{outline:2px solid var(--tinta);outline-offset:5px}

/* ── Cabecera ── */
header.top{position:sticky;top:0;z-index:20;background:rgba(233,214,180,.93);
  backdrop-filter:blur(12px);border-bottom:1px solid rgba(16,22,55,.16)}
.top .wrap{display:flex;align-items:center;gap:var(--s-3);min-height:72px}
.marca{font-family:var(--serif);font-size:1.55rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--tinta);text-decoration:none;font-weight:600;white-space:nowrap}
.marca .punto{color:var(--bronce)}
.top nav{margin-left:auto;display:flex;gap:1.9rem;align-items:center}
.top nav a{color:var(--tinta);text-decoration:none;font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;padding-bottom:2px;
  border-bottom:1px solid transparent;transition:border-color .3s}
.top nav a:hover{border-color:var(--tinta)}
.top nav a[aria-current="page"]{border-color:var(--bronce);color:var(--bronce)}
/* `.top nav a` es más específico que `.btn--*` y le pisa el color:
   sin esto el botón sólido queda tinta sobre tinta, es decir invisible. */
.top nav a.btn{border-bottom:0}
.top nav a.btn--solido,.top nav a.btn--solido:hover{color:var(--crema)}
.top nav a.btn--filo{color:var(--tinta)}
.top nav a.btn--filo:hover{color:var(--crema)}
.btn--nav{min-height:44px;padding:0 1.25rem;font-size:.66rem;letter-spacing:.18em}
.btn--nav:hover{letter-spacing:.22em}
@media(max-width:900px){.top nav a:not(.btn){display:none}}
/* A 375px la marca con tracking se comía el botón: se sale de la pantalla */
/* A 375px la marca con tracking más dos botones no entran en una línea:
   la cabecera pasa a dos filas y los botones ocupan la segunda entera. */
@media(max-width:560px){
  .marca{font-size:1.1rem;letter-spacing:.14em}
  .top .wrap{flex-wrap:wrap;gap:.7rem;min-height:0;padding-top:.7rem;padding-bottom:.7rem}
  .top nav{width:100%;margin-left:0;gap:.5rem}
  .top nav .btn--nav{flex:1;padding:0 .5rem;font-size:.6rem;letter-spacing:.12em}
}

/* ── Hero sobre arena dorada ── */
.hero{background:radial-gradient(120% 90% at 50% 18%,var(--arena-cl),var(--arena) 55%,var(--arena-2));
  position:relative;overflow:hidden;padding:var(--s-6) 0 var(--s-5);text-align:center;color:var(--tinta)}
.hero .bajada{font-family:var(--sans);font-size:clamp(1rem,1.5vw,1.15rem);
  color:var(--texto-arena);margin:var(--s-3) auto 0;max-width:46ch}
.hero .rotulo{color:var(--texto-arena);opacity:.85;margin-bottom:var(--s-3)}
/* Tres tiempos, no una frase: versalita muy espaciada y separadores en bronce */
.hero .lema{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5em 1em;
  max-width:none;margin:var(--s-4) auto 0;color:var(--texto-arena);
  font-size:clamp(.95rem,2.4vw,1.4rem);font-weight:700;letter-spacing:.34em;text-transform:uppercase}
.hero .lema span{color:var(--bronce);letter-spacing:0;opacity:.75}

/* Estelas de luz: el mismo path dos veces, uno difuso y uno nítido */
.estelas{position:absolute;inset:0;pointer-events:none}
.estelas path{fill:none;stroke:#fff;stroke-linecap:round}
.estelas .halo{stroke-width:7;opacity:.32;filter:blur(7px)}
.estelas .nucleo{stroke-width:1.6;opacity:.9}
.polvo circle{fill:#fff}

/* Criaturas que entran desde afuera del cuadro */
.criatura{position:absolute;pointer-events:none;filter:drop-shadow(0 8px 22px rgba(120,90,40,.22))}
.criatura--ave{width:min(28vw,320px);top:5%;left:-3%;transform:rotate(-8deg)}
.criatura--unicornio{width:min(24vw,280px);bottom:-8%;right:-2%}
@media(max-width:720px){
  .criatura{opacity:.7}
  .criatura--ave{width:140px;top:1%;left:-8%}
  .criatura--unicornio{width:120px;bottom:-2%;right:-6%}
}

/* Sol naciente detrás del llamado a la acción */
.sol{position:relative;display:inline-block;margin-top:var(--s-5)}
.sol .rayos{position:absolute;left:50%;top:50%;translate:-50% -50%;width:360px;height:190px;pointer-events:none}
.sol .rayos line{stroke:#FFFDF5;stroke-width:1.4;opacity:.85}
.sol .btn{position:relative;background:transparent;color:var(--tinta);
  text-shadow:0 0 18px rgba(255,253,245,.95),0 0 34px rgba(255,253,245,.8)}
.sol .btn::before{content:'';position:absolute;inset:-6px -18px;z-index:-1;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,253,245,.85),transparent 72%)}
.sol .btn:hover{letter-spacing:.34em}

/* ── Puertas de ingreso ── */
.puertas{display:grid;gap:0;margin-top:var(--s-4);border-top:1px solid rgba(16,22,55,.18)}
@media(min-width:820px){.puertas{grid-template-columns:1fr 1fr}}
.puerta{position:relative;display:block;text-decoration:none;color:inherit;
  padding:var(--s-4) var(--s-3);border-bottom:1px solid rgba(16,22,55,.18);
  transition:background .4s ease}
@media(min-width:820px){.puerta+.puerta{border-left:1px solid rgba(16,22,55,.18)}}
.puerta:hover{background:rgba(220,187,126,.28)}
/* Sacar el anillo de foco deja al que navega con teclado sin saber dónde está */
.puerta:focus-visible{background:rgba(220,187,126,.28);outline:3px solid var(--azul-2);outline-offset:-3px}
.puerta .llave{width:74px;height:74px;margin-bottom:var(--s-3);display:block}
.puerta h3{margin:.6rem 0 .6rem}
.puerta p{color:var(--texto-suave);font-size:1rem;margin-bottom:1.4rem;max-width:40ch}
.puerta .ir{display:inline-flex;align-items:center;justify-content:center;min-height:54px;
  padding:0 1.9rem;font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px currentColor;
  transition:letter-spacing .35s,background .35s,color .35s}
.puerta:hover .ir{background:var(--azul-2);color:var(--crema);letter-spacing:.28em}
.puerta:hover .llave circle.aro{stroke:var(--bronce)}

/* ── Banda PALMYTHO: tipografía gigante cruzando la imagen ── */
.banda{position:relative;background:linear-gradient(var(--celeste-cl),var(--celeste) 40%,var(--azul) 74%,var(--azul-2));
  overflow:hidden;padding:var(--s-5) 0 0;isolation:isolate}
/* La escena es el marco del cruce: así el título se ubica respecto de la
   piedra y no del alto total de la sección, que incluye el texto de abajo. */
.banda .escena{position:relative;padding-bottom:var(--s-4)}
.banda .portico{display:block;width:min(50vw,430px);margin:0 auto;height:auto}
.banda .titulo{position:absolute;left:50%;top:62%;translate:-50% -50%;width:100%;text-align:center;
  font-family:var(--serif);font-weight:700;font-size:clamp(3.4rem,15vw,13rem);line-height:.85;
  letter-spacing:.02em;color:var(--oro);text-transform:uppercase;pointer-events:none}
.banda .pie{position:relative;background:var(--azul-2);padding:var(--s-4) 0 var(--s-5);color:var(--crema)}

/* ── El rombo: las cuatro puntas del método, con el sol en el centro ──
   Los rótulos se apoyan sobre los vértices y llevan el fondo de la banda:
   así cortan la línea del rombo en vez de pelearse con ella.            */
.rombo{position:relative;width:min(100%,680px);margin:0 auto;aspect-ratio:1}
.rombo-fig{position:absolute;inset:0;width:100%;height:100%}
.rombo-linea{fill:rgba(251,241,220,.05);stroke:var(--oro);stroke-width:1.6;
  stroke-linejoin:round;opacity:.8}
.sol-disco{fill:var(--oro)}
.sol-rayos{fill:none;stroke:var(--oro);stroke-width:3.4;stroke-linecap:round;
  transform-box:view-box;transform-origin:200px 200px;
  animation:girar-sol 80s linear infinite}
@keyframes girar-sol{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.rombo .v{position:absolute;left:50%;translate:-50% -50%;text-align:center;
  background:var(--azul-2);padding:.3rem .75rem}
.rombo .v-arriba,.rombo .v-abajo{font-family:var(--serif);font-weight:700;
  font-size:clamp(.95rem,3.2vw,1.5rem);line-height:1.06;letter-spacing:.055em;
  text-transform:uppercase;color:var(--crema);max-width:min(26rem,68%)}
.rombo .v-izq,.rombo .v-der{font-size:clamp(.6rem,1.9vw,.72rem);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--oro)}
.rombo .v-arriba{top:10%}
.rombo .v-abajo{top:90%}
.rombo .v-izq{top:50%;left:16%}
.rombo .v-der{top:50%;left:84%}

/* ── Mitologías: discos oscuros, como portales ── */
/* Columnas fijas y no auto-fill: 24 mitologías dan filas parejas en 2, 3, 4
   y 6 columnas, y una última fila coja arruina la grilla más que nada. */
.grid-mitos{display:grid;gap:var(--s-4) var(--s-3);margin-top:var(--s-4);
  grid-template-columns:repeat(2,1fr)}
@media(min-width:641px){.grid-mitos{grid-template-columns:repeat(3,1fr)}}
@media(min-width:800px){.grid-mitos{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1080px){.grid-mitos{grid-template-columns:repeat(6,1fr)}}
.mito{text-align:center}
.disco{position:relative;width:100%;max-width:124px;aspect-ratio:1;margin:0 auto .9rem;
  border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 32%,var(--aura),#141B3C 78%);
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
/* Filo dorado finísimo, no un borde grueso: es lo que da aire de objeto valioso */
.disco::after{content:'';position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(242,206,75,.45),inset 0 -20px 38px rgba(10,14,34,.4);
  transition:box-shadow .4s ease}
.mito:hover .disco{transform:translateY(-7px) scale(1.04)}
.mito:hover .disco::after{box-shadow:inset 0 0 0 1px var(--oro),0 0 26px rgba(242,206,75,.3)}
.disco svg{width:62%;height:62%;display:block}
.mito .nombre{display:flex;align-items:center;justify-content:center;min-height:2.45em;
  font-family:var(--serif);font-size:1.12rem;letter-spacing:.07em;
  text-transform:uppercase;line-height:1.15;color:var(--tinta)}
.mito .region{display:block;font-size:.62rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bronce);margin-top:.35rem}
/* A 375px con el mínimo de 168px entraba una sola columna: 24 discos en fila
   india es un scroll interminable. Achicando el disco entran dos. */
@media(max-width:640px){
  .grid-mitos{gap:var(--s-3) 1rem}
  .disco{max-width:98px}
  .mito .nombre{font-size:1rem}
}
.mas{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid rgba(16,22,55,.18);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:baseline}
.mas b{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.2rem);font-weight:400;line-height:1}

/* ── Leyendas: el segundo momento oscuro de la página ── */
.leyendas{background:linear-gradient(165deg,#16406B,var(--tinta) 62%);color:var(--crema);padding:var(--s-5) 0;position:relative;overflow:hidden}
.leyendas h2{color:var(--crema)}
.leyendas .intro{color:#B9BFDC;margin-top:1rem}
.hist{margin-top:var(--s-4);border-top:1px solid rgba(251,241,220,.2)}
.h-fila{display:grid;gap:1rem var(--s-4);align-items:center;padding:var(--s-3) 0;
  border-bottom:1px solid rgba(251,241,220,.2);transition:background .4s ease}
@media(min-width:800px){.h-fila{grid-template-columns:4rem 190px 1fr}}
.h-fila:hover{background:rgba(251,241,220,.05)}
.h-fila .num{font-family:var(--serif);font-size:2.6rem;line-height:.8;color:var(--oro)}
.h-fila h3{color:var(--crema);margin-bottom:.3rem}
.h-fila p{color:#B9BFDC;font-size:1rem;max-width:52ch}
.vineta{width:170px;height:96px;display:block}
.vineta [stroke]{vector-effect:non-scaling-stroke}
.h-fila:hover .vineta{opacity:1}
.vineta{opacity:.85;transition:opacity .4s ease}

/* ── Cierre ── */
.cierre{background:radial-gradient(120% 100% at 50% 100%,var(--arena-cl),var(--arena-2));
  color:var(--tinta);text-align:center;padding:var(--s-6) 0;position:relative;overflow:hidden}
.cierre p{margin:var(--s-3) auto 0;color:var(--texto-arena);max-width:44ch}
.cierre .dos{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:var(--s-4)}

footer{background:var(--tinta);color:#9AA1C4;padding:var(--s-4) 0;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase}
footer .wrap{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);justify-content:space-between;
  align-items:flex-start}
.pie-nav{display:flex;flex-wrap:wrap;gap:0 1.7rem}
.pie-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--crema);
  text-decoration:none;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.pie-nav a:hover,.pie-nav a:focus-visible{color:var(--oro);border-color:var(--oro)}
/* ── Los contactos del pie ──
   Los iconos son de trazo y no de marca: dibujados con el mismo grosor y el
   mismo radio que el resto del sitio, entran en el pie sin traer los colores
   de cada red. El área de toque es de 44px aunque el dibujo mida 20. */
.pie-redes{display:flex;flex-direction:column;gap:.7rem}
.pie-marca-nombre{color:var(--crema);letter-spacing:.2em}
.pie-redes__iconos{display:flex;gap:.35rem;margin-left:-.7rem}
.pie-redes__iconos a{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;color:var(--crema);
  transition:color .3s,background-color .3s}
.pie-redes__iconos a:hover,.pie-redes__iconos a:focus-visible{
  color:var(--oro);background:rgba(251,241,220,.1)}
.pie-redes__iconos svg{width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pie-redes__iconos svg .f{fill:currentColor;stroke:none}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}}

/* ============================================================
   PÁGINAS INTERIORES (mitologías)
   Mismo sistema, hero contenido y contenido en filas con filete.
   ============================================================ */
.hero--pagina{padding:var(--s-5) 0 var(--s-4);text-align:left}
/* Hero azul: el cielo de la banda PALMYTHO. Las leyendas van en azul y las
   mitologías en arena, así se distinguen las dos mitades de la plataforma. */
.hero--azul{background:linear-gradient(158deg,var(--celeste),var(--azul) 46%,var(--azul-2) 82%,var(--tinta-2));
  color:var(--crema)}
.hero--azul h1{color:var(--crema)}
.hero--azul .rotulo{color:var(--oro);opacity:1}
.hero--azul .bajada{color:#DCE9F5}
.hero--azul .volver{color:var(--oro)}
.hero--pagina .wrap{position:relative;z-index:2}
.hero--pagina .bajada{margin-left:0;max-width:52ch}
.volver{display:inline-block;margin-bottom:var(--s-3);color:var(--texto-arena);
  font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid rgba(16,22,55,.35);padding-bottom:3px;
  transition:letter-spacing .35s}
.volver:hover{letter-spacing:.3em}

/* Fila de mitología: disco a la izquierda, texto a la derecha, separadas por
   filete. Nombre propio y no .ficha: las fichas de los paneles son otra cosa
   y con el nombre compartido una pisaba a la otra. */
.fichas-mito{margin-top:var(--s-4);border-top:1px solid rgba(16,22,55,.18)}
.seccion>.wrap>.fichas-mito:first-child{margin-top:0}
.ficha-mito{display:grid;gap:.6rem var(--s-3);align-items:center;padding:var(--s-3) 0;
  border-bottom:1px solid rgba(16,22,55,.18);transition:background .4s ease}
@media(min-width:720px){.ficha-mito{grid-template-columns:104px 13rem 1fr}}
.ficha-mito:hover{background:rgba(220,187,126,.16)}
.ficha-mito .disco{margin:0;max-width:104px}
.ficha-mito h3{margin:0}
.ficha-mito .region{display:block;color:var(--bronce);margin-top:.35rem}
.ficha-mito p{color:var(--texto-suave);font-size:1rem;max-width:60ch}

/* Cronología: el año en serif, y todos los filetes en azul, para separarla
   a simple vista del catálogo de mitologías. */
.epoca{padding:var(--s-4) 0 var(--s-2)}
.epoca .rotulo{color:var(--azul-2)}
.epoca h2{margin-top:.8rem}
.linea-t{margin-top:var(--s-3);border-top:1px solid rgba(30,108,175,.3)}
.hito{display:grid;gap:.55rem var(--s-3);padding:var(--s-3) 0;align-items:baseline;
  border-bottom:1px solid rgba(30,108,175,.3);transition:background .4s ease}
@media(min-width:720px){.hito{grid-template-columns:10rem 1fr}}
.hito:hover{background:rgba(46,134,199,.11)}
.hito .cuando{font-family:var(--serif);font-size:1.5rem;letter-spacing:.04em;color:var(--azul-2);
  line-height:1.1;white-space:nowrap}
.hito h3{margin-bottom:.3rem}
.hito p{color:var(--texto-suave);font-size:1rem;max-width:62ch}

/* Recorrido sobre fondo azul: invierte todo lo de adentro. Va en el tramo
   del medio, para que la página respire azul y no solo lo tenga de adorno. */
.epoca--azul{background:linear-gradient(160deg,var(--azul),var(--azul-2) 70%,var(--tinta));
  color:var(--crema)}
.epoca--azul .rotulo{color:var(--oro)}
.epoca--azul h2,.epoca--azul h3{color:var(--crema)}
.epoca--azul .linea-t,.epoca--azul .hito{border-color:rgba(251,241,220,.26)}
.epoca--azul .hito:hover{background:rgba(251,241,220,.08)}
.epoca--azul .hito .cuando{color:var(--oro)}
.epoca--azul .hito p{color:#DCE9F5}

/* Franja de cierre de página interior */
.siguiente{background:linear-gradient(100deg,var(--azul-2),var(--tinta) 72%);color:var(--crema);padding:var(--s-4) 0}
.siguiente .wrap{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between}
.siguiente h3{color:var(--crema)}
.siguiente .rotulo{color:var(--oro)}
.siguiente .btn--filo{color:var(--crema)}
.siguiente .btn--filo:hover{background:var(--crema);color:var(--tinta)}

/* ============================================================
   CÓMO FUNCIONA
   Cuatro partes numeradas. Regla de esta página: se tiene que
   entender de un vistazo, sin leer. Tipografía grande, un dibujo
   por idea, y nada escondido salvo lo que amplía (nunca lo básico).
   ============================================================ */
.parte{position:relative;padding:var(--s-5) 0}
/* El numeral va en la misma línea que el título, no en una columna aparte:
   suelto a la izquierda dejaba el título colgando y se leía descolocado. */
.parte__cabeza .rotulo{display:block;margin-bottom:.9rem}
.parte h2{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin:0}
.parte__n{font-family:var(--serif);font-size:.78em;line-height:1;
  color:var(--bronce);opacity:.6}
.parte__intro{margin-top:1.2rem;color:var(--texto-suave)}

/* ── 01 · El objetivo: una sola frase, del tamaño de una frase que importa ──
   El fondo es el celeste del cielo de la banda PALMYTHO, aclarado arriba como
   un amanecer. Al ser fondo claro se invierte todo lo de adentro: el texto
   pasa a tinta (9.8:1 sobre el celeste; el crema no llegaba ni a 2:1) y las
   tres ideas dejan de ser columnas con filete para volverse bloques de azul
   apoyados encima. Suelo celeste, bloques azules. */
.objetivo{background:linear-gradient(165deg,#EAF5FC,var(--celeste-cl) 68%);
  color:var(--tinta);position:relative;overflow:hidden}
.objetivo h2,.objetivo h3{color:var(--tinta)}
.objetivo .parte__n{color:var(--azul-2);opacity:.75}
.objetivo .rotulo{color:var(--bronce)}
/* Las estelas blancas se borraban sobre el celeste: 1.6:1 */
.objetivo .estelas path{stroke:var(--azul-2)}
/* Sin versales: una frase larga en mayúsculas serif no la lee nadie de ocho años */
.declaracion{font-family:var(--serif);text-transform:none;letter-spacing:.01em;
  font-size:clamp(1.7rem,4.6vw,3.3rem);line-height:1.22;max-width:20ch;
  margin:var(--s-4) 0 0;color:var(--tinta)}
.declaracion em{font-style:normal;color:var(--bronce)}
.pilares{display:grid;gap:2px;margin-top:var(--s-5)}
@media(min-width:760px){.pilares{grid-template-columns:repeat(3,1fr)}}
.pilar{background:var(--azul-2);color:var(--crema);padding:var(--s-3)}
@media(min-width:760px){.pilar{padding:var(--s-4) var(--s-3)}}
.pilar svg{width:56px;height:56px;display:block;margin-bottom:1rem}
.pilar h3{color:var(--crema);margin-bottom:.4rem}
/* El gris lavanda de antes daba 4.26:1 sobre el azul: un pelo corto */
.pilar p{color:#DCE9F5;font-size:1rem}

/* ── 02 · Paso a paso: el camino queda entero a la vista y el clic amplía ── */
.camino{list-style:none;display:grid;gap:1rem;margin:var(--s-4) 0 0;padding:0;
  grid-template-columns:repeat(2,1fr)}
@media(min-width:780px){.camino{grid-template-columns:repeat(4,1fr);gap:0}}
.camino li{position:relative;display:flex}
/* La línea punteada que une los pasos, solo cuando van en fila.
   Va a la altura del centro del disco (padding .6rem + 104/2). */
@media(min-width:780px){
  .camino li:not(:last-child)::after{content:'';position:absolute;top:62px;
    left:calc(50% + 58px);right:calc(-50% + 58px);
    border-top:2px dotted rgba(16,22,55,.28);z-index:0}
}
.paso-btn{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;
  gap:.7rem;background:none;border:0;padding:.6rem .3rem 1rem;cursor:pointer;text-align:center;
  font-family:var(--sans);color:var(--tinta);transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.paso-btn .disco-paso{position:relative;width:104px;height:104px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:radial-gradient(circle at 50% 32%,#2E6E9E,#12294B 78%);
  transition:box-shadow .35s ease}
.paso-btn .disco-paso::after{content:'';position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(242,206,75,.4)}
.paso-btn .disco-paso svg{width:56%;height:56%}
/* El número cuelga del borde del disco: dentro de .disco-paso, no del botón,
   o queda flotando debajo de la etiqueta. */
.paso-btn .n{position:absolute;left:50%;bottom:-13px;translate:-50% 0;z-index:2;
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--oro);color:var(--tinta);font-family:var(--serif);font-size:1.15rem;font-weight:700}
.paso-btn .lab{margin-top:.5rem}
.paso-btn .lab{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.4;max-width:14ch}
.paso-btn:hover{transform:translateY(-6px)}
.paso-btn:hover .disco-paso,.paso-btn[aria-selected="true"] .disco-paso{
  box-shadow:0 0 0 3px var(--oro),0 0 30px rgba(242,206,75,.35)}
.paso-btn[aria-selected="true"]{transform:translateY(-6px)}
.paso-btn:focus-visible{outline:2px solid var(--tinta);outline-offset:4px}

.panel-paso{display:grid;gap:var(--s-3) var(--s-4);align-items:center;margin-top:var(--s-4);
  padding:var(--s-4) var(--s-3);background:var(--blanco);
  box-shadow:inset 0 0 0 1px rgba(16,22,55,.16)}
@media(min-width:820px){.panel-paso{grid-template-columns:230px 1fr}}
.panel-paso[hidden]{display:none}
.panel-paso .dibujo{width:100%;max-width:230px;height:auto;justify-self:center}
.panel-paso .quien{color:var(--bronce);display:block;margin-bottom:.7rem}
.panel-paso h3{margin-bottom:.7rem}
.panel-paso p{font-size:1.15rem;max-width:46ch}
/* Sin JavaScript se ven todos los pasos, que es lo que importa */
.sin-js .panel-paso[hidden]{display:grid}

/* ── 03 · Por qué conviene ── */
.razones{margin-top:var(--s-4);border-top:1px solid rgba(16,22,55,.18)}
.razon{border-bottom:1px solid rgba(16,22,55,.18);padding:var(--s-3) 0;
  transition:background .4s ease}
.razon[open]{background:rgba(46,134,199,.07)}
.razon summary{display:grid;gap:.4rem 1.5rem;align-items:center;cursor:pointer;list-style:none;
  grid-template-columns:auto 1fr auto}
.razon summary::-webkit-details-marker{display:none}
.razon .ico{width:44px;height:44px;display:block}
.razon .titulo{font-family:var(--serif);font-size:clamp(1.15rem,2.4vw,1.7rem);
  letter-spacing:.05em;text-transform:uppercase;line-height:1.15}
.razon .mas-info{font-family:var(--sans);font-size:1.6rem;color:var(--bronce);line-height:1}
.razon[open] .mas-info{transform:rotate(45deg)}
.razon p{margin:.9rem 0 0 calc(44px + 1.5rem);color:var(--texto-suave);font-size:1.05rem}
@media(max-width:520px){.razon p{margin-left:0}}

/* ── 04 · Instructivos: cuatro puertas, una por tipo de usuario ── */
.instructivos{display:grid;gap:0;margin-top:var(--s-4);border-top:1px solid rgba(16,22,55,.18)}
@media(min-width:640px){.instructivos{grid-template-columns:repeat(2,1fr)}}
.instructivo{display:block;text-decoration:none;color:inherit;padding:var(--s-3);
  border-bottom:1px solid rgba(16,22,55,.18);transition:background .4s ease}
@media(min-width:640px){.instructivo:nth-child(odd){border-right:1px solid rgba(16,22,55,.18)}}
.instructivo:hover{background:rgba(220,187,126,.24)}
.instructivo:focus-visible{background:rgba(220,187,126,.24);outline:3px solid var(--azul-2);outline-offset:-3px}
.instructivo svg{width:62px;height:62px;display:block;margin-bottom:1rem}
.instructivo .rotulo{color:var(--bronce)}
.instructivo h3{margin:.6rem 0 .4rem}
.instructivo p{color:var(--texto-suave);font-size:1rem;max-width:36ch;margin-bottom:1.1rem}
.instructivo .ir{font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  border-bottom:1px solid currentColor;padding-bottom:3px;transition:letter-spacing .35s}
.instructivo:hover .ir{letter-spacing:.3em}

/* Aviso de contenido pendiente en los instructivos */
.pendiente{margin-top:var(--s-4);padding:var(--s-4) var(--s-3);text-align:center;
  box-shadow:inset 0 0 0 1px rgba(16,22,55,.2)}
.pendiente .rotulo{color:var(--bronce)}
.pendiente p{margin:1rem auto 0;color:var(--texto-suave)}

/* ============================================================
   INSTRUCTIVO · ESCUELAS
   La página tiene que dejar ver de un vistazo la mecánica del
   aula: cuántos grupos salen, cuántos desafíos, y qué ve cada
   uno después. Por eso la parte del medio se toca, no se lee.
   ============================================================ */

/* Variante clara de la frase grande: misma escala, sobre crema */

/* ── La calculadora del aula ── */
.aula{display:grid;gap:var(--s-4);margin-top:var(--s-4);align-items:start}
@media(min-width:900px){.aula{grid-template-columns:300px 1fr;gap:var(--s-5)}}

.control+.control{margin-top:var(--s-3)}
.control>.rotulo{color:var(--bronce);display:block;margin-bottom:.6rem}
.control .valor{font-family:var(--serif);font-size:3.4rem;line-height:1;letter-spacing:.04em;
  display:block}
.aula input[type=range]{width:100%;margin-top:.5rem;accent-color:var(--celeste);height:28px}
.aula input[type=range]:focus-visible{outline:2px solid var(--tinta);outline-offset:4px}

.opciones{display:flex;margin-top:.5rem}
.opciones button{flex:1;min-height:52px;background:transparent;border:0;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(16,22,55,.3);font-family:var(--serif);font-size:1.5rem;
  color:var(--tinta);letter-spacing:.04em;transition:background .3s ease,color .3s ease}
.opciones button+button{margin-left:-1px}
.opciones button:hover{background:rgba(220,187,126,.35)}
.opciones button[aria-pressed="true"],
.opciones button[aria-pressed="true"]:hover{background:var(--azul-2);color:var(--crema)}
.opciones button:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}

.cuentas{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);align-items:flex-start;
  padding-bottom:var(--s-3);border-bottom:1px solid rgba(16,22,55,.2)}
.cuenta .n{font-family:var(--serif);font-size:clamp(2.8rem,8vw,4.6rem);line-height:1;
  letter-spacing:.03em;display:block}
.cuenta .q{display:block;font-size:.7rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;color:var(--bronce);margin-top:.5rem}
.resto{margin-top:1rem;color:var(--texto-suave);font-size:.95rem;min-height:1.6em}

/* Cada cajita es un grupo; cada punto, un explorador */
.aula-viz{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:var(--s-3)}
.grupo{display:flex;gap:5px;padding:.55rem;box-shadow:inset 0 0 0 1px rgba(16,22,55,.28)}
.grupo i{width:11px;height:11px;border-radius:50%;background:var(--celeste);display:block}
.pie-viz{margin-top:1.2rem;font-size:.7rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bronce)}

/* ── Los niveles del recorrido ── */
.niveles{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--s-4);
  border-top:1px solid rgba(16,22,55,.2);border-bottom:1px solid rgba(16,22,55,.2)}
.nivel{padding:1.2rem .6rem;text-align:center}
.nivel+.nivel{border-left:1px solid rgba(16,22,55,.2)}
.nivel .r{font-family:var(--serif);font-size:2.1rem;line-height:1;color:var(--bronce);display:block}
.nivel .q{display:block;font-size:.64rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--texto-suave);margin-top:.6rem}

/* ── Los dos tableros ── */
.tableros{display:grid;gap:var(--s-4);margin-top:var(--s-4)}
@media(min-width:940px){.tableros{grid-template-columns:1fr 1fr;gap:var(--s-3)}}
.tablero{background:var(--blanco);box-shadow:inset 0 0 0 1px rgba(16,22,55,.22)}
.tablero__cabeza{background:var(--azul-2);color:var(--crema);padding:var(--s-2) var(--s-3) 1.2rem}
.tablero__cabeza .rotulo{color:var(--oro);display:block;margin-bottom:.5rem}
.tablero__cabeza h3{color:var(--crema)}
.tablero__cabeza .sub{font-size:.9rem;color:#B9BFDC;margin:.5rem 0 0}
.tablero__grupo{padding:var(--s-2) var(--s-3) 1.4rem}
.tablero__grupo+.tablero__grupo{border-top:1px solid rgba(16,22,55,.22)}
.tablero__grupo>.rotulo{color:var(--bronce);display:block;margin-bottom:.6rem}
.fila{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.5rem 0;
  font-size:.95rem;border-bottom:1px solid rgba(16,22,55,.12)}
.fila:last-child{border-bottom:0}
.fila .que{color:var(--texto-suave)}
.fila .dato{font-family:var(--serif);font-size:1.3rem;letter-spacing:.03em;color:var(--tinta);
  white-space:nowrap}
.fila .dato--suave{color:var(--bronce);font-size:1.05rem;white-space:normal;text-align:right}
.tablero .nota{padding:.9rem var(--s-3);border-top:1px solid rgba(16,22,55,.22);
  font-size:.64rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--texto-suave)}

/* ============================================================
   ACCESOS  ·  guía, explorador y juego
   Tres puertas arriba de todo en la página de escuela. Al tocar
   una se abre su formulario; el resto de la página sigue siendo
   la explicación de cómo funciona el aula.
   ============================================================ */
.accesos{display:grid;gap:0;margin-top:var(--s-4);
  border-top:1px solid rgba(16,22,55,.22)}
@media(min-width:720px){.accesos{grid-template-columns:repeat(3,1fr)}}
.acceso-btn{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;
  background:var(--arena);border:0;cursor:pointer;text-align:left;padding:var(--s-3);
  border-bottom:1px solid rgba(16,22,55,.22);font-family:var(--sans);color:var(--tinta);
  transition:background .35s ease,color .35s ease}
@media(min-width:720px){.acceso-btn+.acceso-btn{border-left:1px solid rgba(16,22,55,.22)}}
.acceso-btn svg{width:46px;height:46px;stroke:currentColor;fill:none;
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.acceso-btn .t{font-family:var(--serif);font-size:1.35rem;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.1}
.acceso-btn .d{font-size:.9rem;line-height:1.5;color:var(--texto-suave)}
.acceso-btn:hover{background:var(--arena-2)}
.acceso-btn[aria-selected="true"]{background:var(--azul-2);color:var(--crema)}
.acceso-btn[aria-selected="true"] .d{color:#BBD3E8}
.acceso-btn:focus-visible{outline:2px solid var(--azul-2);outline-offset:-4px}

.formulario{margin-top:var(--s-4);padding:var(--s-4) var(--s-3);max-width:560px;
  background:var(--crema);box-shadow:inset 0 0 0 1px rgba(16,22,55,.18)}
.formulario[hidden]{display:none}
.formulario h3{margin-bottom:var(--s-3)}
.campo+.campo{margin-top:var(--s-3)}
.campo label{display:block;font-size:.66rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bronce);margin-bottom:.5rem}
.campo input{width:100%;min-height:54px;padding:0 1rem;border:0;background:var(--blanco);
  box-shadow:inset 0 0 0 1px rgba(16,22,55,.34);
  font-family:var(--sans);font-size:1rem;color:var(--tinta)}
.campo input:focus{outline:2px solid var(--azul-2);outline-offset:2px}
.formulario .btn{margin-top:var(--s-4);width:100%}
.formulario .aclara{margin-top:1.2rem;font-size:.8rem;color:var(--texto-suave)}
.formulario .aviso{margin-top:1.2rem;padding:1rem;font-size:.95rem;color:var(--texto);
  background:rgba(46,134,199,.1);box-shadow:inset 0 0 0 1px rgba(21,85,140,.35)}
.formulario .aviso:empty{display:none}
/* Sin JavaScript se ven los tres formularios, que es mejor que ninguno */
.sin-js .formulario[hidden]{display:block}
.sin-js .accesos{display:none}

/* ============================================================
   PANELES  ·  lo que ve el guía y lo que ve el explorador
   Registro más denso y más calmo: acá el que mira ya está adentro.
   ============================================================ */
.app-cab{background:linear-gradient(100deg,var(--azul-2),var(--tinta) 78%);color:var(--crema);
  padding:var(--s-4) 0 var(--s-3)}
.app-cab .rotulo{color:var(--oro);display:block;margin-bottom:.8rem}
.app-cab h1{color:var(--crema);font-size:clamp(1.6rem,4.4vw,3rem)}
.app-cab .meta{display:flex;flex-wrap:wrap;gap:.5rem 1.8rem;margin-top:var(--s-3);
  color:#BBD3E8;font-size:.88rem}
.app-cab .meta b{color:var(--crema);font-weight:500;font-family:var(--serif);font-size:1.1rem;
  letter-spacing:.04em}
.app-cab .salir{margin-top:var(--s-3);display:inline-block;color:var(--crema);
  font-size:.68rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid rgba(251,241,220,.5);padding-bottom:3px;
  transition:letter-spacing .35s}
.app-cab .salir:hover{letter-spacing:.28em}

.metricas{display:grid;grid-template-columns:repeat(2,1fr);
  border-bottom:1px solid rgba(16,22,55,.2)}
@media(min-width:760px){.metricas{grid-template-columns:repeat(4,1fr)}}
.metrica{padding:var(--s-3) var(--s-2) var(--s-3) 0}
@media(min-width:760px){.metrica+.metrica{border-left:1px solid rgba(16,22,55,.2);
  padding-left:var(--s-3)}}
.metrica .n{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;
  letter-spacing:.03em;display:block}
.metrica .q{display:block;font-size:.66rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bronce);margin-top:.6rem}
/* span inline: sin display:block la altura no se aplica y la barra se dispara */
.metrica .barra{display:block;height:7px;margin-top:.9rem;background:rgba(16,22,55,.14)}
.metrica .barra i{display:block;height:100%;background:var(--celeste)}

.bloque{padding:var(--s-4) 0;border-top:1px solid rgba(16,22,55,.18)}
.bloque:first-of-type{border-top:0}
.bloque__cab{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:baseline;
  justify-content:space-between}
.bloque__cab .rotulo{color:var(--bronce)}
.bloque__cab p{font-size:.9rem;color:var(--texto-suave);margin:0}
.bloque h2{font-size:clamp(1.2rem,2.6vw,1.9rem);margin-top:.6rem}

.tabla-wrap{overflow-x:auto;margin-top:var(--s-3)}
.tabla{width:100%;border-collapse:collapse;min-width:520px}
.tabla th{text-align:left;font-family:var(--sans);font-size:.62rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bronce);
  padding:.6rem 1.2rem .6rem 0;border-bottom:1px solid rgba(16,22,55,.3);white-space:nowrap}
.tabla td{padding:.8rem 1.2rem .8rem 0;border-bottom:1px solid rgba(16,22,55,.12);
  font-size:.95rem;vertical-align:baseline}
.tabla tr:hover td{background:rgba(220,187,126,.2)}
.tabla th.der,.tabla td.der{text-align:right;padding-right:0}
.tabla .num{font-family:var(--serif);font-size:1.3rem;letter-spacing:.03em;
  color:var(--tinta);white-space:nowrap}
.tabla .yo td{background:rgba(46,134,199,.17)}
.tabla .yo td:first-child{box-shadow:inset 3px 0 0 var(--azul-2)}
.tabla .suave{color:var(--texto-suave)}
.tabla .pend{color:var(--bronce)}

/* Etiqueta de tema, con filete en vez de píldora */
.tema{display:inline-block;padding:.2rem .6rem;font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--texto-arena);
  box-shadow:inset 0 0 0 1px rgba(122,90,22,.45)}

.aviso-proto{margin-top:var(--s-4);padding:1rem var(--s-3);font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--texto-suave);
  box-shadow:inset 0 0 0 1px rgba(16,22,55,.2)}
.campo select{width:100%;min-height:54px;padding:0 1rem;border:0;background:var(--blanco);
  box-shadow:inset 0 0 0 1px rgba(16,22,55,.34);font-family:var(--sans);font-size:1rem;
  color:var(--tinta);appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--bronce) 50%),
                   linear-gradient(135deg,var(--bronce) 50%,transparent 50%);
  background-position:calc(100% - 20px) 24px,calc(100% - 14px) 24px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.campo select:focus{outline:2px solid var(--azul-2);outline-offset:2px}
.codigo-listo{margin-top:var(--s-3);padding:1.2rem;text-align:center;
  background:rgba(46,134,199,.1);box-shadow:inset 0 0 0 1px rgba(21,85,140,.35)}
.codigo-listo .rotulo{color:var(--bronce);display:block;margin-bottom:.5rem}
.codigo-listo b{font-family:var(--serif);font-size:2.6rem;font-weight:400;letter-spacing:.22em;
  line-height:1;display:block;color:var(--tinta)}
.codigo-listo[hidden]{display:none}

/* ============================================================
   ACCESIBILIDAD Y AYUDAS DE USO
   ============================================================ */
/* Salto al contenido: primer elemento enfocable de cada página */
.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-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  transition:transform .2s ease}
.saltar:focus,.saltar:focus-visible{transform:translateY(0)}

/* Puerta todavía sin destino: se ve inactiva en vez de parecer rota */
.puerta--proximo{opacity:.75}
.puerta--proximo:hover{background:transparent}
.puerta--proximo .ir{min-height:0;padding:0;box-shadow:none;color:var(--bronce);
  border-bottom:1px solid currentColor;padding-bottom:3px}
.puerta--proximo:hover .ir{background:transparent;color:var(--bronce);letter-spacing:.22em}

/* Errores de formulario: al lado del campo, no arriba de todo */
.campo .error{margin:.55rem 0 0;font-size:.9rem;font-weight:700;color:var(--error);max-width:none}
.campo input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--error)}
.enlace-demo{display:inline-flex;align-items:center;min-height:44px;margin-top:1rem;
  background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--azul-2);border-bottom:1px solid currentColor}
.enlace-demo:hover{color:var(--tinta)}
.enlace-demo:focus-visible{outline:2px solid var(--azul-2);outline-offset:4px}
.formulario .btn[aria-busy="true"]{opacity:.75;pointer-events:none}

/* Aviso de que la tabla se desliza: solo donde efectivamente se desliza */
.tabla-hint{display:none;margin:.7rem 0 0;font-size:.64rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bronce)}
@media(max-width:640px){.tabla-hint{display:block}}

/* En los instructivos el único título después del h1 estaba en esta franja */
.siguiente h2{color:var(--crema);font-size:clamp(1.1rem,2vw,1.6rem);letter-spacing:.08em}

/* ── Nota de contenido de muestra ─────────────────────────────────
   El prototipo muestra el alcance del contenido, no el contenido.
   Va arriba de las fichas y no al pie: leída después, ya confundió. */
.nota-muestra{max-width:64ch;margin:0 0 var(--s-4);padding:1.1rem 0 1.1rem 1.4rem;
  border-left:3px solid var(--bronce)}
.nota-muestra .rotulo{display:block;color:var(--bronce)}
.nota-muestra p{margin:.75rem 0 0;font-size:.95rem;line-height:1.6;color:var(--texto-suave);
  max-width:none}
.nota-muestra p+p{margin-top:.55rem}
.nota-muestra b{color:var(--tinta);font-weight:700}

/* ── Secciones en blanco ───────────────────────────────────────────
   Reemplazan al crema-2, que se distinguía del crema apenas. El blanco
   sí marca el cambio de sección y descansa la vista en los tramos largos
   de lectura y en las tablas. */
.blanca{background:var(--blanco)}

/* La clave de prueba se nombra como dato, no como prosa */
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  padding:.1em .45em;background:var(--arena-cl);
  box-shadow:inset 0 0 0 1px rgba(122,90,22,.4);color:var(--texto-arena)}
.aviso-proto code{background:var(--blanco)}

/* ═══════════ LO QUE ESCRIBEN LOS EXPLORADORES ═══════════
   El puntaje dice cuánto acertaron; estas fichas dicen qué pensaron, que es
   lo único del desafío que el juego no puede evaluar solo. Van en los dos
   paneles: el guía las lee de todo el aula, el explorador lee las suyas. */
.fichas{display:grid;gap:var(--s-3);margin-top:var(--s-3);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.ficha{padding:var(--s-3);background:var(--blanco);
  box-shadow:inset 0 0 0 1px rgba(16,22,55,.14)}
.ficha__cab{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;
  justify-content:space-between;padding-bottom:.8rem;
  border-bottom:1px solid rgba(16,22,55,.14)}
.ficha__quien{font-family:var(--serif);font-size:1.35rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--texto)}
.ficha__puntos{font-family:var(--sans);font-weight:700;font-size:1.1rem;
  font-variant-numeric:tabular-nums;color:var(--azul-2);white-space:nowrap}
.ficha__puntos small{font-weight:400;color:var(--texto-suave);margin-left:.3rem;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.ficha dt{margin-top:1.1rem;font-family:var(--sans);font-size:.62rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--bronce)}
.ficha dd{margin:.45rem 0 0;padding-left:1rem;border-left:3px solid var(--celeste-cl);
  font-family:var(--serif);font-size:1.1rem;line-height:1.5;color:var(--texto);
  overflow-wrap:anywhere}
/* La palabra que eligió en el umbral: es la llave de todo lo que escribió
   después, así que se lee antes que el resto. */
.ficha__palabra{display:inline-block;margin-top:.9rem;padding:.35rem .9rem;
  background:var(--arena-cl);box-shadow:inset 0 0 0 1px var(--arena-2);
  font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--texto-arena)}

/* ═══════════ BUSCADOR DE MITOLOGÍAS ═══════════
   Veinticuatro fichas seguidas son un muro. El buscador filtra por texto
   —sin acentos, así "nordica" encuentra "Nórdica"— y por continente, y de
   entrada muestra ocho. Sin JavaScript los controles no aparecen y se ven
   las veinticuatro, que es el comportamiento correcto para esta página. */
.oculto-visual{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.sin-js .buscador{display:none}
.buscador{margin-top:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2)}
/* .buscador es flex: sin esto el atributo hidden no lo esconde */
.buscador[hidden]{display:none}

.buscador__campo{display:flex;align-items:center;gap:.8rem;min-height:54px;
  padding:0 1.2rem;background:var(--blanco);
  box-shadow:inset 0 0 0 1px rgba(16,22,55,.28)}
.buscador__campo:focus-within{box-shadow:inset 0 0 0 2px var(--azul-2)}
.buscador__campo svg{width:19px;height:19px;flex-shrink:0;fill:none;
  stroke:var(--texto-suave);stroke-width:2;stroke-linecap:round}
.buscador__campo input{flex:1;min-height:52px;border:0;background:transparent;
  font-family:var(--sans);font-size:1rem;color:var(--texto)}
.buscador__campo input:focus{outline:0}
.buscador__campo input::placeholder{color:var(--texto-suave);opacity:1}

.buscador__chips{display:flex;flex-wrap:wrap;gap:.6rem}
.buscador__chips button{min-height:44px;padding:0 1.1rem;background:transparent;
  border:0;cursor:pointer;font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta);
  box-shadow:inset 0 0 0 1px rgba(16,22,55,.28);transition:background .3s,color .3s}
/* .55 dejaba el numerito en 3,75:1 sobre blanco */
.buscador__chips button .n{opacity:.72;margin-left:.5em}
.buscador__chips button:hover{background:rgba(220,187,126,.3)}
.buscador__chips button[aria-pressed="true"]{background:var(--tinta);
  color:var(--crema);box-shadow:none}
.buscador__chips button[aria-pressed="true"] .n{opacity:.85}
.buscador__chips button:focus-visible{outline:2px solid var(--azul-2);outline-offset:3px}

.buscador__cuenta{font-size:.7rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bronce);margin:0}

/* .ficha-mito es grid, así que también necesita su regla para [hidden] */
.ficha-mito[hidden]{display:none}

.buscador__vacio{margin-top:var(--s-3);color:var(--texto-suave)}
.buscador__vacio[hidden]{display:none}

.buscador__mas{margin-top:var(--s-3);min-height:54px;padding:0 2rem;
  background:transparent;border:0;cursor:pointer;font-family:var(--sans);
  font-size:.78rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--tinta);box-shadow:inset 0 0 0 1px currentColor;
  transition:background .35s,color .35s,letter-spacing .35s}
.buscador__mas:hover{background:var(--tinta);color:var(--crema);letter-spacing:.32em}
.buscador__mas:focus-visible{outline:2px solid var(--azul-2);outline-offset:4px}
.buscador__mas[hidden]{display:none}