/* =====================================================================
   SUSTENTACIÓN · v3 «tráiler de cine» (2-oct, noche)
   Escenario 16:9 de 1600 × 900 que se escala a la pantalla (contain).
   Cada diapositiva es un fotograma panorámico entre dos franjas negras
   (64 px): arriba el capítulo y quien expone con su minuto; abajo la
   película y el contador. Las fotos son las 20 escenas del proyecto.
   Tipografía: Archivo (Omnibus-Type), condensada en mayúsculas para
   títulos y cifras; normal para el texto; itálica para subtítulos.
   Un solo acento: el ámbar de la hora dorada. El azul Encanto, solo para
   la marca. Momento de autoría: al cambiar de expositor, una tarjeta de
   capítulo en negro. Sin JS todo se ve. Respeta prefers-reduced-motion.
   ===================================================================== */
:root{ --ink:#09090a; --barra:#030304; --paper:#f3eee5; --mu:rgba(243,238,229,.76); --fa:rgba(243,238,229,.52); --ln:rgba(243,238,229,.2);
  --amb:#e9a23b; --azul:#29abe2; --alto:#e2664a; --medio:#e9a23b; --bajo:#86b98f; --ease:cubic-bezier(.16,1,.3,1);
  --f:"Archivo", "Arial Narrow", system-ui, sans-serif; --su-top:68px; --su-ctl:66px; }
/* el menú y la cabecera del sitio también hablan en Archivo en esta página */
body.su{ --font-display:var(--f); --font-body:var(--f); font-family:var(--f); }
html.su-html, body.su{ background:var(--barra); }
body.su{ color:var(--paper); }
.su ::selection{ background:var(--amb); color:#160f02; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.su-main{ position:relative; height:100svh; min-height:520px; }
.sala{ position:absolute; left:0; right:0; top:var(--su-top); bottom:var(--su-ctl); overflow:hidden; }
.st{ position:absolute; left:50%; top:50%; width:1600px; height:900px; transform:translate(-50%,-50%) scale(var(--k,.5)); transform-origin:50% 50%;
  background:var(--ink); overflow:hidden; outline:none; font-family:var(--f); font-stretch:100%; color:var(--paper);
  box-shadow:0 50px 140px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.05); }
.st:focus-visible{ box-shadow:0 50px 140px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(233,162,59,.45); }
.su.is-full .st:focus-visible{ box-shadow:none; }
:where(.st) p{ max-width:none; color:inherit; margin:0; }   /* styles.css limita todo <p> a 65ch: dentro del escenario manda cada diseño */
:where(.st) h1, :where(.st) h2{ font-family:var(--f); color:var(--paper); }   /* styles.css pone Space Grotesk en los títulos */

/* ---------- el fotograma ---------- */
.sl{ position:absolute; inset:0; overflow:hidden; isolation:isolate; }
.su-js .sl{ opacity:0; visibility:hidden; transition:opacity .7s ease, visibility 0s linear .7s; }
.su-js .sl.is-on{ opacity:1; visibility:visible; transition:opacity .9s ease .05s, visibility 0s; z-index:2; }
.su-js .sl.is-sale{ opacity:0; visibility:visible; transition:opacity .6s ease; z-index:1; }
.su-js .sl [data-a]{ opacity:0; transform:translateY(22px); clip-path:inset(0 0 100% 0); transition:opacity .9s var(--ease), transform 1.1s var(--ease), clip-path 1.1s var(--ease); transition-delay:calc(var(--i, 0) * 90ms + 250ms); }
.su-js .sl.is-on [data-a]{ opacity:1; transform:none; clip-path:inset(-20% -10% -20% -10%); }
.su-js .sl:not(.is-on) [data-a]{ transition-delay:0s; }

.bar{ position:absolute; left:0; right:0; height:64px; z-index:9; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 44px;
  background:var(--barra); font:600 13px/1 var(--f); letter-spacing:.22em; text-transform:uppercase; color:var(--fa); }
.bar.is-top{ top:0; } .bar.is-bot{ bottom:0; }
.bar span{ display:flex; align-items:center; gap:14px; white-space:nowrap; }
.b-cap b{ font-stretch:62%; font-weight:900; font-size:22px; letter-spacing:.04em; color:var(--amb); }
.b-q i{ width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.b-q em{ font-style:normal; color:rgba(243,238,229,.36); letter-spacing:.14em; font-variant-numeric:tabular-nums; }
/* línea de tiempo: un tramo por diapositiva, del color de quien expone; se llena con el cronómetro */
.linea{ position:absolute; left:0; right:0; top:0; z-index:31; display:flex; gap:3px; height:5px; pointer-events:none; }
.linea i{ position:relative; display:block; height:100%; background:color-mix(in srgb, var(--c) 28%, rgba(0,0,0,.6)); overflow:hidden; }
.linea i b{ position:absolute; inset:0; background:var(--c); transform:scaleX(0); transform-origin:left; transition:transform .25s linear; }
.linea i.is-on{ box-shadow:inset 0 0 0 1px var(--c); }
.su.is-captura .linea{ display:none; }
.b-n{ color:var(--paper); font-variant-numeric:tabular-nums; } .b-n small{ color:var(--fa); font-size:13px; }
.b-logos{ gap:20px !important; } .b-logos i{ width:1px; height:30px; background:var(--ln); }
.b-v{ height:30px; width:auto; } .b-s{ height:46px; width:auto; }

.bg{ position:absolute; left:0; right:0; top:64px; bottom:64px; z-index:0; overflow:hidden; background:#000; }
.bg img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.06) contrast(1.05); }
.su-js .sl.is-on .bg.is-kb img{ animation:suKB 24s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes suKB{ from{ transform:scale(1.1); } to{ transform:scale(1.015) translate3d(-.8%, -.5%, 0); } }
.velo{ position:absolute; left:0; right:0; top:64px; bottom:64px; z-index:1; pointer-events:none; }
.velo.is-portada{ background:linear-gradient(90deg, rgba(9,9,10,.92) 0%, rgba(9,9,10,.6) 38%, rgba(9,9,10,.04) 72%), linear-gradient(0deg, rgba(9,9,10,.94) 0%, rgba(9,9,10,0) 55%); }
.velo.is-abajo{ background:linear-gradient(0deg, rgba(9,9,10,.97) 0%, rgba(9,9,10,.9) 44%, rgba(9,9,10,.4) 78%, rgba(9,9,10,.3) 100%); }
.velo.is-datos{ background:linear-gradient(90deg, rgba(9,9,10,.97) 0%, rgba(9,9,10,.94) 52%, rgba(9,9,10,.84) 80%, rgba(9,9,10,.72) 100%), linear-gradient(0deg, rgba(9,9,10,.6), transparent 40%); }
.velo.is-claro{ background:linear-gradient(90deg, rgba(9,9,10,.96) 0%, rgba(9,9,10,.86) 46%, rgba(9,9,10,.7) 70%, rgba(9,9,10,.5) 100%), linear-gradient(0deg, rgba(9,9,10,.7), transparent 45%); }
.velo.is-maria{ background:linear-gradient(90deg, rgba(9,9,10,.94) 0%, rgba(9,9,10,.74) 40%, rgba(9,9,10,.08) 72%), linear-gradient(0deg, rgba(9,9,10,.98) 0%, rgba(9,9,10,.9) 32%, rgba(9,9,10,0) 64%); }
.velo.is-cierre{ background:linear-gradient(90deg, rgba(9,9,10,.9) 0%, rgba(9,9,10,.66) 50%, rgba(9,9,10,.4) 100%), linear-gradient(0deg, rgba(9,9,10,.96) 0%, rgba(9,9,10,.2) 45%, rgba(9,9,10,.45) 100%); }
.grano{ position:absolute; left:0; right:0; top:64px; bottom:64px; z-index:3; pointer-events:none; background:url(../img/grano.png); opacity:.075; mix-blend-mode:overlay; }

.cu{ position:absolute; left:0; right:0; top:64px; bottom:64px; z-index:2; padding:48px 110px 44px; display:flex; flex-direction:column; }
.cu.is-abajo{ justify-content:flex-end; }
.h-xl{ margin:0; font-stretch:62%; font-weight:900; font-size:156px; line-height:.86; letter-spacing:-.004em; text-transform:uppercase; text-wrap:balance; }
.h-xl.is-md{ font-size:112px; line-height:.88; }
.h-l{ margin:0; font-stretch:62%; font-weight:800; font-size:70px; line-height:.92; letter-spacing:.002em; text-transform:uppercase; text-wrap:balance; max-width:1240px; }
.lead{ margin-top:14px !important; font-size:22px; line-height:1.45; color:var(--mu); max-width:1080px !important; }
.rot{ font:700 13px/1.3 var(--f); letter-spacing:.22em; text-transform:uppercase; color:var(--amb); margin:0 0 14px !important; }
.cred{ margin-top:14px !important; font-size:16px; line-height:1.5; color:var(--fa); }
.cred.is-pie{ margin-top:auto !important; padding-top:18px; border-top:1px solid var(--ln); }
.subt{ align-self:center; text-align:center; margin-top:36px !important; font-style:italic; font-weight:500; font-size:26px; line-height:1.38; color:var(--paper);
  max-width:1120px !important; text-wrap:balance; text-shadow:0 2px 14px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8); }
.cu:not(.is-abajo) > .subt{ margin-top:auto !important; }
.ic{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.dos{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; margin-top:34px; align-items:start; }
.br{ position:relative; display:block; height:6px; background:rgba(243,238,229,.12); overflow:hidden; }
.br i{ position:absolute; inset:0; background:var(--c, var(--paper)); transform-origin:left; transform:scaleX(var(--w)); }
.su-js .sl .br i{ transform:scaleX(0); transition:transform 1.5s var(--ease) .9s; }
.su-js .sl.is-on .br i{ transform:scaleX(var(--w)); }
.cod{ font-stretch:62%; font-weight:800; font-size:20px; letter-spacing:.06em; color:var(--amb); }

/* ---------- 1 · portada ---------- */
.pt{ justify-content:flex-end; padding-bottom:46px; }
.pt .h-xl{ max-width:none; }
.pt-sub{ margin-top:18px !important; font-size:30px; font-weight:400; color:var(--paper); }
.billing{ margin-top:38px; padding-top:22px; border-top:1px solid var(--ln); max-width:1060px; font-stretch:62%; text-transform:uppercase; }
.bl-a{ font-size:15px; font-weight:600; letter-spacing:.28em; color:var(--fa); }
.bl-n{ margin-top:6px !important; font-size:30px; font-weight:700; line-height:1.08; letter-spacing:.03em; color:var(--paper); }
.bl-n span{ white-space:nowrap; }
.bl-c{ margin-top:8px !important; font-size:15px; font-weight:600; letter-spacing:.2em; color:var(--fa); }

/* ---------- 2 · el reto: créditos ---------- */
.creditos{ list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:30px; }
.creditos li{ display:flex; flex-direction:column; gap:10px; padding-top:18px; border-top:1px solid rgba(243,238,229,.32); }
.creditos li.is-amb{ border-top-color:var(--amb); }
.cr-n{ font-stretch:62%; font-weight:900; font-size:84px; line-height:.9; font-variant-numeric:tabular-nums; }
.is-amb .cr-n{ color:var(--amb); }
.cr-l{ font-size:18px; line-height:1.38; color:var(--mu); }
.creditos.is-4{ grid-template-columns:repeat(4, minmax(0,1fr)); margin-top:34px; }
.creditos.is-4 .cr-n{ font-size:76px; }

/* ---------- 3 · competencia ---------- */
.cuenta{ list-style:none; margin:34px 0 0; padding:0; display:flex; align-items:flex-start; }
.cuenta > li:not(.cu-fl){ flex:none; width:196px; display:flex; flex-direction:column; gap:6px; }
.cu-fl{ flex:1; padding-top:44px; min-width:20px; }
.cu-fl i{ position:relative; display:block; height:1px; background:rgba(243,238,229,.35); margin:0 14px; }
.cu-fl i::after{ content:""; position:absolute; right:-1px; top:-4px; width:8px; height:8px; border-top:1px solid rgba(243,238,229,.6); border-right:1px solid rgba(243,238,229,.6); transform:rotate(45deg); }
.cu-n{ font-stretch:62%; font-weight:900; font-size:96px; line-height:.86; }
.cuenta > li > b{ font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--fa); margin-top:6px; }
.cu-p{ font-size:15px; line-height:1.4; color:var(--mu); }
.cuenta .is-fin .cu-n, .cuenta .is-fin > b{ color:var(--amb); }
.elegidas{ display:flex; justify-content:flex-end; gap:34px; margin-top:22px !important; font-size:17px; color:var(--mu); }
.elegidas b{ color:var(--paper); font-weight:700; margin-right:4px; }
.dos.is-cm{ margin-top:auto; gap:80px; }
.fz{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.fz li{ display:grid; grid-template-columns:150px minmax(0,1fr) 196px; gap:18px; align-items:center; font-size:17px; }
.fz b{ font-weight:600; } .fz em{ font-style:normal; color:var(--mu); }
.fz .br i{ background:var(--amb); }
.mpc{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.mpc li{ display:grid; grid-template-columns:190px minmax(0,1fr) 104px; gap:20px; align-items:center; font-size:19px; }
.mpc b{ font-weight:600; }
.mpc .br{ height:20px; }
.mpc .br i{ background:rgba(243,238,229,.78); }
.mpc .is-yo .br i{ background:var(--azul); }
.mp-v{ font-stretch:62%; font-weight:900; font-size:48px; line-height:1; text-align:right; font-variant-numeric:tabular-nums; }
.mpc .is-yo .mp-v, .mpc .is-yo b{ color:var(--azul); }

/* ---------- 4 · entorno ---------- */
.rot.is-esc{ margin-top:44px !important; }
.esc{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; }
.esc li{ padding:4px 34px 6px; border-left:1px solid var(--ln); }
.esc li:first-child{ padding-left:0; border-left:0; }
.esc b{ display:block; font-stretch:62%; font-weight:800; font-size:34px; text-transform:uppercase; letter-spacing:.01em; color:var(--paper); }
.esc li.is-base b{ color:var(--amb); }
.esc p{ margin-top:8px !important; font-size:19px; line-height:1.45; color:var(--mu); }
.macro{ list-style:none; margin:auto 0 0; padding:22px 0 0; border-top:1px solid var(--ln); display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:36px; }
.macro li{ display:flex; gap:16px; align-items:center; font-size:16px; line-height:1.4; color:var(--mu); }
.ma-n{ font-stretch:62%; font-weight:900; font-size:46px; color:var(--amb); white-space:nowrap; }

/* ---------- 5 · segmento ---------- */
.dos.is-seg{ grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); margin-top:0; gap:80px; height:100%; }
.dos.is-seg > div:first-child{ display:flex; flex-direction:column; height:100%; }
.embudo{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:4px; }
.embudo li{ width:calc(var(--w) * 100%); display:flex; align-items:baseline; gap:18px; padding:10px 0; border-top:1px solid rgba(243,238,229,.28); }
.fu-n{ font-stretch:62%; font-weight:800; font-size:40px; min-width:178px; font-variant-numeric:tabular-nums; }
.fu-l{ font-size:17px; color:var(--mu); line-height:1.3; }
.fu-l small{ display:block; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--fa); margin-top:3px; }
.seg-tot{ margin-top:auto !important; display:flex; align-items:flex-end; gap:22px; padding-top:18px; border-top:1px solid var(--amb); }
.seg-n{ font-stretch:62%; font-weight:900; font-size:150px; line-height:.8; color:var(--amb); font-variant-numeric:tabular-nums; }
.seg-l{ font-size:22px; line-height:1.3; padding-bottom:6px; }
.seg-l small{ display:block; font-size:16px; color:var(--fa); margin-top:6px; }
.seg-d{ display:flex; flex-direction:column; height:100%; padding-top:6px; }
.vars{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px 34px; }
.vars li{ padding-top:14px; border-top:1px solid var(--ln); }
.vars b{ display:block; font-stretch:62%; font-weight:800; font-size:26px; text-transform:uppercase; letter-spacing:.02em; color:var(--paper); }
.vars p{ margin-top:8px !important; font-size:17px; line-height:1.45; color:var(--mu); }
.conds{ margin-top:auto !important; display:flex; gap:14px; align-items:flex-start; padding-top:18px; border-top:1px solid var(--ln); font-stretch:62%; font-weight:800; font-size:24px; line-height:1.3; text-transform:uppercase; letter-spacing:.04em; color:var(--amb); }
.conds .ic{ font-size:26px; margin-top:2px; }

/* ---------- 6 · María ---------- */
.bg.is-maria img{ object-position:70% 40%; }
.ma{ justify-content:space-between; }
.ma-q{ max-width:820px; }
.ma .h-xl.is-md{ font-size:100px; }
.ma-e{ margin-top:22px; }
.ma-f{ margin-top:14px !important; font-size:18px; color:var(--mu); }
.cita{ margin:24px 0 0; padding:0; }
.cita p{ font-style:italic; font-weight:500; font-size:36px; line-height:1.18; color:var(--paper); text-wrap:balance; }
.cita p::first-letter{ color:var(--amb); }
.cita cite{ display:block; margin-top:12px; font-style:normal; font-size:13px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--fa); }
.emp{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:30px; }
.emp li{ padding-top:14px; border-top:1px solid rgba(243,238,229,.3); }
.emp b{ display:block; font-stretch:62%; font-weight:800; font-size:26px; text-transform:uppercase; letter-spacing:.02em; color:var(--amb); }
.emp p{ margin-top:8px !important; font-size:17px; line-height:1.45; color:var(--mu); }
.saldo{ margin-top:24px !important; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:22px; align-items:center; font-size:19px; color:var(--mu); }
.saldo .n{ font-stretch:62%; font-weight:900; font-size:40px; color:var(--paper); margin-right:4px; }
.saldo-b{ height:4px; background:var(--bajo); overflow:hidden; }
.saldo-b i{ display:block; height:100%; width:calc(var(--w) * 100%); background:var(--alto); }

/* ---------- 7 · correcciones ---------- */
.dos.is-corr{ grid-template-columns:440px minmax(0,1fr); margin-top:38px; }
.nota-g{ display:grid; gap:30px; }
.nota-g p{ display:flex; align-items:flex-end; gap:20px; }
.ng-n{ font-stretch:62%; font-weight:900; font-size:150px; line-height:.8; font-variant-numeric:tabular-nums; }
.ng-n small{ font-size:56px; color:var(--fa); }
.ng-n.is-amb{ color:var(--amb); }
.ng-l{ font-size:22px; line-height:1.25; padding-bottom:4px; }
.ng-l small{ display:block; font-size:15px; color:var(--fa); margin-top:6px; }
.checks{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ln); }
.checks li{ display:flex; align-items:center; gap:20px; padding:19px 0; border-bottom:1px solid var(--ln); font-size:25px; line-height:1.3; }
.checks .ic{ font-size:30px; color:var(--amb); stroke-width:2.4; }

/* ---------- 8 · diagnóstico ---------- */
.dos.is-dg{ grid-template-columns:420px minmax(0,1fr); gap:64px; margin-top:30px; align-items:center; }
.pe-c{ margin:0; }
.pe{ display:block; width:100%; height:auto; overflow:visible; }
.pe-ej{ stroke:rgba(243,238,229,.36); stroke-width:1.5; fill:none; }
.pe-m{ stroke:rgba(243,238,229,.14); fill:none; }
.pe text{ font:700 15px var(--f); letter-spacing:.16em; fill:var(--mu); }
.pe text.is-v{ fill:var(--amb); }
.pe-tr{ fill:none; stroke:var(--amb); stroke-width:2; stroke-dasharray:5 6; }
.pe-a{ fill:none; stroke:rgba(243,238,229,.55); stroke-width:1.5; stroke-dasharray:3 4; }
.pe-p circle{ fill:var(--amb); stroke:var(--ink); stroke-width:3; }
.pe-p{ transform:translateX(var(--dx)); }
.su-js .sl .pe-p{ transition:transform 1.8s var(--ease) 1.4s; }
.su-js .sl:not(.is-on) .pe-p{ transform:none; transition:none; }
.pe-c figcaption{ margin-top:14px; font-size:16px; line-height:1.5; color:var(--mu); }
.pe-c figcaption b{ color:var(--paper); }
.dg{ list-style:none; margin:0; padding:0; border-top:1px solid var(--ln); }
.dg li{ display:grid; grid-template-columns:180px minmax(0,1fr); grid-template-rows:auto auto; column-gap:24px; padding:16px 0; border-bottom:1px solid var(--ln); }
.dg small{ grid-row:1 / 3; font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--fa); padding-top:10px; }
.dg b{ font-stretch:62%; font-weight:800; font-size:40px; line-height:1; text-transform:uppercase; color:var(--amb); }
.dg p{ margin-top:6px !important; font-size:17px; line-height:1.45; color:var(--mu); }
.rot.is-me{ margin-top:auto !important; padding-top:20px; }
.macros{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:30px; }
.macros li{ padding-top:12px; border-top:1px solid rgba(243,238,229,.3); display:flex; flex-direction:column; gap:6px; }
.macros span{ font-stretch:62%; font-weight:900; font-size:24px; color:var(--amb); }
.macros b{ font-size:19px; font-weight:600; line-height:1.3; }

/* ---------- 9 · objetivos ---------- */
.cita.is-mega{ margin-top:26px; max-width:1260px; }
.cita.is-mega p{ font-size:28px; line-height:1.38; }
.gen{ margin-top:34px !important; display:flex; align-items:center; gap:24px; }
.gen-n{ font-stretch:62%; font-weight:900; font-size:124px; line-height:.85; font-variant-numeric:tabular-nums; }
.gen-n.is-amb{ color:var(--amb); }
.gen .ic{ font-size:60px; color:var(--amb); stroke-width:1.6; }
.gen-l{ margin-left:16px; font-size:21px; line-height:1.4; max-width:620px; }
.gen-l small{ display:block; margin-top:8px; font-size:15px; color:var(--fa); }
.hitos{ list-style:none; margin:auto 0 0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); position:relative; }
.hitos::before{ content:""; position:absolute; left:0; right:0; top:58px; height:1px; background:rgba(243,238,229,.32); }
.hitos li{ display:flex; flex-direction:column; gap:12px; padding-right:24px; position:relative; }
.hitos b{ font-stretch:62%; font-weight:900; font-size:38px; text-transform:uppercase; color:var(--amb); line-height:1; height:40px; }
.hitos i{ width:11px; height:11px; border-radius:50%; background:var(--amb); box-shadow:0 0 0 5px rgba(233,162,59,.18); margin-top:3px; }
.hitos span{ font-size:17px; line-height:1.42; color:var(--mu); }

/* ---------- 10 · riesgos ---------- */
.dos.is-r{ grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); align-items:center; margin-top:30px; gap:72px; }
.rb + .rb{ margin-top:22px; }
.rb p{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px !important; }
.rb p b{ font-stretch:62%; font-weight:800; font-size:24px; text-transform:uppercase; letter-spacing:.03em; }
.rb p em{ font-style:normal; font-size:16px; color:var(--mu); }
.rb > span{ display:flex; height:28px; gap:3px; }
.rb i{ flex:var(--w) 0 0; min-width:0; }
.rb i.is-a{ background:var(--alto); } .rb i.is-m{ background:var(--medio); } .rb i.is-b{ background:var(--bajo); }
.expo{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 18px; }
.ex-n{ font-stretch:62%; font-weight:900; font-size:116px; line-height:.85; font-variant-numeric:tabular-nums; }
.ex-n.is-amb{ color:var(--amb); }
.expo .ic{ font-size:46px; color:var(--amb); stroke-width:1.6; }
.ex-l{ flex-basis:100%; font-size:20px; margin-top:6px; }
.ex-l small{ display:block; font-size:15px; color:var(--fa); margin-top:4px; }
.rot.is-tres{ margin-top:auto !important; }
.tres{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:34px; }
.tres li{ padding-top:14px; border-top:1px solid rgba(243,238,229,.3); display:flex; flex-direction:column; gap:7px; }
.tres b{ font-size:21px; line-height:1.25; font-weight:700; }
.tres p{ font-size:16px; line-height:1.45; color:var(--mu); }
.tres small{ font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--fa); }

/* ---------- 11 · indicadores ---------- */
.dos.is-in{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; margin-top:30px; flex:1; }
.in-i{ padding-right:56px; display:flex; flex-direction:column; gap:24px; }
.in-tot{ display:flex; align-items:flex-end; gap:22px; }
.in-n{ font-stretch:62%; font-weight:900; font-size:190px; line-height:.78; color:var(--amb); }
.in-l{ font-size:24px; line-height:1.3; padding-bottom:6px; }
.in-l small{ display:block; font-size:15px; color:var(--fa); margin-top:6px; }
.in-r, .in-p{ padding-top:14px; border-top:1px solid var(--ln); font-size:22px; color:var(--mu); line-height:1.5; }
.in-r span, .in-p span{ display:block; font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--fa); margin-bottom:6px; }
.in-r b{ font-stretch:62%; font-weight:900; font-size:32px; color:var(--paper); }
.in-p{ font-size:17px; }
.in-d{ padding-left:56px; border-left:1px solid var(--ln); }
.in-id{ display:flex; align-items:baseline; gap:14px; }
.in-id b{ font-stretch:62%; font-weight:800; font-size:34px; text-transform:uppercase; line-height:1.05; }
.in-t{ margin-top:6px !important; font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--fa); }
.gauge{ width:380px; margin:18px 0 0; }
.gauge svg{ display:block; width:100%; height:auto; overflow:visible; }
.gauge path.g-c, .gauge path.g-n, .gauge path.g-s{ fill:none; stroke-width:16; }
.g-c{ stroke:var(--alto); } .g-n{ stroke:var(--medio); } .g-s{ stroke:var(--bajo); }
.aguja path{ stroke:var(--paper); stroke-width:4; stroke-linecap:round; }
.aguja circle{ fill:var(--paper); }
.aguja{ transform-origin:200px 205px; transform:rotate(55deg); }
.su-js .sl .aguja{ transform:rotate(-82deg); transition:transform 2.2s var(--ease) .9s; }
.su-js .sl.is-on .aguja{ transform:rotate(55deg); }
.g-l{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:10px; text-align:center; }
.g-l span{ display:flex; flex-direction:column; gap:2px; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--fa); }
.g-l b{ font-stretch:62%; font-weight:900; font-size:30px; letter-spacing:0; }
.g-l .is-c b{ color:var(--alto); } .g-l .is-n b{ color:var(--medio); } .g-l .is-s b{ color:var(--bajo); }
.hv{ margin:22px 0 0; display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px 18px; font-size:17px; }
.hv dt{ font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--fa); padding-top:4px; }
.hv dd{ margin:0; line-height:1.45; color:var(--mu); }

/* ---------- 12 · la máquina ---------- */
.mq-z{ position:absolute; left:0; right:0; top:64px; bottom:64px; z-index:0; background:radial-gradient(120% 90% at 50% 8%, #3b3f44 0%, #24272a 44%, #121314 100%); }
.mq-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.mq-velo{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 60% at 0% 100%, rgba(9,9,10,.92) 0%, rgba(9,9,10,.55) 45%, rgba(9,9,10,0) 75%); }
.cu.mq-t{ top:auto; pointer-events:none; padding-top:0; max-width:900px; }
.mq-t .h-l{ font-size:64px; }
.mq-t .lead{ font-size:20px; }
.mq-pie{ position:absolute; z-index:4; right:44px; top:84px; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--fa); pointer-events:none; }
.is-maquina .grano{ opacity:.04; }

/* ---------- 13 · los cinco afiches ---------- */
.cu.af{ background:radial-gradient(70% 60% at 50% 100%, rgba(233,162,59,.1), transparent 70%); }
.afiches{ list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:18px; flex:1; min-height:0; }
.afiches li{ min-height:0; }
.afiches a{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; height:100%; overflow:hidden; border-radius:3px; color:var(--paper); text-decoration:none; background:#000;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(243,238,229,.1); transition:box-shadow .4s var(--ease), transform .5s var(--ease); }
.afiches img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; transition:transform 1.2s var(--ease); }
.afiches a::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,5,6,.97) 0%, rgba(5,5,6,.82) 30%, rgba(5,5,6,.1) 62%, rgba(5,5,6,.35) 100%); }
.afiches a:hover, .afiches a:focus-visible{ transform:translateY(-6px); box-shadow:0 40px 70px -30px rgba(0,0,0,.95), 0 0 0 1px var(--c); outline:none; }
.afiches a:hover img{ transform:scale(1.05); }
.afiches a:has(.is-logo){ background:radial-gradient(90% 70% at 50% 30%, #4ea0de 0%, #1d5f9e 55%, #0b2440 100%); }
.afiches img.is-logo{ inset:7% 6% auto; width:88%; height:auto; object-fit:contain; filter:drop-shadow(0 18px 28px rgba(0,0,0,.45)); }
.afiches a > span{ position:relative; z-index:1; }
.af-e{ position:absolute !important; top:14px; left:14px; padding:4px 9px 3px; background:rgba(5,5,6,.82); font-stretch:62%; font-weight:900; font-size:20px; letter-spacing:.06em; color:var(--c); }
.af-t{ display:flex; flex-direction:column; gap:8px; padding:0 18px; }
.af-t b{ font-stretch:62%; font-weight:900; font-size:36px; line-height:.92; text-transform:uppercase; }
.af-t em{ font-size:15px; line-height:1.35; color:var(--mu); }
.af-b{ display:flex; flex-direction:column; gap:8px; margin:16px 18px 18px; padding-top:12px; border-top:1px solid rgba(243,238,229,.25); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--fa); }
.af-a{ display:flex; align-items:center; gap:8px; color:var(--c); letter-spacing:.12em; }

/* ---------- 14 · inversión ---------- */
.dos.is-inv{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:80px; margin-top:30px; }
.iv-big, .um-big{ display:flex; align-items:flex-end; gap:20px; }
.iv-n, .um-n{ font-stretch:62%; font-weight:900; font-size:176px; line-height:.78; font-variant-numeric:tabular-nums; }
.um-n{ color:var(--amb); }
.iv-l{ font-size:22px; line-height:1.3; padding-bottom:8px; }
.inv{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px; }
.inv li{ display:grid; grid-template-columns:240px minmax(0,1fr) 128px; gap:18px; align-items:center; font-size:17px; }
.inv b{ font-weight:600; } .inv em{ font-style:normal; color:var(--mu); text-align:right; font-variant-numeric:tabular-nums; }
.um{ padding-left:56px; border-left:1px solid var(--ln); }
.ecu{ margin-top:26px !important; font-size:18px; line-height:1.6; color:var(--mu); }
.ecu b{ color:var(--paper); font-weight:700; }
.ecu i{ font-style:normal; color:var(--amb); font-weight:700; margin:0 4px; }

/* ---------- 15 · cierre: créditos finales ---------- */
.dos.is-ci{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:80px; margin-top:0; }
.lunes{ list-style:none; margin:26px 0 0; padding:0; counter-reset:l; display:grid; gap:6px; }
.lunes li{ counter-increment:l; display:flex; align-items:baseline; gap:18px; font-stretch:62%; font-weight:800; font-size:36px; line-height:1.12; text-transform:uppercase; letter-spacing:.01em; }
.lunes li::before{ content:counter(l); font-size:20px; color:var(--amb); width:18px; flex:none; }
.pregs{ list-style:none; margin:0; padding:0; counter-reset:p; border-top:1px solid var(--ln); }
.pregs li{ counter-increment:p; display:flex; gap:16px; padding:15px 0; border-bottom:1px solid var(--ln); font-size:19px; line-height:1.45; }
.pregs li::before{ content:counter(p); font-stretch:62%; font-weight:900; font-size:24px; color:var(--amb); flex:none; width:16px; }
.ci-band{ margin-top:auto; padding-top:26px; border-top:1px solid var(--ln); display:flex; align-items:center; gap:30px; }
.ci-sello{ width:auto; height:118px; flex:none; filter:drop-shadow(0 18px 26px rgba(0,0,0,.7)); }
.ci-f{ display:flex; flex-direction:column; gap:6px; }
.ci-f span{ font-stretch:62%; font-weight:900; font-size:58px; line-height:.95; text-transform:uppercase; }
.ci-f em{ font-weight:500; font-size:26px; color:var(--amb); }
.ci-g{ margin-left:auto !important; display:flex; flex-direction:column; align-items:flex-end; gap:8px; font-stretch:62%; font-weight:900; font-size:56px; line-height:1; text-transform:uppercase; letter-spacing:.24em; }
.ci-g small{ font-stretch:100%; font-weight:500; font-size:15px; letter-spacing:.16em; color:var(--fa); }

/* ---------- la tarjeta de capítulo: cambio de quien expone ---------- */
.capitulo{ position:absolute; inset:0; z-index:30; display:grid; place-content:center; justify-items:center; gap:10px; text-align:center; background:var(--barra);
  opacity:0; visibility:hidden; pointer-events:none; }
.capitulo .ca-r{ font-stretch:62%; font-weight:900; font-size:30px; letter-spacing:.5em; text-transform:uppercase; padding-left:.5em; color:var(--amb); }
.capitulo .ca-t{ font-stretch:62%; font-weight:900; font-size:120px; line-height:.9; text-transform:uppercase; max-width:1300px; text-wrap:balance; }
.capitulo .ca-q{ display:flex; align-items:center; gap:14px; margin-top:14px; font-size:16px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--mu); }
.capitulo .ca-q i{ width:44px; height:1px; background:var(--qc, var(--amb)); }
.capitulo.is-va{ visibility:visible; animation:suCap 1.9s cubic-bezier(.65,0,.35,1) both; }
.capitulo.is-va .ca-t{ animation:suCapT 1.9s var(--ease) both; }
@keyframes suCap{ 0%{ opacity:0; } 18%{ opacity:1; } 74%{ opacity:1; } 100%{ opacity:0; } }
@keyframes suCapT{ 0%{ opacity:0; letter-spacing:.06em; filter:blur(6px); } 30%{ opacity:1; letter-spacing:0; filter:none; } 100%{ opacity:1; letter-spacing:-.005em; } }

/* ---------- controles ---------- */
.ctl{ position:fixed; left:0; right:0; bottom:0; height:var(--su-ctl); z-index:30; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto; align-items:center; gap:18px; padding:0 18px;
  background:rgba(3,3,4,.94); border-top:1px solid rgba(243,238,229,.08); font-family:var(--f); transition:transform .4s var(--ease), opacity .4s; }
.ctl-q{ display:flex; align-items:center; gap:12px; min-width:0; }
.ctl-q img{ width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:50% 15%; background:#111; box-shadow:0 0 0 2px var(--qc, var(--amb)); }
.ctl-q div{ min-width:0; display:flex; flex-direction:column; }
.ctl-q b{ font-stretch:75%; font-weight:700; font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--paper); }
.ctl-q span{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fa); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ctl-pr{ position:relative; display:flex; gap:4px; height:22px; align-items:center; }
.pr-s{ height:100%; padding:0; border:0; background:none; cursor:pointer; display:flex; align-items:center; }
.pr-s i{ display:block; width:100%; height:6px; background:rgba(243,238,229,.16); transform:scaleY(.5); transition:transform .2s, background .2s; }
.pr-s.is-on i{ background:var(--amb); }
.pr-s:hover i{ transform:none; background:var(--paper); }
.pr-m{ position:absolute; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; background:var(--paper); box-shadow:0 0 0 4px rgba(243,238,229,.16); left:0; transition:left .6s var(--ease); pointer-events:none; }
.ctl-bt{ display:flex; justify-content:flex-end; align-items:center; gap:4px; }
.ctl-bt button{ display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 12px; border:0; border-radius:8px; background:none; color:var(--mu); font:600 .78rem var(--f); letter-spacing:.12em; text-transform:uppercase; cursor:pointer; white-space:nowrap; }
.ctl-bt button:hover{ background:rgba(243,238,229,.08); color:var(--paper); }
.ctl-bt button[aria-pressed="true"]{ background:rgba(233,162,59,.16); color:var(--paper); }
.ctl-bt button:focus-visible{ outline:2px solid var(--amb); outline-offset:2px; }
.ctl-bt .ic{ width:18px; height:18px; }
.ctl-n{ min-width:62px; text-align:center; font:700 .9rem var(--f); color:var(--paper); font-variant-numeric:tabular-nums; }
/* el botón de comentarios del sitio sube por encima de la barra, compacto (se abre al pasar) */
.su .fab-comment{ bottom:calc(var(--su-ctl) + 14px); padding:10px; gap:0; }
.su .fab-comment span{ display:inline-block; max-width:0; overflow:hidden; white-space:nowrap; opacity:0; transition:max-width .35s var(--ease), opacity .25s, margin .35s var(--ease); }
.su .fab-comment:hover span, .su .fab-comment:focus-visible span{ max-width:120px; opacity:1; margin-left:8px; }

.vista header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.vista header b{ font-stretch:75%; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.vista header button{ width:34px; height:34px; border:0; border-radius:50%; background:rgba(243,238,229,.08); color:var(--paper); cursor:pointer; display:grid; place-items:center; }
.vista{ position:fixed; inset:var(--su-top) 0 var(--su-ctl) 0; z-index:56; overflow:auto; padding:24px clamp(16px, 4vw, 48px); background:rgba(3,3,4,.97); font-family:var(--f); }
.vista ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.vista button{ width:100%; min-height:96px; text-align:left; padding:14px 16px; border-radius:6px; border:1px solid rgba(243,238,229,.1); border-top:2px solid var(--c); background:rgba(243,238,229,.03); color:var(--paper); cursor:pointer; display:flex; flex-direction:column; gap:6px; font:inherit; }
.vista button:hover, .vista button[aria-current="true"]{ background:rgba(243,238,229,.08); }
.vista button small{ font-size:.72rem; color:var(--c); font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.vista button span{ font-size:.95rem; line-height:1.35; }
.girar{ display:none; }
.su-info{ background:var(--barra); border-top:1px solid rgba(243,238,229,.06); padding:48px clamp(16px, 5vw, 48px) 64px; font-family:var(--f); }
.su-info-in{ max-width:1100px; margin:0 auto; color:var(--mu); }
.su-info-t{ margin:0 0 14px; font-weight:700; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--amb); }
.su-info ul{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; gap:10px 24px; }
.su-info kbd{ display:inline-block; min-width:26px; padding:2px 8px; border-radius:4px; border:1px solid rgba(243,238,229,.2); background:rgba(243,238,229,.06); font:700 .82rem var(--f); color:var(--paper); text-align:center; }
.su-info a{ color:var(--amb); text-underline-offset:3px; }

/* proyección a pantalla completa: sin cabecera; los controles se esconden si el cursor descansa */
.su.is-full .site-header, .su.is-full .fab-comment{ display:none; }
.su.is-full .sala{ top:0; bottom:0; }
.su.is-full .st{ box-shadow:none; }
.su.is-full.is-quieto .ctl{ transform:translateY(100%); opacity:0; }
.su.is-captura .site-header, .su.is-captura .ctl, .su.is-captura .su-info, .su.is-captura .girar, .su.is-captura .fab-comment{ display:none !important; }
.su.is-captura .sala{ top:0; bottom:0; }
.su.is-captura .st{ box-shadow:none; }

@media (max-width:900px){
  .ctl{ grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto; height:auto; padding:8px 12px 10px; gap:6px 10px; }
  .ctl-pr{ grid-column:1 / -1; grid-row:1; }
  .ctl-bt button span:not(.ctl-n){ display:none; }
  .ctl-bt button span#reloj{ display:inline; }
  :root{ --su-ctl:96px; }
}
@media (max-width:560px){
  .ctl-q div{ display:none; }
  .ctl-bt{ gap:0; }
  .ctl-bt button{ padding:0 8px; }
  .ctl-n{ min-width:50px; }
}
@media (max-width:900px) and (orientation:portrait){
  .girar{ display:block; position:absolute; left:16px; right:16px; top:calc(var(--su-top) + 10px); margin:0; text-align:center; font-size:.85rem; color:var(--fa); }
}
@media (prefers-reduced-motion:reduce){
  .su-js .sl, .su-js .sl.is-on, .su-js .sl.is-sale, .su-js .sl [data-a], .su-js .sl .br i, .pe-p, .aguja, .afiches a, .afiches img{ transition:none !important; animation:none !important; }
  .su-js .sl.is-on .bg.is-kb img{ animation:none; }
  .su-js .sl:not(.is-on) .pe-p{ transform:translateX(var(--dx)); }
  .capitulo{ display:none; }
}