/* ============================================================================================================
   SISTEMA VISUAL · Atracciones Cuadra (oct. 2026)
   Se carga DESPUÉS de fx.css, secciones.css, destacados.css y plano.css, y ANTES de galeria.css y pantalla.css.
   Contrato completo (clases, ids, quién edita qué): DISENO.md.

   Idea (27 oct 2026, "esmeralda noche"): feria de noche vista como revista de lujo. Fondo esmeralda muy profundo (el verde del
   logo original, casi negro), tipografía serif grande en mayúsculas, filetes de oro finos, placas marfil para el logo y los
   rótulos clave. El color se dosifica:
     · oro      = la acción (un botón principal por pantalla, texto en verde logo), filetes, rombos de los marcos y los <em>
     · verde logo (#1B1440) = placas y bloques (cintas, fondos de bloque)
     · esmeralda clara = brillo de sección y mes en curso
     · los colores de feria (magenta, violeta, cian, ámbar, cobre) se QUEDAN como acentos por sección (data-tono: stickers,
       chips, viñetas, luces del 3D): colorido pero no cargado. Nada de bloom ni halos detrás del 3D.
     · cian     = foco del teclado y "3D en vivo"
   Movimiento: solo transform, opacity, filter (desenfoque corto al entrar) y clip-path. Todo lo que se esconde para animarse
   vive bajo html.anim (lo pone el <head> solo si no hay "reducir movimiento"); sin JS o con fallas, nada queda invisible.
   ============================================================================================================ */

/* ---------- 1. tokens ---------- */
:root{
  /* marca */
  --magenta:#E6258F;--violeta:#8B3FE0;--cobre:#D08A4E;--ambar:#FFC857;--cian:#46D6F0;
  --noche:#120C2B;--marfil:#F3EEE3;
  /* oro del logo original (filetes y acentos) y su brillo (destellos, rombos, numerales); verde del logo para placas y bloques;
     esmeralda clara para brillos. --marino queda por compatibilidad (ya no se usa en la página) */
  --oro-logo:#C9A24E;--oro-brillo:#EEB73A;--oro-apagado:#B8954A;--verde-logo:#1B1440;--esmeralda:#2E9C86;--marino:#161036;
  --oro-logo-trazo:#C38A3C;
  /* alias de index.html (su <style> va antes): aquí mandan los valores esmeralda */
  --panel:#18113A;--panel-2:#161036;--sup:#161233;--lavanda:#D3CEE6;--tenue:#9790AE;
  --borde:rgba(201,162,78,.22);--borde-2:rgba(201,162,78,.5);
  --grad-btn:linear-gradient(135deg,#D4AE5C 0%,#C9A24E 100%);
  --grad:linear-gradient(135deg,#C9A24E 0%,#EEB73A 50%,#2E9C86 100%);
  --grad-h:linear-gradient(90deg,#C9A24E,#EEB73A 45%,#2E9C86);
  --sfx-oro:var(--grad-h);
  --grad-marca:linear-gradient(135deg,#C9A24E 0%,#EEB73A 52%,#2E9C86 100%);
  --grad-marca-h:linear-gradient(90deg,#C9A24E,#EEB73A 52%,#2E9C86);
  /* filete degradado que se desvanece en las puntas: oro que separa sin cortar */
  --grad-fino:linear-gradient(90deg,rgba(201,162,78,0),rgba(201,162,78,.7) 18%,rgba(238,183,58,.8) 50%,rgba(201,162,78,.7) 82%,rgba(201,162,78,0));
  /* acción principal: UN oro con un velo de 6 % (sin degradado de color ni brillo). Verde logo encima: 5.7:1; hover 6.4:1.
     Sirve en background:var(--accion) (color + imagen en una sola capa). */
  --accion:#C9A24E linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.05));
  --accion-hover:#D7B35E linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.05));
  --accion-tinta:#1B1440;

  /* superficies (de la más profunda a la más alta): esmeralda profunda → verde logo */
  --s-0:#0C0820;   /* interludios, fondo de fotos completas, visor */
  --s-1:#120C2B;   /* página */
  --s-2:#18113A;   /* tarjetas y paneles */
  --s-3:#211951;   /* panel elevado, hover */
  --vidrio:rgba(14,9,34,.62);
  --tinta:#F3EEE3;   /* texto principal */
  --tinta-2:#CFC9DF; /* texto secundario (11:1 sobre --s-1) */
  --tinta-3:#9790AE; /* rótulos chicos (6.5:1 sobre --s-1) */
  --filete-1:rgba(243,238,227,.08);
  --filete-2:rgba(243,238,227,.14);
  --filete-3:rgba(243,238,227,.26);
  --filete-calido:rgba(201,162,78,.45);
  --filete-oro:rgba(201,162,78,.45);        /* marcos, encabezados, botones secundarios */
  --filete-oro-suave:rgba(201,162,78,.3);   /* tarjetas y paneles (con .45 en todas se cargaba) */
  --sombra-1:inset 0 1px 0 rgba(255,255,255,.05),0 18px 40px -26px rgba(0,0,0,.8);
  --sombra-2:0 40px 90px -40px rgba(0,0,0,.9);
  --sombra-oro:0 24px 60px -36px rgba(201,162,78,.35);

  /* tono por sección (lo cambia data-tono); por omisión, el oro del logo */
  --tono:#C9A24E;--tono-claro:#EBD39A;--tono-suave:rgba(201,162,78,.10);--tono-filete:rgba(201,162,78,.5);

  /* tipografía (oct 2026): Playfair Display 700 en MAYÚSCULAS para los títulos (serif elegante y marcada, pedido del cliente),
     Onest para texto, Martian Mono para rótulos, Instrument Serif itálica para los numerales de capítulo; la palabra de acento de
     un título va en la misma Playfair itálica 600 y en el oro del logo. Manrope ya no se usa en títulos (sigue cargada para piezas
     chicas: barra de apps, cifras del armador) */
  /* v13 (29 oct 2026): tipografía inspirada en el logotipo, comparada contra el logo en Chrome. «CUADRA» es una serif de alto
     contraste con remates finos → Noto Serif Display (títulos, 400; subtítulos 500; su itálica para el acento y los numerales).
     «ATRACCIONES» son versales romanas espaciadas → Josefin Sans (rótulos: eyebrows, cápsulas, logotipo de texto). Onest sigue
     para el texto y Martian Mono para cifras y rótulos técnicos. Fuera Playfair, Instrument Serif y Manrope (--f-sans = Onest). */
  --f-display:"Noto Serif Display","Didot","Bodoni 72",Georgia,serif;
  --f-rotulo:"Josefin Sans","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --f-texto:"Onest","Helvetica Neue",Arial,sans-serif;
  --f-sans:var(--f-texto);
  --f-mono:"Martian Mono",ui-monospace,Menlo,Consolas,monospace;
  --f-acento:var(--f-display);
  /* la serif nueva pesa 400 (antes Playfair 700): los títulos crecen ≈ 8 % para mantener la jerarquía; a 390 px ningún título
     pasa de 3 líneas */
  --t-portada:clamp(42px,6.3vw,102px);
  --t-1:clamp(33px,4.25vw,66px);
  --t-2:clamp(27px,2.8vw,43px);
  --t-3:clamp(19px,1.55vw,24px);
  --t-lead:clamp(17px,1.25vw,19px);
  --t-cuerpo:16px;--t-secundario:15px;--t-chico:14px;--t-mini:11px; /* nada bajo 11 px (mono) ni 12 px (Onest) */
  --w-display:400;--w-titulo:500;
  --tr-display:.025em;--tr-titulo:.05em;--tr-mini:.18em;

  /* espacio: escala de 4 px; las secciones respiran (--sec-y) */
  --e-1:4px;--e-2:8px;--e-3:12px;--e-4:16px;--e-5:24px;--e-6:32px;--e-7:48px;--e-8:72px;--e-9:112px;
  /* 27 oct: medido a 1440 × 900 y 390 × 844, entre el último contenido de una sección y el primero de la siguiente no puede haber más
     de 12 vh vacíos (pedido del cliente: sin espacios vacíos). Como ese hueco suma el relleno de abajo de una y el de arriba de la
     otra (más el pie de una foto o el marco de la siguiente), cada sección respira 34-42 px (hueco medido de 74-105 px ≈ 9-11.5 vh);
     el aire grande lo dan las cintas, los videos a pantalla y los tramos fijados, que sí llevan contenido */
  --sec-y:clamp(34px,2.8vw,42px);
  --ancho:1440px; /* ronda 8: página más amplia (antes 1312 px) */

  /* radios: marcos casi rectos (editorial), tarjetas suaves (16 px, lujo), botones y chips en píldora */
  --r-marco:3px;--r-tarjeta:16px;--r-pill:999px;
  --rombo:7px;            /* ornamento de esquina de los marcos */
  --marco-hueco:7px;      /* distancia entre el filete exterior y el interior */

  /* movimiento */
  --ease-salida:cubic-bezier(.16,1,.3,1);
  --ease-suave:cubic-bezier(.65,0,.35,1);
  --t-rapido:.25s;--t-medio:.6s;--t-lento:1.1s;

  /* capas (no inventar otras: el lienzo 3D #gl vive en 5) */
  --z-gl:5;--z-sobre-gl:7;--z-nav:50;--z-flot:60;--z-app:70;--z-visor:80;--z-carga:200;
}
[data-tono="magenta"]{--tono:#E6258F;--tono-claro:#F59CC8;--tono-suave:rgba(230,37,143,.11);--tono-filete:rgba(230,37,143,.5)}
[data-tono="violeta"]{--tono:#8B3FE0;--tono-claro:#C4A2F2;--tono-suave:rgba(139,63,224,.14);--tono-filete:rgba(139,63,224,.55)}
[data-tono="cobre"]{--tono:#D08A4E;--tono-claro:#EDBF94;--tono-suave:rgba(208,138,78,.10);--tono-filete:rgba(208,138,78,.5)}
[data-tono="ambar"]{--tono:#FFC857;--tono-claro:#FFDD94;--tono-suave:rgba(255,200,87,.08);--tono-filete:rgba(255,200,87,.45)}
[data-tono="cian"]{--tono:#46D6F0;--tono-claro:#A6EAF7;--tono-suave:rgba(70,214,240,.08);--tono-filete:rgba(70,214,240,.45)}
[data-tono="oro"]{--tono:#EEB73A;--tono-claro:#F6D98A;--tono-suave:rgba(238,183,58,.11);--tono-filete:rgba(238,183,58,.55)}
[data-tono="esmeralda"]{--tono:#2E9C86;--tono-claro:#8ED9C6;--tono-suave:rgba(46,156,134,.14);--tono-filete:rgba(46,156,134,.55)}

/* celular (≤ 600 px): margen lateral de 14 px (respeta la muesca del iPhone en horizontal); index.html lo define para lo demás */
@media(max-width:600px){:root{--gutter:max(14px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}}
/* tableta (601-900 px): 24 px; en computadora el de index.html (≥ 40 px desde 901 px) */
@media(min-width:601px) and (max-width:900px){:root{--gutter:max(24px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}}

/* ---------- 2. base ---------- */
/* fondo limpio y profundo: solo el degradado esmeralda (verde logo arriba → noche → esmeralda profunda), sin luces de color detrás
   del 3D (el cliente pidió quitar el "aura"; el lienzo #gl es transparente y lo que haya aquí se ve detrás de los juegos) */
html{background:var(--noche)}
html body::before{background:linear-gradient(180deg,#18113A 0%,#120C2B 40%,#161036 100%)}
::selection{background:rgba(201,162,78,.45);color:#fff}
html{scrollbar-color:rgba(243,238,227,.22) transparent}
:where(a,button,[role="button"],input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--cian);outline-offset:3px}
/* el halo oscuro del foco (index.html) en esmeralda */
:focus-visible{box-shadow:0 0 0 7px rgba(14,9,34,.88)!important}

/* secciones: más aire arriba y abajo (hero, pines e interludios definen el suyo) */
section{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.wrap{max-width:var(--ancho)}
/* bloques alternos en verde logo (esmeralda profunda → verde logo → esmeralda profunda): el fondo no es una sola lámina y
   ninguna sección se lee como hueco. Transparente en los extremos: no hay corte recto con la vecina */
#gran-soporte,#circo,#mesas-vip,#armador,#galeria,#proceso,#calendario{background:linear-gradient(180deg,rgba(27,20,64,0) 0%,rgba(27,20,64,.6) 42%,rgba(27,20,64,.6) 58%,rgba(27,20,64,0) 100%)}
/* lo que index.html pintaba en índigo: portada, barra, menú de celular, tapa de carga, pie y avisos, en esmeralda */
.hero .foto{background:linear-gradient(180deg,#18113A 0%,#0D2820 55%,#120C2B 100%)}
.hero .foto::before{background:linear-gradient(90deg,rgba(12,8,32,.95) 0%,rgba(12,8,32,.84) 40%,rgba(12,8,32,.5) 72%,rgba(12,8,32,.7) 100%)}
.hero .foto::after{background:linear-gradient(180deg,rgba(18,12,43,0),var(--noche))}
.hero-respaldo{background:var(--s-2);border-color:var(--filete-oro-suave)}
.nav::before{background:linear-gradient(180deg,rgba(18,12,43,.6),rgba(18,12,43,.35) 60%,rgba(18,12,43,0))}
.nav.solida::before{background:rgba(18,12,43,.62)}
.nav .menu-btn{background:rgba(18,12,43,.6);border-color:var(--filete-oro-suave)}
@media(max-width:1100px){.nav>ul{background:rgba(18,12,43,.97)}}
#carga{background:var(--noche)}
footer{background:linear-gradient(180deg,var(--s-1),#0C0820)}
.ar-aviso{background:rgba(18,12,43,.92);border-color:var(--filete-oro-suave)}
.wa-flot{background:rgba(12,8,32,.72);border-color:rgba(201,162,78,.5)}
.wa-flot::after{background:rgba(18,12,43,.6);border-color:rgba(201,162,78,.5)}
.resumen div,.terreno .pista,.terreno .chip{background:rgba(12,8,32,.84)}
.terreno .btn:not(.p){background:rgba(18,12,43,.6)}
.cot-chip span{background:rgba(18,12,43,.4)}
@media(max-width:900px){html.con3d .sillas .copy{background:linear-gradient(180deg,rgba(18,12,43,0),rgba(18,12,43,.95) 64px)}}

/* títulos: Playfair Display 700 en MAYÚSCULAS, tracking abierto (.03em); la palabra de acento en la misma Playfair itálica 600 y
   en el oro del logo (el tono de la sección sigue en viñetas, filetes y botones). Quedan fuera de la mayúscula y la serif: el h1 de
   la portada (.acceso-h1, uno de los 6 stickers iguales; secciones.css), botones, chips, .mini, .mono, .app-titulo y .visor-nombre */
h1,h2{font-family:var(--f-display);font-weight:var(--w-display);letter-spacing:var(--tr-display);text-transform:uppercase;color:var(--tinta)}
h2{font-size:var(--t-1);line-height:1.04}
h3{font-family:var(--f-display);font-weight:var(--w-titulo);font-size:var(--t-3);letter-spacing:var(--tr-titulo);text-transform:uppercase;line-height:1.2}
.hero h1{font-size:var(--t-portada);line-height:1.02;font-weight:var(--w-display);letter-spacing:var(--tr-display);text-shadow:none}
:is(h1,h2) :is(em,.acento){font-family:var(--f-display);font-style:italic;font-weight:inherit;letter-spacing:.015em;color:var(--oro-logo)}
/* misma familia que el título: mismo cuerpo; un pelo de aire a la izquierda para la itálica */
:is(h1,h2) :is(em,.acento){font-size:1em;padding-left:.02em}

/* celular y tableta: interlineado 1.08 (las mayúsculas con acento necesitan aire) */
@media(max-width:900px){h2{line-height:1.08}html :is(.interludio-texto,.rb-cab,.sillas-hero-cab) h2{line-height:1.04}}

.lead{font-size:var(--t-lead);line-height:1.6;color:var(--tinta-2);max-width:60ch}
/* rótulo de sección: mono chico en oro apagado (6:1 sobre --s-1), viñeta en rombo con el tono de la sección */
.mini,.mono{font-family:var(--f-mono);font-weight:400;font-size:var(--t-mini);letter-spacing:var(--tr-mini);text-transform:uppercase;color:var(--oro-apagado);line-height:1.4}
.eyebrow{color:var(--oro-apagado);letter-spacing:var(--tr-mini);gap:12px}
.eyebrow::before{width:28px;background:linear-gradient(90deg,var(--tono-filete),var(--tono))}
.rombo{display:inline-block;flex:none;width:6px;height:6px;background:var(--tono);transform:rotate(45deg);border-radius:1px}
/* placa marfil: el logo y los rótulos clave (verde logo sobre marfil, 12:1) */
.placa{display:inline-flex;align-items:center;gap:10px;padding:6px 12px;border-radius:12px;background:var(--marfil);color:var(--verde-logo);border:1px solid var(--filete-oro);box-shadow:0 10px 24px -18px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.7)}
.placa.mini,.placa .mini{color:var(--verde-logo)}

/* encabezado de sección: título a la izquierda, texto abajo a la derecha, apoyados en un filete de oro */
.cab{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,80px);margin-bottom:clamp(36px,4.4vw,64px);
  padding-bottom:clamp(18px,2.2vw,30px);border-bottom:1px solid var(--filete-oro)}
.cab .lead{justify-self:end}
.calendario .cab,.interludio .cab{padding-bottom:0;border-bottom:0}
@media(max-width:900px){.cab{grid-template-columns:minmax(0,1fr)}.cab .lead{justify-self:start}}

/* brillo de color muy tenue por sección (data-tono en la <section>) */
/* el brillo nace un poco abajo del borde y se funde arriba y abajo: entre secciones no queda corte recto.
   No se dibuja donde hay 3D (portada, pines, interludios, fichas, armador, plano, AR, el hero de las sillas): detrás del 3D, nada. */
section[data-tono]:not(.hero):not(.pin):not(.interludio):not(.fichas):not(.armador):not(.plano):not(.ar):not(.destreza):not(.sillas-hero)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 46% at var(--brillo-x,86%) 22%,var(--tono-suave),transparent 74%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 clamp(120px,16vh,200px),#000 62%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 clamp(120px,16vh,200px),#000 62%,transparent 100%)}

/* separadores de scroll.js entre cada sección: fuera (cargaban la página); los capítulos ya separan */
.sfx-sep{display:none}

/* ---------- 3. botones, enlaces y chips ---------- */
.btn{border-radius:var(--r-pill);font-family:var(--f-texto);font-weight:500;font-size:14px;letter-spacing:.01em;padding:0 22px;gap:10px;
  border:1px solid var(--filete-oro);background:rgba(14,9,34,.42);color:var(--tinta);box-shadow:none}
.btn.sm{padding:0 18px;font-size:13px}
@media(hover:hover){.btn:hover{border-color:rgba(201,162,78,.8);background:rgba(201,162,78,.08)}}
/* un solo botón principal en todo el sitio: el oro del logo de un tono con el texto en verde logo (5.7:1), sombra suave;
   el hover cambia solo el color (interpola). El Cotizar de la barra también (index.html le ponía marfil con .nav ul a.btn) */
.nav ul a.btn.p{color:var(--accion-tinta)}
.btn.p,form.cot .btn.w{background:var(--accion);border-color:transparent;color:var(--accion-tinta);font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 28px -16px rgba(0,0,0,.85);
  transition:background-color .2s var(--ease-salida),transform .2s var(--ease-salida),border-color .2s var(--ease-salida)}
.btn.p svg,form.cot .btn.w svg{color:var(--accion-tinta)}
@media(hover:hover){.btn.p:hover,form.cot .btn.w:hover{background:var(--accion-hover);filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 28px -16px rgba(0,0,0,.85)}}
.btn.p:active,form.cot .btn.w:active{background:var(--accion)}
/* fuera el destello que cruzaba el botón (fx.css): se leía como anuncio */
.btn.p::after,form.cot .btn.w::after{content:none}
@media(hover:hover){.btn.p:hover,.btn:not(.p):hover{transform:translateY(-1px)}}
.btn.g{border-style:solid;border-color:var(--filete-oro-suave)}
@media(hover:hover){.btn.g:hover{border-color:var(--filete-oro)}}

/* enlace con flecha (secundario discreto: "Ver galería", "Ver en 3D") */
.enlace{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--f-texto);font-weight:500;font-size:14px;color:var(--tinta);text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/100% 1px no-repeat;background-color:transparent;border:0;padding:0;cursor:pointer}
.enlace::after{content:"→";color:var(--tono-claro);transition:transform var(--t-medio) var(--ease-salida)}
@media(hover:hover){.enlace:hover::after{transform:translateX(5px)}}

.chip{border-radius:var(--r-pill);font:500 13px/1 var(--f-texto);letter-spacing:.01em;text-transform:none;background:rgba(14,9,34,.5);border-color:var(--filete-2);gap:8px}
@media(hover:hover){.chip:not(.on):not(:disabled):hover{border-color:var(--filete-3)}}
.chip.on{background:rgba(243,238,227,.09);border-color:rgba(243,238,227,.55);color:var(--tinta)}
.chip.on::before{content:"";width:5px;height:5px;flex:none;background:var(--magenta);transform:rotate(45deg)}

/* ---------- 4. accesos de la portada (los 6 "stickers" del mismo tamaño; el primero es el h1, ver secciones.css) ----------
   <nav class="accesos" aria-label="Para tu evento"><a class="acceso" data-tono="…" href="#…">
     <span class="acceso-ico" aria-hidden="true"><svg…></span><span class="acceso-txt">…</span><span class="acceso-flecha" aria-hidden="true">→</span></a>…</nav>
   Píldoras finas de vidrio oscuro, rectas, con el ícono en el tono del servicio. Nada de giro, brillo ni rebote. */
.accesos{display:flex;flex-wrap:wrap;gap:10px;max-width:640px;margin:0;padding:0}
.acceso{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 13px;border-radius:var(--r-pill);
  border:1px solid var(--filete-2);background:rgba(14,9,34,.46);
  font-family:var(--f-texto);font-weight:500;font-size:14px;letter-spacing:.005em;line-height:1;color:var(--tinta);text-decoration:none;white-space:nowrap;
  transition:border-color var(--t-medio) var(--ease-salida),background-color var(--t-medio) var(--ease-salida),transform var(--t-medio) var(--ease-salida);-webkit-tap-highlight-color:transparent}
.acceso-ico{display:grid;place-items:center;width:18px;height:18px;color:var(--tono)}
.acceso-ico svg{width:17px;height:17px;stroke-width:1.5}
.acceso-flecha{display:inline-block;width:0;margin-left:-10px;opacity:0;overflow:hidden;color:var(--tono-claro);
  transition:width var(--t-medio) var(--ease-salida),margin var(--t-medio) var(--ease-salida),opacity var(--t-rapido)}
@media(hover:hover){
  .acceso:hover{border-color:var(--tono-filete);background-color:var(--tono-suave)}
  .acceso:hover .acceso-flecha{width:14px;margin-left:0;opacity:1}
}
.acceso:focus-visible{outline-offset:4px}
.acceso:active{transform:scale(.98)}
@media(max-width:900px){
  .accesos{gap:8px}
  .acceso{min-height:44px;padding:0 15px 0 12px;font-size:13.5px}
}

/* ---------- 5. marcos ----------
   .marco                 filete exterior fino + filete interior a --marco-hueco + rombo de 7 px en cada esquina (degradado del logo)
   .marco--paspartu       foto dentro de un margen oscuro (como cuadro enmarcado); el borde de la foto hace de filete interior
   .marco--tono           filete y rombos con el tono de la sección
   .marco--focos          hilera de focos muy tenue sobre el filete interior (arriba y abajo); + .vivo = corre despacio
   .marco--escena         marco absoluto dentro de una escena fijada (pin) o interludio; no recibe clics
   .marco--sin-rombos     solo filetes
   Reglas: el .marco NO lleva overflow:hidden (los rombos sobresalen 4 px). Si la foto necesita recorte, recorta la foto. */
.marco{position:relative;border:1px solid var(--filete-oro);border-radius:var(--r-marco)}
.marco::before{content:"";position:absolute;inset:var(--marco-hueco);z-index:2;pointer-events:none;border:1px solid rgba(201,162,78,.22);border-radius:1px}
.marco::after{content:"";position:absolute;inset:calc(var(--rombo) / -2 - .5px);z-index:3;pointer-events:none;background:var(--oro-brillo);opacity:.9;
  -webkit-mask:var(--rombo-svg) left top/var(--rombo) var(--rombo) no-repeat,var(--rombo-svg) right top/var(--rombo) var(--rombo) no-repeat,
               var(--rombo-svg) left bottom/var(--rombo) var(--rombo) no-repeat,var(--rombo-svg) right bottom/var(--rombo) var(--rombo) no-repeat;
          mask:var(--rombo-svg) left top/var(--rombo) var(--rombo) no-repeat,var(--rombo-svg) right top/var(--rombo) var(--rombo) no-repeat,
               var(--rombo-svg) left bottom/var(--rombo) var(--rombo) no-repeat,var(--rombo-svg) right bottom/var(--rombo) var(--rombo) no-repeat}
:root{--rombo-svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 0 10 5 5 10 0 5z'/></svg>")}
.marco--tono{border-color:var(--tono-filete)}
.marco--tono::after{background:var(--tono)}
.marco--sin-rombos::after{content:none}
/* foto enmarcada: margen oscuro, sin filete interior dibujado */
.marco--paspartu{padding:var(--marco-hueco);background:var(--s-2)}
.marco--paspartu::before{content:none}
.marco--paspartu :is(img,video){border-radius:1px;outline:1px solid rgba(243,238,227,.06);outline-offset:-1px}
/* focos: puntos ámbar cada 16 px justo por dentro del filete interior, arriba y abajo; muy bajos */
.marco--focos::before{content:"";
  background:radial-gradient(circle,rgba(255,200,87,.95) 0 1.1px,transparent 1.8px) 0 2px/16px 6px repeat-x,
             radial-gradient(circle,rgba(255,200,87,.95) 0 1.1px,transparent 1.8px) 8px calc(100% - 2px)/16px 6px repeat-x;
  opacity:.5}
.marco--paspartu.marco--focos::before{inset:0;border:0}
@media(prefers-reduced-motion:no-preference){
  .marco--focos.vivo::before{animation:focosCorren 3.2s steps(2) infinite}
}
@keyframes focosCorren{to{background-position:16px 2px,-8px calc(100% - 2px)}}
/* marco de escena: dentro de un .pin-escena o .interludio-escena, a la orilla de la vista y debajo de la barra fija */
.marco--escena{position:absolute;z-index:var(--z-sobre-gl);pointer-events:none;
  top:calc(var(--nav) + 10px);left:clamp(10px,1.4vw,20px);right:clamp(10px,1.4vw,20px);bottom:clamp(10px,1.4vw,20px);border-color:rgba(243,238,227,.1)}
.marco--escena::before{border-color:rgba(243,238,227,.06)}
/* celular: el mismo marco, más pegado a la orilla (el texto de abajo pasa encima de su filete inferior) */
@media(max-width:900px){.marco--escena{top:calc(var(--nav) + 4px);left:8px;right:8px;bottom:8px}.marco--escena::before{inset:5px}}
/* si una escena ya trae el marco nuevo, se apaga el LED viejo de fx.js */
.pin-escena:has(> .marco--escena) > .fx-led,.pegado:has(> .marco--escena) > .fx-led{display:none!important}

/* foto completa (nunca se recorta): la imagen cabe entera en su caja; el hueco queda en --s-0.
   La imagen va absoluta: su alto no depende del contenido (en una rejilla, height:100% crecía con la foto y se cortaba). */
.foto-completa{position:relative;display:block;background:var(--s-0);overflow:hidden}
.foto-completa :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* ---------- 6. tarjetas ---------- */
.tarjeta{position:relative;display:flex;flex-direction:column;min-width:0;background:linear-gradient(180deg,#1E1650,var(--s-2) 60%);border:1px solid var(--filete-oro-suave);border-radius:var(--r-tarjeta);overflow:hidden;
  box-shadow:var(--sombra-1);transition:border-color var(--t-medio) var(--ease-salida),transform var(--t-medio) var(--ease-salida),box-shadow var(--t-medio) var(--ease-salida)}
.tarjeta-media{position:relative;aspect-ratio:var(--ar,4/3);background:var(--s-0)}
.tarjeta-media > :is(img,video),.tarjeta-media picture > img{width:100%;height:100%;object-fit:cover}
.tarjeta-media.foto-completa > :is(img,video),.tarjeta-media.foto-completa picture > img{object-fit:contain}
.tarjeta-cuerpo{display:flex;flex-direction:column;gap:var(--e-3);padding:clamp(18px,2vw,26px)}
.tarjeta-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 14px}
.tarjeta-meta > :not(h3){font-family:var(--f-mono);font-size:var(--t-mini);letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3)}
.tarjeta p{color:var(--tinta-2);font-size:var(--t-secundario);line-height:1.55}
.tarjeta-acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:var(--e-2)}
/* hover 3D sutil (solo con mouse): la tarjeta se inclina 2° hacia atrás y sube; perspectiva propia (no crea una en el padre) */
@media(hover:hover){.tarjeta--enlace:hover{border-color:var(--filete-oro);transform:perspective(900px) rotateX(2deg) translateY(-3px);box-shadow:var(--sombra-2),var(--sombra-oro)}}
/* paneles de servicio, opciones del circo, datos de contacto y meses: misma inclinación corta al pasar el cursor */
.oferta-panel,.circo-op,.contacto .datos a,.cal-mes:not(.sin-eventos *){transition:border-color var(--t-medio) var(--ease-salida),transform var(--t-medio) var(--ease-salida),box-shadow var(--t-medio) var(--ease-salida)}
@media(hover:hover){
  .oferta-panel:hover,.circo-op:hover{transform:perspective(900px) rotateX(1.6deg) translateY(-2px);box-shadow:var(--sombra-2),var(--sombra-oro);border-color:var(--filete-oro)}
}

/* ---------- 7. capítulos ----------
   Cuatro capítulos: I Atracciones · II Para tu evento · III Planea tu feria · IV Cuadra.
   El II y el III abren con un interludio de video; el IV con .capitulo (sin video). */
.capitulo{display:grid;gap:var(--e-4);justify-items:start}
.capitulo-num{font-family:var(--f-acento);font-style:italic;font-weight:400;font-size:clamp(26px,2.6vw,40px);line-height:1;color:var(--oro-logo)}
/* en el rótulo del capítulo (I, II, III, IV) el numeral va derecho: en itálica chica se leía como diagonales */
.capitulo-cab .capitulo-num{font-style:normal;letter-spacing:.04em}
.capitulo-titulo{font-size:var(--t-portada);line-height:.96;max-width:14ch}
.capitulo::after{content:"";width:min(320px,60%);height:1px;background:var(--grad-fino);margin-top:var(--e-3)}

/* ---------- 8. sección fijada (.pin) ----------
   <section class="pin" id="…" data-pin data-pin-3d style="--pin-alto:320vh;--pin-alto-cel:260vh">
     <div class="pin-escena pegado"> …stage 3D, .pin-copy, .marco marco--escena, .pin-progreso… </div></section>
   js/scroll.js escribe en la sección --p (0 → 1, desde que su borde superior toca el de la ventana hasta que el inferior
   toca el inferior), data-fase="antes|dentro|despues" y la clase .pin-activo mientras está fijada.
   La animación termina en --p = .9: el último 10 % es reposo, la sección no se va con la animación a medias.
   Sin 3D (html sin .con3d) la sección con data-pin-3d mide lo que su contenido. Nada de transform ni overflow en
   .pin ni en .pin-escena (rompen el sticky y el recorte del lienzo). */
.pin{position:relative;padding:0;height:var(--pin-alto,300vh)}
@media(max-width:900px){.pin{height:var(--pin-alto-cel,var(--pin-alto,260vh))}}
.pin-escena{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:end;padding:0 var(--gutter) clamp(28px,5vh,56px);z-index:6}
html:not(.con3d) .pin[data-pin-3d]{height:auto}
html:not(.con3d) .pin[data-pin-3d] .pin-escena{position:relative;height:auto;min-height:0;padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
/* texto sobre el 3D: sombra oscura corta + difusa (no brillo de color); se hereda a rótulos, medidas y cifras */
:is(.pin-copy,.int3d-texto,.hero-pie,.sillas-hero-pie){text-shadow:0 1px 2px rgba(8,5,20,.95),0 0 18px rgba(8,5,20,.75)}
/* rótulos chicos sobre el 3D sin velo (interludio 3D, cuadro de las sillas, portada): placa oscura, como .ficha .pista. Con el
   piso dorado o una pieza iluminada detrás la sombra sola daba 2.2:1; tinta-2 sobre la placa da ≥ 6.7:1 con lo que haya detrás */
.interludio-texto.int3d-texto > :is(.mini,.int3d-medida),.hero-pie,.sillas-hero-pie{padding:5px 11px;border-radius:var(--r-pill);background:rgba(10,7,26,.78);color:var(--tinta-2)}
/* texto sobre el 3D: columna abajo a la izquierda con velo inferior */
.pin-copy{position:relative;z-index:var(--z-sobre-gl);max-width:520px;display:flex;flex-direction:column;gap:var(--e-4)}
.pin-escena > .pin-velo{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:6;pointer-events:none;background:linear-gradient(180deg,rgba(12,8,30,0),rgba(12,8,30,.84) 72%)}
/* avance: filete vertical a la derecha, como en Lusion (aria-hidden) */
.pin-progreso{position:absolute;z-index:var(--z-sobre-gl);right:max(16px,env(safe-area-inset-right,0px));top:50%;width:1px;height:clamp(80px,16vh,140px);transform:translateY(-50%);background:var(--filete-2);pointer-events:none}
.pin-progreso > i{display:block;width:100%;height:100%;background:linear-gradient(180deg,var(--cobre),var(--magenta),var(--violeta));transform:scaleY(var(--p,0));transform-origin:50% 0}
.pin:not(.pin-activo) .pin-progreso{opacity:0}
.pin-progreso{transition:opacity var(--t-medio)}
@media(max-width:900px){
  .pin-escena{padding:0 var(--gutter) max(18px,env(safe-area-inset-bottom,0px))}
  .pin-progreso{right:6px}
}

/* ---------- 9. interludio de video a pantalla completa ----------
   <section class="interludio" id="interludio-…" data-pin data-tono="…" aria-labelledby="…" style="--int-alto:220vh">
     <div class="interludio-escena">
       <div class="interludio-medio"><video class="interludio-video" data-auto muted loop playsinline preload="none" poster="…jpg" aria-hidden="true"><source src="…mp4" type="video/mp4"></video></div>
       <div class="interludio-velo" aria-hidden="true"></div>
       <div class="interludio-texto"><p class="capitulo-num">II</p><h2 class="split" id="…">…</h2><p class="lead">…</p></div>
       <p class="interludio-nota mini">Video ilustrativo</p>
     </div></section>
   27 oct (videos a pantalla completa, pedido del cliente): el video cubre SIEMPRE los 100 vw × 100 vh de la escena (object-fit:
   cover, también en celular vertical, donde antes era una franja 16:9) y se mueve un poco con el scroll (paralaje leve por --p:
   sube ≈ 6 % de su alto mientras se recorre el tramo, con un 12 % de sobra para no destapar bordes). El texto entra después
   (--pt). Sin JS (--p sin definir): video a toda la pantalla, quieto, y texto visible.
   Para una sección nueva con la misma receta sin tramo fijado hay .video-pantalla (css/cintas.css). */
/* el fondo pasa de --s-1 (página) a --s-0 en los primeros 120-200 px y el velo vuelve a --s-1 en los últimos 160 px de la
   escena: no hay línea recta ni arriba ni abajo */
.interludio{position:relative;padding:0;height:var(--int-alto,220vh);isolation:isolate;
  background:linear-gradient(180deg,var(--s-1) 0,var(--s-0) clamp(120px,16vh,200px),var(--s-0) calc(100% - 160px),var(--s-1) 100%)}
@media(max-width:900px){.interludio{height:var(--int-alto-cel,180vh)}}
.interludio-escena{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:end;overflow:hidden}
.interludio-medio{--pe:clamp(0,calc(var(--p,1) * 2.2),1);position:absolute;inset:0;z-index:0;background:var(--s-0);overflow:hidden}
.interludio-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% var(--int-y,50%);
  transform:translate3d(0,calc((.5 - var(--p,.5)) * 6%),0) scale(1.12)}
/* el velo baja a esmeralda (degradado inferior) para leer el texto; a la izquierda un poco más, donde va la columna de texto */
.interludio-velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,12,43,0) calc(100% - 160px),var(--s-1) 100%),
             radial-gradient(85% 70% at 0% 100%,rgba(12,8,30,.86),rgba(12,8,30,0) 72%),
             linear-gradient(90deg,rgba(12,8,30,.62) 0%,rgba(12,8,30,.3) 38%,rgba(12,8,30,0) 62%),
             linear-gradient(180deg,rgba(12,8,30,.55) 0%,rgba(12,8,30,0) 22%,rgba(12,8,30,.08) 34%,rgba(22,16,54,.94) 88%)}
.interludio-texto{--pt:clamp(0,calc((var(--p,1) - .4) * 5),1);position:relative;z-index:2;display:grid;gap:var(--e-4);justify-items:start;
  padding:0 var(--gutter) clamp(40px,9vh,96px);max-width:calc(var(--ancho) + 2 * var(--gutter));width:100%;margin:0 auto;
  opacity:var(--pt);transform:translateY(calc((1 - var(--pt)) * 28px))}
.interludio-texto h2{font-size:var(--t-portada);line-height:1.02;max-width:18ch}
/* títulos de capítulo (60-108 px, interlineado 1.02): la caja del glifo sobresale ≈ .2 em; un margen corto evita que cruce el
   rótulo de arriba (numeral, "Simulación 3D") y la medida o el texto de abajo */
:is(.sillas-hero-cab,.interludio-texto,.rb-cab) h2{margin-block:.1em .16em}
.interludio-texto .lead{color:var(--tinta);opacity:.92}
.interludio-texto :is(h2,.lead,.capitulo-cab){text-shadow:0 2px 28px rgba(8,5,20,.6)}
/* el título por palabras entra cuando el bloque ya es opaco (--pt = 1 en --p = .6; scroll.js pone .texto-on ahí), no antes */
/* al volver a subir (--p < .6) las palabras se van en .6 s, sin escalón (antes .3 s: se apagaban de golpe) */
html.anim .interludio:not(.texto-on) .split.partido .split-i{transform:translate3d(0,min(.32em,22px),0) rotateX(12deg);filter:blur(4px);opacity:0;transition-duration:.6s;transition-delay:0s}
/* arriba a la derecha, dentro del marco: abajo chocaba con el botón flotante de WhatsApp */
.interludio-nota{position:absolute;z-index:2;right:calc(var(--gutter) + 8px);top:calc(var(--nav) + 26px);margin:0;color:rgba(243,238,227,.62);text-shadow:0 1px 10px rgba(0,0,0,.75)}
@media(max-width:900px){.interludio-nota{top:calc(var(--nav) + 12px);right:var(--gutter)}}

/* ---------- 10. texto por palabras o letras (.split) y entradas ----------
   HTML: <h2 class="split">…</h2>  (o .split.split--letras para frases cortas)
   JS (scroll.js) parte el texto y le pone .partido: cada palabra queda en
     <span class="split-p"><span class="split-i" style="--i:n">palabra</span></span>  con un espacio de texto real entre palabras;
   en .split--letras cada letra va en <span class="split-c" style="--i:n"> dentro de .split-i, el elemento lleva aria-label con
   el texto original y los spans aria-hidden="true". Al entrar a la vista JS agrega .entra.
   27 oct (entrada 3D): cada palabra sube desde abajo (110 %) girada 40° hacia atrás (rotateX, eje en su base) y desenfocada 6 px,
   y llega derecha y nítida en .9 s; la perspectiva (600 px) va en .split-p, el padre directo de la palabra (perspective solo
   alcanza a los hijos directos). Las letras (.split--letras) hacen lo mismo en chico.
   --retraso (en el elemento) desplaza toda la frase, con tope de .3 s; el escalón es 40 ms por palabra / 24 ms por letra (topado).
   Al llegar por salto (menú, ancla) scroll.js pone el estado final sin transición (.entra-ya, css/scroll.css).
   Entradas: .entrada (sube 24 px, se enfoca y aparece), .entrada--mascara (la foto se descubre desde abajo), .entrada-hijos (cascada).
   Todo el estado escondido vive bajo html.anim; el <head> agrega .entra a todo a los 6 s si el JS no llegó.
   Con "reducir movimiento" (§14) nada se mueve ni se desenfoca. */
/* v13 (29 oct 2026), pedido del cliente: "las animaciones de los textos del inicio y final de las secciones ocurren demasiado
   rápido". Una sola receta para toda la página, con los tokens de css/v13-marca.css (respaldo aquí por si esa hoja no llega):
     duración --dur-entrada (.9 s; 1 s el desplazamiento), curva --curva-entrada (desaceleración natural, sin rebote ni arranque
     brusco), escalón uniforme --paso-entrada (80 ms) con tope, desplazamiento corto (≤ 22 px) y opacidad progresiva.
   Los títulos ya no suben desde debajo de una máscara girados 40° (recorrían una línea entera, hasta 100 px, y "saltaban"):
   cada palabra sube .32 em (tope 22 px) con un giro de profundidad leve (12°), se enfoca y aparece. Entran UNA vez (scroll.js,
   REPITE = false) y se quedan. */
.split-p{display:inline-block;vertical-align:top}
/* el relleno lateral evita cortar la cola de las itálicas; sin recorte: el movimiento es corto y la palabra solo se desvanece */
html.anim .split.partido .split-p{overflow:visible;padding:.06em .04em .18em;margin:-.06em 0 -.18em;perspective:700px}
html.anim .split.partido .split-i{display:inline-block;transform:translate3d(0,min(.32em,22px),0) rotateX(12deg);transform-origin:50% 100%;filter:blur(4px);opacity:0;
  transition:transform calc(var(--dur-entrada,.9s) + .1s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1)),filter var(--dur-entrada,.9s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1)),opacity var(--dur-entrada,.9s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1));
  transition-delay:calc(min(var(--retraso,0s),.3s) + min(var(--i,0),9) * var(--paso-entrada,80ms))}
html.anim .split.partido.entra .split-i{transform:none;filter:none;opacity:1}
.split-c{display:inline-block}
html.anim .split--letras.partido .split-i{transform:none;filter:none;opacity:1;transition:none;perspective:500px}
html.anim .split--letras.partido .split-c{opacity:0;transform:translate3d(0,.3em,0) rotateX(12deg);transform-origin:50% 100%;filter:blur(3px);
  transition:opacity var(--dur-entrada,.9s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1)),transform calc(var(--dur-entrada,.9s) + .1s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1)),filter var(--dur-entrada,.9s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1));
  transition-delay:calc(min(var(--retraso,0s),.3s) + min(var(--i,0),24) * 30ms)}
html.anim .split--letras.partido.entra .split-c{opacity:1;transform:none;filter:none}

/* párrafos, marcos y paneles: suben 20 px y se enfocan. El desenfoque termina en none (no en blur(0)): así el elemento ya entrado
   no conserva un contexto de apilamiento propio (los controles de las herramientas siguen por encima del lienzo 3D) */
html.anim .entrada{opacity:0;transform:translate3d(0,20px,0);filter:blur(4px);
  transition:opacity var(--dur-entrada,.9s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1)),transform calc(var(--dur-entrada,.9s) + .1s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1)),filter var(--dur-entrada,.9s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1));
  transition-delay:calc(min(var(--retraso,0s),.3s) + min(var(--i,0),8) * var(--paso-entrada,80ms))}
html.anim .entrada.entra{opacity:1;transform:none;filter:none}
html.anim .entrada--mascara{opacity:1;transform:none;-webkit-clip-path:inset(10% 4% 0 4%);clip-path:inset(10% 4% 0 4%);
  transition:clip-path calc(var(--dur-entrada,.9s) + .2s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1)),-webkit-clip-path calc(var(--dur-entrada,.9s) + .2s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1));transition-delay:min(var(--retraso,0s),.3s)}
html.anim .entrada--mascara.entra{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}
html.anim .entrada-hijos > *{opacity:0;transform:translate3d(0,16px,0);filter:blur(3px);
  transition:opacity var(--dur-entrada,.9s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1)),transform calc(var(--dur-entrada,.9s) + .1s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1)),filter var(--dur-entrada,.9s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1));
  transition-delay:calc(min(var(--retraso,0s),.3s) + min(var(--i,0),10) * var(--paso-entrada,80ms))}
html.anim .entrada-hijos.entra > *{opacity:1;transform:none;filter:none}
.entrada-hijos > :nth-child(2){--i:1}.entrada-hijos > :nth-child(3){--i:2}.entrada-hijos > :nth-child(4){--i:3}.entrada-hijos > :nth-child(5){--i:4}
.entrada-hijos > :nth-child(6){--i:5}.entrada-hijos > :nth-child(7){--i:6}.entrada-hijos > :nth-child(8){--i:7}.entrada-hijos > :nth-child(9){--i:8}
/* el revelado viejo (.rev/.in, lo usa app.js en contenido generado) con la misma receta: 18 px, .9 s (antes 10-22 px en .35 s) */
.rev{transform:translateY(18px)}
.rev{transition:opacity var(--dur-entrada,.9s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1)),transform calc(var(--dur-entrada,.9s) + .1s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1))}
/* las fichas del catálogo (secciones.css) traían su propia lista sin opacity: aparecían de golpe. Aquí van las dos cosas: la
   entrada (.9 s / 1 s) y el hover (filete y sombra en --t-medio) */
.ficha.rev{transition:opacity var(--dur-entrada,.9s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1)),transform calc(var(--dur-entrada,.9s) + .1s) var(--curva-entrada,cubic-bezier(.3,.5,.2,1)),
  border-color var(--t-medio) var(--ease-salida),box-shadow var(--t-medio) var(--ease-salida)}

/* portada: coreografía de entrada (fx.js o scroll.js ponen .entra cuando se va #carga)
   título por palabras → texto → accesos en cascada → etiqueta del 3D */
.hero h1.split{--retraso:.1s}
.hero .accesos.entrada-hijos{--retraso:.15s}
.hero .hero-pie.entrada{--retraso:.3s}
/* la etiqueta "3D en vivo" se desvanece al bajar (--hp) también después de entrar */
html.anim .hero-pie.entrada.entra{opacity:calc(1 - var(--hp,0))}
/* ya en el scroll (scroll.js pone .hp-vivo con --hp > 0) sigue al scroll sin el retraso de la coreografía */
html.anim .hero-pie.entrada.entra.hp-vivo{transition:opacity .25s var(--ease-salida),transform .9s var(--ease-salida)}

/* ---------- 11. pantalla completa (.app-full): Arma tu feria, Sube tu terreno, Realidad aumentada ----------
   <div class="app-full marco" id="app-armador" data-app="armador" data-tono="…">
     <div class="app-barra"><p class="app-titulo">Arma tu feria</p>
       <button type="button" class="btn sm app-abrir" data-app-abrir>Pantalla completa</button>
       <button type="button" class="app-cerrar" data-app-cerrar aria-label="Cerrar pantalla completa">…</button></div>
     <div class="app-cuerpo"> …la herramienta… </div>
     <button type="button" class="app-portada" data-app-abrir>…</button>   (celular: tocar abre)
   </div>
   js/pantalla.js: al abrir mueve el .app-full a <body> (deja un .app-hueco del mismo alto en su lugar), le pone .abierta,
   role="dialog" aria-modal="true", body.app-abierta, pide pantalla completa a <html> (requestFullscreen; en iPhone, que no
   lo permite, la app igual ocupa toda la ventana con 100dvh), detiene el scroll suave, enfoca .app-cerrar y dispara resize.
   Cierra con el botón, Esc, el botón Atrás del teléfono (history) o al salir de la pantalla completa del navegador.
   El 3D sigue en #gl (z 5): el .app-cuerpo debe ser transparente donde está el stage. */
.app-full{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--s-2);--app-alto:min(76svh,760px)}
.app-full.marco::before{content:none} /* en la herramienta el filete interior cruzaría la barra: solo filete exterior y rombos */
.app-barra{position:relative;z-index:9;display:flex;align-items:center;gap:10px;min-height:58px;padding:8px 10px 8px 18px;border-bottom:1px solid var(--filete-1)}
.app-titulo{display:flex;align-items:center;gap:10px;margin:0 auto 0 0;font-family:var(--f-sans);font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--tinta)} /* barra de apps y visor: sans, sin mayúsculas */
.app-titulo::before{content:"";width:6px;height:6px;flex:none;background:var(--tono);transform:rotate(45deg)}
.app-cerrar{display:none;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--filete-3);background:rgba(14,9,34,.6);color:var(--tinta);cursor:pointer;font-size:20px;line-height:1;padding:0}
@media(hover:hover){.app-cerrar:hover{border-color:rgba(243,238,227,.6)}}
.app-cerrar svg{width:18px;height:18px}
.app-cuerpo{position:relative;flex:1 1 auto;min-height:420px;height:var(--app-alto)}
.app-portada{display:none}
.app-hueco{display:block}
/* celular y tableta (≤ 900 px): las herramientas encajadas van de borde a borde, sin redondeo ni filetes laterales (el margen
   de la página les quitaba ancho). Con id: plano.css y ar.css no la anulan; dentro de la capa abierta no aplica. */
@media(max-width:900px){
  html body :is(#app-armador,#app-plano,#app-ar).app-full.marco:not(.abierta):not(.pc-abierta):not(.pc-abierta *){
    margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));width:auto;max-width:none;border-radius:0;border-left:0;border-right:0}
  html body :is(#app-armador,#app-plano,#app-ar).app-full.marco:not(.pc-abierta *)::after{content:none}
}
/* celular: la herramienta no se usa encajada en la página; una portada invita a abrirla */
@media(max-width:900px){
  .app-full:not(.abierta) .app-portada{position:absolute;inset:58px 0 0;z-index:10;display:grid;place-items:center;align-content:center;gap:12px;width:100%;
    border:0;padding:24px;cursor:pointer;color:var(--tinta);font:inherit;text-align:center;
    background:linear-gradient(180deg,rgba(12,8,30,.25),rgba(12,8,30,.8))}
  .app-full:not(.abierta) .app-cuerpo{pointer-events:none;height:min(62svh,520px);min-height:340px}
  /* bajo la portada los botones de la herramienta no responden: no se muestran (ni reciben el foco) para que no parezcan
     tocables; la vista previa conserva el terreno, el resumen y la pista. Abierta (o en la pantalla completa de pantalla.js) vuelven */
  .app-full:not(.abierta):not(.pc-abierta *) .app-cuerpo :is(a[href],button,input,select,textarea,[role="button"],[tabindex]:not([tabindex="-1"])){visibility:hidden}
}
.app-full.abierta{position:fixed;inset:0;z-index:var(--z-app);width:auto;height:100vh;height:100dvh;max-width:none;margin:0!important;border:0;border-radius:0;
  background:transparent;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.app-full.abierta::before,.app-full.abierta::after{content:none}
.app-full.abierta .app-barra{background:rgba(12,8,30,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.app-full.abierta .app-cuerpo{height:auto;min-height:0}
.app-full.abierta [data-app-abrir]{display:none}
.app-full.abierta .app-cerrar{display:grid}
body.app-abierta{overflow:hidden;overscroll-behavior:none}
/* con la app abierta solo quedan el lienzo 3D, la app, el aviso de AR y la cámara de AR */
body.app-abierta > :not(#gl):not(.app-full):not(#carga):not(#ar-aviso):not(#ar-overlay):not(#ar-video):not(dialog),
body.app-abierta > :not(#gl):not(.app-full):not(#carga):not(#ar-aviso):not(#ar-overlay):not(#ar-video):not(dialog) *{visibility:hidden!important}
/* la cámara de AR (body.en-ar) tapa también la app */
body.en-ar.app-abierta > .app-full{visibility:hidden!important}

/* ---------- 12. visor de pantalla completa (galería) ----------
   <dialog class="visor" aria-labelledby="visor-t"> barra (.app-barra con .app-titulo#visor-t, contador .mini y .app-cerrar) ·
   .visor-escena (foto o video completo, object-fit contain) con .visor-nav.ant / .visor-nav.sig · .visor-tira (miniaturas)
   js/galeria.js lo abre con showModal(); css/galeria.css lo termina. */
dialog.visor{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
  border:0;background:rgba(10,7,26,.97);color:var(--tinta);display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
dialog.visor:not([open]){display:none}
dialog.visor::backdrop{background:rgba(4,12,9,.7)}
dialog.visor .app-cerrar{display:grid}
.visor-escena{position:relative;display:grid;place-items:center;min-height:0;padding:clamp(8px,2vw,24px) clamp(8px,7vw,104px)}
.visor-escena :is(img,video){max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:2px}
.visor-nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:52px;height:52px;transform:translateY(-50%);border-radius:50%;
  border:1px solid var(--filete-3);background:rgba(14,9,34,.6);color:var(--tinta);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.visor-nav.ant{left:clamp(8px,2vw,28px)}.visor-nav.sig{right:clamp(8px,2vw,28px)}
@media(hover:hover){.visor-nav:hover{border-color:rgba(243,238,227,.6)}}
.visor-tira{display:flex;gap:8px;overflow-x:auto;padding:12px var(--gutter) 16px;scrollbar-width:none;justify-content:safe center}
.visor-tira::-webkit-scrollbar{display:none}
.visor-tira button{flex:none;width:64px;height:64px;padding:0;border:1px solid var(--filete-2);border-radius:4px;overflow:hidden;background:var(--s-0);cursor:pointer;opacity:.55;transition:opacity var(--t-rapido),border-color var(--t-rapido)}
.visor-tira button img{width:100%;height:100%;object-fit:cover}
.visor-tira button[aria-current="true"]{opacity:1;border-color:rgba(243,238,227,.7)}
@media(max-width:900px){.visor-nav{width:44px;height:44px;top:auto;bottom:12px;transform:none}}

/* ---------- 13. scroll suave (Lenis, lo carga scroll.js) ---------- */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-scrolling iframe{pointer-events:none}

/* ---------- 14. reducir movimiento: todo quieto y visible ---------- */
@media(prefers-reduced-motion:reduce){
  html.anim .split.partido .split-i,html.anim .split--letras.partido .split-c,html.anim .entrada,html.anim .entrada-hijos > *{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .tarjeta--enlace:hover,.oferta-panel:hover,.circo-op:hover{transform:none!important}
  html.anim .entrada--mascara{-webkit-clip-path:none!important;clip-path:none!important;transition:none!important}
  .rev{transform:none}
  .interludio{--p:1!important;height:auto}
  .interludio-escena{position:relative;height:100vh;height:100svh}
  .interludio-video{transform:none}
  .acceso,.acceso-flecha,.tarjeta,.enlace::after,.btn{transition:none!important}
  .acceso:active,.tarjeta--enlace:hover,.btn:hover{transform:none!important}
  .marco--focos.vivo::before{animation:none}
  .pin-progreso{display:none}
  /* sin animación no hay recorrido: la sección fijada mide una pantalla (la escena queda quieta) */
  .pin{height:auto}
}