/* Growth Lab — hoja única.
Orden de cascada: tokens → base → componentes → secciones → motion.
Un solo fichero a propósito: eran cinco en serie y las cinco
peticiones bloquean el primer pintado una detrás de otra (~750 ms).
Cada bloque va marcado con su banner. */
/* ============================================================
============ TOKENS ============
============================================================ */
/* Growth Lab — variables de marca.
Los colores salen del logo (muestreados del original). Cuando lleguen los
corporativos definitivos solo hay que tocar este bloque. */
:root {
/* Marca */
--coral: #EA585B;
--coral-deep: #D4474B;
--coral-soft: #EE7B80;
/* Mismo family de color que --coral, pero oscurecido para texto pequeño
sobre el crema de fondo (contraste AA, 4.5:1+); el --coral plano se
queda para superficies grandes (botones, barra de progreso). */
--coral-ink: #C43A3E;
--rose: #F3ADAF;
--rose-mist: #FBE4E4;
--ink: #16172C;
--navy: #14122B;
--star: #F5C518;
/* Fondo cálido (mismo crema que usa su software interno) */
--cream: #F7F5F2;
--cream-deep: #F1EDE7;
--paper: #FFFFFF;
/* Texto: siempre tinta con alfa, nunca un gris plano.
Regla de contraste sobre el crema #F7F5F2 (medido, WCAG 2.1):
--tx-2 .66 → 5,5:1 texto secundario y metadatos (pasa AA)
--tx-3 .62 → 4,8:1 letra pequeña con INFORMACIÓN (fuentes, fechas)
--tx-chrome .44 → 2,8:1 SOLO chrome sin información (la «x» de una
ventana, «HD», un nombre de archivo)
--tx-4 .22 SOLO líneas, bordes y separadores. Nunca texto. */
--tx-1: var(--ink);
--tx-2: rgba(22, 23, 44, 0.66);
--tx-3: rgba(22, 23, 44, 0.62);
--tx-chrome: rgba(22, 23, 44, 0.44);
--tx-4: rgba(22, 23, 44, 0.22);
--line: rgba(22, 23, 44, 0.10);
--line-soft: rgba(22, 23, 44, 0.06);
/* Sobre fondo navy */
--on-navy-1: #FFFFFF;
--on-navy-2: rgba(255, 255, 255, 0.66);
--on-navy-3: rgba(255, 255, 255, 0.40);
--on-navy-line: rgba(255, 255, 255, 0.14);
/* Cristal */
--glass-tint: rgba(255, 255, 255, 0.52);
--glass-tint-strong: rgba(255, 255, 255, 0.74);
--glass-edge: rgba(255, 255, 255, 0.72);
--glass-blur: 24px;
/* Tipografía — TRES familias y una regla para cada una:
--f-marca / --f-display Nunito ExtraBold, la letra del LOGO: el nombre
grande del hero y TODOS los titulares. Antes
había una cuarta (Bricolage) solo para los h2:
dos display sin regla visible es ruido, y el
salto de peso dejaba los h2 a media potencia.
--f-text Geist, todo el texto corrido.
--f-mono Geist Mono tabular, TODAS las cifras.
Arial aparte, y solo en el chrome de época (barra de búsqueda, barras de
título de las ventanas flotantes): ahí es el disfraz, no la tipografía. */
--f-marca: "Nunito", "Trebuchet MS", "Avenir Next", system-ui, sans-serif;
--f-display: "Nunito", "Trebuchet MS", "Avenir Next", system-ui, sans-serif;
--f-text: "Geist", system-ui, -apple-system, sans-serif;
--f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* Revisión v2 (PLAN 2.15): una sola letra de interfaz; Arial fuera. */
--f-chrome: "Geist", system-ui, -apple-system, sans-serif;
--t-hero: clamp(2.6rem, 6.6vw, 5.9rem);
--t-h2: clamp(2.4rem, 4.6vw, 4rem);
--t-h3: clamp(1.3rem, 2vw, 1.7rem);
--t-lead: clamp(1.05rem, 1.25vw, 1.2rem);
--t-body: 1.0625rem;
--t-small: 0.9375rem;
--t-micro: 0.75rem;
--t-label: 0.8125rem; /* etiquetas, pestañas, datos pequeños; los botones usan --t-small */
/* Rejilla de 8 */
--s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem;
--s5: 3rem; --s6: 4rem; --s7: 6rem; --s8: 8rem;
--s9: 10rem;
/* Tres radios y ni uno más: ventana/miniatura 8, tarjeta 12, píldora 999,
y 22 solo en paneles de cristal de más de 600 px. Cada radio suelto de
más (6, 10, 12 repartidos) diluye la identidad del material. */
--r-win: 8px; /* ventana-player y miniatura */
--r-thumb: 8px;
--r-card: 12px; /* tarjeta (paso del método, panel del roster) */
--r-panel: 22px; /* panel grande de cristal */
--r-pill: 999px;
--shadow-soft: 0 1px 2px rgba(22,23,44,.04), 0 8px 20px rgba(22,23,44,.06);
--shadow-lift: 0 2px 4px rgba(22,23,44,.05), 0 18px 44px rgba(22,23,44,.10);
--shadow-deep: 0 4px 10px rgba(22,23,44,.06), 0 34px 80px rgba(22,23,44,.16);
--ease: cubic-bezier(.16, 1, .3, 1);
--ease-in-out: cubic-bezier(.62, .05, .3, 1);
--wrap: 1280px;
--wrap-narrow: 920px;
/* Altura de los botones: un solo sistema con tres tamaños. */
--btn-sm: 36px;
--btn-md: 48px;
--btn-lg: 56px;
/* Una sola fila de 52 px; en móvil sube a 60 px para que el logotipo quepa
a 44 px de alto y se lea «influentia Growth Lab» de un vistazo. */
--header-h: 56px;
--logo-h: 40px;
/* Alto REAL de la cabecera: lo reescribe js/ui.js con un ResizeObserver
sobre #hdr. El valor de aquí es el respaldo si no hay JavaScript. */
--hdr-h: 52px;
}
/* En móvil el desenfoque baja a 14 px: con seis u ocho cristales a la vez
es lo que separa un scroll a 60 fps de uno a tirones. */
@media (max-width: 860px) {
:root { --glass-blur: 14px; --t-lead: 1.02rem; }
}
@media (max-width: 820px) {
:root { --header-h: 62px; --logo-h: 44px; --btn-sm: 44px; }
}
/* ============================================================
============ BASE ============
============================================================ */
/* Tipografía autohospedada, reset y rejilla base */
/* ------------------------------------------------------------------
Nunito — la fuente del LOGO.
El wordmark «Growth Lab» del logotipo está trazado en Nunito ExtraBold
(medido por superposición en assets/brand/_qa/fuentes-comparativa.png:
Nunito 800 es la ganadora). El titular del hero usa exactamente esa cara,
para que el nombre grande de la página y el de la barra sean la misma
letra. Fichero variable (eje wght 200-1000), OFL 1.1, subconjuntos latin y
latin-ext de Google Fonts, servidos desde assets/fonts/.
`swap`: el texto se ve desde el primer pintado con la cara de respaldo y
salta a Nunito en cuanto llega. Nunca se queda sin la fuente de marca,
que es justo lo que pasaba con `optional` en un móvil con mala red.
------------------------------------------------------------------ */
@font-face {
font-family: "Nunito";
src: url("../assets/fonts/nunito-latin.woff2") format("woff2");
font-weight: 200 1000;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Nunito";
src: url("../assets/fonts/nunito-latin-ext.woff2") format("woff2");
font-weight: 200 1000;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bricolage Grotesque, FUERA (14-sep-2026). Era la cuarta familia y solo
servía para los h2; con Nunito 800 —la letra del logotipo— los titulares
pegan más fuerte, la página baja a tres familias y se ahorran dos
descargas de fuente en el primer pintado. Los .woff2 siguen en
assets/fonts/ por si hiciera falta volver. */
@font-face { font-family: "Geist"; src: url("../assets/fonts/geist-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../assets/fonts/geist-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../assets/fonts/geist-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../assets/fonts/geist-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../assets/fonts/geist-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
html {
overflow-x: clip;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--cream);
color: var(--tx-1);
font-family: var(--f-text);
font-size: var(--t-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* «clip» y no «hidden»: hidden convierte el body en contenedor de scroll y
la cabecera sticky deja de pegarse. */
overflow-x: clip;
}
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }
::selection { background: var(--rose-mist); color: var(--ink); }
h1, h2, h3, h4 {
font-family: var(--f-display);
font-weight: 800;
line-height: 1.02;
letter-spacing: -0.025em;
margin: 0;
text-wrap: balance;
}
h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--coral);
outline-offset: 3px;
border-radius: 4px;
}
img, svg, picture { display: block; max-width: 100%; }
/* `hidden` tiene que ganar SIEMPRE: la regla del navegador
(`[hidden]{display:none}`) la pisa cualquier clase que declare display, y
por eso el estado vacío del buscador (`display:grid`) se veía con la
rejilla llena. */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* Cualquier destino de ancla se para por debajo de la cabecera fija */
:where(main[id], section[id], .hero[id]) { scroll-margin-top: calc(var(--hdr-h) + 16px); }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.section { padding-block: clamp(4.5rem, 9vw, 9.5rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 5vw, 5rem); }
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: -0.02em; }
.lead { font-size: var(--t-lead); color: var(--tx-2); line-height: 1.55; max-width: 52ch; }
.kicker {
font-family: var(--f-mono);
font-size: var(--t-label);
letter-spacing: 0.06em;
color: var(--coral-ink);
text-transform: lowercase;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.kicker::before {
content: "";
width: 0; height: 0;
border-left: 6px solid currentColor;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.visually-hidden {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
position: absolute; left: 1rem; top: -4rem; z-index: 200;
background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: var(--r-pill);
transition: top .2s var(--ease);
}
.skip:focus { top: 1rem; }
/* Luz de fondo: los blobs del logo, muy desenfocados, para que el cristal
tenga algo que refractar. */
.glow {
position: absolute;
border-radius: 50%;
filter: blur(90px);
opacity: .5;
pointer-events: none;
z-index: 0;
}
/* ============================================================
============ COMPONENTES ============
============================================================ */
/* ============================================================
1 · Cristal
Aproximación web al material de cristal líquido: desenfoque de
fondo, borde luminoso, reflejo especular arriba y sombra larga.
============================================================ */
.glass, .glass-strong {
position: relative;
isolation: isolate;
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
backdrop-filter: blur(var(--glass-blur)) saturate(1.7);
border: 1px solid var(--glass-edge);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.92),
inset 0 -1px 0 rgba(255, 255, 255, 0.28),
var(--shadow-lift);
}
.glass { background: linear-gradient(145deg, rgba(255,255,255,.58), rgba(255,255,255,.28)); }
.glass-strong { background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(255,255,255,.58)); }
.glass::after, .glass-strong::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
radial-gradient(130% 90% at 14% -18%, rgba(255,255,255,.72), transparent 48%),
linear-gradient(104deg, rgba(255,255,255,.20) 0 16%, transparent 36%);
z-index: 1;
}
.glass > *, .glass-strong > * { position: relative; z-index: 2; }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
.glass { background: rgba(255,255,255,.92); }
.glass-strong { background: rgba(255,255,255,.97); }
}
@media (prefers-reduced-transparency: reduce) {
.glass { background: rgba(255,255,255,.94); backdrop-filter: none; -webkit-backdrop-filter: none; }
.glass-strong { background: rgba(255,255,255,.98); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Cristal sobre el bloque navy */
.on-navy .glass {
background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
border-color: rgba(255,255,255,.20);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.34),
inset 0 -1px 0 rgba(255,255,255,.08),
0 24px 60px rgba(0,0,0,.34);
}
.on-navy .glass::after {
background:
radial-gradient(130% 90% at 14% -18%, rgba(255,255,255,.28), transparent 46%),
linear-gradient(104deg, rgba(255,255,255,.10) 0 16%, transparent 34%);
}
/* ============================================================
2 · Botones — UN SOLO SISTEMA
Había dos: el `.gel` del hero (calco literal del gel Aqua de la
referencia: brillo sólido en la mitad de arriba, 74 px de alto) y
el `.btn` de todo lo demás, con otra altura, otra letra y otro
reparto de sombras. Uno al lado del otro no eran el mismo botón.
Ahora es uno: píldora, tres tamaños (--sm 36 · base 48 · --lg 56)
y tres variantes (primary coral · glass · ghost).
El material es el NUESTRO, no el de ellos: el coral va plano con
un filete especular de 1 px arriba, no con el capuchón de gel.
============================================================ */
.btn {
--btn-h: var(--btn-md);
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
min-height: var(--btn-h);
padding: 0 1.35rem;
border-radius: var(--r-pill);
font-size: var(--t-small);
font-weight: 500;
letter-spacing: -0.012em;
line-height: 1.2;
white-space: nowrap;
color: var(--ink);
background: rgba(255,255,255,.66);
-webkit-backdrop-filter: blur(16px) saturate(1.6);
backdrop-filter: blur(16px) saturate(1.6);
border: 1px solid rgba(255,255,255,.72);
box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--shadow-soft);
transition: transform .22s var(--ease), box-shadow .22s var(--ease),
background-color .22s var(--ease), filter .22s var(--ease);
overflow: hidden;
}
.btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--shadow-lift); }
.btn:active { transform: translateY(0) scale(.985); }
/* Coral plano + filete especular: mismo material que el resto del sitio. */
.btn--primary {
color: #fff;
background: linear-gradient(180deg, var(--coral-soft), var(--coral));
border-color: rgba(255,255,255,.42);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 1px 2px rgba(22,23,44,.10),
0 10px 22px rgba(196,58,62,.16);
}
.btn--primary:hover {
background: linear-gradient(180deg, var(--coral), var(--coral-deep));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 2px 4px rgba(22,23,44,.12),
0 16px 34px rgba(196,58,62,.22);
}
/* Brillo que cruza el botón principal (sheen) */
.btn--primary::before {
content: "";
position: absolute;
inset: -40% -10%;
background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.4) 50%, transparent 62%);
transform: translateX(-120%);
pointer-events: none;
z-index: 1;
}
.btn--primary:hover::before { animation: sheen 1.1s var(--ease); }
@keyframes sheen { to { transform: translateX(120%); } }
.btn > * { position: relative; z-index: 2; }
/* Cristal de verdad: el secundario del hero y los enlaces de contacto. */
.btn--glass {
background: linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,255,255,.34));
-webkit-backdrop-filter: blur(20px) saturate(1.7);
backdrop-filter: blur(20px) saturate(1.7);
border-color: var(--glass-edge);
}
.btn--ghost { background: transparent; border-color: var(--line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.btn--ghost:hover { background: rgba(255,255,255,.6); }
/* Sobre navy, el cristal se invierte */
.on-navy .btn:not(.btn--primary) {
color: var(--on-navy-1);
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 26px rgba(0,0,0,.28);
}
.btn--sm { --btn-h: var(--btn-sm); padding: 0 1rem; font-size: var(--t-label); }
.btn--lg { --btn-h: var(--btn-lg); padding: 0 1.75rem; font-size: var(--t-body); }
.btn--block { width: 100%; }
.btn__play { width: 9px; height: 11px; flex: none; }
.btn__play path { fill: currentColor; }
.btn__ico { width: 15px; height: 15px; flex: none; }
.btn__ico path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) {
.hero__botones .btn { width: 100%; --btn-h: 60px; }
}
/* ============================================================
3 · Ventana-player
Cada bloque de contenido vive dentro de un reproductor: barra de
título con el "nombre del vídeo", cuerpo, y pie con la barra roja.
============================================================ */
.win {
position: relative;
border-radius: var(--r-win);
overflow: hidden;
}
.win__bar {
display: flex;
align-items: center;
gap: .6rem;
padding: .5rem .85rem;
border-bottom: 1px solid rgba(255,255,255,.55);
background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.14));
min-height: 36px;
}
.on-navy .win__bar { border-bottom-color: rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)); }
.win__title {
font-family: var(--f-mono);
font-size: var(--t-micro);
letter-spacing: -0.01em;
color: var(--tx-chrome);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.on-navy .win__title { color: var(--on-navy-3); }
.win__tags { margin-left: auto; display: flex; align-items: center; gap: .4rem; flex: none; }
.tag {
font-family: var(--f-mono);
font-size: 9.5px;
letter-spacing: .04em;
padding: .16rem .38rem;
border-radius: 3px;
border: 1px solid var(--line);
color: var(--tx-chrome);
line-height: 1.3;
}
.tag--hd { border-color: rgba(196,58,62,.32); color: var(--coral-ink); }
.on-navy .tag { border-color: var(--on-navy-line); color: var(--on-navy-3); }
.win__body { padding: clamp(1.25rem, 2.4vw, 2rem); }
.win__foot {
display: flex;
align-items: center;
gap: .7rem;
padding: .55rem .85rem .7rem;
border-top: 1px solid rgba(255,255,255,.5);
}
.on-navy .win__foot { border-top-color: rgba(255,255,255,.10); }
.ctrl { width: 15px; height: 15px; flex: none; color: var(--tx-chrome); }
.on-navy .ctrl { color: var(--on-navy-3); }
.ctrl path, .ctrl polygon { fill: currentColor; }
.ctrl--stroke path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.progress {
flex: 1;
height: 4px;
border-radius: 2px;
background: rgba(22,23,44,.12);
overflow: hidden;
}
.on-navy .progress { background: rgba(255,255,255,.16); }
.progress__fill {
display: block;
height: 100%;
width: 100%;
border-radius: 2px;
background: var(--coral);
box-shadow: 0 0 8px rgba(234,88,91,.55);
transform: scaleX(0);
transform-origin: left;
transition: transform .35s var(--ease);
}
.win__time { font-family: var(--f-mono); font-size: 10.5px; color: var(--tx-chrome); flex: none; }
.on-navy .win__time { color: var(--on-navy-3); }
/* ============================================================
4 · Píldoras (tamaño de canal del formulario)
============================================================ */
.pill {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .44rem .9rem;
border-radius: var(--r-pill);
font-size: var(--t-small);
color: var(--tx-2);
background: rgba(255,255,255,.5);
border: 1px solid rgba(255,255,255,.7);
-webkit-backdrop-filter: blur(12px) saturate(1.5);
backdrop-filter: blur(12px) saturate(1.5);
box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 3px rgba(22,23,44,.05);
transition: color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
white-space: nowrap;
}
.pill:hover { transform: translateY(-1px); color: var(--tx-1); }
.pill[aria-pressed="true"], .pill.is-on {
background: var(--ink);
border-color: rgba(255,255,255,.16);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px rgba(22,23,44,.18);
}
.pill__n { font-family: var(--f-mono); font-size: var(--t-micro); opacity: .6; }
/* ============================================================
5 · Tarjeta de vídeo (la pieza del roster: un vídeo de YouTube)
============================================================ */
.mini {
position: relative;
display: block;
border-radius: var(--r-thumb);
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--navy);
isolation: isolate;
}
.mini__foto {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: auto;
max-width: none;
object-fit: cover;
transform-origin: 72% 50%;
/* sombra al canto izquierdo: funde la foto nítida con la copia borrosa */
box-shadow: -24px 0 36px -14px rgba(8, 7, 20, .55);
transition: transform .55s var(--ease);
}
.mini__velo {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(8,7,20,.62) 0%, rgba(8,7,20,.3) 46%, rgba(8,7,20,0) 74%),
linear-gradient(180deg, rgba(8,7,20,0) 58%, rgba(8,7,20,.42));
pointer-events: none;
}
.mini__rotulo {
position: absolute;
left: 6.5%;
top: 50%;
translate: 0 -50%;
max-width: 46%;
margin: 0;
overflow-wrap: anywhere;
font-family: var(--f-display);
font-weight: 800;
font-size: var(--t-lead);
line-height: .94;
letter-spacing: -0.035em;
text-transform: uppercase;
color: #fff;
-webkit-text-stroke: 3px rgba(8, 7, 20, .45);
paint-order: stroke fill;
text-shadow: 0 2px 12px rgba(8, 7, 20, .55);
}
/* Una palabra larga («ENTRETENIMIENTO») no se parte: baja de cuerpo */
.mini__rotulo--largo { font-size: var(--t-small); letter-spacing: -0.02em; }
.mini__dur {
position: absolute;
right: 7px;
bottom: 9px;
font-family: var(--f-mono);
font-size: var(--t-micro);
font-weight: 500;
color: #fff;
background: rgba(10, 9, 22, .8);
padding: .1rem .34rem;
border-radius: 4px;
letter-spacing: -0.01em;
}
/* La chapa del canal recién abierto: la misma pastilla, pero espaciada para
que se lea como una etiqueta y no como una cifra a medio cargar. */
.mini__dur--nuevo { letter-spacing: .08em; font-weight: 600; }
/* El play de hover: el rectángulo rojo del reproductor clásico, NUNCA un
círculo de cristal translúcido centrado sobre la cara del creador (sobre
una miniatura clara no se veía, y caía justo encima de la cabeza). Va
abajo a la izquierda, sobre el tercio que está libre de rótulo. */
.mini__play {
position: absolute;
left: 12px;
bottom: 12px;
height: 34px;
padding: 0 .7rem 0 .55rem;
border-radius: var(--r-win);
display: inline-flex;
align-items: center;
gap: .42rem;
background: linear-gradient(180deg, #EE4A4F 0%, #DE3338 48%, #C1262B 100%);
border: 1px solid rgba(120, 20, 24, .38);
box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 6px 18px rgba(0,0,0,.28);
opacity: 0;
translate: 0 6px;
transition: opacity .24s var(--ease), translate .24s var(--ease);
}
.mini__play-ico { display: grid; place-items: center; width: 11px; flex: none; }
.mini__play-ico svg { width: 11px; height: 13px; }
.mini__play-ico svg path { fill: #fff; }
.mini__play-t { font-size: var(--t-label); font-weight: 500; letter-spacing: -0.012em; color: #fff; white-space: nowrap; }
/* La barra roja de «vídeo empezado»: solo aparece al pasar por encima */
.mini__barra {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: rgba(255, 255, 255, .28);
opacity: 0;
transition: opacity .2s var(--ease);
}
/* La barra avanza con scaleX: nada de animar width (eso es layout). */
.mini__barra i { display: block; height: 100%; width: 100%; background: #E1373D; transform: scaleX(0); transform-origin: left center; transition: transform .7s var(--ease); }
/* Con la miniatura del set (16:9, el creador en el tercio derecho y el
izquierdo libre) no hace falta ni el relleno desenfocado ni oscurecer la
mitad izquierda: el rótulo va en tinta sobre el fondo claro. */
.mini--uni .mini__foto { position: absolute; inset: 0; right: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: center; box-shadow: none; }
.mini--uni .mini__velo { background: linear-gradient(180deg, rgba(8,7,20,0) 64%, rgba(8,7,20,.30)); }
.mini--uni .mini__rotulo { color: var(--navy); -webkit-text-stroke: 0; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
/* Miniatura de ESCENA: un fotograma del canal (o, en José Elías, una foto
real de su rodaje), no el retrato de estudio con el tercio izquierdo vacío.
La foto puede ser un plató a oscuras o un trastero a pleno sol, así que el
rótulo no puede depender de ella: va en blanco, con velo por la izquierda
—donde cae el texto— y con perfil oscuro, que es lo único que aguanta en
los dos extremos. */
.mini--escena .mini__rotulo {
color: #fff;
-webkit-text-stroke: 3px rgba(8, 7, 20, .42);
paint-order: stroke fill;
text-shadow: 0 2px 14px rgba(8, 7, 20, .72);
}
.mini--escena .mini__velo {
background:
linear-gradient(90deg, rgba(8,7,20,.58) 0%, rgba(8,7,20,.26) 48%, rgba(8,7,20,0) 74%),
linear-gradient(180deg, rgba(8,7,20,0) 60%, rgba(8,7,20,.34));
}
/* ---- La previsualización: los últimos vídeos DE ESE canal ----
Al pasar por encima, la miniatura deja de ser una foto y pasa los vídeos
que el canal acaba de publicar, con la barra roja avanzando debajo. Es lo
que separa un catálogo de logos de siete canales que están publicando.
Las capas van APILADAS y se cruzan con opacidad: nada de mover nodos ni
cambiar el `src` de una sola imagen (eso parpadea en blanco en WebKit). */
.mini__prev { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .3s var(--ease); }
.mini.is-previo .mini__prev { opacity: 1; }
.mini__prev-i {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity .26s var(--ease);
}
.mini__prev-i.is-on { opacity: 1; }
/* Con la previsualización puesta, el velo se aclara y el rótulo del nicho se
retira: la miniatura de un vídeo ya trae su propio texto quemado dentro y
dos titulares superpuestos no se leen ninguno. */
.mini.is-previo .mini__velo { background: linear-gradient(180deg, rgba(8,7,20,0) 62%, rgba(8,7,20,.42)); z-index: 2; }
.mini.is-previo .mini__rotulo { opacity: 0; }
.mini__rotulo { transition: opacity .24s var(--ease); }
.video { position: relative; display: block; }
/* El disparador del panel ocupa la miniatura entera; el pie de la tarjeta
queda fuera para que el menú de los tres puntos sea pulsable. */
.video__abrir { display: block; width: 100%; padding: 0; text-align: left; border-radius: var(--r-thumb); }
.video__acc { position: relative; }
.video:hover .mini__foto { transform: scale(1.03); }
.video:hover .mini__play, .video:focus-visible .mini__play, .video:focus-within .mini__play { opacity: 1; translate: 0 0; }
.video:hover .mini__barra, .video:focus-visible .mini__barra { opacity: 1; }
.video:hover .mini__barra i, .video:focus-visible .mini__barra i { transform: scaleX(.38); }
/* Mientras pasan los vídeos, la barra la manda el JS (avanza un tramo por
miniatura) y la placa de «ver su canal» se aparta: el gesto ya se está
contestando con la propia previsualización. */
.mini.is-previo .mini__barra { opacity: 1; }
.mini.is-previo .mini__play { opacity: 0; translate: 0 6px; }
.video.is-oculta { display: none; }
/* ---- Tilt ----
El giro va en la MINIATURA, no en la tarjeta: `.video` ya lleva el
`transform` de la entrada (`[data-rev]`) y dos transformaciones en el mismo
elemento se pisan. Las variables sí viven en `.video`, que es donde las
escribe js/creadores.js, y bajan por herencia.
6° es el tope: `--tx` y `--ty` llegan de −0,5 a 0,5, así que ×12 dan ±6. */
.video, .fmt { --tx: 0; --ty: 0; }
.mini, .fmt__win {
transform: perspective(900px)
rotateX(calc(var(--ty) * -12deg))
rotateY(calc(var(--tx) * 12deg));
transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* Mientras el puntero está encima, el giro sigue al ratón sin inercia; al
salir, la vuelta a cero sí es larga. */
.video.is-tilt .mini, .fmt.is-tilt .fmt__win { transition: transform .1s linear, box-shadow .1s linear; }
/* La sombra se va al lado contrario del giro: es lo que hace que la tarjeta
parezca levantada y no un dibujo inclinado. */
.video.is-tilt .mini {
box-shadow: calc(var(--tx) * -22px) calc(12px + var(--ty) * -12px) 34px rgba(22, 23, 44, .22);
}
.fmt.is-tilt .fmt__win {
box-shadow: calc(var(--tx) * -18px) calc(14px + var(--ty) * -10px) 40px rgba(22, 23, 44, .18);
}
@media (hover: none), (pointer: coarse) {
.mini, .fmt__win { transform: none; }
}
.video__pie {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) 32px;
align-items: start;
gap: .7rem;
margin-top: .72rem;
}
.video__av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--cream-deep); }
.video__tit {
font-family: var(--f-text);
font-size: var(--t-small);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.012em;
color: var(--tx-1);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* La prueba de la sección son estas dos líneas (handle, suscriptores,
visualizaciones): iban al 44 % de tinta, o sea 2,8:1, pintadas como letra
legal. Ahora el texto va a --tx-2 y las CIFRAS en tinta plena. */
.video__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .3rem;
margin-top: .28rem;
font-size: var(--t-label);
color: var(--tx-2);
}
.video__meta .num { color: var(--tx-1); font-weight: 500; }
.video__handle { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: -0.02em; }
.video__check { width: 13px; height: 13px; margin-left: -.14rem; fill: var(--tx-2); }
.video__meta--2 { margin-top: .12rem; }
/* Lo último que ha publicado ese canal. Una línea, con el titular de verdad
entrecomillado y recortado: la tarjeta pasa de ficha de catálogo a canal
vivo sin robarle sitio al título. Sin actividad leída, no existe. */
.video__ultimo {
display: flex;
align-items: baseline;
gap: .3rem;
margin-top: .34rem;
min-width: 0;
font-size: var(--t-label);
color: var(--tx-2);
}
/* El punto que late en la línea del último vídeo. Dice «este canal está
publicando», no «está en directo»: por eso no lleva ninguna palabra al
lado y el texto que sigue es «hace 2 días», que es el dato real. */
.video__vivo {
flex: none;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--coral);
box-shadow: 0 0 0 0 rgba(234, 88, 91, .45);
animation: late 2.4s var(--ease) infinite;
}
@keyframes late {
0%, 62%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 91, .45); }
18% { box-shadow: 0 0 0 5px rgba(234, 88, 91, 0); }
}
.video__ultimo-k { flex: none; font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tx-2); }
.video__ultimo-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx-1); }
.video__ultimo-c { flex: none; font-size: var(--t-micro); }
/* Los tres puntos: un mando de verdad (abre canal / copia el enlace), no un
afordance falso metido dentro de un enlace. */
.video__mas {
display: grid;
place-items: center;
width: 32px;
height: 32px;
margin: -4px -6px 0 0;
border-radius: var(--r-pill);
color: var(--tx-chrome);
transition: color .2s var(--ease), background-color .2s var(--ease);
}
.video__mas svg { width: 16px; height: 16px; fill: currentColor; }
.video__mas:hover, .video__mas[aria-expanded="true"] { color: var(--tx-1); background: rgba(22,23,44,.07); }
/* El menú que abre */
.menu {
position: absolute;
right: 0;
z-index: 20;
min-width: 190px;
padding: .3rem;
border-radius: var(--r-card);
background: rgba(255,255,255,.92);
-webkit-backdrop-filter: blur(18px) saturate(1.6);
backdrop-filter: blur(18px) saturate(1.6);
border: 1px solid var(--glass-edge);
box-shadow: var(--shadow-lift);
}
.menu button, .menu a {
display: flex;
align-items: center;
gap: .55rem;
width: 100%;
min-height: 40px;
padding: 0 .7rem;
border-radius: 8px;
font-size: var(--t-small);
color: var(--tx-1);
text-align: left;
}
.menu button:hover, .menu a:hover { background: rgba(22,23,44,.06); }
.menu svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--tx-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* ============================================================
6 · Las cinco estrellas de valoración del YouTube de 2010
SOLO como chrome de época (la pegatina del hero). En la tarjeta de un
creador significarían «este cliente nos puntúa 5/5», que es una
valoración que no existe: ahí fuera.
============================================================ */
.stars { display: inline-flex; gap: 2px; min-height: 13px; }
.stars svg { width: 13px; height: 13px; }
.stars svg path { fill: var(--tx-4); transition: fill .3s var(--ease); }
.stars.is-lit svg path { fill: var(--star); }
/* ============================================================
7 · Formulario
============================================================ */
.field { display: flex; flex-direction: column; gap: .4rem; }
.field > label { font-size: var(--t-label); font-weight: 500; color: var(--tx-2); }
.field .hint { font-size: var(--t-label); color: var(--tx-2); }
.field .err { font-size: var(--t-label); color: var(--coral-ink); min-height: 1.1em; }
.input, .textarea {
width: 100%;
padding: .78rem .95rem;
border-radius: 10px;
background: rgba(255,255,255,.72);
border: 1px solid var(--line);
box-shadow: inset 0 1px 2px rgba(22,23,44,.05);
transition: border-color .2s var(--ease), background-color .2s var(--ease);
font-size: var(--t-small);
}
.input::placeholder, .textarea::placeholder { color: var(--tx-3); }
.input:focus, .textarea:focus { border-color: var(--coral); background: #fff; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--coral-ink); }
.textarea { resize: vertical; min-height: 108px; line-height: 1.5; }
.sizes { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Fuera de la vista pero vivo para el teclado. `pointer-events: none` no
es cosmético: los tres radios se apilan en la esquina del panel (son
absolutos) y sin esto queda ahí un punto de 1 px que marca el último
de la lista sin que nadie lo vea. */
.sizes input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sizes label { cursor: pointer; }
.sizes input:checked + label { background: var(--ink); border-color: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px rgba(22,23,44,.18); }
.sizes input:focus-visible + label { outline: 2px solid var(--coral); outline-offset: 3px; }
/* ============================================================
8 · Marquee
============================================================ */
/* La máscara se cierra en los primeros y últimos 4 %: con el 9 % anterior,
una cara entraba en la tira ya partida a media opacidad y parecía un fallo
de carga en vez de una cinta. */
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.marquee__track { display: flex; width: max-content; animation: slide 60s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
.mq-item { display: flex; align-items: center; gap: .65rem; padding: .45rem .95rem; margin-right: .5rem; border-radius: var(--r-pill); flex: none; }
/* 40 px: a 30 no se reconocía a nadie, que es justo para lo que existe la tira. */
.mq-item img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--cream-deep); }
.mq-item b { font-size: var(--t-small); font-weight: 500; letter-spacing: -0.015em; }
/* La pieza de un FORMATO: misma caja que la de un canal, pero en lugar de la
cara va una placa de vídeo —no hay foto de estos formatos y no se pone una
de otro rodaje— y la etiqueta dice lo que es. */
.mq-item--formato b { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.01em; }
.mq-item--formato i { color: var(--coral-ink); }
.mq-item__ico {
width: 40px; height: 40px; flex: none;
display: grid; place-items: center;
border-radius: 9px;
background: radial-gradient(120% 120% at 24% 0%, rgba(234,88,91,.42), transparent 62%), var(--navy);
}
.mq-item__ico svg { width: 10px; height: 12px; fill: #fff; }
.mq-item i { font-family: var(--f-mono); font-size: var(--t-label); font-style: normal; color: var(--tx-2); }
/* ============================================================
9 · Cinta de llamada a la acción
En móvil había 7.700 px (nueve pantallas) entre el CTA del hero y el
siguiente botón: justo después de ver las caras y las cifras, que es
cuando más caliente está el visitante, no había nada que pulsar.
Va después del roster y después de los casos.
============================================================ */
.cta-cinta {
display: grid;
gap: 1rem;
justify-items: center;
text-align: center;
margin-top: clamp(2rem, 4vw, 3rem);
padding: clamp(1.5rem, 3vw, 2.25rem);
border-radius: var(--r-panel);
}
.cta-cinta p { font-size: var(--t-lead); font-weight: 500; letter-spacing: -0.02em; }
.cta-cinta small { font-size: var(--t-small); color: var(--tx-2); }
.on-navy .cta-cinta small { color: var(--on-navy-2); }
/* ============================================================
10 · Panel del creador
La tarjeta ya no es un enlace a YouTube (nueve puertas de salida en la
sección que existe para generar deseo): abre esta ventana dentro de la
página con lo que hacemos en ese canal, el enlace al canal como
secundario y el CTA como acción principal.
============================================================ */
.panel-fondo {
position: fixed;
inset: 0;
z-index: 120;
display: grid;
place-items: center;
padding: clamp(1rem, 4vw, 2.5rem);
background: rgba(20, 18, 43, .42);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
opacity: 0;
transition: opacity .28s var(--ease);
overflow-y: auto;
}
.panel-fondo.is-abierto { opacity: 1; }
.panel {
width: min(760px, 100%);
max-height: calc(100dvh - 3rem);
overflow-y: auto;
border-radius: var(--r-panel);
background: rgba(255,255,255,.94);
-webkit-backdrop-filter: blur(26px) saturate(1.7);
backdrop-filter: blur(26px) saturate(1.7);
border: 1px solid var(--glass-edge);
box-shadow: inset 0 1px 0 rgba(255,255,255,.92), var(--shadow-deep);
transform: translateY(14px) scale(.985);
transition: transform .32s var(--ease);
}
.panel-fondo.is-abierto .panel { transform: none; }
.panel__bar { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem .5rem .85rem; border-bottom: 1px solid var(--line-soft); }
.panel__x { display: grid; place-items: center; width: 34px; height: 34px; margin-left: auto; border-radius: var(--r-pill); color: var(--tx-2); }
.panel__x:hover { background: rgba(22,23,44,.07); color: var(--tx-1); }
.panel__x svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* ---- La cabecera de canal: banner, avatar encima y la línea de metadatos,
como la página de un canal. El banner es la MISMA foto de escena de la
tarjeta: el panel es su continuación y cambiar de imagen al abrirlo rompía
la sensación de estar mirando el mismo canal. ---- */
.canalcab__banner { position: relative; aspect-ratio: 16/5.6; overflow: hidden; background: var(--navy); }
.canalcab__banner img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.canalcab__fila {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem .85rem;
padding: .75rem clamp(1.25rem, 2.6vw, 1.9rem) .9rem;
}
.canalcab__av {
width: 64px; height: 64px; flex: none;
margin-top: -34px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #fff;
background: var(--cream-deep);
box-shadow: 0 4px 14px rgba(22, 23, 44, .22);
}
.canalcab__txt { flex: 1 1 12rem; min-width: 0; }
.canalcab__n { font-family: var(--f-display); font-weight: 800; font-size: var(--t-h3); letter-spacing: -0.028em; line-height: 1.08; }
.canalcab__m { margin-top: .16rem; font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tx-2); }
/* ---- Las pestañas del canal: filete abajo y el indicador que corre por
debajo de la activa. Envuelven en vez de hacer scroll — una tira que se
arrastra y no tiene nada enfocable dentro deja fuera al teclado. ---- */
.pest {
display: flex;
flex-wrap: wrap;
gap: .15rem;
padding: 0 clamp(1.25rem, 2.6vw, 1.9rem);
border-bottom: 1px solid var(--line);
}
.pest__b {
position: relative;
min-height: 44px;
padding: 0 .8rem;
font-size: var(--t-small);
font-weight: 500;
letter-spacing: -0.012em;
color: var(--tx-2);
border-radius: var(--r-win) var(--r-win) 0 0;
transition: color .2s var(--ease), background-color .2s var(--ease);
}
.pest__b::after {
content: "";
position: absolute;
left: .55rem; right: .55rem; bottom: -1px;
height: 2px;
border-radius: 2px;
background: var(--coral);
transform: scaleX(0);
transition: transform .28s var(--ease);
}
.pest__b:hover { color: var(--tx-1); background: rgba(22,23,44,.04); }
.pest__b[aria-selected="true"] { color: var(--tx-1); }
.pest__b[aria-selected="true"]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .pest__b::after { transition: none; } }
/* A 390 px las tres pestañas caían en dos filas y la tercera se quedaba
descolgada. Con el texto un punto menor y menos relleno caben en una,
sin bajar de los 44 px de alto de toque. */
@media (max-width: 430px) {
.pest { padding-inline: 1rem; }
.pest__b { padding: 0 .55rem; font-size: var(--t-label); }
.pest__b::after { left: .35rem; right: .35rem; }
}
.panel__cuerpo { padding: clamp(1.25rem, 2.6vw, 1.9rem); }
.pest__caja { display: grid; gap: .85rem; }
.pest__d { font-size: var(--t-small); line-height: 1.55; color: var(--tx-1); max-width: 58ch; }
.pest__pie { font-size: var(--t-label); line-height: 1.5; color: var(--tx-2); max-width: 58ch; }
.pest__fuente { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tx-3); }
.pest__caja .kicker { margin-bottom: -.3rem; }
/* Los datos del canal, uno por fila con su filete: el dato en tinta y qué es
debajo, que es como se leen sin tener que comparar columnas. */
.datos { display: grid; margin: 0; padding: 0; list-style: none; }
.datos li { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem; padding: .5rem 0; border-top: 1px solid var(--line-soft); }
.datos li:first-child { border-top: 0; }
.datos b { font-size: var(--t-small); font-weight: 500; color: var(--tx-1); }
.datos li span { font-size: var(--t-label); color: var(--tx-2); }
/* Las tres cajas del catálogo, en versión lista: es lo que entra en
CUALQUIER canal que llevamos, no un entregable de este. */
.boxlist { display: grid; margin: 0; padding: 0; list-style: none; }
.boxlist li { padding: .6rem 0; border-top: 1px solid var(--line-soft); }
.boxlist li:first-child { border-top: 0; }
.boxlist__cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem; }
.boxlist__n { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .1em; color: var(--coral-ink); }
.boxlist__cab b { font-size: var(--t-small); font-weight: 600; letter-spacing: -0.015em; }
.boxlist__f { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tx-2); }
.boxlist__q { margin-top: .2rem; font-size: var(--t-label); line-height: 1.5; color: var(--tx-2); }
.panel__cifras { display: flex; flex-wrap: wrap; gap: 1.25rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.panel__cifras b { display: block; font-family: var(--f-mono); font-size: var(--t-lead); font-weight: 500; letter-spacing: -0.035em; }
.panel__cifras span { font-size: var(--t-label); color: var(--tx-2); }
.panel__acc {
display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
padding: clamp(1rem, 2vw, 1.3rem) clamp(1.25rem, 2.6vw, 1.9rem) clamp(1.25rem, 2.6vw, 1.9rem);
border-top: 1px solid var(--line);
}
.panel__enlace { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-size: var(--t-small); color: var(--coral-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.panel__enlace svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body.sin-scroll { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
.panel-fondo, .panel { transition: none; }
}
/* ============================================================
11 · Línea de tiempo de entregables (Resultados)
Sustituye a las tres curvas: eran la misma potencia matemática con
aspecto de gráfica de YouTube Studio, y estos clientes viven de mirar
analytics. Aquí solo hay cosas que se han entregado de verdad.
============================================================ */
.tiempo { display: grid; gap: 0; }
.tiempo li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .85rem; padding: .7rem 0 .7rem 0; }
.tiempo li::before {
content: "";
position: absolute;
left: 5px; top: 1.5rem; bottom: -.7rem;
width: 1px;
background: rgba(255,255,255,.14);
}
.tiempo li:last-child::before { display: none; }
.tiempo__punto { width: 11px; height: 11px; margin-top: .42rem; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px rgba(234,88,91,.18); }
.tiempo__t { font-size: var(--t-small); color: var(--on-navy-1); }
.tiempo__f { display: block; margin-top: .1rem; font-family: var(--f-mono); font-size: var(--t-micro); color: var(--on-navy-3); }
/* ============================================================
12 · Pegatinas de época del hero
Los tres objetos de cristal (estrella, campana y play de Higgsfield)
eran render fotorrealista brillante dentro de una interfaz plana: la
firma «hecho con IA» de la lista negra. En su lugar, chrome del 2010
dibujado con CSS y SVG propio, en el mismo material que el resto.
============================================================ */
.sus {
display: inline-flex;
align-items: stretch;
border-radius: 4px;
overflow: hidden;
font-family: var(--f-chrome);
border: 1px solid rgba(120, 20, 24, .4);
box-shadow: 0 3px 10px rgba(22,23,44,.16);
}
.sus b {
display: flex; align-items: center; gap: 5px;
padding: 5px 9px;
font-size: var(--t-micro); font-weight: 700; letter-spacing: .02em;
color: #fff;
background: linear-gradient(180deg, #EE4A4F, #C1262B);
text-shadow: 0 1px 1px rgba(110,16,20,.4);
}
.sus b svg { width: 9px; height: 9px; fill: #fff; }
.sus i {
display: flex; align-items: center;
padding: 5px 8px;
font-family: var(--f-mono); font-style: normal; font-size: var(--t-micro);
color: var(--tx-1);
background: linear-gradient(180deg, #FDFDFD, #E9E7E4);
border-left: 1px solid rgba(22,23,44,.18);
}
/* Anotación de 2010: el bocadillo semitransparente sobre el vídeo */
.anota {
position: relative;
padding: 8px 11px 9px;
border-radius: 3px;
font-family: var(--f-chrome);
font-size: var(--t-micro);
line-height: 1.25;
color: var(--ink);
background: rgba(255,255,255,.88);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(22,23,44,.22);
box-shadow: 0 4px 12px rgba(22,23,44,.12);
}
.anota::after {
content: "";
position: absolute;
left: 18px; bottom: -7px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid rgba(255,255,255,.88);
filter: drop-shadow(0 1px 0 rgba(22,23,44,.18));
}
.anota b { font-family: var(--f-mono); font-weight: 500; color: var(--coral-ink); }
/* La valoración de época: cinco estrellas y la nota, en su cajita */
.nota5 {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: 5px 9px;
border-radius: var(--r-pill);
background: rgba(255,255,255,.9);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid var(--line);
box-shadow: 0 3px 10px rgba(22,23,44,.10);
}
.nota5 span { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tx-2); }
/* Mini-miniatura 4:3 con su badge de duración */
.mini43 { border-radius: 4px; overflow: hidden; border: 1px solid rgba(22,23,44,.18); box-shadow: 0 4px 12px rgba(22,23,44,.12); }
.mini43__caja { position: relative; aspect-ratio: 4/3; background: var(--navy); }
.mini43__caja img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini43__dur {
position: absolute; right: 4px; bottom: 4px;
font-family: var(--f-mono); font-size: 9px; line-height: 1.5;
color: #fff; background: rgba(10,9,22,.82);
padding: 0 3px; border-radius: 2px;
}
.mini43__dur--nuevo { letter-spacing: .06em; }
/* ============================================================
13 · El sello «canal que llevamos»
La pieza que responde, sin leer nada, a la única pregunta que importa en
esta web: cuáles de estos canales llevamos nosotros. Misma forma, mismo
texto y misma esquina (arriba a la izquierda) en las nueve piezas donde
sale. Lo que NO es un canal que llevamos —un formato, una foto de rodaje,
una pieza de chrome— no lo lleva NUNCA: la diferencia tiene que verse sin
leer.
El fondo es --coral-ink y no --coral: a 10 px, el coral plano da 3,47:1
sobre blanco y axe lo canta como violación real (la misma razón por la que
se cambió la chapa «cliente» que había antes aquí).
============================================================ */
.sello {
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .2rem .45rem .2rem .25rem;
border-radius: var(--r-pill);
background: var(--coral-ink);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 2px 8px rgba(196,58,62,.3);
white-space: nowrap;
}
/* El blob de la marca, en un disco blanco para que se vea sobre el coral.
Va de fondo CSS: el fichero ya lo pide la barra (.ico--yo), así que no
añade ni una petición. */
.sello__marca {
width: 15px; height: 15px; flex: none;
border-radius: 50%;
background: #fff center / 74% no-repeat url("../assets/brand-web/marca.svg");
}
.sello__t {
font-family: var(--f-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: .04em;
text-transform: lowercase;
}
.sello__ok { width: 11px; height: 11px; flex: none; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
/* Sobre una miniatura: la chapa se posiciona sola en la esquina de arriba a
la izquierda de la pieza que la contiene. */
.mini .sello, .winx__pantalla .sello, .mini43__caja .sello {
position: absolute;
left: 10px; top: 10px;
z-index: 4;
}
/* La entrada del sello en la tarjeta del roster: llega un punto después que
la tarjeta, con un salto corto, y un brillo lo recorre UNA vez. Es la
pieza que responde a «¿y a quién lleváis?», así que merece el único gesto
con acento de la sección; repetido en bucle sería un adorno. */
html.rev-on .video[data-rev]:not(.is-in) .mini .sello { opacity: 0; transform: scale(.7); }
.video[data-rev].is-in .mini .sello {
animation: sello-pop .52s var(--ease) calc(var(--rev-d, 0ms) + 260ms) both;
}
@keyframes sello-pop {
0% { opacity: 0; transform: scale(.7); }
62% { opacity: 1; transform: scale(1.07); }
100% { opacity: 1; transform: scale(1); }
}
/* El brillo: una banda clara que cruza la chapa de izquierda a derecha y no
vuelve. Va en un pseudo recortado por la propia chapa. */
.video .mini .sello { position: absolute; overflow: hidden; }
.video .mini .sello::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 42%;
background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
transform: translate3d(-160%, 0, 0);
pointer-events: none;
}
.video[data-rev].is-in .mini .sello::after {
animation: sello-brillo .85s var(--ease) calc(var(--rev-d, 0ms) + 560ms) 1 both;
}
@keyframes sello-brillo {
from { transform: translate3d(-160%, 0, 0); }
to { transform: translate3d(320%, 0, 0); }
}
.sello--sm { padding: .16rem .4rem .16rem .2rem; }
.sello--sm .sello__marca { width: 13px; height: 13px; }
.sello--sm .sello__t { font-size: 9.5px; }
/* Mini: solo la marca y el check. El texto sigue ahí para quien escucha la
página, salvo que la pieza vaya muda. */
.sello--mini { gap: .14rem; padding: .16rem .26rem .16rem .16rem; }
.sello--mini .sello__marca { width: 13px; height: 13px; }
.sello--mini .sello__ok { width: 9px; height: 9px; }
.winx__pantalla .sello--mini, .mini43__caja .sello--mini { left: 6px; top: 6px; box-shadow: 0 2px 6px rgba(12,8,18,.4); }
.mini43__caja .sello--mini { left: 4px; top: 4px; padding: .1rem .2rem .1rem .1rem; }
.mini43__caja .sello__marca { width: 10px; height: 10px; }
.mini43__caja .sello__ok { width: 7px; height: 7px; }
/* ============================================================
14 · Las caras de los canales que llevamos
Dos tallas de la misma pieza: la fila del hero (40 px, con el número
escrito al lado) y la pila de la barra (22 px, cuatro caras y «+3»).
Las dos son un enlace al roster.
============================================================ */
.caras {
/* Caja de BLOQUE centrada, no `inline-flex`: en línea, el alto de la caja
entra en la línea de texto y cambia con el contenido —al llegar las caras
el botón bajaba un pelo y eso, medido, era un CLS de 0,093—. Como bloque
de alto fijo, el hueco está reservado desde el primer pintado y no se
mueve nada.
Alto FIJO por el mismo motivo: 46 px es exactamente lo que ocupan las
caras de 34 px con su borde y el relleno. */
display: flex;
width: fit-content;
margin-inline: auto;
align-items: center;
gap: .6rem;
height: 46px;
margin-top: clamp(1.1rem, 2vw, 1.6rem);
padding: .22rem .7rem .22rem .22rem;
border-radius: var(--r-pill);
border: 1px solid var(--line);
background: rgba(255,255,255,.7);
transition: border-color .22s var(--ease), background-color .22s var(--ease), transform .22s var(--ease);
}
.caras:hover, .caras:focus-visible { border-color: rgba(196,58,62,.34); background: #fff; }
.caras__pila { display: inline-flex; align-items: center; }
.caras__pila-cara {
width: 34px; height: 34px;
border-radius: 50%;
object-fit: cover;
background: var(--cream-deep);
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(22,23,44,.14);
/* Las caras se solapan como en la lista de la plataforma; la primera queda
encima, así que el orden de pila sigue el de lectura. */
margin-left: -11px;
position: relative;
z-index: calc(20 - var(--i));
transition: transform .26s var(--ease);
}
.caras__pila-cara:first-child { margin-left: 0; }
.caras:hover .caras__pila-cara { transform: translateY(-2px); }
.caras__t { font-size: var(--t-small); color: var(--tx-2); letter-spacing: -0.01em; }
.caras__t .num { color: var(--tx-1); font-weight: 500; font-variant-numeric: tabular-nums; }
/* ---- La fila se MONTA delante del visitante ----
Las caras entran una a una (90 ms de diferencia, `--i` por cara) y el
número sube detrás, un paso por canal. Se hace así y no con una entrada en
bloque porque lo que tiene que entender el visitante en la primera pantalla
es que son SIETE personas, no un grupo indefinido.
Nada de esto mueve la caja: `.caras` tiene alto fijo y el hueco está
reservado desde el primer pintado (el CLS de 0,093 de la ronda 8). */
.caras .caras__pila-cara { opacity: 0; transform: translate3d(0, 6px, 0) scale(.72); }
.caras.is-in .caras__pila-cara {
animation: cara-entra .46s var(--ease) calc(var(--i) * 90ms + 200ms) both;
}
@keyframes cara-entra {
0% { opacity: 0; transform: translate3d(0, 6px, 0) scale(.72); }
70% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.06); }
100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
/* El número, al terminar de contar, da un salto corto: cierra el gesto. */
.caras__t .num.is-hecho { animation: cuenta-cierra .34s var(--ease); }
@keyframes cuenta-cierra {
0% { transform: scale(1); }
45% { transform: scale(1.22); color: var(--coral-ink); }
100% { transform: scale(1); }
}
.caras__t .num { display: inline-block; }
/* En móvil las siete caras y la frase no caben en una línea a tamaño de
escritorio: bajan las caras, se aprieta el solape y la frase se queda
entera en un renglón, que es lo que la hace legible de un vistazo. */
@media (max-width: 430px) {
.caras { gap: .45rem; padding-right: .5rem; height: 42px; }
.caras__pila-cara { width: 28px; height: 28px; margin-left: -10px; border-width: 1.5px; }
.caras__t { font-size: var(--t-label); white-space: nowrap; }
}
.minipila { display: none; align-items: center; flex: none; }
.minipila__p { display: inline-flex; align-items: center; }
.minipila__p-cara {
width: 22px; height: 22px;
border-radius: 50%;
object-fit: cover;
background: var(--cream-deep);
border: 1.5px solid var(--cream);
margin-left: -7px;
position: relative;
z-index: calc(20 - var(--i));
}
.minipila__p-cara:first-child { margin-left: 0; }
.minipila__p-mas { margin-left: .3rem; font-family: var(--f-mono); font-size: 10.5px; color: var(--tx-2); }
.minipila:hover .minipila__p-mas { color: var(--tx-1); }
@media (min-width: 861px) { .minipila { display: inline-flex; } }
/* Al cargar, la mini-pila se recoloca: las cuatro caras llegan apiladas y se
separan hasta su sitio con un rebote corto. Es lo único que se mueve en la
barra, y dura menos de medio segundo: una barra que se mueve todo el rato
compite con la página. */
.minipila .minipila__p-cara { transform: translate3d(calc(var(--i) * 7px), 0, 0); opacity: 0; }
.minipila.is-in .minipila__p-cara {
animation: minipila-abre .5s cubic-bezier(.34, 1.42, .48, 1) calc(var(--i) * 55ms + 320ms) both;
}
@keyframes minipila-abre {
0% { opacity: 0; transform: translate3d(calc(var(--i) * 7px), 0, 0) scale(.8); }
100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
/* ============================================================
15 · Filas de vídeo
La anatomía de la lista de la plataforma: miniatura 16:9 con la duración
en la esquina, título recortado y, debajo, «hace X · N visualizaciones».
Tres tallas: la fila normal (panel), el destacado del más visto y la tira
de tres que va bajo las cifras de Resultados.
Patrón de fila: 21st.dev Item Image #26783 (ver _qa/INSPIRACION.md).
============================================================ */
.vfilas { display: grid; gap: .2rem; }
.vfila, .vtop { display: grid; gap: .7rem; align-items: start; border-radius: var(--r-card); transition: background-color .2s var(--ease); }
.vfila { grid-template-columns: 128px minmax(0, 1fr); padding: .5rem; margin-inline: -.5rem; }
.vfila:hover, .vfila:focus-visible { background: rgba(22,23,44,.05); }
/* El destacado es una fila grande, no un cartel: a ancho completo, un 16:9
de 760 px se come media pantalla del panel y empuja la lista fuera de la
vista. Con dos columnas se lee como lo que es —el vídeo que más ha
funcionado— y la lista de abajo sigue viéndose. */
.vtop { grid-template-columns: minmax(0, 1fr); gap: .55rem; padding: .55rem; margin-inline: -.55rem; }
.vtop:hover, .vtop:focus-visible { background: rgba(22,23,44,.05); }
@media (min-width: 560px) { .vtop { grid-template-columns: 300px minmax(0, 1fr); gap: .85rem; align-items: center; } }
.vfila__mini, .vtop__mini, .vtira__mini {
position: relative;
display: block;
aspect-ratio: 16/9;
border-radius: var(--r-win);
overflow: hidden;
background: var(--navy);
display: grid;
place-items: center;
}
.vtop__mini { border-radius: var(--r-card); }
.vfila__img, .vtop__img, .vtira__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Solo se ve si la miniatura no está: es chrome, no un hueco. */
.vfila__placa, .vtop__placa, .vtira__placa { position: relative; z-index: 1; width: 14px; }
.vfila__placa svg, .vtop__placa svg, .vtira__placa svg { width: 100%; height: auto; fill: rgba(255,255,255,.5); }
.vfila__dur, .vtop__dur, .vtira__dur {
position: absolute; right: 5px; bottom: 5px; z-index: 2;
font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
color: #fff; background: rgba(10,9,22,.82);
padding: .06rem .28rem; border-radius: 4px;
}
.vfila__txt, .vtop__txt { display: grid; gap: .22rem; min-width: 0; }
.vfila__t, .vtop__t {
font-size: var(--t-small); font-weight: 500; line-height: 1.34; letter-spacing: -0.012em; color: var(--tx-1);
display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vtop__t { font-size: var(--t-body); }
.vfila__m, .vtop__m { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tx-2); }
.vfila:hover .vfila__t, .vtop:hover .vtop__t { color: var(--coral-ink); }
/* La tira de tres de Resultados. Va sobre navy, así que el texto es claro. */
.vtira-bloque { display: grid; gap: .5rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--on-navy-line); }
.vtira { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.vtira__it { display: grid; gap: .35rem; align-content: start; border-radius: var(--r-win); }
.vtira__t {
font-size: var(--t-micro); line-height: 1.32; color: var(--on-navy-1);
display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vtira__m { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--on-navy-2); }
.vtira__it:hover .vtira__t, .vtira__it:focus-visible .vtira__t { color: var(--rose); }
.vtira__it:hover .vtira__img { transform: scale(1.04); }
.vtira__img { transition: transform .5s var(--ease); }
/* Sobre crema (las fichas cortas van sobre el mismo navy, así que no hay
segunda variante; si alguna cayera sobre claro, hereda estos colores). */
.caso .vtira-bloque .caso__rotulo, .ficha .vtira-bloque .caso__rotulo { margin: 0; }
/* ============================================================
============ SECCIONES ============
============================================================ */
/* ============================================================
Cabecera: una sola fila, como la barra de menú de la referencia.
Logo original a la izquierda con los enlaces en minúsculas, la
caja de búsqueda de YouTube clásico y, a la derecha, los mini
iconos de la época + el contador en vivo + el CTA.
Y ES CRISTAL. Ese es literalmente el concepto —«la forma de 2010,
el material de 2026»—: era una barra gris opaca, o sea cartón, en
el elemento más presente de todo el scroll. Con blur y saturación
la sección navy de Resultados se ve pasar por debajo.
============================================================ */
.yt {
position: sticky;
top: 0;
z-index: 90;
height: var(--header-h);
background: rgba(247, 245, 242, .86);
-webkit-backdrop-filter: blur(24px) saturate(1.7);
backdrop-filter: blur(24px) saturate(1.7);
border-bottom: 1px solid rgba(255, 255, 255, .55);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .9),
0 1px 0 rgba(22, 23, 44, .06);
}
/* Sin desenfoque de fondo (o con transparencia reducida), fondo casi
sólido: una barra semitransparente sin blur es ilegible. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
.yt { background: rgba(247, 245, 242, .96); }
}
@media (prefers-reduced-transparency: reduce) {
.yt { background: rgba(247, 245, 242, .97); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.yt__fila {
height: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: clamp(1rem, 3vw, 3rem);
display: flex;
align-items: center;
gap: clamp(.5rem, 1.2vw, 1.1rem);
position: relative;
}
/* ---- El logotipo original, sin recortar ni recolorear ----
Alto por token (40 px en escritorio, 44 px en móvil): a 26 px el
«Growth Lab» de debajo de «influentia» no se leía. Ancho automático y
`@2x` de origen (2400x861), así que a 44 px sigue sobrando resolución. */
.marca { flex: none; display: block; }
.marca img { height: var(--logo-h); width: auto; }
.yt__nav { display: flex; align-items: center; gap: clamp(.65rem, 1.2vw, 1.1rem); flex: none; }
.yt__nav a {
font-size: var(--t-small);
letter-spacing: -0.02em;
/* .55 daba 3,84:1 a 14 px y axe lo marcaba como violación real. */
color: var(--tx-2);
transition: color .16s var(--ease);
}
.yt__nav a:hover { color: var(--ink); }
.yt__nav a.is-aqui { color: var(--ink); }
/* ---- Caja de búsqueda + botón gris de la época ---- */
/* Era el elemento más grande de la barra (44 % del ancho) y el de menos
valor: nueve tarjetas caben en dos scrolls. Se queda —es parte del
disfraz— pero deja de robarle peso al CTA. */
.busca {
display: flex;
align-items: stretch;
flex: 0 1 clamp(180px, 20vw, 250px);
min-width: 0;
height: 32px;
margin-inline: auto;
font-family: var(--f-chrome);
}
.busca__q {
flex: 1;
min-width: 0;
height: 100%;
padding: 0 .6rem;
font-family: inherit;
font-size: var(--t-label);
color: var(--ink);
background: #fff;
border: 1px solid #CCC;
border-right: 0;
border-radius: 3px 0 0 3px;
box-shadow: inset 0 1px 2px rgba(22, 23, 44, .07);
}
.busca__q::-webkit-search-cancel-button { display: none; }
.busca__q::placeholder { color: rgba(22, 23, 44, .42); }
.busca__q:focus { outline: 0; border-color: #9AA; box-shadow: inset 0 1px 2px rgba(22, 23, 44, .12); }
.busca__q:focus-visible { border-color: var(--coral); }
.busca__btn {
flex: none;
width: 52px;
display: grid;
place-items: center;
border: 1px solid #C6C6C6;
border-radius: 0 3px 3px 0;
background: linear-gradient(180deg, #F8F8F8, #E7E7E7);
box-shadow: inset 0 1px 0 #fff;
}
.busca__btn:hover { background: linear-gradient(180deg, #fff, #DEDEDE); }
.busca__btn:active { background: linear-gradient(180deg, #E2E2E2, #EFEFEF); }
.busca__btn svg { width: 15px; height: 15px; fill: none; stroke: rgba(22, 23, 44, .62); stroke-width: 1.7; stroke-linecap: round; }
.yt__dcha { margin-left: auto; flex: none; display: flex; align-items: center; gap: clamp(.5rem, 1.1vw, .95rem); }
/* La lupa suelta solo existe en móvil: abre el buscador a ancho completo */
.yt__lupa { display: none; width: 34px; height: 34px; border-radius: 4px; place-items: center; }
.yt__lupa svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; }
.yt__lupa:hover { background: rgba(22, 23, 44, .06); }
/* ---- Mini iconos de la época (campana, subir, avatar) ----
El «avatar» era un cuadrado gris sólido de 15 px, indistinguible de una
imagen rota; ahora lleva la marca dentro. La campana y la flecha son
chrome sin función: bajan de peso y solo aparecen si sobra sitio. */
.yt__icos { display: none; align-items: center; gap: .55rem; flex: none; }
@media (min-width: 1200px) { .yt__icos { display: inline-flex; } }
.ico { width: 14px; height: 14px; flex: none; fill: rgba(22, 23, 44, .28); }
.ico--yo {
width: 18px; height: 18px;
border-radius: 3px;
background: #fff center / 74% no-repeat url("../assets/brand-web/marca.svg");
border: 1px solid var(--line);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
/* ---- El «reloj» de la referencia: aquí, visualizaciones en vivo ---- */
/* Dos renglones: la cifra y, debajo, DE QUIÉN es. La etiqueta ya no se
esconde en cuanto falta sitio —era un número de nueve dígitos sin decir de
qué—: o se ven los dos renglones, o no se ve el contador. */
.yt__contador {
flex: none;
display: grid;
max-width: 136px;
line-height: 1.15;
color: var(--tx-3);
}
.yt__contador .num { font-size: var(--t-micro); font-weight: 500; color: var(--tx-1); }
.yt__contador-k { font-size: 9.5px; letter-spacing: -0.005em; }
/* ---- El CTA de la barra (= su «get heyclicky» azul) ----
Era texto coral de 14 px con un triangulito: 22 px de alto, por debajo
del mínimo de toque, y la única acción de conversión siempre visible.
Ahora es el mismo botón que el del hero, en tamaño --sm. */
.cta-barra { flex: none; }
/* Los tres iconos de época son chrome sin función y la pila de caras sí dice
algo: cuando hay que elegir, gana la pila. Por eso los iconos solo salen
cuando sobra sitio de verdad. */
@media (max-width: 1499px) { .yt__icos { display: none; } }
@media (max-width: 1239px) { .yt__contador { display: none; } }
/* La pila de caras se retira en la banda 981-1100, que es donde la barra va
más apretada: ahí conviven el menú, la caja de búsqueda y el botón. */
@media (min-width: 981px) and (max-width: 1100px) { .minipila { display: none; } }
@media (max-width: 980px) { .yt__nav { display: none; } }
@media (max-width: 820px) {
.yt__icos { display: none; }
.yt__lupa { display: grid; }
.busca {
position: absolute;
left: clamp(1rem, 3vw, 3rem);
right: clamp(1rem, 3vw, 3rem);
top: 50%;
translate: 0 -50%;
margin: 0;
height: 34px;
display: none;
z-index: 3;
}
.yt.is-buscando .busca { display: flex; }
.cta-barra .btn { font-size: var(--t-small); padding-inline: .8rem; }
}
@media (max-width: 380px) {
.cta-barra__txt { display: none; }
.cta-barra .btn { padding-inline: 0; width: 44px; }
}
/* ============================================================
Hero: calco de la composición de la referencia.
Lienzo blanco con rejilla de puntos, columna central (wordmark →
línea → botones gel → micro-nota → vídeo grande) y, alrededor,
la capa de objetos flotantes.
============================================================ */
.hero {
position: relative;
/* «clip» y no «visible»: los objetos flotantes salen del lienzo por
los bordes y, sin esto, ensanchan el documento. */
overflow: clip;
background-color: var(--paper);
background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .08) 1px, transparent 1.5px);
background-size: 24px 24px;
padding-inline: clamp(1.25rem, 4vw, 3rem);
padding-top: 1.5rem;
padding-bottom: clamp(3rem, 6vw, 5rem);
border-bottom: 1px solid var(--line-soft);
}
@supports not (overflow: clip) { .hero { overflow: hidden; } }
/* Los blobs desenfocados del logo ya no pintan aquí: el lienzo es blanco. */
.glow--d { width: 40vw; height: 34vw; max-width: 560px; left: -10vw; bottom: -6vw; background: radial-gradient(circle, var(--rose) 0%, rgba(243,173,175,0) 70%); opacity: .42; }
.hero__centro {
position: relative;
z-index: 2;
width: 100%;
max-width: 820px;
margin-inline: auto;
text-align: center;
}
/* El nombre grande = el nombre del logo, con la misma letra (Nunito 800),
las mismas mayúsculas («Growth Lab») y un tracking parecido al del
logotipo. Idéntico en móvil y en escritorio. */
.hero__wm {
margin: 0;
font-family: var(--f-marca);
font-size: calc(var(--t-hero) * .9);
font-weight: 800;
letter-spacing: -0.022em;
line-height: 1.02;
color: var(--ink);
text-wrap: nowrap;
}
/* La frase que dice qué hacemos: es el activo más valioso de la página y
estaba en cuerpo 15. Sube a 22-24 px. */
.hero__linea {
max-width: 34ch;
margin: clamp(1rem, 1.8vw, 1.5rem) auto 0;
font-size: var(--t-h3);
line-height: 1.32;
letter-spacing: -0.018em;
color: rgba(22, 23, 44, .72);
}
.hero__quien {
max-width: 40ch;
margin: .5rem auto 0;
font-size: var(--t-body);
line-height: 1.45;
color: var(--tx-2);
}
.hero__botones {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .7rem;
margin-top: clamp(1.5rem, 2.6vw, 2.15rem);
}
/* La micro-nota lleva la cifra VIVA: la misma que la barra, del mismo
módulo y con la misma base. En móvil la barra esconde el contador, así
que este es el único sitio donde se ve subir. */
.hero__nota {
display: grid;
justify-items: center;
gap: .12rem;
margin-top: clamp(1rem, 1.6vw, 1.35rem);
font-size: var(--t-small);
color: rgba(22, 23, 44, .62);
}
.hero__nota .num { font-size: var(--t-lead); font-weight: 500; color: var(--tx-1); }
.hero__nota b { font-weight: 400; }
/* ---- El vídeo grande ---- */
.vp {
--chrome-h: 44px;
position: relative;
width: 100%;
margin: clamp(2rem, 4vw, 3.25rem) auto 0;
border-radius: var(--r-win);
background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 10px 24px rgba(0, 0, 0, .12);
}
.vp__pantalla {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--r-win);
overflow: hidden;
background: var(--navy);
isolation: isolate;
}
.reel { position: absolute; inset: 0; }
/* 400 ms de cruce, que es el corte de un montaje, no el fundido lento de un
carrusel. `linear` a propósito: con una curva de entrada los dos planos se
quedan a media opacidad en el centro del cruce y se ve el doble expuesto. */
.reel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .4s linear; }
.reel__slide.is-on { opacity: 1; }
/* Copia ampliada y desenfocada: rellena lo que la foto cuadrada no cubre. */
.reel__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.4); filter: blur(30px) saturate(1.35) brightness(.55); }
/* El Ken Burns va aquí: el `transform` lo escribe js/hero.js plano a plano,
y el `transform-origin` centrado evita que un zoom desplace el encuadre
hacia una esquina. `will-change` sí está justificado: son quince capas que
se transforman una detrás de otra durante todo el montaje. */
.reel__cara {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 34%;
transform-origin: center center;
will-change: transform;
backface-visibility: hidden;
}
/* Los planos de CANAL son fotos de acción con la cara arriba; los de rodaje
son planos generales y se encuadran por el centro. */
.vp__pantalla.is-canal .reel__cara { object-position: center 28%; }
/* La viñeta: un óvalo oscuro muy suave. Es lo que une quince fotografías
distintas en un mismo metraje; sin ella se leen como un carrusel. */
.reel__vineta {
position: absolute; inset: 0;
z-index: 2;
pointer-events: none;
background: radial-gradient(112% 96% at 50% 46%, transparent 52%, rgba(8, 7, 20, .40) 100%);
}
/* El velo de abajo cubre ahora también la barra de controles superpuesta. */
.reel__scrim { position: absolute; inset: auto 0 0 0; height: 62%; z-index: 2; background: linear-gradient(180deg, transparent, rgba(8,7,20,.86)); }
/* Fila de «reproduciendo»: el botón de play y, a su lado, el canal. Va
encima de la barra de controles y NUNCA sobre la cara del creador. */
.vp__abajo {
position: absolute;
left: 0; right: 0;
bottom: var(--chrome-h);
z-index: 4;
display: flex;
align-items: center;
gap: clamp(.7rem, 1.6vw, 1.1rem);
padding: 0 clamp(.85rem, 2.4%, 1.5rem) clamp(.7rem, 1.6vw, 1.1rem);
}
.reel__id { display: grid; justify-items: start; gap: .1rem; text-align: left; color: #fff; min-width: 0; }
/* El sello y el año del canal, en el rótulo del montaje: cada tramo dice de
quién es Y que es un canal que llevamos. */
.reel__id .sello { margin-bottom: .06rem; }
/* La chapa de los planos de RODAJE, donde los de canal llevan el sello. Va en
mono y sin la forma del sello: tiene que verse a la primera que NO es lo
mismo. Si aquí fuera el sello, el sello dejaría de significar «estos siete
canales son nuestros», que es lo único que dice en toda la web. */
.reel__rodaje {
align-self: start;
margin-bottom: .18rem;
font-family: var(--f-mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
padding: .16rem .4rem;
border-radius: 4px;
color: rgba(255, 255, 255, .92);
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .3);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.reel__desde { font-family: var(--f-mono); font-size: var(--t-micro); color: rgba(255,255,255,.6); }
@media (max-width: 560px) { .reel__desde { display: none; } }
.reel__canal { margin: 0; font-family: var(--f-display); font-size: var(--t-h3); font-weight: 800; letter-spacing: -0.028em; line-height: 1.05; }
.reel__subs { margin: .14rem 0 0; font-size: var(--t-label); color: rgba(255,255,255,.78); }
.reel__subs .num { color: currentColor; }
/* ------------------------------------------------------------------
El botón grande de reproducción: el rectángulo redondeado rojo con el
triángulo blanco del reproductor clásico. Nada de pastilla de cristal
flotando sobre la cara del creador.
Inspiración de acabado (transporte y estados): 21st.dev #19339 y #7479,
anotado en _qa/INSPIRACION.md.
------------------------------------------------------------------ */
/* El rectángulo redondeado rojo del reproductor clásico. Ya NO va en el
centro exacto: ahí caía sobre la boca y el micrófono del creador, que es
lo único que humaniza el hero. */
.vp__boton {
position: relative;
flex: none;
width: clamp(58px, 6.4vw, 72px);
aspect-ratio: 7 / 5;
padding: 0;
border-radius: clamp(10px, 1.2vw, 13px);
display: grid;
place-items: center;
isolation: isolate;
background: linear-gradient(180deg, #F0484D 0%, #DE3338 46%, #C1262B 100%);
border: 1px solid rgba(120, 20, 24, .42);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .42),
inset 0 -6px 14px rgba(110, 16, 20, .30),
0 2px 6px rgba(12, 8, 18, .26),
0 14px 34px rgba(12, 8, 18, .34);
transition: transform .26s var(--ease), opacity .26s var(--ease),
filter .22s var(--ease), box-shadow .26s var(--ease);
}
/* El reflejo de la mitad de arriba, muy suave: es un botón de plástico, no
una pastilla de gel. */
.vp__boton::after {
content: "";
position: absolute;
inset: 1px 1px auto 1px;
height: 44%;
border-radius: inherit;
border-end-start-radius: 40%;
border-end-end-radius: 40%;
background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.02));
pointer-events: none;
}
.vp__boton-ico {
position: relative;
z-index: 2;
width: 38%;
height: auto;
filter: drop-shadow(0 1px 1px rgba(110, 16, 20, .45));
}
.vp__boton-ico path { fill: #fff; }
.vp__boton:hover {
filter: brightness(1.09) saturate(1.04);
transform: scale(1.045);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .5),
inset 0 -6px 14px rgba(110, 16, 20, .26),
0 2px 8px rgba(12, 8, 18, .28),
0 18px 44px rgba(12, 8, 18, .38);
}
.vp__boton:active { transform: scale(.975); }
/* Con el ratón en cualquier punto del vídeo, el botón ya se enciende: el
objetivo de clic empieza antes de llegar a él. */
.vp:not(.is-jugando) .vp__pantalla:hover .vp__boton { filter: brightness(1.05); }
.vp__boton:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* Reproduciendo: el botón encoge y se queda como pausa discreta. */
.vp.is-jugando .vp__boton {
opacity: .88;
transform: scale(.72);
box-shadow: 0 6px 18px rgba(12, 8, 18, .28);
}
.vp.is-jugando .vp__boton:hover { opacity: 1; transform: scale(.78); }
/* ------------------------------------------------------------------
Barra de controles: play/pausa, reloj mono, barra roja con puntito,
HD y pantalla completa. Alineada a una sola línea base.
------------------------------------------------------------------ */
/* Los controles van SOBRE el vídeo, sobre un velo oscuro, como en
cualquier reproductor de verdad: fuera, pegados debajo del fotograma,
parecían una barra de herramientas del navegador y el disfraz se caía. */
.vp__chrome {
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 5;
display: flex;
align-items: center;
gap: clamp(.55rem, 1.2vw, .85rem);
height: var(--chrome-h);
padding-inline: clamp(.65rem, 1.4vw, 1rem);
border-radius: 0 0 var(--r-win) var(--r-win);
background: linear-gradient(0deg, rgba(4, 3, 12, .78), rgba(4, 3, 12, .12));
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.vp__btn {
display: grid;
place-items: center;
width: 32px;
height: 32px;
flex: none;
padding: 0;
border-radius: 6px;
color: rgba(255, 255, 255, .84);
transition: color .18s var(--ease), background-color .18s var(--ease);
}
.vp__btn svg { width: 11px; height: auto; display: block; }
.vp__btn--play path { fill: #fff; }
.vp__btn--full svg { width: 13px; }
.vp__btn--full path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
button.vp__btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.vp__t { font-size: var(--t-micro); color: rgba(255, 255, 255, .88); flex: none; letter-spacing: -0.03em; }
.vp__t--fin { color: rgba(255, 255, 255, .6); }
/* La chapa HD, dentro de la barra (antes flotaba sobre la cara) */
.vp__hd {
flex: none;
margin: 0 .1rem;
font-family: var(--f-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: .05em;
line-height: 1.35;
padding: .1rem .3rem;
border-radius: 3px;
color: rgba(255, 255, 255, .92);
border: 1px solid rgba(255, 255, 255, .4);
}
.vp__pista { position: relative; flex: 1; min-width: 0; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .28); }
/* Las marcas de capítulo: una raya por corte. Con quince planos, una barra
lisa solo dice «va por la mitad»; con marcas dice cuánto queda de ESTE
plano y cuántos vienen detrás, que es lo que hace legible un montaje.
Las pinta js/hero.js con la posición exacta de cada corte (`--x`). */
.vp__marcas { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.vp__marcas i {
position: absolute;
top: -1px; bottom: -1px;
left: var(--x);
width: 2px;
margin-left: -1px;
border-radius: 1px;
background: rgba(4, 3, 12, .55);
}
.vp__buffer, .vp__lleno { position: absolute; inset: 0; border-radius: 999px; transform-origin: left center; }
/* La franja de «cargado»: tiene que distinguirse de la pista vacía o el
canto se lee como una raya suelta. */
.vp__buffer { background: rgba(255, 255, 255, .42); transform: scaleX(.72); }
.vp__lleno { background: #E8272A; transform: scaleX(0); }
.vp__pista::after {
content: "";
position: absolute;
z-index: 4; /* por encima de las marcas de capítulo */
left: 0; top: 50%;
width: 10px; height: 10px;
margin-left: -5px;
border-radius: 50%;
background: #E8272A;
box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 4px rgba(0,0,0,.45);
transform: translate3d(calc(var(--p, 0) * var(--pista-w, 0px)), -50%, 0);
}
/* ============================================================
La capa de objetos flotantes
============================================================ */
.flota {
--esc: 1; /* escala de los objetos */
--escy: 1; /* estiramiento vertical de sus posiciones */
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
/* Segunda capa, hermana de la columna central: en escritorio ocupa el mismo
lienzo (las piezas se colocan por --x/--y igual que las de la primera) y
en móvil se convierte en la tira que va debajo del vídeo. */
.flota--b { z-index: 1; }
.flota__pieza {
position: absolute;
left: var(--x, auto);
right: var(--xr, auto);
top: calc(var(--y, 0px) * var(--escy));
width: calc(var(--w, 160px) * var(--esc));
pointer-events: auto;
transform: rotate(var(--r, 0deg));
transition: transform .34s var(--ease), filter .34s var(--ease);
}
.flota__pieza:hover { z-index: 4; transform: rotate(var(--r, 0deg)) translateY(-7px) scale(1.035); }
.flota__pieza--chapa { width: auto; }
/* ---- Ventana de reproductor clásico ---- */
.winx {
margin: 0;
border-radius: 5px;
overflow: hidden;
background: #EDEBE8;
border: 1px solid rgba(22, 23, 44, .22);
box-shadow: 0 4px 12px rgba(0, 0, 0, .08), 0 10px 24px rgba(0, 0, 0, .10);
}
/* La barra de título estaba vacía con una «x» suelta: leía a maqueta sin
terminar y desaprovechaba el sitio natural del chrome de época. Ahora
lleva el punto rojo de «grabando» y el nombre del vídeo. */
.winx__bar {
height: 17px;
display: flex;
align-items: center;
gap: 5px;
padding-inline: 6px;
background: linear-gradient(180deg, #FDFDFD, #DCDAD7);
border-bottom: 1px solid rgba(22, 23, 44, .16);
}
.winx__punto { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #E8272A; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.winx__t {
flex: 1; min-width: 0;
font: 400 9px/1.4 var(--f-chrome);
color: rgba(22, 23, 44, .55);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.winx__x { margin-left: auto; font: 700 9px/1 var(--f-chrome); color: rgba(22, 23, 44, .5); }
.winx__pantalla { position: relative; aspect-ratio: 16 / 9; background: #14122B; }
/* Las fotos de assets/hero/ ya vienen en 16:9 y con la cabeza entera dentro
del encuadre: aquí solo se recortan, con el peso hacia arriba (30 %) para
dejar aire sobre el pelo. NADA de frentes cortadas.
Si una foto del hero aún no existe, el ![]()
cae al retrato cuadrado y se
marca `is-respaldo`: entonces —y solo entonces— vuelve el encuadre por
pieza de la ronda anterior, que es el que ese recorte necesita. */
.winx__pantalla img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.winx__pantalla img.is-respaldo { object-position: center var(--op, 40%); transform: scale(var(--z, 1)); }
.winx__dur {
position: absolute; right: 4px; bottom: 7px;
font-family: var(--f-mono); font-size: 9px; line-height: 1.5;
color: #fff; background: rgba(10, 9, 22, .82);
padding: 0 3px; border-radius: 2px;
}
.winx__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .3); }
.winx__barra i { display: block; height: 100%; width: var(--p, 42%); background: #C9302F; }
.flota__archivo { margin-top: 5px; text-align: center; font-size: var(--t-micro); letter-spacing: -0.01em; color: var(--tx-chrome); }
/* ---- Pegatina «HOLA soy» ---- */
.nota__caja {
background: #fff;
border: 1px solid rgba(22, 23, 44, .14);
border-radius: 3px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .10), 0 10px 22px rgba(0, 0, 0, .07);
overflow: hidden;
}
.nota__cab { background: #D93A3E; color: #fff; text-align: center; padding: 5px 0 4px; font-family: var(--f-text); }
.nota__cab b { display: block; font-size: var(--t-label); font-weight: 700; letter-spacing: .04em; line-height: 1; }
.nota__cab span { display: block; margin-top: 2px; font-size: 7.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
.nota__cuerpo { display: grid; place-items: center; padding: 14px 12px 16px; }
.nota__cuerpo img { width: 88%; height: auto; }
.nota__pie { height: 7px; background: #D93A3E; }
/* Los tres objetos de cristal fotorrealistas (estrella, campana, play) se
retiraron: render brillante dentro de una interfaz plana es la firma
«hecho con IA» de la lista negra, y la campana además se pegaba al canto
del panel de cifras como una pegatina mal puesta. Lo que flota ahora es
chrome del 2010 dibujado en CSS (.sus, .anota, .nota5, .mini43). */
/* ---- Chapas ---- */
.chapa {
display: inline-block;
padding: 4px 10px 5px;
border-radius: 999px;
font-family: var(--f-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
box-shadow: 0 3px 10px rgba(22, 23, 44, .14);
}
.chapa--hd { background: #fff; color: var(--coral-ink); border: 1px solid rgba(196, 58, 62, .38); }
.chapa--nuevo {
background: linear-gradient(180deg, #F0797D, #D8464A);
color: #fff;
border: 1px solid rgba(163, 44, 47, .5);
text-shadow: 0 1px 1px rgba(130, 30, 33, .4);
}
/* ---- Móvil y tableta: los objetos dejan de flotar y se colocan en
flujo, en dos filas por encima del titular (como en su móvil) ---- */
/* El vídeo grande, a sangre en móvil */
@media (max-width: 700px) {
.vp { width: auto; margin-inline: calc(-1 * clamp(1.25rem, 4vw, 3rem)); border-radius: 0; box-shadow: 0 12px 30px rgba(22,23,44,.13); }
.vp__pantalla { border-radius: 0; }
/* 44 px de barra y 44 px de botón: es lo que hace falta para que play y
pantalla completa tengan área de dedo de verdad sin engordar los
iconos (el play iba a 40 y se fallaba con el pulgar). */
.vp__chrome { border-radius: 0; }
.vp__btn { width: 44px; height: 44px; }
.vp__btn svg { width: 13px; }
.vp__btn--full svg { width: 15px; }
.vp__t { font-size: var(--t-micro); }
.vp__hd { font-size: var(--t-micro); padding: .14rem .34rem; }
.vp__abajo { padding-inline: 1rem; }
}
/* ---- Móvil y tableta ----
Arriba solo DOS ventanas, completas y sin cortar: lo primero que se veía
eran dos miniaturas partidas por la mitad, y el nombre de la marca no
llegaba hasta los 575 px. El resto de las piezas pasa a una tira debajo
del vídeo (#flota-b), que es donde no estorban. */
@media (max-width: 1023px) {
.flota {
position: static;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 14px 16px;
max-width: 330px;
margin: 0 auto clamp(1.5rem, 3.4vw, 2.25rem);
}
.flota--b { max-width: 420px; margin: clamp(1.75rem, 4vw, 2.5rem) auto 0; align-items: center; gap: 12px 14px; }
/* Las dos capas las rellena el JS DESPUÉS del primer pintado: sin reservar
su alto, al llegar empujaban toda la columna del hero hacia abajo y eso
era el CLS de la página (medido: 126 px y 75 px). */
.flota { min-height: 126px; }
.flota--b { min-height: 75px; }
.flota__pieza { position: static; width: var(--wm, 130px); transform: rotate(var(--rm, 0deg)); }
.flota__pieza:hover { transform: rotate(var(--rm, 0deg)) translateY(-5px) scale(1.03); }
.flota__pieza--desk { display: none; }
}
/* ---- Escritorio: la composición de la referencia ---- */
@media (min-width: 1024px) {
.hero { padding-top: 200px; }
.hero__centro { max-width: 600px; }
}
@media (min-width: 1200px) {
.hero { padding-top: 214px; }
.hero__centro { max-width: 700px; }
.flota { --esc: 1.18; --escy: 1.06; }
.flota__archivo { font-size: var(--t-micro); }
}
@media (min-width: 1400px) {
.hero { padding-top: 232px; }
.hero__centro { max-width: 820px; }
.flota { --esc: 1.38; --escy: 1.14; }
}
@media (prefers-reduced-motion: reduce) {
.flota__pieza, .flota__pieza:hover { transition: none; }
}
/* ============================================================
Marquee de canales
============================================================ */
.tira {
padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.2rem, 2.4vw, 2rem);
border-bottom: 1px solid var(--line-soft);
background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
overflow: hidden;
}
.tira__chapa {
width: fit-content;
margin: 0 auto;
padding: .35rem .95rem;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, .72);
font-family: var(--f-mono);
font-size: var(--t-micro);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--tx-3);
}
/* Calco de su «they use it everyday»: la frase grande con las réplicas
atenuadas saliéndose por los dos lados. */
.rodillo {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(1rem, 2vw, 2rem);
margin-block: clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 2.8vw, 2.2rem);
white-space: nowrap;
}
.rodillo span {
font-family: var(--f-display);
font-size: var(--t-h2);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.05;
flex: none;
}
.rodillo__centro { color: var(--ink); }
.rodillo__eco { color: rgba(22, 23, 44, .17); }
/* ============================================================
Cifras: el panel de estadísticas del YouTube clásico, dentro de
una ventana de escritorio como las del hero.
A la izquierda los años (Nunito 800, la letra del logo, en
count-up); a la derecha las tres cifras del roster con su barra
y su fuente. Fondo de rejilla de puntos, igual que el hero: la
ventana se apoya sobre el mismo escritorio.
Sustituye a la placa-premio dorada (14-sep-2026): el equipo eligió
esta de las tres muestras — dorado y marrón quedan fuera de la
paleta y la placa pesaba más que el dato.
============================================================ */
.cifras {
background-color: var(--paper);
background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .08) 1px, transparent 1.5px);
background-size: 24px 24px;
border-bottom: 1px solid var(--line-soft);
/* El objeto de cristal asoma por la esquina de abajo y no debe ensanchar
el documento. */
overflow: clip;
}
@supports not (overflow: clip) { .cifras { overflow: hidden; } }
/* ---- La ventana ---- */
/* Cristal de verdad, no blanco opaco: junto a la cabecera es la pieza más
presente del scroll y era la otra mitad del «cartón» del concepto. */
.statwin {
position: relative;
margin: 0 auto;
max-width: 1040px;
border-radius: var(--r-win);
overflow: hidden;
background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.62));
-webkit-backdrop-filter: blur(26px) saturate(1.7);
backdrop-filter: blur(26px) saturate(1.7);
border: 1px solid var(--glass-edge);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .95),
inset 0 -1px 0 rgba(255, 255, 255, .3),
var(--shadow-lift);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
.statwin { background: rgba(255,255,255,.96); }
}
.statwin__bar {
display: flex;
align-items: center;
gap: 6px;
height: 26px;
padding-inline: 10px;
background: linear-gradient(180deg, rgba(253,253,253,.92), rgba(220,218,215,.86));
border-bottom: 1px solid rgba(22, 23, 44, .16);
}
.statwin__titulo {
font-family: var(--f-mono);
font-size: var(--t-micro);
letter-spacing: -0.01em;
color: rgba(22, 23, 44, .62);
}
.statwin__x {
margin-left: auto;
font: 700 12px/1 var(--f-chrome);
color: rgba(22, 23, 44, .55);
}
.statwin__cuerpo {
display: grid;
gap: clamp(1.75rem, 3.6vw, 3rem);
padding: clamp(1.75rem, 3.4vw, 3rem) clamp(1.5rem, 3.2vw, 3rem) clamp(1.9rem, 3.4vw, 3rem);
}
@media (min-width: 900px) {
.statwin__cuerpo { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; }
/* El filete vertical de separación, como en el panel de la época. */
.statwin__dcha { border-left: 1px solid var(--line-soft); padding-left: clamp(2rem, 3.4vw, 3rem); }
}
/* ---- Los años, en la letra del logo ---- */
.statwin__izq { display: grid; justify-items: start; }
/* El «7» iba a 200 px y dejaba 280 px de blanco debajo; a 140 px cabe con
su rótulo y las filas de la derecha ocupan el ancho. */
.statwin__n {
margin: 0;
font-family: var(--f-marca);
font-weight: 800;
font-size: calc(var(--t-hero) * 1.5); /* 88 → 140 px */
line-height: .84;
letter-spacing: -0.06em;
color: var(--navy);
}
.statwin__n .num { font-family: inherit; font-weight: inherit; letter-spacing: inherit; font-variant-numeric: tabular-nums; }
/* El «7» mientras cuenta: llega un 15 % más grande y se asienta, con un
destello coral que lo recorre una vez. Es el único número de la web que
hace esto, y por eso se nota: los demás solo suben.
`transform-origin` a la izquierda y abajo para que al crecer empuje hacia
fuera y no descoloque el rótulo de debajo. */
.statwin__n .num {
display: inline-block;
transform-origin: 0% 88%;
transition: transform .62s cubic-bezier(.16, 1, .3, 1);
}
.statwin__n .num.is-contando {
transform: scale(1.15);
animation: cifra-destello .95s cubic-bezier(.16, 1, .3, 1);
}
.statwin__n .num.is-contado { transform: scale(1); }
@keyframes cifra-destello {
0% { color: var(--coral); text-shadow: 0 0 0 rgba(234, 88, 91, 0); }
35% { color: var(--coral); text-shadow: 0 6px 34px rgba(234, 88, 91, .42); }
100% { color: var(--navy); text-shadow: 0 0 0 rgba(234, 88, 91, 0); }
}
/* La pista de cada fila. Las tres se llenan ENTERAS, en cascada: es el gesto
de «esto se está cargando» del panel, no una comparación —tres longitudes
distintas bajo tres números serían exactamente eso, y 932 M de
visualizaciones contra 7 canales no comparan nada—. */
.cifras__pista {
display: block;
height: 2px;
margin-top: .42rem;
border-radius: 999px;
background: rgba(22, 23, 44, .07);
overflow: hidden;
}
.cifras__pista i {
display: block;
height: 100%;
width: 100%;
border-radius: inherit;
/* Del coral al rosa: el degradado deja claro que es una pista que se llena
y no un filete de separación —el filete de la fila ya existe, un palmo más
abajo, y dos rayas rectas seguidas se leerían como un error—. */
background: linear-gradient(90deg, var(--coral), var(--rose));
transform: scaleX(0);
transform-origin: left center;
}
.statwin__k {
margin-top: clamp(.6rem, 1.4vw, 1rem);
font-family: var(--f-display);
font-size: var(--t-lead);
font-weight: 600;
letter-spacing: -0.022em;
color: var(--tx-1);
max-width: 16ch;
text-wrap: balance;
}
.statwin__f { margin-top: .5rem; font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tx-3); }
/* ---- Las filas del panel ----
Sin barrita roja debajo de cada cifra: tres longitudes distintas bajo
tres números es la definición visual de una comparación, y no comparaban
nada (932 M de visualizaciones contra 6 fases no es una escala). */
.cifras__fila { display: grid; gap: 0; }
.cifras__fila li { padding-block: clamp(.7rem, 1.4vw, .95rem); border-bottom: 1px solid var(--line-soft); }
.cifras__fila li:last-child { border-bottom: 0; padding-bottom: 0; }
.cifras__fila li:first-child { padding-top: 0; }
.cifras__cab {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.cifras__k { font-size: var(--t-small); color: var(--tx-2); }
.cifras__n {
font-family: var(--f-mono);
font-size: var(--t-h3);
font-weight: 500;
letter-spacing: -0.035em;
color: var(--ink);
}
.cifras__f { display: block; margin-top: .3rem; font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tx-3); }
.cifras__vivo { display: inline-flex; align-items: center; gap: .35rem; }
.cifras__vivo::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--coral);
box-shadow: 0 0 0 3px rgba(234,88,91,.18);
}
@media (max-width: 899px) {
.statwin__izq { justify-items: center; text-align: center; }
.statwin__k { max-width: 22ch; }
}
/* ============================================================
Cabeceras de sección
============================================================ */
.cab { display: grid; gap: .8rem; justify-items: start; margin-bottom: clamp(2rem, 4vw, 3.25rem); max-width: 62ch; }
.cab--centro { justify-items: center; text-align: center; margin-inline: auto; }
.cab--centro .lead { text-align: center; }
/* ============================================================
Creadores
============================================================ */
.rejilla {
display: grid;
gap: clamp(1rem, 1.7vw, 1.4rem) clamp(.9rem, 1.4vw, 1.15rem);
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 620px) { .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Con SIETE canales la última fila se queda con una sola tarjeta. Pegada a la
izquierda parece que faltan dos y que algo no ha cargado; centrada es una
decisión.
Quién es la huérfana lo marca el JS (`video--sola2` / `video--sola3`, según
el resto de dividir el roster entre 2 y entre 3) y no un `nth-child`: la
rejilla lleva delante dos elementos que no son tarjetas —la píldora de
filtro y el cartel de «ese canal no está aquí»—, así que contar hijos era
contar mal. Con el buscador filtrando, la regla se apaga: ahí la última
tarjeta visible ya no es la séptima. */
@media (min-width: 620px) and (max-width: 999px) {
.rejilla:not(:has(> .video.is-oculta)) > .video--sola2:last-child {
grid-column: 1 / -1;
justify-self: center;
width: calc(50% - clamp(.45rem, .7vw, .58rem));
}
}
@media (min-width: 1000px) {
.rejilla:not(:has(> .video.is-oculta)) > .video--sola3:last-child { grid-column: 2; }
}
/* ------------------------------------------------------------
Los formatos levantados en esos canales.
Placa TIPOGRÁFICA mientras no haya una foto del rodaje DE ESE formato: una
foto de otra jornada detrás de un nombre insinúa que es suya. La tarjeta es
una ventana de escritorio —la misma del hero, un punto más grande— con el
nombre dentro, en la letra del logotipo. Nadie puede confundirla con la
tarjeta de un canal.
La que SÍ tiene foto propia (TRIPLE X) usa la misma ventana, pero con el
fotograma llenando el cuerpo y el nombre abajo a la izquierda sobre un
velo, como el rótulo de un reproductor.
------------------------------------------------------------ */
.formatos-bloque { margin-top: clamp(2.5rem, 5vw, 4rem); }
.cab--sub { gap: .55rem; margin-bottom: clamp(1.25rem, 2.4vw, 1.9rem); }
.cab--sub h3 { font-size: var(--t-h3); letter-spacing: -0.03em; }
.cab--sub .lead { font-size: var(--t-small); }
.formatos {
display: grid;
gap: clamp(1rem, 1.7vw, 1.4rem) clamp(.9rem, 1.4vw, 1.15rem);
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 620px) { .formatos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .formatos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fmt { position: relative; }
/* La ventana: mismo chrome que las del hero (barra clara, punto rojo, nombre
de fichero y «x»), a tamaño de tarjeta. */
.fmt__win {
margin: 0;
border-radius: var(--r-thumb);
overflow: hidden;
border: 1px solid rgba(22, 23, 44, .18);
box-shadow: 0 2px 6px rgba(22,23,44,.06), 0 12px 28px rgba(22,23,44,.10);
transition: transform .34s var(--ease), box-shadow .34s var(--ease);
}
.fmt:hover .fmt__win { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(22,23,44,.08), 0 18px 40px rgba(22,23,44,.14); }
.fmt__bar {
height: 24px;
display: flex;
align-items: center;
gap: 6px;
padding-inline: 8px;
background: linear-gradient(180deg, #FDFDFD, #DCDAD7);
border-bottom: 1px solid rgba(22, 23, 44, .16);
}
.fmt__punto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #E8272A; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.fmt__archivo {
flex: 1; min-width: 0;
font: 400 11px/1.4 var(--f-chrome);
color: rgba(22, 23, 44, .55);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fmt__x { font: 700 11px/1 var(--f-chrome); color: rgba(22, 23, 44, .5); }
/* El cuerpo: navy con un foco coral que cambia de sitio en cada placa, la
rejilla de puntos del hero muy bajita y el nombre en Nunito 800. */
.fmt__cuerpo {
position: relative;
aspect-ratio: 16 / 10;
display: grid;
place-items: center;
padding: 1.6rem 1rem 1.5rem;
background:
radial-gradient(120% 96% at var(--gx, 18%) 0%, rgba(234,88,91,.34), transparent 64%),
var(--navy);
}
.fmt__cuerpo::before {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .09) 1px, transparent 1.5px);
background-size: 18px 18px;
}
.fmt__n {
position: relative;
font-family: var(--f-display);
font-weight: 800;
font-size: var(--t-h3);
line-height: 1.05;
letter-spacing: -0.03em;
text-align: center;
text-wrap: balance;
color: #fff;
}
/* La chapa y la barrita son chrome, igual que en las ventanas del hero. */
.fmt__chapa {
position: absolute;
left: 12px; top: 12px;
font-family: var(--f-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
padding: .2rem .45rem;
border-radius: 4px;
color: var(--ink);
background: rgba(255,255,255,.92);
}
.fmt__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .22); }
.fmt__barra i { display: block; height: 100%; width: var(--p, 42%); background: var(--coral); }
/* ---- La placa CON foto real del rodaje de ese formato ----
El fotograma ocupa el cuerpo entero y el nombre baja a rótulo inferior:
centrado encima tapaba justo lo que hay que ver. El velo es lo que sostiene
el contraste del nombre (blanco sobre foto), así que no es decoración. */
.fmt__cuerpo--foto { place-items: end start; padding: 1.6rem .85rem 1rem; background: #14122B; }
/* La rejilla de puntos sobra sobre una fotografía: ahí es ruido. */
.fmt__cuerpo--foto::before { display: none; }
.fmt__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.fmt__velo {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(20,18,43,.34) 0%, rgba(20,18,43,.06) 34%, rgba(20,18,43,.68) 76%, rgba(20,18,43,.90) 100%);
}
.fmt__cuerpo--foto .fmt__n { text-align: left; text-wrap: pretty; text-shadow: 0 1px 14px rgba(10, 9, 22, .55); }
.fmt__pie { margin-top: .72rem; display: grid; gap: .25rem; }
.fmt__q { font-size: var(--t-small); color: var(--tx-2); line-height: 1.45; }
.fmt__para { font-size: var(--t-label); color: var(--tx-3); }
.fmt__para b { font-weight: 500; color: var(--tx-2); }
/* El handle LLEVA INFORMACIÓN (de quién es el formato), así que va con
--tx-3 y no con el gris de chrome: a .72rem, --tx-chrome daba 2,79:1 y axe
lo cantaba como violación real. */
.fmt__handle { display: block; font-size: var(--t-micro); color: var(--tx-3); }
/* En móvil, cuatro placas a ancho completo son cuatro pantallas de scroll por
un bloque secundario. Se pliegan a fila —ventana pequeña a la izquierda,
texto a la derecha—, que además es como se ve una lista de vídeos en el
móvil de verdad. */
@media (max-width: 619px) {
.formatos { gap: 1.1rem; }
.fmt { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: .85rem; align-items: center; }
.fmt__bar { height: 18px; padding-inline: 6px; gap: 5px; }
.fmt__punto { width: 6px; height: 6px; }
.fmt__archivo, .fmt__x { font-size: 9px; }
/* Sitio para la chapa arriba y para un nombre de dos líneas debajo. */
.fmt__cuerpo { padding: 1.5rem .55rem .85rem; }
.fmt__n { font-size: var(--t-body); }
.fmt__chapa { left: 7px; top: 7px; font-size: 9px; padding: .15rem .3rem; }
.fmt__pie { margin-top: 0; }
}
/* El que busca un canal casi siempre busca EL SUYO: es el momento de más
intención de la web y devolvía un mensaje de error. */
.rejilla__vacio {
grid-column: 1 / -1;
display: grid;
gap: .9rem;
justify-items: start;
margin: 0 0 .5rem;
padding: clamp(1.25rem, 2.4vw, 1.75rem);
border-radius: var(--r-card);
background: rgba(22, 23, 44, .04);
}
.rejilla__vacio p { font-size: var(--t-lead); font-weight: 500; letter-spacing: -0.02em; }
.rejilla__vacio .btn { --btn-h: 44px; }
.rejilla__vacio .enlace { min-height: 34px; font-size: var(--t-small); color: var(--coral-ink); text-decoration: underline; text-underline-offset: 4px; }
/* Píldora de búsqueda activa: al escribir en el buscador de la cabecera,
aquí se ve qué se está filtrando, cuántas tarjetas quedan y cómo quitarlo. */
.filtro-vivo {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: .5rem;
margin: -.4rem 0 .4rem;
font-size: var(--t-small);
color: var(--tx-2);
}
.filtro-vivo button {
display: inline-flex; align-items: center; gap: .45rem;
min-height: 34px; padding: 0 .55rem 0 .8rem;
border-radius: var(--r-pill);
background: var(--ink); color: #fff;
font-size: var(--t-small);
}
.filtro-vivo button svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* ============================================================
Resultados (el momento oscuro)
============================================================ */
.resultados { background: var(--navy); color: var(--on-navy-1); overflow: hidden; }
.resultados h2, .resultados .cab { color: var(--on-navy-1); }
.resultados .lead { color: var(--on-navy-2); }
.resultados .kicker { color: var(--coral-soft); }
.resultados__fondo { position: absolute; inset: 0; opacity: .34; overflow: hidden; }
.resultados__rejilla { position: absolute; inset: -6%; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; filter: blur(14px) saturate(1.2); }
.resultados__rejilla img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; }
.resultados__fondo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 46% at 50% 34%, rgba(234,88,91,.20), transparent 70%), linear-gradient(180deg, var(--navy) 0%, rgba(20,18,43,.58) 32%, rgba(20,18,43,.62) 66%, var(--navy) 100%); }
.resultados .wrap { position: relative; z-index: 2; }
.resultados__pie { margin-top: clamp(2rem, 4vw, 3rem); }
.resultados { padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.casos { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.caso { border-radius: var(--r-win); overflow: hidden; }
.caso__cuerpo { display: grid; gap: clamp(1.25rem, 2.6vw, 2.25rem); padding: clamp(1.25rem, 2.6vw, 2.25rem); }
@media (min-width: 900px) { .caso__cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; } .caso:nth-child(even) .caso__texto { order: 2; } }
.caso__cabeza { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; margin-bottom: .9rem; }
/* El sello se va al extremo de la cabecera del caso, que es donde queda el
aire; sobre el navy la chapa coral sigue siendo la misma pieza. */
.caso__cabeza .sello { margin-left: auto; }
.caso__cabeza img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.caso__canal { font-family: var(--f-display); font-weight: 600; font-size: var(--t-body); letter-spacing: -0.02em; }
.caso__handle { display: block; font-family: var(--f-mono); font-size: var(--t-micro); color: var(--on-navy-3); }
.caso h3 { margin-bottom: .55rem; }
.caso__resumen { color: var(--on-navy-2); font-size: var(--t-small); max-width: 46ch; }
.caso__rotulo { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .04em; color: var(--coral-soft); }
/* Las cifras van ETIQUETADAS: son públicas, del canal, y no un resultado
que nos podamos apuntar. */
.caso__metricas { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--on-navy-line); }
.caso__metricas > div { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: .55rem; }
.caso__metricas b { display: block; font-family: var(--f-mono); font-size: var(--t-h3); font-weight: 500; letter-spacing: -0.035em; }
.caso__metricas span { font-size: var(--t-micro); color: var(--on-navy-2); }
.caso__fuente { display: block; margin-top: .7rem; font-family: var(--f-mono); font-size: var(--t-micro); color: var(--on-navy-3); }
.caso__hitos { display: grid; gap: .55rem; align-content: start; }
.caso__hitos > p { font-family: var(--f-mono); font-size: var(--t-micro); letter-spacing: .04em; color: var(--coral-soft); }
.caso__cita { position: relative; margin-top: 1.15rem; padding: 1.1rem 1.15rem 1rem 2.35rem; border-radius: 10px; background: rgba(255,255,255,.05); overflow: hidden; }
.caso__cita::before { content: "\201C"; position: absolute; top: -.35rem; left: .55rem; font-family: var(--f-display); font-size: 3rem; line-height: 1; color: var(--coral); opacity: .22; pointer-events: none; }
.caso__cita q { position: relative; font-size: var(--t-small); line-height: 1.5; color: var(--on-navy-1); quotes: "\201C" "\201D"; }
.caso__cita cite { display: block; margin-top: .5rem; font-family: var(--f-mono); font-size: var(--t-micro); font-style: normal; color: var(--on-navy-3); }
/* La ventana-foto de un caso: el MISMO chrome que el mosaico de «Así se
rueda», para que se lea como lo que es —un fotograma de una jornada
nuestra— y no como una ilustración. El pie va fuera de la ventana, en
mono, y dice solo lo que se ve. */
.casofoto { margin: 0 0 1.1rem; display: grid; gap: .5rem; }
.casofoto__win { box-shadow: 0 4px 12px rgba(0, 0, 0, .22), 0 14px 34px rgba(0, 0, 0, .26); }
.casofoto__pantalla { background: #0F0E22; }
.casofoto__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.casofoto__pie { font-family: var(--f-mono); font-size: var(--t-micro); line-height: 1.5; color: var(--on-navy-2); }
/* Los tres canales que entraron el 15-09: la MISMA ventana `.analytics` que
los casos, en pequeño y en fila de tres. La diferencia no es de categoría
de cliente —los seis lo son— sino de EVIDENCIA: de estos tres consta lo
público del canal y nada más, así que la tarjeta no tiene segunda columna
que llenar y no se le inventa una. */
.fichas { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 620px) { .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) {
.fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Cuatro fichas en tres columnas dejan una sola abajo: se centra, igual que
en la rejilla de creadores. Aquí sí vale contar hijos: en #fichas no hay
nada que no sea una ficha. */
.fichas > .ficha:last-child:nth-child(3n + 1) { grid-column: 2; }
}
.ficha { border-radius: var(--r-win); overflow: hidden; }
.ficha__cuerpo { padding: clamp(1rem, 2vw, 1.35rem); }
.ficha__cuerpo .caso__cabeza { margin-bottom: .75rem; }
.ficha__que { font-size: var(--t-small); line-height: 1.52; color: var(--on-navy-2); }
.ficha__metricas { margin-top: 1rem; padding-top: .9rem; }
.ficha__metricas > div { gap: .6rem 1.15rem; margin-top: .5rem; }
.ficha__metricas b { font-size: var(--t-body); }
.ficha__metricas span { font-size: var(--t-micro); }
/* Métrica escrita con palabras (el canal recién abierto): misma familia de
chrome que las cifras, sin el tamaño de titular — no es un número. */
.ficha__texto { font-family: var(--f-mono); font-size: var(--t-small); letter-spacing: -0.01em; }
/* ============================================================
Método
============================================================ */
.metodo__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 960px) { .metodo__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); align-items: start; } .metodo__lado { position: sticky; top: calc(var(--hdr-h) + 44px); } }
.metodo__lado { display: grid; gap: 1.5rem; justify-items: start; }
.metodo__cierre { margin: 0; font-family: var(--f-display, inherit); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 600; line-height: 1.25; color: var(--tx-1, currentColor); max-width: 30ch; }
.umbrales { border-radius: var(--r-card); padding: 1.1rem 1.25rem; width: 100%; }
.umbrales__t { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tx-2); margin-bottom: .65rem; }
.umbrales dl { display: grid; gap: .5rem; margin: 0; }
.umbrales div { display: flex; align-items: baseline; gap: .7rem; }
.umbrales dt { font-family: var(--f-mono); font-size: var(--t-small); font-weight: 500; color: var(--coral-ink); min-width: 3.6rem; }
.umbrales dd { margin: 0; font-size: var(--t-label); color: var(--tx-2); }
/* «Así se trabaja con el creador»: la foto que cuenta el trato con el canal
—mesa, guion y equipo de cámara— y no el plató. Va en la columna del
método, debajo de los umbrales, con el mismo chrome de ventana que el
resto de fotos de la casa. */
.trabajo { width: 100%; display: grid; gap: .55rem; }
.trabajo:empty { display: none; }
.trabajo__t { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tx-2); }
.trabajo__fig { margin: 0; display: grid; gap: .5rem; }
.trabajo__win { box-shadow: 0 3px 10px rgba(22, 23, 44, .08), 0 14px 30px rgba(22, 23, 44, .10); }
.trabajo__pantalla { background: #E4E1DD; }
.trabajo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; }
.trabajo__pie { font-size: var(--t-label); line-height: 1.5; color: var(--tx-2); }
/* ---- Las tres cajas del catálogo (BOX 1 · BOX 2 · BOX 3) ----
Cada una es una ventana-player grande: barra con el nombre del fichero y la
frecuencia, pantalla con el número de caja sobre el fotograma, y dentro los
entregables como lista de capítulos. La que queda en el centro de la
pantalla se «reproduce»: se enciende y su pista roja avanza con el scroll
(js/motion.js). */
.cajas { display: grid; gap: clamp(.9rem, 1.8vw, 1.35rem); }
.caja__win { margin: 0; overflow: hidden; transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.caja.is-activo .caja__win { box-shadow: inset 0 1px 0 rgba(255,255,255,.92), var(--shadow-lift); }
.caja__pantalla {
position: relative;
display: grid;
align-content: end;
min-height: clamp(96px, 12vw, 132px);
padding: clamp(.8rem, 1.8vw, 1.1rem);
background: var(--navy);
overflow: hidden;
isolation: isolate;
}
/* El fotograma va detrás, desaturado y al 30 %: lee como pantalla de vídeo
sin afirmar que esa foto sea de esa caja en un canal concreto (misma
decisión que las miniaturas de fase de la ronda 7). */
.caja__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; opacity: .3; filter: saturate(.5); }
.caja__ico { position: absolute; right: clamp(.8rem, 1.8vw, 1.1rem); top: 50%; translate: 0 -50%; z-index: 2; width: clamp(38px, 5vw, 52px); opacity: .5; transition: opacity .4s var(--ease); }
.caja__ico svg { width: 100%; height: auto; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.caja.is-activo .caja__ico { opacity: .82; }
.caja__id { position: relative; z-index: 3; display: grid; gap: .2rem; }
.caja__n { font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: .12em; color: var(--rose); }
.caja__t { font-family: var(--f-display); font-weight: 800; font-size: var(--t-h3); letter-spacing: -0.028em; line-height: 1.06; color: #fff; }
.caja__pista { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 3px; background: rgba(255,255,255,.22); }
.caja__pista i { display: block; height: 100%; width: 100%; background: var(--coral); transform: scaleX(0); transform-origin: left center; }
.caja__cuerpo { display: grid; gap: .55rem; padding: clamp(1rem, 2vw, 1.3rem); }
.caja__q { font-size: var(--t-small); color: var(--tx-1); max-width: 46ch; }
.caja__k { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tx-2); }
.caja__k .num { color: var(--tx-1); font-weight: 500; }
/* Los entregables, como los capítulos de un vídeo largo: número a la
izquierda, filete entre filas, y nada de viñetas redondas. */
.capitulos { display: grid; margin: .15rem 0 0; padding: 0; list-style: none; counter-reset: none; }
.capitulos li { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .5rem; align-items: baseline; padding: .5rem 0; border-top: 1px solid var(--line-soft); }
.capitulos li:first-child { border-top: 0; }
.capitulos__n { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tx-chrome); }
.capitulos__t { font-size: var(--t-small); line-height: 1.45; color: var(--tx-1); }
/* ============================================================
Detrás de las cámaras
Ocho fotos reales de una jornada de rodaje, cada una en la MISMA
ventana de escritorio que usa el hero (.winx): barra gris, punto
rojo de «grabando», nombre del fichero y badge «MAKING».
El mosaico se justifica solo. Cada ventana lleva su proporción en
`--ar` y la usa a la vez de `flex-grow` y de base del `flex-basis`:
dentro de una fila, las alturas salen iguales y la fila llena el
ancho exacto. Las dos filas suman proporciones distintas (4,6 y
6,11), así que una queda ~240 px de alto y la otra ~185: el
desnivel es el que hace que NO parezca una rejilla.
============================================================ */
.rodaje { overflow: clip; }
@supports not (overflow: clip) { .rodaje { overflow: hidden; } }
.rodaje__mosaico { display: grid; gap: clamp(.9rem, 1.5vw, 1.25rem); padding: 0 4px; }
.rodaje__fila {
display: flex;
gap: clamp(.9rem, 1.5vw, 1.25rem);
margin: 0;
padding: 0;
list-style: none;
}
/* `flex-basis: 0` + `flex-grow: --ar`: el ancho libre se reparte EXACTAMENTE
en proporción a las formas, así que todas las ventanas de una fila acaban
con el mismo alto y la fila llena el ancho sin cuentas a mano. */
.rodaje__item { flex: var(--ar) 1 0; min-width: 0; }
.rodaje__win {
--r: 0deg;
transform: rotate(var(--r));
transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.rodaje__item:hover .rodaje__win,
.rodaje__item:focus-within .rodaje__win {
transform: rotate(var(--r)) translateY(-7px);
box-shadow: 0 6px 16px rgba(0,0,0,.10), 0 22px 46px rgba(0,0,0,.14);
}
.rodaje__pantalla { aspect-ratio: var(--ar); background: #E4E1DD; }
.rodaje__foto {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center var(--opy, 50%);
}
/* Móvil: las dos filas se encadenan en UNA tira que se arrastra, con parada
en cada ventana. Las filas siguen siendo dos listas (no se tocan las
semánticas); solo dejan de apilarse. */
@media (max-width: 860px) {
.rodaje__mosaico {
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-block: 2px .5rem;
/* Sangra hasta los bordes de la pantalla: la tira se lee como tira. */
margin-inline: calc(-1 * clamp(1.25rem, 4vw, 3rem));
padding-inline: clamp(1.25rem, 4vw, 3rem);
scroll-padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.rodaje__mosaico::-webkit-scrollbar { display: none; }
.rodaje__fila { flex: 0 0 auto; }
.rodaje__item {
flex: 0 0 auto;
width: calc(var(--ar) * 210px);
scroll-snap-align: start;
}
/* Se apaga la inclinación con `transform`, no reescribiendo `--r`: el
ángulo viene en el atributo `style` de cada ventana y una variable
en línea gana a cualquier regla de la hoja. El :hover entra también,
que en táctil se queda pegado después de tocar. */
.rodaje__win,
.rodaje__item:hover .rodaje__win,
.rodaje__item:focus-within .rodaje__win { transform: none; }
}
/* ============================================================
Equipo: dos ventanas con foto real del rodaje + las cinco pistas
Eran cinco filas de 102 px sobre fondo crema y 230 px de aire muerto:
985 px de sección, la más cara en scroll por lo poco que dice, y la
única sin nada de chrome. Después pasó a ser una ventana con las
cinco pistas; ahora, además, tiene cara: dirección y equipo en dos
ventanas 4:5 sobre la misma rejilla de puntos que el hero.
============================================================ */
.equipo {
background-color: var(--paper);
background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .08) 1px, transparent 1.5px);
background-size: 24px 24px;
border-block: 1px solid var(--line-soft);
}
/* Las tres caras arriba, a todo el ancho, y la ventana de roles debajo
(16-09-2026). Antes eran DOS columnas —fotos a la izquierda, `equipo.txt` a
la derecha— y con dos tarjetas cuadraba; con tres, cada foto se quedaba en
190 px y no se le veía la cara a nadie. Quien lo hace va primero y grande;
los cinco roles, debajo. */
.equipo__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.equipo__fotos { display: grid; gap: clamp(.9rem, 1.6vw, 1.25rem); }
/* Una sola columna en el móvil (un camino, una cara cada vez) y las tres en
cuanto hay sitio: a 700 px cada tarjeta mide ~203 px de ancho, que es lo
mínimo para que un retrato 4:5 siga leyéndose como un retrato. */
@media (min-width: 700px) {
.equipo__fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.equipofoto { margin: 0; display: grid; gap: .7rem; }
.equipofoto__win {
background: var(--paper);
border: 1px solid var(--line);
box-shadow: var(--shadow-soft);
}
.equipofoto__win .win__bar { background: linear-gradient(180deg, #FDFDFD, #F0EDE9); border-bottom-color: var(--line); }
.equipofoto__marco { position: relative; aspect-ratio: 4 / 5; background: #E4E1DD; }
.equipofoto__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.equipofoto__pie { display: grid; gap: .15rem; padding-inline: 2px; }
.equipofoto__pie b { font-family: var(--f-display); font-size: var(--t-body); font-weight: 800; letter-spacing: -0.02em; }
.equipofoto__pie span { font-size: var(--t-small); color: var(--tx-2); }
.equipofoto__nombre { font-weight: 500; color: var(--tx-1) !important; }
/* El cargo, debajo del nombre y en la letra de los datos. --coral-ink y no
--coral-deep: a .74rem sobre el crema, el claro se queda en 4,0:1. */
.equipofoto__pie .equipofoto__cargo {
font-family: var(--f-mono);
font-size: var(--t-micro);
letter-spacing: .05em;
text-transform: uppercase;
color: var(--coral-ink);
}
/* ------------------------------------------------------------
La anotación de 2010 sobre una foto de GRUPO.
Es el bocadillo de las «annotations» de la época: un punto sobre la
persona, una raya y la etiqueta con su nombre y su rol. Sirve para decir
cuál de los que salen en una foto de grupo es el de la tarjeta.
Se coloca con --x/--y en % sobre el marco de la foto y entra solo con
transform/opacity, cuando la tarjeta ya está revelada. El contenido va
`aria-hidden`: el nombre y el cargo están escritos debajo, en texto.
------------------------------------------------------------ */
.senal {
position: absolute;
left: var(--x, 50%);
top: var(--y, 50%);
z-index: 3;
pointer-events: none;
opacity: 0;
transform: scale(.94);
transition: opacity .42s var(--ease) .34s, transform .42s var(--ease) .34s;
}
.equipofoto.is-in .senal { opacity: 1; transform: none; }
.senal__punto {
position: absolute; left: 0; top: 0;
width: 12px; height: 12px; margin: -6px 0 0 -6px;
border-radius: 50%;
border: 2px solid #fff;
background: var(--coral-deep);
box-shadow: 0 1px 7px rgba(10, 9, 22, .55);
}
/* La raya sale del punto hacia arriba y hacia el lado que diga la pieza. */
.senal__linea {
position: absolute; left: 0; top: 0;
width: 54px; height: 2px;
background: #fff;
box-shadow: 0 1px 5px rgba(10, 9, 22, .45);
transform-origin: 0 50%;
transform: rotate(-38deg);
}
.senal--izq .senal__linea { transform: rotate(-142deg); }
.senal__caja {
position: absolute;
left: 42px; bottom: 33px;
padding: 6px 9px 7px;
border-radius: 3px;
font-family: var(--f-chrome);
line-height: 1.2;
color: var(--ink);
background: rgba(255, 255, 255, .93);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(22, 23, 44, .22);
box-shadow: 0 4px 12px rgba(22, 23, 44, .18);
white-space: nowrap;
}
.senal--izq .senal__caja { left: auto; right: 42px; }
.senal__caja b { display: block; font-size: var(--t-micro); font-weight: 700; }
.senal__caja span { display: block; margin-top: 1px; font-family: var(--f-mono); font-size: 9.5px; color: var(--coral-ink); }
@media (prefers-reduced-motion: reduce) {
.senal { opacity: 1; transform: none; transition: none; }
}
/* Las cinco pistas: nombre en píldora, dato en mono y la línea que
explica qué hace ese rol. */
/* Debajo de las tres caras, la ventana no se estira a los 1.184 px del
contenedor: se corta a la misma medida a la que rompe el `lead` de la
cabecera, para que la sección siga leyéndose como una columna de texto y no
como una tabla ancha con la mitad derecha vacía. */
.equipo__win { border-radius: var(--r-win); max-width: 56rem; }
.roles { display: grid; margin: 0; padding: 0; list-style: none; }
.rol { padding: .72rem 0; border-bottom: 1px solid var(--line-soft); }
.rol:last-child { border-bottom: 0; }
.rol__cab { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; }
.rol__d { margin: .4rem 0 0; color: var(--tx-2); font-size: var(--t-small); max-width: 52ch; }
/* Dos columnas en cuanto hay sitio: la píldora con su dato a la izquierda y
la línea que explica el rol a la derecha. Apiladas, las cinco pistas median
90 px cada una y la ventana se iba 220 px por debajo de las dos fotos de al
lado — un hueco muerto en mitad de la sección. */
@media (min-width: 560px) {
.rol { display: grid; grid-template-columns: minmax(0, 9.8rem) minmax(0, 1fr); gap: .3rem 1.1rem; align-items: start; }
.rol__cab { flex-direction: column; align-items: flex-start; gap: .3rem; }
.rol__d { margin-top: .2rem; }
}
.rol__pill {
display: inline-flex;
align-items: center;
padding: .26rem .72rem;
border-radius: var(--r-pill);
border: 1px solid rgba(22, 23, 44, .14);
background: rgba(255, 255, 255, .7);
font-family: var(--f-display);
font-size: var(--t-small);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--tx-1);
}
.rol__dato { font-size: var(--t-micro); color: var(--coral-ink); white-space: nowrap; }
.equipo__cierre { margin-top: 1.1rem; font-size: var(--t-small); color: var(--tx-2); }
/* ============================================================
Testimonios: comentarios de 2010
============================================================ */
.comentarios { display: grid; gap: 1.1rem; }
.comentario { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .85rem; }
.comentario img { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; }
.comentario__cab { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.comentario__autor { font-weight: 500; font-size: var(--t-small); }
.comentario__meta { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tx-3); }
.comentario__txt { margin-top: .25rem; color: var(--tx-2); font-size: var(--t-small); }
.comentario--pendiente .comentario__txt { color: var(--tx-3); font-style: italic; }
.comentario__acc { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tx-4); }
.comentario__acc svg { width: 12px; height: 12px; fill: currentColor; }
/* ============================================================
FAQ = el hilo de comentarios del vídeo
Las seis cajas con un «+» eran un acordeón de web corporativa en una
página que finge ser un reproductor. Ahora cada pregunta es un COMENTARIO
—avatar, quién, cuándo, «me gusta» y «Responder»— y la respuesta de Growth
Lab va ANIDADA debajo, con el rail vertical de un hilo de verdad. Las
respuestas se despliegan solas al bajar, en cascada (js/ui.js → hilo).
Lo que es decorado va DICHO: la primera línea del hilo avisa de que quién
pregunta, cuándo y los «me gusta» son ilustrativos. Y los mandos del
comentario (pulgar, «Responder») son `aria-hidden` y NO son botones: un
botón que no hace nada es una promesa rota y una parada vacía para el
teclado.
Anatomía del anidado: 21st.dev Reddit Nested Thread Reply #5621
(_qa/INSPIRACION.md) — rail a la izquierda de la respuesta y plegado por
comentario, sin Radix ni estado en React.
============================================================ */
.faq__win { border-radius: var(--r-win); }
.faq__lista { max-width: 920px; }
.hilo { display: grid; }
/* El aviso de que el decorado es decorado. Va ARRIBA DEL TODO, antes del
primer comentario: en un pie no lo lee nadie. */
.hilo__aviso {
margin: 0 0 1.1rem;
padding-bottom: .9rem;
border-bottom: 1px solid var(--line-soft);
font-family: var(--f-mono);
font-size: var(--t-micro);
line-height: 1.6;
color: var(--tx-3);
max-width: 68ch;
}
.hilo__item { padding-block: 1.05rem; border-bottom: 1px solid var(--line-soft); }
.hilo__item:last-child { border-bottom: 0; padding-bottom: .2rem; }
/* ---- El comentario y la respuesta: la misma fila avatar + cuerpo ---- */
.hilo__q, .hilo__rta { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .7rem; align-items: start; }
.hilo__q-cuerpo, .hilo__rta-cuerpo { min-width: 0; }
.hilo__av { width: 34px; height: 34px; border-radius: 50%; flex: none; }
/* El avatar de quien pregunta: una mancha coral dibujada en CSS, distinta en
cada comentario (`--a`). Sin cara de nadie, sin una petición más y sin
ningún servicio de terceros generando caras falsas. */
.hilo__av--q {
background:
radial-gradient(58% 58% at calc(26% + var(--a, 0) * 7%) calc(30% + var(--a, 0) * 4%), var(--coral-soft), transparent 64%),
radial-gradient(64% 64% at calc(74% - var(--a, 0) * 5%) calc(72% - var(--a, 0) * 5%), var(--rose), transparent 66%),
var(--rose-mist);
box-shadow: inset 0 0 0 1px rgba(196, 58, 62, .12);
}
/* El de Growth Lab: el blob de la marca en blanco sobre coral, la misma
pieza del sello. Se distingue del resto sin leer nada, que es de lo que va.
El blob llega coral en el SVG, así que se usa de MÁSCARA sobre un cuadro
blanco: teñirlo con `filter` habría tocado también el fondo. */
.hilo__av--gl {
display: grid;
place-items: center;
background: var(--coral-ink);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 8px rgba(196, 58, 62, .28);
}
.hilo__av--gl::after {
content: "";
width: 62%; height: 62%;
background: #fff;
-webkit-mask: center / contain no-repeat url("../assets/brand-web/marca.svg");
mask: center / contain no-repeat url("../assets/brand-web/marca.svg");
}
.hilo__cab { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem; margin: 0 0 .25rem; }
.hilo__autor { font-size: var(--t-label); font-weight: 500; letter-spacing: -0.012em; color: var(--tx-1); }
.hilo__autor--gl { color: var(--coral-ink); }
.hilo__chapa {
font-family: var(--f-mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
padding: .12rem .34rem;
border-radius: 3px;
color: #fff;
background: var(--coral-ink);
}
.hilo__cuando { font-size: var(--t-micro); color: var(--tx-3); }
.hilo__txt { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--tx-2); max-width: 62ch; }
/* La pregunta es el titular del comentario: mismo cuerpo que el texto pero en
tinta y con el peso de la letra de la casa. No se hincha a tamaño de h3
porque en un hilo el comentario y la respuesta pesan lo mismo. */
.hilo__txt--q {
font-family: var(--f-display);
font-size: var(--t-body);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.35;
color: var(--tx-1);
}
/* ---- Los mandos del comentario: DECORADO declarado ---- */
.hilo__acc { display: flex; align-items: center; gap: .4rem; margin: .5rem 0 0; color: var(--tx-3); }
.hilo__mg { display: inline-flex; }
.hilo__mg svg { width: 14px; height: 14px; fill: currentColor; opacity: .55; }
.hilo__mg-n { font-size: var(--t-micro); }
.hilo__responder { margin-left: .5rem; font-size: var(--t-micro); font-weight: 500; letter-spacing: -0.01em; }
/* ---- El disparador de la respuesta ---- */
.hilo__toggle {
display: inline-flex;
align-items: center;
gap: .45rem;
margin-top: .45rem;
min-height: 34px;
padding: 0 .55rem 0 .1rem;
border-radius: var(--r-pill);
font-size: var(--t-label);
font-weight: 500;
letter-spacing: -0.012em;
color: var(--coral-ink);
}
.hilo__toggle:hover { background: rgba(196, 58, 62, .07); }
.hilo__toggle-ico { display: inline-grid; place-items: center; width: 16px; }
.hilo__toggle-ico svg { width: 8px; height: 10px; fill: currentColor; transition: transform .3s var(--ease); }
.hilo__item.is-abierto .hilo__toggle-ico svg { transform: rotate(90deg); }
/* ---- La respuesta anidada ----
Tres capas por el mismo motivo de siempre: el panel es la rejilla
(0fr↔1fr), la caja intermedia recorta SIN relleno —un hijo directo de un
track de 0fr conserva su padding y deja asomar la primera franja del
texto— y todo el espaciado vive dentro. */
.hilo__panel { display: grid; grid-template-rows: 0fr; }
.hilo__caja {
min-height: 0;
padding: 0;
border: 0;
overflow: hidden;
visibility: hidden;
transition: visibility 0s linear .42s;
}
.hilo__item.is-abierto .hilo__panel { grid-template-rows: 1fr; }
.hilo__item.is-abierto .hilo__caja { visibility: visible; transition-delay: 0s; }
/* El rail del hilo: la línea vertical que dice «esto cuelga de arriba». */
.hilo__rta {
margin: .85rem 0 .2rem 1.05rem;
padding: .1rem 0 .1rem 1.15rem;
border-left: 2px solid rgba(196, 58, 62, .18);
}
@media (max-width: 520px) {
.hilo__q, .hilo__rta { grid-template-columns: 28px minmax(0, 1fr); gap: .55rem; }
.hilo__av { width: 28px; height: 28px; }
.hilo__rta { margin-left: .35rem; padding-left: .8rem; }
}
/* ============================================================
Contacto
============================================================ */
.contacto { position: relative; overflow: hidden; }
.contacto__grid { position: relative; z-index: 2; display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
/* `start` y no `center`: la columna de texto arrancaba 186 px por debajo
del borde de la ventana del formulario y parecía que una de las dos se
había caído. */
@media (min-width: 960px) { .contacto__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); align-items: start; } }
.contacto__intro { display: grid; gap: 1rem; justify-items: start; }
.contacto__otros { margin-top: 1rem; }
.contacto__otros-t { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tx-2); margin-bottom: .6rem; }
.contacto__enlaces { display: flex; flex-wrap: wrap; gap: .55rem; }
.form__nota { margin-top: .85rem; font-size: var(--t-label); line-height: 1.5; color: var(--tx-2); }
.form__nota a { color: var(--coral-ink); text-decoration: underline; text-underline-offset: 3px; }
.sizes__nota { margin-top: .5rem; font-size: var(--t-label); color: var(--tx-2); }
/* Aviso humano cuando todavía no hay destino configurado: nunca un mensaje
de programador con el nombre de un fichero dentro. */
.form__aviso { display: grid; gap: .6rem; justify-items: start; margin-top: .3rem; padding: .95rem 1.05rem; border-radius: var(--r-card); background: rgba(234,88,91,.08); font-size: var(--t-small); color: var(--tx-1); }
.form__aviso .btn { --btn-h: 44px; }
.contacto__win { border-radius: var(--r-panel); }
.contacto__win .win__body { padding: clamp(1.1rem, 2.2vw, 1.75rem); }
#form { display: grid; gap: 1rem; }
.form__fila { display: grid; gap: 1rem; }
@media (min-width: 560px) { .form__fila { grid-template-columns: 1fr 1fr; } }
.field--tamano { border: 0; padding: 0; margin: 0; }
.field--tamano legend { font-size: var(--t-label); font-weight: 500; color: var(--tx-2); padding: 0; margin-bottom: .45rem; }
.form__err { margin-top: -.3rem; }
.form__ok { display: grid; gap: .6rem; justify-items: start; }
.form__ok h3 { font-size: var(--t-h3); }
.form__ok p { color: var(--tx-2); font-size: var(--t-small); }
/* ---- Las píldoras de dominio del correo ----------------------------
Van pegadas DEBAJO del campo, que es donde no compiten con él: en la
columna del formulario el input mide 270 px y meter tres píldoras a su
derecha lo dejaba en un hueco de escribir el nombre y poco más.
La primera es la grande (@gmail.com); las otras dos, la mitad de peso.
Al pulsarlas el foco vuelve al campo: el teclado del móvil no se cierra. */
.dominios { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .15rem; }
.dom {
--h: 32px;
display: inline-flex;
align-items: center;
min-height: var(--h);
padding: 0 .72rem;
border-radius: var(--r-pill);
border: 1px solid transparent;
background: rgba(22, 23, 44, .055);
font-family: var(--f-mono);
font-size: var(--t-micro);
letter-spacing: -0.01em;
color: var(--tx-2);
cursor: pointer;
transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.dom--principal { --h: 36px; padding: 0 .92rem; font-size: var(--t-label); color: var(--tx-1); background: rgba(22, 23, 44, .085); }
.dom:hover { background: rgba(22, 23, 44, .12); color: var(--tx-1); transform: translateY(-1px); }
.dom:active { transform: translateY(0) scale(.98); }
.dom[aria-pressed="true"] {
background: var(--ink);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px rgba(22,23,44,.18);
}
.dom:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
/* ---- «Qué quieres conseguir»: chapas + texto libre ------------------
Casillas de verdad debajo de la etiqueta (varias a la vez). Gris en
reposo, tinta al elegir: el mismo mando que ya usa el tamaño del canal,
pero en gris para que se distinga de un solo vistazo que aquí se puede
marcar más de una. */
.field--objetivo { border: 0; padding: 0; margin: 0; }
.field--objetivo legend { font-size: var(--t-label); font-weight: 500; color: var(--tx-2); padding: 0; margin-bottom: .45rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pill--chip {
cursor: pointer;
color: var(--tx-1);
background: rgba(22, 23, 44, .055);
border-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
}
.pill--chip:hover { background: rgba(22, 23, 44, .11); }
.chips input:checked + .pill--chip {
background: var(--ink);
border-color: rgba(255,255,255,.16);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px rgba(22,23,44,.18);
}
.chips input:focus-visible + .pill--chip { outline: 2px solid var(--coral); outline-offset: 3px; }
.objetivo__l { margin-top: .55rem; font-size: var(--t-label); font-weight: 500; color: var(--tx-2); }
@media (max-width: 820px) {
/* Área de dedo de verdad, igual que las píldoras del tamaño del canal. */
.dom { --h: 44px; padding: 0 .95rem; font-size: var(--t-label); }
.dom--principal { --h: 46px; font-size: var(--t-small); }
}
/* ============================================================
La celebración: el oro y la placa
Cuando el mensaje SALE de verdad (o en ?demo=1, que lo dice en pantalla),
la sección entera se vuelve dorada y en el centro aparece la placa que la
plataforma entrega al millón de suscriptores, con el nombre del canal
grabado en el metal.
El grabado no es texto puesto encima: vive en un lienzo con las
coordenadas de la imagen original (1600x1099) y va colocado con la misma
perspectiva que trae el objeto, calculada midiendo las cuatro esquinas de
la chapa oscura. Por eso la matriz es una CONSTANTE de esta imagen: si la
placa cambia de foto, hay que volver a medir.
============================================================ */
.contacto__oro {
position: absolute;
inset: 0;
z-index: 0;
opacity: 0;
background: linear-gradient(135deg, #F6D365 0%, #EFC85A 32%, #DCAF41 66%, #C89B2F 100%);
transition: opacity .6s var(--ease-in-out);
pointer-events: none;
}
/* El respiro del oro: una sola oleada de luz que sube y baja y se queda
quieta. No es un latido infinito — eso convierte una celebración en una
alarma. */
.contacto__oro::before {
content: "";
position: absolute;
inset: -20%;
background: radial-gradient(60% 55% at 50% 42%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
opacity: 0;
}
/* El brillo que recorre el fondo una vez, de izquierda a derecha. */
.contacto__oro::after {
content: "";
position: absolute;
inset: -30% -40%;
background: linear-gradient(104deg, transparent 40%, rgba(255,255,255,.42) 50%, transparent 60%);
transform: translateX(-120%);
}
.contacto.is-oro .contacto__oro { opacity: 1; }
.contacto.is-oro .contacto__oro::before { animation: oroPulso 2s var(--ease-in-out) .45s 1 both; }
.contacto.is-oro .contacto__oro::after { animation: oroBrillo 1.6s var(--ease) .35s 1 both; }
@keyframes oroPulso { 0% { opacity: 0; } 45% { opacity: .38; } 100% { opacity: .1; } }
@keyframes oroBrillo { to { transform: translateX(120%); } }
/* Sobre oro la tinta secundaria sube de peso: a .66 el texto pequeño se
quedaba en 4:1 contra el extremo oscuro del degradado. */
.contacto.is-oro { --tx-2: rgba(22, 23, 44, .86); --tx-3: rgba(22, 23, 44, .86); }
.contacto.is-oro .glow { opacity: 0; transition: opacity .6s var(--ease-in-out); }
.contacto__grid.contacto__grid--premio { grid-template-columns: minmax(0, 1fr); justify-items: center; }
/* `width: 100%` no es decorativo: sin él, `justify-items: center` deja que
la placa se dimensione a su contenido y en el móvil se quedaba en 267 px
de los 350 disponibles. */
.premio {
display: grid;
justify-items: center;
gap: .9rem;
width: 100%;
max-width: 780px;
text-align: center;
}
.premio__t {
font-family: var(--f-mono);
font-size: var(--t-label);
font-weight: 400;
letter-spacing: -0.01em;
color: var(--tx-2);
}
.premio__t:focus { outline: none; }
.premio__linea { font-size: var(--t-lead); color: var(--tx-1); }
.premio__demo { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tx-2); }
.premio__grabado-movil { display: none; }
.premio .btn { margin-top: .4rem; }
.placa { position: relative; width: min(100%, 720px); margin: 0; }
.placa__img { display: block; width: 100%; height: auto; }
/* El destello especular: la MISMA silueta de la placa recortando una banda
de luz que la cruza. Sin la máscara sería un rectángulo blanco pasando por
encima, que es el truco barato de siempre. */
.placa__brillo {
position: absolute;
inset: 0;
background: linear-gradient(104deg, transparent 38%, rgba(255,255,255,.75) 48%, rgba(255,255,255,.12) 56%, transparent 64%);
-webkit-mask-image: url(../assets/objetos/premio-play.v2.webp);
mask-image: url(../assets/objetos/premio-play.v2.webp);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mix-blend-mode: screen;
opacity: 0;
pointer-events: none;
}
.placa__capa {
position: absolute;
left: 0;
top: 0;
width: 1600px;
height: 1099px;
transform-origin: 0 0;
transform: scale(var(--f, .41));
pointer-events: none;
}
.placa__grabado {
--nombre-k: 1;
position: absolute;
left: 0;
top: 0;
width: 1005px;
height: 133px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 9px;
transform-origin: 0 0;
transform: matrix3d(0.810231, -0.052939, 0, -0.000076, 0, 0.964546, 0, 0, 0, 0, 1, 0, 369.144, 795.166, 0, 1);
}
.placa__nombre {
font-family: var(--f-marca);
font-weight: 800;
font-size: calc(var(--t-micro) * 6 * var(--nombre-k) * var(--ajuste, 1)); /* 72 px en las coordenadas de la foto de la placa */
line-height: 1;
letter-spacing: -0.02em;
white-space: nowrap;
background: linear-gradient(180deg, #FBEAB4 0%, #DCB556 46%, #9A7826 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* Relieve: luz arriba, sombra abajo. Va con `drop-shadow` y no con
`text-shadow` porque el relleno es un degradado recortado y una sombra
de texto se vería A TRAVÉS de la letra. */
filter: drop-shadow(0 -3px 0 rgba(255, 249, 226, .5)) drop-shadow(0 4px 5px rgba(18, 12, 0, .62));
}
.placa__sub {
font-family: var(--f-mono);
font-size: calc(var(--t-label) * 2);
line-height: 1;
letter-spacing: .14em;
color: rgba(247, 236, 205, .82);
text-shadow: 0 -2px 0 rgba(0,0,0,.35), 0 2px 1px rgba(255,255,255,.14);
}
/* Entrada: la placa llega de lejos y se endereza. Nada de confeti. */
.placa {
opacity: 0;
transform: perspective(1400px) scale(.8) rotateY(-13deg);
}
.premio.is-in .placa {
opacity: 1;
transform: perspective(1400px) scale(1) rotateY(0deg);
transition: transform 1s var(--ease) .12s, opacity .5s var(--ease) .12s;
}
.premio.is-in .placa__brillo { animation: placaBrillo 1.25s var(--ease) .95s 1 both; }
@keyframes placaBrillo {
0% { opacity: 0; transform: translateX(-42%); }
20% { opacity: 1; }
100% { opacity: 0; transform: translateX(42%); }
}
@media (max-width: 640px) {
/* A 390 px la placa mide 340: la segunda línea del grabado se leería a
seis píxeles. Baja al pie de la placa y el nombre se queda solo, grande,
en el metal. El texto completo sigue en el `alt` de la imagen. */
.placa__grabado { --nombre-k: 1.4444; }
.placa__sub { display: none; }
.premio__grabado-movil {
display: block;
font-family: var(--f-mono);
font-size: var(--t-micro);
letter-spacing: .1em;
color: var(--tx-2);
}
}
/* ---- El aviso de la esquina ---------------------------------------- */
.aviso {
position: fixed;
z-index: 140;
top: calc(var(--hdr-h, 52px) + 14px);
right: 16px;
display: flex;
align-items: center;
gap: .6rem;
max-width: min(360px, calc(100vw - 32px));
padding: .78rem 1rem;
border-radius: var(--r-card);
background: rgba(22, 23, 44, .95);
color: #fff;
box-shadow: var(--shadow-deep);
opacity: 0;
transform: translateX(118%);
transition: transform .5s var(--ease), opacity .3s var(--ease);
}
.aviso.is-in { opacity: 1; transform: none; }
.aviso__txt { font-size: var(--t-small); line-height: 1.35; }
.aviso__campana { display: flex; flex: none; }
.aviso__campana svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (max-width: 700px) {
.aviso { top: calc(var(--hdr-h, 62px) + 10px); left: 16px; right: 16px; max-width: none; transform: translateY(-160%); }
}
@media (prefers-reduced-motion: reduce) {
.contacto__oro { transition: none; }
.contacto.is-oro .contacto__oro::before,
.contacto.is-oro .contacto__oro::after,
.premio.is-in .placa__brillo { animation: none; }
.placa, .premio.is-in .placa { opacity: 1; transform: none; transition: none; }
.aviso { transition: none; }
}
/* ============================================================
Pie
============================================================ */
.pie { padding-block: clamp(3rem, 6vw, 5rem) 2.5rem; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0)); }
/* El cierre de la página: «Growth Lab» escrito con píxeles.
El NOMBRE no cambia nunca. Lo que cambia es cada píxel: cada celda arranca
siendo el tubo rojo redondeado de 2005 —con su brillo arriba y el trazo
blanco del centro— y, al pasar por encima del pie o al llegar al final de
la página, se ACTUALIZA al botón de play de ahora. La cascada va por
columnas, de izquierda a derecha, con la barra roja llenándose debajo.
Las dos caras viven en la MISMA celda del SVG, apiladas, así que el cambio
es solo opacity y transform: ni una propiedad de layout, ni un salto de
altura del pie. Es nuestro nombre en ese estilo; en ningún estado aparece
ninguna marca ajena. */
.pie__wordmark { position: relative; display: grid; gap: clamp(1rem, 2vw, 1.5rem); justify-items: start; margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 100%; }
.pie__logo { width: 100%; max-width: 200px; height: auto; }
.pie__lienzo { display: grid; width: 100%; max-width: 1100px; }
.pie__wordmark .wm { width: 100%; height: auto; }
/* Las dos caras de cada celda, una encima de otra en el mismo hueco. */
.wm__c, .wm__2005, .wm__now { transform-box: fill-box; transform-origin: center; }
.wm__now { opacity: 0; transform: scale(.5); }
/* ---- La actualización, celda a celda ----
20 ms por COLUMNA: con las 62 columnas de «Growth Lab», la última arranca
justo cuando la barra de abajo termina de llenarse. */
@keyframes wm-sale { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.5); } }
@keyframes wm-entra { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
.is-actualizando .wm__2005,
.is-actual .wm__2005 { animation: wm-sale .26s var(--ease) both; animation-delay: calc(var(--i, 0) * 20ms); }
.is-actualizando .wm__now,
.is-actual .wm__now { animation: wm-entra .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 20ms + 60ms); }
/* Ya actualizado: al pasar por encima, los plays se reproducen en la misma
cascada. Es el guiño final, y solo existe cuando ya son plays. */
@keyframes wm-play {
0% { transform: scale(1); filter: none; }
30% { transform: scale(1.16); filter: brightness(1.26) saturate(1.12); }
100% { transform: scale(1); filter: none; }
}
.is-actual.pie__wordmark:hover .wm__c,
.is-actual.pie__wordmark:focus-within .wm__c,
.is-actual.pie__wordmark.is-tocado .wm__c {
animation: wm-play .58s var(--ease) both;
animation-delay: calc(var(--i, 0) * 16ms);
}
/* La barra de «actualizando»: se llena en 1,2 s mientras dura la cascada. */
.pie__pista { display: block; width: 100%; max-width: 1100px; height: 4px; margin-top: clamp(.7rem, 1.4vw, 1rem); border-radius: 999px; background: rgba(22,23,44,.10); overflow: hidden; }
.pie__pista i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--coral-deep), var(--coral)); transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--ease); }
.is-actualizando .pie__pista i,
.is-actual .pie__pista i,
.is-actual.pie__wordmark:hover .pie__pista i,
.is-actual.pie__wordmark.is-tocado .pie__pista i { transform: scaleX(1); transition-duration: 1.2s; transition-timing-function: linear; }
@media (prefers-reduced-motion: reduce) {
/* Sin animación: se enseña directamente el estado actual. */
.wm__2005 { opacity: 0; }
.wm__now { opacity: 1; transform: none; }
.is-actualizando .wm__2005, .is-actual .wm__2005,
.is-actualizando .wm__now, .is-actual .wm__now { animation: none; }
.is-actual.pie__wordmark:hover .wm__c, .is-actual.pie__wordmark.is-tocado .wm__c { animation: none; filter: brightness(1.1); }
.pie__pista i { transition: none; transform: scaleX(1); }
}
/* Cuatro columnas de enlaces, como el pie de la referencia, en vez de una
fila suelta. */
.pie__fila { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); padding-top: 1.75rem; border-top: 1px solid var(--line); }
@media (min-width: 780px) { .pie__fila { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); align-items: start; } }
.pie__matriz { font-size: var(--t-small); color: var(--tx-2); max-width: 44ch; }
/* --coral-ink y no --coral-deep: #D4474B sobre el crema da 4,0:1 y NO pasa
AA; el token oscuro existe justo para esto (4,8:1). */
.pie__matriz a { color: var(--coral-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; padding-block: .4rem; display: inline-block; }
.pie__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
@media (min-width: 620px) { .pie__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pie__col h2 { font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-chrome); margin-bottom: .55rem; }
.pie__col ul { display: grid; gap: .1rem; }
.pie__col a { display: inline-flex; align-items: center; min-height: 34px; font-size: var(--t-small); color: var(--tx-2); }
.pie__col a:hover { color: var(--tx-1); }
.pie__copy { margin-top: 1.75rem; font-family: var(--f-mono); font-size: var(--t-micro); color: var(--tx-3); }
/* Enfoque dentro de la rejilla de creadores */
.video { scroll-margin-top: calc(var(--hdr-h) + 24px); }
.video__abrir:focus-visible { outline: none; }
.video__abrir:focus-visible .mini { outline: 2px solid var(--coral); outline-offset: 3px; }
/* ============================================================
Páginas sueltas: gracias y legal
============================================================ */
.pagina { position: relative; min-height: 100dvh; display: grid; align-items: center; padding-block: clamp(3rem, 8vw, 6rem); overflow: hidden; }
.pagina--texto { align-items: start; }
.pagina__caja { position: relative; z-index: 2; display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); justify-items: start; }
.pagina__logo img { height: var(--logo-h); width: auto; }
.pagina__win { border-radius: var(--r-panel); width: 100%; }
.pagina__win .win__body { display: grid; gap: 1rem; justify-items: start; padding: clamp(1.5rem, 3.5vw, 2.75rem); }
.pagina__win h1 { font-size: calc(var(--t-h2) * .72); }
.pasos-simple { display: grid; gap: .6rem; margin-block: .5rem; }
.pasos-simple li { display: flex; gap: .8rem; align-items: baseline; font-size: var(--t-small); color: var(--tx-2); }
.pasos-simple .num { color: var(--coral); font-size: var(--t-micro); flex: none; }
.texto { display: grid; gap: .9rem; justify-items: start; max-width: 68ch; }
.texto h1 { font-size: calc(var(--t-h2) * .72); margin-bottom: .5rem; }
.texto h2 { font-size: var(--t-lead); margin-top: 1.5rem; }
.texto p { color: var(--tx-2); font-size: var(--t-small); }
/* --coral-ink y no --coral-deep: #D4474B sobre el crema da 4,0:1 y no pasa AA. */
.texto a { color: var(--coral-ink); text-decoration: underline; text-underline-offset: 3px; }
.texto .pendiente { padding: .7rem .9rem; border-radius: 8px; background: rgba(234,88,91,.08); font-size: var(--t-small); }
.texto .btn { margin-top: 1.5rem; }
/* Ajustes finos de móvil */
@media (max-width: 640px) {
.caso__metricas { gap: 1rem 1.6rem; }
}
/* ============================================================
Móvil: tamaño del dedo y tamaño de la letra
Todo lo que se toca llega a 44 px. El texto que se LEE no baja de 15 px;
las etiquetas de chrome (cifras del reproductor, metadatos de una
miniatura, la palabra HD) se quedan en la banda de 12-13 px, que es
exactamente su tamaño en la anatomía que estamos calcando.
============================================================ */
@media (max-width: 820px) {
.yt__lupa { width: 44px; height: 44px; }
.cta-barra { min-height: 44px; }
.marca { min-height: 44px; }
.busca__q, .busca__btn { font-size: var(--t-body); }
}
@media (max-width: 700px) {
.reel__subs { font-size: var(--t-label); }
.hero__nota { font-size: var(--t-small); }
.hero__nota .num { font-size: var(--t-body); }
.flota__archivo { font-size: var(--t-micro); }
.pill { min-height: 44px; font-size: var(--t-small); }
.video__tit { font-size: var(--t-small); }
.video__meta { font-size: var(--t-label); }
.video__handle { font-size: var(--t-label); }
.cifras__k { font-size: var(--t-small); }
.cifras__f { font-size: var(--t-micro); }
.caso__resumen, .tiempo__t, .credito dd, .comentario__txt, .hilo__txt,
.caja__q, .capitulos__t, .pest__d, .pest__pie, .boxlist__q, .vfila__t, .vtop__t { font-size: var(--t-small); }
.caso__metricas span, .caso__fuente, .caso__rotulo, .caso__hitos > p, .umbrales dd, .comentario__meta, .comentario__acc,
/* Chrome de una miniatura o de una ventana: se quedan en su banda. */
.caja__k, .capitulos__n, .vfila__m, .vtop__m, .vtira__m, .pest__fuente { font-size: var(--t-micro); }
/* Lo que se LEE en las piezas nuevas no baja de 15. */
.caras__t, .datos b, .boxlist__cab b, .canalcab__m, .video__ultimo, .video__ultimo-k, .vtira__t, .datos li span { font-size: var(--t-small); }
.video__ultimo-c { font-size: var(--t-label); }
/* El enlace a la matriz va DENTRO de una frase: ahí un alto de 44 px
abriría el interlineado del párrafo. Se queda inline, con su subrayado. */
.pie__col a { min-height: 44px; font-size: var(--t-small); }
.pie__matriz { font-size: var(--t-small); }
.contacto__enlaces .btn, .field > label, .field--tamano legend { font-size: var(--t-small); }
.win__title, .tag, .win__time { font-size: var(--t-micro); }
.panel__cuerpo { gap: .85rem; }
}
/* ============================================================
============ MOTION ============
============================================================ */
/* Entradas, flotación y estados de movimiento.
Solo se anima transform, opacity y filter. Nada de layout. */
html.rev-on [data-rev]:not(.is-in) { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(7px); }
html.rev-on [data-rev] { will-change: transform, opacity; }
[data-rev].rev-ya { transition: none !important; }
@media print { [data-rev] { opacity: 1 !important; transform: none !important; filter: none !important; visibility: visible !important; } }
[data-rev].is-in {
opacity: 1;
transform: translate3d(0, 0, 0);
filter: blur(0);
transition:
opacity .72s var(--ease) var(--rev-d, 0ms),
transform .82s var(--ease) var(--rev-d, 0ms),
filter .6s var(--ease) var(--rev-d, 0ms);
}
html.rev-on [data-rev="izq"]:not(.is-in) { transform: translate3d(-24px, 0, 0); }
html.rev-on [data-rev="esc"]:not(.is-in) { transform: translate3d(0, 22px, 0) scale(.975); }
[data-rev="esc"].is-in { transform: translate3d(0, 0, 0) scale(1); }
/* Cambio de fotograma en el reproductor */
.reel__slide { transition: opacity .5s var(--ease); }
/* Acordeón: grid-template-rows (0fr→1fr), no height */
.hilo__panel { transition: grid-template-rows .42s var(--ease); }
.hilo__rta { transition: opacity .3s var(--ease) .06s; opacity: 0; }
.hilo__item.is-abierto .hilo__rta { opacity: 1; }
/* Cursores y estados */
.video, .caja, .pill, .fmt, .tab, .hilo__toggle, .pest__b, .vfila, .vtop, .vtira__it { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) {
[data-rev] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.reel__slide { transition: none; }
.hilo__panel, .hilo__caja, .hilo__rta { transition: none; }
.hilo__rta { opacity: 1; }
.btn--primary:hover::before { animation: none; }
* { scroll-behavior: auto !important; }
/* Lo que se añadió en la ronda 14, apagado pieza a pieza. El estado FINAL
es el mismo que ve todo el mundo: aquí no se esconde nada, solo no se
mueve. El JS ya no arranca el montaje ni las previsualizaciones con
`prefers-reduced-motion` (js/util.js → reduce()); esto es el cinturón por
si alguna clase llegara igual. */
.reel__cara { transform: none !important; transition: none !important; will-change: auto; }
.mini, .fmt__win { transform: none !important; transition: none !important; }
.mini__prev { display: none; }
.video__vivo { animation: none; }
.caras .caras__pila-cara,
.minipila .minipila__p-cara { opacity: 1; transform: none; animation: none; }
.caras__t .num.is-hecho { animation: none; }
.video[data-rev] .mini .sello { opacity: 1; transform: none; animation: none; }
.video .mini .sello::after { display: none; }
.statwin__n .num,
.statwin__n .num.is-contando { transform: none !important; animation: none; transition: none; }
.cifras__pista i { transform: scaleX(1); transition: none; }
}
/* Página de gracias: los atajos del minuto de oro */
.gracias__acc { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.gracias__prisa { margin-top: .6rem; font-size: var(--t-small); color: var(--tx-2); }
/* Área de dedo en pantalla táctil (hasta tableta): el play del reproductor,
el menú de la tarjeta, las chips y los enlaces del pie caían por debajo de
los 44 px (41, 32 y 34). */
@media (max-width: 1023px) {
.vp__boton { width: 64px; }
/* El mini-play de la barra de controles: 44 px de dedo hasta tableta. */
.vp__btn { width: 44px; height: 44px; }
.vp { --chrome-h: 48px; }
.video__mas { width: 44px; height: 44px; margin: -6px -10px 0 0; }
.rejilla__vacio .enlace { min-height: 44px; }
.filtro-vivo button { min-height: 44px; }
.panel__x { width: 44px; height: 44px; }
.pill { min-height: 44px; font-size: var(--t-small); }
.pie__col a { min-height: 44px; font-size: var(--t-small); }
}
/* == revisión v2 · obrero A (PLAN 2.1-2.16) == */
/* -- Cabecera: menú con píldora en el apartado activo, CTA siempre visible -- */
.yt__nav a { padding: .35rem .7rem; border-radius: var(--r-pill); transition: color .16s var(--ease), background-color .16s var(--ease); }
.yt__nav a:hover { background: rgba(22, 23, 44, .05); }
.yt__nav a.is-aqui { background: rgba(234, 88, 91, .12); color: var(--ink); }
.yt__nav a.yt__nav-cta, .yt__nav a.yt__nav-cta:hover { color: #fff; }
.yt__nav-cta { display: none !important; }
.cta-barra__corto { display: none; }
.cta-barra .btn { font-size: var(--t-small); }
.yt__menu-btn { display: none; width: 44px; height: 44px; place-items: center; flex: none; border-radius: var(--r-pill); color: var(--ink); }
.yt__menu-btn:hover { background: rgba(22, 23, 44, .06); }
.yt__menu-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.yt__menu-ico { position: relative; display: grid; gap: 4px; width: 20px; }
.yt__menu-ico i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.yt.is-menu .yt__menu-ico i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.yt.is-menu .yt__menu-ico i:nth-child(2) { opacity: 0; }
.yt.is-menu .yt__menu-ico i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1023px) {
.yt__menu-btn { display: grid; }
.yt .yt__nav {
display: none;
position: absolute;
top: 100%; left: 0; right: 0;
flex-direction: column;
align-items: stretch;
gap: .25rem;
padding: .75rem clamp(1rem, 3vw, 3rem) 1.25rem;
background: rgba(247, 245, 242, .98);
border-bottom: 1px solid var(--line);
box-shadow: 0 18px 40px rgba(22, 23, 44, .14);
max-height: calc(100dvh - var(--header-h));
overflow-y: auto;
}
.yt.is-menu .yt__nav { display: flex; }
.yt .yt__nav a { font-size: var(--t-body); padding: .8rem 1rem; min-height: 44px; display: flex; align-items: center; }
.yt .yt__nav .yt__nav-cta { display: inline-flex !important; justify-content: center; margin-top: .5rem; }
html.menu-abierto { overflow: hidden; }
}
@media (max-width: 560px) {
.cta-barra__txt { display: none; }
.cta-barra__corto { display: inline; }
.cta-barra .btn { padding-inline: 1rem; width: auto; }
}
@media (max-width: 380px) { .cta-barra .btn { padding-inline: .85rem; width: auto; } }
/* -- Hero: el h1 lleva nombre y frase; cada uno conserva su aspecto -- */
.hero__h1 { margin: 0; font-weight: inherit; }
.hero__h1 .hero__wm, .hero__h1 .hero__linea { display: block; }
.hero__h1 .hero__linea { font-family: var(--f-text); font-weight: 400; margin-inline: auto; }
/* -- Reel: una ventana que lleva a YouTube, sin mandos de mentira -- */
.vp--galeria { --chrome-h: 0px; }
.vp--galeria .vp__pantalla { display: block; color: #fff; }
.vp--galeria .vp__abajo { bottom: 0; }
.vp__yt { margin-left: auto; font: 500 var(--t-label)/1 var(--f-text); color: #fff; padding: .45rem .8rem; border-radius: var(--r-pill); background: rgba(232, 39, 42, .92); flex: none; }
.vp--galeria .vp__pantalla:hover .vp__yt { background: #E8272A; }
.vp--galeria .vp__pantalla:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.winx__enlace { display: block; color: inherit; }
.winx__enlace:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: var(--r-win); }
.winx__t { font-family: var(--f-mono) !important; }
/* -- Creadores: miniaturas reales; carrusel en móvil -- */
.carrusel > .cr { display: grid; gap: .6rem; color: inherit; text-decoration: none; min-width: 0; }
.cr__mini { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-thumb); overflow: hidden; background: var(--navy); box-shadow: 0 2px 6px rgba(22,23,44,.08), 0 10px 24px rgba(22,23,44,.10); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.cr__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr:hover .cr__mini { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(22,23,44,.1), 0 18px 40px rgba(22,23,44,.16); }
.cr:focus-visible { outline: none; }
.cr:focus-visible .cr__mini { outline: 3px solid var(--coral); outline-offset: 3px; }
.cr__pie { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.cr__av { width: 36px; height: 36px; border-radius: 50%; flex: none; object-fit: cover; background: #E4E1DD; }
.cr__txt { display: grid; min-width: 0; line-height: 1.25; }
.cr__nombre { font-family: var(--f-display); font-weight: 800; font-size: var(--t-body); letter-spacing: -0.015em; color: var(--ink); }
.cr__nicho, .cr__handle { font-size: var(--t-label); color: var(--tx-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr__t { font-size: var(--t-small); line-height: 1.35; color: var(--tx-1, var(--ink)); display: block; } /* R5: sin recorte a 2 líneas; la frase entera */
@media (max-width: 619px) {
.rejilla.carrusel {
display: grid;
grid-auto-flow: column;
grid-template-columns: none;
grid-auto-columns: 82%;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
padding-bottom: .75rem;
margin-inline: calc(-1 * clamp(1rem, 3vw, 3rem));
padding-inline: clamp(1rem, 3vw, 3rem);
scroll-padding-inline: clamp(1rem, 3vw, 3rem);
scrollbar-width: thin;
}
.rejilla.carrusel > .cr { scroll-snap-align: start; }
}
/* -- Proyectos y formatos -- */
.proyectos { background: var(--paper, #F7F5F2); }
a.fmt { display: block; color: inherit; text-decoration: none; }
a.fmt:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; border-radius: var(--r-card); }
.fmt__ver { display: inline-block; margin-top: .45rem; font-size: var(--t-label); font-weight: 600; color: var(--coral-ink, #B8383B); }
a.fmt:hover .fmt__ver { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 619px) { .proyectos .rodaje-mosaico, .proyectos #rodaje-mosaico { max-height: 520px; overflow: hidden; } }
/* -- Casos por dentro: pestañas + panel -- */
.casos { position: relative; z-index: 2; display: grid; gap: 1.25rem; }
.cx__tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.cx__tab { min-height: 44px; padding: .55rem 1.1rem; border-radius: var(--r-pill); font: 600 var(--t-small)/1.2 var(--f-text); color: rgba(255,255,255,.78); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.cx__tab:hover { color: #fff; background: rgba(255,255,255,.14); }
.cx__tab[aria-selected="true"] { color: var(--ink); background: #fff; border-color: #fff; }
.cx__tab:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.cx { display: grid; gap: 1.1rem; padding: clamp(1.1rem, 2.6vw, 2rem); border-radius: var(--r-panel); background: rgba(20, 18, 43, .82); border: 1px solid rgba(255,255,255,.12); color: #fff; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cx[hidden] { display: none; }
.cx__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.cx__canal { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: var(--t-h3); letter-spacing: -0.02em; }
.cx__link { font-size: var(--t-label); color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 3px; }
.cx__link:hover { color: #fff; }
.cx__tit { margin: 0; color: rgba(255,255,255,.82); font-size: var(--t-body); max-width: 60ch; }
.cx__grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .cx__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cx__bloque { padding: 1rem 1.1rem; border-radius: var(--r-card); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.cx__k { margin: 0 0 .5rem; font: 600 var(--t-label)/1.2 var(--f-text); letter-spacing: .04em; text-transform: uppercase; color: #F7B8B9; }
.cx__bloque p { margin: 0; font-size: var(--t-small); line-height: 1.5; color: rgba(255,255,255,.88); }
.cx__lista { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: var(--t-small); line-height: 1.45; color: rgba(255,255,255,.88); }
.cx__res .cx__v { font-family: var(--f-display); font-weight: 800; font-size: calc(var(--t-h2) * .72); line-height: 1.05; color: #fff; }
.cx__res .cx__rk { margin-top: .25rem; }
.cx__res .cx__f { margin-top: .4rem; font-size: var(--t-label); color: rgba(255,255,255,.62); }
.cx__medios { display: grid; gap: 1rem; }
@media (min-width: 900px) { .cx__medios { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } .cx__medios--solo { grid-template-columns: minmax(0, 1fr); } }
.cx__foto { margin: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; background: #0E0C22; }
.cx__foto img { width: 100%; height: 100%; object-fit: cover; }
.cx__vids { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.cx__vid { display: grid; gap: .4rem; color: #fff; text-decoration: none; }
.cx__vid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-thumb); background: #0E0C22; }
.cx__vid-t { font-size: var(--t-label); line-height: 1.35; color: rgba(255,255,255,.86); }
.cx__vid:hover .cx__vid-t { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cx__vid:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: var(--r-thumb); }
/* -- Método: qué medimos -- */
.umbrales__pie { margin: .9rem 0 0; font-size: var(--t-small); color: var(--tx-2); }
/* -- Equipo: siete personas en 4:5 (dos por fila en móvil) -- */
.equipo__fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .equipo__fotos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.eq { margin: 0; display: grid; gap: .6rem; align-content: start; }
.eq__marco { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-card); overflow: hidden; background: #E4E1DD; }
.eq__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.eq__marco--vacio { background: #F6DEDC; }
.eq__pie { display: grid; gap: .15rem; }
.eq b { font-family: var(--f-display); font-size: var(--t-body); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.eq__cargo { font-size: var(--t-label); font-weight: 600; color: var(--coral-ink, #B8383B); }
.eq__rol { font-size: var(--t-small); line-height: 1.4; color: var(--tx-2); }
/* -- Pie -- */
.pie__t { margin: 0 0 .6rem; font: 700 var(--t-label)/1.2 var(--f-text); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.pie__redes { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: var(--t-small); }
.pie__redes a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 619px) { .pie__logo { max-width: 150px; } }
/* -- Móvil: formatos y equipo también se deslizan en horizontal (PLAN 2.14) -- */
@media (max-width: 619px) {
.formatos, .equipo__fotos {
display: grid;
grid-auto-flow: column;
grid-template-columns: none;
grid-auto-columns: 78%;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
margin-inline: calc(-1 * clamp(1rem, 3vw, 3rem));
padding: 0 clamp(1rem, 3vw, 3rem) .75rem;
scroll-padding-inline: clamp(1rem, 3vw, 3rem);
scrollbar-width: thin;
}
.equipo__fotos { grid-auto-columns: 62%; }
.formatos > *, .equipo__fotos > * { scroll-snap-align: start; }
/* Las tres cajas del método: en horizontal no hay «caja del centro» que
encender con el scroll vertical, así que van las tres igual y sin pista. */
.cajas { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(-1 * clamp(1rem, 3vw, 3rem)); padding: 0 clamp(1rem, 3vw, 3rem) .75rem; scroll-padding-inline: clamp(1rem, 3vw, 3rem); align-items: stretch; }
.cajas > .caja { scroll-snap-align: start; }
.cajas .caja__pista { display: none; }
.cx__vids { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
.cx__vids > li { scroll-snap-align: start; }
.section:not(.contacto) { padding-block: 3.25rem; }
.section:not(.contacto) .cab { margin-bottom: 1.35rem; }
.flota--b { margin-top: 1rem; }
.equipo__grid { gap: 1rem; }
}
/* -- Anclas del formulario: bajo la cabecera, nunca tapadas (GATE-1) -- */
#form, #contacto { scroll-margin-top: calc(var(--hdr-h, var(--header-h)) + 12px); }
@media (max-width: 619px) {
/* Los roles ya van en la tarjeta de cada persona: la ventana equipo.txt
los repetía y costaba 640 px de móvil. */
.equipo__win { display: none; }
}
/* -- R5 · auditoría del PDF -- */
/* Monograma de la tarjeta sin foto (cambio de criterio del coordinador, R5). */
.eq__marco--vacio { display: grid; place-items: center; }
.eq__mono { font-family: var(--f-display); font-weight: 800; font-size: var(--t-h2); line-height: 1; color: #A12F31; }
/* «HOLA soy»: el logo con su proporción real y la pegatina enlazada al equipo. */
.nota__enlace { display: block; color: inherit; text-decoration: none; }
:root .nota__cuerpo img { width: 88%; height: auto !important; min-height: 0; max-height: none; aspect-ratio: 2400 / 861; object-fit: contain; }
.nota__cab, .nota__pie { background: #B8383B; }
.nota__cab span { opacity: 1; letter-spacing: .08em; }
.vp__yt { background: #C41E22; }
/* Escala única de lectura: ocho estilos (familia + tamaño + peso), también en #contacto.
1 Nunito 800 hero · 2 Nunito 800 h2 · 3 Nunito 800 h3 · 4 Geist 600 cuerpo (nombres, botones, negritas; Nunito queda solo en titulares)
5 Geist 400 entradilla · 6 Geist 400 cuerpo · 7 Geist 400 pequeño · 8 Geist Mono 400 micro (etiquetas).
`:root` delante para ganar a las reglas de sección sin !important. */
:root .winx__t,
:root .winx__x,
:root .winx__dur,
:root .win__title,
:root .tag,
:root .reel__rodaje,
:root .sello__t,
:root .fmt__chapa,
:root .fmt__archivo,
:root .fmt__x,
:root .nota__cab b,
:root .nota__cab span,
:root .pie__t,
:root .kicker,
:root .mq-item i,
:root dt,
:root .caja__n,
:root .caja__k span,
:root .fmt__ver,
:root .cx__k,
:root .eq__cargo,
:root .hilo__autor,
:root .fmt__para b,
:root .vp__yt,
:root .cr__handle,
:root .reel__subs span,
:root .rol__pill,
:root .tira__chapa,
:root .fmt__handle,
:root .umbrales__t,
:root .trabajo__t,
:root .capitulos__n,
:root .rol__dato,
:root .pie__copy,
:root .pie__copy span,
:root .hero__nota span.num,
:root .rgpd__dl dt,
:root .field > label,
:root .field > legend,
:root .contacto__otros-t {
font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 400;
}
:root .cr__nicho,
:root .fmt__para,
:root .fmt__para span,
:root .cx__link span,
:root .cx__f,
:root .cx__vid-t,
:root dd,
:root .trabajo__pie,
:root .hilo__toggle-t,
:root .cx__tab,
:root .cta-barra__txt,
:root .hero__nota b,
:root .fmt__q,
:root .caras__t,
:root .cr__t,
:root .rol__d,
:root .eq__rol,
:root .caja__q,
:root .capitulos__t {
font-family: var(--f-text); font-size: var(--t-small); font-weight: 400;
}
:root .cta-cinta p {
font-family: var(--f-text); font-size: var(--t-lead); font-weight: 400;
}
:root .form__plazo {
font-family: var(--f-text); font-size: var(--t-body); font-weight: 400;
}
:root .btn,
:root .btn span,
:root .cr__nombre,
:root .eq b,
:root .hilo__txt--q,
:root .rol__cab b,
:root .mq-item b,
:root .rgpd__t {
font-family: var(--f-text); font-size: var(--t-body); font-weight: 600; letter-spacing: 0;
}
:root .hero__linea {
font-family: var(--f-display); font-size: var(--t-h3); font-weight: 800;
}
:root .cx__v {
font-size: var(--t-h2);
}
:root .fmt__n { font-size: var(--t-h3); }
/* -- R7 · texto decorativo que no se lee dos veces (auditoría 3, X7) --
El rótulo grande de la tira y la copia del bucle del marquee pintan su
texto con ::before: se ve igual y no entra en innerText. El único rótulo
legible es el h2 oculto «Trabajan con nosotros». */
.eco-t::before { content: attr(data-t); }
/* == fin revisión v2 · obrero A == */
/* == contacto v2 == */
/* Formulario centrado (PLAN 2.10): título arriba, ventana debajo, 640 px como
mucho. Sin letra pequeña: la protección de datos va en texto normal. */
.contacto .contacto__grid:not(.contacto__grid--premio) { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(1.75rem, 3.5vw, 2.5rem); }
.contacto .contacto__intro { justify-items: center; text-align: center; max-width: 640px; }
.contacto .contacto__intro .lead { margin-inline: auto; }
.contacto .contacto__enlaces { justify-content: center; }
.contacto .contacto__win { width: 100%; max-width: 640px; margin-inline: auto; }
#form .field__opc { font-weight: 400; color: var(--tx-2); }
#form .field__nota { margin-top: .15rem; font-size: var(--t-small, .9375rem); color: var(--tx-2); }
#form .field--objetivo { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; }
#form .field--objetivo .objetivo__l { margin-top: .35rem; }
#form .field--objetivo .textarea { min-height: 6.5rem; }
.form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.acepto { display: flex; align-items: flex-start; gap: .7rem; }
.acepto input { flex: none; width: 22px; height: 22px; margin: .1rem 0 0; accent-color: var(--coral-ink); cursor: pointer; }
.acepto input:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.acepto input[aria-invalid="true"] { outline: 2px solid var(--coral-ink); outline-offset: 2px; }
.acepto label { font-size: var(--t-body, 1.0625rem); line-height: 1.45; color: var(--tx-1); cursor: pointer; }
.acepto a, .rgpd a { color: var(--coral-ink); text-decoration: underline; text-underline-offset: 3px; }
.form__plazo { text-align: center; font-size: var(--t-body, 1.0625rem); font-weight: 500; color: var(--tx-1); }
.rgpd { margin-top: .25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); display: grid; gap: .6rem; }
.rgpd__t { font-family: var(--f-display); font-weight: 700; font-size: var(--t-body); color: var(--tx-1); }
.rgpd__dl { display: grid; gap: .45rem .9rem; margin: 0; font-size: var(--t-body); line-height: 1.5; color: var(--tx-1); }
.rgpd__dl dt { font-weight: 600; }
.rgpd__dl dd { margin: 0 0 .35rem; color: var(--tx-1); }
@media (min-width: 560px) {
.rgpd__dl { grid-template-columns: max-content minmax(0, 1fr); }
.rgpd__dl dd { margin: 0; }
}
/* Páginas legales: índice entre las tres y datos del titular. */
.legal-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); width: 100%; }
.legal-nav a[aria-current="page"] { color: var(--tx-1); text-decoration: none; font-weight: 600; }
.texto ul.lista { display: grid; gap: .45rem; padding-left: 1.2rem; list-style: disc; color: var(--tx-2); font-size: var(--t-small); }
.texto ul.lista li::marker { color: var(--coral); }
/* == fin contacto v2 == */
/* == contacto v2 · sin destino == */
.form__plazo--sin { color: var(--coral-ink); outline: none; }
.form__plazo--sin a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* == fin contacto v2 · sin destino == */
/* == aviso de medición (02-10-2026, segunda versión tras el juez 6) ==
Lo pinta js/consentimiento.js en la portada mientras no hay elección.
Pieza pequeña anclada abajo: en móvil, una línea de texto y los dos botones
debajo, de borde a borde con 12 px de margen (cabe bajo la cifra del
inicio a 390x844); desde 620 px, una sola fila en la esquina de abajo a
la derecha. Sin estilos de letra nuevos: el texto es «Texto pequeño»
(Geist 400 15/1.55) y los botones son .btn--glass (Botón, Geist 600 15).
Aceptar y Rechazar iguales: mismo tamaño, color y grosor.
Capas: z 80, por encima del contenido y por debajo de la cabecera con su
menú móvil (90), los paneles (120) y el aviso de la esquina (140). */
.aviso-cookies {
position: fixed; z-index: 80; left: 12px; right: 12px; bottom: 12px;
display: grid; gap: .5rem;
padding: .625rem .75rem .75rem;
background: var(--paper); color: var(--ink);
border: 1px solid var(--line); border-radius: var(--r-card);
box-shadow: var(--shadow-lift);
transition: transform .18s var(--ease), opacity .18s var(--ease), visibility 0s linear 0s;
}
.aviso-cookies:empty { display: none; }
.aviso-cookies.is-dentro { animation: aviso-entra .22s var(--ease) backwards; }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(10px); } }
.aviso-cookies.is-apartado {
visibility: hidden; opacity: 0; transform: translateY(calc(100% + 16px));
transition: transform .18s var(--ease), opacity .18s var(--ease), visibility 0s linear .18s;
}
.aviso-cookies__t { margin: 0; font-family: var(--f-text); font-weight: 400; font-size: var(--t-small); line-height: 1.55; color: var(--tx-2); }
.aviso-cookies__t a { color: var(--coral-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.aviso-cookies__b { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.aviso-cookies__b .btn { --btn-h: 44px; padding: 0 1.1rem; justify-content: center; }
@media (min-width: 620px) {
.aviso-cookies {
left: auto; right: 24px; bottom: 24px;
grid-auto-flow: column; align-items: center; gap: 1rem;
padding: .5rem .5rem .5rem 1.1rem;
}
}
@media (prefers-reduced-motion: reduce) {
.aviso-cookies, .aviso-cookies.is-apartado { transition: none; transform: none; }
.aviso-cookies.is-dentro { animation: none; }
}
/* Tercera versión (juez 7): mientras el aviso está, el pie reserva debajo su
alto (--aviso-reserva lo pone js/consentimiento.js) para que al fondo de la
página todo el pie quede por encima. El relleno es del propio pie, así que
lleva su mismo fondo; al elegir se recoge con una transición corta. */
.pie { transition: padding-bottom .25s var(--ease); }
.con-aviso .pie { padding-bottom: calc(2.5rem + var(--aviso-reserva, 0px)); }
#main[tabindex="-1"]:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .pie { transition: none; } }
/* cookies.html: el estado de la elección y los dos botones para cambiarla. */
.consent-ctl { display: grid; gap: .75rem; margin: .5rem 0 1.5rem; }
.consent-ctl__b { display: flex; flex-wrap: wrap; gap: .6rem; }
.consent-ctl__b .btn { --btn-h: 44px; }
/* == fin aviso de medición == */