/* ------------------------------------------------------------------
Línea gráfica Disrupt by Treid
fondo #080808 · texto #F0F0EF · superficie #0F0F0F · borde blanco 6%
radius 0 · display Bebas Neue · texto Barlow · rótulos Barlow Condensed
Monocromo por definición: el único color del deck viene de las piezas.
------------------------------------------------------------------ */
:root{
--fondo:#080808;
--superficie:#0f0f0f;
--tinta:#f0f0ef;
--mudo:#666666;
--tenue:#9a9a98;
--borde:rgba(255,255,255,.06);
--borde-fuerte:rgba(255,255,255,.16);
/* OFICIAL: blanco, negro y gris. El gris ES el acento de Disrupt.
Los colores de la paleta power son excepción y se declaran a mano
con . Ver el bloque ACENTO más abajo. */
--acento:var(--tinta);
--acento-tenue:rgba(255,255,255,.10);
--acento-gris:#9a9a98;
--disp:"Bebas Neue","Arial Narrow",sans-serif;
--cond:"Barlow Condensed","Arial Narrow",sans-serif;
--texto:"Barlow",-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html,body{height:100%;background:var(--fondo);color:var(--tinta);
font-family:var(--texto);-webkit-font-smoothing:antialiased;overflow:hidden}
#deck{position:relative;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}
.slide{
container-type:size;
position:absolute;width:min(100vw, calc(100vh * 16 / 9));height:min(100vh, calc(100vw * 9 / 16));
background:var(--fondo);display:none;flex-direction:column;
padding:4.4cqmin 5.2cqmin 7.6cqmin;overflow:hidden;
}
.slide.on{display:flex}
/* ---------- tipografía Disrupt ---------- */
.rotulo{font-family:var(--cond);font-size:1.4cqmin;letter-spacing:.3em;text-transform:uppercase;
color:var(--mudo);font-weight:600}
h1,h2{font-family:var(--disp);font-weight:400;letter-spacing:.012em;line-height:.92}
h1{font-size:9.6cqmin}
h2{font-size:5.6cqmin;max-width:26ch}
.lead{font-size:1.95cqmin;line-height:1.52;color:var(--tenue);max-width:50ch;font-weight:400}
.lead strong{font-weight:600;color:var(--tinta)}
.big{font-family:var(--disp);font-size:21cqmin;line-height:.8;font-weight:400;letter-spacing:-.01em}
.head{margin-bottom:3.4cqmin;flex:0 0 auto}
.head .rotulo{margin-bottom:1.6cqmin;display:block}
.body{flex:1 1 auto;display:flex;gap:4.4cqmin;min-height:0}
.col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1.9cqmin}
.foot{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;
padding-top:1.9cqmin;margin-top:2cqmin;border-top:1px solid var(--borde);
font-family:var(--cond);font-size:1.25cqmin;color:#4a4a48;letter-spacing:.14em;text-transform:uppercase}
.foot img{height:1.5cqmin;width:auto;opacity:.5}
/* ---------- portada ---------- */
.cover{padding:0;position:relative;justify-content:flex-end}
.cover img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:.72}
.cover .veil{position:absolute;inset:0;
background:linear-gradient(80deg, rgba(8,8,8,.97) 24%, rgba(8,8,8,.62) 58%, rgba(8,8,8,.15) 100%)}
.cover .marca{position:absolute;top:5cqmin;left:6cqmin}
.cover .marca img{height:3cqmin;width:auto}
.cover .inner{position:relative;padding:0 6cqmin 8.4cqmin;max-width:76%}
.cover h1{font-size:11.5cqmin;margin:2.2cqmin 0 3.2cqmin}
/* titular de dos líneas con un año gigante al costado: el año se dimensiona
para que su altura de mayúscula cubra desde el tope de la línea 1 hasta la
base de la línea 2 */
.cover .tit-anio{display:flex;align-items:flex-end;gap:3.4cqmin;
margin:2.2cqmin 0 3.2cqmin}
.cover .tit-anio h1{margin:0;flex:0 0 auto}
.cover .tit-anio .anio{font-family:var(--disp);font-weight:400;font-size:26.5cqmin;
line-height:.72;color:var(--tinta);opacity:.26;letter-spacing:-.01em;
flex:0 0 auto;position:relative;top:-.012em}
.cover .sub{font-family:var(--cond);font-size:1.85cqmin;color:var(--tenue);font-weight:500;
letter-spacing:.16em;text-transform:uppercase}
/* ---------- tablas ---------- */
table{width:100%;border-collapse:collapse;font-size:1.85cqmin}
th{font-family:var(--cond);text-align:left;font-size:1.2cqmin;letter-spacing:.22em;text-transform:uppercase;
color:var(--mudo);font-weight:600;padding:0 0 1.3cqmin;border-bottom:1px solid var(--borde-fuerte)}
td{padding:1.5cqmin 0;border-bottom:1px solid var(--borde);vertical-align:top;color:var(--tenue)}
td:first-child{color:var(--tinta);font-weight:500;padding-right:2.4cqmin}
tr.destacada td{color:var(--tinta);font-weight:600}
tr.destacada td.num:last-child{font-family:var(--disp);font-size:3cqmin;line-height:.9;font-weight:400}
.nuestro{color:var(--tinta);font-weight:600}
.suyo{color:#5a5a58}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* ---------- imágenes ---------- */
.par{display:flex;gap:2.6cqmin;align-items:stretch;height:100%}
.par figure{flex:1;min-width:0;display:flex;flex-direction:column;gap:1cqmin}
.par img{width:100%;flex:1;min-height:0;object-fit:cover;object-position:center;
border:1px solid var(--borde)}
figcaption{font-family:var(--cond);font-size:1.2cqmin;color:var(--mudo);letter-spacing:.16em;
text-transform:uppercase;font-weight:500}
.rejilla{display:grid;grid-template-columns:repeat(5,1fr);gap:1.3cqmin;height:100%}
.rejilla figure{display:flex;flex-direction:column;gap:.85cqmin;min-height:0}
.rejilla img{width:100%;flex:1;min-height:0;object-fit:cover;border:1px solid var(--borde)}
.rejilla figcaption{font-family:var(--disp);font-size:1.9cqmin;letter-spacing:.04em;
text-transform:none;color:var(--tinta);font-weight:400;line-height:1}
.rejilla figcaption span{display:block;font-family:var(--cond);font-size:1.15cqmin;color:var(--mudo);
font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-top:.5cqmin}
/* ---------- fichas de dato ---------- */
.fichas{display:flex;gap:2.2cqmin}
.ficha{flex:1;border-top:1px solid var(--borde-fuerte);padding-top:1.5cqmin}
.ficha .n{font-family:var(--disp);font-size:4.6cqmin;line-height:.86;color:var(--tinta);font-weight:400}
.ficha .t{font-family:var(--cond);font-size:1.3cqmin;letter-spacing:.16em;text-transform:uppercase;
color:var(--tinta);font-weight:600;margin:.8cqmin 0 .5cqmin}
.ficha .d{font-size:1.45cqmin;color:var(--mudo);line-height:1.35}
/* ---------- bandas ---------- */
.bandas{display:flex;flex-direction:column;gap:1.1cqmin;justify-content:center;height:100%}
.banda{padding:1.9cqmin 2.4cqmin;border-left:2px solid var(--tinta);background:var(--superficie)}
.banda.b2{border-left-color:#4a4a48;background:rgba(255,255,255,.014)}
.banda.b3{border-left-color:#262624;background:transparent}
.banda .r{font-family:var(--cond);font-size:1.2cqmin;letter-spacing:.2em;text-transform:uppercase;
color:var(--mudo);font-weight:600}
.banda .k{font-size:1.8cqmin;margin-top:.7cqmin;color:var(--tenue);line-height:1.45}
.banda.b1 .k{color:var(--tinta)}
.banda.b1 .r{color:var(--tinta)}
/* ---------- preguntas ---------- */
ol.preg{list-style:none;counter-reset:p;display:flex;flex-direction:column;gap:1.3cqmin}
ol.preg li{counter-increment:p;display:flex;gap:1.9cqmin;align-items:baseline;
padding-bottom:1.3cqmin;border-bottom:1px solid var(--borde)}
ol.preg li::before{content:counter(p,decimal-leading-zero);font-family:var(--disp);font-size:2.9cqmin;
color:var(--mudo);min-width:3.4cqmin;line-height:1}
ol.preg .q{font-size:1.9cqmin;color:var(--tinta);font-weight:600;line-height:1.3}
ol.preg .w{font-size:1.45cqmin;color:var(--mudo);margin-top:.35cqmin;line-height:1.35}
.cierre{margin-top:2cqmin;font-family:var(--disp);font-size:3.4cqmin;color:var(--tinta);
line-height:1.02;letter-spacing:.01em;max-width:24ch}
/* ---------- esquemas en vector ---------- */
svg.esq{width:100%;height:auto;display:block}
svg.esq .traz{fill:none;stroke:var(--tinta);stroke-width:1.4}
svg.esq .traz-tenue{fill:none;stroke:#3a3a38;stroke-width:1.4}
svg.esq .relleno{fill:var(--tinta)}
svg.esq .relleno-tenue{fill:#2a2a28}
svg.esq text{font-family:"Barlow Condensed","Arial Narrow",sans-serif;
font-size:11px;letter-spacing:.14em;text-transform:uppercase;fill:var(--mudo);font-weight:600}
svg.esq text.dato{font-family:"Bebas Neue",sans-serif;font-size:24px;letter-spacing:.02em;
fill:var(--tinta);text-transform:none;font-weight:400}
svg.esq text.viva{fill:var(--tinta)}
.ficha-tec{display:flex;gap:2.6cqmin;padding-top:1.4cqmin;margin-top:1.4cqmin;
border-top:1px solid var(--borde)}
.ficha-tec div{flex:1}
.ficha-tec .e{font-family:var(--cond);font-size:1.1cqmin;letter-spacing:.2em;text-transform:uppercase;
color:var(--mudo);font-weight:600;display:block;margin-bottom:.35cqmin}
.ficha-tec .v{font-size:1.5cqmin;color:var(--tenue);line-height:1.3}
/* ---------- mockup de pantalla de teléfono ---------- */
.fonos{display:flex;gap:2.6cqmin;align-items:stretch;justify-content:center;
width:100%;height:100%;padding:.5cqmin 0}
.fono{flex:0 1 auto;max-width:27cqmin;display:flex;flex-direction:column;
align-items:center;min-height:0;min-width:0}
/* un .fono que contiene un .iphone no limita el ancho: la altura manda y el
ancho lo calcula el aspect-ratio del teléfono */
.fono:has(.iphone){max-width:none}
.fono .marco{flex:1;display:flex;flex-direction:column;min-height:0;
border:1px solid var(--borde-fuerte);background:var(--superficie);padding:.9cqmin}
.fono .tope{display:flex;justify-content:space-between;align-items:center;
padding-bottom:.7cqmin;margin-bottom:.9cqmin;border-bottom:1px solid var(--borde);
font-family:var(--cond);font-size:1cqmin;letter-spacing:.18em;text-transform:uppercase;
color:var(--mudo);font-weight:600}
.fono .tope b{color:var(--tinta);font-weight:600}
.fono .pantalla{flex:1;display:flex;flex-direction:column;gap:.7cqmin;min-height:0;overflow:hidden}
.fono figcaption{font-family:var(--cond);font-size:1.05cqmin;letter-spacing:.2em;
text-transform:uppercase;color:var(--mudo);margin-top:.9cqmin;text-align:center}
/* burbujas de conversación */
.burbuja{font-size:1.15cqmin;line-height:1.35;color:var(--tenue);
background:rgba(255,255,255,.05);padding:.7cqmin .8cqmin;max-width:86%}
.burbuja b{color:var(--tinta);font-weight:600}
.burbuja.propia{align-self:flex-end;background:rgba(255,255,255,.11);color:var(--tinta)}
/* filas de ranking */
.rank{display:flex;align-items:baseline;gap:.7cqmin;padding:.5cqmin 0;
border-bottom:1px solid var(--borde)}
.rank .p{font-family:var(--disp);font-size:1.9cqmin;color:var(--mudo);
flex:0 0 2.2cqmin;line-height:1}
.rank .nm{flex:1;font-size:1.15cqmin;color:var(--tenue);line-height:1.2}
.rank .v{font-family:var(--disp);font-size:1.7cqmin;color:var(--tinta);
font-variant-numeric:tabular-nums;line-height:1}
.rank.yo{background:rgba(255,255,255,.07);padding-left:.5cqmin;padding-right:.5cqmin}
.rank.yo .p,.rank.yo .nm{color:var(--tinta)}
/* barra de progreso dentro de la pantalla */
.prog{height:2px;background:rgba(255,255,255,.12);margin-top:.2cqmin}
.prog i{display:block;height:100%;background:var(--tinta)}
/* ---------- meme ----------
Formato real de meme: bloque de texto sobre fondo claro y la imagen debajo.
El fondo blanco es deliberado, es una pieza y se muestra como se va a ver. */
.memes{display:flex;gap:2.4cqmin;height:100%;align-items:stretch}
.memes figure{flex:1;min-width:0;display:flex;flex-direction:column;gap:1cqmin}
.meme{flex:1;min-height:0;display:flex;flex-direction:column;background:#fff;overflow:hidden}
.meme .txt{flex:0 0 auto;padding:1.15cqmin 1.3cqmin;color:#0d0d0d;font-family:var(--texto);
font-size:1.42cqmin;line-height:1.28;font-weight:600}
.meme .txt i{display:block;font-style:normal;color:#6a6a6a}
.meme img{width:100%;flex:1;min-height:0;object-fit:cover;display:block}
/* ---------- mockup de dispositivo ----------
Excepción deliberada al radius 0: un teléfono es una pieza que se fotografía,
no un elemento de la interfaz del deck. Mismo criterio que el color. */
/* aspect-ratio del CUERPO del teléfono (71 × 147 mm en un iPhone Pro),
no el de la pantalla: el bisel lo hace más ancho de lo que sugiere 19.5:9 */
.iphone{position:relative;flex:0 0 auto;width:26cqmin;height:auto;
aspect-ratio:71/147;
background:#050505;border:.42cqmin solid #17171a;border-radius:2.6cqmin;
/* el spread negativo mantiene la sombra debajo del teléfono. Con blur
amplio y sin spread, la sombra del teléfono de la derecha se pintaba
encima del de la izquierda (el segundo se pinta después) y dejaba una
banda oscura sobre su borde derecho. */
box-shadow:0 0 0 .16cqmin rgba(255,255,255,.13),
0 1.4cqmin 2.8cqmin -1.2cqmin rgba(0,0,0,.75);
padding:.42cqmin;display:flex;flex-direction:column;overflow:hidden}
.iphone .isla{position:absolute;top:1.05cqmin;left:50%;transform:translateX(-50%);
width:6.2cqmin;height:1.45cqmin;background:#000;border-radius:1cqmin;z-index:6}
.iphone .app{flex:1;border-radius:2.25cqmin;overflow:hidden;display:flex;
flex-direction:column;min-height:0;position:relative}
/* ---------- interfaz WhatsApp ---------- */
.wa{flex:1;display:flex;flex-direction:column;min-height:0;background:#0b141a}
.wa .top{background:#202c33;padding:3.1cqmin .8cqmin .65cqmin;display:flex;
align-items:center;gap:.6cqmin;flex:0 0 auto}
.wa .top .ava{width:2.5cqmin;height:2.5cqmin;border-radius:50%;flex:0 0 auto;
background:linear-gradient(150deg,#6d5ce0,#4a3bb8);display:flex;align-items:center;
justify-content:center;font-family:var(--disp);font-size:1.4cqmin;color:#fff}
.wa .top .id{min-width:0;line-height:1.15}
.wa .top .id b{display:block;font-size:1.15cqmin;color:#e9edef;font-weight:600}
.wa .top .id span{font-size:.85cqmin;color:#8696a0}
/* justify-content:flex-end deja la conversación pegada abajo y recorta por
arriba, igual que un chat real recién abierto */
.wa .chat{flex:1;min-height:0;padding:.8cqmin .65cqmin;display:flex;
flex-direction:column;justify-content:flex-end;gap:.42cqmin;overflow:hidden;
background:#0b141a url("data:image/svg+xml;utf8,")}
.wa .dia{align-self:center;flex:0 0 auto;background:#182229;color:#8696a0;
font-size:.72cqmin;letter-spacing:.1em;text-transform:uppercase;
padding:.25cqmin .55cqmin;border-radius:.5cqmin;margin:.15cqmin 0}
.wa .msg{max-width:84%;flex:0 0 auto;padding:.42cqmin .58cqmin .3cqmin;font-size:.94cqmin;
line-height:1.32;border-radius:.75cqmin;position:relative}
.wa .msg.in{background:#202c33;color:#e9edef;align-self:flex-start;border-top-left-radius:.1cqmin}
.wa .msg.out{background:#005c4b;color:#e9edef;align-self:flex-end;border-top-right-radius:.1cqmin}
.wa .msg b{color:#fff;font-weight:700}
.wa .msg .h{display:block;font-size:.72cqmin;color:rgba(233,237,239,.45);
text-align:right;margin-top:.15cqmin;letter-spacing:.02em}
.wa .msg.out .h::after{content:" ✓✓";color:#53bdeb}
.wa .barra{flex:0 0 auto;background:#0b141a;padding:.55cqmin .7cqmin 1cqmin;display:flex;gap:.5cqmin;align-items:center}
.wa .barra .campo{flex:1;background:#202c33;border-radius:1.2cqmin;padding:.45cqmin .7cqmin;
font-size:.95cqmin;color:#8696a0}
.wa .barra .env{width:2cqmin;height:2cqmin;border-radius:50%;background:#00a884;flex:0 0 auto}
/* ---------- interfaz gamificada / ficha de peleador ---------- */
.gapp{flex:1;display:flex;flex-direction:column;min-height:0;position:relative;background:#07070a}
.gapp .telon{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}
.gapp .capa{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(7,7,10,.35) 0%,rgba(7,7,10,.9) 55%,#07070a 100%)}
.gapp .cont{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
min-height:0;padding:3.1cqmin .75cqmin .8cqmin}
.gapp .gtop{display:flex;justify-content:space-between;align-items:center;
font-family:var(--cond);font-size:.85cqmin;letter-spacing:.18em;text-transform:uppercase;
color:#8a7a52;font-weight:600;margin-bottom:.5cqmin}
.gapp .gtop b{color:#e8c87a}
.gapp .retrato{position:relative;width:100%;aspect-ratio:1;overflow:hidden;
border:1px solid rgba(232,200,122,.3)}
.gapp .retrato img{width:100%;height:100%;object-fit:cover;display:block}
.gapp .retrato .cinta{position:absolute;left:0;bottom:0;right:0;
background:linear-gradient(180deg,transparent,rgba(7,7,10,.95));padding:1.4cqmin .6cqmin .5cqmin}
.gapp .retrato .cinta .nom{font-family:var(--disp);font-size:2.3cqmin;color:#fff;line-height:.95}
.gapp .retrato .cinta .clb{font-family:var(--cond);font-size:.85cqmin;letter-spacing:.2em;
text-transform:uppercase;color:#e8c87a;font-weight:600}
.gapp .retrato .nivel{position:absolute;top:.45cqmin;right:.45cqmin;
background:#e8c87a;color:#07070a;font-family:var(--disp);font-size:1.5cqmin;
line-height:1;padding:.35cqmin .5cqmin .2cqmin}
.gapp .st{display:flex;justify-content:space-between;align-items:baseline;
padding:.42cqmin 0;border-bottom:1px solid rgba(255,255,255,.07)}
.gapp .st .e{font-family:var(--cond);font-size:.82cqmin;letter-spacing:.16em;
text-transform:uppercase;color:#8696a0;font-weight:600}
.gapp .st .v{font-family:var(--disp);font-size:1.45cqmin;color:#fff;
font-variant-numeric:tabular-nums;line-height:1}
.gapp .st .v.oro{color:#e8c87a}
.gapp .medidor{margin-top:auto;padding-top:.6cqmin}
.gapp .medidor .cab{display:flex;justify-content:space-between;
font-family:var(--cond);font-size:.8cqmin;letter-spacing:.16em;text-transform:uppercase;
color:#8696a0;font-weight:600;margin-bottom:.3cqmin}
.gapp .medidor .cab b{color:#e8c87a}
.gapp .medidor .riel{height:.5cqmin;background:rgba(255,255,255,.1)}
.gapp .medidor .riel i{display:block;height:100%;
background:linear-gradient(90deg,#a8873f,#e8c87a)}
/* ---------- mockup de reel / video corto ----------
Un deck estático no reproduce video: esto muestra el fotograma
representativo con la interfaz de reel encima, para dejar claro que
el entregable real es video, no la imagen fija. Va dentro de .app,
igual que .wa y .gapp. */
.reel{flex:1;position:relative;display:flex;flex-direction:column;
min-height:0;overflow:hidden;background:#050505}
.reel .cuadro{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel .capa-r{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 62%,rgba(0,0,0,.86) 100%)}
.reel .barras{position:absolute;top:1cqmin;left:1cqmin;right:1cqmin;
display:flex;gap:.5cqmin;z-index:3}
.reel .barras i{flex:1;height:.35cqmin;background:rgba(255,255,255,.32)}
.reel .barras i.vista{background:#fff}
.reel .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:8cqmin;height:8cqmin;border-radius:50%;z-index:3;
background:rgba(0,0,0,.34);border:.18cqmin solid rgba(255,255,255,.85);
display:flex;align-items:center;justify-content:center}
.reel .play::after{content:'';border-style:solid;
border-width:1.6cqmin 0 1.6cqmin 2.6cqmin;border-color:transparent transparent transparent #fff;
margin-left:.5cqmin}
.reel .pie-r{position:absolute;left:1.1cqmin;right:1.1cqmin;bottom:1.3cqmin;z-index:3}
.reel .pie-r .cta{font-family:var(--cond);font-size:.95cqmin;letter-spacing:.14em;
text-transform:uppercase;color:#fff;font-weight:600;opacity:.85;margin-bottom:.5cqmin}
.reel .pie-r .cap{font-size:1.15cqmin;line-height:1.32;color:#fff;font-weight:600}
/* ---------- precarga de fuentes ----------
Chrome descarga las @font-face solo cuando las necesita para pintar. En
headless con --print-to-pdf eso llega tarde y el PDF sale con el fallback
(Arial Narrow en vez de Bebas), lo que cambia el titular entero porque
Bebas solo tiene mayúsculas. Este bloque las usa en un elemento invisible
para forzar la descarga en el primer paint. No se ve ni se imprime. */
#precarga-fuentes{position:fixed;left:-9999px;top:-9999px;width:0;height:0;
overflow:hidden;pointer-events:none;opacity:0}
#precarga-fuentes b{font-family:var(--disp);font-weight:400}
#precarga-fuentes i{font-family:var(--cond)}
#precarga-fuentes i.w6{font-weight:600}
#precarga-fuentes i.w7{font-weight:700}
#precarga-fuentes i.w8{font-weight:800}
#precarga-fuentes s{font-family:var(--texto)}
#precarga-fuentes s.w4{font-weight:400}
#precarga-fuentes s.w5{font-weight:500}
#precarga-fuentes s.w6{font-weight:600}
#precarga-fuentes s.w7{font-weight:700}
/* ---------- dato de tercero, citado como señal de categoría ---------- */
.cita-dato{display:flex;gap:1.6cqmin;align-items:baseline;padding:1.2cqmin 1.6cqmin;
background:rgba(255,255,255,.028);border-left:2px solid var(--tinta);margin-top:.4cqmin}
.cita-dato .n{font-family:var(--disp);font-size:3.4cqmin;line-height:.9;color:var(--tinta);flex:0 0 auto}
.cita-dato .t{font-size:1.5cqmin;line-height:1.35;color:var(--tenue)}
.cita-dato .t em{color:var(--tinta);font-style:normal;font-weight:600}
.cita-dato .f{display:block;font-family:var(--cond);font-size:1.05cqmin;letter-spacing:.14em;
text-transform:uppercase;color:var(--mudo);margin-top:.4cqmin}
/* ==================================================================
MEDIOS — rejillas de imagen y video de 1 a 6, con hueco de espera
------------------------------------------------------------------
Una sola clase para todas las disposiciones. .medios va DENTRO de
.body sin .col y ocupa la lámina completa; el número dice cuántas
piezas entran y la rejilla se acomoda sola.
m1 · pieza única m4 · 2 × 2
m2 · lado a lado m5 · 3 arriba + 2 abajo
m3 · tres en fila m6 · 3 × 2
Modificadores:
.tira fuerza una sola fila (sirve para m4 y m6)
.heroe la primera pieza manda (m3 y m6)
.grande en una pieza suelta: ocupa 2 × 2 celdas
================================================================== */
/* cualquier bloque colgado directo de .body ocupa la lámina completa: sin
esto queda como un flex item angosto pegado a la izquierda */
.body>.medios,.body>.par,.body>.rejilla,.body>.sumario,.body>.tiempos,
.body>.pasos,.body>.bandas,.body>.barras-dato,.body>.logos,.body>.fichas,
.body>table,.body>.preg,.body>.paleta,.body>.cita,.body>.tiempos{flex:1 1 auto;width:100%;min-width:0}
.medios{display:grid;gap:2.2cqmin;height:100%;min-height:0;align-content:stretch}
.medios.m1{grid-template-columns:1fr}
.medios.m2{grid-template-columns:repeat(2,1fr)}
.medios.m3{grid-template-columns:repeat(3,1fr)}
.medios.m4{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}
.medios.m5{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,1fr)}
.medios.m5>*{grid-column:span 2}
.medios.m5>*:nth-child(4),.medios.m5>*:nth-child(5){grid-column:span 3}
.medios.m6{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
.medios.tira{grid-template-rows:1fr}
.medios.m4.tira{grid-template-columns:repeat(4,1fr)}
.medios.m6.tira{grid-template-columns:repeat(6,1fr);gap:1.4cqmin}
.medios.m3.heroe{grid-template-columns:1.9fr 1fr;grid-template-rows:repeat(2,1fr)}
.medios.m3.heroe>*:first-child{grid-row:span 2}
.medios.m6.heroe{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.medios.m6.heroe>*:first-child{grid-column:span 2;grid-row:span 2}
.medios .grande{grid-column:span 2;grid-row:span 2}
.medio{display:flex;flex-direction:column;gap:.9cqmin;min-width:0;min-height:0;position:relative}
.medio>img,.medio>video,.medio>.hueco{width:100%;flex:1 1 auto;min-height:0;
object-fit:cover;object-position:center;border:1px solid var(--borde);display:block;background:#0b0b0b}
.medio figcaption{font-family:var(--cond);font-size:1.2cqmin;color:var(--mudo);letter-spacing:.16em;
text-transform:uppercase;font-weight:500;flex:0 0 auto;line-height:1.25}
.medio figcaption b{display:block;font-family:var(--disp);font-size:1.95cqmin;letter-spacing:.04em;
text-transform:none;color:var(--tinta);font-weight:400;line-height:1;margin-bottom:.35cqmin}
/* proporción fija: la pieza se centra en su celda y respeta su formato.
Sin data-ar la pieza llena la celda (object-fit:cover), que es lo normal
para fotos; con data-ar se usa cuando el formato ES el argumento —
un vertical de 9:16 tiene que verse vertical. */
.medio[data-ar]{align-items:center}
.medio[data-ar]>img,.medio[data-ar]>video,.medio[data-ar]>.hueco{
width:auto;height:100%;max-width:100%;flex:0 1 auto}
.medio[data-ar="16/9"]>:first-child{aspect-ratio:16/9}
.medio[data-ar="4/3"] >:first-child{aspect-ratio:4/3}
.medio[data-ar="1/1"] >:first-child{aspect-ratio:1/1}
.medio[data-ar="4/5"] >:first-child{aspect-ratio:4/5}
.medio[data-ar="9/16"]>:first-child{aspect-ratio:9/16}
.medio[data-ar="3/2"] >:first-child{aspect-ratio:3/2}
/* hueco: la pieza todavía no existe. Se arma el deck igual y se ve
exactamente qué falta y en qué formato. Nunca queda en la versión final. */
.hueco,.medio>.hueco{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:.5cqmin;border:1px dashed var(--borde-fuerte);background:
linear-gradient(to bottom right,transparent calc(50% - .5px),rgba(255,255,255,.09) 50%,transparent calc(50% + .5px)),
linear-gradient(to bottom left, transparent calc(50% - .5px),rgba(255,255,255,.09) 50%,transparent calc(50% + .5px)),
#0b0b0b}
.hueco::before{content:attr(data-tipo);font-family:var(--cond);font-size:1.55cqmin;letter-spacing:.26em;
text-transform:uppercase;color:var(--tenue);font-weight:600;background:#0b0b0b;padding:.3cqmin .9cqmin}
.hueco::after{content:attr(data-med);font-family:var(--cond);font-size:1.15cqmin;letter-spacing:.18em;
text-transform:uppercase;color:var(--mudo);font-weight:500;background:#0b0b0b;padding:.15cqmin .7cqmin}
/* video: se marca como video aunque esté pausado, y se reproduce solo
cuando la lámina está al aire (lo pone el script, no el markup) */
.medio.es-video::after{content:"VIDEO";position:absolute;top:1cqmin;left:1cqmin;z-index:3;
font-family:var(--cond);font-size:.95cqmin;letter-spacing:.22em;font-weight:600;color:var(--tinta);
background:rgba(8,8,8,.72);border:1px solid var(--borde-fuerte);padding:.25cqmin .6cqmin;pointer-events:none}
.medio.es-video.pausado>video{opacity:.62}
.medio.es-video.pausado::before{content:"";position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);z-index:3;width:0;height:0;border-style:solid;
border-width:1.5cqmin 0 1.5cqmin 2.5cqmin;border-color:transparent transparent transparent var(--tinta);
pointer-events:none;opacity:.9}
.medio>video{cursor:pointer}
/* ==================================================================
TIPOS DE LÁMINA — el ritmo del deck no es solo cabeza + cuerpo + pie
================================================================== */
/* separador de sección: corta el aire, ordena el relato */
.slide.seccion{justify-content:flex-end;padding:4.4cqmin 6cqmin 9cqmin}
.slide.seccion .cifra{position:absolute;right:1cqmin;top:50%;transform:translateY(-52%);
font-family:var(--disp);font-size:56cqmin;line-height:.7;color:var(--tinta);opacity:.07;
letter-spacing:-.02em;pointer-events:none}
.slide.seccion .txt{position:relative;max-width:70%}
.slide.seccion .rotulo{display:block;margin-bottom:1.6cqmin}
.slide.seccion h2{font-size:9.4cqmin;max-width:16ch;line-height:.9}
.slide.seccion .lead{margin-top:2.4cqmin;font-size:2.1cqmin}
.slide.seccion .regla{width:100%;height:1px;background:var(--borde-fuerte);margin-top:3cqmin}
/* declaración: una sola frase ocupa la lámina. Se usa poco, por eso pega. */
.slide.manifiesto{justify-content:center;align-items:flex-start;padding:0 9cqmin}
.slide.manifiesto .frase{font-family:var(--disp);font-size:7.6cqmin;line-height:1.02;
color:var(--tinta);max-width:19ch}
.slide.manifiesto .frase em{font-style:normal;opacity:.34}
.slide.manifiesto .rotulo{margin-bottom:2.4cqmin;display:block}
/* cita: dicho por alguien, con crédito */
.slide.cita-slide{justify-content:center;padding:0 9cqmin}
.cita{border-left:2px solid var(--tinta);padding-left:3.4cqmin;max-width:44ch}
.cita p{font-family:var(--disp);font-size:4.8cqmin;line-height:1.08;color:var(--tinta)}
.cita .quien{font-family:var(--cond);font-size:1.4cqmin;letter-spacing:.22em;text-transform:uppercase;
color:var(--mudo);margin-top:1.8cqmin;font-weight:600}
/* imagen a sangre con un rótulo encima */
.slide.plena{padding:0;justify-content:flex-end;position:relative}
.slide.plena>img.bg,.slide.plena>video.bg{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;opacity:.85}
.slide.plena .velo-inf{position:absolute;inset:0;
background:linear-gradient(0deg,rgba(8,8,8,.94) 6%,rgba(8,8,8,.35) 42%,rgba(8,8,8,0) 72%)}
.slide.plena .pie-plena{position:relative;padding:0 6cqmin 8.8cqmin;max-width:70%}
.slide.plena .pie-plena h2{font-size:6.4cqmin;margin-top:1.2cqmin}
/* cierre con datos de contacto */
.slide.cierre-slide{justify-content:center;align-items:flex-start;padding:0 8cqmin}
.slide.cierre-slide h1{font-size:8.6cqmin;margin-bottom:3.4cqmin}
.contacto{display:flex;gap:5cqmin;padding-top:2.4cqmin;border-top:1px solid var(--borde-fuerte)}
.contacto div .e{font-family:var(--cond);font-size:1.1cqmin;letter-spacing:.22em;text-transform:uppercase;
color:var(--mudo);font-weight:600;display:block;margin-bottom:.5cqmin}
.contacto div .v{font-size:1.75cqmin;color:var(--tinta);line-height:1.3}
.slide.cierre-slide .marca-cierre{margin-top:4cqmin}
.slide.cierre-slide .marca-cierre img{height:2.6cqmin;opacity:.75}
/* índice: lo llena el script leyendo los data-seccion del propio deck */
.sumario{list-style:none;counter-reset:s;display:grid;grid-template-columns:1fr 1fr;
gap:0 5cqmin;align-content:center;width:100%;flex:1 1 auto;min-width:0}
.sumario li{counter-increment:s;display:flex;gap:2.2cqmin;align-items:baseline;
padding:1.7cqmin 0;border-bottom:1px solid var(--borde);cursor:pointer}
.sumario li::before{content:counter(s,decimal-leading-zero);font-family:var(--disp);font-size:3.2cqmin;
color:var(--mudo);min-width:3.8cqmin;line-height:1}
.sumario li .t{font-family:var(--disp);font-size:3.1cqmin;color:var(--tinta);font-weight:400;
flex:1;line-height:1;letter-spacing:.02em}
.sumario li .p{font-family:var(--cond);font-size:1.2cqmin;letter-spacing:.16em;color:var(--mudo);
font-variant-numeric:tabular-nums}
.sumario li:hover .t{color:#fff}
.sumario li.aqui .t{color:var(--tinta)}
.sumario li.aqui::before{color:var(--tinta)}
/* ==================================================================
DIAGRAMACIÓN — armar una lámina sin inventar CSS
================================================================== */
/* rejillas de cuerpo: reemplazan el style="flex:1.25" a mano */
.body.g-1-1 >.col:nth-child(1){flex:1}
.body.g-2-1 >.col:nth-child(1){flex:2}
.body.g-1-2 >.col:nth-child(2){flex:2}
.body.g-3-2 >.col:nth-child(1){flex:1.5}
.body.g-2-3 >.col:nth-child(2){flex:1.5}
.body.tres >.col{flex:1}
.body.arriba >.col{justify-content:flex-start}
.body.centro >.col{justify-content:center}
.col.separada{border-left:1px solid var(--borde);padding-left:3.4cqmin}
.col.superficie{background:var(--superficie);padding:2.6cqmin;justify-content:flex-start}
/* carta de tiempos: la lámina que decide si la propuesta es creíble */
.tiempos{display:flex;flex-direction:column;gap:1.5cqmin;height:100%;justify-content:center}
.tiempos .cab{display:grid;grid-template-columns:16cqmin 1fr;gap:2cqmin;align-items:end;
padding-bottom:1cqmin;border-bottom:1px solid var(--borde-fuerte)}
.tiempos .cab .semanas{display:grid;grid-template-columns:repeat(var(--n,8),1fr);
font-family:var(--cond);font-size:1.15cqmin;letter-spacing:.14em;text-transform:uppercase;
color:var(--mudo);font-weight:600}
.tiempos .fila{display:grid;grid-template-columns:16cqmin 1fr;gap:2cqmin;align-items:center}
.tiempos .fila .et{font-family:var(--cond);font-size:1.4cqmin;letter-spacing:.12em;text-transform:uppercase;
color:var(--tinta);font-weight:600;line-height:1.15}
.tiempos .pista{display:grid;grid-template-columns:repeat(var(--n,8),1fr);height:2.6cqmin;
background:repeating-linear-gradient(90deg,var(--borde) 0 1px,transparent 1px calc(100%/var(--n,8)))}
.tiempos .tramo{background:var(--tinta);opacity:.9}
.tiempos .tramo.tenue{background:#3a3a38}
.tiempos .tramo.rayado{background:repeating-linear-gradient(135deg,var(--tinta) 0 2px,transparent 2px 5px)}
.tiempos .hito{position:relative}
.tiempos .hito::after{content:attr(data-hito);position:absolute;left:0;top:-1.9cqmin;white-space:nowrap;
font-family:var(--cond);font-size:1cqmin;letter-spacing:.14em;text-transform:uppercase;color:var(--mudo)}
/* barras comparativas: dato ordenado sin gráfico de torta */
.barras-dato{display:flex;flex-direction:column;gap:1.5cqmin;justify-content:center;height:100%}
.barras-dato .b{display:grid;grid-template-columns:1fr auto;gap:.5cqmin 1.4cqmin;align-items:baseline}
.barras-dato .b .e{font-family:var(--cond);font-size:1.3cqmin;letter-spacing:.14em;text-transform:uppercase;
color:var(--tenue);font-weight:600}
.barras-dato .b .v{font-family:var(--disp);font-size:2.4cqmin;color:var(--tinta);line-height:1;
font-variant-numeric:tabular-nums}
.barras-dato .b .riel{grid-column:1/-1;height:.9cqmin;background:rgba(255,255,255,.07)}
.barras-dato .b .riel i{display:block;height:100%;background:#3a3a38}
.barras-dato .b.viva .e,.barras-dato .b.viva .v{color:var(--tinta)}
.barras-dato .b.viva .riel i{background:var(--tinta)}
/* muro de logos de clientes, forzado a monocromo */
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:2.4cqmin;align-content:center;height:100%}
.logos img{width:100%;height:4.6cqmin;object-fit:contain;filter:grayscale(1) brightness(0) invert(1);
opacity:.55;transition:opacity .2s}
.logos.densa{grid-template-columns:repeat(8,1fr);gap:1.8cqmin}
.logos img.viva{opacity:1}
/* inversión: la tabla de plata, con total que no se discute de reojo */
table tr.total td{border-bottom:none;border-top:1px solid var(--borde-fuerte);
padding-top:1.8cqmin;color:var(--tinta);font-weight:600}
table tr.total td.num{font-family:var(--disp);font-size:4.2cqmin;line-height:.9;font-weight:400}
.nota-plata{font-family:var(--cond);font-size:1.15cqmin;letter-spacing:.14em;text-transform:uppercase;
color:var(--mudo);margin-top:1.4cqmin;line-height:1.5}
/* pasos numerados en fila: mecánica de activación en una sola lectura */
.pasos{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2.6cqmin;
align-content:center;height:100%}
.paso{display:flex;flex-direction:column;gap:.9cqmin;border-top:1px solid var(--borde-fuerte);
padding-top:1.4cqmin}
.paso .n{font-family:var(--disp);font-size:3.6cqmin;line-height:.86;color:var(--mudo)}
.paso .t{font-family:var(--cond);font-size:1.45cqmin;letter-spacing:.14em;text-transform:uppercase;
color:var(--tinta);font-weight:600}
.paso .d{font-size:1.5cqmin;color:var(--tenue);line-height:1.4}
.paso.viva .n{color:var(--tinta)}
/* marca de agua de borrador: */
body[data-estado] .slide::after{content:attr(data-estado);position:absolute;
top:50%;left:50%;transform:translate(-50%,-50%) rotate(-24deg);z-index:40;pointer-events:none;
font-family:var(--disp);font-size:22cqmin;letter-spacing:.08em;color:rgba(255,255,255,.045)}
/* ==================================================================
INTERFAZ DE PRESENTACIÓN
------------------------------------------------------------------
Todo lo de acá se ancla a la caja del slide (mismo alto y ancho que
.slide, mismo container-type), no al viewport: así los controles
mantienen su proporción en un notebook y en un proyector, y nunca
se montan sobre el .foot de la lámina.
================================================================== */
#nav{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
width:min(100vw, calc(100vh * 16 / 9));height:min(100vh, calc(100vw * 9 / 16));
container-type:size;pointer-events:none;z-index:50}
#nav>*{pointer-events:auto;position:absolute}
.nav-btn{bottom:2cqmin;width:5.3cqmin;height:3.9cqmin;display:flex;align-items:center;
justify-content:center;background:transparent;border:1px solid var(--borde-fuerte);
color:var(--tenue);cursor:pointer;transition:background .15s,color .15s,border-color .15s;
-webkit-appearance:none;appearance:none}
.nav-btn svg{width:1.75cqmin;height:1.75cqmin;stroke:currentColor;fill:none;
stroke-width:2.2;stroke-linecap:square;stroke-linejoin:miter}
.nav-btn:hover{background:var(--tinta);color:var(--fondo);border-color:var(--tinta)}
.nav-btn:focus-visible{outline:1px solid var(--tinta);outline-offset:2px}
.nav-btn[disabled]{opacity:.22;cursor:default;pointer-events:none}
/* juntas al centro: es donde uno mira cuando busca el control, no en las
esquinas. El hueco entre ambas es fijo (.6cqmin) para que se lean como
un solo mando de dos botones, no como dos elementos sueltos. */
#prev{left:calc(50% - 5.6cqmin)}
#next{left:calc(50% + .3cqmin)}
/* dónde estoy: abajo a la derecha, lejos del mando central */
#pos{bottom:1.8cqmin;right:5.2cqmin;display:flex;align-items:baseline;
gap:.9cqmin;font-variant-numeric:tabular-nums;white-space:nowrap}
#pos .act{font-family:var(--disp);font-size:2.9cqmin;line-height:1;color:var(--tinta)}
#pos .tot{font-family:var(--disp);font-size:2cqmin;line-height:1;color:#4a4a48}
#pos .sec{font-family:var(--cond);font-size:1.3cqmin;letter-spacing:.22em;text-transform:uppercase;
color:var(--mudo);font-weight:600;margin-left:.8cqmin;max-width:20cqmin;overflow:hidden;
text-overflow:ellipsis}
/* avance: una muesca por lámina, no una barra continua. Se ve cuánto falta. */
#barra{left:0;bottom:0;width:100%;height:2px;display:grid;gap:1px;
grid-auto-flow:column;grid-auto-columns:1fr;opacity:.9;pointer-events:none}
#barra i{background:rgba(255,255,255,.1)}
#barra i.vista{background:#4a4a48}
#barra i.aqui{background:var(--tinta)}
#ayuda{top:2.1cqmin;left:50%;transform:translateX(-50%);font-family:var(--cond);
font-size:1.1cqmin;color:#3a3a38;letter-spacing:.18em;text-transform:uppercase;
white-space:nowrap;transition:opacity .4s;pointer-events:none}
#ayuda.oculta{opacity:0}
#notas{position:fixed;left:0;right:0;bottom:0;background:#111110;
border-top:1px solid var(--borde-fuerte);padding:2.3vmin 3.4vmin 3vmin;font-size:1.7vmin;
line-height:1.5;color:var(--tenue);display:none;z-index:60;max-height:34vh;overflow:auto}
#notas.on{display:block}
#notas b{font-family:var(--cond);color:var(--tinta);display:block;font-size:1.2vmin;
letter-spacing:.24em;text-transform:uppercase;margin-bottom:.9vmin;font-weight:600}
/* ---------- vista de conjunto (tecla G) ----------
Miniaturas reales: cada lámina se clona a tamaño 1600×900 y se escala.
Como el sistema dimensiona en cqmin, la miniatura sale idéntica. */
#vista{position:fixed;inset:0;background:rgba(6,6,6,.97);z-index:70;display:none;
padding:4vmin 4vmin 6vmin;overflow:auto}
#vista.on{display:block}
#vista .tit{font-family:var(--cond);font-size:1.3vmin;letter-spacing:.26em;text-transform:uppercase;
color:var(--mudo);font-weight:600;margin-bottom:2.4vmin}
#vista .rejilla-min{display:grid;grid-template-columns:repeat(4,1fr);gap:2vmin}
.min{position:relative;cursor:pointer;border:1px solid var(--borde);overflow:hidden;
aspect-ratio:16/9;background:var(--fondo)}
.min .lienzo{width:1600px;height:900px;transform-origin:0 0;position:absolute;top:0;left:0}
.min .lienzo .slide{display:flex !important;position:absolute;inset:0;width:1600px;height:900px}
.min .etq{position:absolute;left:0;bottom:0;z-index:3;font-family:var(--cond);font-size:1.15vmin;
letter-spacing:.16em;color:var(--tinta);background:rgba(8,8,8,.8);padding:.3vmin .7vmin;
font-variant-numeric:tabular-nums}
.min:hover{border-color:var(--borde-fuerte)}
.min.aqui{border-color:var(--tinta)}
.min.aqui .etq{background:var(--tinta);color:var(--fondo)}
/* ---------- retícula de diagramación (tecla R) ----------
12 columnas + márgenes reales del sistema. No se imprime ni se ve
en la presentación: es para alinear mientras se arma. */
#reticula{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
width:min(100vw, calc(100vh * 16 / 9));height:min(100vh, calc(100vw * 9 / 16));
container-type:size;pointer-events:none;z-index:45;display:none}
#reticula.on{display:block}
#reticula .cols{position:absolute;inset:0;padding:4.4cqmin 5.2cqmin 7.6cqmin;
display:grid;grid-template-columns:repeat(12,1fr);gap:2.2cqmin}
#reticula .cols i{background:rgba(255,255,255,.045);border-left:1px solid rgba(255,255,255,.07);
border-right:1px solid rgba(255,255,255,.07)}
#reticula .marco{position:absolute;inset:0;margin:4.4cqmin 5.2cqmin 7.6cqmin;
border:1px solid rgba(255,255,255,.16)}
/* lámina que rebalsa: se marca sola en modo verificación (tecla V) */
body.verificar .slide.rebalsa{outline:2px dashed rgba(255,255,255,.55);outline-offset:-2px}
body.verificar .slide.rebalsa::before{content:"REBALSA";position:absolute;top:1.2cqmin;right:1.2cqmin;
z-index:41;font-family:var(--cond);font-size:1.1cqmin;letter-spacing:.2em;font-weight:700;
color:var(--fondo);background:var(--tinta);padding:.3cqmin .8cqmin}
@media print{
@page{size:1600px 900px;margin:0}
html,body{overflow:visible;height:auto}
#deck{display:block;height:auto}
.slide{display:flex !important;position:absolute;position:relative;width:100%;height:900px;
page-break-after:always;break-after:page;padding-bottom:3.2cqmin}
.slide:last-child{page-break-after:auto;break-after:auto}
#nav,#barra,#pos,#notas,#ayuda,#vista,#reticula,.nav-btn{display:none !important}
/* el video no se imprime: en su lugar queda el fotograma de poster */
.medio.es-video>video{display:none}
.medio.es-video{background:var(--poster) center/cover no-repeat;border:1px solid var(--borde)}
.medio.es-video.pausado::before{display:none}
}
/* ==================================================================
ACENTO — una sola tinta de color por deck, o ninguna
------------------------------------------------------------------
LA LÍNEA OFICIAL ES BLANCO, NEGRO Y GRIS: el gris es el acento y no hay
que declarar nada para tenerlo. Los seis colores de abajo son una
excepción que hay que justificar, no un menú para elegir por gusto.
Cuando la campaña de verdad pide voltaje se declara UNO en el body:
Reglas que no se negocian:
· Uno por deck. Dos acentos es un deck de otra agencia.
· Nunca sobre una foto ni de fondo de lámina: solo en filos, cifras
vivas y marcadores. Si pasa del 5% de la superficie, sobra.
· La foto del cliente sigue siendo la única fuente de color real.
· Si la marca del cliente ya trae un color fuerte, el deck va sin
acento: dos colores peleando y gana el ruido.
================================================================== */
body[data-acento="volt"] {--acento:#d8ff3d;--acento-tenue:rgba(216,255,61,.14)}
body[data-acento="naranjo"]{--acento:#ff4a00;--acento-tenue:rgba(255,74,0,.16)}
body[data-acento="azul"] {--acento:#0a84ff;--acento-tenue:rgba(10,132,255,.18)}
body[data-acento="amarillo"]{--acento:#ffc800;--acento-tenue:rgba(255,200,0,.15)}
body[data-acento="magenta"]{--acento:#ff2e6c;--acento-tenue:rgba(255,46,108,.16)}
body[data-acento="menta"] {--acento:#00e5a0;--acento-tenue:rgba(0,229,160,.15)}
/* Dónde aterriza el acento. Esta lista es cerrada a propósito. */
body[data-acento] .banda.b1{border-left-color:var(--acento)}
body[data-acento] .banda.b1 .r{color:var(--acento)}
body[data-acento] .cita-dato{border-left-color:var(--acento);background:var(--acento-tenue)}
body[data-acento] .cita-dato .n{color:var(--acento)}
body[data-acento] .cita{border-left-color:var(--acento)}
body[data-acento] .barras-dato .b.viva .riel i{background:var(--acento)}
body[data-acento] .barras-dato .b.viva .v{color:var(--acento)}
body[data-acento] .paso.viva .n{color:var(--acento)}
body[data-acento] .tiempos .tramo{background:var(--acento)}
body[data-acento] .tiempos .tramo.tenue{background:#3a3a38}
body[data-acento] .tiempos .tramo.rayado{
background:repeating-linear-gradient(135deg,var(--acento) 0 2px,transparent 2px 5px)}
body[data-acento] table tr.total td.num{color:var(--acento)}
body[data-acento] .slide.seccion .cifra{color:var(--acento);opacity:.13}
body[data-acento] .medio.es-video::after{color:var(--acento);border-color:var(--acento)}
body[data-acento] #barra i.aqui{background:var(--acento)}
body[data-acento] .nav-btn:hover{background:var(--acento);border-color:var(--acento);color:#080808}
body[data-acento] .resplandor{--luz:var(--acento-tenue)}
/* ==================================================================
RESPLANDOR — la luz que sale de atrás del sujeto
------------------------------------------------------------------
Es lo que hace que un logo suelto sobre negro no se vea plano. Va como
primer hijo de la lámina, debajo del contenido.
halo centrado
luz que sube desde el piso
barrido horizontal
================================================================== */
.resplandor{position:absolute;inset:0;z-index:0;pointer-events:none;--luz:rgba(255,255,255,.19);
background:radial-gradient(52% 70% at 50% 50%,
var(--luz) 0%, color-mix(in srgb, var(--luz) 52%, transparent) 30%,
color-mix(in srgb, var(--luz) 16%, transparent) 55%, transparent 78%)}
.resplandor.abajo{background:radial-gradient(70% 60% at 50% 94%,
var(--luz) 0%, color-mix(in srgb, var(--luz) 48%, transparent) 32%,
color-mix(in srgb, var(--luz) 15%, transparent) 58%, transparent 82%)}
.resplandor.ancho{background:radial-gradient(72% 40% at 50% 54%,
var(--luz) 0%, color-mix(in srgb, var(--luz) 40%, transparent) 40%, transparent 78%)}
.slide>.head,.slide>.body,.slide>.foot,.slide .inner,.slide .txt,
.slide .pie-plena,.slide .marca-central{position:relative;z-index:1}
/* lámina de marca: el logo solo, con luz detrás. Abre y cierra el deck. */
.slide.marca-sola{align-items:center;justify-content:center;padding:0}
.slide.marca-sola .marca-central{display:flex;flex-direction:column;align-items:center;gap:3cqmin}
.slide.marca-sola .marca-central img{height:13cqmin;width:auto}
.slide.marca-sola .marca-central .pie-marca{font-family:var(--cond);font-size:1.5cqmin;
letter-spacing:.34em;text-transform:uppercase;color:var(--mudo);font-weight:600}
/* ==================================================================
NAV EN LAS ESQUINAS — variante
El layout anterior: una flecha en cada esquina inferior y el número al
centro. Para quien prefiera los controles lejos del contenido en vez
de agrupados como un mando único.
================================================================== */
body[data-nav="esquinas"] #prev{left:5.2cqmin}
body[data-nav="esquinas"] #next{left:auto;right:5.2cqmin}
body[data-nav="esquinas"] #pos{left:50%;right:auto;transform:translateX(-50%)}
/* variante redonda, para combinar con cualquiera de los dos layouts */
body[data-nav~="redonda"] .nav-btn{width:4.6cqmin;height:4.6cqmin;border-radius:50%}
/* muestrario de tonos: para la lámina de identidad o de acento */
.paleta{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2cqmin;
align-content:center;height:100%}
.paleta .tono{display:flex;flex-direction:column;gap:1.1cqmin;justify-content:center}
.paleta .tono i{display:block;height:15cqmin;background:var(--c,var(--tinta));
border:1px solid var(--borde)}
.paleta .tono .n{font-family:var(--cond);font-size:1.35cqmin;letter-spacing:.2em;
text-transform:uppercase;color:var(--tinta);font-weight:600}
.paleta .tono .h{font-family:var(--cond);font-size:1.1cqmin;letter-spacing:.16em;
text-transform:uppercase;color:var(--mudo);font-weight:500}
.paleta .tono .u{font-size:1.35cqmin;color:var(--tenue);line-height:1.35}
/* ---------- bloque de código ----------
Única familia fuera de las tres de marca, y solo acá: el código necesita
ancho fijo o no se lee. No se usa para texto de propuesta, jamás. */
.codigo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.4cqmin;
line-height:1.7;color:var(--tenue);background:var(--superficie);
border-left:2px solid var(--borde-fuerte);padding:1.7cqmin 2.1cqmin;
white-space:pre;overflow:hidden;letter-spacing:-.01em}
.codigo b{color:var(--tinta);font-weight:600}
.codigo i{color:#5a5a58;font-style:normal}
.codigo em{color:var(--acento);font-style:normal;font-weight:600}
.body>.codigo{flex:1 1 auto;width:100%;min-width:0}
.col>.codigo{flex:0 0 auto}
/* lista de teclas */
.teclas{display:grid;grid-template-columns:auto 1fr;gap:1.1cqmin 2.4cqmin;align-content:center}
.teclas dt{font-family:var(--cond);font-size:1.4cqmin;letter-spacing:.1em;text-transform:uppercase;
color:var(--tinta);font-weight:700;border:1px solid var(--borde-fuerte);
padding:.35cqmin .9cqmin;text-align:center;white-space:nowrap}
.teclas dd{font-size:1.6cqmin;color:var(--tenue);line-height:1.35;align-self:center}
.teclas dd b{color:var(--tinta);font-weight:600}
.body>.teclas{flex:1 1 auto;width:100%;min-width:0}