/* ==========================================================================
SIDELINE · PLANTILLA DE PROPUESTAS
Cuatro superficies, no cinco colores sueltos:
ink base oscura · secciones de peso
paper base clara · secciones de respiro
panel color pleno · momentos de marca a sangre
accent acento · rótulos, numeración, pastillas
========================================================================== */
/* --- 1. TOKENS ----------------------------------------------------------- */
:root {
--c-ink: #050C18;
--c-paper: #FFFFFF;
--c-deep: #072B4A; /* azul profundo: entre la tinta y el panel */
--c-sky: #8FC1EE; /* tinte del panel: rótulos sobre fotografía */
--c-bone: #F2EFE9; /* hueso: blanco cálido, para no repetir el papel */
--c-panel: #005A9C;
--c-accent: #EF3E42;
--c-accent-ink: #0A0A0A; /* texto sobre el acento */
--c-brand: #FF8000; /* naranja Sideline, tomado del archivo de marca */
--f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
--f-text: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--t-micro: 0.6875rem;
--t-small: 0.8125rem;
--t-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
--t-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3rem);
--t-h3: clamp(1.5rem, 1.1rem + 1.7vw, 2.4rem);
/* El tope real está en 4vw: por encima, «Your name carries weight…» se
parte en dos a 1024. Medido con Archivo de verdad; con la tipografía
de reserva el cálculo daba un margen siete veces menor y por eso los
títulos venían más pequeños de lo que hacía falta. Se deja holgura. */
--t-h2: clamp(1.75rem, 3.45vw, 3.15rem);
--t-hero: clamp(3.4rem, 1.2rem + 13.4vw, 11.5rem);
--gutter: clamp(20px, 5vw, 92px);
--sec-y: clamp(80px, 11vh, 168px);
--maxw: 1620px;
--ease: cubic-bezier(.22, .61, .36, 1);
}
/* --- 2. RESET ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--f-text);
font-size: var(--t-body);
line-height: 1.6;
color: #fff;
background: var(--c-ink);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
::selection { background: var(--c-accent); color: #fff; }
section[id], main { scroll-margin-top: 84px; }
/* --- 3. SUPERFICIES ------------------------------------------------------ */
.t-dark { background: var(--c-ink); color: #fff; }
.t-light { background: var(--c-paper); color: var(--c-accent-ink); }
.t-panel { background: var(--c-panel); color: #fff; }
/* Modificadores de fondo. No tocan el color del texto: de eso siguen
encargándose t-dark y t-light, con todos sus ajustes ya escritos. */
.s-deep { background: var(--c-deep); }
.s-bone { background: var(--c-bone); }
/* Rojo sobre azul profundo da 3.74 y no llega: ahí el rótulo va en blanco. */
.s-deep .eyebrow { color: rgba(255, 255, 255, .86); }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sec-y); position: relative; overflow: clip; }
/* --- ILUSTRACIONES ------------------------------------------------------
Ocupan el hueco que deja el titular a la derecha. Son decorativas: no
reciben clics, no llevan texto alternativo y desaparecen cuando la
columna se estrecha, para no empujar al contenido. */
.figurine {
position: absolute;
z-index: -1; /* siempre por detrás del texto */
height: auto;
pointer-events: none;
user-select: none;
display: none;
/* El dibujo se desvanece por abajo: sin este degradado se ve como un
recorte pegado, con un borde recto que delata el montaje. */
-webkit-mask-image: linear-gradient(to bottom, #000 52%, rgba(0, 0, 0, .55) 78%, transparent 97%);
mask-image: linear-gradient(to bottom, #000 52%, rgba(0, 0, 0, .55) 78%, transparent 97%);
}
@media (min-width: 1020px) {
.figurine { display: block; }
/* Metidas hacia dentro: el borde derecho las dejaba pegadas a la esquina.
El margen está calculado contra el ancho máximo del titular (15ch), que
en el peor caso llega al 64% de la columna. */
.figurine--package { right: 9%; bottom: 3vh; width: min(20vw, 275px); }
}
/* En pantallas medianas cabe una versión más chica, pegada al borde. */
@media (min-width: 760px) and (max-width: 1019px) {
}
.wrap { position: relative; z-index: 1; }
/* --- 4. TIPOGRAFÍA -------------------------------------------------------
Display condensado y pesado. El ancho estrecho es lo que da el carácter:
deja que los titulares crezcan sin salirse de la pantalla. */
.display {
overflow-wrap: break-word;
font-family: var(--f-display);
font-weight: 900;
font-stretch: 68%;
line-height: .87;
letter-spacing: -.005em;
text-transform: uppercase;
}
/* A tamaño grande la condensada pide cerrar el tracking y la interlínea:
lo que funciona a 2.9rem se deshace a 8.6rem. */
.sec__title, .hero__name, .diff h2, .motion__cta .display {
letter-spacing: -.018em;
line-height: .84;
}
.eyebrow {
font-family: var(--f-text);
font-weight: 700;
font-size: var(--t-small);
letter-spacing: .26em;
text-transform: uppercase;
color: var(--c-accent);
}
.sec__title {
font-size: var(--t-h2);
max-width: none; /* el tope de 15ch era lo que los partía en dos */
margin-top: clamp(18px, 2.4vw, 34px);
text-wrap: balance; /* si no cabe, reparte en vez de dejar una viuda */
}
/* Ese margen es para separar el titular de un antetítulo. Cuando no hay
nada encima —que hoy es en las nueve secciones— solo empujaba el
titular 34 px hacia abajo contra el relleno de la sección, y dejaba una
franja vacía antes de que empezara a leerse nada. */
.sec__title:first-child { margin-top: 0; }
.lead { font-size: var(--t-lead); line-height: 1.5; max-width: 50ch; }
/* La entradilla de cada sección, con el mismo tamaño y la misma
separación en todas. Antes unas iban a 24 px pegadas al título (9 px de
aire) y otras a 18 px con 52: parecían secciones de páginas distintas. */
.sec__title + .lead,
.sec__title + .body,
.sec__title + .port__lead {
margin-top: clamp(26px, 2.8vw, 40px);
font-size: var(--t-lead);
line-height: 1.5; /* también igual: la interlínea cambia el aire de arriba */
}
.body { max-width: 54ch; line-height: 1.62; color: rgba(255, 255, 255, .82); }
.t-light .body { color: rgba(0, 0, 0, .72); }
.t-panel .body { color: rgba(255, 255, 255, .82); }
.mark { display: block; width: auto; height: 20px; flex: none; }
.gate .mark { height: 26px; }
/* --- 5. PASTILLAS Y BOTONES ---------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 54px;
padding: 15px 30px;
border-radius: 999px;
font-weight: 700;
font-size: 1rem;
letter-spacing: -.01em;
background: var(--c-accent);
color: var(--c-accent-ink);
transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.btn::after {
content: "";
width: 13px; height: 13px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
margin-top: -2px;
}
.btn:hover { transform: translate3d(0, -2px, 0); background: color-mix(in srgb, var(--c-accent) 88%, #fff); }
/* La flecha se adelanta: el botón indica hacia dónde lleva. */
.btn::after { transition: transform .28s var(--ease), margin .28s var(--ease); }
.btn:hover::after { transform: rotate(45deg) translate3d(3px, -3px, 0); }
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* --- 6. NAVEGACIÓN ------------------------------------------------------- */
.nav {
position: fixed;
inset: 0 0 auto 0;
z-index: 90;
display: flex;
align-items: center;
gap: clamp(14px, 2.4vw, 36px);
padding: 18px var(--gutter);
color: #fff;
transition: background-color .4s var(--ease), padding .4s var(--ease);
}
.nav.is-stuck {
background: color-mix(in srgb, var(--c-ink) 92%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding-block: 12px;
}
.nav__brand { margin-right: auto; }
.nav__meta {
font-family: var(--f-text);
font-weight: 700;
font-size: var(--t-small);
letter-spacing: .18em;
color: var(--c-accent);
white-space: nowrap;
}
.lang {
display: inline-flex; align-items: center; gap: 5px;
padding: 9px 14px; border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .26);
font-weight: 700; font-size: var(--t-small); letter-spacing: .06em;
color: rgba(255, 255, 255, .5);
transition: border-color .25s;
}
.lang:hover { border-color: rgba(255, 255, 255, .55); }
.lang__sep { opacity: .35; }
.lang[data-lang="en"] .lang__en,
.lang[data-lang="es"] .lang__es { color: #fff; }
/* --- 7. PORTADA ---------------------------------------------------------- */
.hero {
position: relative;
min-height: 100svh;
display: grid;
align-items: end;
overflow: hidden;
isolation: isolate;
}
.hero__media {
position: absolute; inset: 0; z-index: -2; display: block;
width: 100%; height: 100%;
object-fit: cover;
object-position: var(--focus, 50% 40%);
background: var(--c-ink);
}
@media (max-width: 700px) {
.hero__media { object-position: var(--focus-portrait, var(--focus, 50% 40%)); }
}
.hero__scrim {
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to bottom, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .2) 14%, transparent 28%),
linear-gradient(to top, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .55) 40%, transparent 76%),
linear-gradient(to right, rgba(0, 0, 0, .7), rgba(0, 0, 0, .2) 54%, transparent 72%);
}
.hero__inner {
position: relative;
padding-block: 128px clamp(56px, 10vh, 120px);
display: grid;
gap: clamp(14px, 1.8vw, 22px);
}
.hero__name { font-size: calc(var(--t-hero) * var(--fit, 1)); display: grid; perspective: 1600px; }
.hero__name > span { display: block; }
.hero__name.lleva-tilde { row-gap: .16em; }
/* El apellido es un sólido: el texto real es la cara frontal y las copias
de detrás construyen el canto. */
.hero__name .is-last {
position: relative;
transform-style: preserve-3d;
transform: rotateY(-7deg);
}
.hero__name .depth {
position: absolute; inset: 0;
transform: translateZ(var(--z, 0px));
color: rgb(from var(--c-panel) r g b / calc(.85 - var(--sombra, 0) * .6));
-webkit-text-stroke: 0;
z-index: -1;
}
@supports not (color: rgb(from white r g b / 50%)) {
.hero__name .depth { color: rgba(0, 90, 156, .42); }
}
.hero__name .is-last { color: #fff; }
/* El apellido va en blanco macizo. La profundidad la ponen las copias de
detrás, no un contorno. */
.hero__scroll {
position: absolute; right: var(--gutter); bottom: clamp(40px, 8vh, 110px);
display: grid; justify-items: center; gap: 14px;
font-size: var(--t-micro); letter-spacing: .26em; text-transform: uppercase;
color: rgba(255, 255, 255, .58);
writing-mode: vertical-rl;
}
.hero__scroll i { display: block; width: 1px; height: 62px; background: rgba(255, 255, 255, .4); }
@media (max-width: 900px) { .hero__scroll { display: none; } }
/* --- 9. TRANSICIÓN EN VIDEO ---------------------------------------------- */
.diff { position: relative; min-height: 88svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.diff video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.diff__scrim {
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to right, rgba(0, 0, 0, .8), rgba(0, 0, 0, .34) 62%, rgba(0, 0, 0, .1));
}
/* El bloque va abajo, no centrado: arriba queda la cara del jugador libre. */
.diff__inner {
display: grid;
gap: clamp(18px, 2.2vw, 30px);
align-self: end;
padding-block: clamp(80px, 12vh, 140px) clamp(48px, 9vh, 104px);
}
/* Titular de la transición: va más grande que el resto de la página.
Las dos líneas vienen del
, no del ancho. */
.diff h2 {
font-size: clamp(3rem, 1rem + 8vw, 10rem);
max-width: 18ch;
line-height: .86;
}
/* Sin tope de ancho: en pantalla grande cabe en una línea; en cuanto no
cabe, parte sola. Nada de nowrap, que desbordaría en teléfono. */
.diff__body {
max-width: 100%;
font-size: clamp(.9375rem, .82rem + .5vw, 1.25rem);
line-height: 1.5;
color: rgba(255, 255, 255, .86);
}
.diff__body b { font-weight: 700; color: #fff; }
.media-btn {
position: absolute; right: var(--gutter); bottom: 26px; z-index: 3;
display: none; align-items: center; gap: 8px;
padding: 9px 18px; border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .42);
font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase;
background: rgba(0, 0, 0, .4); color: #fff;
}
.media-btn.is-shown { display: inline-flex; }
/* --- 10. QUÉ HACE SIDELINE ----------------------------------------------- */
/* En flujo normal, como el resto de secciones. Era una rejilla de una
sola columna cuyo gap se sumaba al margen de la entradilla, y encima
el titular, al ser celda, medía distinto: entre una cosa y otra esta
sección abría 22 px de aire donde las demás abren 35. */
.does__intro { display: block; }
/* Antes el titular y la entrada iban en dos columnas, y el titular se
quedaba con 712 px: se partía en dos mientras los demás cabían en uno.
Ahora ocupa el ancho entero, como todas las demás secciones. */
.does__intro .body { max-width: 68ch; }
.cards {
display: grid;
margin-top: clamp(46px, 6vw, 96px);
border-top: 1px solid rgba(255, 255, 255, .16);
}
/* Tres áreas: o una por fila o las tres. A dos columnas quedaría una
huérfana debajo, que es exactamente lo que el ejemplo no hace. */
@media (min-width: 860px) { .cards { grid-template-columns: repeat(3, 1fr); } }
/* Las tres áreas van en azul con texto blanco, se vuelvan rojas al pasar
el cursor. El azul sobre blanco les da 7.14 de contraste y, además, las
separa de la sección: antes eran tres cajas transparentes sobre el
mismo fondo y solo las distinguía un filete. */
.card {
position: relative;
padding: clamp(30px, 2.8vw, 52px) clamp(24px, 2.2vw, 42px) clamp(38px, 3.4vw, 60px);
background: var(--c-panel);
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, .22);
border-right: 1px solid rgba(255, 255, 255, .22);
display: grid; gap: 16px; align-content: start;
transition: background-color .3s var(--ease), color .3s var(--ease);
}
.card__key {
font-family: var(--f-text); font-weight: 700;
font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase;
/* Un cielo más claro que el de la paleta: el de la paleta da 3.75 sobre
este azul y a 11 px hace falta 4.5. Este da 4.82. */
color: #B8D8F5;
}
.card h3 {
font-family: var(--f-display); font-weight: 900; font-stretch: 68%;
text-transform: uppercase; font-size: var(--t-h3); line-height: .95;
}
/* .86 sobre el azul da 5.15; con .68 se quedaba en 3.6 y no pasaba. */
.card p { font-size: 1rem; color: rgba(255, 255, 255, .86); max-width: 34ch; }
/* --- 11. GALERÍA a sangre, sin separaciones ------------------------------ */
/* La galería cabe en una pantalla: las cuatro fotos y sus rótulos se ven de
una sola mirada, sin desplazarse. Por eso la altura la manda el viewport
y no una proporción fija por foto. */
.territorios { padding-block: clamp(46px, 6vh, 86px); }
/* Rótulo de la sección, con filetes a los lados. */
.territorios__marca {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
gap: clamp(14px, 2vw, 30px);
margin-bottom: clamp(26px, 3.4vh, 46px);
padding-inline: var(--gutter);
}
.territorios__marca::before,
.territorios__marca::after {
content: ""; height: 1px; background: rgba(255, 255, 255, .26);
}
.territorios__marca span {
font-weight: 700; font-size: var(--t-small);
letter-spacing: .42em; text-transform: uppercase;
color: rgba(255, 255, 255, .88);
}
/* Piezas separadas, no un mosaico a sangre: cada una es una tarjeta. */
.gallery {
display: grid;
gap: clamp(10px, 1vw, 18px);
padding-inline: var(--gutter);
grid-template-columns: repeat(2, 1fr);
}
/* Las cuatro en una sola fila. En pantallas medias bajan a dos y dos. */
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gal {
position: relative; overflow: hidden; display: block;
border-radius: 6px;
aspect-ratio: 3 / 4.2;
background: #000;
box-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset;
}
.gal__frame { position: absolute; inset: 0; display: block; overflow: hidden; }
.gal img {
width: 100%; height: 100%; object-fit: cover;
object-position: var(--focus, 50% 40%);
}
.gal__frame { transition: transform 1.1s var(--ease); }
.gal:hover .gal__frame, .gal:focus-visible .gal__frame { transform: scale(1.06); }
.gal__cap {
position: absolute; inset: auto 0 0 0;
/* Fotos con mucha luz (grada de día, humo, focos): el degradado sube más
y es más denso, para que el rótulo se lea sobre cualquier fondo. */
padding: clamp(64px, 7vw, 110px) clamp(16px, 1.6vw, 28px) clamp(16px, 1.6vw, 28px);
display: grid; gap: 10px;
text-align: left;
background: linear-gradient(to top, rgba(5, 11, 24, .97) 0%, rgba(5, 11, 24, .88) 34%, rgba(5, 11, 24, .45) 68%, transparent);
transition: transform .5s var(--ease);
}
.gal:hover .gal__cap, .gal:focus-visible .gal__cap { transform: translate3d(0, -6px, 0); }
.gal__cat {
font-weight: 700; font-size: clamp(.625rem, .55rem + .25vw, .8125rem);
letter-spacing: .22em; text-transform: uppercase;
/* La categoría va en pastilla roja con texto blanco: con el rojo de los
Braves el blanco da 5.5 de contraste; el negro se quedaba en 3.6. */
justify-self: start;
padding: .5em .75em .45em;
border-radius: 3px;
background: var(--c-accent);
color: #fff;
transition: letter-spacing .5s var(--ease);
}
.gal:hover .gal__cat, .gal:focus-visible .gal__cat { letter-spacing: .3em; }
.gal__line {
font-family: var(--f-display); font-weight: 900; font-stretch: 68%;
text-transform: uppercase;
font-size: clamp(1.3rem, .8rem + 1.6vw, 2.5rem); line-height: .96;
color: #fff;
text-shadow: 0 2px 4px rgba(0, 0, 0, .95), 0 4px 26px rgba(0, 0, 0, .85);
text-wrap: balance;
}
/* --- 12. CONCEPTOS -------------------------------------------------------- */
/* Sin el bloque del monograma, la derecha es una sola pieza: misma fila,
misma altura que la fotografía de la izquierda. */
/* --- 13. CONTENIDO EN MOVIMIENTO ----------------------------------------- */
/* --- 13. CONTENIDO EN MOVIMIENTO ------------------------------------------
La sección es un botón. Al pulsarlo aparece el teléfono con la pieza
dentro. El video no se descarga hasta ese momento. */
.motion {
/* El fondo lo pone la clase s-deep en el HTML, junto al resto de
superficies. Aquí solo el color de texto. */
color: #fff;
min-height: 100svh;
display: grid;
place-items: center;
padding: clamp(60px, 9vh, 120px) var(--gutter);
overflow: clip;
}
.motion__stage { display: grid; place-items: center; width: 100%; }
/* No es una pastilla: es el titular de la sección, y se pulsa. La flecha
baja y sube despacio para que se entienda que hay algo debajo. */
.motion__cta {
display: grid; justify-items: center; gap: clamp(20px, 3vh, 40px);
color: #fff;
padding: 10px;
transition: opacity .25s var(--ease);
}
.motion__cta[hidden] { display: none; }
.motion__cta .display {
font-family: var(--f-display); font-weight: 900; font-stretch: 68%;
text-transform: uppercase;
/* Una sola línea siempre. El segundo término del min() es el tamaño
máximo que deja el ancho útil para 17 caracteres condensados, que es
lo que mide la traducción más larga. */
font-size: min(clamp(2rem, 1rem + 8vw, 9rem), calc((100vw - 2 * var(--gutter)) / 8.2));
line-height: .9;
max-width: none;
white-space: nowrap;
text-align: center;
}
/* Debajo del titular va un botón que dice lo que hace. La flecha que
había antes invitaba a bajar, que no es lo que ocurre: lo que ocurre es
que arranca un video. */
.motion__play {
display: inline-flex; align-items: center; gap: 12px;
min-height: 54px;
padding: 15px clamp(30px, 3vw, 44px);
border-radius: 999px;
background: var(--c-accent);
color: var(--c-accent-ink);
font-family: var(--f-display); font-weight: 900; font-stretch: 76%;
font-size: clamp(1rem, .9rem + .3vw, 1.25rem);
letter-spacing: .1em; text-transform: uppercase;
transition: background-color .25s var(--ease), transform .25s var(--ease);
}
/* El triángulo de reproducir, dibujado con bordes: así hereda el color
del texto y no hay un icono más que cargar. */
.motion__play::before {
content: "";
width: 0; height: 0;
border-left: 12px solid currentColor;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.motion__cta:hover .motion__play {
background: color-mix(in srgb, var(--c-accent) 88%, #fff);
transform: translate3d(0, -2px, 0);
}
.motion__cta:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 8px; }
/* --- maqueta de iPhone 17 Pro Max ---------------------------------------
Proporción real de pantalla 1320x2868. El marco es un degradado de
titanio, no un borde plano: a tamaño grande la diferencia se nota. */
.device {
display: grid; justify-items: center; gap: clamp(18px, 2vw, 30px);
animation: subir .55s var(--ease) both;
}
.device[hidden] { display: none; }
@keyframes subir {
from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.97); }
to { opacity: 1; transform: none; }
}
.device__frame {
position: relative;
width: min(300px, 72vw);
aspect-ratio: 1320 / 2868;
max-height: min(74svh, 720px);
padding: 9px;
border-radius: 54px;
background: linear-gradient(145deg, #d8d6d1 0%, #8f8d88 22%, #ececE8 48%, #7e7c78 74%, #cfcdc8 100%);
box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .28) inset;
}
/* Botones laterales: acción y volumen a la izquierda, encendido a la derecha */
.device__frame::before,
.device__frame::after {
content: ""; position: absolute; width: 3px; border-radius: 3px;
background: linear-gradient(180deg, #b9b7b2, #85837e);
}
.device__frame::before { left: -3px; top: 21%; height: 13%; box-shadow: 0 10.5% 0 #a5a39e; }
.device__frame::after { right: -3px; top: 27%; height: 11%; }
.device__screen {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 46px;
background: #000;
display: block;
}
.device__island {
position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
width: 31%; height: 26px;
border-radius: 999px; background: #000;
z-index: 2;
}
.device__close {
font-weight: 700; font-size: var(--t-small);
letter-spacing: .16em; text-transform: uppercase;
color: rgba(255, 255, 255, .7);
border-bottom: 1px solid rgba(255, 255, 255, .34);
padding-bottom: 3px;
}
.device__close:hover { color: #fff; border-color: #fff; }
/* Sonido y cerrar, en la misma fila debajo del teléfono. */
.device__mando {
display: flex; justify-content: center;
gap: clamp(20px, 2.4vw, 34px);
}
/* Con el sonido apagado el rótulo baja de tono: se ve de un vistazo en
qué estado está sin tener que leerlo. */
#motionSonido[aria-pressed="false"] {
color: rgba(255, 255, 255, .45);
border-color: rgba(255, 255, 255, .2);
}
@media (max-width: 700px) {
.device__frame { width: min(250px, 78vw); border-radius: 44px; padding: 7px; }
.device__screen { border-radius: 38px; }
.device__island { width: 34%; height: 21px; top: 16px; }
}
/* --- 13b. PORTAFOLIO ------------------------------------------------------
Prueba, no promesas: cada jugador con su tira de publicaciones reales.
Arranca plegado detrás de un botón — es material de apoyo y no debe
empujar la propuesta hacia abajo. Falla abierto: sin JavaScript el panel
se ve entero. */
/* El margen lo pone ahora la regla común de entradillas. */
.port__lead { max-width: 52ch; }
/* --- las dos tarjetas -----------------------------------------------------
Foto arriba y el cuerpo debajo, como el ejemplo. La tarjeta entera es el
botón que abre las piezas; el enlace al post publicado va aparte, debajo,
porque un enlace dentro de un botón no es marcado válido. */
.trabajos {
display: grid;
gap: clamp(16px, 2vw, 30px);
margin-top: clamp(34px, 4vw, 64px);
}
@media (min-width: 820px) { .trabajos { grid-template-columns: repeat(2, 1fr); } }
.trabajo {
display: flex; flex-direction: column;
border: 1px solid var(--borde);
background: var(--realce);
}
.trabajo__abrir {
display: block; width: 100%;
padding: 0; margin: 0;
font: inherit; color: inherit; text-align: left;
background: none; border: 0; cursor: pointer;
}
.trabajo__abrir:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -3px; }
.trabajo__foto {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--realce);
}
.trabajo__foto img {
width: 100%; height: 100%;
object-fit: cover; object-position: 50% 22%; /* la cara, no el pecho */
display: block;
transition: transform .6s var(--ease);
}
.trabajo__abrir:hover .trabajo__foto img { transform: scale(1.03); }
.trabajo__cuerpo {
display: block;
padding: clamp(20px, 2.2vw, 32px) clamp(20px, 2.2vw, 32px) clamp(16px, 1.8vw, 24px);
}
.trabajo__nombre {
display: block;
font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem);
line-height: 1; letter-spacing: -.02em;
}
.trabajo__nota {
display: block; margin-top: 12px;
font-size: 1rem; line-height: 1.5;
color: var(--tenue);
max-width: 44ch;
}
.trabajo__mas {
display: inline-flex; align-items: center; gap: 10px;
margin-top: clamp(16px, 1.8vw, 24px);
min-height: 44px;
font-size: var(--t-small); font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--rotulo);
}
.trabajo__mas-signo {
position: relative; width: 12px; height: 12px; flex: none;
transition: transform .35s var(--ease);
}
.trabajo__mas-signo::before, .trabajo__mas-signo::after {
content: ""; position: absolute; inset: 50% 0 auto 0;
height: 2px; background: var(--c-accent);
}
.trabajo__mas-signo::after { transform: rotate(90deg); }
.trabajo.is-open .trabajo__mas-signo { transform: rotate(135deg); }
.trabajo__real {
align-self: flex-start;
display: inline-flex; align-items: center;
min-height: 44px;
margin: 0 clamp(20px, 2.2vw, 32px) clamp(18px, 2vw, 26px);
font-weight: 700; font-size: var(--t-small);
letter-spacing: .04em;
color: inherit; text-decoration: none;
border-bottom: 1px solid var(--borde-f);
transition: border-color .25s var(--ease), color .25s var(--ease);
}
.trabajo__real::after { content: " \2197"; margin-left: 4px; }
.trabajo__real:hover { border-color: currentColor; color: var(--c-panel); }
.t-dark .trabajo__real:hover, .s-deep .trabajo__real:hover,
.t-panel .trabajo__real:hover { color: #fff; }
/* --- también hemos trabajado con ------------------------------------------
Retratos pequeños, sin enlace: son piezas puntuales, no clientes. Van
deliberadamente más chicos que las dos tarjetas de arriba, que sí son
trabajo continuo; la jerarquía la marca el tamaño, no un rótulo. */
.creditos {
margin-top: clamp(40px, 5vw, 76px);
padding-top: clamp(22px, 2.6vw, 34px);
border-top: 2px solid var(--c-accent);
}
.creditos__lista {
list-style: none; margin: clamp(20px, 2.4vw, 32px) 0 0; padding: 0;
display: grid;
/* Dos en teléfono, cuatro en pantalla ancha: ocho jugadores caen en dos
filas limpias en vez de una tira de ocho caras diminutas. El tope de
ancho no es capricho: a todo lo ancho los retratos salían del tamaño
de las dos tarjetas de arriba, y estos son trabajo puntual, no la
relación continua que la sección viene contando. */
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 1.6vw, 20px) clamp(8px, 1vw, 14px);
}
/* Los seis en una sola fila en cuanto hay sitio. Por debajo de eso se
parten en dos filas de tres: a 110 px la cara todavía se reconoce,
a 60 px ya no. */
@media (min-width: 900px) { .creditos__lista { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Tope de ancho: sin él, en las anchuras que todavía van a cuatro columnas
(iPad en vertical) los retratos se estiran hasta 290 px y vuelven a
comerse la sección. Son créditos, no las dos tarjetas de arriba. */
.credito { max-width: 170px; }
.credito__marco {
aspect-ratio: 4 / 5;
overflow: hidden;
/* --realce es el tinte de superficie; --muy-tenue es color de texto y
puesto de fondo dejaba un rectángulo gris claro que se comía la
sección. */
background: var(--realce);
border: 1px solid var(--borde);
}
.credito__marco img {
width: 100%; height: 100%;
object-fit: cover; object-position: center top;
display: block;
}
/* Sin foto: la inicial sobre el mismo marco. Mantiene la rejilla cuadrada
y se ve que falta una pieza, no que algo se rompió. */
.credito__marco--inicial { display: grid; place-items: center; }
.credito__inicial {
font-family: var(--f-display); font-weight: 900; font-stretch: 76%;
font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1;
/* El rótulo de la superficie: se lee en las dos y no inventa un color. */
color: var(--rotulo);
}
.credito__nombre {
margin: clamp(8px, .8vw, 11px) 0 0;
font-family: var(--f-display); font-weight: 900; font-stretch: 68%;
/* Pequeño a propósito: con ocho columnas la caja mide unos 150 px y
«GEORGE LOMBARD JR.» tiene que caber sin partirse en cuatro. */
font-size: clamp(.6875rem, .62rem + .22vw, .8125rem);
line-height: 1.15;
text-transform: uppercase; letter-spacing: -.01em;
overflow-wrap: break-word;
}
.creditos .nota { max-width: 76ch; margin-top: clamp(22px, 2.6vw, 34px); }
/* --- el panel de piezas ---------------------------------------------------
Va debajo de las dos tarjetas y a todo el ancho: dos reels verticales
dentro de media columna se ven como sellos. */
.trabajo__panel { margin-top: clamp(18px, 2vw, 30px); }
.trabajo__panel[hidden] { display: none; }
.js .trabajo__panel {
max-height: 0; overflow: hidden; opacity: 0;
transition: max-height .55s var(--ease), opacity .4s var(--ease);
}
.js .trabajo__panel.is-open { max-height: 220vh; opacity: 1; }
.trabajo__panel-cab {
font-family: var(--f-display); font-weight: 900; font-stretch: 74%;
font-size: var(--t-small); letter-spacing: .18em; text-transform: uppercase;
color: var(--rotulo);
padding-bottom: 14px;
border-bottom: 1px solid var(--borde);
margin-bottom: clamp(16px, 2vw, 26px);
}
.posts {
display: flex; gap: clamp(10px, 1.1vw, 16px);
margin-top: clamp(18px, 2vw, 28px);
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
padding-bottom: 6px;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.posts::-webkit-scrollbar { height: 4px; }
.posts::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border-radius: 999px; }
.post { flex: 0 0 clamp(136px, 20vw, 196px); scroll-snap-align: start; }
.post__link {
position: relative; display: block;
aspect-ratio: 9 / 16; overflow: hidden;
background: #000; border-radius: 4px;
}
.post__thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.post__link:hover .post__thumb, .post__link:focus-visible .post__thumb { transform: scale(1.06); }
.post__preview {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
opacity: 0; transition: opacity .35s var(--ease);
pointer-events: none;
}
.post.is-previewing .post__preview { opacity: 1; }
/* Pieza horizontal dentro de una tarjeta vertical: se encaja entera. */
.post--wide .post__preview { object-fit: contain; background: #05070c; }
.post--wide .post__link::before {
content: "16:9";
position: absolute; top: 10px; left: 10px; z-index: 2;
font-weight: 700; font-size: 9px; letter-spacing: .12em;
background: rgba(0, 0, 0, .6); color: rgba(255, 255, 255, .8);
padding: 3px 7px; border-radius: 3px;
}
.post__ui {
position: absolute; inset: auto 0 0 0;
padding: clamp(10px, 1vw, 14px);
display: grid; gap: 7px;
background: linear-gradient(to top, rgba(0, 0, 0, .88), rgba(0, 0, 0, .1) 72%, transparent);
/* Blanco fijo, no heredado. Esto va sobre su propio degradado negro
encima de la foto, así que el color de la sección no pinta nada aquí:
al pasar el portafolio a fondo claro heredó la tinta y los pies de
foto quedaron en negro sobre negro, ilegibles. */
color: #fff;
}
.post__tag {
justify-self: start;
font-weight: 700; font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
background: var(--c-accent); color: var(--c-accent-ink);
padding: 4px 9px; border-radius: 999px;
}
.post__cap { font-size: .8125rem; line-height: 1.32; }
.post__go {
position: absolute; top: 10px; right: 10px;
width: 11px; height: 11px;
border-top: 2px solid #fff; border-right: 2px solid #fff;
transform: rotate(45deg); opacity: .75;
}
/* --- 14. TIMELINE -------------------------------------------------------- */
/* --- 15. PAQUETE: panel de color a sangre --------------------------------
El cuerpo del paquete vive en la sección 31 (carril A/B/C y tabla). */
/* La familia del precio vive aquí porque la comparte con el resto de
cifras grandes; el color y el tamaño los pone cada tarjeta. */
.pkg__price { font-family: var(--f-display); font-weight: 900; font-stretch: 68%; }
.t-panel .btn { transition: background-color .28s var(--ease), color .28s var(--ease), transform .28s var(--ease); background: #fff; color: var(--c-panel); }
.t-panel .btn:hover { transform: translate3d(0, -2px, 0); background: rgba(255, 255, 255, .86); }
/* --- 16. CIERRE ---------------------------------------------------------- */
.close { text-align: center; display: grid; justify-items: center; gap: clamp(24px, 3vw, 40px); }
.close h2 { font-size: clamp(2.6rem, 1rem + 7vw, 8.4rem); max-width: 18ch; }
.close p { max-width: 46ch; color: rgba(255, 255, 255, .7); }
/* --- 17. PIE -------------------------------------------------------------- */
.foot {
padding-block: 42px;
border-top: 1px solid rgba(255, 255, 255, .14);
display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center;
font-size: var(--t-small); color: rgba(255, 255, 255, .55);
}
.foot span:last-child { margin-left: auto; }
/* --- 18. ENTRADA --------------------------------------------------------- */
/* Los titulares se ven siempre. La animación solo entra si el JS confirma
que puede gestionarla; si no, no se oculta nada. Este era el fallo de
Chrome: los títulos quedaban recortados y no volvían. */
.js-reveal .reveal { clip-path: inset(0 100% 0 0); transition: clip-path .8s var(--ease); }
.js-reveal .reveal.is-in { clip-path: inset(-40% 0 -30% 0); } /* arriba abierto: no cortar tildes de mayúsculas */
/* --- 19. RESPONSIVE ------------------------------------------------------ */
/* iPad vertical y horizontal: el punto donde más se rompía la composición */
@media (min-width: 700px) and (max-width: 1100px) {
.lightbox__figure img { max-height: 68vh; }
}
/* --- TELÉFONO EN VERTICAL -----------------------------------------------
Aquí es donde más se pierde si no se corrige el encuadre. Un video 16:9
recortado a una pantalla vertical enseña una franja central estrechísima;
y el vertical metido en una caja casi cuadrada pierde arriba y abajo. */
@media (max-width: 700px) {
/* El clip horizontal lleva el plano nítido pegado a la derecha: encuadramos
ahí, de modo que en teléfono se ve el vertical original a pantalla
completa en vez del fondo desenfocado. */
.diff { min-height: 76svh; }
.diff video { object-position: 84% 50%; }
.diff__scrim {
background: linear-gradient(to top, rgba(0, 0, 0, .92), rgba(0, 0, 0, .3) 52%, rgba(0, 0, 0, .5));
}
.diff__inner { padding-block: clamp(60px, 10vh, 100px); align-self: end; }
}
/* iPad en vertical: mismo problema, menos agudo. Solo se veía la mitad
central del clip, que sigue siendo fondo desenfocado. */
@media (orientation: portrait) and (min-width: 701px) and (max-width: 1024px) {
.diff video { object-position: 82% 50%; }
.diff { min-height: 72svh; }
}
/* Pantallas cortas: la portada no debe empujar su propio contenido fuera. */
@media (max-height: 720px) and (max-width: 900px) {
.hero__inner { padding-block: 96px 26px; gap: 16px; }
}
/* Teléfono */
@media (max-width: 640px) {
.nav { gap: 10px; padding-inline: 18px; }
.lang { padding: 7px 10px; font-size: .75rem; }
.mark { height: 17px; }
}
@media (max-width: 400px) {
.nav__meta { display: none; }
}
@media (max-width: 640px) {
.hero__inner { padding-block: 116px 34px; }
.foot span:last-child { margin-left: 0; }
}
/* --- 20. MOVIMIENTO REDUCIDO --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
.hero__media img { transform: scale(1); animation: none; }
.reveal { clip-path: none; }
.gal:hover img { transform: none; }
}
/* --- 21. IMPRESIÓN -------------------------------------------------------- */
@media print {
.nav, .hero__scroll, .media-btn { display: none !important; }
body, .t-dark, .t-panel { background: #fff !important; color: #000 !important; }
}
/* ==========================================================================
22. CAPA INTERACTIVA
========================================================================== */
/* --- progreso de lectura ------------------------------------------------- */
.progress { position: fixed; inset: 0 0 auto 0; z-index: 95; height: 3px; background: rgba(255, 255, 255, .1); }
.progress span {
display: block; height: 100%;
background: var(--c-accent);
transform: scaleX(0); transform-origin: left;
transition: transform .1s linear;
}
/* --- el acento se adapta a la superficie ---------------------------------
Rojo sobre blanco da 3.86 en texto pequeño y no llega. En superficie
clara el rótulo pasa al azul, que da 7.14 y mantiene la paleta. */
.t-light .eyebrow { color: var(--c-panel); }
/* Sobre fotografía manda el acento, no el azul de superficie clara. */
/* Bloques de fondo propio dentro de una sección clara: su texto sigue blanco. */
/* El rojo llega con el cursor o el foco. Las tarjetas ya no se abren
—el documento dejó una sola descripción por área, sin nada debajo—, así
que esto es realce de lectura y no una opción ya elegida. */
.card:hover,
.card:focus-within {
background: var(--c-accent);
color: var(--c-accent-ink);
border-color: transparent;
}
.card:hover .card__key,
.card:focus-within .card__key { color: var(--c-accent-ink); opacity: .7; }
/* Sobre el rojo, .74 da 3.87 y no llega a 4.5. Con .88 sube a 4.63. */
.card:hover p,
.card:focus-within p { color: rgba(0, 0, 0, .88); }
/* --- tarjetas sobre superficie clara --------------------------------------
Ahora la tarjeta trae su propio fondo azul, así que el color del texto
ya no depende de la superficie que haya detrás: lo único que cambia en
claro es el filete de arriba del bloque, que sí va sobre el papel. */
.t-light .cards { border-top-color: rgba(0, 0, 0, .14); }
.t-light .card:hover p,
.t-light .card:focus-within p { color: rgba(0, 0, 0, .88); }
/* --- etapas de temporada que se abren ------------------------------------ */
/* --- categorías de portada como enlaces ---------------------------------- */
/* --- teléfono: puntos de navegación -------------------------------------- */
/* El punto se ve de 7 px y se toca de 44: la zona sensible la da este
pseudoelemento transparente, sin mover nada de sitio. */
/* --- timeline sobre superficie clara -------------------------------------
Un bloque blanco justo antes del panel azul: blanco, azul, oscuro es la
secuencia que cierra la página con más fuerza. */
/* --- portafolio sobre superficie clara ------------------------------------
Todo lo que estaba escrito en blancos translúcidos necesita su equivalente
en negros. Las tarjetas de publicación no: van sobre fotografía. */
.t-light .posts { scrollbar-color: rgba(0, 0, 0, .28) transparent; }
.t-light .posts::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .24); }
.t-light .link { border-color: rgba(0, 0, 0, .24); color: var(--c-accent-ink); }
.t-light .link:hover { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }
/* --- visor de galería a pantalla completa -------------------------------- */
.lightbox {
position: fixed; inset: 0; z-index: 200;
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(8px, 2vw, 28px);
padding: clamp(52px, 8vh, 90px) clamp(10px, 3vw, 40px);
background: rgba(3, 8, 16, .96);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lightbox[hidden] { display: none; }
.lightbox__figure { display: grid; gap: 14px; justify-items: center; min-width: 0; }
.lightbox__stage { display: grid; place-items: center; min-width: 0; }
.lightbox__stage img,
.lightbox__stage video {
max-width: 100%; max-height: 74vh;
width: auto; height: auto; object-fit: contain;
background: #000;
}
/* El reproductor de Instagram trae su propio marco: se le da una caja fija
con la proporción que usa, y fondo blanco porque el suyo lo es. */
.lightbox--embed .lightbox__stage {
width: min(400px, 92vw);
height: min(74vh, 720px);
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.lightbox__stage iframe { width: 100%; height: 100%; border: 0; display: block; }
.lightbox--video .lightbox__stage video { border-radius: 6px; }
.lightbox__src {
font-weight: 700; font-size: var(--t-small);
letter-spacing: .14em; text-transform: uppercase;
color: rgba(255, 255, 255, .78);
border-bottom: 1px solid rgba(255, 255, 255, .34);
padding-bottom: 3px;
}
.lightbox__src:hover { color: #fff; border-color: #fff; }
.lightbox__src[hidden] { display: none; }
.lightbox__figure figcaption {
font-weight: 700; font-size: var(--t-small);
letter-spacing: .16em; text-transform: uppercase;
color: rgba(255, 255, 255, .72); text-align: center;
}
.lightbox__nav {
width: 52px; height: 52px; border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .3);
display: grid; place-items: center;
transition: background-color .25s, border-color .25s;
}
.lightbox__nav:hover { background: var(--c-accent); border-color: var(--c-accent); }
.lightbox__nav::before {
content: ""; width: 12px; height: 12px;
border-top: 2px solid #fff; border-right: 2px solid #fff;
}
.lightbox__nav:hover::before { border-color: var(--c-accent-ink); }
.lightbox__nav--prev::before { transform: rotate(-135deg); margin-left: 4px; }
.lightbox__nav--next::before { transform: rotate(45deg); margin-right: 4px; }
.lightbox__close {
position: absolute; top: 18px; right: clamp(14px, 3vw, 38px);
width: 48px; height: 48px; border-radius: 50%;
font-size: 30px; line-height: 1; color: #fff;
border: 1px solid rgba(255, 255, 255, .3);
}
.lightbox__close:hover { background: var(--c-accent); color: var(--c-accent-ink); border-color: var(--c-accent); }
.lightbox__count {
position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
font-size: var(--t-small); letter-spacing: .2em; color: rgba(255, 255, 255, .55);
}
@media (max-width: 700px) {
.lightbox { grid-template-columns: 1fr; }
.lightbox__nav { display: none; }
.lightbox__figure img { max-height: 66vh; }
}
@media (prefers-reduced-motion: reduce) {
.js .trabajo__panel { transition: none; }
.progress span { transition: none; }
}
/* ==========================================================================
23. AJUSTES DE TELÉFONO — VAN AL FINAL A PROPÓSITO
Estas reglas tienen que ganar a la capa interactiva de arriba. Si las
subes de sitio, `bottom` vuelve a aplicarse junto con `top` y los botones
se estiran de arriba abajo de la sección.
========================================================================== */
@media (max-width: 700px) {
.media-btn {
top: 12px;
bottom: auto;
height: 34px;
min-height: 0;
padding: 0 14px;
font-size: 10px;
letter-spacing: .14em;
line-height: 34px;
}
.diff .media-btn { right: 12px; left: auto; }
/* El texto de la transición baja del todo, sobre el degradado más denso. */
.diff { align-items: end; }
.diff__inner { align-self: end; padding-block: 0 clamp(28px, 6vh, 56px); }
.diff h2 { font-size: clamp(2.4rem, 11vw, 3.6rem); max-width: 14ch; }
.diff p { font-size: .9375rem; }
.diff__scrim {
background: linear-gradient(to top, rgba(0, 0, 0, .95) 6%, rgba(0, 0, 0, .74) 42%, rgba(0, 0, 0, .18) 78%);
}
/* Encuadre propio para vertical. En un teléfono de una foto 16:9 solo cabe
un 29% del ancho: sin esto el sujeto se queda medio fuera. */
.gal img {
object-position: var(--focus-portrait, var(--focus, 50% 40%));
}
/* Celdas de media pantalla: el rótulo tiene que caber sin empujar. */
.gal__cap { padding: 48px 11px 12px; gap: 7px; }
.gal__cat { font-size: 9.5px; letter-spacing: .14em; }
}
/* ==========================================================================
24. MOVIMIENTO AL DESPLAZAR
Dos gestos: la fotografía se mueve más despacio que el scroll dentro de su
marco, y al entrar se descubre de abajo arriba. Va con animaciones ligadas
al scroll del propio navegador, no con JavaScript: corren en el compositor
y no producen tirones. Donde no exista, la foto se queda quieta.
========================================================================== */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.con-movimiento .gal img,
.con-movimiento .trabajo__foto img {
animation: deriva linear both;
animation-timeline: view();
animation-range: entry 0% exit 100%;
will-change: transform;
}
@keyframes deriva {
from { transform: translate3d(0, -5.5%, 0) scale(1.13); }
to { transform: translate3d(0, 5.5%, 0) scale(1.13); }
}
.con-movimiento .gal__frame {
animation: descubrir linear both;
animation-timeline: view();
animation-range: entry 5% entry 85%;
}
@keyframes descubrir {
from { clip-path: inset(0 0 100% 0); }
to { clip-path: inset(0 0 0 0); }
}
@keyframes deriva-corta {
from { transform: translate3d(0, -3%, 0) scale(1.08); }
to { transform: translate3d(0, 3%, 0) scale(1.08); }
}
.con-movimiento .trabajo__foto img { animation-name: deriva-corta; }
}
}
/* El centinela del menú: 40px invisibles al principio del documento. */
.nav__sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 40px; pointer-events: none; }
/* ==========================================================================
26. FLOW — la capa de movimiento
--------------------------------------------------------------------------
Todo lo de aquí va ligado al scroll del propio navegador y corre en el
compositor: ni un listener, ni un recálculo de layout. Tres reglas que me
impongo para que esto sume y no distraiga:
1. Nada se mueve más de lo que mide una línea de texto.
2. Cada gesto ocurre una vez, al entrar. Nada late ni rebota en bucle.
3. Donde el navegador no lo soporte, o con movimiento reducido, todo
aparece quieto y en su sitio. El contenido nunca depende del efecto.
El escalonado se consigue variando animation-range por hijo, no con
animation-delay: en una línea de tiempo de scroll el retardo no aplica.
========================================================================== */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
/* --- el titular se descubre de abajo arriba ---------------------------- */
.con-movimiento .sec__title,
.con-movimiento .diff h2,
.con-movimiento .motion__cta .display,
.con-movimiento .close h2 {
animation: descubrir-texto linear both;
animation-timeline: view();
animation-range: entry 8% entry 58%;
}
@keyframes descubrir-texto {
from { clip-path: inset(0 0 105% 0); transform: translate3d(0, .12em, 0); }
to { clip-path: inset(-40% 0 -20% 0); transform: none; } /* -40%: tildes y Ñ por encima de la caja */
}
/* --- el cuerpo entra detrás, un punto más tarde ------------------------ */
.con-movimiento .lead,
.con-movimiento .plataforma__cuerpo p,
.con-movimiento .diff__body,
.con-movimiento .port__lead {
animation: subir-suave linear both;
animation-timeline: view();
animation-range: entry 14% entry 62%;
}
@keyframes subir-suave {
from { opacity: 0; transform: translate3d(0, 14px, 0); }
to { opacity: 1; transform: none; }
}
/* --- las rejillas entran escalonadas ----------------------------------- */
.con-movimiento .punto,
.con-movimiento .card,
.con-movimiento .trabajo,
.con-movimiento .plataforma,
.con-movimiento .otra,
.con-movimiento .cifras__fila,
.con-movimiento .paso {
animation: subir-suave linear both;
animation-timeline: view();
animation-range: entry 4% entry 44%;
}
.con-movimiento .punto:nth-child(2),
.con-movimiento .card:nth-child(2),
.con-movimiento .otra:nth-child(2),
.con-movimiento .cifras__fila:nth-child(2),
.con-movimiento .paso:nth-child(2) { animation-range: entry 8% entry 48%; }
.con-movimiento .punto:nth-child(3),
.con-movimiento .card:nth-child(3),
.con-movimiento .otra:nth-child(3),
.con-movimiento .cifras__fila:nth-child(3),
.con-movimiento .paso:nth-child(3) { animation-range: entry 12% entry 52%; }
.con-movimiento .punto:nth-child(4),
.con-movimiento .card:nth-child(4),
.con-movimiento .cifras__fila:nth-child(4),
.con-movimiento .paso:nth-child(4) { animation-range: entry 16% entry 56%; }
.con-movimiento .card:nth-child(5),
.con-movimiento .cifras__fila:nth-child(5),
.con-movimiento .paso:nth-child(5) { animation-range: entry 20% entry 60%; }
.con-movimiento .card:nth-child(6) { animation-range: entry 24% entry 64%; }
/* --- los filetes se dibujan en vez de aparecer ------------------------- */
.con-movimiento .cards,
.con-movimiento .pkg__hechos,
.con-movimiento .cifras {
animation: trazar linear both;
animation-timeline: view();
animation-range: entry 2% entry 40%;
}
@keyframes trazar {
from { border-top-color: transparent; }
}
/* --- el precio llega desde un lado y el cuerpo del paquete del otro --- */
.con-movimiento .pkg__money { animation: entrar-izq linear both; }
.con-movimiento .pkg__body { animation: entrar-der linear both; }
.con-movimiento .pkg__money,
.con-movimiento .pkg__body {
animation-timeline: view();
animation-range: entry 10% entry 55%;
}
@keyframes entrar-izq {
from { opacity: 0; transform: translate3d(-22px, 0, 0); }
to { opacity: 1; transform: none; }
}
@keyframes entrar-der {
from { opacity: 0; transform: translate3d(22px, 0, 0); }
to { opacity: 1; transform: none; }
}
/* --- la cinta corre mientras se baja ------------------------------------ */
.con-movimiento .ticker__row {
animation: correr linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
@keyframes correr {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-33.34%, 0, 0); }
}
/* --- el apellido de la portada gira al empezar a bajar ----------------- */
.con-movimiento .hero__name .is-last {
animation: girar-apellido linear both;
animation-timeline: view();
animation-range: entry 100% exit 60%;
}
@keyframes girar-apellido {
from { transform: rotateY(-7deg) rotateX(0deg); }
to { transform: rotateY(14deg) rotateX(-10deg); }
}
/* --- el sólido gira mientras pasa por pantalla ------------------------- */
.con-movimiento .extrude__body {
animation: girar-solido linear both;
animation-timeline: view();
animation-range: entry 0% exit 100%;
}
@keyframes girar-solido {
from { transform: rotateY(-42deg) rotateX(14deg) translate3d(4%, 0, 0); }
to { transform: rotateY(18deg) rotateX(-8deg) translate3d(-6%, 0, 0); }
}
/* --- la barra de progreso también la mueve el compositor --------------- */
.progress span {
animation: avanzar linear both;
animation-timeline: scroll();
transform-origin: 0 50%;
}
@keyframes avanzar {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
}
}
/* ==========================================================================
27. ESTILO — los gestos que dan carácter
========================================================================== */
/* --- la cinta ------------------------------------------------------------
Una banda de acento a sangre que corre en horizontal mientras se baja.
No es un marquee en bucle: la mueve el scroll, así que se para cuando tú
te paras. Sin soporte queda quieta, que también funciona. */
.ticker {
background: var(--c-accent);
color: var(--c-accent-ink);
overflow: clip;
padding-block: clamp(14px, 1.6vw, 26px);
border-block: 2px solid var(--c-ink);
}
.ticker[hidden] { display: none; }
.ticker__row {
display: flex; align-items: center; gap: clamp(18px, 2vw, 34px);
width: max-content;
will-change: transform;
}
.ticker__word {
font-family: var(--f-display); font-weight: 900; font-stretch: 68%;
text-transform: uppercase;
font-size: clamp(1.6rem, 1rem + 2.4vw, 3.4rem);
line-height: 1;
letter-spacing: -.01em;
white-space: nowrap;
}
.ticker__dot {
width: clamp(8px, .8vw, 13px); height: clamp(8px, .8vw, 13px);
border-radius: 50%; background: currentColor; flex: none; opacity: .55;
}
/* --- el número del jugador, extruido en el espacio ----------------------- */
.close-sec { position: relative; overflow: clip; }
.close { position: relative; z-index: 2; }
/* --- grano: textura de película sobre las superficies oscuras -------------
Una capa de ruido al 4%. No se ve; se nota. Es lo que separa un fondo
plano de uno que parece impreso. */
.t-dark::after,
.hero::after,
.diff::after,
.motion::after {
content: "";
position: absolute; inset: 0;
pointer-events: none;
z-index: 1;
opacity: .045;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero, .diff, .motion { position: relative; }
/* El grano nunca tapa lo que se pulsa. */
.hero__inner, .diff__inner, .motion__stage, .t-dark .wrap { position: relative; z-index: 2; }
/* --- el titular del cierre se sale por la izquierda ----------------------- */
@media (min-width: 1100px) {
.close h2 { margin-left: calc(var(--gutter) * -.5); }
}
/* ==========================================================================
28. LA ENTRADA
--------------------------------------------------------------------------
La primera pantalla es la que decide si esto parece caro. Aquí sí uso
animaciones con tiempo y retardo, no ligadas al scroll: es una secuencia
con guion, no una reacción a lo que hace el visitante.
Arranca con la clase .ha-entrado, que pone el muro al abrirse. Si no
llega —JavaScript caído, navegador antiguo— todo se ve igual, quieto y
en su sitio: los estados iniciales solo existen dentro de .js-reveal.
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
/* La cortina de tinta que cubre la portada y se retira hacia arriba. */
.hero__curtain {
position: absolute; inset: 0; z-index: 3;
background: var(--c-ink);
pointer-events: none;
transform-origin: 50% 100%;
}
.js-reveal .hero__curtain { transform: scaleY(1); }
.ha-entrado .hero__curtain {
animation: telon 1.05s cubic-bezier(.76, 0, .24, 1) .1s both;
}
@keyframes telon {
from { transform: scaleY(1); }
to { transform: scaleY(0); }
}
/* El rótulo, el nombre y la señal de scroll entran en ese orden. */
.js-reveal .hero__inner .eyebrow,
.js-reveal .hero__name .is-first,
.js-reveal .hero__name .is-last,
.js-reveal .hero__scroll { opacity: 0; }
.ha-entrado .hero__inner .eyebrow { animation: entrar-linea .7s var(--ease) .75s both; }
.ha-entrado .hero__name .is-first { animation: entrar-linea .9s cubic-bezier(.2, .7, .2, 1) .88s both; }
.ha-entrado .hero__name .is-last { animation: entrar-linea .9s cubic-bezier(.2, .7, .2, 1) 1.02s both; }
.ha-entrado .hero__scroll { animation: entrar-linea .8s var(--ease) 1.5s both; }
@keyframes entrar-linea {
from { opacity: 0; transform: translate3d(0, .42em, 0); clip-path: inset(0 0 102% 0); }
/* Arriba también se abre (-40%): con la interlínea a .84, la tilde de
la Ñ y los acentos de las mayúsculas quedan por encima de la caja y
un inset de 0 los cortaba (ACUÑA salía ACUNA). */
to { opacity: 1; transform: none; clip-path: inset(-40% 0 -30% 0); }
}
/* El menú llega al final, cuando la portada ya se ha presentado. */
.js-reveal .nav { opacity: 0; }
.ha-entrado .nav { animation: entrar-linea .7s var(--ease) 1.35s both; }
}
/* Sin movimiento: la cortina no existe y todo está a la vista. */
@media (prefers-reduced-motion: reduce) {
.hero__curtain { display: none; }
}
/* ==========================================================================
29. MATERIA — luz, metal y grosor
--------------------------------------------------------------------------
Profundidad sin WebGL. Tres materiales, todos con transformaciones y
degradados que resuelve el compositor:
· luz un foco que sigue al puntero sobre las superficies oscuras
· metal el precio en cromo, que es el momento del trofeo
· grosor las piezas se inclinan y enseñan su canto al pasar por encima
Nada de esto existe en pantalla táctil ni con movimiento reducido: son
materiales que responden a un cursor, y sin cursor no tienen sentido.
========================================================================== */
/* --- luz ------------------------------------------------------------------ */
.t-dark, .motion, .diff { --mx: 50%; --my: 50%; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.t-dark::before,
.motion::before {
content: "";
position: absolute; inset: 0;
pointer-events: none; z-index: 1;
opacity: 0; transition: opacity .5s var(--ease);
background: radial-gradient(
420px circle at var(--mx) var(--my),
rgba(255, 255, 255, .07),
transparent 62%);
}
.t-dark.tiene-luz::before,
.motion.tiene-luz::before { opacity: 1; }
}
/* --- grosor ---------------------------------------------------------------
Las tarjetas se inclinan hacia el puntero y levantan una sombra propia.
El canto se sugiere con un filo claro arriba y uno oscuro abajo. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.post { perspective: 900px; }
.post__link {
transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translate3d(0, 0, 0);
transform-style: preserve-3d;
transition: transform .18s var(--ease), box-shadow .3s var(--ease);
box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.post:hover .post__link {
box-shadow:
0 26px 46px rgba(0, 0, 0, .5),
0 1px 0 rgba(255, 255, 255, .28) inset,
0 -1px 0 rgba(0, 0, 0, .5) inset;
}
.device__frame {
transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
transition: transform .2s var(--ease);
}
.device__frame::before,
.device__frame::after { z-index: 3; }
}
/* ==========================================================================
30. EXTRUSIÓN — 3D de verdad
--------------------------------------------------------------------------
El número del jugador como sólido en el espacio: cuarenta copias del mismo
glifo separadas en Z, dentro de un contenedor con perspectiva. Al girar se
ve el canto, porque el canto son las capas intermedias.
No hay motor 3D ni un solo polígono: son transformaciones que resuelve el
compositor. El giro lo manda el scroll, así que funciona igual en un
teléfono, donde no hay cursor que seguir.
========================================================================== */
.extrude {
position: absolute;
right: clamp(-40px, -3vw, -12px);
top: 50%;
z-index: 0;
perspective: 1400px;
pointer-events: none;
user-select: none;
transform: translateY(-50%);
}
.extrude__body {
position: relative;
transform-style: preserve-3d;
transform: rotateY(-26deg) rotateX(8deg);
}
.extrude__body[hidden] { display: none; }
.extrude__face {
position: absolute; top: 0; left: 0;
font-family: var(--f-display); font-weight: 900; font-stretch: 68%;
font-size: clamp(11rem, 32vw, 34rem);
line-height: .74;
white-space: nowrap;
transform: translateZ(var(--z, 0px));
/* Las capas del fondo se apagan: eso es lo que da el volumen. */
color: rgb(from var(--c-panel) r g b / calc(.5 - var(--sombra, 0) * .42));
}
/* La cara frontal va hueca, para que el sólido se lea por su canto. */
.extrude__face--front {
color: transparent;
-webkit-text-stroke: 2px rgba(255, 255, 255, .5);
paint-order: stroke fill;
}
/* Respaldo para navegadores sin la sintaxis relativa de color. */
@supports not (color: rgb(from white r g b / 50%)) {
.extrude__face { color: rgba(0, 90, 156, .3); }
}
/* El primer plano del cierre nunca queda por detrás del sólido. */
.close-sec .wrap { position: relative; z-index: 2; }
@media (max-width: 700px) {
.extrude { right: -18px; }
.extrude__face { font-size: clamp(9rem, 44vw, 16rem); }
}
/* --- el teléfono como objeto con canto -------------------------------------
Dos caras laterales giradas 90 grados en Y y empujadas a cada borde. Al
inclinar el teléfono se ve el titanio de lado, que es lo que separa una
maqueta plana de un objeto. */
.device { perspective: 1500px; }
.device__frame { transform-style: preserve-3d; }
.device__lado {
position: absolute; top: 3%; height: 94%;
width: 13px;
border-radius: 3px;
background: linear-gradient(90deg, #6f6d69, #cbc9c4 42%, #ffffff 55%, #8b8985);
pointer-events: none;
}
.device__lado--izq {
left: 0;
transform: rotateY(90deg) translateZ(6.5px) translateX(-6.5px);
transform-origin: left center;
}
.device__lado--der {
right: 0;
transform: rotateY(-90deg) translateZ(6.5px) translateX(6.5px);
transform-origin: right center;
}
/* La pantalla se adelanta: sin esto queda al ras y el canto no se lee. */
.device__screen { transform: translateZ(1px); }
@supports not (transform-style: preserve-3d) {
.device__lado { display: none; }
}
/* ==========================================================================
31. SECCIONES NUEVAS — perfil, puntos, plan, embudo, paquetes
--------------------------------------------------------------------------
Todo lo que entró con el documento de textos. Cada bloque es neutro de
color: toma el que le dé la superficie (.t-dark / .t-light / .t-panel), de
modo que se pueda reordenar la página sin reescribir nada de aquí.
Las variables de contraste se declaran una vez por superficie y las usan
todos los bloques. Así no hay un solo blanco translúcido escrito a mano
que luego desaparezca al mover una sección a fondo claro.
========================================================================== */
.t-dark, .t-panel, .s-deep {
--borde: rgba(255, 255, 255, .16);
--borde-f: rgba(255, 255, 255, .34);
--tenue: rgba(255, 255, 255, .74);
--muy-tenue: rgba(255, 255, 255, .58);
--realce: rgba(255, 255, 255, .06);
--rotulo: var(--c-sky);
}
.t-light, .s-bone {
--borde: rgba(0, 0, 0, .14);
--borde-f: rgba(0, 0, 0, .32);
--tenue: rgba(0, 0, 0, .68);
/* .54 pasa sobre papel (4.61) pero no sobre hueso (4.44): el hueso es
un blanco cálido y algo más oscuro. .56 pasa en las dos (4.95 y 4.78). */
--muy-tenue: rgba(0, 0, 0, .56);
--realce: rgba(0, 0, 0, .035);
--rotulo: var(--c-panel);
}
/* El panel azul va aparte, y no por gusto: es la superficie más clara de
las oscuras, y los translúcidos que pasan sobre tinta aquí no llegan.
Blanco al .58 da 3.48 y el cielo da 3.75, los dos por debajo de 4.5. Sube
el secundario a .72 (4.5 justo) y el rótulo pasa a blanco puro (7.14). */
.t-panel {
/* .72 daba 4.51, justo en la raya: cualquier redondeo lo tira. Los dos
escalones suben hasta donde el azul da margen de verdad —.86 es 5.72 y
.74 es 4.66— y siguen leyéndose como primario y secundario. */
--tenue: rgba(255, 255, 255, .86);
--muy-tenue: rgba(255, 255, 255, .74);
--rotulo: #fff;
}
/* Nota al pie de sección: la letra pequeña de las fuentes y las condiciones.
.74 sobre tinta da 7.5 y sobre hueso 6.8; las dos pasan de sobra. */
.nota {
margin-top: clamp(22px, 2.6vw, 38px);
max-width: 86ch;
font-size: .8125rem;
line-height: 1.6;
color: var(--tenue);
}
/* Enlace de texto con subrayado propio, para las fuentes citadas. */
.link--ink {
display: inline-flex; align-items: center;
min-height: 44px; /* zona de toque cómoda en teléfono */
margin-top: 8px;
font-weight: 700;
font-size: var(--t-small);
letter-spacing: .04em;
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--borde-f);
padding-bottom: 3px;
transition: border-color .25s var(--ease), color .25s var(--ease);
}
.link--ink::after { content: " ↗"; font-size: .9em; }
.link--ink:hover { border-color: currentColor; color: var(--c-accent); }
/* Sobre azul el rojo no contrasta (3.74 en profundo, 1.85 en panel): ahí el
hover va a blanco, que es lo único que sube de 4.5 en las dos. */
.s-deep .link--ink:hover, .t-panel .link--ink:hover { color: #fff; }
.t-light .link--ink:hover, .s-bone .link--ink:hover { color: var(--c-panel); }
/* --- 03 / PERFIL ---------------------------------------------------------
Los números son el argumento de la sección, así que van en tipografía de
titular y alineados a la derecha: la columna de cifras se lee de un
golpe, sin perseguir el renglón. */
.perfil__grid {
display: grid;
gap: clamp(32px, 4vw, 72px);
margin-top: clamp(30px, 3.6vw, 56px);
}
@media (min-width: 980px) { .perfil__grid { grid-template-columns: 1.35fr 1fr; } }
.perfil__cuenta {
display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
font-size: var(--t-small); font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
color: var(--rotulo);
}
.perfil__cuenta b { letter-spacing: .04em; text-transform: none; font-size: 1rem; color: inherit; }
.cifras { margin-top: clamp(16px, 2vw, 26px); border-top: 1px solid var(--borde); }
/* Cada fila lleva su franja de color a la izquierda, alternando como las
tarjetas de plataformas de la columna de al lado: las dos mitades de la
sección se leen como un mismo sistema y no como dos listas distintas. */
.cifras__fila {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: baseline;
padding-block: clamp(13px, 1.4vw, 20px);
padding-left: clamp(14px, 1.5vw, 20px);
border-bottom: 1px solid var(--borde);
border-left: 3px solid var(--c-accent);
}
.cifras__fila:nth-child(even) { border-left-color: var(--c-panel); }
/* Sobre fondo oscuro el azul del panel se apaga: ahí manda el cielo. */
.t-dark .cifras__fila:nth-child(even),
.s-deep .cifras__fila:nth-child(even) { border-left-color: var(--c-sky); }
.cifras dt { font-size: .9375rem; line-height: 1.35; color: var(--tenue); }
.cifras dd {
margin: 0;
font-family: var(--f-display); font-weight: 900; font-stretch: 76%;
font-size: clamp(1.5rem, .9rem + 1.9vw, 2.6rem);
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -.01em;
}
/* Cada cifra toma el color de su propia franja, alternando rojo y azul.
Antes solo la primera iba en color y las otras cuatro en tinta. */
.cifras__fila:nth-child(odd) dd { color: var(--c-accent); }
.cifras__fila:nth-child(even) dd { color: var(--c-panel); }
/* Sobre hueso el rojo de marca se queda en 3.37 de contraste y el mínimo
es 4.5. Este rojo más hondo da 4.91 y a 42 px se lee como el mismo. */
.t-light .cifras__fila:nth-child(odd) dd,
.s-bone .cifras__fila:nth-child(odd) dd { color: #C8232A; }
/* Y sobre fondo oscuro el azul del panel se apaga: ahí manda el cielo. */
.t-dark .cifras__fila:nth-child(even) dd,
.s-deep .cifras__fila:nth-child(even) dd { color: var(--c-sky); }
.otras { list-style: none; margin: clamp(14px, 1.8vw, 22px) 0 0; padding: 0; display: grid; gap: 10px; }
.otra__link {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas: "plat cifra" "cuenta cifra";
gap: 2px 16px;
align-items: center;
padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.7vw, 22px);
border: 1px solid var(--borde);
border-left: 3px solid var(--c-accent);
background: var(--realce);
color: inherit;
text-decoration: none;
transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.otra:nth-child(even) .otra__link { border-left-color: var(--c-panel); }
.t-dark .otra:nth-child(even) .otra__link,
.s-deep .otra:nth-child(even) .otra__link { border-left-color: var(--c-sky); }
.otra__link:hover { border-color: var(--borde-f); transform: translate3d(4px, 0, 0); }
.otra__plat {
grid-area: plat;
font-size: var(--t-small); font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
}
.otra__cuenta { grid-area: cuenta; font-size: .875rem; color: var(--muy-tenue); }
.otra__cifra {
grid-area: cifra; text-align: right;
font-family: var(--f-display); font-weight: 800; font-stretch: 80%;
font-size: clamp(1rem, .85rem + .5vw, 1.3rem);
font-variant-numeric: tabular-nums;
}
/* --- PUNTOS (04 / 05 / 07) ----------------------------------------------
Rejilla de lecturas con número. El mismo componente en tres secciones y
en dos superficies: el color viene de las variables de arriba. */
.puntos {
display: grid;
gap: clamp(14px, 1.6vw, 26px);
margin-top: clamp(30px, 3.6vw, 58px);
}
@media (min-width: 720px) { .puntos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) {
.puntos--3 { grid-template-columns: repeat(3, 1fr); }
.puntos--4 { grid-template-columns: repeat(4, 1fr); }
}
.punto {
padding: clamp(22px, 2.4vw, 34px) clamp(20px, 2.2vw, 30px);
border: 1px solid var(--borde);
border-top: 3px solid var(--c-accent);
background: var(--realce);
transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.punto:nth-child(even) { border-top-color: var(--c-panel); }
.t-dark .punto:nth-child(even),
.s-deep .punto:nth-child(even) { border-top-color: var(--c-sky); }
.punto:hover { transform: translate3d(0, -4px, 0); border-color: var(--borde-f); }
.punto__n {
font-family: var(--f-display); font-weight: 900; font-stretch: 72%;
font-size: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
line-height: 1; letter-spacing: .02em;
color: var(--c-accent);
margin-bottom: 14px;
}
.punto:nth-child(even) .punto__n { color: var(--rotulo); }
.punto h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.28; }
.punto__cuerpo { margin-top: 10px; font-size: .9375rem; line-height: 1.58; color: var(--tenue); }
/* --- 06 / PLAN DE CONTENIDO ---------------------------------------------
Instagram es la plataforma principal y ocupa el doble de ancho: la
jerarquía del plan se ve antes de leer una palabra. */
.plan__rejilla {
display: grid;
gap: clamp(14px, 1.6vw, 24px);
margin-top: clamp(30px, 3.6vw, 56px);
}
/* Sin caja propia: sus tarjetas pasan a ser celdas de .plan__rejilla, que
es lo que permite que el cierre se siente al lado de X. */
.plataformas { display: contents; }
@media (min-width: 900px) {
.plan__rejilla { grid-template-columns: repeat(2, 1fr); }
.plataforma:first-child { grid-column: 1 / -1; }
}
/* Respaldo donde no haya display:contents: se apila, que es legible. */
@supports not (display: contents) {
.plataformas { display: grid; gap: clamp(14px, 1.6vw, 24px); }
}
.plataforma {
display: grid;
gap: clamp(14px, 1.8vw, 28px);
padding: clamp(24px, 2.6vw, 40px);
border: 1px solid var(--borde);
background: var(--realce);
}
@media (min-width: 900px) { .plataforma:first-child { grid-template-columns: .8fr 1.2fr; align-items: start; } }
.plataforma__nombre {
font-size: clamp(1.6rem, 1rem + 1.9vw, 3rem);
line-height: .96;
letter-spacing: -.02em;
}
.plataforma__rol {
margin-top: 8px;
font-size: var(--t-small); font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--rotulo);
}
.plataforma__cuerpo { display: grid; gap: 12px; }
.plataforma__cuerpo p { font-size: .9375rem; line-height: 1.62; color: var(--tenue); max-width: 62ch; }
.plan__cierre {
/* Es una celda más de la rejilla: la separación la da el gap. */
padding: clamp(24px, 2.6vw, 40px);
border-left: 3px solid var(--c-accent);
background: var(--realce);
}
.plan__cierre h3 { font-size: var(--t-h3); line-height: 1.04; letter-spacing: -.02em; }
.plan__cierre p { margin-top: 12px; font-size: 1rem; line-height: 1.6; color: var(--tenue); max-width: 68ch; }
/* --- 09 / EMBUDO ---------------------------------------------------------
Cinco escalones. En pantalla ancha van en fila con flecha entre uno y
otro; en teléfono se apilan y la flecha gira. El ancho de cada peldaño
crece con --i: eso es el embudo, al revés, abriéndose hacia el valor. */
.embudo {
list-style: none; margin: clamp(30px, 3.6vw, 56px) 0 0; padding: 0;
display: grid; gap: clamp(14px, 1.4vw, 20px);
counter-reset: paso;
}
@media (min-width: 1000px) { .embudo { grid-template-columns: repeat(5, 1fr); } }
.paso {
position: relative;
counter-increment: paso;
padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 26px);
border: 1px solid var(--borde);
background: color-mix(in srgb, #fff calc(4% + var(--i, 0) * 3%), transparent);
}
.paso::before {
content: counter(paso, decimal-leading-zero);
display: block;
font-family: var(--f-display); font-weight: 900; font-stretch: 72%;
font-size: 1rem; letter-spacing: .06em;
color: var(--rotulo);
margin-bottom: 12px;
}
.paso__rotulo {
font-family: var(--f-display); font-weight: 900; font-stretch: 74%;
font-size: clamp(1.0625rem, .9rem + .55vw, 1.5rem);
line-height: 1.02; letter-spacing: -.01em;
text-transform: uppercase;
}
.paso__cuerpo { margin-top: 10px; font-size: .875rem; line-height: 1.5; color: var(--tenue); }
/* El último peldaño es el destino: se queda con el acento. */
.paso:last-child { border-color: var(--c-accent); }
.paso:last-child::before { color: var(--c-accent); }
/* La flecha entre peldaños. Abajo en teléfono, al lado en pantalla ancha. */
.paso:not(:last-child)::after {
content: "";
position: absolute;
width: 9px; height: 9px;
border-right: 2px solid var(--c-accent);
border-bottom: 2px solid var(--c-accent);
left: 50%; bottom: calc(clamp(14px, 1.4vw, 20px) / -2);
transform: translate(-50%, 50%) rotate(45deg);
}
@media (min-width: 1000px) {
.paso:not(:last-child)::after {
left: auto; bottom: auto;
right: calc(clamp(14px, 1.4vw, 20px) / -2); top: 50%;
transform: translate(50%, -50%) rotate(-45deg);
}
}
@supports not (background: color-mix(in srgb, white 10%, transparent)) {
.paso { background: var(--realce); }
}
/* --- 11 / PAQUETES ------------------------------------------------------
Pestañas y tabla. Las pestañas llevan el precio dentro: la decisión se
toma comparando cifras, no nombres. */
/* Los tres paquetes en fila, completos. El recomendado se invierte: blanco
sobre el azul del panel. No hace falta nada más para que sea el primero
que se mira. */
/* El carril: la pista que se desplaza y, debajo, el mando. Una tarjeta
por pantalla, completa; nada se asoma por los lados. */
.pkg__carril { position: relative; margin-top: clamp(30px, 3.6vw, 56px); }
.pkg__pista {
display: grid;
grid-auto-flow: column;
/* Una tarjeta por vista, exacta. Con el anclaje obligatorio esto es lo
que hace que el carril avance de paquete en paquete y nunca deje uno
a medias. */
grid-auto-columns: 100%;
gap: clamp(14px, 1.6vw, 24px);
align-items: start;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-inline: 0;
padding-bottom: 4px;
scrollbar-width: none;
}
.pkg__pista::-webkit-scrollbar { display: none; }
.pkg__pista:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.pkg__tarjeta { scroll-snap-align: start; }
/* El mando va debajo y centrado. Antes las flechas flotaban sobre la
pista; con la tarjeta a todo el ancho se montaban encima del contenido,
y una flecha tapando el precio no es una flecha, es un estorbo. */
.pkg__mando {
display: flex; align-items: center; justify-content: center;
gap: clamp(14px, 1.6vw, 22px);
margin-top: clamp(20px, 2.4vw, 30px);
}
.pkg__flecha {
width: 48px; height: 48px;
display: grid; place-items: center;
background: rgba(5, 12, 24, .82);
border: 1px solid rgba(255, 255, 255, .34);
border-radius: 50%;
cursor: pointer;
transition: background-color .25s var(--ease), border-color .25s var(--ease), opacity .25s;
}
.pkg__flecha:hover { background: var(--c-ink); border-color: #fff; }
.pkg__flecha:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Al llegar a un extremo la flecha se apaga en vez de desaparecer: si se
quita, el mando entero se descoloca. */
.pkg__flecha[disabled] { opacity: .28; cursor: default; }
.pkg__punta {
width: 11px; height: 11px;
border-top: 2px solid #fff; border-right: 2px solid #fff;
}
.pkg__flecha--adelante .pkg__punta { transform: translateX(-2px) rotate(45deg); }
.pkg__flecha--atras .pkg__punta { transform: translateX(2px) rotate(-135deg); }
/* Sin puntero fino no hacen falta: ahí se arrastra con el dedo. Los
puntos sí se quedan: son lo único que dice cuántos paquetes hay. */
@media (hover: none) { .pkg__flecha { display: none; } }
.pkg__puntos { display: flex; align-items: center; }
.pkg__punto {
width: 44px; height: 44px;
display: grid; place-items: center;
background: none; border: 0; cursor: pointer;
}
/* El botón mide 44 px —el mínimo cómodo con el dedo— y por eso van pegados
sin hueco: la zona de toque ya separa un punto del siguiente. Lo que se
ve es solo el punto de 9 px. */
.pkg__punto::after {
content: ""; width: 9px; height: 9px; border-radius: 50%;
background: rgba(255, 255, 255, .40);
transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.pkg__punto:hover::after { background: rgba(255, 255, 255, .70); }
.pkg__punto[aria-current="true"]::after { background: #fff; transform: scale(1.3); }
.pkg__punto:focus-visible { outline: 2px solid #fff; outline-offset: 0; border-radius: 50%; }
.pkg__tarjeta {
--borde-tarj: rgba(255, 255, 255, .18);
--tenue-tarj: rgba(255, 255, 255, .78);
--rotulo-tarj: var(--c-sky);
background: var(--c-ink);
color: #fff;
border-top: 3px solid var(--c-sky);
padding: clamp(26px, 2.8vw, 40px) clamp(22px, 2.4vw, 34px) clamp(22px, 2.4vw, 32px);
display: flex; flex-direction: column;
transition: transform .3s var(--ease);
}
.pkg__tarjeta:hover { transform: translate3d(0, -4px, 0); }
/* A partir de aquí cabe de sobra en dos columnas: a la izquierda la cifra
y la promesa, a la derecha el detalle. Estirar una sola columna a todo
el ancho dejaba filetes de 1300 px y el texto pegado a la izquierda. */
@media (min-width: 760px) {
.pkg__tarjeta {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
column-gap: clamp(34px, 4.4vw, 76px);
align-items: start;
padding: clamp(34px, 3.4vw, 52px) clamp(32px, 3.2vw, 48px);
}
/* Ya no es una de tres tarjetas que se eligen a ojo: es la que se está
mirando. El salto al pasar el ratón sobraba. */
.pkg__tarjeta:hover { transform: none; }
.pkg__cara { align-self: center; }
/* El filete que separaba cabeza de detalle pasa de arriba al costado. */
.pkg__hechos {
margin-top: 0;
padding-top: 0;
border-top: 0;
border-left: 1px solid var(--borde-tarj);
padding-left: clamp(26px, 3vw, 48px);
}
}
/* El recomendado, invertido. Sobre blanco el azul del panel da 7.14 y la
tinta 19.6: los dos pasan de sobra. */
.pkg__tarjeta--rec {
--borde-tarj: rgba(0, 0, 0, .14);
--tenue-tarj: rgba(0, 0, 0, .70);
--rotulo-tarj: var(--c-panel);
background: #fff;
color: var(--c-ink);
border-top-color: var(--c-accent);
}
.pkg__rec {
font-size: var(--t-micro); font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
color: var(--c-accent);
margin-bottom: 14px;
}
/* Sobre la tarjeta blanca el rojo da 3.86 y no llega a 4.5 en 11 px. El
acento ya lo pone el filete de arriba; el rótulo va en tinta, 19.6. */
.pkg__tarjeta--rec .pkg__rec { color: var(--c-accent-ink); }
.pkg__nombre {
font-size: var(--t-small); font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
color: var(--rotulo-tarj);
}
.pkg__tarjeta .pkg__price {
margin-top: 10px;
font-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.4rem);
line-height: .9; letter-spacing: -.03em;
font-variant-numeric: tabular-nums;
/* Color sólido, de la propia paleta. En las oscuras, blanco: es la cifra
más grande de la página y no necesita ayuda. En la blanca, el azul del
panel, que es el fondo de la sección: el precio recomendado recoge el
color de la sección en vez de competir con el filete rojo de arriba.
19.59 y 7.14 de contraste; los dos pasan con holgura. */
color: #fff;
}
.pkg__tarjeta--rec .pkg__price { color: var(--c-panel); }
.pkg__tarjeta .pkg__tax {
margin-top: 10px;
font-weight: 700; font-size: var(--t-micro);
letter-spacing: .14em; text-transform: uppercase;
color: var(--tenue-tarj);
}
.pkg__body {
margin-top: clamp(16px, 1.8vw, 24px);
font-size: .9375rem; line-height: 1.55;
color: var(--tenue-tarj);
}
.pkg__hechos {
margin: clamp(20px, 2.2vw, 30px) 0 0;
padding-top: clamp(16px, 1.8vw, 22px);
border-top: 1px solid var(--borde-tarj);
}
.pkg__hecho {
display: grid; gap: 4px;
padding-block: clamp(10px, 1.2vw, 15px);
border-bottom: 1px solid var(--borde-tarj);
}
.pkg__hecho:last-child { border-bottom: 0; padding-bottom: 0; }
.pkg__hecho dt {
font-size: var(--t-micro); font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
color: var(--rotulo-tarj);
}
.pkg__hecho dd { margin: 0; font-size: .9375rem; line-height: 1.45; }
/* La tabla. Rejilla CSS en vez de layout de tabla, para que en teléfono se
pueda apilar por servicio sin un scroll horizontal de doce columnas. */
.pkg__tabla-bloque { margin-top: clamp(40px, 5vw, 86px); }
.pkg__tabla-cta { margin: 0; }
/* El «+» se montaba encima de la flecha que ya trae .btn —el mismo
::after dibujaba las dos cosas— y al abrir giraba 45° y quedaba una
equis pegada a la flecha. Se queda solo la flecha, que al abrir apunta
hacia abajo: hacia la tabla que acaba de aparecer. */
.pkg__comparar[aria-expanded="true"]::after { transform: rotate(135deg); }
/* Plegado de verdad: sin JavaScript el panel se queda abierto, que es el
estado que no esconde información. La capa de interacción es la que lo
cierra al cargar, y por eso el cierre cuelga de .js. */
.js .pkg__tabla-panel {
max-height: 0;
overflow: hidden;
visibility: hidden; /* los enlaces de dentro no son tabulables */
opacity: 0;
transition: max-height .5s var(--ease), opacity .35s var(--ease), visibility 0s .5s;
}
.js .pkg__tabla-panel.is-open {
max-height: 400vh;
visibility: visible;
opacity: 1;
transition: max-height .6s var(--ease), opacity .4s var(--ease), visibility 0s;
}
.pkg__tabla-scroll { padding-top: clamp(18px, 2vw, 28px); }
/* Columnas fijas e iguales. Con el reparto automático la columna del
paquete A salía casi el doble de ancha que las otras dos —manda el
texto más largo— y la tabla parecía descuadrada. */
.pkg__tabla {
width: 100%;
border-collapse: separate;
border-spacing: 0;
text-align: left;
table-layout: fixed;
}
.pkg__tabla th, .pkg__tabla td {
padding: clamp(11px, 1.3vw, 16px) clamp(10px, 1.2vw, 18px);
vertical-align: top;
border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.pkg__tabla thead th {
padding-top: 0;
border-bottom: 2px solid rgba(255, 255, 255, .9);
vertical-align: bottom;
}
.pkg__th-nombre {
display: block;
font-family: var(--f-display); font-weight: 900; font-stretch: 74%;
font-size: 1rem; text-transform: uppercase; letter-spacing: .06em;
}
.pkg__th-precio {
display: block;
margin-top: 4px;
font-size: var(--t-small); font-weight: 700;
font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, .72);
}
/* La primera columna es el índice de la tabla, no un paquete: se queda
algo más estrecha y en un tono más bajo. */
.pkg__tabla .pkg__th-serv {
width: 24%;
font-family: var(--f-display); font-weight: 900; font-stretch: 74%;
font-size: var(--t-small); text-transform: uppercase; letter-spacing: .16em;
color: rgba(255, 255, 255, .72);
}
.pkg__tabla .pkg__serv {
font-size: .875rem; font-weight: 700; line-height: 1.4;
color: #fff;
}
.pkg__tabla td { font-size: .875rem; line-height: 1.5; color: rgba(255, 255, 255, .84); }
/* Trama muy tenue cada dos filas: con trece servicios el ojo necesita
algo que lo lleve de lado a lado. */
.pkg__tabla tbody tr:nth-child(even) > * { background: rgba(255, 255, 255, .035); }
.pkg__tabla tbody tr:hover > * { background: rgba(255, 255, 255, .09); }
/* La columna del recomendado: un realce continuo en vez de los dos
filetes rojos de antes, que marcaban dos de los tres cortes y se leían
como una línea divisoria mal puesta. */
.pkg__col-rec { background: rgba(255, 255, 255, .07); }
.pkg__tabla tbody tr:nth-child(even) > .pkg__col-rec { background: rgba(255, 255, 255, .10); }
.pkg__tabla tbody tr:hover > .pkg__col-rec { background: rgba(255, 255, 255, .15); }
.pkg__tabla thead .pkg__col-rec {
border-top: 3px solid var(--c-accent);
padding-top: clamp(11px, 1.3vw, 16px);
}
/* Incluido y no incluido, con signo. El texto se queda —el signo solo no
se lee en voz alta— pero la marca es lo que se ve al barrer la columna.
Solo de 861 para arriba: en teléfono el ::before de la celda ya lo ocupa
el rótulo de la columna, y ahí no hay columna que barrer. */
@media (min-width: 861px) {
.pkg__si::before,
.pkg__no::before {
margin-right: 8px;
font-weight: 700;
}
.pkg__si::before { content: "✓"; color: var(--c-sky); }
.pkg__no::before { content: "—"; }
}
.pkg__no { color: rgba(255, 255, 255, .52); }
/* En teléfono cada servicio es una tarjeta y cada celda lleva su rótulo. */
@media (max-width: 860px) {
.pkg__tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pkg__tabla, .pkg__tabla tbody, .pkg__tabla tr, .pkg__tabla th, .pkg__tabla td { display: block; }
.pkg__tabla tr {
margin-bottom: 14px;
border: 1px solid rgba(255, 255, 255, .22);
background: rgba(255, 255, 255, .05);
}
.pkg__tabla .pkg__serv {
width: auto;
border-bottom: 1px solid rgba(255, 255, 255, .22);
background: rgba(255, 255, 255, .08);
}
.pkg__tabla td { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.pkg__tabla tr > td:last-child { border-bottom: 0; }
.pkg__tabla td::before {
content: attr(data-col);
display: block;
margin-bottom: 4px;
font-size: var(--t-micro); font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
color: var(--rotulo);
}
/* La marca del recomendado cuelga de su clase, no de «la segunda
columna», igual que arriba. */
.pkg__tabla .pkg__col-rec { box-shadow: inset 3px 0 0 var(--c-accent); }
}
/* --- zonas de toque: lo que se puede pulsar se puede pulsar con el dedo ---
44 px es el mínimo cómodo. Estos tres se quedaban cortos y son los que
más se usan: el logo lleva de vuelta arriba y el otro cambia el idioma. */
.nav__brand { display: inline-flex; align-items: center; min-height: 44px; }
.lang { min-height: 44px; }
.media-btn { min-height: 44px; }
/* ==========================================================================
32. PIEZAS DE MUESTRA E ÍNDICE
--------------------------------------------------------------------------
Los dos bloques que faltaban respecto al ejemplo aprobado: la sección de
piezas de muestra —que puede estar vacía y tiene que verse igual de
intencionada— y el índice del pie, que es donde va la navegación porque
el menú de arriba se dejó limpio a propósito.
========================================================================== */
/* --- 08 / piezas de muestra ----------------------------------------------
El marco mide lo mismo con pieza y sin ella: llenar un hueco no mueve
nada de sitio. Proporción 4:5, que es la de un post vertical. */
/* El hueco vacío: trama diagonal y el rótulo centrado. Se lee como un
espacio reservado, no como una imagen que no cargó. */
/* --- índice del pie -------------------------------------------------------
Plegado, como en el ejemplo. Abierto es una lista numerada a tres
columnas; el número lo pone el contador, no el marcado. */
.indice-bloque {
padding-top: clamp(40px, 5vw, 72px);
padding-bottom: clamp(18px, 2vw, 30px);
}
.indice__toggle {
display: inline-flex; align-items: center; gap: 12px;
min-height: 44px;
padding: 0;
font-family: var(--f-display); font-weight: 900; font-stretch: 74%;
font-size: clamp(1.125rem, .95rem + .6vw, 1.6rem);
text-transform: uppercase; letter-spacing: .02em;
color: inherit; background: none; border: 0; cursor: pointer;
}
.indice__mas {
width: 13px; height: 13px; position: relative; flex: none;
transition: transform .35s var(--ease);
}
.indice__mas::before, .indice__mas::after {
content: ""; position: absolute; inset: 50% 0 auto 0;
height: 2px; background: var(--c-accent);
}
.indice__mas::after { transform: rotate(90deg); }
.indice__toggle[aria-expanded="true"] .indice__mas { transform: rotate(135deg); }
.indice__toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }
.js .indice__panel {
max-height: 0; overflow: hidden; visibility: hidden; opacity: 0;
transition: max-height .5s var(--ease), opacity .35s var(--ease), visibility 0s .5s;
}
.js .indice__panel.is-open {
max-height: 140vh; visibility: visible; opacity: 1;
transition: max-height .55s var(--ease), opacity .4s var(--ease), visibility 0s;
}
.indice {
list-style: none; margin: 0; padding: clamp(16px, 2vw, 26px) 0 0;
counter-reset: indice;
display: grid; gap: 2px;
border-top: 1px solid rgba(255, 255, 255, .16);
}
@media (min-width: 700px) { .indice { grid-template-columns: repeat(2, 1fr); column-gap: clamp(24px, 3vw, 60px); } }
@media (min-width: 1100px) { .indice { grid-template-columns: repeat(3, 1fr); } }
.indice__item { counter-increment: indice; }
.indice__link {
display: flex; align-items: baseline; gap: 14px;
min-height: 44px;
padding-block: 8px;
color: rgba(255, 255, 255, .78);
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, .1);
transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.indice__link::before {
content: counter(indice, decimal-leading-zero);
flex: none;
font-family: var(--f-display); font-weight: 900; font-stretch: 72%;
font-size: var(--t-small); letter-spacing: .08em;
color: var(--c-accent);
}
.indice__link:hover, .indice__link:focus-visible { color: #fff; padding-left: 8px; }
/* Ronald: la línea de la transición va sobre el césped, que es claro. La
sombra la separa del fondo; el récord (en ) va un punto más grande. */
.diff p { text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 2px 16px rgba(0, 0, 0, .6); text-wrap: balance; max-width: 64ch; }
.diff p b { font-size: 1.12em; }