/* Escala tipográfica CERRADA (02-10-2026, PDF p. 19 «5.2 Tipografía y estilo» y check 23; el cliente dijo SÍ a cerrarla aunque cambien un poco algunas fichas). Va la última. Estilo = combinación de familia, tamaño y grosor (definición del PDF). Tabla y medición: _qa/escala-final/ESCALA.md. Ocho estilos por ancho, cada familia con su papel (PDF 5.2): 1 H1 Nunito 800 --e-h1 nombre grande del inicio 2 H2 Nunito 800 --e-h2 títulos de sección y nombres de formato 3 H3 Nunito 800 --e-h3 títulos de caso, cajas, frase del inicio 4 Texto Geist 400 --e-texto párrafos, entradillas, campos del formulario 5 Botón y énfasis Geist 600 --e-boton botones, nombres (equipo, casos, cinta), preguntas, títulos de vídeo, cifras y negritas (15 px; tercera vuelta) 6 Texto pequeño Geist 400 --e-pequeno texto secundario, errores del formulario, protección de datos 7 Micro Geist 600 --e-micro barras de las ventanas del inicio y títulos de la tira de vídeos de cada caso (10,5 px) 8 Etiqueta Geist Mono 400 --e-etiqueta cifras, @, rótulos cortos de una línea y el chrome de las imitaciones de interfaz (barras de ventana, duraciones, chapas) Nunito queda solo en titulares (los nombres pasan a Geist 600, como ya estaban los de la cinta de creadores). `!important` solo aquí: esta hoja es la capa final de la escala y tiene que ganar a reglas de sección con más especificidad (y a dos `!important` previos de la barra de ventana). */ :root { --e-h1: var(--t-hero); --e-h2: var(--t-h2); --e-h3: var(--t-h3); --e-texto: var(--t-body); /* 17 px */ --e-pequeno: var(--t-small); /* 15 px */ --e-etiqueta: var(--t-micro);/* 12 px */ --e-boton: var(--t-small); /* 15 px: botón y énfasis (tercera vuelta) */ --e-micro: 10.5px; /* el mayor con el que «Invertir para Conseguir» cabe en su barra de 112 px */ --t-lead: var(--e-texto); /* la entradilla es Texto */ } /* H3: un solo grosor. */ :root h3 { font-weight: 800; } /* H2: los nombres de formato (57,6 y 49 px en escritorio; 41,6 y 33,6 en móvil) toman el tamaño de H2. */ :root .fmt__n { font-size: var(--e-h2) !important; } /* Botón / nombres: los nombres del equipo y el canal de cada caso pasan de Nunito 800 (17 y 15 px) a Geist 600 17, como los de la cinta. */ :root .caso__canal, :root .equipofoto__pie b { font-family: var(--f-text) !important; font-size: var(--e-texto) !important; font-weight: 600 !important; letter-spacing: -0.01em; } /* Texto: los campos del formulario (16 px en móvil) a 17. */ :root #form .input, :root #form .textarea, :root .field input, :root .field textarea { font-size: var(--e-texto) !important; } /* Texto pequeño: frases que estaban a 12 y 13 px. */ :root .rgpd__corto, :root .field .err, :root .equipofoto__pie span:not(.equipofoto__cargo) { font-family: var(--f-text) !important; font-size: var(--e-pequeno) !important; font-weight: 400; } /* Título de ficha: la negrita de «Protección de datos:» sigue en 600. */ :root .rgpd__corto b { font-size: inherit; font-weight: 600; } /* Etiqueta: un solo tamaño y grosor en mono, también en el chrome de las ventanas (antes 9, 9,5, 10, 10,5 y 13 px; Geist 600 en las barras). */ :root .video__nicho, :root .video__handle, :root .caso__canallink .num, :root .win__title, :root .win__time, :root #form-cuenta, :root .winx__t, :root .winx__dur, :root .mini43__dur, :root .chapa, :root .hilo__chapa, :root .persona dt, :root .umbrales dt { font-family: var(--f-mono) !important; font-size: var(--e-etiqueta) !important; font-weight: 400 !important; } /* H2 a un solo tamaño que también quepa en las fichas de formato: con el H2 de antes (64 px a 1440) «EN CADENA» y «EL CASTILLO» partían en dos líneas. Mismo mínimo (38,4 px) y tope en 57,6 px, el tamaño que ya tenían esas fichas. */ :root { --t-h2: clamp(2.4rem, 4vw, 3.6rem); } /* Segunda vuelta (juez 3): cero cortes nuevos frente a la publicada. - Tira de vídeos de cada caso: Etiqueta (mono 12), el tamaño que tenía en la publicada; vuelve su recorte de 2 líneas (v3-b) y ninguna palabra se parte. - Barras de las ventanas del inicio (.flota): la barra mide 112 px y ningún estilo de 12 px cabe («Invertir para Conseguir» 125 px en Geist 12). Se quedan en el estilo que ya tenían (Geist 10/600, «Chrome de ventana»), que ocupa el hueco del antiguo «Título de ficha» (Geist 15/600), retirado. */ :root .flota .winx__t { font-family: var(--f-text) !important; font-size: var(--e-micro) !important; font-weight: 600 !important; letter-spacing: -0.02em; } /* LH-INICIO: un interlineado por estilo (H1 y H2 1,02 · H3 1,1 · Texto y Texto pequeño 1,55 · Botón 1,2 · Título de ficha 1,3 · Etiqueta 1,4). Generado por _qa/escala-final/lh.mjs */ /* Texto y Texto pequeño: 1.55 */ :root a#hero-caras > span.sello > span.visually-hidden, :root a.fmt > div.fmt__pie > p.fmt__q, :root a.mq-item > span > span.visually-hidden, :root a.mq-item > span.sello > span.visually-hidden, :root a.skip, :root div#formatos > a.fmt > span.visually-hidden, :root div#metodo-trabajo > figure.trabajo__fig > figcaption.trabajo__pie, :root div#rgpd > p.rgpd__corto > a:not([class]), :root div.acepto > label > a:not([class]), :root div.acepto > label > span:not([class]), :root div.caso__cuerpo > div.caso__texto > p.caso__resumen, :root div.caso__hitos > div.caso__metricas > p.caso__restx, :root div.field > div.acepto > label:not([class]), :root div.fmt__pie > p.fmt__para > span.fmt__handle, :root div.fmt__pie > p.fmt__para > span:not([class]), :root div.form__fila > div.field > input#f-canal, :root div.form__fila > div.field > input#f-email, :root div.form__fila > div.field > input#f-nombre, :root div.form__fila > div.field > input#f-whatsapp, :root div.form__fila > div.field > p#e-canal, :root div.form__fila > div.field > p#e-email, :root div.form__fila > div.field > p#e-nombre, :root div.hero__centro > a#hero-caras > span.caras__t, :root div.hero__centro > p#hero-nota > b:not([class]), :root div.hilo__q-cuerpo > button#faq-b-0 > span.hilo__toggle-t, :root div.hilo__q-cuerpo > button#faq-b-1 > span.hilo__toggle-t, :root div.hilo__q-cuerpo > button#faq-b-2 > span.hilo__toggle-t, :root div.hilo__q-cuerpo > button#faq-b-3 > span.hilo__toggle-t, :root div.hilo__q-cuerpo > button#faq-b-4 > span.hilo__toggle-t, :root div.hilo__q-cuerpo > button#faq-b-5 > span.hilo__toggle-t, :root div.hilo__q-cuerpo > button#faq-b-6 > span.hilo__toggle-t, :root div.hilo__q-cuerpo > button#faq-b-7 > span.hilo__toggle-t, :root div.metodo__lado > div.umbrales > p.umbrales__pie, :root div.mini43__caja > span.sello > span.visually-hidden, :root div.pie__fila > p.pie__matriz > a:not([class]), :root div.vtira > a.vtira__it > span.visually-hidden, :root div.vtira > a.vtira__it > span.vtira__t, :root div.win__body > form#form > p.form__plazo, :root div.winx__pantalla > span.sello > span.visually-hidden, :root div.wrap > div.cta-cinta > p:not([class]), :root div.wrap > div.pie__fila > p.pie__matriz, :root div.yt__fila > nav#menu > a.is-aqui, :root div.yt__fila > nav#menu > a:not([class]), :root dl#personas > div.persona > dd:not([class]), :root dl#umbrales > div > dd:not([class]), :root fieldset.field > div#objetivos > label.pill, :root fieldset.field > div#tamanos > label.pill, :root figure.equipofoto > figcaption.equipofoto__pie > span:not([class]), :root figure.win > div.caja__cuerpo > p.caja__q, :root form#form > div#rgpd > p.rgpd__corto, :root form#form > div.field > p#e-acepto, :root form#form > fieldset.field > p#e-tamano, :root form#form > fieldset.field > textarea#f-mensaje, :root ol.capitulos > li > span.capitulos__t, :root p.pie__matriz > a > span.visually-hidden, :root section#inicio > div.hero__centro > p.hero__quien, :root span.mini > span.mini__play > span.mini__play-t, :root ul > li > a:not([class]), :root ul#creditos > li.rol > p.rol__d, :root ul#pie-contacto > li > a:not([class]), :root ul.tiempo > li > span.tiempo__t { line-height: 1.55 !important; } /* Etiqueta: 1.4 */ :root a.fmt > div.fmt__pie > span.fmt__ver, :root a.mini43 > div.mini43__caja > span.mini43__dur, :root a.nota__caja > div.nota__cab > b:not([class]), :root a.nota__caja > div.nota__cab > span:not([class]), :root a.vp__pantalla > div.vp__abajo > span.vp__yt, :root article#caso-alberto-serrano > div.win__bar > span.win__title, :root article#caso-alberto-serrano > div.win__foot > span.win__time, :root article#caso-carlos-barrera > div.win__bar > span.win__title, :root article#caso-carlos-barrera > div.win__foot > span.win__time, :root article#caso-jose-elias > div.win__bar > span.win__title, :root article#caso-jose-elias > div.win__foot > span.win__time, :root div#flota-b > div.flota__pieza > span.chapa, :root div#marquee-track > span.mq-item > i.num, :root div.caja__cuerpo > p.caja__k > span.num, :root div.caja__cuerpo > p.caja__k > span:not([class]), :root div.caja__pantalla > div.caja__id > p.caja__n, :root div.caso__cabeza > div > span.caso__handle, :root div.caso__cabeza > span.sello > span.sello__t, :root div.caso__cuerpo > div.caso__texto > p.caso__rotulo, :root div.caso__hitos > a.caso__canallink > span.num, :root div.caso__hitos > div.caso__metricas > p.caso__rotulo, :root div.caso__hitos > div.vtira-bloque > p.caso__rotulo, :root div.caso__hitos > figure.casofoto > figcaption.casofoto__pie, :root div.field > label > span:not([class]), :root div.fmt__pie > p.fmt__para > b:not([class]), :root div.form__fila > div.field > label:not([class]), :root div.hero__centro > p#hero-nota > span.num, :root div.hilo__q-cuerpo > p.hilo__cab > span.hilo__autor, :root div.hilo__rta-cuerpo > p.hilo__cab > span.hilo__autor, :root div.hilo__rta-cuerpo > p.hilo__cab > span.hilo__chapa, :root div.metodo__lado > div#metodo-trabajo > p.trabajo__t, :root div.metodo__lado > div.umbrales > p.umbrales__t, :root div.metodo__lado > header.cab > p.kicker, :root div.pie__cols > nav.pie__col > p#pie-c1, :root div.pie__cols > nav.pie__col > p#pie-c2, :root div.pie__cols > nav.pie__col > p#pie-c3, :root div.pie__cols > nav.pie__col > p#pie-c4, :root div.reel__id > p.reel__subs > span#reel-subs, :root div.vp__abajo > div.reel__id > span.reel__rodaje, :root div.win > div.win__bar > span#equipo-ventana, :root div.win > div.win__bar > span#faq-ventana, :root div.win > div.win__bar > span.win__title, :root div.win > div.win__foot > span#form-cuenta, :root div.win__bar > span.win__tags > span#faq-cuenta, :root div.win__bar > span.win__tags > span#form-campos, :root div.win__bar > span.win__tags > span.tag, :root div.winx > div.winx__bar > span.winx__x, :root div.winx > div.winx__pantalla > span.winx__dur, :root div.wrap > div.contacto__intro > p.kicker, :root div.wrap > header.cab > p.kicker, :root div.wrap > p.pie__copy > span#anio, :root dl#personas > div.persona > dt:not([class]), :root dl#umbrales > div > dt:not([class]), :root figure.equipofoto > figcaption.equipofoto__pie > span.equipofoto__cargo, :root figure.fmt__win > div.fmt__bar > span.fmt__x, :root figure.fmt__win > div.fmt__cuerpo > span.fmt__chapa, :root figure.win > div.win__bar > span.win__title, :root figure.winx > div.winx__bar > span.winx__x, :root figure.winx > div.winx__pantalla > span.winx__dur, :root footer.pie > div.wrap > p.pie__copy, :root form#form > fieldset.field > label.objetivo__l, :root form#form > fieldset.field > legend:not([class]), :root li.rol > p.rol__cab > span.rol__dato, :root li.rol > p.rol__cab > span.rol__pill, :root main#main > section.tira > p.tira__chapa, :root ol.capitulos > li > span.capitulos__n, :root span.mini > span.sello > span.sello__t, :root span.video__tx > span.video__meta > span.video__handle, :root span.video__tx > span.video__meta > span.video__nicho { line-height: 1.4 !important; } /* H3: 1.1 */ :root div.caja__pantalla > div.caja__id > h3.caja__t, :root div.caso__cuerpo > div.caso__texto > h3:not([class]), :root div.hero__centro > h1.hero__h1 > span.hero__linea, :root div.rodaje-bloque > header.cab > h3:not([class]), :root div.vp__abajo > div.reel__id > p#reel-canal { line-height: 1.1 !important; } /* Botón: 1.2 */ :root a.mq-item > span > b:not([class]), :root div.caso__cabeza > div > span.caso__canal, :root div.hilo__q > div.hilo__q-cuerpo > h3.hilo__txt, :root figure.equipofoto > figcaption.equipofoto__pie > b:not([class]), :root span.mq-item > span > b:not([class]) { line-height: 1.2 !important; } /* H1 y H2: 1.02 */ :root figure.fmt__win > div.fmt__cuerpo > h3.fmt__n { line-height: 1.02 !important; } /* Título de ficha: 1.3 */ :root div#rgpd > p.rgpd__corto > b:not([class]), :root div.caso__hitos > a.caso__canallink > span.visually-hidden, :root div.caso__hitos > a.caso__canallink > span:not([class]), :root div.caso__metricas > p.caso__restx > b.num { line-height: 1.3 !important; } /* LH-FIN */ /* Botón del menú móvil: estilo 5 (botón) con su interlineado 1.2, por encima del bloque generado. */ :root nav#menu > a.btn { line-height: 1.2 !important; } /* Enlaces del menú: el scroll-spy les deja class="" y escapan de :not([class]); estilo 4, 1.55. */ :root nav#menu > a:not(.btn) { line-height: 1.55 !important; } /* Páginas legales y de gracias: sus tres estilos sueltos entran en la escala. Título (Nunito 46) → H2 · apartados (Nunito 18) → H3 · texto (Geist 18) → Texto 17. */ :root .pagina h1 { font-size: var(--e-h2) !important; font-weight: 800; line-height: 1.02 !important; } :root .pagina h2 { font-size: var(--e-h3) !important; font-weight: 800; line-height: 1.1 !important; } :root .pagina p:not(.kicker):not(.gracias__prisa), :root .pagina li { font-size: var(--e-texto) !important; line-height: 1.55 !important; } /* ===== Tercera vuelta (juez 4, 2-oct) ===================================== Botón y énfasis: un solo Geist 600 a 15 px. Vuelve la negrita de los títulos de vídeo, las cifras de resultado, «Ver el canal» y «Protección de datos:» (15/600, como en la publicada) y botones, nombres y preguntas pasan de 17 a 15 con el mismo grosor. Los botones tienen alto fijo: no cambian de alto. */ :root .btn, :root .btn *, :root .hilo__txt, :root .mq-item b, :root .caso__canal, :root .equipofoto__pie b, :root .video__tx .video__tit, :root .caso__restx b.num, :root .caso__canallink > span:not([class]), :root .rgpd__corto b { font-family: var(--f-text) !important; font-size: var(--e-boton) !important; font-weight: 600 !important; } :root .video__tx .video__tit { line-height: 1.3 !important; } /* Micro: la tira de vídeos de cada caso sale del mono. Letra de texto como en la publicada, su recorte de 2 líneas (el de site.css) y el mismo alto de línea: 2 × 10,5 × 1,5 = 31,5 px (publicada 2 × 12 × 1,32 = 31,7). */ :root .caso .vtira__t { font-family: var(--f-text) !important; font-size: 14px !important; /* 08-oct (Análisis web v2, 3.4-B): de 10,5 a 14 px */ font-weight: 600 !important; letter-spacing: -0.01em; line-height: 1.4 !important; /* 08-oct (revisión): sin recorte. Los títulos más largos (~85 car.) caben en 3-5 líneas y el PDF pide que se lean enteros. */ display: block !important; -webkit-line-clamp: unset; line-clamp: none; overflow: visible !important; } /* En el móvil, cada vídeo en su fila (miniatura + título) para que el título a 14 px no se corte en una columna de 110 px. */ @media (max-width: 619px) { /* Zona táctil de 44 px también en «Ver la respuesta» de las preguntas. */ :root .hilo__toggle { min-height: 44px; } :root .caso .vtira { grid-template-columns: minmax(0, 1fr); gap: .75rem; } :root .caso .vtira__it { grid-template-columns: 132px minmax(0, 1fr); column-gap: .75rem; align-items: center; } :root .caso .vtira__it > .vtira__m { grid-column: 2; } } /* Etiqueta: «Recibido, …» tras enviar (mono 13 → mono 12, una línea). */ :root .premio__t { font-size: var(--e-etiqueta) !important; } /* Gracias: los tres pasos vuelven a Texto pequeño (15, como en la publicada): a 17 «Leemos tu mensaje y abrimos el canal.» se cortaba contra el borde a 390. */ :root .pagina .pasos-simple li { font-size: var(--e-pequeno) !important; } /* Equipo a 390: la descripción (Texto pequeño) en 2 líneas como las demás. */ @media (max-width: 640px) { :root .equipofoto__pie span:not(.equipofoto__cargo) { letter-spacing: -0.03em; } } /* Tarjeta de casos: la misma altura que la publicada (±4 px a 390). Las etiquetas en mono de la tarjeta recuperan su alto de línea de 19 px, «Ver el canal» el de 24 px y el nombre del canal el de 23 (ajuste de caja anotado en ESCALA.md). Especificidad alta a propósito: el bloque de interlineados generado usa selectores largos. */ :root:root .caso.caso.caso p.caso__rotulo, :root:root .caso.caso.caso .win__title, :root:root .caso.caso.caso .win__time, :root:root .caso.caso.caso .casofoto__pie, :root:root .caso.caso.caso .caso__handle, :root:root .caso.caso.caso .sello__t, :root:root .caso.caso.caso .tag { line-height: 19px !important; } :root:root .caso.caso.caso .caso__canal { line-height: 23px !important; } :root:root .caso.caso.caso .caso__canallink, :root:root .caso.caso.caso .caso__canallink > span { line-height: 24px !important; } /* Navegación entre páginas legales: Texto pequeño, y la página actual en Botón y énfasis (15/600), como en la publicada. */ :root .legal-nav a { font-size: var(--e-pequeno) !important; } :root .legal-nav a[aria-current="page"] { font-size: var(--e-boton) !important; font-weight: 600 !important; }