/* ------------------------------------------------------------------ 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); --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 3.2cqmin;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 6cqmin;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} /* ---------- lista de chats de WhatsApp ---------- La pantalla de conversaciones, no una conversación: es lo que se ve cuando alguien echa el chat para atrás o abre la app. Reemplaza a .chat dentro de .wa y trae su propia cabecera (.cab), porque el header de la lista no lleva contacto sino título y buscador. */ .wa .cab{background:#111b21;padding:3.1cqmin .75cqmin .5cqmin;flex:0 0 auto} .wa .cab b{display:block;font-size:1.5cqmin;color:#e9edef;font-weight:700} .wa .cab .buscar{margin-top:.5cqmin;background:#202c33;border-radius:1.2cqmin; padding:.38cqmin .75cqmin;font-size:.92cqmin;color:#8696a0} .wa .lista{flex:1;min-height:0;background:#111b21;display:flex;flex-direction:column; overflow:hidden} .wa .lista .fila{display:flex;gap:.7cqmin;align-items:center;flex:0 0 auto; padding:.62cqmin .75cqmin;border-bottom:1px solid rgba(255,255,255,.05)} .wa .lista .av{width:3.1cqmin;height:3.1cqmin;border-radius:50%;flex:0 0 auto; background:#2a3942;display:flex;align-items:center;justify-content:center; font-family:var(--disp);font-size:1.5cqmin;color:#8696a0;line-height:1} .wa .lista .tx{flex:1;min-width:0} .wa .lista .tx b{display:block;font-size:1.05cqmin;color:#e9edef;font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3} /* el mensaje se corta en dos líneas, como en la app: el nombre siempre se lee entero y el texto no, que es exactamente el efecto que se busca en pantalla */ .wa .lista .tx span{font-size:.92cqmin;color:#8696a0;line-height:1.25; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .wa .lista .hr{font-size:.76cqmin;color:#8696a0;flex:0 0 auto;align-self:flex-start; padding-top:.35cqmin;letter-spacing:.02em} /* ---------- 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} /* ---------- storyboard ---------- Cuando la pieza todavía no está filmada, el guión se muestra como viñetas: tiempo, cuadro con la descripción visual y el diálogo debajo. Es lo que permite defender una pieza sin animatic. Máximo 5 viñetas por lámina: con más, el cuadro baja del tamaño en que se lee proyectado. grid-auto-rows:max-content + align-content:center mantiene los cuadros alineados entre sí y el bloque centrado, aunque los diálogos midan distinto. */ .sb{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;grid-auto-rows:max-content; align-content:center;align-items:start;gap:1.8cqmin;height:100%} .sb .vi{display:flex;flex-direction:column;min-width:0} .sb .vi .t{font-family:var(--cond);font-size:1.3cqmin;letter-spacing:.2em;text-transform:uppercase; color:var(--mudo);font-weight:600;margin-bottom:.8cqmin} .sb .vi .cuadro{position:relative;overflow:hidden;aspect-ratio:4/3; border:1px solid var(--borde-fuerte);background:var(--superficie); display:flex;align-items:flex-end;font-family:var(--cond);font-size:1.3cqmin; line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--tenue);font-weight:600} /* el cuadro admite una foto: la descripción se mantiene encima sobre un velo, así el storyboard se sigue leyendo igual cuando llegan las imágenes */ .sb .vi .cuadro > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .sb .vi .cuadro .txt{position:relative;width:100%;padding:1.1cqmin; background:linear-gradient(180deg,rgba(8,8,8,0),rgba(8,8,8,.88) 62%)} /* y también un mockup de pantalla, para las viñetas que en la pieza real son grabación de pantalla y no fotografía. El teléfono se escala completo con transform en vez de redimensionarse: sus tamaños internos están calibrados para el ancho de un .iphone y al recalcularlos la interfaz se desarma. */ /* el cuadro está en Condensed uppercase con tracking, y eso es correcto para una descripción de plano pero no para una interfaz: adentro del mockup se vuelve al texto normal, o WhatsApp sale escrito en mayúsculas de rótulo */ .sb .vi .cuadro .mock{position:absolute;inset:0;display:flex;align-items:center; justify-content:center;background:#050505; font-family:var(--texto);text-transform:none;letter-spacing:normal;font-weight:400} .sb .vi .cuadro .mock .iphone{transform:scale(.72);transform-origin:center;flex:0 0 auto} /* variante plana: la pantalla llena el cuadro sin el marco del teléfono, para cuando lo que importa es LEER el contenido y no reconocer el aparato. La descripción baja a una banda sólida en vez de un velo, así no tapa ninguna fila. Los tamaños internos se recalibran acá porque el ancho disponible pasa de un teléfono a un cuadro completo. */ .sb .vi .cuadro .mock.plano{inset:0 0 21% 0;background:#111b21} .sb .vi .cuadro:has(.mock.plano) .txt{background:var(--fondo)} .sb .vi .cuadro .mock.plano .wa{position:absolute;inset:0} .sb .vi .cuadro .mock.plano .wa .top, .sb .vi .cuadro .mock.plano .wa .cab{padding:.9cqmin 1.1cqmin .65cqmin} .sb .vi .cuadro .mock.plano .wa .top .ava, .sb .vi .cuadro .mock.plano .wa .lista .av{width:3.2cqmin;height:3.2cqmin;font-size:1.6cqmin} .sb .vi .cuadro .mock.plano .wa .top .id b{font-size:1.45cqmin} .sb .vi .cuadro .mock.plano .wa .top .id span{font-size:1.1cqmin} .sb .vi .cuadro .mock.plano .wa .cab b{font-size:1.9cqmin} .sb .vi .cuadro .mock.plano .wa .cab .buscar{font-size:1.2cqmin;padding:.45cqmin .9cqmin} .sb .vi .cuadro .mock.plano .wa .chat{padding:.8cqmin 1cqmin;gap:.45cqmin} .sb .vi .cuadro .mock.plano .wa .dia{font-size:1cqmin;padding:.3cqmin .7cqmin} .sb .vi .cuadro .mock.plano .wa .msg{font-size:1.3cqmin;padding:.55cqmin .75cqmin .4cqmin; max-width:88%;border-radius:1cqmin} .sb .vi .cuadro .mock.plano .wa .msg .h{font-size:1cqmin} .sb .vi .cuadro .mock.plano .wa .barra{display:none} .sb .vi .cuadro .mock.plano .wa .lista .fila{padding:.7cqmin 1.1cqmin} .sb .vi .cuadro .mock.plano .wa .lista .tx b{font-size:1.4cqmin} .sb .vi .cuadro .mock.plano .wa .lista .tx span{font-size:1.2cqmin} .sb .vi .cuadro .mock.plano .wa .lista .hr{font-size:1.05cqmin} .sb .vi .d{margin-top:1cqmin;font-size:1.45cqmin;line-height:1.4;color:var(--tenue)} .sb .vi .d b{color:var(--tinta);font-weight:600} .sb .vi .d i{display:block;font-style:normal;color:var(--mudo);margin-top:.5cqmin} /* el título con que cierra una pieza se muestra como lo que es: un cartel. Va invertido, no coloreado — el deck es monocromo y el énfasis se consigue dando vuelta el valor, que además es exactamente como se ve en pantalla. */ /* display:table para que arranque en su propia línea y a la vez mida solo lo que ocupa el texto: con inline-block queda pegado al final del párrafo */ .titulo-cierre{display:table;margin-top:1.1cqmin; background:var(--tinta);color:var(--fondo);font-family:var(--disp);font-weight:400; font-size:2cqmin;line-height:1;letter-spacing:.02em;padding:.6cqmin .85cqmin .4cqmin} /* ---------- video embebido ---------- Una referencia audiovisual se muestra, no se describe: si la pieza que justifica el formato es un video, va reproducible dentro de la lámina. Mantiene 16:9 dentro de la columna. Sin internet queda el marco negro, por eso toda lámina con video lleva también su enlace en el .foot. */ .video{position:relative;width:100%;aspect-ratio:16/9;background:#000; border:1px solid var(--borde-fuerte);overflow:hidden} .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} /* dos referentes en fila, mismo criterio que .par para imágenes: cuando el argumento es que hay un formato y no una pieza suelta, hay que ver dos */ .videos{display:flex;gap:2.6cqmin;width:100%} .videos figure{flex:1;min-width:0;display:flex;flex-direction:column;gap:1cqmin} /* ---------- 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} /* ---------- interfaz ---------- */ #barra{position:fixed;left:0;bottom:0;height:2px;background:var(--tinta);width:0; transition:width .3s ease;z-index:50;opacity:.7} #num{position:fixed;right:2.2vmin;bottom:1.7vmin;font-family:var(--cond);font-size:1.25vmin; color:#3f3f3d;letter-spacing:.2em;z-index:50;font-variant-numeric:tabular-nums} #notas{position:fixed;left:0;right:0;bottom:0;background:#111110;border-top:1px solid var(--borde-fuerte); padding:2.3vmin 3.4vmin;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} #ayuda{position:fixed;left:2.2vmin;bottom:1.7vmin;font-family:var(--cond);font-size:1.2vmin; color:#2e2e2c;letter-spacing:.16em;text-transform:uppercase;z-index:50} @media print{ @page{size:1600px 900px;margin:0} html,body{overflow:visible;height:auto} #deck{display:block;height:auto} .slide{display:flex !important;position:relative;width:100%;height:900px; page-break-after:always;break-after:page} .slide:last-child{page-break-after:auto;break-after:auto} #barra,#num,#notas,#ayuda{display:none !important} } /* ---------- 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}