/* =========================================================
   Toknihuan · tema prehispánico
   Va DESPUÉS de styles.css, así que esta hoja gana.

   La decisión de fondo (Walter, 18 sep): oscuro para leer, rojo de marca
   con fuerza en portada, grecas y botones. El rojo sobre negro NO pasa
   contraste AA en letra chica, así que el rojo va en trazos, fondos de
   bloque y botones — nunca en párrafos.

   Todo lo que se mueve está detrás de:
     .js            → si el JS no carga, la página queda quieta y completa
     prefers-reduced-motion → quien pide menos movimiento no ve nada girar
   ========================================================= */

/* ---------- 1. el lema, arriba de todo ---------- */
/* El texto del lema llega con el JS. Sin esta altura reservada, la página
   entera daba un brinco de 15 px al cargar (CLS 0,38, medido). */
.banner-lema{min-height:calc(1.4em + 18px);
 background:var(--marca-fondo);color:#fff;text-align:center;
 padding:9px 16px;font:600 11px/1.4 var(--sans);letter-spacing:3px;text-transform:uppercase}

/* ---------- 1b. barra: tres zonas ----------
   izquierda = quién soy · centro = a dónde voy · derecha = cómo lo veo.
   Instagram sale de la barra: la visita LLEGA de Instagram y el enlace ya
   está en el pie. El burger es solo de celular. */
#ig{display:none!important}

.burger{width:44px;height:44px;display:grid;place-content:center;gap:5px;
 border:1px solid var(--linea);border-radius:50%}
.burger i{display:block;width:17px;height:2px;background:currentColor;border-radius:2px;
 transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded=true] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){opacity:0}
.burger[aria-expanded=true] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* El menú: sin JS queda visible y usable. El JS es el que lo esconde.
   Ojo: styles.css le mete margen negativo y padding-left:0 a TODO `nav` en
   celular, para la fila deslizable vieja. Aquí hay que desarmarlo o el
   primer enlace sale cortado por la izquierda. */
.menu{background:var(--panel);border-bottom:1px solid var(--linea)}
.menu nav{display:flex;flex-direction:column;width:auto;
 margin:0;padding:6px 22px 14px;overflow:visible;white-space:normal;gap:0}
.menu nav a{display:flex;align-items:center;min-height:52px;font-size:16px;color:var(--fg);
 padding:0;border:0;border-bottom:1px solid var(--linea)}
.menu nav a:first-child{padding-left:0}
.menu nav a:last-of-type{border-bottom:0}
.menu .menu-modo{display:flex;align-items:center;gap:12px;min-height:52px;width:100%;
 border-top:1px solid var(--linea);color:var(--sub);font-size:15px}

@media (max-width:759px){
 /* una sola fila en la barra: se va la fila deslizable de enlaces */
 html{scroll-padding-top:76px}
 section{scroll-margin-top:72px}
 header{flex-wrap:nowrap;row-gap:0;padding-bottom:14px}
 header nav{display:none}
 .menu{position:sticky;top:69px;z-index:39;max-height:70svh;overflow-y:auto}
 /* el modo oscuro se va adentro del menú */
 #modo{display:none}
}
@media (min-width:760px){
 .burger{display:none}
 .menu{display:none}
 .menu-modo{display:none}
}

/* ---------- 2. greca separadora ----------
   Va por máscara, no por background-image: un SVG cargado como imagen de
   fondo NO hereda currentColor y la greca salía negra. Con mask el color
   lo pone el background-color, que sí es el rojo de marca. */
.greca{
 display:block;width:100%;height:26px;border:0;
 background-color:var(--marca-rojo);
 -webkit-mask:url('assets/greca.svg') repeat-x center/auto 100%;
 mask:url('assets/greca.svg') repeat-x center/auto 100%;
 opacity:.9}
html[data-modo=claro] .greca{opacity:.75}

/* Versión dibujada: el trazo se pinta al entrar en pantalla.
   Necesita el SVG en línea, por eso hay dos clases. */
.greca-viva{display:block;width:100%;height:30px;color:var(--marca-rojo);overflow:hidden}
.greca-viva svg{width:100%;height:100%}
.js .greca-viva path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s ease}
.js .greca-viva.visible path{stroke-dashoffset:0}
.js .greca-viva.visible path:nth-child(2){transition-delay:.15s}
.js .greca-viva.visible path:nth-child(3){transition-delay:.3s}

/* ---------- 3. la escena de los danzantes ----------
   Dos fotos que se turnan detrás de la portada, la greca, el cintillo y las
   tres promesas. Van apagadas y hundidas en el negro para que el texto mande,
   y se desvanecen hasta la línea de abajo de las promesas. Al bajar, --avance
   (0 → 1, lo pone app.js) las sube de brillo y las mueve más lento que la
   página: el danzante se revela. Solo transform y opacity: no traban nada.
   La escena es oscura también en modo claro: un danzante sobre crema se veía lavado. */
.escena{position:relative;isolation:isolate;overflow:hidden;background:var(--obsidiana);color:#f4ecdf}
.escena>*:not(.portada-fotos){position:relative;z-index:1}
.portada-fotos{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
 opacity:calc(.45 + var(--avance,0) * .45);
 transform:translate3d(0,calc(var(--avance,0) * 10%),0);will-change:transform,opacity;
 -webkit-mask-image:linear-gradient(180deg,#000 calc(25% + var(--avance,0) * 30%),transparent 100%);
 mask-image:linear-gradient(180deg,#000 calc(25% + var(--avance,0) * 30%),transparent 100%)}
.portada-fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--foco,50% 20%);
 transform:scale(calc(1.04 + var(--avance,0) * .06));
 opacity:0;transition:opacity 1.8s ease;filter:saturate(.75)}
.portada-fotos img.activa{opacity:1}
/* Las rojas ya vienen teñidas con el rojo de marca (duotono): sin quitarles color. */
.portada-fotos img.rojo{filter:none}
.escena .portada{background:none}
.portada:after,html[data-modo=claro] .portada:after{
 background:radial-gradient(120% 70% at 70% 20%,transparent 0%,#0c0a0899 60%)}
/* Las franjas de abajo dejan ver al danzante a través. */
.escena .cintillo,html[data-modo=claro] .escena .cintillo{background:#0c0a08a6;color:#c6b49b;backdrop-filter:blur(2px)}
.escena .pruebas{border-bottom-color:#ffffff1f}
.escena .cintillo{border-color:#ffffff1f}
.escena .prueba b{color:#e2b269}
.escena .prueba p{color:#cfc4b5}
@media (min-width:900px){
 .portada-fotos{left:auto;width:62%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%),linear-gradient(180deg,#000 calc(45% + var(--avance,0) * 30%),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 45%),linear-gradient(180deg,#000 calc(45% + var(--avance,0) * 30%),transparent 100%);
  mask-composite:intersect}
 .portada:after,html[data-modo=claro] .portada:after{background:none}
}
@media (prefers-reduced-motion:reduce){.portada-fotos img{transition:none}}

/* El título deja el dorado y toma el blanco de marca, que sí contrasta. */
.portada h1 em{color:#fff}
.portada .rotulo{color:#ffe9e9}

/* ---------- 4. emblema vivo de la portada ----------
   Las piezas van sueltas para poder moverlas por separado: los pétalos,
   la piedra (gira) y el colibrí (vuela), con la geometría exacta del logo.
   El emblema va a color pleno: en transparencia se volvía una mancha café
   sobre la foto. Para que los cuatro colores se lean, se para sobre su
   propio halo oscuro en vez de sobre las plumas. */
.emblema-vivo{
 position:absolute;z-index:1;right:-5%;top:8%;
 width:min(50vw,240px);pointer-events:none;
 filter:drop-shadow(0 18px 44px #000c)}
.emblema-vivo:before{content:"";position:absolute;inset:-22%;border-radius:50%;
 background:radial-gradient(circle,#0c0a08e6 0%,#0c0a08b8 46%,transparent 72%)}
.emblema-vivo svg{position:relative;width:100%;height:auto;display:block}

/* los cuatro pétalos se abren al cargar */
.js .ev-petalo{transform-box:fill-box;transform-origin:50% 100%;
 opacity:0;scale:.25}
.js .emblema-vivo.abierta .ev-petalo{
 animation:abrir-petalo .8s cubic-bezier(.34,1.56,.64,1) both;
 animation-delay:calc(var(--i) * .13s)}
@keyframes abrir-petalo{to{opacity:1;scale:1}}

/* la piedra gira con el scroll; el JS le mueve --giro.
   transform-box:fill-box hace que gire sobre su propio centro y no sobre
   la esquina del lienzo del SVG. */
.emblema-vivo .ev-piedra{transform-box:fill-box;transform-origin:center;
 rotate:var(--giro,0deg)}

/* el colibrí se acerca a la piedra con el scroll */
.emblema-vivo .ev-colibri{transform-box:fill-box;
 translate:var(--vuelo-x,-9%) var(--vuelo-y,-6%)}

/* En pantallas medianas el titular llega lejos y el colibrí lo rozaba.
   El emblema se achica y sube hasta que hay ancho de sobra. */
@media (min-width:760px){
 .emblema-vivo{right:1%;top:2%;width:min(27vw,300px)}
}
@media (min-width:1240px){
 .emblema-vivo{top:7%;width:min(34vw,410px)}
}

/* ---------- 5. botones con el rojo de marca ---------- */
.boton.oro{background:var(--marca-fondo);color:#fff}
.chip[aria-pressed=true]{background:var(--marca-fondo);border-color:var(--marca-fondo);color:#fff}
.pieza:hover{border-color:var(--marca-rojo)}
.aviso{border-left-color:var(--marca-rojo)}

/* ---------- 6. lo que se mueve, se puede apagar ---------- */
@media (prefers-reduced-motion:reduce){
 .js .ev-petalo{opacity:1;scale:1;animation:none!important}
 .emblema-vivo .ev-piedra{rotate:0deg!important}
 .emblema-vivo .ev-colibri{translate:-9% -6%!important}
 .js .greca-viva path{stroke-dashoffset:0!important;transition:none!important}
}

/* En celular flojo el JS apaga los efectos caros con esta clase. */
.sin-efectos .emblema-vivo .ev-piedra{rotate:0deg!important}
.sin-efectos .emblema-vivo .ev-colibri{translate:-9% -6%!important}

/* ---------- el códice detrás de la agenda ----------
   "El modo de baylar de los Mexicanos", Códice Tovar (dominio público; ver
   fuentes/danzantes/LEEME.md). Va casi invisible detrás de la agenda, la
   práctica de los viernes y las presentaciones: el círculo de danza como marca
   de agua. En oscuro se invierte (las líneas quedan claras sobre negro); en
   claro se multiplica sobre el papel. */
#agenda{position:relative;isolation:isolate}
/* Solo en la parte de arriba (título y tarjetas): el escenario de abajo tapaba el círculo. */
#agenda:before{content:"";position:absolute;inset:0 0 auto;height:min(820px,72%);z-index:-1;pointer-events:none;
 background:url(assets/codice-danza.webp) center/contain no-repeat;
 opacity:.10;filter:grayscale(1) invert(1);
 -webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000 40%,transparent 85%);
 mask-image:radial-gradient(60% 60% at 50% 50%,#000 40%,transparent 85%)}
html[data-modo=claro] #agenda:before{opacity:.16;filter:sepia(.3);mix-blend-mode:multiply}
/* Las tarjetas dejan pasar un poco el códice de atrás (antes lo tapaban entero). */
#agenda .evento{background:color-mix(in srgb,var(--panel) 80%,transparent)}
#agenda .evento.enlace:hover,#agenda .evento[aria-pressed=true]{background:color-mix(in srgb,var(--panel) 80%,var(--oro) 12%)}