/* Olintli — día mexicano. Capa web (HTML/CSS) sobre el lienzo 3D: secciones que fluyen, tipografía cinética,
   tarjetas de papel cálido, papel picado y azulejo de talavera. Reglas de rendimiento:
   · solo se animan transform y opacity (nunca layout); los desenfoques de fondo (backdrop-filter) solo en escritorio
     con gama media/alta, porque sobre WebGL se recalculan cada frame;
   · sombras pequeñas en móvil; los decorados son SVG en data URI (se rasterizan una vez). */
@font-face {
  font-family: 'Archivo';
  src: url('../assets/fonts/archivo-var.woff') format('woff');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
:root {
  /* papel y tinta */
  --papel: #fffaf3;
  --papel-2: #f8efe1;
  --crema: #fdf4e7;
  --tinta: #1c1633;            /* añil casi negro: texto principal */
  --tinta-2: #463f60;
  --tinta-3: #5d5677;          /* atenuado: 6,5:1 sobre papel (el anterior #6c6585 quedaba justo en la tabla) */
  --linea: rgba(28, 22, 51, 0.12);
  /* paleta mexicana */
  --rosa: #e4007c; --rosa-2: #ff2b94; --rosa-d: #b5005f;
  --cempa: #f29a0e; --cempa-2: #ffb21f; --cempa-d: #9a5000;   /* -d: texto/acento, 5.7:1 sobre papel (≥ 5:1 sobre el tinte naranja) */
  --naranja: #ff5a1f;
  --turquesa: #00a6a0; --turquesa-d: #007b77;
  --anil: #2445a8; --anil-2: #3a5fd0;
  --jacaranda: #8e6bd8; --jacaranda-d: #6844c2;
  --buganvilia: #d8287a;
  --verde: #3aa64a;
  --cielo: #bfe3fb;
  --accent: var(--rosa);
  /* tarjetas: casi opacas en móvil (sin desenfoque), translúcidas con desenfoque en escritorio */
  --card-bg: rgba(255, 250, 243, 0.93);
  --card-shadow: 0 0.5rem 1.4rem -0.8rem rgba(40, 22, 60, 0.35);
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gutter: clamp(1rem, 4vw, 3.25rem);
  /* margen lateral que respeta las zonas seguras: en un iPhone acostado la muesca o la Dynamic Island ocupan ~47–59 px
     de un lado (y el redondeo de la esquina del otro); en Android, los recortes de cámara laterales. Se usa en todo lo
     que se alinea a un borde (barra, riel, columnas, subtítulos, pie). Se recalcula solo cuando --gutter cambia. */
  --gut-l: max(var(--gutter), env(safe-area-inset-left, 0px));
  --gut-r: max(var(--gutter), env(safe-area-inset-right, 0px));
  /* alto «pequeño» del viewport (sin las barras del navegador móvil). Chromium < 108 (WebViews de Android 5–6, Huawei
     sin Google, Samsung Internet viejo) no conoce svh: la declaración entera se descartaría y los actos quedarían sin
     altura (la línea de tiempo se comprimiría). Con la variable, ahí vale 1vh y el resto del CSS no cambia. */
  --svh: 1vh;
  --rail: 7rem;
  --col: min(34rem, 40vw);
  --c0: calc(26 * var(--svh));                  /* dónde cae el encabezado de cada acto cuando T llega al entero */
  --pin: calc(170 * var(--svh));                /* recorrido del escenario fijo de Extension */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --radius: 18px;
  /* decorados (SVG en data URI): papel picado, azulejo de talavera y flor de cempasúchil */
  --pp-garland: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 216 40' width='216' height='40'%3E%3Cdefs%3E%3Cpath id='f' fill-rule='evenodd' d='M0 0H26V27L23.4 30L20.8 27L18.2 30L15.6 27L13 30L10.4 27L7.8 30L5.2 27L2.6 30L0 27ZM13 6.5L18.5 14L13 21.5L7.5 14Z M13 10.5L15.6 14L13 17.5L10.4 14ZM3.5 3.5h3.2v3.2h-3.2Z M19.3 3.5h3.2v3.2h-3.2Z M3.5 21h3.2v3.2h-3.2Z M19.3 21h3.2v3.2h-3.2ZM11.6 1.8h2.8v2.2h-2.8Z M11.6 24h2.8v2.2h-2.8Z'/%3E%3C/defs%3E%3Cpath d='M0 4.2Q54 8.4 108 4.2T216 4.2' fill='none' stroke='%235a4636' stroke-width='1.1'/%3E%3Cuse href='%23f' x='5' y='5.6000000000000005' fill='%23e4007c'/%3E%3Cuse href='%23f' x='41' y='6.800000000000001' fill='%23f29a0e'/%3E%3Cuse href='%23f' x='77' y='5.6000000000000005' fill='%2300a6a0'/%3E%3Cuse href='%23f' x='113' y='6.800000000000001' fill='%238e6bd8'/%3E%3Cuse href='%23f' x='149' y='5.6000000000000005' fill='%233aa64a'/%3E%3Cuse href='%23f' x='185' y='6.800000000000001' fill='%232445a8'/%3E%3C/svg%3E");
  --talavera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Crect width='48' height='48' fill='%23fffaf3'/%3E%3Ccircle cx='0' cy='0' r='10.5' fill='%232445a8'/%3E%3Ccircle cx='0' cy='0' r='6' fill='%23fffaf3'/%3E%3Ccircle cx='0' cy='0' r='2.6' fill='%23f29a0e'/%3E%3Ccircle cx='48' cy='0' r='10.5' fill='%232445a8'/%3E%3Ccircle cx='48' cy='0' r='6' fill='%23fffaf3'/%3E%3Ccircle cx='48' cy='0' r='2.6' fill='%23f29a0e'/%3E%3Ccircle cx='0' cy='48' r='10.5' fill='%232445a8'/%3E%3Ccircle cx='0' cy='48' r='6' fill='%23fffaf3'/%3E%3Ccircle cx='0' cy='48' r='2.6' fill='%23f29a0e'/%3E%3Ccircle cx='48' cy='48' r='10.5' fill='%232445a8'/%3E%3Ccircle cx='48' cy='48' r='6' fill='%23fffaf3'/%3E%3Ccircle cx='48' cy='48' r='2.6' fill='%23f29a0e'/%3E%3Cg fill='%232445a8'%3E%3Cg transform='rotate(0 24 24)'%3E%3Cellipse cx='24' cy='12.5' rx='4.3' ry='7.6'/%3E%3C/g%3E%3Cg transform='rotate(90 24 24)'%3E%3Cellipse cx='24' cy='12.5' rx='4.3' ry='7.6'/%3E%3C/g%3E%3Cg transform='rotate(180 24 24)'%3E%3Cellipse cx='24' cy='12.5' rx='4.3' ry='7.6'/%3E%3C/g%3E%3Cg transform='rotate(270 24 24)'%3E%3Cellipse cx='24' cy='12.5' rx='4.3' ry='7.6'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%2300a6a0'%3E%3Cg transform='rotate(45 24 24)'%3E%3Cellipse cx='24' cy='15' rx='2.2' ry='4.2'/%3E%3C/g%3E%3Cg transform='rotate(135 24 24)'%3E%3Cellipse cx='24' cy='15' rx='2.2' ry='4.2'/%3E%3C/g%3E%3Cg transform='rotate(225 24 24)'%3E%3Cellipse cx='24' cy='15' rx='2.2' ry='4.2'/%3E%3C/g%3E%3Cg transform='rotate(315 24 24)'%3E%3Cellipse cx='24' cy='15' rx='2.2' ry='4.2'/%3E%3C/g%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='4.6' fill='%23f29a0e'/%3E%3Ccircle cx='24' cy='24' r='1.9' fill='%232445a8'/%3E%3Cpath d='M24 0v3M24 45v3M0 24h3M45 24h3' stroke='%232445a8' stroke-width='1.4'/%3E%3C/svg%3E");
  --flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cg fill='%23f29a0e'%3E%3Cg transform='rotate(0 16 16)'%3E%3Cellipse cx='16' cy='7.2' rx='3.6' ry='6.2'/%3E%3C/g%3E%3Cg transform='rotate(40 16 16)'%3E%3Cellipse cx='16' cy='7.2' rx='3.6' ry='6.2'/%3E%3C/g%3E%3Cg transform='rotate(80 16 16)'%3E%3Cellipse cx='16' cy='7.2' rx='3.6' ry='6.2'/%3E%3C/g%3E%3Cg transform='rotate(120 16 16)'%3E%3Cellipse cx='16' cy='7.2' rx='3.6' ry='6.2'/%3E%3C/g%3E%3Cg transform='rotate(160 16 16)'%3E%3Cellipse cx='16' cy='7.2' rx='3.6' ry='6.2'/%3E%3C/g%3E%3Cg transform='rotate(200 16 16)'%3E%3Cellipse cx='16' cy='7.2' rx='3.6' ry='6.2'/%3E%3C/g%3E%3Cg transform='rotate(240 16 16)'%3E%3Cellipse cx='16' cy='7.2' rx='3.6' ry='6.2'/%3E%3C/g%3E%3Cg transform='rotate(280 16 16)'%3E%3Cellipse cx='16' cy='7.2' rx='3.6' ry='6.2'/%3E%3C/g%3E%3Cg transform='rotate(320 16 16)'%3E%3Cellipse cx='16' cy='7.2' rx='3.6' ry='6.2'/%3E%3C/g%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='6.4' fill='%23ff5a1f'/%3E%3Ccircle cx='16' cy='16' r='2.6' fill='%23e4007c'/%3E%3C/svg%3E");
  color-scheme: light;
}
@supports (height: 1svh) { :root { --svh: 1svh; } }
*, *::before, *::after { box-sizing: border-box; }
/* · touch-action: manipulation quita el zoom con doble toque (tocar dos veces al colibrí = dos acrobacias, no un zoom
     de la página en iOS) y deja el desplazamiento y el pellizco para ampliar (accesibilidad).
   · overscroll-behavior-y: el recorrido se maneja con el scroll: sin «tirar para recargar» de Android (al volver de
     prisa al héroe recargaba todo el valle) ni el rebote elástico de iOS, que despegaba el lienzo fijo de la página y
     dejaba ver el fondo. */
html { background: var(--cielo); color: var(--tinta); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; overscroll-behavior-y: none; }
body {
  margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; font-weight: 400; font-stretch: 100%;
  background: linear-gradient(180deg, #8ec8f2 0%, #cfe8fb 46%, #fbefdc 100%) fixed; color: var(--tinta);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; overflow-x: clip; -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
img { max-width: 100%; }
code { font-size: 0.9em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--rosa); color: #fff; }
.skip { position: fixed; z-index: 30; left: max(1rem, env(safe-area-inset-left, 0px)); top: -4rem; background: var(--tinta); color: #fff; padding: 0.6rem 1rem; border-radius: 8px; text-decoration: none; }
.skip:focus { top: max(1rem, env(safe-area-inset-top, 0px)); }

/* lienzo fijo detrás del contenido: alto del viewport grande para no redimensionar con la barra del navegador (sin lvh
   — Safari < 15.4, Chromium < 108 — queda 100vh, que en esos navegadores ya es el alto con las barras ocultas).
   touch-action: el lienzo queda bajo <main> y casi nunca recibe el dedo, pero si lo recibe deja pellizcar para ampliar */
#gl { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; z-index: 0; touch-action: manipulation; }
main { position: relative; z-index: 1; overflow-x: clip; }
/* nada puede desbordar a lo ancho: en móvil Chrome ensancharía el viewport de layout y las barras fijas se saldrían de
   la pantalla. overflow: clip recorta sin crear un contenedor de scroll (no rompe position: sticky). */
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }
/* mantener presionado sobre la escena = aleteo en cámara lenta (main.js, fuera de tarjetas y enlaces). En iOS y Android
   ese mismo gesto sobre las zonas vacías de un acto abría la lupa, seleccionaba la palabra más cercana o el menú del
   sistema. Se apagan ahí; los textos, tarjetas y enlaces se siguen pudiendo seleccionar, copiar y abrir. */
#gl, .act { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.act :is(.panel, .card, .faq, a) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* ---------- tipografía */
h1, h2, h3 { margin: 0; font-weight: 820; font-stretch: 116%; letter-spacing: -0.02em; line-height: 1.02; text-wrap: balance; }
h2 { font-size: clamp(2.3rem, 4.4vw, 4rem); margin-bottom: 0.9rem; }
h2 em { font-style: normal; color: var(--accent); }
h3 { font-size: 1.12rem; font-stretch: 108%; letter-spacing: -0.01em; line-height: 1.2; }
.display { font-size: clamp(4.6rem, 10.5vw, 9.6rem); font-weight: 900; font-stretch: 125%; letter-spacing: -0.035em; line-height: 0.92; margin-bottom: 0.4rem; }
.display-2 { font-size: clamp(2.6rem, 6vw, 5.4rem); font-weight: 880; font-stretch: 122%; letter-spacing: -0.03em; line-height: 0.98; }
.sub { font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 650; font-stretch: 110%; line-height: 1.25; margin: 0 0 0.9rem; color: var(--tinta); }
.lead { font-size: clamp(1.08rem, 1.35vw, 1.24rem); line-height: 1.55; margin: 0 0 1rem; font-weight: 430; color: var(--tinta-2); text-wrap: pretty; max-width: 34em; }
p { text-wrap: pretty; }
.eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; margin: 0 0 1rem; font-size: 0.8rem; font-weight: 700; font-stretch: 112%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-2); }
.eyebrow b { display: inline-grid; place-items: center; min-width: 2.1rem; height: 1.6rem; padding: 0 0.45rem; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; letter-spacing: 0.02em; }
.eyebrow-pill { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; padding: 0.45rem 0.9rem 0.45rem 0.6rem; border-radius: 999px; background: rgba(255, 250, 243, 0.86); box-shadow: inset 0 0 0 1px var(--linea); color: var(--tinta); }
/* punto con pulso: el anillo es un pseudo-elemento que solo escala y se desvanece (compositor, sin repintar) */
.dot { position: relative; flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--rosa); }
.dot::after { content: ""; position: absolute; inset: -0.3rem; border-radius: 50%; background: rgba(228, 0, 124, 0.28); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.pill { display: inline-block; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.75rem; letter-spacing: 0.04em; color: #fff; }
.pill-rosa { background: var(--rosa); } .pill-cempa { background: var(--cempa-d); }

/* marca: "OLINTLI" en líneas paralelas (homenaje a la gráfica de México 68), recoloreada para el día */
.wordmark { margin: 0 0 1.2rem; line-height: 0; }
.wordmark svg { width: clamp(17rem, 46vw, 42rem); height: auto; overflow: visible; }
.wm-s { stroke-dasharray: 100; stroke-dashoffset: 100; animation: wm-draw 2.4s var(--ease) 0.2s forwards; }
.wm-u { opacity: 0.94; }
html.js body.is-loading .wm-s { animation-play-state: paused; }
html:not(.js) .wm-s { animation: none; stroke-dashoffset: 0; }   /* modo estático o sin JS: la marca ya dibujada */
@keyframes wm-draw { to { stroke-dashoffset: 0; } }

/* ---------- botones (magnéticos en escritorio: --tx/--ty los escribe src/web/hover.js) */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.3rem; }
.btn {
  --tx: 0px; --ty: 0px; --lift: 0px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 3rem; padding: 0.75rem 1.35rem;
  font: 700 1rem/1 var(--font); font-stretch: 110%; text-decoration: none; border-radius: 999px; cursor: pointer; border: 0; isolation: isolate; overflow: hidden;
  transform: translate3d(var(--tx), calc(var(--ty) + var(--lift)), 0);
  transition: transform 0.35s var(--ease-out), background-color 0.25s, box-shadow 0.25s, color 0.25s;
}
.btn.is-magnet { transition: transform 0.12s linear, background-color 0.25s, box-shadow 0.25s, color 0.25s; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--fill, transparent); transform: translateY(101%); transition: transform 0.45s var(--ease-out); }
/* efectos de :hover solo con un puntero que de verdad pasa por encima: en pantallas táctiles el :hover se queda
   «pegado» tras tocar (el botón seguía relleno de oscuro, la etiqueta del riel visible) hasta tocar otra cosa */
@media (hover: hover) {
  .btn:hover { --lift: -2px; }
  .btn:hover::before { transform: none; }
  .btn:hover .arrow { transform: translateX(3px); }
}
.btn:active { --lift: 1px; }
.btn .arrow { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--ease-out); }
.btn-primary { background: var(--rosa); color: #fff; --fill: var(--rosa-d); box-shadow: 0 0.7rem 1.6rem -0.8rem rgba(228, 0, 124, 0.75); }
.btn-cempa { background: var(--cempa); color: var(--tinta); --fill: var(--cempa-2); box-shadow: 0 0.7rem 1.6rem -0.8rem rgba(242, 154, 14, 0.8); }
.btn-ghost { background: rgba(255, 250, 243, 0.88); color: var(--tinta); --fill: var(--papel); box-shadow: inset 0 0 0 1.5px rgba(28, 22, 51, 0.22); }
@media (hover: hover) { .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--tinta); } }
.btn-small { min-height: 2.4rem; padding: 0.5rem 1rem; font-size: 0.92rem; }
.btn-big { min-height: 3.5rem; padding: 0.9rem 1.7rem; font-size: 1.08rem; }

/* ---------- barra superior */
.topbar {
  position: fixed; z-index: 8; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 1.6rem;
  padding: max(0.7rem, env(safe-area-inset-top, 0px)) var(--gut-r) 0.7rem var(--gut-l);
  transition: transform 0.45s var(--ease-out), background-color 0.35s, box-shadow 0.35s;
}
.topbar.is-scrolled { background: rgba(255, 250, 243, 0.94); box-shadow: 0 1px 0 var(--linea), 0 0.6rem 1.4rem -1.2rem rgba(40, 22, 60, 0.35); }
/* barra aún transparente (héroe): los enlaces van sobre el cielo. En añil medio quedaban en ~3,2:1; en tinta plena y con
   un velo crema suave que se desvanece hacia abajo pasan de 5:1 sin tapar el papel picado */
.topbar::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: calc(100% + 1.4rem); pointer-events: none; background: linear-gradient(rgba(255, 250, 243, 0.5), rgba(255, 250, 243, 0)); transition: opacity 0.35s; }
.topbar.is-scrolled::before { opacity: 0; }
.topbar:not(.is-scrolled) .topnav a { color: var(--tinta); }
.topbar.is-hidden { transform: translateY(-110%); }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; font-weight: 880; font-stretch: 122%; font-size: 1.2rem; letter-spacing: -0.015em; color: var(--tinta); }
.glyph { width: 1.9rem; height: 1.9rem; color: var(--rosa); transition: transform 0.6s var(--ease-out); }
@media (hover: hover) { .brand:hover .glyph { transform: rotate(90deg); } }
.topnav { display: flex; gap: 1.5rem; margin-left: auto; }
.topnav a { position: relative; text-decoration: none; color: var(--tinta-2); font-size: 0.95rem; font-weight: 600; padding: 0.35rem 0; }
.topnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.35s var(--ease-out); }
.topnav a[aria-current="true"] { color: var(--tinta); }
.topnav a[aria-current="true"]::after { transform: none; }
@media (hover: hover) { .topnav a:hover { color: var(--tinta); } .topnav a:hover::after { transform: none; } }
.menu-btn { display: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--tinta); cursor: pointer; position: relative; flex: none; }
.menu-btn i { position: absolute; left: 0.78rem; right: 0.78rem; height: 2px; border-radius: 2px; background: #fff; transition: transform 0.4s var(--ease-out); }
.menu-btn i:first-child { top: calc(50% - 4px); } .menu-btn i:last-child { top: calc(50% + 3px); }
.menu-btn[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* menú de pantalla completa. Centrado vertical con márgenes automáticos y no con justify-content: center: cuando la lista
   no cabe (teléfono acostado, 667×375) el centrado la desbordaba por ARRIBA, «Inicio» quedaba bajo la barra y no había
   forma de desplazarse hasta él. Con margin: auto sobra espacio → centrado; falta → empieza arriba y se desplaza. */
.menu {
  position: fixed; inset: 0; z-index: 7; display: flex; flex-direction: column; gap: 2rem;
  padding: calc(env(safe-area-inset-top, 0px) + 6rem) var(--gut-r) max(2rem, calc(env(safe-area-inset-bottom, 0px) + 1rem)) var(--gut-l);
  background: var(--papel); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-1.5rem); transition: opacity 0.35s, transform 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* con el menú abierto la página no se desplaza detrás (ni cambia T); el resto del documento queda inert (widgets.js) */
body.menu-open { overflow: hidden; }
.menu > nav { margin-top: auto; }
.menu > .btn { align-self: flex-start; margin-bottom: auto; }
.menu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.menu li { overflow: hidden; }
/* cada enlace mide al menos 44 px de alto (objetivo táctil), con el texto que sea: el relleno completa lo que falte */
.menu li a { display: flex; align-items: baseline; gap: 0.8rem; padding: max(0.1rem, (2.75rem - 1.08em) / 2) 0; text-decoration: none; font-size: clamp(2.2rem, 10.5vw, 3.6rem); font-weight: 880; font-stretch: 122%; letter-spacing: -0.03em; line-height: 1.08; color: var(--tinta); transform: translateY(105%); transition: transform 0.6s var(--ease-out) calc(var(--i) * 45ms + 80ms); }
.menu.is-open li a { transform: none; }
.menu li a small { font-size: 0.85rem; font-weight: 700; color: var(--rosa-d); letter-spacing: 0.04em; }
.menu li a[aria-current="true"] { color: var(--rosa); }
.garland-menu { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + 4.2rem); }
.talavera-menu { position: absolute; left: 0; right: 0; bottom: 0; height: 2rem; }

/* ---------- riel de capítulos (escritorio) / barra de progreso (teléfono) */
.rail { position: fixed; z-index: 5; right: var(--gut-r); top: 50%; transform: translateY(-50%); }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; text-decoration: none; color: var(--tinta-2); font-size: 0.8rem; font-weight: 700; font-stretch: 110%; }
.rail a span { opacity: 0; transform: translateX(4px); padding: 0.18rem 0.5rem; border-radius: 999px; background: rgba(255, 250, 243, 0.92); transition: opacity 0.3s, transform 0.3s var(--ease-out); }
.rail a:focus-visible span, .rail a[aria-current="true"] span { opacity: 1; transform: none; }
@media (hover: hover) { .rail:hover a span { opacity: 1; transform: none; } }
.rail a i { order: 2; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(255, 250, 243, 0.92); box-shadow: inset 0 0 0 1.4px rgba(28, 22, 51, 0.5), 0 1px 3px rgba(28, 22, 51, 0.3); transition: background 0.3s, box-shadow 0.3s, transform 0.3s; }
.rail a[aria-current="true"] { color: var(--tinta); }
.rail a[aria-current="true"] i { background: var(--accent); box-shadow: 0 0 0 3px rgba(255, 250, 243, 0.85), 0 1px 4px rgba(28, 22, 51, 0.3); transform: scale(1.25); }
/* en el héroe (T < 0,86) el riel queda en puntos: la etiqueta «Inicio» caía sobre el letrero de la trajinera, junto al colibrí */
body.rail-quiet .rail:not(:hover) a:not(:focus-visible) span { opacity: 0; transform: translateX(4px); }
@media (hover: none) { body.rail-quiet .rail a:not(:focus-visible) span { opacity: 0; transform: translateX(4px); } }
.rail-bar { display: none; }
.rail ol { transition: opacity 0.4s, visibility 0s linear 0s; }
body.at-foot .rail ol { opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s linear 0.4s; }

/* ---------- actos: secciones que fluyen; el texto va en la columna contraria al colibrí */
.act { position: relative; }
.act-hero { min-height: calc(135 * var(--svh)); }
.act-ollin { min-height: calc(150 * var(--svh)); --accent: var(--turquesa-d); }
.act-ext { height: calc(100 * var(--svh) + var(--pin)); --accent: var(--rosa); }
.act-leg { min-height: calc(160 * var(--svh)); --accent: var(--cempa-d); }
.act-cmp { min-height: calc(150 * var(--svh)); --accent: var(--jacaranda-d); }
.act-cta { --accent: var(--rosa); }
/* acento del capítulo activo (barra superior, riel): lo fija ui.js en body[data-act] solo al cambiar de acto */
body[data-act="ollin"] { --accent: var(--turquesa-d); } body[data-act="legacy"] { --accent: var(--cempa-d); } body[data-act="compare"] { --accent: var(--jacaranda-d); }
h2 em.e-ext { color: var(--rosa); } h2 em.e-leg { color: var(--cempa-d); }
.col { position: relative; width: var(--col); margin-left: var(--gut-l); padding-top: var(--c0); padding-bottom: calc(4 * var(--svh)); }
[data-side="right"] .col { margin-left: auto; margin-right: calc(var(--gut-r) + var(--rail)); }
.col-wide { width: min(38rem, 44vw); }
/* Legacy se revela en T 3,08 (cuando la cámara ya dejó la cima del Templo Mayor), no en 3,0: su columna arranca ~0,1 T
   (≈ 16svh de los 160svh del acto) más abajo, así el encabezado aparece a la altura de los demás y no ya bajo la barra */
.act-leg .col { padding-top: calc(var(--c0) + 16 * var(--svh)); }
.col > * + * { margin-top: 1.4rem; }

/* encabezado de acto: panel de papel cálido con papel picado colgando encima. El fondo vive en ::before (y la
   guirnalda en ::after) para que el revelado sincronizado con T lo haga aparecer junto con el texto. */
.act-head, .cta-copy { position: relative; isolation: isolate; padding: 1.7rem 1.8rem 1.5rem; }
.act-head::before, .cta-copy::before {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 22px; pointer-events: none;
  background: var(--card-bg); box-shadow: var(--card-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.act-head::after, .cta-copy::after { content: ""; position: absolute; z-index: 1; left: 1.4rem; right: 1.4rem; top: -0.95rem; height: 2.1rem; pointer-events: none; background: var(--pp-garland) 0 0 / auto 100% repeat-x; }
/* scrim del héroe: rectángulo redondeado y ajustado al bloque de texto, con borde suave (sombra del mismo color, se
   rasteriza una vez). Antes era un radial enorme que lavaba ~45 % del cuadro (casas y canal en pastel). */
.hero-copy::before {
  content: ""; position: absolute; z-index: -1; inset: -0.5rem -0.6rem -0.4rem; border-radius: 1.6rem; pointer-events: none;
  /* la sombra (expansión ≥ desenfoque) hace el borde suave: sin escalón visible entre el fondo y su halo */
  background: rgba(255, 249, 240, 0.6); box-shadow: 0 0 2.4rem 2.1rem rgba(255, 249, 240, 0.6);
}
.js .hero-copy::before { opacity: 0; transition: opacity 1.2s ease 0.35s; }
.js .hero-copy.is-in::before { opacity: 1; }
.act-head > :last-child, .cta-copy > :last-child { margin-bottom: 0; }
/* tarjetas de papel cálido */
.card { position: relative; background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--card-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.6); padding: 1.4rem 1.5rem; }
.card > p:first-child { margin-top: 0; }
.card p { color: var(--tinta-2); }

/* ---------- revelados: IntersectionObserver ([data-reveal]) y sincronía con la escena ([data-tin], por T) */
.js [data-reveal] { opacity: 0; translate: 0 2.2rem; transition: opacity 0.8s ease, translate 1s var(--ease-out); transition-delay: calc(var(--k, 0) * 90ms); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }
.js [data-tin] { pointer-events: none; }
.js [data-tin].is-in { pointer-events: auto; }
.js [data-tin] > * { opacity: 0; translate: 0 1.4rem; transition: opacity 0.35s ease, translate 0.45s var(--ease); }
.js [data-tin].is-in > * { opacity: 1; translate: 0 0; transition: opacity 0.7s ease calc(var(--k, 0) * 80ms), translate 1s var(--ease-out) calc(var(--k, 0) * 80ms); }
/* con el foco dentro (teclado) se muestra aunque T no esté en su tramo; el foco de navegación que deja un salto en el
   título de la sección (ui.js focusSection, .focus-quiet) no, para no adelantar ni retener la tarjeta */
.js [data-tin]:focus-within:not(.focus-quiet) > * { opacity: 1; translate: 0 0; }
[data-tin] > :nth-child(2) { --k: 1; } [data-tin] > :nth-child(3) { --k: 2; } [data-tin] > :nth-child(4) { --k: 3; } [data-tin] > :nth-child(5) { --k: 4; } [data-tin] > :nth-child(6) { --k: 5; }
.js [data-tin]::before, .js [data-tin]::after { opacity: 0; scale: 0.96; transition: opacity 0.35s, scale 0.45s var(--ease); }
.js [data-tin].is-in::before, .js [data-tin].is-in::after { opacity: 1; scale: 1; transition: opacity 0.6s, scale 0.9s var(--ease-out); }

/* tipografía cinética: letras/palabras que suben desde una máscara (src/web/kinetic.js) */
.kinetic .w { display: inline-block; vertical-align: top; overflow: hidden; padding: 0.04em 0.02em 0.14em; margin: -0.04em -0.02em -0.14em; white-space: nowrap; }
.kinetic .c, .kinetic .wi { display: inline-block; }
.js .kinetic .c, .js .kinetic .wi { transform: translate3d(0, 115%, 0) rotate(8deg); transform-origin: 0 100%; transition: transform 0.35s var(--ease); }
.js .is-in .kinetic .c, .js .is-in .kinetic .wi, .js .kinetic.is-in .c, .js .kinetic.is-in .wi { transform: none; transition: transform 1s var(--ease-out) calc(120ms + var(--i) * 26ms); }
.js .is-in .kinetic .wi { transition-delay: calc(160ms + var(--i) * 20ms); }
/* «Ollin» con una letra de cada color del papel picado */
.display .c:nth-child(5n+1) { color: var(--rosa); } .display .c:nth-child(5n+2) { color: var(--cempa); } .display .c:nth-child(5n+3) { color: var(--turquesa); } .display .c:nth-child(5n+4) { color: var(--jacaranda); } .display .c:nth-child(5n+5) { color: var(--anil); }

/* ---------- héroe */
.hero-stage { min-height: calc(100 * var(--svh)); display: flex; flex-direction: column; justify-content: flex-end; padding: 6.5rem var(--gut-r) max(7 * var(--svh), 2.5rem, env(safe-area-inset-bottom, 0px) + 1rem) var(--gut-l); position: relative; }
.hero-copy { position: relative; width: min(44rem, 52vw); }
.hero-copy .lead { color: var(--tinta); font-weight: 470; font-size: clamp(1.12rem, 1.5vw, 1.32rem); }
.js .hero-copy > :not(.wordmark) { opacity: 0; translate: 0 1.2rem; transition: opacity 0.8s ease calc(var(--k, 0) * 110ms + 0.5s), translate 1s var(--ease-out) calc(var(--k, 0) * 110ms + 0.5s); }
.js .hero-copy.is-in > * { opacity: 1; translate: 0 0; }
.hero-copy > :nth-child(3) { --k: 1; } .hero-copy > :nth-child(4) { --k: 2; } .hero-copy > :nth-child(5) { --k: 3; } .hero-copy > :nth-child(6) { --k: 4; }
.js .hero-copy .lead { opacity: 1; translate: none; }
.badges { list-style: none; margin: 1.3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.badges li { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.75rem; border-radius: 999px; background: rgba(255, 250, 243, 0.85); box-shadow: inset 0 0 0 1px var(--linea); font-size: 0.82rem; font-weight: 650; color: var(--tinta-2); }
.badges b { width: 0.55rem; height: 0.55rem; border-radius: 2px; transform: rotate(45deg); }
.b-ext { background: var(--rosa); } .b-leg { background: var(--cempa); } .b-gl { background: var(--turquesa); }
.hint { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.86rem; font-weight: 560; color: var(--tinta); margin: 1rem 0 0; padding: 0.15rem 0.95rem 0.15rem 0.35rem; border-radius: 999px; background: rgba(255, 250, 243, 0.9); box-shadow: inset 0 0 0 1px var(--linea); transition: opacity 0.6s; }
.js .hero-copy.is-in > .hint.is-hidden, .hint.is-hidden { opacity: 0; }
/* sprite del colibrí renderizado en Blender: 12 cuadros de 320×132 en 6×2, ~16 fps (transform con steps: sin repintar) */
.sprite { --w: 10rem; position: relative; display: inline-block; width: var(--w); height: calc(var(--w) * 0.4125); overflow: hidden; flex: none; }   /* 320×132 */
.sprite-rows { position: absolute; left: 0; top: 0; width: 600%; height: 200%; animation: spr-y 0.75s steps(2) infinite; }
.sprite-rows img { display: block; width: 100%; height: 100%; max-width: none; animation: spr-x 0.375s steps(6) infinite; }
@keyframes spr-x { to { transform: translateX(-100%); } }
@keyframes spr-y { to { transform: translateY(-100%); } }
.sprite-hint { --w: 3.6rem; }
/* bucles del sprite que no se ven: en pausa (el preloader ya se fue, el riel está oculto, la pista se escondió) */
body:not(.is-loading) #loader .sprite-rows, body:not(.is-loading) #loader .sprite-rows img, body:not(.is-loading) .sprite-loader,
.gallery:not(.is-in) .sprite-rows, .gallery:not(.is-in) .sprite-rows img,
.hint.is-hidden .sprite-rows, .hint.is-hidden .sprite-rows img { animation-play-state: paused; }

/* ---------- banda marquee (velocidad y dirección siguen al scroll: src/web/marquee.js)
   En horizontal es una cinta que entra por la izquierda y termina en cola de golondrina a ~56vw: cruza la altura del
   colibrí entre T ≈ 0,35 y 0,7, cuando él está a la derecha (x > 0,6), y ya va arriba (y < 0,26) cuando despega
   hacia la izquierda en T 0,75–0,9. Antes era de lado a lado y le tapaba la cabeza en T 0,5–0,7. */
.marquee { position: absolute; z-index: 2; left: -4vw; width: 60vw; top: calc(-21 * var(--svh)); rotate: -3deg; padding: 0.95rem 0 0.85rem; background: var(--papel); overflow: hidden;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.7rem) 50%, 100% 100%, 0 100%);
  box-shadow: 0 1rem 2rem -1.6rem rgba(40, 22, 60, 0.45);
  -webkit-mask: linear-gradient(#000 0 0) center / 100% calc(100% - 14px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) top / 14px 7px repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x;
  mask: linear-gradient(#000 0 0) center / 100% calc(100% - 14px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) top / 14px 7px repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x; }
.marquee::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 5px; background: repeating-linear-gradient(90deg, var(--rosa) 0 40px, var(--cempa) 40px 80px, var(--turquesa) 80px 120px, var(--jacaranda) 120px 160px, var(--verde) 160px 200px); opacity: 0.9; }
.marquee-skew { transform: skewX(var(--skew, 0deg)); transition: transform 0.25s ease-out; }
.marquee-track { display: flex; align-items: center; width: max-content; gap: 1.6rem; padding-right: 1.6rem; will-change: transform; }
.mq { font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 900; font-stretch: 125%; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.m1 { color: var(--rosa); } .m2 { color: var(--verde); } .m3 { color: var(--turquesa); } .m4 { color: var(--anil); } .m5 { color: var(--cempa-d); } .m6 { color: var(--jacaranda-d); }
.mq-sep { width: 2.4rem; height: 2.4rem; flex: none; background: var(--flower) center / contain no-repeat; }
.marquee-small { position: relative; top: auto; left: auto; right: auto; width: auto; rotate: none; padding: 0.7rem 0; box-shadow: none; background: transparent; -webkit-mask: none; mask: none; clip-path: none; }
.marquee-small::before { display: none; }
.marquee-small .mq { font-size: clamp(1.5rem, 3vw, 2.4rem); }
.marquee-small .mq-sep { width: 1.6rem; height: 1.6rem; }

/* ---------- Ollin: contadores */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 1.2rem 0 0; }
.stat { position: relative; margin: 0; padding: 0.95rem 1rem 0.85rem; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--linea); overflow: hidden; display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.stat::after { content: ""; position: absolute; right: -14px; top: -14px; width: 48px; height: 48px; background: var(--talavera) 0 0 / 48px; opacity: 0.32; border-radius: 50%; }
.stat dt { font-size: 0.82rem; line-height: 1.3; color: var(--tinta-2); font-weight: 560; }
.stat dd { margin: 0 0 0.25rem; }
.stat dd b { font-size: clamp(2.1rem, 3.2vw, 2.9rem); font-weight: 880; font-stretch: 118%; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.s-rosa dd b { color: var(--rosa); } .s-turq dd b { color: var(--turquesa-d); } .s-cempa dd b { color: var(--cempa-d); } .s-jaca dd b { color: var(--jacaranda-d); }
.s-rosa { box-shadow: inset 0 3px 0 var(--rosa), inset 0 0 0 1px var(--linea); } .s-turq { box-shadow: inset 0 3px 0 var(--turquesa), inset 0 0 0 1px var(--linea); }
.s-cempa { box-shadow: inset 0 3px 0 var(--cempa), inset 0 0 0 1px var(--linea); } .s-jaca { box-shadow: inset 0 3px 0 var(--jacaranda), inset 0 0 0 1px var(--linea); }
.stats-grid .stat:nth-child(2) { --k: 1; } .stats-grid .stat:nth-child(3) { --k: 2; } .stats-grid .stat:nth-child(4) { --k: 3; }

/* ---------- Extension: escenario fijo (sticky) con riel horizontal de tarjetas (src/web/gallery.js) */
.stage { position: sticky; top: 0; height: calc(100 * var(--svh)); display: flex; flex-direction: column; justify-content: space-between; padding: max(5.4rem, 13 * var(--svh)) 0 max(4.5 * var(--svh), 1.4rem, env(safe-area-inset-bottom, 0px) + 0.6rem); }
.stage-head { width: min(42rem, 46vw); margin-left: var(--gut-l); }
/* plegado: cuando entra el riel de tarjetas, eyebrow, texto y chips se recogen (filas de grid 1fr → 0fr, sin medir
   alturas en JS) y el encabezado queda en título + botón: el templo que se arma vuelve a ser el protagonista.
   ui.js pone .is-folded desde data-fold (T 2.45, cuando entra el riel) y lo mantiene hasta el final del acto: el
   encabezado sale (2.78) todavía plegado y, al volver hacia arriba, entra plegado. Antes el pliegue dependía de que el
   riel estuviera visible (:has) y el encabezado se desplegaba entero justo en su salida, sobre el colibrí; además en
   modo estático (riel con .is-in) quedaba plegado sin texto. */
.fold { display: grid; grid-template-rows: 1fr; }
.fold > div { min-height: 0; overflow: hidden; }
.fold .eyebrow { margin-bottom: 0.9rem; }
.js .stage .stage-head > .fold { transition: grid-template-rows 0.7s var(--ease-out), opacity 0.6s ease calc(var(--k, 0) * 80ms), translate 1s var(--ease-out) calc(var(--k, 0) * 80ms); }
.js .stage-head.is-folded > .fold { grid-template-rows: 0fr; opacity: 0; }
.js .stage-head.is-folded h2 { margin-bottom: 0.7rem; }
.stage-head h2 { font-size: clamp(2.2rem, 3.6vw, 3.6rem); }
.stage-head .lead { max-width: 30em; }
.chips { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.38rem 0.8rem 0.38rem 0.5rem; border-radius: 999px; background: rgba(255, 250, 243, 0.92); box-shadow: inset 0 0 0 1px var(--linea); font-size: 0.86rem; font-weight: 650; }
.chips svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--rosa); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gallery { position: relative; }
.gate { position: relative; }
.js .gallery { pointer-events: none; }
.js .gallery.is-in { pointer-events: auto; }
.js .gallery :is(.gcard, .gallery-meta) { opacity: 0; translate: 0 3rem; transition: opacity 0.35s ease, translate 0.5s var(--ease), transform 0.6s var(--ease-out), box-shadow 0.4s, scale 0.6s var(--ease-out); }
.js .gallery.is-in :is(.gcard, .gallery-meta) { opacity: 1; translate: 0 0; transition: opacity 0.7s ease calc(var(--k, 0) * 70ms), translate 1s var(--ease-out) calc(var(--k, 0) * 70ms), transform 0.6s var(--ease-out), box-shadow 0.4s, scale 0.6s var(--ease-out); }
.js .gallery.is-in .gcard.is-tilt { transition: opacity 0.7s, translate 1s var(--ease-out), transform 0.12s linear, box-shadow 0.4s, scale 0.6s var(--ease-out); }
.gcard:nth-child(2) { --k: 1; } .gcard:nth-child(3) { --k: 2; } .gcard:nth-child(4) { --k: 3; } .gcard:nth-child(5) { --k: 4; } .gcard:nth-child(6) { --k: 5; }
.gallery-meta { display: flex; align-items: center; gap: 1rem; margin: 0 var(--gut-r) 0.55rem var(--gut-l); font-size: 0.82rem; font-weight: 700; font-stretch: 110%; color: var(--tinta); width: max-content; padding: 0.4rem 0.9rem; border-radius: 999px; background: rgba(255, 250, 243, 0.9); box-shadow: inset 0 0 0 1px var(--linea); }
.gallery-count { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.gallery-count b { color: var(--rosa-d); }   /* texto chico: el rosa vivo sobre papel daba ~4,4:1 */
.gallery-prog { width: 6rem; height: 4px; border-radius: 4px; background: rgba(28, 22, 51, 0.12); overflow: hidden; }
.gallery-prog b { display: block; height: 100%; background: linear-gradient(90deg, var(--rosa), var(--cempa)); transform-origin: 0 50%; transform: scaleX(var(--gp, 0)); }
.gallery-tip { color: var(--tinta-2); font-weight: 560; }
/* riel compacto a la izquierda (el templo queda al centro-derecha): 2–3 tarjetas de ~22svh, la derecha se desvanece */
.gallery-window { position: relative; width: min(44rem, 46vw); margin: -0.5rem 0 -0.9rem var(--gut-l); padding: 0.5rem 0 0.9rem; overflow: hidden; overflow: clip;
  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 3.5rem), #0000); mask: linear-gradient(90deg, #000 calc(100% - 3.5rem), #0000); }
.gallery-track { list-style: none; margin: 0; display: flex; gap: 0.9rem; width: max-content; padding: 0 3.5rem 0 0.35rem; will-change: transform; }
.gcard { flex: none; width: clamp(12.5rem, 14.5vw, 15.5rem); height: clamp(10.5rem, 22 * var(--svh), 14rem); padding: 0; overflow: hidden; display: grid; grid-template-rows: 40% 1fr; transition: transform 0.6s var(--ease-out), box-shadow 0.4s, scale 0.6s var(--ease-out); }
.gcard.is-active { scale: 1.035; box-shadow: 0 1.2rem 2.2rem -1.2rem rgba(40, 22, 60, 0.55), inset 0 0 0 2px var(--rosa); }
.gcard.is-tilt { transition: transform 0.12s linear, box-shadow 0.4s, scale 0.6s var(--ease-out); }
.gcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(28rem circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.35), transparent 40%); opacity: 0; transition: opacity 0.3s; }
.gcard.is-tilt::after { opacity: 1; }
.g-art { position: relative; overflow: hidden; display: grid; place-items: center; }
.g-body { padding: 0.7rem 0.95rem 0.8rem; display: flex; flex-direction: column; gap: 0.2rem; min-height: 0; }
.g-body h3 { font-size: 1rem; }
.g-body p { margin: 0; font-size: 0.84rem; line-height: 1.4; color: var(--tinta-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.g-art > * { scale: 0.72; }
.g-n { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; color: var(--rosa-d); }
/* arte de cada tarjeta (CSS puro) */
.g-sol .g-art { background: radial-gradient(circle at 50% 120%, #fff3cf 0 18%, transparent 19%), repeating-conic-gradient(from 0deg at 50% 120%, #ffc94a 0 7deg, #ffb21f 7deg 14deg), #ffb21f; }
.g-sol .sun { width: 5.2rem; height: 5.2rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6d6, #ffcf4d 45%, var(--naranja)); box-shadow: 0 0 0 0.6rem rgba(255, 255, 255, 0.25); }
.g-colibri .g-art { background: linear-gradient(135deg, #ff6fb5, var(--jacaranda) 60%, var(--anil-2)); }
.sprite-card { --w: 12.5rem; }
.g-templo .g-art { background: linear-gradient(#7fd3ea, #c9eefa 70%, #e9dcc2 70%); align-items: end; }
.g-templo .steps { transform-origin: 50% 100%; display: grid; justify-items: center; gap: 2px; width: 70%; padding-bottom: 0; }
.g-templo .steps i { display: block; height: 0.85rem; background: linear-gradient(90deg, #c69c80, #ead2bd 45%, #b98d72); clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%); }
.g-templo .steps i:nth-child(1) { width: 26%; background: linear-gradient(90deg, var(--rosa), var(--cempa)); } .g-templo .steps i:nth-child(2) { width: 44%; }
.g-templo .steps i:nth-child(3) { width: 62%; } .g-templo .steps i:nth-child(4) { width: 80%; } .g-templo .steps i:nth-child(5) { width: 100%; }
.g-talavera .g-art { background: var(--talavera) 0 0 / 48px; }
.g-talavera .tile { width: 4.6rem; height: 4.6rem; border-radius: 50%; background: radial-gradient(circle, var(--cempa) 0 30%, var(--papel) 31% 48%, var(--anil) 49%); box-shadow: 0 0 0 0.45rem var(--papel); }
.g-papel .g-art { background: linear-gradient(160deg, var(--rosa), var(--buganvilia)); align-items: start; }
.garland-card { width: 140%; height: 4.2rem; margin-top: 0.4rem; transform-origin: 50% 0; }
.g-jacaranda .g-art { background: linear-gradient(160deg, #b79cf0, var(--jacaranda-d)); }
.petals { position: relative; width: 6rem; height: 6rem; }
.petals i { position: absolute; left: 50%; top: 50%; width: 2.2rem; height: 3.3rem; margin: -3.3rem 0 0 -1.1rem; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(#f2e9ff, #cdb6f7); transform-origin: 50% 100%; }
.petals i:nth-child(2) { transform: rotate(72deg); } .petals i:nth-child(3) { transform: rotate(144deg); } .petals i:nth-child(4) { transform: rotate(216deg); } .petals i:nth-child(5) { transform: rotate(288deg); }
.pin-end { position: absolute; left: 0; bottom: calc(100 * var(--svh)); width: 1px; height: 1px; pointer-events: none; }

/* ---------- Legacy: línea de tiempo */
.timeline { list-style: none; margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 1.3rem 1.4rem 0.6rem 1.4rem; }
.timeline li { position: relative; padding: 0 0 1.15rem 2.1rem; }
.timeline li::before { content: ""; position: absolute; left: 0.42rem; top: 0.5rem; bottom: -0.5rem; width: 2px; background: var(--linea); }
.timeline li::after { content: ""; position: absolute; left: 0.42rem; top: 0.5rem; bottom: -0.5rem; width: 2px; background: linear-gradient(var(--cempa), var(--rosa)); transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.1s var(--ease-out) 0.25s; }
.timeline li.is-in::after { transform: none; }
.timeline li:last-child::before, .timeline li:last-child::after { display: none; }
.timeline .tl-year { position: relative; display: inline-block; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; color: var(--cempa-d); margin-bottom: 0.15rem; }
.timeline .tl-year::before { content: ""; position: absolute; left: -2.1rem; top: 0.12rem; width: 0.95rem; height: 0.95rem; border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 3px var(--cempa); }
.timeline .tl-now .tl-year::before { background: var(--cempa); box-shadow: 0 0 0 4px rgba(242, 154, 14, 0.25); }
.timeline h3 { margin-bottom: 0.25rem; }
.timeline p { margin: 0; font-size: 0.93rem; line-height: 1.5; }
.js .timeline li[data-reveal] { translate: 1.5rem 0; }
.js .timeline li[data-reveal].is-in { translate: 0 0; }

/* ---------- comparativa con conmutador */
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 0.3rem; border-radius: 999px; background: var(--papel-2); box-shadow: inset 0 0 0 1px var(--linea); margin-bottom: 1rem; isolation: isolate; }
.seg button { position: relative; z-index: 1; border: 0; background: none; padding: 0.7rem 1rem; border-radius: 999px; font: 750 0.98rem/1 var(--font); font-stretch: 112%; color: var(--tinta-2); cursor: pointer; transition: color 0.3s; }
.seg button[aria-pressed="true"] { color: #fff; }
.seg-ind { position: absolute; z-index: 0; left: 0.3rem; top: 0.3rem; bottom: 0.3rem; width: calc(50% - 0.3rem); border-radius: 999px; background: var(--rosa); box-shadow: 0 0.4rem 1rem -0.5rem rgba(228, 0, 124, 0.7); transition: transform 0.5s var(--ease-out), background-color 0.4s; }
[data-pick="leg"] .seg-ind { transform: translateX(100%); background: var(--cempa-d); }
.pick-sum { display: grid; margin-bottom: 0.6rem; }
.sum { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 1rem; border-radius: 12px; transition: opacity 0.35s, translate 0.45s var(--ease-out); }
.sum b { font-size: 1.15rem; font-stretch: 112%; }
.sum span { color: var(--tinta-2); font-size: 0.94rem; }
.sum-ext { background: rgba(228, 0, 124, 0.08); } .sum-leg { background: rgba(242, 154, 14, 0.12); }
[data-pick="ext"] .sum-leg, [data-pick="leg"] .sum-ext { opacity: 0; translate: 0 0.5rem; pointer-events: none; }
.compare { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.compare th, .compare td { padding: 0.7rem 0.6rem; text-align: left; border-bottom: 1px solid var(--linea); transition: background-color 0.35s, color 0.35s; }
.compare thead th { font-weight: 800; font-stretch: 112%; font-size: 0.98rem; }
.compare thead .c-ext { color: var(--rosa-d); }   /* rosa oscuro: 5,7:1 sobre su columna teñida (el rosa vivo daba ~3:1) */ .compare thead .c-leg { color: var(--cempa-d); }
.compare tbody th { font-weight: 500; color: var(--tinta-2); }
.compare td { font-weight: 650; color: var(--tinta); width: 7rem; }
.compare td.yes::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 2px; transform: rotate(45deg); background: var(--turquesa); margin-right: 0.5rem; vertical-align: 0.08em; }
.compare td.no { color: var(--tinta-3); font-weight: 500; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.cmp-more { display: none; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; margin-top: 0.4rem; padding: 0.6rem 1rem; border: 0; border-radius: 999px; background: var(--papel-2); box-shadow: inset 0 0 0 1px var(--linea); font: 700 0.9rem/1 var(--font); font-stretch: 110%; color: var(--tinta); cursor: pointer; }
.cmp-more svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--ease-out); }
.compare-box.is-all .cmp-more svg { transform: rotate(180deg); }
[data-pick="ext"] .compare .c-ext { background: rgba(228, 0, 124, 0.07); }
[data-pick="leg"] .compare .c-leg { background: rgba(242, 154, 14, 0.12); }
[data-pick="ext"] .compare .c-leg, [data-pick="leg"] .compare .c-ext { color: var(--tinta-3); }

/* ---------- llamada final, preguntas */
.cta-stage { min-height: calc(100 * var(--svh)); display: flex; justify-content: center; align-items: flex-start; padding: calc(44 * var(--svh)) var(--gut-r) calc(8 * var(--svh)) var(--gut-l); }
.cta-copy { width: min(50rem, 100%); text-align: center; padding: 2.2rem 2.4rem 1.9rem; }
.cta-copy .eyebrow { justify-content: center; margin-left: auto; margin-right: auto; }
.cta-copy .lead { margin-left: auto; margin-right: auto; color: var(--tinta); }
.cta-copy .actions { justify-content: center; }
.fine { margin: 1rem 0 0; font-size: 0.86rem; color: var(--tinta-2); font-weight: 560; }
.faq { padding: 6rem var(--gut-r) calc(10 * var(--svh)) var(--gut-l); }
.faq-inner { --card-bg: rgba(255, 250, 243, 0.92); width: min(46rem, 100%); margin: 0 auto; padding: 1.8rem 2rem 1rem; }
.faq h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 1.1rem; }
.faq .eyebrow b { background: var(--jacaranda-d); }
details { border-top: 1px solid var(--linea); }
summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; cursor: pointer; font-weight: 720; font-stretch: 106%; font-size: 1.05rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: linear-gradient(var(--tinta), var(--tinta)) center / 0.75rem 2px no-repeat, linear-gradient(var(--tinta), var(--tinta)) center / 2px 0.75rem no-repeat, var(--papel-2); box-shadow: inset 0 0 0 1px var(--linea); transition: transform 0.45s var(--ease-out), background-color 0.3s; }
details[open] summary::after { transform: rotate(135deg); background-color: var(--cempa-2); }
@media (hover: hover) { summary:hover { color: var(--rosa-d); } }
.faq-a p { margin: 0 0 1.1rem; color: var(--tinta-2); max-width: 40em; }
:root { interpolate-size: allow-keywords; }
details::details-content { block-size: 0; overflow: clip; transition: block-size 0.45s var(--ease-out), content-visibility 0.45s allow-discrete; }
details[open]::details-content { block-size: auto; }

/* ---------- pie con créditos y chip de calidad */
.site-foot { position: relative; z-index: 2; background: var(--papel); color: var(--tinta); padding: 3.6rem 0 0; }
.garland { background: var(--pp-garland) 0 0 / auto 100% repeat-x; height: 2.6rem; }
.garland-foot { position: absolute; left: 0; right: 0; top: -0.6rem; }
.foot-band { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: 1.1fr 0.8fr 1.6fr; gap: 2.4rem; padding: 2.6rem var(--gut-r) 1.6rem var(--gut-l); max-width: 84rem; margin: 0 auto; }
.foot-brand p { color: var(--tinta-2); max-width: 22rem; font-size: 0.95rem; }
.foot-nav { display: flex; flex-direction: column; gap: 0.45rem; }
.foot-nav a { text-decoration: none; color: var(--tinta-2); font-weight: 560; width: max-content; }
@media (hover: hover) { .foot-nav a:hover { color: var(--rosa-d); } }
.site-foot h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta-3); margin-bottom: 0.7rem; }
.foot-credits p { margin: 0 0 0.6rem; font-size: 0.9rem; line-height: 1.55; color: var(--tinta-2); }
.foot-credits a { color: var(--tinta); text-decoration-color: var(--rosa); text-underline-offset: 2px; }
#hdri-src { font-weight: 650; color: var(--tinta); }
.chip { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.5rem; font: 650 0.82rem/1 var(--font); color: var(--tinta); background: var(--papel-2); border: 0; box-shadow: inset 0 0 0 1px var(--linea); border-radius: 999px; padding: 0.55rem 0.9rem; cursor: pointer; }
@media (hover: hover) { .chip:hover { box-shadow: inset 0 0 0 1.5px var(--tinta); } }
.chip-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px rgba(58, 166, 74, 0.2); }
.chip span { color: var(--rosa-d); font-variant-numeric: tabular-nums; }
.foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; padding: 1.2rem var(--gut-r) max(2.4rem, calc(env(safe-area-inset-bottom, 0px) + 1.6rem)) var(--gut-l); max-width: 84rem; margin: 0 auto; border-top: 1px solid var(--linea); font-size: 0.85rem; color: var(--tinta-3); }
.to-top { text-decoration: none; font-weight: 650; color: var(--tinta); }
.talavera { background: var(--talavera) 0 0 / 2rem; }
.talavera-foot { height: 2rem; }

/* ---------- preloader de día */
#loader {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  background: radial-gradient(60% 50% at 78% 12%, rgba(255, 244, 214, 0.95), rgba(255, 244, 214, 0) 70%), linear-gradient(180deg, #8ec8f2 0%, #cbe7fb 52%, #fdf0dc 100%);
  transition: opacity 0.9s var(--ease) 0.3s, visibility 0s linear 1.2s, transform 1.2s var(--ease-out) 0.3s;
  --p: 0;
}
body:not(.is-loading) #loader { opacity: 0; visibility: hidden; transform: scale(1.04); pointer-events: none; }
/* el colibrí del sprite (y el texto) se desvanece antes que el fondo: nunca se ven dos colibríes a la vez */
.loader-core { transition: opacity 0.28s ease, scale 0.4s var(--ease); }
body:not(.is-loading) .loader-core { opacity: 0; scale: 0.94; }
.garland-loader { position: absolute; left: 0; right: 0; top: max(1rem, env(safe-area-inset-top)); height: 5.6rem;
  background: var(--pp-garland) 0 0 / auto 3rem repeat-x, var(--pp-garland) 54px 2.7rem / auto 2.5rem repeat-x; }
.talavera-loader { position: absolute; left: 0; right: 0; bottom: 0; height: 2rem; }
.loader-core { display: grid; justify-items: center; gap: 0.9rem; }
.sprite-loader { --w: clamp(14rem, 22vw, 26rem); animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-0.6rem); } }
.loader-brand { margin: 0.3rem 0 0; font-size: clamp(2.2rem, 7vw, 3.2rem); font-weight: 900; font-stretch: 125%; letter-spacing: -0.03em; line-height: 1; color: var(--tinta); }
.loader-bar { width: min(15rem, 64vw); height: 6px; border-radius: 6px; background: rgba(28, 22, 51, 0.12); overflow: hidden; }
.loader-bar b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--rosa), var(--cempa)); transform-origin: 0 50%; transform: scaleX(var(--p)); transition: transform 0.5s var(--ease-out); }
.loader-text { margin: 0; color: var(--tinta-2); font-size: 0.92rem; font-weight: 560; text-align: center; }
#loader-pct { color: var(--tinta); font-variant-numeric: tabular-nums; margin-left: 0.35rem; font-weight: 750; }

/* ---------- avisos, monitor y respaldo sin WebGL */
#toast {
  position: fixed; z-index: 12; left: 50%; bottom: max(1.2rem, calc(env(safe-area-inset-bottom, 0px) + 0.8rem)); transform: translate(-50%, 1rem);
  width: max-content; max-width: calc(100vw - var(--gut-l) - var(--gut-r)); text-align: center; line-height: 1.35;
  background: var(--tinta); color: #fff; border-radius: 1.4rem; padding: 0.6rem 1.1rem; font-size: 0.86rem; font-weight: 560;
  opacity: 0; pointer-events: none; transition: opacity 0.35s, transform 0.35s var(--ease); box-shadow: 0 0.6rem 1.4rem -0.8rem rgba(0, 0, 0, 0.5);
}
#toast.is-on { opacity: 1; transform: translate(-50%, 0); }
#hud {
  position: fixed; z-index: 13; left: max(0.6rem, env(safe-area-inset-left, 0px)); bottom: max(0.6rem, env(safe-area-inset-bottom, 0px)); margin: 0;
  font: 520 0.75rem/1.45 var(--font); font-variant-numeric: tabular-nums; color: #d6ffef; background: rgba(12, 10, 28, 0.82);
  border-radius: 8px; padding: 0.45rem 0.65rem; display: none; pointer-events: none; white-space: pre;
}
#hud.is-on { display: block; }
.noscript { position: fixed; inset: auto max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px)); z-index: 21; background: var(--papel); color: var(--tinta); padding: 1rem 1.2rem; border-radius: 14px; box-shadow: var(--card-shadow), inset 0 0 0 1px var(--linea); margin: 0; }
/* sin WebGL: aviso compacto bajo la barra (se puede cerrar) y el colibrí HD de Blender como imagen fija */
.fail { position: fixed; z-index: 21; top: calc(max(0.7rem, env(safe-area-inset-top)) + 3.9rem); left: 50%; transform: translateX(-50%); width: min(34rem, calc(100vw - 2rem)); display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.7rem 0.7rem 1.1rem; border-radius: 14px; background: var(--papel); color: var(--tinta); box-shadow: var(--card-shadow), inset 0 0 0 1px var(--linea), inset 4px 0 0 var(--rosa); }
.fail p { margin: 0; font-size: 0.9rem; line-height: 1.4; }
.fail-x { flex: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--papel-2); color: var(--tinta); font: 700 1.2rem/1 var(--font); cursor: pointer; }
body.gl-fail #gl { display: none; }

/* ---------- modo estático: sin módulos (Safari < 16.4), arranque fallido (guardián de index.html), sin JS o sin WebGL.
   html sin .js = todo el texto visible en el flujo normal, sin preloader ni lienzo; el colibrí HD queda en el héroe. */
.still-bird, .boot-note { display: none; }
html:not(.js) #loader, html:not(.js) #gl { display: none; }
html:not(.js) .still-bird, body.gl-fail .still-bird { display: block; position: absolute; z-index: 0; right: max(4vw, 1rem); top: calc(14 * var(--svh)); width: min(24rem, 38vw); height: auto; pointer-events: none; animation: bob 3s ease-in-out infinite; }
html.no-module .boot-note, html.boot-fail .boot-note { display: block; position: relative; z-index: 3; margin: 5.2rem var(--gut-r) 0 var(--gut-l); max-width: 34rem; padding: 0.8rem 1.1rem; border-radius: 14px; background: var(--papel); box-shadow: var(--card-shadow), inset 0 0 0 1px var(--linea), inset 4px 0 0 var(--rosa); font-size: 0.92rem; line-height: 1.45; }
html.no-module .bn-net, html:not(.no-module) .bn-old { display: none; }
html:not(.ui) .menu-btn { display: none; }
/* sin el bucle de frames nadie pone .is-scrolled: la barra queda sólida desde el principio (si no, al desplazarse el
   texto de las tarjetas pasaba por debajo de la marca y los enlaces, sobre todo en teléfono) */
html:not(.js) .topbar { background: rgba(255, 250, 243, 0.94); box-shadow: 0 1px 0 var(--linea), 0 0.6rem 1.4rem -1.2rem rgba(40, 22, 60, 0.35); }
html:not(.js) .topbar::before { opacity: 0; }
html:not(.js) .act { min-height: 0; padding-bottom: calc(12 * var(--svh)); }
html:not(.js) .act-hero { min-height: calc(100 * var(--svh)); padding-bottom: 0; }
html:not(.js) .act-ext { height: auto; }
html:not(.js) .stage { position: relative; height: auto; gap: 2rem; }
html:not(.js) .gallery-window { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask: none; mask: none; width: auto; margin-right: var(--gut-r); }
html:not(.js) .gallery-track { transform: none !important; }
html:not(.js) .gcard { scroll-snap-align: start; }
html:not(.js) .cta-stage { padding-top: calc(8 * var(--svh)); min-height: 0; }
html:not(.js) .marquee { top: calc(-6 * var(--svh)); }

/* ---------- tableta y escritorio pequeño */
@media (max-width: 1100px) {
  :root { --rail: 5rem; --col: min(30rem, 44vw); }
  /* el colibrí se encuadra cerca del borde derecho: el riel queda en puntos (etiqueta al pasar o con foco) y se
     aparta mientras la tarjeta de preguntas está a la vista */
  .rail:not(:hover) a:not(:focus-visible) span { opacity: 0; transform: translateX(4px); }
  @media (hover: none) { .rail a:not(:focus-visible) span { opacity: 0; transform: translateX(4px); } }
  body.at-faq .rail ol { opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s linear 0.4s; }
  .topnav { gap: 1rem; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-credits { grid-column: 1 / -1; }
}

@media (min-aspect-ratio: 19/20) and (max-height: 860px) {
  .stage-head .chips { display: none; }
  .stage { padding-top: max(5rem, 11 * var(--svh)); }
}

/* ---------- pantallas angostas de cualquier orientación (≤ 760 px) y vertical: barra con menú y tipografía compacta.
   Aquí NO va nada de la composición: un teléfono acostado o una ventana angosta pero apaisada se encuadran de lado
   (director: aspecto ≥ 0,95), así que su texto sigue en columna del lado contrario al colibrí, no abajo. */
@media (max-width: 760px), (max-aspect-ratio: 19/20) {
  :root { --gutter: clamp(1rem, 4.5vw, 2rem); }
  body { font-size: 1rem; }
  .topnav { display: none; }
  .menu-btn { display: inline-block; }
  .topbar { gap: 0.6rem; padding-top: max(0.6rem, env(safe-area-inset-top)); padding-bottom: 0.6rem; }
  .topbar::before { display: none; }          /* sin enlaces de texto sobre el cielo: el velo no hace falta */
  .topbar > .btn { margin-left: auto; }
  .act-head, .cta-copy { padding: 1.15rem 1.15rem 1.05rem; }
  .act-head::after, .cta-copy::after { left: 0.9rem; right: 0.9rem; height: 1.8rem; top: -0.8rem; }
  h2 { font-size: clamp(1.9rem, 5.2vw, 2.8rem); margin-bottom: 0.5rem; }
  .display { font-size: clamp(3.2rem, 9vw, 5rem); }
  .sub { margin-bottom: 0.6rem; }
  .lead { font-size: 1.02rem; margin-bottom: 0.6rem; }
  .eyebrow { margin-bottom: 0.7rem; }
  .card { padding: 1.05rem 1.1rem; }
  .act-head > .lead:last-child, .act-head > :last-child { margin-bottom: 0; }
  .stats > p { margin-bottom: 0; }
  .stats-grid { margin-top: 0.8rem; gap: 0.55rem; }
  .stat { padding: 0.75rem 0.85rem 0.7rem; }
  .stat dd b { font-size: 2rem; }
  .hero-copy::before { inset: -0.3rem; border-radius: 1.2rem; background: rgba(255, 249, 240, 0.7); box-shadow: 0 0 1.4rem 1.1rem rgba(255, 249, 240, 0.7); }
  .wordmark { margin-bottom: 0.8rem; }
  .wordmark svg { width: min(100%, 24rem); }
  .hero-copy .actions { margin-top: 0.9rem; }
  .actions .btn { flex: 1 1 auto; }
  .badges { display: none; }
  .hint { margin-top: 0.7rem; }
  .gallery-tip { display: none; }
  .gallery-meta { padding: 0.3rem 0.8rem; margin-bottom: 0.45rem; }
  /* comparativa compacta: solo la columna de la versión elegida (en una columna angosta no caben las dos) */
  .seg { margin-bottom: 0.6rem; }
  .seg button { padding: 0.6rem 1rem; }
  .pick-sum { margin-bottom: 0.25rem; }
  .sum { padding: 0.55rem 0.8rem; }
  .compare th, .compare td { padding: 0.5rem 0.5rem; }
  .compare td { width: 6.5rem; }
  [data-pick="ext"] .compare .c-leg, [data-pick="leg"] .compare .c-ext { display: none; }
  .faq-inner { padding: 1.3rem 1.2rem 0.6rem; }
  .foot-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ---------- vertical (aspecto < 0,95, el MISMO corte que director.js y ui.js PORTRAIT_Q): el colibrí vive en el ~55 % de
   arriba. Los textos de cada acto son SUBTÍTULOS fijos abajo: [data-p="T0 T1"] los enciende ui.js por T (.cap-on) y
   aparecen y se desvanecen en su sitio, sin cruzar nunca la zona del colibrí (antes subían con el scroll y tapaban el
   colibrí, la Pirámide de la Luna y la grúa). Entre subtítulos quedan ventanas de solo escena en los momentos 3D: cima
   del templo (2,78–3,08), final de la pirámide, escalinata y calzada con el sol (3,32–3,6) y el valle (4,82+); en el
   despegue (0,45–0,9) solo la banda marquee, también abajo. El escenario de Extension, la llamada final, las preguntas y
   el pie siguen en el flujo. Sin JS todo vuelve al flujo (html:not(.js)). */
@media (max-aspect-ratio: 19/20) {
  :root { --c0: calc(58 * var(--svh)); --col: 100%; --rail: 0px; --pin: calc(150 * var(--svh)); --dock: calc(max(0.7rem, env(safe-area-inset-bottom)) + 0.3rem); }
  .rail { top: 0; left: 0; right: 0; transform: none; z-index: 9; pointer-events: none; }
  .rail ol { display: none; }
  .rail-bar { display: block; position: absolute; left: 0; right: 0; top: env(safe-area-inset-top, 0px); height: 3px; background: rgba(28, 22, 51, 0.1); }
  .rail-bar b { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--prog, 0)); background: linear-gradient(90deg, var(--rosa), var(--cempa), var(--turquesa)); }
  .col, [data-side="right"] .col, .col-wide { width: auto; max-width: 38rem; margin-left: var(--gut-l); margin-right: var(--gut-r); }
  h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .display { font-size: clamp(3.2rem, 17vw, 5.5rem); }

  /* subtítulos fijos abajo (solo con JS: sin JS se quedan en el flujo). Una tarjeta con el foco fuera de su tramo se
     muestra (teclado; ui.js además lleva T a su tramo), salvo el foco de navegación tras un salto (.focus-quiet) */
  .js [data-p] { position: fixed; z-index: 3; left: var(--gut-l); right: var(--gut-r); top: auto; bottom: var(--dock); width: auto; max-width: 38rem; margin: 0; }
  html.js [data-p]:not(.cap-on):not(:focus-within), html.js [data-p].focus-quiet:not(.cap-on) { opacity: 0; translate: 0 1rem; pointer-events: none; transition: opacity 0.3s ease, translate 0.45s var(--ease); }
  html.js [data-p].cap-on, html.js [data-p]:focus-within:not(.focus-quiet) { opacity: 1; translate: 0 0; transition: opacity 0.6s ease, translate 0.9s var(--ease-out); }

  /* héroe: subtítulo abajo; las insignias no caben sin tocar al colibrí (y ~0,41) */
  .hero-stage { padding-bottom: max(4 * var(--svh), 1.2rem); }
  .hero-copy { width: auto; max-width: 38rem; }

  /* la banda es un subtítulo más: de lado a lado, abajo, solo en el despegue (T 0,45–0,9, sin texto del héroe ni de
     Ollin). Antes cruzaba la mitad de arriba, justo por el centro del colibrí en T 0,69–0,75, y entraba bajo la pista y
     los botones del héroe (letras sobre letras) */
  .marquee { left: -6vw; right: -6vw; width: auto; top: 0; rotate: -2.2deg; padding: 0.8rem 0 0.7rem; clip-path: none; }
  .js .marquee[data-p] { left: -6vw; right: -6vw; max-width: none; bottom: calc(var(--dock) + 0.9rem); }
  .mq { font-size: clamp(1.9rem, 5.2vw, 2.8rem); }
  .mq-sep { width: 1.8rem; height: 1.8rem; }

  /* escenario de Extension: encabezado de una línea arriba (cielo), riel abajo; el templo y el colibrí en medio */
  .stage { padding-top: calc(max(0.6rem, env(safe-area-inset-top, 0px)) + 4.1rem); justify-content: space-between; gap: 0.6rem; padding-bottom: var(--dock); }
  .stage-head { display: flex; align-items: center; gap: 0.6rem; width: auto; max-width: 34rem; margin-right: var(--gut-r); padding: 0.7rem 0.7rem 0.7rem 1rem; }
  .stage-head > .fold { display: none; }
  .stage-head h2 { flex: 1 1 auto; min-width: 0; font-size: clamp(1.1rem, 4.8vw, 1.9rem); line-height: 1.05; margin: 0; }
  .stage-head .btn { flex: none; min-height: 2.4rem; padding: 0.45rem 0.95rem; font-size: 0.88rem; }
  .stage-head .btn .arrow { display: none; }
  .gallery-window { width: auto; margin-left: 0; -webkit-mask: none; mask: none; }
  .gallery-track { padding: 0 var(--gut-r) 0 var(--gut-l); }
  .gcard { width: min(64vw, 15rem); height: min(30 * var(--svh), 15.5rem); grid-template-rows: 42% 1fr; }
  .g-art > * { scale: 0.85; }

  /* comparativa fija abajo: 3 filas y «Ver todo» (desplegada se desplaza por dentro, sin tapar la barra) */
  .compare-box.is-all { max-height: calc(100 * var(--svh) - 6rem); overflow-y: auto; overscroll-behavior: contain; }

  .cta-stage { padding-top: calc(48 * var(--svh)); }
  .faq { padding-top: 4.5rem; }
  html:not(.js) .still-bird, body.gl-fail .still-bird { top: calc(22 * var(--svh)); right: auto; left: 50%; translate: -50% 0; width: min(17rem, 56vw); }
}

/* ---------- vertical y pantallas bajas: la línea de tiempo de Legacy es un riel horizontal (una tarjeta y la orilla de
   la siguiente). La lista vertical mide ~520–570 px: no cabe fija bajo la barra (paisaje, ver abajo) ni como subtítulo */
@media (max-aspect-ratio: 19/20), (max-height: 680px) {
  .leg-more .timeline { display: flex; gap: 0.9rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 1.1rem; padding: 1rem 1.1rem 0.85rem; scrollbar-width: none; }
  .leg-more .timeline::-webkit-scrollbar { display: none; }
  .leg-more .timeline li { flex: 0 0 84%; scroll-snap-align: start; padding: 1.45rem 0 0; }
  .leg-more .timeline li::before, .leg-more .timeline li::after { left: 0.5rem; right: -0.9rem; top: 0.42rem; bottom: auto; width: auto; height: 2px; }
  .leg-more .timeline li::after { background: linear-gradient(90deg, var(--cempa), var(--rosa)); transform: scaleX(0); transform-origin: 0 50%; }
  .leg-more .timeline li.is-in::after { transform: none; }
  .leg-more .timeline .tl-year::before { left: 0; top: -1.4rem; }
  .js .leg-more .timeline li[data-reveal] { translate: 0 0.6rem; }
  .js .leg-more .timeline li[data-reveal].is-in { translate: 0 0; }
  .leg-more .timeline p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .leg-more .actions { margin-top: 0.65rem; }
}
/* ---------- vertical y paisaje bajo: la comparativa muestra solo la versión elegida, 3 filas y «Ver todo» */
@media (max-aspect-ratio: 19/20), (max-height: 560px) {
  [data-pick="ext"] .compare .c-leg, [data-pick="leg"] .compare .c-ext { display: none; }
  .cmp-more { display: flex; }
  .compare-box:not(.is-all) .compare tbody tr:nth-child(n+4) { display: none; }
  .compare-box:not(.is-all) .compare tbody tr:nth-child(3) :is(th, td) { border-bottom: 0; }
}
/* en teléfono el botón del escenario dice solo «Instalar» (el lector de pantalla sigue leyendo «Instalar Extension») */
@media (max-width: 560px) and (max-aspect-ratio: 19/20) {
  .stage-head .xs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* teléfonos estrechos o bajos (o con la barra del navegador desplegada): todo más compacto */
@media (max-width: 400px), (max-aspect-ratio: 19/20) and (max-height: 700px) {
  .topbar > .btn { display: none; }
  .menu-btn { margin-left: auto; }
  .badges, .hint { display: none; }
  .hide-sm { display: none; }
  .wordmark { margin-bottom: 0.7rem; }
  .eyebrow { margin-bottom: 0.6rem; }
  .actions { margin-top: 0.9rem; gap: 0.5rem; }
  .btn { min-height: 2.75rem; padding: 0.6rem 1rem; font-size: 0.95rem; }
  .btn-big { min-height: 3rem; }
  .stats-grid { gap: 0.5rem; }
  .stat { padding: 0.75rem 0.8rem 0.7rem; }
}
@media (max-aspect-ratio: 19/20) and (max-height: 700px) {
  .hero-copy .eyebrow-pill { display: none; }
  .hero-copy .lead { font-size: 0.95rem; line-height: 1.45; margin-bottom: 0.4rem; }
  .wordmark svg { width: min(100%, 19rem); }
  .hero-copy .actions { flex-wrap: nowrap; }
  .hero-copy .actions .btn { padding: 0.55rem 0.8rem; font-size: 0.9rem; }
  .gcard { grid-template-rows: 34% 1fr; }
  .gcard .g-body { padding: 0.55rem 0.85rem 0.6rem; gap: 0.1rem; }
  .gcard .g-body p { font-size: 0.82rem; }
  .sprite-card { --w: 9rem; }
  /* subtítulos más bajos para que quepan bajo el colibrí (≤ ~45 % del alto) */
  .act-ollin .act-head .lead, .stats > p, .pick-sum { display: none; }
  .stats-grid { margin-top: 0; }
  .act-head .lead { font-size: 0.96rem; line-height: 1.45; }
  .leg-more .timeline h3 { font-size: 1rem; }
}
/* ---------- paisaje (aspecto ≥ 0,95): la llamada final y las preguntas en el tercio izquierdo. En el plano final el
   colibrí queda arriba a la derecha (~65 % x, ~18 % y: director finalBirdAt) con el canal y el Templo Mayor al centro;
   la tarjeta centrada tapaba esa postal, y después de T 5 la de preguntas subía justo encima del colibrí */
@media (min-aspect-ratio: 19/20) {
  /* en una columna el título va más chico y la tarjeta sube un poco: completa (botones incluidos) en el plano final */
  .cta-stage { justify-content: flex-start; padding-top: max(6.5rem, 30 * var(--svh)); }
  .cta-copy { width: min(38rem, 46vw); text-align: left; }
  .cta-copy .display-2 { font-size: clamp(2.2rem, 4.6vw, 4.6rem); }
  .cta-copy .eyebrow { justify-content: flex-start; margin-left: 0; }
  .cta-copy .lead { margin-left: 0; }
  .cta-copy .actions { justify-content: flex-start; }
  .faq-inner { width: min(46rem, 54vw); margin: 0; }
  /* la línea de tiempo de Legacy queda FIJA en la columna derecha durante su tramo (T 3.6–3.99, data-tin/data-tout),
     como un subtítulo lateral (el colibrí sube la Pirámide de la Luna a la izquierda). Entra después de la calzada con
     el sol (3.44–3.6, solo escena); si siguiera en el flujo, para entonces ya habría pasado de largo media tarjeta */
  .js .act-leg .leg-more { position: fixed; z-index: 3; right: calc(var(--gut-r) + var(--rail)); bottom: max(5 * var(--svh), 1.25rem, env(safe-area-inset-bottom, 0px) + 0.6rem); width: var(--col); margin: 0; }
}
/* ---------- paisaje bajo (teléfono acostado, ventana baja): el colibrí va a los lados como en escritorio (config.js
   FRAMING), así que el texto sigue en columna del lado contrario, más angosta (el riel queda en puntos) y compacta para
   que cada tarjeta quepa en ~360–390 px de alto */
@media (max-height: 560px) and (min-aspect-ratio: 19/20) {
  :root { --c0: calc(20 * var(--svh)); --rail: 2.2rem; --col: min(26rem, 42vw); }
  h2 { font-size: clamp(1.7rem, 4.2vw, 2.4rem); }
  .display { font-size: clamp(3rem, 8.5vw, 4.6rem); }
  .lead, .hero-copy .lead { font-size: 0.95rem; line-height: 1.45; }
  .eyebrow { margin-bottom: 0.5rem; }
  .act-head, .cta-copy { padding: 1rem 1.1rem 0.95rem; }
  .act-ollin .act-head .lead, .stats > p { display: none; }
  .stats-grid { margin-top: 0; }
  .stat dd b { font-size: 1.7rem; }
  .hero-stage { padding-top: 4rem; padding-bottom: max(5 * var(--svh), 1rem, env(safe-area-inset-bottom, 0px) + 0.5rem); }
  .hero-copy { width: min(30rem, 46vw); }
  .wordmark svg { width: min(100%, 21rem); }
  .badges, .hint, .stage-head > .fold { display: none; }
  /* escenario de Extension: título y botón juntos arriba a la izquierda (el templo y el colibrí suben a la derecha),
     riel debajo; todo cabe en ~360 px de alto */
  .stage { padding-top: 4.2rem; padding-bottom: max(0.6rem, env(safe-area-inset-bottom, 0px)); }
  .stage-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 1.2rem; width: auto; max-width: min(30rem, 54vw); padding: 0.9rem 1.2rem 0.85rem; }
  .stage-head h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 0; }
  .stage-head .btn { min-height: 2.4rem; padding: 0.45rem 1rem; font-size: 0.9rem; }
  .gallery-meta { margin-bottom: 0.4rem; padding: 0.3rem 0.8rem; }
  .gcard { height: calc(40 * var(--svh)); grid-template-rows: 46% 1fr; width: 14rem; }
  .gcard .g-body { padding: 0.55rem 0.9rem; }
  .gcard .g-body p { display: none; }
  /* línea de tiempo fija a la derecha: tarjeta de 2 líneas y botones en una fila, para que quepa bajo la barra */
  .leg-more .timeline { padding: 0.85rem 1rem 0.7rem; }
  .leg-more .timeline h3 { font-size: 1rem; }
  .leg-more .timeline p { -webkit-line-clamp: 2; font-size: 0.88rem; }
  .leg-more .actions { flex-wrap: nowrap; gap: 0.5rem; margin-top: 0.5rem; }
  .leg-more .actions .btn { min-height: 2.5rem; padding: 0.5rem 0.75rem; font-size: 0.88rem; white-space: nowrap; }
  .leg-more .actions .btn .arrow { display: none; }
  .cta-stage { padding-top: calc(14 * var(--svh)); }        /* la barra se aparta en el plano final (ui.js, pantallas bajas) */
  .cta-copy { width: min(30rem, 46vw); }
  .cta-copy .display-2 { font-size: clamp(1.8rem, 4.2vw, 2.6rem); }
  .cta-copy .actions { gap: 0.5rem; margin-top: 0.8rem; }
  .cta-copy .btn-big { min-height: 2.75rem; padding: 0.55rem 0.85rem; font-size: 0.9rem; }
  .cta-copy .btn-big .arrow { display: none; }
  /* los dos botones del héroe en una fila (apilados a todo lo ancho empujaban «Ver Legacy» al borde de abajo) */
  .hero-copy .actions { flex-wrap: nowrap; }
  .hero-copy .actions .btn { flex: 0 1 auto; min-height: 2.75rem; padding: 0.55rem 0.9rem; font-size: 0.9rem; white-space: nowrap; }
  .hero-copy .actions .btn .arrow { display: none; }
  .rail a span { display: none; }
  /* menú (teléfono acostado de ≤ 760 px, p. ej. 667×375): dos columnas de enlaces más chicos, todo a la vista sin
     desplazarse. Se leen por columnas (00–02 y 03–05) */
  .menu { padding-top: calc(env(safe-area-inset-top, 0px) + 4.4rem); gap: 0.9rem; }
  .menu ol { grid-auto-flow: column; grid-template-rows: repeat(3, auto); justify-content: start; column-gap: 2.6rem; }
  .menu li a { font-size: clamp(1.5rem, 7.2 * var(--svh), 2.3rem); gap: 0.6rem; }
  .garland-menu { top: calc(env(safe-area-inset-top, 0px) + 3.5rem); height: 1.8rem; }
  .talavera-menu { height: 1.2rem; }
}

/* ---------- pantallas táctiles (puntero grueso): objetivos de al menos 44×44 px (guía de Apple, WCAG 2.5.5) sin cambiar
   el dibujo: crece el área tocable (alto mínimo), no la letra. Con ratón todo queda como estaba. */
@media (pointer: coarse) {
  .brand { min-height: 2.75rem; }
  .topbar .btn-small, .stage-head .btn, .leg-more .actions .btn { min-height: 2.75rem; }
  .topnav { gap: 0.4rem; }
  .topnav a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.4rem; }
  .topnav a::after { left: 0.4rem; right: 0.4rem; bottom: 0.45rem; }
  .seg button, .cmp-more, .chip { min-height: 2.75rem; }
  .foot-nav { gap: 0; }
  .foot-nav a { display: flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; }
  .to-top { display: inline-flex; align-items: center; min-height: 2.75rem; }
  /* riel: cada punto es un objetivo de 44 px (el punto se dibuja igual, solo crece el área alrededor) */
  .rail ol { gap: 0; }
  .rail a { min-height: 2.75rem; min-width: 2.75rem; }
}
/* teléfono acostado táctil: los 6 objetivos del riel (264 px) se centran en el espacio bajo la barra, y la columna de la
   derecha se aparta el ancho de un objetivo (si no, el borde de la tarjeta caía bajo los puntos). En pantallas de menos
   de ~360 px de alto (iPhone SE de 1.ª gen. acostado) 6 × 44 px no caben entre la barra y el indicador de inicio: ahí
   cada objetivo mide lo que quepa (≥ 37 px en 320 px de alto) */
@media (pointer: coarse) and (max-height: 560px) and (min-aspect-ratio: 19/20) {
  :root { --rail: 3rem; }
  .rail { top: calc(50% + 1.6rem); }
  .rail a { min-height: min(2.75rem, (100 * var(--svh) - 6rem) / 6); }
}
/* teléfonos acostados muy bajos (≤ 340 px): sin la píldora de arriba del héroe, para que los botones no queden sobre el
   indicador de inicio */
@media (max-height: 340px) and (min-aspect-ratio: 19/20) {
  .hero-copy .eyebrow-pill { display: none; }
}

/* ---------- tabletas en vertical (iPad, Android de 8–13″, plegable abierto): los subtítulos centrados bajo el colibrí y
   algo más anchos. Pegados a la izquierda con 38rem dejaban vacía media pantalla a la derecha en 1024 px */
@media (max-aspect-ratio: 19/20) and (min-width: 700px) {
  .js [data-p]:not(.marquee) { left: 0; right: 0; width: min(40rem, 100% - var(--gut-l) - var(--gut-r)); max-width: none; margin: 0 auto; }
}

/* ---------- teléfonos muy angostos (iPhone SE de 1.ª generación, 320 px; Galaxy Fold cerrado, 280 px): los botones
   del héroe en una fila sin partir su texto en dos renglones (el lector de pantalla sigue leyendo «Conocer Extension»),
   y el conmutador de la comparativa con menos relleno para que «Extension» no se corte */
@media (max-width: 359px), (max-width: 600px) and (max-height: 560px) and (min-aspect-ratio: 19/20) {
  .sr-narrow { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero-copy .actions .btn { white-space: nowrap; }
  .seg button { padding-left: 0.4rem; padding-right: 0.4rem; }
}
@media (max-width: 300px) {
  .hero-copy .actions .btn .arrow { display: none; }
}

/* ---------- escritorio con GPU sobrada: tarjetas de vidrio esmerilado (backdrop-filter solo aquí) */
body.is-desktop.tier-2, body.is-desktop.tier-3 { --card-bg: rgba(255, 250, 243, 0.82); }
body.is-desktop:is(.tier-2, .tier-3) .card, body.is-desktop:is(.tier-2, .tier-3) .act-head::before, body.is-desktop:is(.tier-2, .tier-3) .cta-copy::before { -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); box-shadow: 0 1.2rem 2.6rem -1.6rem rgba(40, 22, 60, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.65); }
body.is-desktop:is(.tier-2, .tier-3) .topbar.is-scrolled { background: rgba(255, 250, 243, 0.68); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }

/* Legacy: papel casi opaco aunque haya vidrio (el rojo del santuario detrás teñía la tarjeta y el naranja bajaba a 2,8:1) */
.act-leg { --card-bg: rgba(255, 250, 243, 0.92); }

/* ---------- movimiento reducido: sin marquee, sin revelados con desplazamiento, sin inclinación */
@media (prefers-reduced-motion: reduce) {
  .wm-s { animation: none; stroke-dashoffset: 0; }
  .sprite-rows, .sprite-rows img, .sprite-loader, .dot::after, .still-bird { animation: none !important; }
  .js [data-reveal], .js [data-tin] > *, .js .hero-copy > *, html.js [data-p] { translate: none !important; transition-duration: 0.25s !important; transition-delay: 0s !important; }
  .fold, .js .stage .stage-head > .fold { transition-duration: 0.01s !important; }
  .js .kinetic .c, .js .kinetic .wi { transform: none !important; transition: none !important; }
  .btn, .gcard, .menu li a, .marquee-skew { transition: none !important; transform: none !important; }
  #toast, #loader, .menu { transition-duration: 0.01s; }
}