/* ════════════════════════════════════════════════════════════════════════════
   ORDEN GLOBAL · portada 28 (rediseño, octubre de 2026) · base

   Tipografía: Archivo (Omnibus-Type, OFL 1.1) variable en peso 100–900 y ancho
   62–125, autoalojada; JetBrains Mono (OFL) para cifras. Nada de serif ni de
   cursivas de color. El oro es una señal precisa (un punto, una línea, un
   cursor), nunca un relleno ni un resplandor.
   ════════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/fuentes/archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/fuentes/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Archivo con font-display: swap (precargada): se ve también en la primera
   visita. Para que el cambio de fuente no mueva nada, el respaldo (Arial o su
   equivalente) tiene la misma caja que Archivo: size-adjust medido sobre los
   textos de la entrada y ascent/descent de Archivo (878/210 por 1000)
   divididos por ese factor. Dos caras: texto (400, ancho 100) y titulares
   (600, ancho 112). Los anchos máximos de la entrada van en em, no en ch: el
   ch cambia con la fuente y movía los saltos de línea. */
@font-face{font-family:'Archivo Respaldo';font-weight:100 900;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Helvetica Neue'),local('Helvetica'),local('Roboto');size-adjust:97%;ascent-override:90.52%;descent-override:21.65%;line-gap-override:0%}
@font-face{font-family:'Archivo Respaldo Titular';font-weight:100 900;src:local('Arial'),local('ArialMT'),local('Liberation Sans'),local('Helvetica Neue'),local('Helvetica'),local('Roboto');size-adjust:117%;ascent-override:75.04%;descent-override:17.95%;line-gap-override:0%}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/assets/fuentes/jetbrainsmono-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --negro:#08090A; --grafito:#111315; --grafito-2:#181B1E;
  --texto:#EDEDE8; --texto-2:rgba(237,237,232,.66); --texto-3:rgba(237,237,232,.50);
  --linea:rgba(237,237,232,.12); --linea-2:rgba(237,237,232,.22);
  --oro:#E2B85C; --oro-2:#F3D58F;
  --verde:#4ADE9B;
  --papel:#F2EBDD; --tinta:#16130F; --tinta-2:#5C554B;
  --f:'Archivo','Archivo Respaldo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ft:'Archivo','Archivo Respaldo Titular',system-ui,-apple-system,'Segoe UI',sans-serif;
  --m:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --margen:clamp(20px,5vw,96px);
  --muelle:0px;
  --sale:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
@media (min-width:900px){ :root{ --margen:max(96px,6.5vw); } }
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;scroll-padding-bottom:calc(var(--muelle) + 16px)}
body{margin:0;background:var(--negro);color:var(--texto);font:400 1rem/1.55 var(--f);font-stretch:100%;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit}
p,h1,h2,h3,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:2px}
.oculto{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:var(--margen);top:-60px;z-index:80;background:var(--texto);color:var(--negro);padding:10px 14px;font-weight:600;text-decoration:none}
.saltar:focus{top:12px}
.num{font-family:var(--m);font-variant-numeric:tabular-nums;letter-spacing:0}
.tnum{font-variant-numeric:tabular-nums}

/* Cabecera: fina, fija, sin degradados. */
.cab{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px;padding:0 var(--margen);
  background:rgba(8,9,10,.95);border-bottom:1px solid var(--linea)}
/* Sin backdrop-filter: medido, el desenfoque detrás de la cabecera añadía ~100 ms a cada cuadro con cambios. */
.cab .marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.cab .marca img{height:22px;width:auto}
.cab .marca span{font:600 .75rem/1 var(--f);font-stretch:118%;letter-spacing:.16em}
.cab nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px);font-size:.875rem}
.cab nav a{text-decoration:none;color:var(--texto-2)}
.cab nav a:hover{color:var(--texto)}
.cab .proto{font:500 .6875rem/1 var(--m);color:var(--texto-3);border:1px solid var(--linea);padding:6px 8px;border-radius:3px}
.cab .proto a{color:var(--texto-2);text-decoration:none;padding:0 3px}
.cab .proto a[aria-current]{color:var(--oro)}

/* Botones: el principal es claro y sólido; el oro no es un relleno. */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:0 22px;border-radius:4px;background:var(--texto);color:var(--negro);
  font:600 .9375rem/1 var(--f);font-stretch:100%;text-decoration:none;transition:background .2s}
.boton:hover{background:#fff}
.boton .flecha{display:inline-block;transition:transform .3s var(--sale)}
.boton:hover .flecha{transform:translateX(3px)}
.cab .boton,.cab nav a.boton{min-height:36px;padding:0 14px;font-size:.8125rem;color:var(--negro)}
.cab nav a.boton:hover{color:var(--negro)}
.enlace{color:var(--texto);text-decoration:underline;text-decoration-color:var(--linea-2);text-underline-offset:.3em;text-decoration-thickness:1px;padding-block:12px;display:inline-block}
.enlace:hover{text-decoration-color:var(--texto)}

/* La señal: un punto de oro que late solo cuando llega un dato nuevo. */
.senal{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--oro);vertical-align:middle}
.senal.late{animation:late 1.2s var(--sale) 1}
@keyframes late{0%{box-shadow:0 0 0 0 rgba(226,184,92,.7)}100%{box-shadow:0 0 0 10px rgba(226,184,92,0)}}

/* Rótulo de demostración: arriba, en claro, nunca en versalitas espaciadas. */
.demo-rot{font:500 .75rem/1.3 var(--m);color:var(--texto-2)}
.demo-rot b{color:var(--texto);font-weight:500}

/* El aviso pegado a la promesa. */
.aviso{font-size:.8125rem;line-height:1.5;color:var(--texto-2);max-width:44em}

/* Cierre provisional del prototipo. */
.cierre{padding:clamp(80px,12vw,160px) var(--margen) 64px;border-top:1px solid var(--linea)}
.cierre h2{font:600 clamp(2rem,4.4vw,4rem)/1 var(--f);font-stretch:112%;letter-spacing:-.025em}
.cierre .acciones{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.cierre .aviso{margin-top:36px}
.pie{padding:28px var(--margen) 40px;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:12px 32px;font-size:.8125rem;color:var(--texto-2)}
.pie a{color:var(--texto-2)}

/* El muelle (teléfono): la acción principal y el sitio reservado de AU-RA. */
.muelle{display:none}
@media (max-width:899px){
  :root{--muelle:calc(68px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:var(--muelle)}
  .cab nav .secc{display:none}
  .cab .proto{display:none}
  .muelle{display:flex;position:fixed;z-index:45;left:0;right:0;bottom:0;padding:10px 80px calc(10px + env(safe-area-inset-bottom,0px)) 16px;
    background:rgba(8,9,10,.96);border-top:1px solid rgba(226,184,92,.16);
    transform:translateY(110%);transition:transform .4s var(--sale)}
  .muelle.ve{transform:none}
  .muelle .boton{flex:1}
  aura-og{--aura-dy:-10px;--aura-dx:-4px}
}
@media (prefers-reduced-motion:reduce){ .muelle{transition:none} .senal.late{animation:none} aura-og{transition:none} }
/* AU-RA, cuando se aparta: fundido corto, nunca un corte seco. */
aura-og{transition:opacity .16s,translate .16s}
aura-og[data-discreta]{opacity:0;translate:8px 0}

/* Prototipo B · La interfaz es la protagonista (versión de cine).
   Un plano de producto generado (el equipo gira hasta mirarte) se recorre con
   el scroll como una secuencia de imágenes en un <canvas>. Cuando el equipo
   queda de frente, la pantalla se enciende con la interfaz de Veta en HTML
   real, alineada a la pantalla del plano, y el envío ocurre ahí. */

.b-escena{position:relative}
.b-fijo{position:relative;padding:96px var(--margen) 56px}
/* ── El plano ─────────────────────────────────────────────────────────── */
.b-cine{position:relative;overflow:hidden;background:#000}
.b-poster,.b-lienzo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b-lienzo{opacity:0;transition:opacity .3s}
.b-cine.listo .b-lienzo{opacity:1}
.b-rot-film{position:absolute;left:12px;bottom:10px;font-size:.625rem;color:rgba(237,237,232,.42);z-index:4}

/* La pantalla: se coloca sobre la pantalla del plano (b.js calcula la caja). */
.b-pantalla{position:absolute;z-index:2;overflow:hidden;border-radius:calc(var(--pw,260px) * .12);background:#04191A;color:#EAF3F2;
  font-size:calc(var(--pw,260px) / 21.5);opacity:var(--enciende,0);filter:brightness(calc(.4 + var(--enciende,0) * .6));
  left:var(--px,0);top:var(--py,0);width:var(--pw,0);height:var(--ph,0)}
.b-app{position:absolute;inset:0;padding:3.6em 1.15em 1em;display:flex;flex-direction:column}
.b-app-marca{display:flex;align-items:center;gap:.5em;font:600 .7em/1 var(--f);font-stretch:118%;letter-spacing:.14em;color:#EAD79C}
.b-app-marca img{width:2.2em;height:auto}
.b-app-titulo{margin-top:.7em;font:700 1.6em/1.1 var(--f);letter-spacing:-.01em}
.b-saldo{margin-top:.8em;display:flex;justify-content:space-between;align-items:baseline;padding:.75em .9em;border-radius:1em;background:rgba(18,62,63,.55);box-shadow:inset 0 0 0 1px #123E3F}
.b-saldo-k{font-size:.74em;color:#9FBDBA}
.b-saldo-v{font-size:1.05em;font-weight:500}
.b-saldo-v small{font:600 .62em/1 var(--f);letter-spacing:.1em;color:#C9A961}
.b-rueda{display:inline-block;height:1.2em;line-height:1.2em;overflow:hidden;vertical-align:bottom}
.b-rueda span{display:block;transform:translateY(calc(var(--saldo,0) * -100%))}
.b-campo{margin-top:.6em;padding:.75em .95em;border-radius:1em;box-shadow:inset 0 0 0 1px #123E3F;background:rgba(4,25,26,.6)}
.b-campo small{display:block;font-size:.7em;color:#9FBDBA}
.b-campo b{display:block;margin-top:.2em;font-weight:600}
.b-campo i{font-style:normal;color:#9FBDBA;font-weight:400}
.b-monto b{font-size:2em;font-weight:500;letter-spacing:-.02em}
.b-monto b small{display:inline;font:600 .32em/1 var(--f);letter-spacing:.1em;color:#C9A961}
.b-teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:.35em;margin:.7em 0 .5em}
.b-teclado span{display:grid;place-items:center;height:2.2em;border-radius:.7em;font:500 1em/1 var(--m);color:#EAF3F2;background:rgba(18,62,63,.35)}
.b-teclado span.on{background:#C9A961;color:#04191A}
.b-boton{position:relative;flex:none;margin-top:auto;margin-bottom:.4em;height:3.1em;border-radius:99em;background:linear-gradient(180deg,#EAD79C,#C9A961);color:#04191A;font:700 .95em/3.1em var(--f);text-align:center;overflow:hidden;
  transform:scale(calc(1 - var(--presion,0) * .04))}
.b-boton span{position:absolute;inset:0}
.b-bt-b{background:#123E3F;color:#9FE3C4;opacity:var(--hecho,0)}
.b-nota{font-size:.66em;color:#9FBDBA;text-align:center}
.b-hoja{position:absolute;z-index:2;left:.6em;right:.6em;bottom:.6em;padding:1em 1.2em 1.3em;border-radius:1.3em;background:#F2EBDD;color:#16130F;
  transform:translateY(calc((1 - var(--hoja,0)) * 115%));box-shadow:0 -1em 2em rgba(0,0,0,.35)}
.b-hoja-asa{display:block;width:2.6em;height:.28em;border-radius:1em;background:rgba(22,19,15,.2);margin:0 auto .8em}
.b-hoja-k{font-size:.7em;color:#5C554B}
.b-hoja-t{margin-top:.2em;font:700 1.3em/1.1 var(--f);letter-spacing:-.01em}
.b-hoja-l{margin-top:.7em;display:grid;gap:.45em;font-size:.8em}
.b-hoja-l li{display:flex;align-items:center;gap:.55em}
.b-hoja-l i{width:1.1em;height:1.1em;border-radius:50%;background:#2F6B4F;position:relative;flex:none}
.b-hoja-l i::after{content:'';position:absolute;left:.36em;top:.2em;width:.25em;height:.5em;border:solid #F2EBDD;border-width:0 .12em .12em 0;transform:rotate(45deg)}

/* El comprobante sale por debajo del equipo y se acerca. */
.b-recibo{position:absolute;z-index:3;left:calc(var(--px,0px) + var(--pw,0px) * .08);width:calc(var(--pw,0px) * .84);top:calc(var(--py,0px) + var(--ph,0px) * .5);
  padding:1.1em 1.2em 1.4em;border-radius:.6em;background:#F2EBDD;color:#16130F;font-size:calc(var(--pw,260px) / 22);
  clip-path:inset(calc((1 - var(--sale,0)) * 100%) 0 0 0);transform:translateY(calc(var(--sale,0) * var(--ph,500px) * .26)) scale(calc(1 + var(--acerca,0) * .06));
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - .5em) no-repeat,radial-gradient(circle at 50% 100%,transparent .3em,#000 .33em) bottom/.9em .5em repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - .5em) no-repeat,radial-gradient(circle at 50% 100%,transparent .3em,#000 .33em) bottom/.9em .5em repeat-x;
  box-shadow:0 1.5em 3em -1em rgba(0,0,0,.6)}
.b-r-cab{display:flex;justify-content:space-between;font-size:.72em;color:#5C554B}
.b-r-monto{margin-top:.4em;font-size:1.9em;font-weight:500;letter-spacing:-.02em}
.b-r-monto small{font:600 .34em/1 var(--f);letter-spacing:.1em;color:#5C554B}
.b-recibo dl{margin-top:.6em;display:grid;gap:.35em;font-size:.82em}
.b-recibo dl div{display:flex;justify-content:space-between;border-top:1px dashed rgba(22,19,15,.18);padding-top:.35em}
.b-recibo dt{color:#5C554B}.b-recibo dd{margin:0;font-weight:600}
.b-r-pie{margin-top:.7em;font-size:.62em;color:#5C554B}

/* Sin movimiento (o sin la secuencia): el plano final, la interfaz encendida y el envío hecho. */


/* ════════════════════════════════════════════════════════════════════════════
   PORTADA 28 · ajustes de la entrada y los capítulos
   ════════════════════════════════════════════════════════════════════════════ */
.rot-gen{font-size:.625rem;color:rgba(237,237,232,.46)}
.b-rot-film{display:none}

/* El saldo que rueda: la fila se enciende y aparece el −12,00 que se va. */
.b-saldo{transition:box-shadow .3s}
.b-cine .b-saldo{box-shadow:inset 0 0 0 calc(1px + var(--marca-saldo,0) * 1px) rgba(201,169,97,calc(.25 + var(--marca-saldo,0) * .75))}
.b-saldo-v{font-size:calc(1.05em + var(--marca-saldo,0) * .3em)}
.b-menos{position:absolute;right:1.2em;top:calc(4.3em + 4.9em);font-size:.8em;color:#F0A08F;opacity:var(--menos,0);transform:translateY(calc((1 - var(--menos,0)) * -.6em));z-index:3}

/* El comprobante se imprime: sale de la ranura del pie de la pantalla y sube
   sobre el teclado, el borde de arriba primero, como un papel que se imprime.
   Nada queda fuera del equipo ni del encuadre. */
.b-ranura{position:absolute;z-index:4;left:calc(var(--px,0px) + var(--pw,0px) * .06);width:calc(var(--pw,0px) * .88);top:calc(var(--py,0px) + var(--ph,0px) * .962);height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(243,213,143,.95),transparent);opacity:var(--imprime,0);box-shadow:0 0 10px rgba(243,213,143,calc(var(--imprime,0) * .6))}
.b-recibo{top:calc(var(--py,0px) + var(--ph,0px) * .962);left:calc(var(--px,0px) + var(--pw,0px) * .08);width:calc(var(--pw,0px) * .84);
  clip-path:inset(0 0 calc((1 - var(--sale,0)) * 100%) 0);transform:translateY(calc(var(--sale,0) * -100%)) scale(calc(1 + var(--acerca,0) * .04));transform-origin:50% 100%;
  box-shadow:0 -1.2em 2.4em -1em rgba(0,0,0,.55)}
.b-r-monto{font-size:2.1em}

/* ── Capítulos ─────────────────────────────────────────────────────────── */
.cap{position:relative;padding:clamp(88px,11vw,160px) var(--margen) 0}
.cap-cabeza{max-width:56rem}
.cap-num{font-size:.75rem;color:var(--oro)}
.cap h2{margin-top:10px;font:600 clamp(2.1rem,4.2vw,4rem)/1 var(--f);font-stretch:112%;letter-spacing:-.03em}
.cap-bajada{margin-top:18px;max-width:40em;font-size:clamp(1rem,1.15vw,1.125rem);line-height:1.55;color:var(--texto-2)}
.cap-nota{margin-top:20px;font-size:.8125rem;color:var(--texto-2)}
.cap h3{font:600 1.125rem/1.25 var(--f);font-stretch:112%}
.estado{display:inline-flex;align-items:center;gap:.45em;font:500 .75rem/1 var(--m);color:var(--texto-2)}
.estado::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.estado.disp{color:var(--verde)}
.estado.beta{color:var(--oro)}
.estado.pronto{color:rgba(237,237,232,.6)}

/* 2 · Hoy: cinco demostraciones legibles. */
.hoy{margin-top:44px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.hoy-i{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--linea);border-radius:10px;background:var(--grafito)}
.hoy-i p{font-size:.9375rem;color:var(--texto-2);line-height:1.5}
.hoy-i .estado{margin-top:auto;padding-top:6px}
.anima .hoy-i{opacity:calc(.25 + var(--ve,1) * .75);transform:translateY(calc((1 - var(--ve,1)) * 18px))}
.mini{height:150px;margin-bottom:6px;padding:14px;border-radius:14px;background:#04191A;color:#EAF3F2;box-shadow:inset 0 0 0 1px #123E3F;display:flex;flex-direction:column;justify-content:center;gap:6px;overflow:hidden}
.mini-k{font-size:.6875rem;color:#9FBDBA !important}
.mini-v{font-size:1.25rem !important;font-weight:600;color:#EAF3F2 !important}
.mini-v small{font-size:.55em;letter-spacing:.1em;color:#C9A961}
.mini-s{font-size:.75rem !important;color:#9FBDBA !important}
.mini-ok{font-size:.75rem !important;color:#9FE3C4 !important}
.mini-barra{height:4px;border-radius:4px;background:#123E3F}.mini-barra i{display:block;height:100%;width:calc(var(--x) * 100%);border-radius:4px;background:#C9A961}
.mini-codigo{width:64px;height:64px;border-radius:6px;background:
  conic-gradient(from 90deg at 30% 30%,#EAF3F2 25%,transparent 0) 0 0/16px 16px,repeating-linear-gradient(90deg,#EAF3F2 0 4px,transparent 4px 8px),#04191A;opacity:.85}
.mini-papel{background:var(--papel);box-shadow:none}
.mini-papel .mini-k,.mini-papel .mini-s{color:var(--tinta-2) !important}.mini-papel .mini-v{color:var(--tinta) !important}
.mini-burbuja{font-size:.75rem !important;line-height:1.4;padding:7px 10px;border-radius:10px;max-width:92%}
.mini-burbuja.tu{align-self:flex-end;background:#123E3F;color:#EAF3F2 !important}
.mini-burbuja.aura{background:#F2EBDD;color:#16130F !important}

/* 3 · Recorridos. */
.rutas{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--linea)}
.ruta{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:28px 28px 8px 0;border-right:1px solid var(--linea)}
.ruta + .ruta{padding-left:28px}
.ruta:last-child{border-right:0}
.ruta p{color:var(--texto-2)}
.ruta-nota{font-size:.8125rem}

/* 4 · Ecosistema: una tabla que se lee de un vistazo. */
.eco{margin-top:40px;border-top:1px solid var(--linea)}
.eco-f{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2.4fr) minmax(0,.9fr) minmax(0,.9fr);gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--linea)}
.eco-n{font:600 1.0625rem/1.2 var(--f);font-stretch:112%}
.eco-q{color:var(--texto-2)}
.eco-f .enlace{padding-block:6px}

/* 5 · ORIGEN como instrumento. */
.origen{overflow:hidden}
.origen-fondo{position:absolute;inset:0;width:100%;height:clamp(420px,60vw,760px);object-fit:cover;opacity:.32;pointer-events:none;
  -webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 60%,transparent);mask:linear-gradient(180deg,transparent,#000 18%,#000 60%,transparent)}
.origen > :not(.origen-fondo){position:relative}
.ins{margin-top:40px;padding:28px;border:1px solid var(--linea);border-radius:12px;background:rgba(8,9,10,.72);
  background-image:linear-gradient(rgba(237,237,232,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(237,237,232,.04) 1px,transparent 1px);background-size:48px 48px}
.ins-lectura{display:flex;align-items:baseline;font:400 clamp(4rem,11vw,10rem)/.85 var(--f);font-stretch:118%;letter-spacing:-.045em;font-family:var(--f)}
.ins-lectura .ins-barra{color:var(--texto-3);margin:0 .02em}
.ins-lectura small{font-size:.38em;color:var(--texto-2);margin-left:.12em}
.ins-regla{position:relative;margin-top:26px;height:96px}
.ins-svg{width:100%;height:70px;overflow:hidden}
.ins-marcas line{stroke:var(--texto);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.7}
.ins-marcas line.mayor{opacity:1}
.ins-base{stroke:var(--texto-3);stroke-width:1;vector-effect:non-scaling-stroke}
.ins-parte{fill:rgba(226,184,92,.18);stroke:var(--oro);stroke-width:1.25;vector-effect:non-scaling-stroke}
.ins-cursor{position:absolute;left:0;top:74px;font-size:.75rem;color:var(--oro);white-space:nowrap}
.ins-cadena{display:flex;flex-wrap:wrap;margin-top:18px;border:1px solid var(--linea);font-size:.8125rem}
.ins-cadena > div{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border-right:1px solid var(--linea)}
.ins-cadena > div:last-child{border-right:0}
.ins-cadena .op{color:var(--texto-3);justify-content:center}
.ins-cadena .k{font-size:.6875rem;color:var(--texto-2)}
.ins-cadena .v{font-size:.9375rem}
.ins-cadena .res .v{color:var(--oro)}
.ins-fuente{margin-top:10px;font-size:.6875rem;color:var(--texto-2)}
.ins-saldo{margin-top:28px;padding-top:18px;border-top:1px solid var(--linea);position:relative}
.ins-saldo::after{content:'';position:absolute;left:0;top:-1px;height:1px;width:calc(var(--rueda,1) * 100%);background:var(--oro)}
.ins-saldo-k{font-size:.75rem;color:var(--texto-2)}
.ins-saldo-v{margin-top:6px;font:400 clamp(2.6rem,6vw,5rem)/1 var(--m);letter-spacing:-.03em}
.ins-saldo-v small{font:600 .22em/1 var(--f);letter-spacing:.12em;color:var(--texto-2);vertical-align:.9em}
.ins-rueda{display:inline-block;height:1em;overflow:hidden;vertical-align:top;-webkit-mask:linear-gradient(transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(transparent,#000 18%,#000 82%,transparent)}
.ins-rueda span{display:block;transform:translateY(calc(var(--rueda,1) * -100%))}
.ins-saldo-r{position:relative;margin-top:8px;font-size:.875rem;color:var(--texto-2)}
.ins-ref-a{position:absolute;left:0;opacity:calc(1 - var(--rueda,1))}
.ins-ref-b{opacity:var(--rueda,1)}
.origen-texto{margin-top:36px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px 48px;align-items:start}
.ficha{padding:22px 24px;border-radius:10px;background:var(--papel);color:var(--tinta)}
.ficha-k{font:500 .75rem/1 var(--m);color:var(--tinta-2)}
.ficha-t{margin-top:12px;font-size:1.0625rem;line-height:1.55}
.limites{display:grid;gap:10px}
.limites li{padding-left:18px;position:relative;color:var(--texto)}
.limites li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--oro)}
.monedas{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.monedas > div{padding:16px;border:1px solid var(--linea);border-radius:10px}
.monedas dt{display:flex;align-items:center;gap:10px;font:600 1rem/1 var(--f);font-stretch:112%}
.monedas dt img{width:28px;height:28px;border-radius:50%}
.monedas dd{margin:10px 0 0;font-size:.9375rem;color:var(--texto-2)}
.origen .rot-gen{grid-column:1 / -1}

/* 6 · Tecnología. */
.tec{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--linea)}
.tec > div{padding:22px 24px 22px 0;border-right:1px solid var(--linea)}
.tec > div + div{padding-left:24px}
.tec > div:last-child{border-right:0}
.tec dt{font:400 clamp(2.2rem,4vw,3.6rem)/1 var(--f);font-stretch:118%;letter-spacing:-.03em}
.tec dd{margin:10px 0 0;color:var(--texto-2)}
.tec-acciones{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}

/* 7 · La red, en vivo. */
.red{margin-top:40px;border-top:1px solid var(--linea)}
.red-tablero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--linea)}
.red-tablero > div{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-right:1px solid var(--linea)}
.red-tablero > div:first-child{padding-left:0}
.red-tablero > div:last-child{border-right:0}
.red-tablero .k{font-size:.6875rem;color:var(--texto-2)}
.red-tablero .v{font-size:.9375rem}
.red-grande{font:500 clamp(1.8rem,3vw,2.8rem)/1 var(--f);font-variation-settings:'wdth' 118;letter-spacing:-.02em}
.red-grande .d{display:inline-block;overflow:hidden;height:1em;vertical-align:top}
.red-grande .d span{display:block}
.anima .red-grande .d.cambia span{animation:rueda .6s cubic-bezier(.16,1,.3,1)}
@keyframes rueda{from{transform:translateY(100%)}to{transform:none}}
.red-svg{display:block;width:100%;height:150px;font-family:var(--m)}
.red-svg .srv circle{fill:var(--negro);stroke:var(--linea-2);stroke-width:1}
.red-svg .srv text{fill:var(--texto-2);font-size:11px;text-anchor:middle;dominant-baseline:central}
.red-svg .srv.activo circle{stroke:var(--oro);stroke-width:1.5}
.red-svg .srv.activo text{fill:var(--oro)}
.red-svg .bajada{stroke:var(--oro);stroke-width:1;fill:none}
.red-svg .celda rect{fill:var(--grafito);stroke:var(--linea);stroke-width:1}
.red-svg .celda.nueva rect{stroke:var(--oro)}
.red-svg .celda text{fill:var(--texto-2);font-size:10px}
.red-svg .celda .n{fill:var(--texto);font-size:11px}
.red-leyenda{font-size:.6875rem;color:var(--texto-2)}
.movs{margin-top:22px}
.movs-k{font-size:.75rem;color:var(--texto-2)}
.movs-l{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.movs-l li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--linea);font-size:.8125rem}
.movs-l .r{color:var(--oro)}
.movs-l .c{color:var(--texto-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.movs-l .h{color:var(--texto-3)}
.red-ir{margin-top:14px}

/* 8 · Evidencia. */
.pruebas{margin-top:40px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px 48px;align-items:start}
.pruebas-g h3{font:500 .8125rem/1 var(--m);color:var(--texto-2);padding-bottom:12px;border-bottom:1px solid var(--linea)}
.prueba-fila{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--linea)}
.prueba-fila .que{display:flex;flex-direction:column;gap:4px}
.prueba-fila .que span{font-size:.9375rem;color:var(--texto-2)}
.prueba-fila .codigo{grid-column:1 / -1;display:flex;align-items:center;gap:10px;font-size:.8125rem}
.copiar{background:none;border:1px solid var(--linea-2);color:var(--texto);border-radius:4px;padding:8px 12px;font:500 .75rem/1 var(--f);cursor:pointer;min-height:36px}
.copiar.ok{border-color:var(--verde);color:var(--verde)}

/* 9 · Compañía y soporte. */
.comp{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px}
.comp > div{padding-top:18px;border-top:1px solid var(--linea)}
.comp p{margin-top:10px;color:var(--texto-2)}
.comp button.enlace{background:none;border:0;font:inherit;cursor:pointer;padding-inline:0;margin-right:1em}
.comp button.enlace[hidden]{display:none}

/* 10 · Cierre. */
.cierre{position:relative;margin-top:clamp(88px,11vw,160px);padding:clamp(80px,10vw,140px) var(--margen);overflow:hidden;border-top:1px solid var(--linea);min-height:min(80svh,760px);display:flex;align-items:center}
.cierre-equipo{position:absolute;top:0;right:-6%;width:66%;height:100%;object-fit:cover;object-position:50% 50%;opacity:.95;pointer-events:none;-webkit-mask:linear-gradient(90deg,transparent,#000 35%);mask:linear-gradient(90deg,transparent,#000 35%)}
.cierre::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--negro) 22%,rgba(8,9,10,.6) 50%,rgba(8,9,10,0) 75%)}
.cierre-in{position:relative;z-index:2;max-width:36rem}
.cierre h2{font:600 clamp(2.4rem,5vw,4.6rem)/1 var(--f);font-stretch:112%;letter-spacing:-.03em}
.legal{margin-top:32px;font-size:.8125rem;line-height:1.6;color:var(--texto-2)}
.legal a{color:var(--texto)}

/* Pie. */
.pie{display:block;padding:48px var(--margen) 40px;margin-top:0}
.pie-a{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:32px}
.pie-a p{margin-top:14px;font-size:.875rem;color:var(--texto-2);line-height:1.6}
.pie-a h2{font:500 .75rem/1 var(--m);color:var(--texto-2)}
.pie-a ul{margin-top:12px;display:grid;gap:6px}
.pie-a a{color:var(--texto);text-decoration:none;font-size:.9375rem;display:inline-block;padding-block:4px}
.pie-a a:hover{text-decoration:underline}
.pie-b{margin-top:36px;padding-top:18px;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:.8125rem;color:var(--texto-2)}

@media (max-width:1100px){
  .hoy{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:899px){
  .hoy{grid-template-columns:1fr;gap:12px}
  .hoy-i{display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 14px;align-items:start}
  .hoy-i .mini{grid-row:1 / span 3;height:auto;min-height:120px;margin:0;padding:10px}
  .rutas,.tec,.comp,.pruebas,.origen-texto,.monedas,.pie-a{grid-template-columns:1fr}
  .ruta,.ruta + .ruta{padding:22px 0 8px;border-right:0;border-bottom:1px solid var(--linea)}
  .tec > div,.tec > div + div{padding:18px 0;border-right:0;border-bottom:1px solid var(--linea)}
  .eco-f{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .eco-q{grid-column:1 / -1;grid-row:2;font-size:.9375rem}
  .eco-f > span:last-child{grid-column:2;grid-row:1}
  .eco-f .estado{grid-column:1 / -1;grid-row:3}
  .eco-f > span:last-child:empty{display:none}
  .ins{padding:18px}
  .ins-cadena > div{flex:1 1 40%;border-bottom:1px solid var(--linea)}
  .red-tablero{grid-template-columns:1fr 1fr}
  .red-tablero > div:nth-child(2){border-right:0}
  .red-tablero > div:nth-child(3){grid-column:1 / -1;padding-left:0;border-top:1px solid var(--linea);border-right:0}
  .red-svg{height:130px}
  .movs-l{grid-template-columns:1fr}
  .cierre{min-height:auto;padding-top:56vw}
  .cierre-equipo{right:0;width:100%;height:70vw;object-position:50% 40%;opacity:.75;-webkit-mask:none;mask:none}
  .cierre::before{background:linear-gradient(180deg,rgba(8,9,10,0) 20%,var(--negro) 62vw)}
}

.red-grande{white-space:nowrap}
@media (max-width:899px){
  .red-tablero > div:first-child{grid-column:1 / -1;border-right:0;border-bottom:1px solid var(--linea)}
  .red-tablero > div:nth-child(2){padding-left:0}
  .movs-l li{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}
  .movs-l .c{grid-column:1 / -1;grid-row:2;white-space:normal}
}
/* Los capítulos no se maquetan en el primer cálculo de la página (que baja a
   la mitad: arranque sin tareas largas); después de `load`, en ratos libres,
   cada uno recibe .maq y se maqueta en su propia tarea corta. */
.cap:not(.maq),.cierre:not(.maq),.pie:not(.maq){content-visibility:auto;contain-intrinsic-size:auto 900px}
main [id]{scroll-margin-top:72px}

/* ════════════════════════════════════════════════════════════════════════════
   RONDA 3 · la portada abre con el producto encendido
   ════════════════════════════════════════════════════════════════════════════ */
.b-fijo{position:relative;background:#0b0c0e}
/* El fondo de la escena en su propia capa: se pinta una vez, no en cada cuadro. */
.b-fijo::before{content:'';position:absolute;inset:0;background:radial-gradient(55% 60% at 58% 62%,#202125 0%,#121315 52%,#08090A 100%);will-change:transform;pointer-events:none}
.b-fijo > *{position:relative}
.b-h1{font:600 clamp(2.75rem,5.6vw,5.5rem)/.95 var(--f);font-stretch:112%;letter-spacing:-.035em;max-width:5.957em;text-wrap:balance}
.b-bajada{margin-top:24px;font-size:1.1875rem;line-height:1.45;max-width:19.48em}
.b-acciones{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;margin-top:24px}
.b-intro .aviso{margin-top:16px;max-width:22.92em;font-size:.8125rem}
.b-notas li{color:var(--texto-2)}
.b-notas b{display:block;font:600 clamp(1.75rem,2.6vw,2.5rem)/1.02 var(--f);font-stretch:112%;letter-spacing:-.03em;color:var(--texto)}
.b-notas span{display:block;margin-top:8px;font-size:.9375rem;line-height:1.45}
.b-rot{z-index:5}
/* El plano: cuadros con transparencia sobre el fondo de la escena (CSS). */
.b-cine{position:relative;overflow:visible;background:none}
.b-poster,.b-lienzo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* La interfaz HTML entra cuando ya sabe dónde está la pantalla (antes, el
   póster la trae compuesta): sin saltos de maquetación. */
.b-cine:not(.encajada) .b-pantalla,.b-cine:not(.encajada) .b-recibo,.b-cine:not(.encajada) .b-ranura{display:none}
.b-lienzo{opacity:0;inset:auto;object-fit:fill}
.b-cine.listo .b-lienzo{opacity:1}
.b-cine.listo .b-poster{opacity:0}
/* La pantalla se enciende (brillo de .2 a 1) y lleva un cristal encima. */
.b-pantalla{filter:brightness(calc(.2 + var(--enciende,1) * .8));opacity:calc(var(--enciende,1) * 1.6 - .1)}
.b-vidrio{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 36%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
/* El comprobante sale por la ranura mecanizada del equipo y sube delante de la pantalla. */
.b-ranura{left:var(--rx,0);width:var(--rw,0);top:var(--ry,0);height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(243,213,143,.95),transparent);opacity:var(--imprime,0);box-shadow:0 0 12px rgba(243,213,143,calc(var(--imprime,0) * .7))}
.b-recibo{top:var(--ry,0);left:calc(var(--px,0px) + var(--pw,0px) * .08);width:calc(var(--pw,0px) * .84);opacity:var(--recibo-ve,1)}
html:not(.anima) .b-cine{--enciende:1;--saldo:1;--hecho:1;--sale:1;--recibo-ve:1}

@media (min-width:900px){
  .b-fijo{min-height:100svh;padding:0}
  .anima .b-escena{height:330svh}
  .anima .b-fijo{position:sticky;top:0;height:100svh;overflow:hidden}
  html:not(.anima) .b-fijo{height:100svh;min-height:680px;overflow:hidden}
  .b-pista{position:absolute;inset:64px 0 0;--cine-dx:6vw}
  .b-cine{position:absolute;top:0;bottom:0;left:var(--cine-dx);right:calc(-1 * var(--cine-dx))}
  .b-intro{position:absolute;z-index:5;left:var(--margen);top:calc(50% + 32px);transform:translateY(-50%);width:min(30rem,36vw)}
  .b-notas{position:absolute;z-index:5;right:var(--margen);top:50%;transform:translateY(-50%);width:min(22rem,24vw);display:grid;gap:30px}
  .anima .b-notas li{opacity:.28;transition:opacity .35s}
  .anima .b-escena:not([data-fase]) .b-n1,.anima .b-escena[data-fase="1"] .b-n1,.anima .b-escena[data-fase="2"] .b-n2,.anima .b-escena[data-fase="3"] .b-n3{opacity:1}
  .b-rot{position:absolute;left:var(--margen);bottom:14px}
}
@media (min-width:900px) and (max-width:1199px){
  .b-pista{--cine-dx:9vw}
  .b-intro{width:min(30rem,34vw)}
  .b-notas{right:40px;width:18vw}
  .b-notas span{display:none}
}
@media (min-width:900px) and (max-height:720px){ .b-intro .aviso,.b-notas span{display:none} }

@media (max-width:899px){
  .cab nav a.boton{display:none}
  .b-fijo{padding:80px var(--margen) 0}
  .b-h1{font-size:clamp(2.5rem,11vw,3rem);max-width:none}
  .b-bajada{margin-top:14px;font-size:1rem;line-height:1.5}
  .b-acciones{margin-top:18px}
  .b-acciones .boton{width:100%}
  .b-acciones .enlace{display:none}
  .b-intro .aviso{margin-top:10px;font-size:.75rem}
  .b-pista{margin:22px calc(-1 * var(--margen)) 0;--cine-h:min(140vw,560px,calc(100svh - 190px))}
  .b-cine{height:var(--cine-h)}
  .anima .b-pista{height:calc(var(--cine-h) + 150svh)}
  .anima .b-cine{position:sticky;top:64px}
  .b-notas{padding:14px var(--margen) 0;display:grid;gap:14px}
  .b-notas b{font-size:1.5rem}
  .anima .b-notas{position:sticky;top:calc(64px + var(--cine-h))}
  .anima .b-notas li{grid-area:1 / 1;opacity:0;transition:opacity .25s}
  .anima .b-escena:not([data-fase]) .b-n1,.anima .b-escena[data-fase="1"] .b-n1,.anima .b-escena[data-fase="2"] .b-n2,.anima .b-escena[data-fase="3"] .b-n3{opacity:1}
  .b-rot{display:block;margin-top:14px;padding-bottom:4px}
}

/* ── Pies «imagen generada»: legibles (≥ 5:1). Estados: un solo componente. ── */
.rot-gen{font:400 .6875rem/1.4 var(--f);color:rgba(237,237,232,.6)}
.estado{font:500 .75rem/1 var(--m);text-transform:uppercase;letter-spacing:.06em}
.ins-fuente,.movs-k,.pruebas-g h3,.ficha-k{font-family:var(--f);font-size:.8125rem;letter-spacing:0;color:var(--texto-2)}
.ficha-k{color:var(--tinta-2)}
[data-espera]{opacity:.4}
.ins-parte{fill:rgba(226,184,92,.28);stroke:#E2B85C;stroke-width:1}

/* ── Ritmo: actos y capítulos menores ──────────────────────────────────── */
.cap.menor{padding-top:120px}
.cap.acto{padding-top:200px}
.cap.acto h2{font-size:clamp(3.5rem,7.5vw,7.5rem);line-height:.95;letter-spacing:-.04em;max-width:12ch}
.cap.derecha .cap-cabeza{margin-left:auto;text-align:right}
.cap.derecha .cap-cabeza h2{margin-left:auto}

/* Hoy: una tarjeta protagonista y cuatro en 2 × 2. */
.hoy-prota{grid-column:1 / span 2;grid-row:1 / span 2;padding:24px}
.hoy-prota .mini{height:auto;min-height:280px;padding:24px;gap:10px}
.hoy-prota .mini-v{font-size:2.6rem !important;letter-spacing:-.02em}
.hoy-prota h3{font-size:1.5rem}
.mini-hoy{font-size:.9375rem !important;color:#EAF3F2 !important}
.mini-hoy-k{display:block;font:400 .75rem/1.4 var(--f);color:#9FBDBA}
.hoy{grid-template-columns:repeat(2,minmax(0,1.1fr)) repeat(2,minmax(0,1fr))}
.hoy-i:not(.hoy-prota) .mini{height:140px}
.hoy-t{display:flex;flex-direction:column;gap:8px;flex:1}
.hoy-t .estado{margin-top:auto;padding-top:6px}
.mini-cobro{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;flex-wrap:wrap}
.mini-cobro .mini-k{width:100%}
.qr{width:72px;height:72px;border-radius:4px;flex:none}
.hoy-prota .qr{width:96px;height:96px}
@media (max-width:1100px){ .hoy{grid-template-columns:repeat(2,minmax(0,1fr))} .hoy-prota{grid-column:1 / -1;grid-row:auto} }
@media (max-width:899px){
  .hoy{grid-template-columns:1fr}
  .hoy-prota{display:flex;flex-direction:column}
  .hoy-prota .mini{min-height:200px}
  .hoy-i:not(.hoy-prota){display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 14px;align-items:start}
  .hoy-i:not(.hoy-prota) .mini{height:auto;min-height:120px;margin:0;padding:10px}
}

/* La red: segundo acto, a todo el ancho. */
.red-acto{padding-left:0;padding-right:0}
.red-acto .cap-cabeza,.red-acto .red-ir{padding:0 var(--margen)}
.red-acto .red{margin-top:48px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:linear-gradient(180deg,#0B0C0E,#08090A)}
.red-acto .red-tablero{padding:0 var(--margen);grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr)}
.red-acto .red-tablero > div{padding:28px 24px}
.red-acto .red-tablero > div:first-child{padding-left:0}
.red-acto .red-grande{font-size:clamp(3.2rem,9vw,8.5rem);line-height:1}
.red-acto .red-svg{height:clamp(220px,24vw,320px)}
.red-acto .red-leyenda,.red-acto .movs{padding:0 var(--margen)}
.red-acto .movs{padding-bottom:28px}
.red-acto .red-svg .srv text{font-size:14px}
.red-acto .red-svg .celda text{font-size:11px}
.red-acto .red-svg .celda .n{font-size:13px}
@media (max-width:899px){ .red-acto .red-tablero{grid-template-columns:1fr 1fr} .red-acto .red-tablero > div{padding:18px 12px 18px 0} }

/* Productos: un tablero de disponibilidad. */
.tablero{margin-top:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tab-col{padding:20px;border:1px solid var(--linea);border-radius:12px;background:var(--grafito)}
.tab-k{font:inherit;padding-bottom:14px;border-bottom:1px solid var(--linea)}
.tab-col ul{display:grid;gap:22px;margin-top:18px}
.tab-n{font:600 1.375rem/1.15 var(--f);font-stretch:112%;letter-spacing:-.01em}
.tab-q{margin-top:6px;font-size:.9375rem;color:var(--texto-2)}
.tab-col .enlace{padding-block:8px}
.tab-pronto{opacity:.55}
@media (max-width:899px){ .tablero{grid-template-columns:1fr} }

/* ORIGEN: a todo el ancho, centrado; el macro se ve (60 %) y la caja desaparece. */
.cap.origen{padding-left:0;padding-right:0;text-align:center}
.origen .cap-cabeza{margin:0 auto;padding:0 var(--margen)}
.origen .cap-cabeza h2,.origen .cap-bajada{margin-left:auto;margin-right:auto}
.origen-fondo{opacity:.6;height:clamp(520px,64vw,860px)}
.origen .ins{max-width:1100px;margin:40px auto 0;border:0;background:none;padding:28px var(--margen)}
.origen .ins-lectura{justify-content:center}
.origen .ins-cadena{justify-content:center}
.origen .ins-saldo,.origen .origen-texto{text-align:left}
.origen .origen-texto{max-width:1100px;margin:36px auto 0;padding:0 var(--margen)}

/* El cierre muestra el producto encendido. */
.cierre{align-items:center}
.cierre::before{display:none}
.cierre-equipo{position:absolute;top:48px;bottom:48px;right:var(--margen);width:auto;height:auto;left:52%;margin:0;-webkit-mask:none;mask:none;opacity:1}
.cierre-equipo img{width:100%;height:100%;object-fit:contain;object-position:50% 50%}
.cierre-rot{position:absolute;right:var(--margen);bottom:14px;max-width:32ch;text-align:right;z-index:2}
.cierre-in{max-width:min(36rem,46vw)}
@media (max-width:899px){
  .cierre{display:block;padding-top:24px}
  .cierre-equipo{position:relative;inset:auto;left:auto;right:auto;height:min(110vw,520px);margin:0 auto 12px}
  .cierre-rot{position:static;max-width:none;text-align:left;margin-bottom:24px}
  .cierre-in{max-width:none}
}
.hoy-i:not(.hoy-prota) .mini-cobro{height:auto;min-height:140px}
/* El macro, en espejo: su línea dorada queda a la izquierda, del lado de la
   división marcada de la regla, y no cruza el titular centrado. */
.origen-fondo{object-position:0 50%}

/* Pies de escena en el teléfono: primero se va uno, después entra el otro (nunca dos a la vez). */
@media (max-width:899px){
  .anima .b-notas li{visibility:hidden;transition:opacity .2s,visibility 0s .2s}
  .anima .b-escena:not([data-fase]) .b-n1,.anima .b-escena[data-fase="1"] .b-n1,.anima .b-escena[data-fase="2"] .b-n2,.anima .b-escena[data-fase="3"] .b-n3{visibility:visible;transition:opacity .2s .2s,visibility 0s .2s}
}

/* ════════════════════════════════════════════════════════════════════════════
   RONDA 3 · menos texto, más visual (pedido del fundador, 14-oct-2026)
   ════════════════════════════════════════════════════════════════════════════ */
/* Botón secundario: un botón de verdad (borde, relleno al pasar), nunca un texto subrayado. */
.boton.sec{background:transparent;color:var(--texto);box-shadow:inset 0 0 0 1px var(--linea-2)}
.boton.sec:hover{background:rgba(237,237,232,.08);box-shadow:inset 0 0 0 1px rgba(237,237,232,.4)}
.boton.chico{min-height:36px;padding:0 14px;font-size:.8125rem}
.ancla{position:absolute;top:0}

/* Ecosistema: Veta grande en el centro, cada pieza con su pantalla y su estado. */
.eco-mapa{margin-top:48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(240px,auto);gap:14px}
.pieza{position:relative;display:flex;flex-direction:column;border:1px solid var(--linea);border-radius:16px;background:linear-gradient(180deg,#121417,#0B0C0E);overflow:hidden}
.pieza-vista{flex:1;min-height:120px;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:18px;background:radial-gradient(120% 90% at 50% 0%,#0B2A2B 0%,#071718 60%,#06100F 100%);color:#EAF3F2}
.pieza-t{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.pieza-t h3{font:600 1.375rem/1.1 var(--f);font-stretch:112%;letter-spacing:-.01em}
.pieza-t p:not(.estado){font-size:.9375rem;color:var(--texto-2)}
.pieza-t .boton{margin-top:8px}
.pieza-veta{grid-column:2 / span 2;grid-row:1 / span 2;flex-direction:row}
.pieza-veta .pieza-vista{flex:1.1;padding:24px;align-items:center;background:radial-gradient(70% 70% at 50% 55%,#1d1f22 0%,#0e0f11 70%)}
.pieza-veta .pieza-vista img{height:min(440px,100%);width:auto;object-fit:contain}
.pieza-veta .pieza-t{flex:1;justify-content:center;padding:28px}
.pieza-veta .pieza-t h3{font-size:2.25rem}
.pieza-pronto{opacity:.55}
.v-burbuja{font-size:.8125rem;line-height:1.35;padding:8px 11px;border-radius:12px;max-width:90%;background:#F2EBDD;color:#16130F}
.v-burbuja.tu{align-self:flex-end;background:#123E3F;color:#EAF3F2}
.v-burbuja.pago{background:#0E3B2A;color:#9FE3C4;box-shadow:inset 0 0 0 1px #1E5C43}
.vista-papel{background:var(--papel);color:var(--tinta)}
.v-k{font-size:.75rem;color:#9FBDBA}
.vista-papel .v-k{color:var(--tinta-2)}
.v-n{font-size:1.25rem;font-weight:600}
.v-ok{font-size:.8125rem;color:#2F6B4F;font-weight:600}
.v-check{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#2F6B4F;color:#F2EBDD;font-size:1.4rem}
.v-par{display:flex;gap:.4em;align-items:baseline;font-size:1.35rem;font-weight:600}
.v-sep{color:#9FBDBA}
.pieza .qr{width:84px;height:84px;align-self:center}
@media (max-width:1100px){ .eco-mapa{grid-template-columns:repeat(2,minmax(0,1fr))} .pieza-veta{grid-column:1 / -1;grid-row:auto} }
@media (max-width:899px){
  .eco-mapa{grid-template-columns:1fr 1fr;gap:10px;grid-auto-rows:auto}
  .pieza-veta{flex-direction:column}
  .pieza-veta .pieza-vista img{height:300px}
  .pieza-vista{min-height:110px;padding:14px}
  .pieza-t{padding:12px 14px 14px}
  .pieza-t h3{font-size:1.125rem}
  .pieza-t p:not(.estado){font-size:.8125rem}
}

/* Tecnología: el equipo de canto, junto al titular. */
.tec-cap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;align-items:center}
.tec-vista{margin:0;display:flex;justify-content:center}
.tec-vista img{height:min(420px,46vw);width:auto}
.tec-cap .tec-acciones{margin-top:28px}
@media (max-width:899px){ .tec-cap{grid-template-columns:1fr;gap:12px} .tec-vista img{height:220px} }

/* Compruébalo: tres tarjetas que se usan, sobre la ranura en macro. */
.prueba-cap{overflow:hidden}
.prueba-fondo{position:absolute;inset:0 0 auto;width:100%;height:clamp(360px,44vw,620px);object-fit:cover;opacity:.5;pointer-events:none;
  -webkit-mask:linear-gradient(180deg,transparent,#000 20%,#000 55%,transparent);mask:linear-gradient(180deg,transparent,#000 20%,#000 55%,transparent)}
.prueba-cap > :not(.prueba-fondo){position:relative}
.pruebas3{margin-top:clamp(120px,16vw,240px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.prueba-c{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px;border:1px solid var(--linea);border-radius:16px;background:rgba(14,15,17,.92)}
.prueba-c h3{font-size:1.375rem;margin-top:6px}
.prueba-c p{color:var(--texto-2);font-size:.9375rem}
.prueba-c .boton{margin-top:auto}
.prueba-vista{align-self:stretch;height:120px;border-radius:12px;background:#06100F;box-shadow:inset 0 0 0 1px #123E3F;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;margin-bottom:8px;color:#EAF3F2}
.pv-campo{width:76%;padding:10px 12px;border-radius:8px;background:#0B2223;box-shadow:inset 0 0 0 1px #1C4B4C;font-size:1rem}
.pv-cursor{display:inline-block;width:2px;height:1em;vertical-align:-2px;background:var(--oro)}
.pv-boton{padding:6px 16px;border-radius:99px;background:linear-gradient(180deg,#EAD79C,#C9A961);color:#04191A;font-weight:700;font-size:.8125rem}
.pv-red{font-size:1.125rem;font-weight:600;display:flex;align-items:center;gap:10px}
.pv-k{font-size:.8125rem;color:#9FBDBA}
.pv-formula{font-size:2rem;font-weight:500}
.pv-formula span{color:var(--oro)}
.prueba-rot{margin-top:18px}
@media (max-width:899px){ .pruebas3{grid-template-columns:1fr;margin-top:100px} }

/* Ayuda. */
.ayuda{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px;padding:36px;border:1px solid var(--linea);border-radius:20px;background:linear-gradient(135deg,#0F1A1A,#0B0C0E)}
.ayuda h2{margin-top:10px;font:600 clamp(2rem,4vw,3.4rem)/1 var(--f);font-stretch:112%;letter-spacing:-.03em}
.ayuda-acciones{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:899px){ .ayuda{padding:24px} .ayuda-acciones .boton{flex:1 1 100%} }
.pie-a > div:first-child p{margin-top:12px}
.eco-mapa .pieza:last-child{grid-column:span 2}
@media (max-width:1100px){ .eco-mapa .pieza:last-child{grid-column:auto} }

/* ════════════════════════════════════════════════════════════════════════════
   RONDA 4 · el universo de fondo (assets/universo.js)
   Detrás de todo, tenue: nunca resta legibilidad (contraste ≥ 4,5:1 medido).
   ════════════════════════════════════════════════════════════════════════════ */
.universo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict;--u-op:0}
/* La atenuación va en cada pieza (no en el contenedor): un grupo con opacidad
   obligaría a recomponer todo el universo en cada cuadro. */
.universo.ve{--u-v:1}
.universo > *{opacity:calc(var(--u-op,.5) * var(--u-v,0));transition:opacity 1.6s ease,transform 1.8s cubic-bezier(.16,1,.3,1)}
.universo.pausa-scroll .u-orbita,.universo.pausa-scroll .u-planeta{animation-play-state:paused}
.universo canvas,.universo img{position:absolute;max-width:none}
.u-estrellas{left:-7%;top:-10%;width:115%;height:130%;will-change:transform}
.u-camara{position:absolute;inset:0;will-change:transform;transform-origin:66% 42%}
.u-luz{position:absolute;left:66%;top:42%;width:min(70vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(243,226,180,.16),rgba(226,184,92,.06) 38%,rgba(226,184,92,.015) 62%,transparent)}
.u-plano{position:absolute;left:66%;top:42%;width:0;height:0;transform:scaleY(var(--inc))}
.u-orbita{position:absolute;inset:0;transform:rotate(var(--a0));animation:u-gira var(--t) linear infinite}
.u-cuerpo{position:absolute;left:var(--r);top:0}
.u-planeta{left:calc(var(--tam) / -2);top:calc(var(--tam) / -2);width:var(--tam);height:var(--tam);animation:u-contra var(--t) linear infinite}
@keyframes u-gira{from{transform:rotate(var(--a0))}to{transform:rotate(calc(var(--a0) + 360deg))}}
@keyframes u-contra{from{transform:rotate(calc(-1 * var(--a0))) scaleY(var(--inv))}to{transform:rotate(calc(-1 * var(--a0) - 360deg)) scaleY(var(--inv))}}
.u-foco{left:50%;top:30%;width:min(34vw,420px);aspect-ratio:1;height:auto;transform:translate(-50%,-50%) scale(.86);opacity:0;transition:opacity 2.4s ease,transform 3s cubic-bezier(.16,1,.3,1)}
.universo[data-cap="origen"] .u-foco{opacity:.42;transform:translate(-50%,-50%) scale(1)}
.universo.pausa .u-orbita,.universo.pausa .u-planeta{animation-play-state:paused}
.u-quieta{inset:0;width:100%;height:100%;object-fit:cover}
/* La versión quieta no es fija: arriba de la página, se va con el scroll. */
.universo.modesto{position:absolute;inset:0 0 auto;height:max(100vh,760px);contain:layout paint;
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
/* El fondo de la escena de entrada deja ver el universo en los bordes. */
.b-fijo{background:transparent}
.b-fijo::before{background:radial-gradient(48% 60% at 58% 60%,rgba(32,33,37,.92) 0%,rgba(18,19,21,.7) 55%,rgba(8,9,10,0) 100%)}
.red-acto .red{background:linear-gradient(180deg,rgba(11,12,14,.72),rgba(8,9,10,.72))}
@media (prefers-reduced-motion:reduce){ .u-orbita,.u-planeta{animation:none} .universo,.u-camara,.u-estrellas,.u-foco{transition:none} }
/* La ranura en macro, más tenue: el número y el titular de «Compruébalo» se leen sobre el papel. */
.prueba-fondo{opacity:.4;filter:brightness(.8)}
@media (max-width:899px){ .prueba-fondo{opacity:.3} }

/* ════════════════════════════════════════════════════════════════════════════
   RONDA 5 · planetas lisos, más presencia, dos capas de estrellas y un anillo
   ════════════════════════════════════════════════════════════════════════════ */
.u-cerca{left:-10%;top:-15%;width:120%;height:140%;will-change:transform}
.u-luz{width:min(86vw,1100px);background:radial-gradient(closest-side,rgba(246,232,192,.26),rgba(226,184,92,.1) 34%,rgba(226,184,92,.03) 60%,transparent)}

.u-anillo{left:auto;right:-3%;top:68%;width:min(27vw,380px);height:auto;transform-origin:52% 50%;
  animation:u-cabeceo 150s ease-in-out infinite alternate;opacity:.92;transition:opacity 2s ease}
@keyframes u-cabeceo{from{transform:translate3d(0,0,0) rotate(-7deg)}to{transform:translate3d(-3vw,-3vh,0) rotate(5deg)}}
.universo.pausa .u-anillo,.universo.pausa-scroll .u-anillo{animation-play-state:paused}
.universo[data-cap="origen"] .u-foco{opacity:.62}
.universo[data-cap="origen"] .u-anillo{opacity:.35}
/* Al abrir (prototipos de entrada): presencia plena y la cámara más cerca;
   con el primer scroll el universo se retira a fondo. */
.universo.abre .u-camara{transform:scale(1.16)!important}
.universo.abre .u-luz{filter:brightness(1.35)}
.universo.abre > *{transition:opacity .9s ease,transform 2.4s cubic-bezier(.16,1,.3,1)}
@media (max-width:899px){
  .u-anillo{right:-22%;top:74%;width:64vw}
  /* En móvil el planeta de ORIGEN sale de detrás de las celdas de la fórmula: arriba a la derecha. */
  .u-foco{left:86%;top:13%;width:52vw}
  .universo[data-cap="origen"] .u-foco{opacity:.5}
}
@media (prefers-reduced-motion:reduce){ .u-anillo{animation:none} }
/* La prueba en vivo de la portada: el número del último registro de la red, y hace cuánto. */
.b-vivo{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:7px 12px 7px 10px;border:1px solid var(--linea-2);border-radius:999px;
  font-family:var(--m);font-size:.75rem;letter-spacing:.01em;color:var(--texto-2);background:rgba(8,9,10,.55);white-space:nowrap;max-width:100%}
.b-vivo [data-registro]{color:var(--texto)}
.b-vivo .senal{box-shadow:0 0 0 3px rgba(226,184,92,.16)}
@media (max-width:899px){ .b-vivo{margin-top:12px;font-size:.6875rem;padding:6px 10px 6px 8px} }
@media (min-width:900px) and (max-height:720px){ .b-vivo{margin-top:12px} }

/* ════════════════════════════════════════════════════════════════════════════
   RONDA 5 · prototipos de entrada (html[data-entrada])
   ════════════════════════════════════════════════════════════════════════════ */
/* A · «Del universo a tu mano»: el escenario se abre al universo; detrás del
   equipo, una estrella. La cámara se acerca (--dolly 0 → 1) mientras el equipo
   gira de canto a frente. */
html[data-entrada="a"] .b-fijo::before{background:linear-gradient(90deg,rgba(8,9,10,.82) 0%,rgba(8,9,10,.5) 38%,rgba(8,9,10,0) 66%)}
html[data-entrada="a"] .b-cine{transform:scale(calc(.8 + var(--dolly,1) * .2));transform-origin:50% 48%;will-change:transform}
html[data-entrada="a"].anima .b-cine{--dolly:0}
html[data-entrada] .b-cine::before{content:'';position:absolute;left:50%;top:47%;width:min(60vw,760px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%) scale(calc(1.25 - var(--dolly,1) * .45 * 1));
  background:radial-gradient(closest-side,rgba(255,244,215,calc(1 - var(--dolly,1) * .77)),rgba(243,213,143,calc(.42 - var(--dolly,1) * .3)) 22%,rgba(226,184,92,.06) 58%,transparent)}
html[data-entrada="b"] .b-cine{--dolly:1}
html[data-entrada="b"] .b-cine::before{background:radial-gradient(closest-side,rgba(255,240,205,.2),rgba(243,213,143,.1) 26%,rgba(226,184,92,.03) 58%,transparent)}
html[data-entrada="b"].palabras .b-cine::before{background:radial-gradient(closest-side,rgba(255,240,205,.6),rgba(243,213,143,.22) 26%,rgba(226,184,92,.05) 58%,transparent)}
@media (max-width:899px){ html[data-entrada] .b-cine::before{width:120vw} }
/* B · «Las palabras nacen de la luz»: el titular espera en marfil tenue (se lee:
   ≥ 4,5:1) y se enciende cuando lo alcanzan las partículas. */
/* La transición del color solo durante la entrada (después, el titular no anima nada). */
html[data-entrada="b"]:not(.titulo-listo) .b-h1{transition:color .5s ease}
html[data-entrada="b"].palabras .b-h1{color:rgba(237,237,232,.56)}
.palabras-lienzo{position:fixed;inset:0;width:100vw;height:100vh;z-index:6;pointer-events:none;transition:opacity .35s ease}
/* La pantalla apagada (A y B) hasta que el equipo te mira. */
.b-cine.apagado .b-recibo,.b-cine.apagado .b-ranura{opacity:0}
@media (prefers-reduced-motion:reduce){ html[data-entrada] .b-cine{transform:none} html[data-entrada] .b-cine::before{opacity:.35} }

/* ════════════════════════════════════════════════════════════════════════════
   RONDA 5 · crítica de movimiento R2
   ════════════════════════════════════════════════════════════════════════════ */
/* El héroe termina con la prueba: sin giro ni apagado, la escena es más corta
   (sin tramo muerto al final). */
@media (min-width:900px){ .anima .b-escena{height:300svh} }
@media (max-width:899px){
  .anima .b-pista{height:calc(var(--cine-h) + 132svh)}
  /* Póster del teléfono: el recorte vertical del 40 % central, puesto donde
     caería ese 40 % del plano entero (object-fit: cover por alto), así la
     interfaz HTML encaja encima igual que antes. */
  .b-poster{left:50%;right:auto;width:calc(var(--cine-h) * 1.78996 * .4);transform:translateX(-50%);object-fit:fill}
}
/* El saldo: el «1» quieto; decenas y unidades ruedan por separado. */
.b-rueda span{transform:translateY(calc(var(--saldo,0) * -100%))}
.b-rueda-u span{transform:translateY(calc(var(--saldo-u,0) * -100%))}
html:not(.anima) .b-cine{--saldo-u:1}
/* El fantasma −12,00: más grande, a la izquierda de la cifra, sube 8 px y se va. */
.b-menos{font-size:1.15em;right:5.4em;top:7.1em;transform:translateY(calc((1 - var(--menos,0)) * 8px));font-weight:600}
/* El comprobante, al menos tan ancho como el botón (el verde no asoma). */
.b-recibo{left:calc(var(--px,0px) + var(--pw,0px) * .045);width:calc(var(--pw,0px) * .91)}
/* EN a 320: el Nº de la red y los títulos de producto caben. */
.red-acto .red-grande{font-size:clamp(2.4rem,9vw,8.5rem)}
@media (max-width:899px){ .red-acto .red-grande{font-size:min(3.2rem,13vw)} }
.pieza-t h3{overflow-wrap:anywhere;font-size:min(1.375rem,6.4vw)}
/* Contraste sobre el universo, ahora más presente: un velo oscuro y suave
   detrás de los bloques de texto del héroe (no una caja: un degradado). */
.b-intro::before,.b-notas::before{content:'';position:absolute;z-index:-1;inset:-12% -18%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(8,9,10,.78),rgba(8,9,10,.55) 60%,rgba(8,9,10,0))}
.b-notas{isolation:isolate}
.b-intro{isolation:isolate}
@media (max-width:899px){ .b-intro{position:relative} .b-notas{position:relative} .b-notas::before{inset:-8% -6%} }
.b-vivo{background:rgba(8,9,10,.86);color:rgba(237,237,232,.8)}
.rot-gen{color:rgba(237,237,232,.62)}
/* El planeta de ORIGEN, a un lado del texto (antes, detrás de la frase del precio). */
@media (min-width:900px){
  .u-foco{left:86%;top:48%;width:min(30vw,400px)}
  .universo[data-cap="origen"] .u-foco{opacity:.55}
}
/* La prueba en vivo cabe en una línea en el teléfono (sin el nombre de la red). */
/* Sin el nombre de la red donde la columna del héroe es angosta (teléfono y 900–1199). */
@media (max-width:479px),(min-width:900px) and (max-width:1199px){ .b-vivo-red{display:none} }
/* Las celdas de la fórmula llevan fondo: el universo pasa detrás sin restar contraste. */
.ins-cadena > div{background:rgba(8,9,10,.82)}
@media (max-width:899px){ .cap.acto h2{font-size:min(3.5rem,12.2vw)} }
/* Las columnas que ruedan, en la misma línea de base que el «1» y los decimales. */
.b-saldo-v{line-height:1.2em}
.b-rueda{vertical-align:top}
.b-menos{right:10.8em;top:7.2em}
/* El pie «imagen generada» del héroe lleva su propio fondo (el universo pasa detrás). */
.b-rot{background:rgba(8,9,10,.84);padding:3px 8px;border-radius:4px;width:max-content;max-width:100%}
/* El Nº grande de la red no invade las columnas de al lado: en escritorio
   ocupa toda la primera fila del tablero, y los otros dos datos van debajo. */
@media (min-width:900px){
  .red-acto .red-tablero{grid-template-columns:1fr 1fr}
  .red-acto .red-tablero > div:first-child{grid-column:1 / -1;border-right:0;border-bottom:1px solid var(--linea);padding-right:0}
  .red-acto .red-tablero > div:nth-child(2){padding-left:0}
}
/* Teléfonos angostos: el mapa de productos en una columna (los nombres caben enteros). */
@media (max-width:420px){ .eco-mapa{grid-template-columns:minmax(0,1fr)} .eco-mapa .pieza{grid-column:auto!important;grid-row:auto!important} }
/* Los pies «imagen generada» del cierre y de la prueba, con fondo propio (el universo pasa detrás). */
.cierre-rot,.prueba-rot{background:rgba(8,9,10,.84);padding:4px 8px;border-radius:4px}

/* La fuente del precio, más clara: se lee igual con un planeta detrás. */
.ins-fuente{color:rgba(237,237,232,.8)}

/* ════════════════════════════════════════════════════════════════════════════
   RONDA 6 · sistema de botones, prueba en vivo, comprobante, capítulos
   ════════════════════════════════════════════════════════════════════════════ */
/* El botón principal: oro con canto mecanizado. Un solo principal por pantalla.
   El círculo de la flecha es la pieza de metal oscuro; al pasar, un brillo
   cruza el oro; al pulsar, se hunde un pelo. */
.boton{position:relative;isolation:isolate;overflow:hidden;min-height:50px;padding:0 9px 0 24px;gap:16px;border-radius:999px;
  font:600 .9375rem/1 var(--f);font-stretch:104%;letter-spacing:.01em;color:#1A1307;text-decoration:none;
  background:linear-gradient(180deg,#F8E6B0 0%,#ECCB7A 38%,#D4A64F 72%,#B98B3C 100%);
  box-shadow:inset 0 1px 0 rgba(255,251,235,.85),inset 0 -1px 0 rgba(96,64,14,.45),0 0 0 1px #7A5718,0 1px 0 1px rgba(255,236,190,.12),0 16px 34px -16px rgba(226,184,92,.7);
  transition:transform .16s var(--sale),box-shadow .3s ease,filter .3s ease}
.boton::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,rgba(255,255,255,0) 1px 3px);opacity:.7}
.boton::after{content:'';position:absolute;top:-20%;bottom:-20%;left:-70%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,253,240,.65),rgba(255,255,255,0));transform:skewX(-20deg);transition:left .8s var(--sale)}
.boton:hover{background:linear-gradient(180deg,#FBEBBC 0%,#F0D184 38%,#D9AC55 72%,#BE903F 100%);color:#1A1307;
  box-shadow:inset 0 1px 0 rgba(255,251,235,.9),inset 0 -1px 0 rgba(96,64,14,.45),0 0 0 1px #7A5718,0 1px 0 1px rgba(255,236,190,.16),0 20px 44px -16px rgba(226,184,92,.85)}
.boton:hover::after{left:125%}
.boton:active{transform:translateY(1px);box-shadow:inset 0 2px 7px rgba(80,52,10,.5),0 0 0 1px #7A5718}
.boton:focus-visible{outline:2px solid var(--oro-2);outline-offset:3px}
.boton .flecha{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;font-size:1rem;color:#F3D58F;
  background:radial-gradient(circle at 35% 30%,#2B2416,#100D08 70%);box-shadow:inset 0 0 0 1px rgba(243,213,143,.4),0 1px 2px rgba(0,0,0,.4);transition:transform .35s var(--sale)}
.boton:hover .flecha{transform:translateX(3px)}
.boton:not(:has(.flecha)){padding:0 24px}
.cab .boton,.cab nav a.boton{min-height:38px;padding:0 18px;font-size:.8125rem;color:#1A1307}
.cab .boton::after{display:none}
.muelle .boton{min-height:52px}
/* El secundario no es una caja: texto con una flecha de oro y un filo que crece. */
.boton.sec{min-height:44px;padding:0 2px;gap:10px;border-radius:0;color:var(--texto);font-weight:500;overflow:visible;
  background:linear-gradient(var(--oro),var(--oro)) left calc(100% - 9px) / 18px 1px no-repeat;box-shadow:none;transition:background-size .4s var(--sale),color .25s}
.boton.sec::before{display:none}
.boton.sec::after{content:'→';position:static;width:auto;inset:auto;transform:none;background:none;color:var(--oro);font-weight:400;transition:transform .35s var(--sale)}
.boton.sec:has(.flecha)::after{content:none}
.boton.sec .flecha{width:auto;height:auto;background:none;box-shadow:none;color:var(--oro)}
.boton.sec:hover{background-size:100% 1px;color:#fff;box-shadow:none}
.boton.sec:hover::after{transform:translateX(3px)}
.boton.sec:active{transform:none;box-shadow:none}
.boton.sec.chico{min-height:32px;font-size:.8125rem}
.b-acciones{gap:12px 28px}
@media (max-width:899px){ .b-acciones .boton.sec{width:auto;justify-content:flex-start} }

/* La prueba en vivo: una línea tipográfica, sin caja. */
.b-vivo{display:flex;align-items:center;gap:10px;margin-top:22px;padding:0;border:0;border-radius:0;background:none;
  font:400 .75rem/1.3 var(--m);letter-spacing:.04em;color:rgba(237,237,232,.72);white-space:nowrap;text-transform:uppercase}
.b-vivo::before{content:'';width:28px;height:1px;flex:none;background:linear-gradient(90deg,var(--oro),rgba(226,184,92,0))}
.b-vivo .senal{order:-2;width:5px;height:5px;box-shadow:0 0 8px rgba(226,184,92,.9)}
.b-vivo [data-registro]{color:var(--oro-2);letter-spacing:.02em}
@media (max-width:899px){ .b-vivo{margin-top:14px;font-size:.6875rem;padding:0} }

/* El comprobante: la pantalla pasa a la vista del comprobante (sube como una
   hoja, dentro del equipo) y por la ranura asoma el papel impreso, colgado
   debajo del equipo. Nada tapa la interfaz ni queda flotando. */
.b-vista-recibo{position:absolute;z-index:3;left:.6em;right:.6em;bottom:.6em;padding:1.1em 1.2em 1.2em;border-radius:1.2em;background:#F2EBDD;color:#16130F;
  transform:translateY(calc((1 - var(--sale,0)) * 112%));box-shadow:0 -1em 2em rgba(0,0,0,.35)}
.b-vista-recibo .b-r-cab{display:flex;justify-content:space-between;font-size:.72em;color:#5C554B}
.b-vista-recibo .b-r-monto{margin-top:.35em;font-size:2.1em;font-weight:500;letter-spacing:-.02em}
.b-vista-recibo .b-r-monto small{font:600 .34em/1 var(--f);letter-spacing:.1em;color:#5C554B}
.b-vista-recibo dl{margin-top:.6em;display:grid;gap:.35em;font-size:.82em}
.b-vista-recibo dl div{display:flex;justify-content:space-between;border-top:1px dashed rgba(22,19,15,.18);padding-top:.35em}
.b-vista-recibo dt{color:#5C554B}.b-vista-recibo dd{margin:0;font-weight:600}
.b-vista-recibo .b-r-pie{margin-top:.7em;font-size:.62em;color:#5C554B}
.b-cine .b-recibo{top:calc(var(--ry,0px) + 1px);left:calc(var(--rx,0px) + var(--rw,0px) * .06);width:calc(var(--rw,0px) * .88);height:auto;
  padding:.7em .9em 1.1em;font-size:calc(var(--pw,260px) / 26);border-radius:0 0 .25em .25em;opacity:1;
  clip-path:inset(0 0 calc((1 - var(--sale,0)) * 100%) 0);transform:none;transform-origin:50% 0;
  box-shadow:0 1.2em 1.6em -1em rgba(0,0,0,.7),inset 0 .5em .6em -.4em rgba(0,0,0,.35)}
.b-cine .b-recibo .b-r-monto{margin-top:.25em;font-size:1.5em}
html:not(.anima) .b-cine{--sale:1}

/* Hoy: tarjetas sin sellos, con un filo de oro arriba y la pantalla más presente. */
.hoy-i{position:relative;padding:14px 14px 18px;border-radius:14px;background:linear-gradient(180deg,#121417,#0C0D0F);border-color:rgba(237,237,232,.09)}
.hoy-i::before{content:'';position:absolute;left:18px;right:18px;top:-1px;height:1px;background:linear-gradient(90deg,rgba(226,184,92,0),rgba(226,184,92,.6),rgba(226,184,92,0))}
.hoy-i h3{font:600 1.1875rem/1.15 var(--f);font-stretch:108%;letter-spacing:-.01em;color:var(--texto)}
.hoy-t{gap:6px}
.hoy-i .mini{border-radius:12px;box-shadow:inset 0 0 0 1px #123E3F,0 10px 24px -14px rgba(0,0,0,.8)}

/* Productos: Veta al frente y seis piezas iguales, sin huecos. */
.casa-veta{margin-top:48px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(24px,5vw,72px);
  padding:clamp(24px,4vw,48px);border:1px solid rgba(237,237,232,.1);border-radius:20px;background:radial-gradient(70% 90% at 25% 50%,rgba(226,184,92,.08),rgba(226,184,92,0) 70%),linear-gradient(180deg,#121417,#0B0C0E)}
.casa-veta-vista{display:grid;place-items:center}
.casa-veta-vista img{width:min(100%,280px);height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.casa-k{font:500 .75rem/1 var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--oro)}
.casa-veta-t h3{margin-top:12px;font:600 clamp(2rem,3.4vw,3rem)/1 var(--f);font-stretch:112%;letter-spacing:-.03em}
.casa-veta-t p:not(.casa-k){margin-top:14px;max-width:34ch;font-size:1.0625rem;line-height:1.5;color:var(--texto-2)}
.casa-veta-t .boton{margin-top:26px}
.casas6{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.c6{display:flex;flex-direction:column;gap:8px;padding:16px 16px 18px;border:1px solid rgba(237,237,232,.09);border-radius:16px;background:linear-gradient(180deg,#121417,#0B0C0E)}
.c6 h3{margin-top:8px;font:600 1.25rem/1.1 var(--f);font-stretch:110%;letter-spacing:-.01em}
.c6 p{font-size:.9375rem;line-height:1.5;color:var(--texto-2)}
.c6 .boton.sec{margin-top:auto;align-self:flex-start}
.c6-v{height:150px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden;
  background:radial-gradient(80% 90% at 50% 40%,rgba(18,62,63,.55),rgba(4,25,26,.9));box-shadow:inset 0 0 0 1px #123E3F}
.c6-k{font:500 .6875rem/1 var(--m);letter-spacing:.1em;text-transform:uppercase;color:#9FBDBA}
.c6-n{font:500 1.25rem/1 var(--m);color:#EAF3F2;letter-spacing:.02em}
.c6-ok{font-size:.8125rem;color:#9FE3C4}
.c6-placa{background:linear-gradient(180deg,#F4EDE0,#E6DCC8);box-shadow:inset 0 0 0 1px rgba(22,19,15,.12)}
.c6-placa .c6-k{color:#5C554B}.c6-placa .c6-n{color:#16130F}.c6-placa .c6-ok{color:#2F6B4F}
.c6-anillo{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(226,184,92,.6),0 0 0 6px rgba(226,184,92,.08)}
.c6-anillo i{font-style:normal;font-size:1.5rem;color:#9FE3C4}
.c6-monedas{display:flex;align-items:center}
.c6-monedas img{width:56px;height:56px;border-radius:50%;object-fit:contain}
.c6-monedas img + img{margin-left:-10px;width:auto;height:52px;border-radius:0;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.c6-chat{align-items:stretch;padding:0 18px}
.c6-b{max-width:80%;padding:8px 12px;border-radius:12px;font-size:.8125rem;line-height:1.35}
.c6-b.tu{align-self:flex-end;background:#123E3F;color:#EAF3F2;border-bottom-right-radius:4px}
.c6-b.pago{align-self:flex-start;background:rgba(159,227,196,.12);color:#9FE3C4;box-shadow:inset 0 0 0 1px rgba(159,227,196,.35)}
.c6-qr .qr{width:104px;height:104px;border-radius:6px}
.c6-libro{align-items:stretch;justify-content:center;gap:0;padding:0 22px}
.c6-libro span{display:grid;grid-template-columns:1fr 1fr;padding:9px 0;border-bottom:1px solid rgba(159,189,186,.2);font-size:.875rem;color:#EAF3F2}
.c6-libro b{font:500 .6875rem/1 var(--m);letter-spacing:.1em;text-transform:uppercase;color:#9FBDBA}
.c6-libro i{font-style:normal;text-align:left}
@media (max-width:1100px){ .casas6{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:899px){
  .casa-veta{grid-template-columns:1fr;text-align:left}
  .casa-veta-vista img{width:min(70%,220px)}
}
@media (max-width:560px){ .casas6{grid-template-columns:minmax(0,1fr)} }

/* AU-RA: el orbe de verdad (aura-orbe.js), junto a la invitación. */
.ayuda{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(20px,4vw,64px);padding:clamp(24px,4vw,56px)}
.ayuda-orbe{position:relative;aspect-ratio:1;width:100%;max-width:440px;justify-self:center}
.ayuda-t h2{margin-top:10px}
.ayuda-acciones{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.ayuda-acciones .boton{flex:none}
@media (max-width:899px){
  .ayuda{grid-template-columns:1fr;padding:24px}
  .ayuda-orbe{max-width:260px}
  .ayuda-acciones .boton{flex:none}
}

/* ORIGEN en 3D: la moneda de un gramo que se parte en 55 (la del sitio anterior). */
.origen3d{display:none}
.con3d .origen3d{display:block;position:relative;height:420vh}
.origen3d .escena{position:relative;top:0;height:100svh;overflow:hidden;
  background:radial-gradient(46% 42% at 50% 44%,rgba(217,180,95,.14),rgba(217,180,95,0) 70%)}
.origen3d canvas{position:absolute;inset:0;width:100%;height:100%}
.origen3d .escena::after{content:'';position:absolute;inset:auto 0 0;height:46%;pointer-events:none;
  background:linear-gradient(to top,rgba(8,9,10,.94),rgba(8,9,10,.6) 45%,rgba(8,9,10,0))}
.origen3d .frases,.origen3d .nota3d{z-index:1}
.origen3d .frases{position:absolute;left:var(--margen);right:var(--margen);bottom:clamp(64px,12vh,120px);height:7.5em;text-align:center}
.origen3d .frase{position:absolute;inset:auto 0 0;font:500 clamp(1.8rem,3.6vw,3.3rem)/1.12 var(--f);font-stretch:108%;letter-spacing:-.025em;color:var(--texto);
  text-shadow:0 2px 28px rgba(8,9,10,.9);opacity:0;transform:translateY(18px);transition:opacity .6s,transform .9s var(--sale)}
.origen3d .frase em{font-style:normal;color:var(--oro-2)}
.origen3d .frase.aqui{opacity:1;transform:none}
.origen3d .frase .dato{display:block;margin-top:14px;font:400 .875rem/1.3 var(--m);letter-spacing:.02em;color:var(--texto-2)}
.origen3d .frase .dato b{font-weight:400;color:var(--oro)}
.origen3d .nota3d{position:absolute;left:var(--margen);right:var(--margen);bottom:22px;text-align:center;font-size:.8125rem;color:var(--texto-2)}

/* ORIGEN: la cuenta en vivo junto al disco de 55 porciones; el tráiler junto al texto oficial. */
.cap.origen{text-align:left}
.origen .cap-cabeza,.origen .cap-bajada{margin-left:0;margin-right:0;text-align:left}
.origen-par{margin-top:44px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,80px)}
.cuenta{max-width:30rem;font-size:1rem;padding:8px 22px 18px;border-radius:16px;background:rgba(8,9,10,.82);box-shadow:inset 0 0 0 1px rgba(237,237,232,.1)}
.cuenta > div{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--linea)}
.cuenta .op{padding:8px 0;color:var(--texto-2);font-size:.875rem}
.cuenta .res{border-bottom:0;color:var(--oro-2);font-size:1.375rem}
.cuenta .ins-fuente{margin-top:12px;font-size:.8125rem}
.disco{width:100%;max-width:440px;justify-self:center;color:var(--oro);overflow:visible}
.disco text{font:500 13px var(--m);fill:var(--oro-2)}
.anima .disco .radios path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s cubic-bezier(.65,0,.35,1)}
.anima .disco .cuna{opacity:0;transform:translateY(18px);transition:opacity .8s 1.6s,transform 1.2s 1.6s var(--sale)}
.anima .disco .rotulo{opacity:0;transition:opacity .8s 2.2s}
.anima .disco.visto .radios path{stroke-dashoffset:0}
.anima .disco.visto .cuna{opacity:1;transform:none}
.anima .disco.visto .rotulo{opacity:1}
.origen-texto{margin-top:56px;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start;max-width:none}
.origen-trailer .pieza{max-width:300px;display:block;padding:0;border:0;background:none;overflow:visible}
.origen-trailer .marco-v{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#0B0C0E;box-shadow:inset 0 0 0 1px rgba(237,237,232,.1),0 30px 60px -30px rgba(0,0,0,.8)}
.origen-trailer video{width:100%;height:100%;object-fit:cover;display:block}
.origen-trailer .reproducir{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:18px;border:0;cursor:pointer;
  background:linear-gradient(to top,rgba(8,9,10,.94),rgba(8,9,10,0));color:var(--texto);font:600 .9375rem/1 var(--f);text-align:left}
.origen-trailer .reproducir[hidden]{display:none}
.origen-trailer .reproducir::before{content:'';width:42px;height:42px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,#F8E6B0,#D4A64F 60%,#B98B3C);box-shadow:0 0 0 1px #7A5718,0 8px 20px -8px rgba(226,184,92,.8)}
.origen-trailer .reproducir::after{content:'';position:absolute;left:35px;top:50%;transform:translateY(-50%);border-left:11px solid #1A1307;border-block:7px solid transparent}
.origen-trailer .reproducir .dato{margin-left:auto;font:400 .8125rem/1 var(--m);color:var(--texto-2)}
.origen-trailer figcaption{margin-top:10px;font-size:.8125rem;color:var(--texto-2)}
.origen-ficha{display:grid;gap:22px;align-content:start}
.origen-texto .monedas{grid-column:1 / -1;margin-top:8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.origen-texto .monedas > div{padding:16px;border-radius:14px;border:1px solid rgba(237,237,232,.09);background:rgba(11,12,14,.86)}
.origen-texto .monedas dt{display:flex;align-items:center;gap:10px;font:600 1rem/1 var(--f);letter-spacing:.04em}
.origen-texto .monedas dt img{width:36px;height:36px;object-fit:contain}
.origen-texto .monedas dd{margin:10px 0 0;font-size:.875rem;line-height:1.5;color:var(--texto-2)}
@media (max-width:1100px){ .origen-texto .monedas{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:899px){
  .origen-par{grid-template-columns:1fr}
  .origen-texto{grid-template-columns:1fr}
  .origen-trailer .pieza{max-width:260px;margin:0 auto}
  .origen-texto .monedas{grid-template-columns:1fr}
}
.cap.origen{padding-left:var(--margen);padding-right:var(--margen)}
.origen .cap-cabeza{padding:0;margin:0}
.origen .origen-texto{max-width:none;margin:56px 0 0;padding:0}
/* El orbe quieto (respaldo), siempre disponible aunque no se cargue aura-orbe.css. */
.ayuda-orbe .aura-orbe-respaldo{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.ayuda-orbe .aura-orbe-respaldo[hidden]{display:none}
.ayuda-orbe .aura-orbe-respaldo i{position:relative;width:62%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(248,239,207,.95) 0,rgba(234,215,156,.75) 22%,rgba(201,169,97,.32) 48%,rgba(62,217,160,.08) 72%,transparent 100%);
  box-shadow:0 0 80px 10px rgba(226,184,92,.12)}
.ayuda-orbe .aura-orbe-respaldo i::before,.ayuda-orbe .aura-orbe-respaldo i::after{content:'';position:absolute;top:27%;width:27%;height:44%;border-radius:48% 52% 46% 54%;
  background:radial-gradient(closest-side,rgba(255,250,232,.9),rgba(234,215,156,.35) 70%,transparent);box-shadow:0 0 18px rgba(234,215,156,.35)}
.ayuda-orbe .aura-orbe-respaldo i::before{left:21%}
.ayuda-orbe .aura-orbe-respaldo i::after{right:21%}
.anima .ayuda-orbe .aura-orbe-respaldo i{animation:orbe-respira 5s ease-in-out infinite}
@keyframes orbe-respira{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){ .ayuda-orbe .aura-orbe-respaldo i{animation:none} }
/* Un solo principal por pantalla:
   · la cabecera lleva un botón de canto dorado, sin relleno (el principal es el del héroe);
   · en el teléfono, con el muelle a la vista, los botones de los capítulos pasan a secundarios. */
.cab .boton,.cab nav a.boton{background:rgba(8,9,10,.4);color:var(--oro-2);box-shadow:inset 0 0 0 1px rgba(226,184,92,.7)}
.cab .boton::before{display:none}
.cab .boton:hover{background:rgba(226,184,92,.12);color:#fff;box-shadow:inset 0 0 0 1px var(--oro-2)}
@media (max-width:899px){
  .casa-veta-t .boton,.tec-acciones .boton,.ayuda-acciones .boton{min-height:44px;padding:0 2px;gap:10px;border-radius:0;color:var(--texto);font-weight:500;overflow:visible;
    background:linear-gradient(var(--oro),var(--oro)) left calc(100% - 9px) / 18px 1px no-repeat;box-shadow:none}
  .casa-veta-t .boton::before,.tec-acciones .boton::before,.ayuda-acciones .boton::before,
  .casa-veta-t .boton::after,.tec-acciones .boton::after,.ayuda-acciones .boton::after{display:none}
  .casa-veta-t .boton .flecha,.tec-acciones .boton .flecha,.ayuda-acciones .boton .flecha{width:auto;height:auto;background:none;box-shadow:none;color:var(--oro)}
}
/* El gigante con anillo, discreto detrás de los capítulos (presente al abrir y en el cierre). */
.universo:not([data-cap="envio"]):not([data-cap="cierre"]) .u-anillo{opacity:.4}

.con3d .origen3d .escena{position:sticky}
/* Contraste: los enlaces secundarios y los números de capítulo llevan sombra
   de lectura; el botón de AU-RA en el teléfono va sobre el fondo del bloque. */
.cap-num{text-shadow:0 0 12px rgba(8,9,10,.9)}
.red-ir{position:relative;z-index:1}
.red-ir .boton.sec,.ayuda-acciones .boton.sec{background-color:transparent}
.ayuda{background:linear-gradient(180deg,rgba(14,22,22,.92),rgba(8,9,10,.92))}
/* Los botones <button> sin el borde del navegador. */
.boton{border:0;-webkit-appearance:none;appearance:none}
/* Secundarios y números de capítulo: una sombra de lectura (un velo oscuro sin
   borde) para que un planeta que pase detrás no les reste contraste. */
.boton.sec{background-color:rgba(8,9,10,.62);padding:0 10px;margin-left:-10px;border-radius:8px;background-position:10px calc(100% - 9px)}
.boton.sec:hover{background-color:rgba(8,9,10,.62)}
@media (max-width:899px){
  .casa-veta-t .boton,.tec-acciones .boton,.ayuda-acciones .boton{background-color:rgba(8,9,10,.62);padding:0 10px;margin-left:-10px;border-radius:8px;background-position:10px calc(100% - 9px)}
}
.cap-num{display:inline-block;padding:2px 6px;margin-left:-6px;border-radius:4px;background:rgba(8,9,10,.62)}
.b-cine .b-recibo{font-size:max(10px,calc(var(--pw,260px) / 26))}

/* RONDA 6b · el universo nunca detrás del contenido: el planeta que toca una zona prohibida se apaga. */
.universo .u-tapa{opacity:.06!important;transition:opacity .45s ease!important}
.universo .u-planeta{transition:opacity .6s ease}
/* Veta al frente: el macro de la ranura de fondo y dos estados del equipo (enviar
   y el comprobante), el de adelante más grande y saliéndose del panel. */
.casa-veta{margin-top:72px;overflow:visible;padding-block:clamp(20px,3vw,40px)}
.casa-veta-vista{position:relative;min-height:440px;align-self:stretch;margin-block:calc(-1 * clamp(56px,6vw,96px)) -8px}
.cv-fondo{position:absolute;inset:12% -8% 6% -8%;width:116%;height:82%;object-fit:cover;border-radius:16px;opacity:.55;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 55%,#000 40%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 55%,#000 40%,transparent 100%)}
.cv-atras,.cv-frente{position:absolute;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.65))}
.cv-atras{width:min(42%,190px);left:6%;top:16%;transform:rotate(-7deg);opacity:.9}
.cv-frente{width:min(56%,270px);left:38%;top:0}
.casa-veta-vista img.cv-atras,.casa-veta-vista img.cv-frente{width:min(56%,270px)}
.casa-veta-vista img.cv-atras{width:min(42%,200px)}
.cv-rot{margin-top:18px}
@media (max-width:899px){
  .casa-veta{margin-top:56px}
  .casa-veta-vista{min-height:380px;margin-block:-48px 0}
  .cv-atras{left:4%;top:14%}
  .cv-frente{left:34%}
}
/* Secundarios: sin raya; texto y flecha de oro que se mueve al pasar. */
.boton.sec,.boton.sec:hover{background-image:none}
@media (max-width:899px){ .casa-veta-t .boton,.tec-acciones .boton,.ayuda-acciones .boton{background-image:none} }
/* Ritmo: capítulos más juntos y la escena de ORIGEN empieza encuadrada, sin hueco antes. */
.cap{padding-top:clamp(72px,8vw,120px)}
.con3d .origen3d{margin-top:-30vh;pointer-events:none;height:400vh}
.cap-nota{margin-bottom:0}
.casa-veta-t .cv-rot{font-size:.6875rem;line-height:1.45;max-width:46ch;color:rgba(237,237,232,.62)}
.b-vivo{contain:layout paint}
@media (max-width:899px){ .con3d .origen3d{margin-top:-12vh} }

/* SFSP: la placa del contrato. Las reglas del contrato de ONDK, en el papel del
   comprobante; se encienden una por una con el scroll. */
.tec-cap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:center}
.placa{margin:0;padding:clamp(18px,2.4vw,30px);border-radius:16px;background:linear-gradient(180deg,#F4EDE0,#E9DFCB);color:#16130F;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8),inset 0 0 0 1px rgba(22,19,15,.08);position:relative}
.placa::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:8px;
  background:radial-gradient(circle at 50% 0,#E9DFCB 4px,transparent 4.5px) 0 0/12px 8px repeat-x}
.placa-cab{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline;padding-bottom:14px;border-bottom:1px solid rgba(22,19,15,.16)}
.placa-k{font:500 .6875rem/1 var(--m);letter-spacing:.1em;text-transform:uppercase;color:#5C554B}
.placa-n{grid-row:2;font:500 clamp(1.4rem,2.2vw,1.9rem)/1 var(--m);letter-spacing:.01em}
.placa-m{grid-row:1 / span 2;grid-column:2;justify-self:end;display:flex;align-items:center;gap:8px;font-size:.8125rem;color:#5C554B;text-align:right}
.placa-m img{width:28px;height:28px;border-radius:50%}
.placa-reglas{list-style:none;margin:6px 0 0;padding:0}
.placa-reglas li{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;padding:14px 0;border-bottom:1px dashed rgba(22,19,15,.18);
  opacity:.32;transform:translateX(-6px);transition:opacity .5s ease,transform .6s var(--sale)}
.placa-reglas li.on,html:not(.anima) .placa-reglas li{opacity:1;transform:none}
.placa-reglas b{grid-column:2;font:600 1rem/1.2 var(--f);font-stretch:106%}
.placa-reglas span{grid-column:2;margin-top:3px;font-size:.9375rem;line-height:1.45;color:#3E3830}
.pr-ic{grid-row:1 / span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(22,19,15,.06);color:#7A5718}
.pr-ic svg{width:30px;height:auto;overflow:visible}
.pr-ic .pr-lleno{fill:#B98B3C;opacity:0;transition:opacity .5s .15s}
.pr-ic .pr-lleno-t{font:600 9px var(--m);fill:#B98B3C;opacity:0;transition:opacity .5s .15s}
.pr-ic .pr-arco{stroke-dasharray:15 100;stroke-dashoffset:15;transition:stroke-dashoffset 1s .1s ease}
li.on .pr-ic .pr-lleno,li.on .pr-ic .pr-lleno-t,html:not(.anima) .pr-ic .pr-lleno,html:not(.anima) .pr-ic .pr-lleno-t{opacity:1}
li.on .pr-ic .pr-arco,html:not(.anima) .pr-ic .pr-arco{stroke-dashoffset:0}
.placa-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-top:14px;font-size:.75rem;color:#5C554B}
.placa .boton.sec{color:#16130F;background-color:transparent;margin-left:0;padding:0}
.placa .boton.sec::after{color:#7A5718}
@media (max-width:899px){
  .tec-cap{grid-template-columns:1fr}
  .placa-m{grid-row:auto;grid-column:1 / -1;justify-self:start;text-align:left;margin-top:6px}
  .placa-reglas li{grid-template-columns:40px minmax(0,1fr);column-gap:12px}
  .pr-ic{width:40px;height:40px}
}
/* Compruébalo sin el macro del papel en blanco. */
.prueba{background:none}
/* El botón del tráiler se lee sobre cualquier cuadro del póster. */
.origen-trailer .reproducir{background:linear-gradient(to top,rgba(8,9,10,.97) 0,rgba(8,9,10,.9) 55%,rgba(8,9,10,0) 100%);padding-top:40px}
/* El disco del tráiler, de metal oscuro con el triángulo de oro (como la flecha del botón principal). */
.origen-trailer .reproducir::before{background:radial-gradient(circle at 35% 30%,#2B2416,#100D08 70%);box-shadow:inset 0 0 0 1px rgba(243,213,143,.55),0 8px 20px -8px rgba(0,0,0,.8)}
.origen-trailer .reproducir::after{border-left-color:#F3D58F}


/* Titulares anchos con su respaldo de la misma caja (ver arriba). */
.b-h1,.b-notas b,.cap h2,.cierre h2{font-family:var(--ft)}