/* Hallmark · macrostructure: Split Studio · H6 hero: fotográfico a sangre, texto sin caja sobre velo
* (era H2 «bloque de oro a la izquierda, figura a la derecha». Dejó de valer cuando el hero pasó a
* vídeo a sangre detrás de todo: el bloque era media composición y se convirtió en una pegatina.)
* theme: custom · vibe: "cronometraje deportivo, marino, oro en bloque" · paper: #0F1F3A oklch(24% 0.056 260) · accent: #C8A44D oklch(73% 0.114 87)
* display: Space Grotesk · body: IBM Plex Sans · outlier: IBM Plex Mono · axes: dark / geometric-sans / warm
* nav: N9 edge-aligned, UNA sola barra (antes dos superpuestas) · footer: Ft1 mast-headed · secciones: F4 secuencia + F3 hoja de especificaciones · CTA: C1 chip perfilado
* enrichment: none (las figuras son huecos declarados hasta que lleguen las fotos)
* studied: no · context: explícito (referencia pedida: hyrox.com) · v0.9.0
* v0.19.0 · «Del suelo a tu mesa» absorbe los tipos de salida y la sección
* «Salgan como salgan» desaparece. El render aéreo lleva ahora a los seis
* cruzando, manda el alto de la sección —nada por debajo de su pie— y se
* corre a la izquierda hasta que su contenido acaba antes del teléfono: la
* cuarta parte derecha del PNG es aire, así que ese desplazamiento casi no
* se lleva nada por delante. A la derecha, una pila: titular, aparatos, los
* tres tipos en icono y nombre, y las dos garantías en cifra. El texto largo
* se fue: lo que explica la sección es lo que se ve.
* v0.18.0 · se arregla lo invisible. El escalonado tenía escrito sólo el
* camino del observador (`opacity: 0` + clase `encendido`), pero el JS se
* retira en cuanto el navegador soporta `animation-timeline`, así que en
* Chrome y Edge esas listas se quedaban en blanco. Ahora hay regla nativa
* con `view()` y la opacidad de base se limita a `.sin-linea-de-scroll`.
* v0.17.0 · fuera la panorámica. La sección doble gana propósito declarado
* («Del suelo a tu mesa») y se reordena: las dos puntas del viaje —la vista
* aérea y el portátil con el teléfono— enfrentadas en la misma fila, y las
* dos garantías debajo, en banda compacta sin tarjeta.
* v0.16.0 · orden de lectura para quien llega sin contexto: «Un arco. Todo lo
* que cruza» sube al segundo puesto porque es la que DEFINE el arco (antes se
* usaba la palabra tres secciones antes de explicarla), «Se planta donde haga
* falta» detrás, y fuera «La pulsera manda» — eran reglas de uso, no valor.
* v0.15.0 · el criterio de escala se aplica a todos: contrapicado al 128 %
* sangrando por el canto derecho, pelotón al 124 %, teléfonos del relato de
* 16 a 21 rem. Y los `sizes` sincerados: el del cenital declaraba 46vw para
* una pieza de 96vw, así que el navegador bajaba la variante de 960 px y la
* estiraba a 1638 — eso era lo que se veía «de baja calidad», no el codec.
* v0.14.0 · la vista aérea a lo grande: 1680 px, cortada por el canto
* izquierdo y metiéndose en la sección de arriba, con las cifras por delante.
* v0.13.0 · el hueco del cenital acoge las dos cifras (una sección menos), el
* portátil pasa de foto con mesa a marco vectorial con alfa y en
* perspectiva, y el clip de Blender (WebM con alfa) entra en «Se planta
* donde haga falta». Ningún render se recorta ya.
* v0.12.0 · la PC en dos vistas cenitales (el arco desde el aire + la
* pantalla, solapadas en diagonal), y el carrusel de seis destacados se
* sustituye por «La pulsera manda»: cuatro de sus seis tarjetas repetían
* otras secciones, quedan las dos reglas propias sobre el contrapicado.
* v0.11.0 · la app se cuenta a scroll (tres pantallas fijas por turno, sin JS),
* la sección del arco pasa de rejilla recortada a banda a sangre de cuatro
* planos con ritmo 2·1·1,4·1, y las disciplinas van en pastilla.
* v0.10.0 · composiciones con los renders: el equipo a sangre (el objeto sale
* del cuadro y lo corta el borde), el pelotón cortado por abajo y el
* escaparate de la app — tres pantallas escalonadas con las piezas del
* propio sistema flotando en los huecos. Patrón nuevo: `figura-suelta`
* (render con alfa, sin caja, con sombra de apoyo).
* v0.9.0 · barra única (fusionadas la global y la del producto), el avance de
* lectura pasa de damero a corredor sobre pista, sección de disciplinas, y
* barrido editorial: fuera el paso a paso del sistema, el diagrama del cruce
* y las fichas que contaban cómo está hecho por dentro.
* =========================================================================== */
/* ===========================================================================
Novaris · portada pública de novaris.run
POR QUÉ ESTA HOJA ES PROPIA. La consola (`estilo.css`) es un instrumento que
se mira al sol y sigue el tema del sistema; esto es una página de
presentación y se compromete con un solo aspecto. Mezclarlas obligaba a que
una de las dos cediera, y las dos tienen razón por separado.
DE DÓNDE SALE EL ASPECTO. Se miraron las webs de la categoría antes de
dibujar nada: race result (tipografía industrial DIN, foto de piernas con
barrido, catálogo de producto sobre gris), mylaps, y sobre todo hyrox.com,
que es la referencia que pidió el encargo. Lo que se trajo de ahí, y lo que
no:
· SÍ · El acento como BLOQUE macizo que desborda el canto de la pantalla,
no como filete decorativo. Es lo que hace que la página se lea de lejos.
· SÍ · La fotografía a plomo, cortada en recto y ocupando media pantalla.
Ni esquinas redondeadas, ni sombras, ni marcos de mentira.
· SÍ · Canto vivo en todo: `--radius: 0`. Ni una esquina redondeada en la
página entera, que es lo primero que delata una plantilla.
· NO · El negro puro de hyrox. Aquí el papel es el azul de la marca, con
los valores exactos de la app de PC: la web y la app tienen que ser el
mismo producto, no dos parecidos.
· NO · Su tipografía (Brutal Type, de pago). Aquí Space Grotesk, libre y
servida desde este mismo dominio.
LO QUE LA SEPARA DE LA COMPETENCIA. Las dos webs grandes de cronometraje de
México cargan Poppins y Orbitron con sombra doble sobre la foto del hero: la
firma exacta de la plantilla comprada. Nada de eso aparece aquí.
PROHIBIDOS QUE SE RESPETAN: ni degradado de fondo, ni texto con degradado,
ni sombra que haga halo sobre oscuro, ni cristal esmerilado, ni emoji de
icono, ni blanco puro, ni negro puro, ni cursiva en encabezados, ni
`transition: all`, ni tres tarjetas idénticas con icono arriba, ni rótulo de
capítulo encima de cada sección.
=========================================================================== */
/* Los tokens NO se traen con `@import` desde aquí: se enlazan desde el HTML
antes que esta hoja. Con `@import`, `tokens.css` viaja sin número de versión
y quien ya visitó el dominio se queda con la paleta vieja en la caché; y
además el navegador tiene que leer esta hoja entera antes de empezar a pedir
la otra. Dos `` se piden a la vez y los dos llevan versión. */
/* --- Base ------------------------------------------------------------------
`overflow-x: clip` y no `hidden`: `clip` no crea contenedor de desplazamiento,
así que no rompe `position: sticky` ni atrapa el foco dentro. Va en los dos
elementos porque Safari viejo sólo obedece en `body`. Es la red que permite
que el bloque de oro del hero se salga por el canto sin que la página se
desplace de lado en un teléfono. */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
margin: 0;
background: var(--color-paper);
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--text-md);
font-weight: 400;
line-height: 1.6;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
/* El foco aparece al instante y nunca se transiciona: si se desvanece durante
200 ms, quien navega con el teclado se queda a ciegas justo al llegar. */
a:focus-visible,
button:focus-visible {
outline: var(--rule-2) solid var(--color-focus);
outline-offset: 3px;
}
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
/* El cuerpo es contenedor de consulta para que cualquier caja pueda medir el
ancho real de la ventana con `cqw`. Es lo que permite que una figura salga
al canto sin usar `100vw`, que incluye la barra de desplazamiento y deja la
página moviéndose de lado en escritorio. */
body { container-type: inline-size; }
/* LA CAJA, copiada del `.viewport-content` de Apple: ancho proporcional
(87,5 %) con tope, centrada, y SIN relleno lateral. El margen lo hace el
propio porcentaje, así que crece con la pantalla en vez de quedarse clavado
en 56 px. Es el cambio que más aire mete en escritorio. */
.contenedor {
width: var(--caja-ancho);
max-width: var(--ancho);
margin-inline: auto;
/* Lo que queda entre el canto de la ventana y el borde de esta caja. Quien
quiera sangrar hasta el canto, resta esto. */
--sangria: max(0px, (100cqw - min(var(--ancho), 100cqw * 0.875)) / 2);
}
/* El hero respira más que el resto, igual que en su página. */
.portada .contenedor { max-width: var(--ancho-hero); }
.portada .contenedor { --sangria: max(0px, (100cqw - min(var(--ancho-hero), 100cqw * 0.875)) / 2); }
.sr {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* --- La línea de meta ------------------------------------------------------
El separador de la casa, y la única figura decorativa que se permite la
página: es la forma del oficio. Damero dibujado con gradientes, sin imagen,
sin peticiones y nítido a cualquier densidad de pantalla. */
.meta-linea {
height: 12px;
background-image:
linear-gradient(45deg, var(--color-accent) 25%, transparent 25%, transparent 75%, var(--color-accent) 75%),
linear-gradient(45deg, var(--color-accent) 25%, transparent 25%, transparent 75%, var(--color-accent) 75%);
background-size: 12px 12px;
background-position: 0 0, 6px 6px;
}
/* Variante fina para cerrar el cuerpo: sólo la fila de arriba, y apagada. */
.meta-fina {
height: 6px;
background-image: linear-gradient(90deg, var(--color-accent-2) 50%, transparent 50%);
background-size: 12px 6px;
}
/* --- N9 · Barra superior de canto a canto ----------------------------------
Logotipo a la izquierda, una sola acción a la derecha, y entre medias nada.
El vacío ES el diseño: meter ahí cuatro enlaces para «llenar» convierte esto
en la barra que emite cualquier plantilla. Esta página tiene dos destinos de
verdad (ella misma y la consola), así que se dice así. */
/* UNA sola barra. Antes eran dos superpuestas —marca arriba, producto debajo—
y entre las dos se comían 96 px de alto fijo en cada pantalla. Ahora la
marca, el nombre del producto y las dos acciones van en una línea, y es esa
línea la que se queda pegada al bajar. */
.cabecera {
position: sticky;
top: 0;
z-index: var(--z-sticky);
border-bottom: var(--rule) solid var(--color-rule-2);
/* Translúcida con desenfoque: el contenido pasa por debajo y se nota que
hay una capa, sin tapar la sección con un bloque opaco. */
background: color-mix(in srgb, var(--color-paper) 82%, transparent);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
}
.cabecera .contenedor {
display: flex;
align-items: center;
gap: var(--space-md);
min-height: var(--alto-barra);
}
/* Hairline entre la marca y el nombre del producto. Es lo que sustituye al
corte horizontal que antes hacían las dos barras. */
.cabecera-separador {
flex: 0 0 auto;
inline-size: var(--rule);
block-size: 20px;
background: var(--color-rule-2);
}
.cabecera-producto {
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: 0.012em;
color: var(--color-ink);
white-space: nowrap;
}
/* `auto` a la izquierda empuja las acciones al borde derecho sin necesidad de
un `justify-content: space-between` que descolocaría el separador. */
.cabecera-acciones {
margin-inline-start: auto;
display: flex;
align-items: center;
gap: var(--space-lg);
}
.cabecera-enlace {
font-size: var(--ap-cuerpo);
color: var(--color-ink-2);
text-decoration: none;
white-space: nowrap;
border-bottom: var(--rule-2) solid transparent;
transition: color var(--dur-micro) var(--ease-out),
border-color var(--dur-micro) var(--ease-out);
}
.cabecera-enlace:hover,
.cabecera-enlace:focus-visible {
color: var(--color-ink);
border-bottom-color: var(--color-accent);
}
.cabecera-boton {
font-family: var(--font-display);
font-size: var(--ap-cuerpo-menor);
font-weight: 600;
color: var(--color-accent-ink);
background: var(--color-accent);
padding: 0.45em 1em;
text-decoration: none;
white-space: nowrap;
border-radius: var(--radius);
transition: background var(--dur-micro) var(--ease-out);
}
.cabecera-boton:hover,
.cabecera-boton:focus-visible { background: var(--color-accent-claro); }
/* El enlace del logotipo NO se encoge. Sin esto, en un teléfono de 320 px el
enlace de la derecha se queda con todo el ancho y la marca queda aplastada a
31 px: una raya ilegible. Pasó de verdad, y sólo se ve midiendo el DOM,
porque en escritorio sobra sitio. */
.marca-enlace {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
/* Área de toque de 44 px de alto aunque la imagen mida 26. */
min-height: 44px;
}
.logo { height: 32px; width: auto; }
/* --- H2 · El hero en díptico -----------------------------------------------
Izquierda: el titular dentro de un bloque de oro macizo que se sale por el
canto izquierdo de la pantalla. Derecha: la figura, a plomo.
EL SANGRADO. El hero es la única pieza que NO se mete en la caja centrada de
76 rem: su fila ocupa el ancho de la ventana, así que el bloque de oro nace
en el canto izquierdo de verdad y no en el borde de una columna. Un bloque
que toca el canto y se va se lee como impreso; uno que respeta la caja se lee
como una tarjeta. El texto de dentro se alinea con el margen de página, de
modo que el titular, el rótulo y la entradilla comparten eje aunque el fondo
se salga. Se hace con márgenes reales y no con `100vw`, que incluye la barra
de desplazamiento y provoca desplazamiento lateral en escritorio.
EL ACENTO. Éste es el ÚNICO bloque de oro de la página. El resto del oro son
filetes, ordinales y estados. Un acento repartido por todas partes deja de
ser acento y pasa a ser fondo. */
.portada {
position: relative;
background: var(--color-paper-2);
/* La primera pantalla es una FOTO, no una columna de texto con una imagen de
acompañante. Alto grande de verdad, con tope en píxeles para que en un
monitor vertical no se convierta en un cartel de tres metros. */
/* LA PANTALLA ENTERA MENOS LA BARRA, y el «menos» es el arreglo.
La barra es `sticky`, pero `sticky` NO saca del flujo: ocupa sus 64 px de
verdad, y el hero venia pidiendo `100dvh` DEBAJO de ellos. Entre los dos
sumaban 100dvh + 64, asi que la primera pantalla nunca cabia entera: la
entradilla se quedaba siempre por debajo del pliegue y habia que hacer
scroll para leer la frase que explica que es esto. Medido con el telefono
tumbado: seccion de 390 px empezando en y=65 sobre una pantalla de 390.
`--alto-barra` ya se encoge sola en el telefono (52 px), asi que la resta
se ajusta sin un punto de corte propio. */
/* La hairline de abajo de la barra tambien ocupa: `--alto-barra` es el
`min-height` del contenido, y el `border-bottom` suma su pixel encima. Sin
restarlo el hero se pasaba por uno y aparecia barra de scroll. */
min-height: calc(100dvh - var(--alto-barra) - var(--rule));
display: grid;
align-items: end; /* el texto se apoya en la parte baja */
/* El respiro era `--space-3xl` fijo, 96 px arriba y 96 abajo. Con 390 px de
alto no caben: el `clamp` los encoge cuando no hay altura y los deja en 96
cuando la hay.
`svh` y no `dvh`: el `dvh` cambia cuando el navegador movil esconde su
barra de direcciones, y el relleno se pondria a bailar durante el scroll. */
padding-block:
clamp(var(--space-md), 4svh, var(--space-2xl))
clamp(var(--space-lg), 6svh, var(--space-3xl));
overflow: hidden; /* recorta la foto, no la página */
/* Contenedor de consulta para medir el ancho real de la ventana en `cqw`. */
container-type: inline-size;
}
/* La foto, cubriendo la sección entera. */
.portada-lienzo {
position: absolute;
inset: 0;
z-index: var(--z-base);
}
/* El velo. Sin él, el texto claro sobre una foto clara no se lee, y bajar el
texto a gris sobre color es de los tells más viejos del oficio. Dos paradas
del mismo azul de marca, nada de degradados de dos colores. */
.portada-lienzo::after {
content: "";
position: absolute;
inset: 0;
/* DOS velos, y el de abajo es el que de verdad trabaja. El lateral solo
oscurece la izquierda y dejaba limpio justo el PIE de la imagen, que es
donde se apoya el texto: sin caja detras, el titular se perdia contra la
hierba iluminada. El que sube desde abajo es el que sostiene la lectura. */
background:
linear-gradient(to top,
color-mix(in srgb, var(--color-paper) 94%, transparent) 0%,
color-mix(in srgb, var(--color-paper) 62%, transparent) 34%,
transparent 68%),
linear-gradient(95deg,
color-mix(in srgb, var(--color-paper) 62%, transparent) 0%,
transparent 62%);
}
.portada-texto {
position: relative;
z-index: var(--z-raised);
width: 100%;
}
/* UN SOLO EJE DE TEXTO EN TODA LA PÁGINA.
Un intento anterior sacó el hero entero de la caja centrada, y el resultado
era que el titular arrancaba en un sitio y las secciones de abajo en otro:
dos ejes verticales a cuatro centímetros uno del otro, que se leen como un
descuadre y no como una decisión. El TEXTO se queda en la caja, con todos
los demás; lo que sale al canto son los FONDOS y las fotos. */
.rotulo {
display: block;
margin-bottom: var(--space-lg);
font-family: var(--font-display);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-accent);
}
/* AQUI YA NO HAY CAJA, y la ausencia es la decision.
Habia un bloque de oro macizo que entraba por el canto. No fue un descuido:
el sello del principio lo declara como «bloque de oro a la izquierda, figura
a la derecha», y era la mitad izquierda de un DIPTICO. Funcionaba.
Lo que se rompio fue el contexto. El hero paso a ser video a sangre detras
de TODO, y el mismo rectangulo dejo de ser media composicion para ser una
pegatina opaca sobre una fotografia: no se alineaba con nada del cuadro —ni
el sendero, ni el horizonte, ni las antenas— porque lo colocaba el CSS y no
la toma. Y hacia un trabajo que no le toca, taparlo todo para que el titular
se lea. De eso se encarga el velo, y un velo no amputa un tercio de imagen.
El elemento se queda como gancho de maquetacion: es quien limita la medida
del titular sin tocar el parrafo de debajo. */
.bloque-titular {
max-width: 100%;
}
h1.titular {
margin: 0;
font-family: var(--font-display);
/* 29 caracteres, cinco palabras. Por debajo de 50 el titular aguanta el
tamaño grande sin amontonarse; la primera versión medía 63 y había que
bajarla un escalón, porque un titular largo a tamaño máximo es el delator
más fiable que existe. El texto se acortó, así que la escala sube. */
/* El tamano lo manda el ancho, pero con un tope por ALTO. Sin el, en una
pantalla baja el titular se come el sitio de la entradilla y la primera
pantalla deja de caber. 10svh no toca nada en un telefono de pie (39 px
frente a los 40 que ya tenia); solo actua cuando la pantalla es corta. */
font-size: min(var(--text-display), 10svh);
font-weight: 700;
font-style: normal; /* los encabezados van en redonda. Siempre. */
line-height: 1.03;
letter-spacing: -0.025em;
text-transform: uppercase;
text-wrap: balance;
overflow-wrap: anywhere;
min-width: 0;
}
/* El énfasis del titular NO es cursiva: es un subrayado dibujado, grueso, a la
altura de la base. La palabra en cursiva dentro de un titular por lo demás
recto es de los tics más reconocibles de una página generada. */
.titular .clave {
font-style: normal;
/* Oro, no tinta: el subrayado vivia sobre el bloque dorado y ahora vive
sobre el video, con el titular en claro. */
box-shadow: inset 0 -0.14em 0 var(--color-accent);
/* Las tres palabras subrayadas viajan juntas. Partidas entre dos líneas, el
subrayado se rompe en dos trozos sueltos y parece un error de maquetación
en vez de un énfasis. En pantallas estrechas se suelta, porque ahí lo que
no cabe se sale, y eso es peor. */
white-space: nowrap;
}
@media (max-width: 40rem) {
.titular .clave { white-space: normal; }
}
.entradilla {
margin: var(--space-lg) 0 0;
max-width: 46ch; /* medida de lectura, entre 45 y 75 */
color: var(--color-ink-2);
}
/* --- Figuras y huecos declarados -------------------------------------------
Cada figura busca su archivo; si no está, pinta un hueco que DICE qué va
ahí. Un hueco declarado no parece un error: parece una página a medio
vestir, que es exactamente lo que es mientras no haya fotos de carreras
reales. La alternativa —una foto de banco de imágenes con corredores
genéricos— contradice en el primer golpe de vista a una página escrita para
no prometer nada que no se pueda comprobar. */
figure { margin: 0; }
.figura {
position: relative;
overflow: hidden;
background: var(--color-paper-3);
border: var(--rule) solid var(--color-rule-2);
}
/* `` no pinta nada por sí mismo: con `display: contents` desaparece de
la maquetación y el `` de dentro se mide contra `.figura`, igual que
cuando no había envoltura. Sin esto, el `height: 100%` de abajo se resolvería
contra una caja en línea de altura cero y la foto no se vería. */
.figura picture { display: contents; }
.figura :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
.figura-3x2 { aspect-ratio: 3 / 2; }
.figura-ancha { aspect-ratio: 21 / 8; }
/* --- Las dos formas a sangre -----------------------------------------------
Sin proporción fija y sin borde: se estiran a lo que les dé el sitio. Son
las que hacen que la página se vea de lejos. */
.figura-sangre {
height: 100%;
width: 100%;
border: 0;
background: transparent;
}
.figura-sangre :is(img, video) { height: 100%; }
/* La panorámica del cruce. Es LA pieza de la página, así que es la más alta de
todas por una razón medida: en `apple.com/iphone-duo` la sección de la
cámara ocupa 4 195 px y veinticuatro piezas, mientras las secundarias se
quedan en mil y pico. La jerarquía la marca el TAMAÑO, no el titular. Aquí
la idea equivalente es el instante del cruce.
`dvh` y no `vh` porque en un teléfono la barra del navegador aparece y
desaparece, y con `vh` la foto pega un salto cada vez. */
.figura-panoramica {
width: 100%;
height: 100dvh;
border: 0;
border-block: var(--rule) solid var(--color-rule-2);
}
/* El hueco. Casi del color del fondo: es un sitio reservado, no una pieza de
la página. En la primera versión iba en el azul medio con el rayado bien
marcado y pasaba lo contrario de lo que debe pasar: el hueco vacío pesaba
más que el titular. Un hueco tiene que verse lo justo para saber que ahí va
una foto y desaparecer en cuanto llegue. */
.figura.hueco {
display: grid;
place-content: center;
justify-items: center;
gap: var(--space-md);
padding: var(--space-xl);
text-align: center;
border-style: dashed;
border-color: var(--color-rule-2);
background-color: color-mix(in oklab, var(--color-paper-3) 35%, var(--color-paper));
background-image: repeating-linear-gradient(
-45deg,
transparent 0 11px,
color-mix(in oklab, var(--color-rule) 45%, transparent) 11px 12px
);
}
.figura.hueco img {
width: 40px; height: 40px;
object-fit: contain;
opacity: 0.45;
}
.figura.hueco span {
font-family: var(--font-display);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
line-height: 1.5;
color: var(--color-muted);
max-width: 34ch;
}
figcaption {
margin-top: var(--space-sm);
color: var(--color-muted);
font-size: var(--text-sm);
line-height: 1.5;
}
/* --- El reloj --------------------------------------------------------------
La cifra como pieza tipográfica, no como dato. Es el FORMATO en que se
entregan los tiempos; no hay una sola cifra de rendimiento en toda la página
porque todavía no hay carreras que contar, y en un producto que ES la
medición, inventar un número es el peor pecado posible. */
.reloj {
background: var(--color-paper);
min-height: 100dvh;
display: grid;
align-content: center;
padding-block: var(--space-3xl);
}
.reloj .contenedor {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-xl);
}
.reloj-cifra {
margin: 0;
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--text-reloj);
line-height: 0.95;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
color: var(--color-ink);
overflow-wrap: anywhere;
min-width: 0;
}
.reloj-cifra .cent { color: var(--color-accent); }
.reloj-texto {
margin: 0;
max-width: 58ch;
color: var(--color-ink-2);
}
.reloj-texto strong { color: var(--color-ink); font-weight: 600; }
/* --- Secciones y encabezados (S2 · colgado) --------------------------------
El encabezado flota sobre la sección en su propio aire: sin regla, sin caja
y SIN rótulo de capítulo al lado. El patrón «01 · LA VUELTA» en una columna
estrecha con el título a la derecha es el tic más reconocible de la falsa
página editorial; aquí no aparece ni una vez. */
/* UNA IDEA POR PANTALLA.
Es el cambio que separa una página de producto de un folleto largo. En
`apple.com/iphone-duo` ninguna idea comparte pantalla con otra: la sección
más pequeña ocupa 904 px y la mayor 4 195. Aquí cada sección pide la altura
de la ventana y centra lo suyo, así que al bajar se pasa de una idea a la
siguiente en vez de leer una lista.
`min-height` y no `height`: si el contenido crece (un teléfono estrecho, un
texto más largo, la letra ampliada por accesibilidad), la sección crece con
él en vez de recortarlo. `dvh` porque la barra del navegador móvil aparece y
desaparece. */
.seccion {
min-height: 100dvh;
display: grid;
align-content: center;
padding-block: var(--space-3xl);
}
/* La franja de la foto grande no centra nada: la foto ES la sección. */
.seccion-sangre {
min-height: 0;
display: block;
padding-block: var(--space-2xl);
}
.titulo {
margin: 0 0 var(--space-lg);
font-family: var(--font-display);
/* Un escalón por encima del primer ajuste: al lado de un titular de 76 px,
un título de sección de 31 px se leía como un subtítulo y la página perdía
el pulso a mitad de recorrido. */
font-size: var(--text-2xl);
font-weight: 700;
font-style: normal;
line-height: 1.08;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--color-ink);
overflow-wrap: anywhere;
min-width: 0;
}
.bajada {
margin: 0 0 var(--space-xl);
max-width: 62ch;
color: var(--color-ink-2);
}
/* --- Díptico · el ritmo de la página ---------------------------------------
Split Studio: cada bloque grande parte la pantalla, texto a un lado y prueba
al otro, y el lado se ALTERNA al bajar. `.diptico-invertido` manda la figura
a la izquierda cambiando el orden visual, no el del documento: quien usa un
lector de pantalla sigue oyendo primero el texto. */
.diptico {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-2xl);
align-items: center;
}
.diptico-invertido > figure { order: -1; }
/* El díptico en el que la figura se va al canto en vez de quedarse dentro de
la caja. La imagen gana la mitad entera de la pantalla y el texto se queda
en su columna, que es el reparto que hace que una página se vea moderna en
vez de acartonada. */
.diptico-sangre { align-items: stretch; }
.diptico-sangre > figure {
margin-inline-start: calc(-1 * var(--sangria, var(--gutter)));
}
.diptico-sangre > figure .figura {
height: 100%;
min-height: clamp(16rem, 46dvh, 30rem);
aspect-ratio: auto;
}
.diptico-sangre > div { align-self: center; }
/* Sección cuya figura sale de la caja: el pie de foto sí vuelve a la caja. */
.seccion-sangre { padding-block: var(--space-2xl); }
.pie-sangre {
margin: var(--space-sm) 0 0;
color: var(--color-muted);
font-size: var(--text-sm);
}
/* --- F4 · La secuencia de pasos --------------------------------------------
Ordinales de verdad (el orden importa: primero la pulsera, luego el arco,
luego el tiempo), así que aquí el número SÍ se gana su sitio. Van colgados
en el margen, monoespaciados y apagados. */
.pasos {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-lg);
}
.pasos > li {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
gap: var(--space-lg);
align-items: start;
padding-top: var(--space-lg);
border-top: var(--rule) solid var(--color-rule-2);
}
.paso-n {
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--text-lg);
line-height: 1.1;
font-variant-numeric: tabular-nums;
color: var(--color-accent-2);
}
.paso h3 {
margin: 0 0 var(--space-xs);
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: 700;
font-style: normal;
line-height: 1.2;
color: var(--color-ink);
}
.paso p {
margin: 0;
max-width: 58ch;
color: var(--color-ink-2);
}
/* --- F3 · Hoja de especificaciones -----------------------------------------
Las tres formas en que esto se estropea de verdad, y la respuesta concreta a
cada una. Filas con filete, no tarjetas: tres tarjetas iguales con un icono
arriba es la retícula que emite cualquier generador. */
.fallos { margin: 0; }
.fallos > div {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
gap: var(--space-lg);
padding-block: var(--space-lg);
border-top: var(--rule) solid var(--color-rule-2);
}
.fallos > div:last-child { border-bottom: var(--rule) solid var(--color-rule-2); }
.fallos dt {
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: 700;
line-height: 1.25;
color: var(--color-ink);
}
.fallos dd {
margin: 0;
max-width: 60ch;
color: var(--color-ink-2);
}
/* --- La tabla de salidas ---------------------------------------------------
Tabla de verdad, con `th` de fila: son datos, no maquetación. En un teléfono
no se encoge hasta ser ilegible, se desplaza dentro de su propia caja. */
.tabla-caja { overflow-x: auto; }
.salidas {
width: 100%;
border-collapse: collapse;
font-size: var(--text-base);
font-variant-numeric: tabular-nums;
}
.salidas th,
.salidas td {
text-align: start;
vertical-align: top;
padding: var(--space-md) var(--space-lg) var(--space-md) 0;
border-top: var(--rule) solid var(--color-rule-2);
}
.salidas thead th {
border-top: none;
border-bottom: var(--rule-2) solid var(--color-accent-2);
padding-bottom: var(--space-sm);
font-family: var(--font-display);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-muted);
}
.salidas tbody th {
font-family: var(--font-display);
font-weight: 700;
color: var(--color-ink);
white-space: nowrap;
}
.salidas td { color: var(--color-ink-2); }
/* --- Cierre y C1 · chip perfilado ------------------------------------------
Un solo botón. Dos botones juntos reparten la intención y no decide nadie.
Perfilado y transparente, no macizo: el único macizo de la página es el
bloque del titular. */
.cierre {
background: var(--color-paper-2);
padding-block: var(--space-3xl);
}
.cierre .titulo { margin-bottom: var(--space-lg); }
.cierre .bajada { margin-bottom: var(--space-xl); }
.boton {
display: inline-flex;
align-items: center;
gap: 0.5em;
min-height: 48px;
padding: var(--space-sm) var(--space-lg);
border: var(--rule-2) solid var(--color-accent);
border-radius: var(--radius);
background: transparent;
color: var(--color-accent);
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background-color var(--dur-micro) var(--ease-out),
color var(--dur-micro) var(--ease-out),
transform var(--dur-micro) var(--ease-out);
}
.boton:hover,
.boton:focus-visible { background: var(--color-accent); color: var(--color-accent-ink); }
.boton:active { transform: translateY(1px); }
/* --- Ft1 · El pie con mástil -----------------------------------------------
El logotipo ancla una sola banda horizontal con el eslogan al lado. Nada de
cuatro columnas de enlaces con fila de iconos sociales debajo: esta página
no tiene mapa del sitio que catalogar, y fingir que lo tiene es justo la
forma de pie que emite cualquier plantilla. */
.pie {
border-top: var(--rule) solid var(--color-rule);
padding-block: var(--space-xl);
background: var(--color-paper);
}
.pie .contenedor {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-sm) var(--space-xl);
}
.pie-marca {
margin: 0;
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-ink);
}
.pie-lema,
.pie-anio {
margin: 0;
font-size: var(--text-sm);
color: var(--color-muted);
}
.pie-lema { letter-spacing: 0.04em; }
/* ===========================================================================
MOVIMIENTO LIGADO AL SCROLL
CÓMO, Y POR QUÉ ASÍ. Todo lo que se mueve aquí usa las animaciones nativas
de scroll de CSS (`animation-timeline`), no JavaScript. La diferencia no es
de gusto: un `addEventListener('scroll')` corre en el hilo principal y pelea
con el desplazamiento del dedo, mientras que estas animaciones las conduce
el compositor y van finas aunque la página esté ocupada. Cero bytes de JS en
una página que no tiene ni una línea.
LA REGLA QUE NO SE ROMPE. Nada de esto puede esconder contenido. Si el
navegador no entiende `animation-timeline` (hoy: Safari viejo y Firefox sin
la bandera), la página se ve entera y quieta, que es un final perfectamente
digno. Por eso cada regla que empieza con `opacity: 0` vive DENTRO de un
`@supports`: sin soporte, nadie pone nada a cero y no hay texto invisible.
Es el fallo clásico de las animaciones de scroll y se evita así.
QUÉ SE MUEVE, Y QUÉ NO. Tres cosas, y ninguna es decorativa:
1. Las piezas entran una vez al aparecer. Sube 14 px y aparece. Ya está.
2. El cronómetro CORRE mientras la franja cruza la pantalla. El scroll es
el tiempo: en una página de cronometraje, mover el dedo y ver correr
las centésimas dice lo que hace el producto mejor que un párrafo.
3. La línea de meta se desplaza de lado, como cuando la pasas corriendo.
No hay parallax, no hay tarjetas que se levanten, no hay nada que se repita
en bucle para siempre pidiendo atención.
=========================================================================== */
/* 1 · Entrada. `view()` arranca la animación cuando el elemento asoma por el
borde inferior y la termina cuando ya está dentro; `both` la deja fija en su
estado final, así que no vuelve a desvanecerse al subir. */
@supports (animation-timeline: view()) {
html.con-movimiento {
.reveal {
/* NI `opacity: 0` DE BASE NI `both`. Con los dos, un elemento cuya línea
de tiempo no avanza se queda clavado en el primer fotograma —es decir,
invisible para siempre—. Y eso pasa en cuanto un ANCESTRO tiene
`overflow: clip`: ese ancestro pasa a ser el scrollport de `view()`, no
hace scroll nunca, y el progreso se queda en cero. Con los sangrados
que lleva esta página (equipo, dosvistas, banda, compuesta…) eso dejó
23 de 25 bloques en blanco.
Con `forwards` y sin opacidad de base, fuera del rango no se aplica
nada: el contenido se ve. La animación sigue entrando donde la línea de
tiempo sí avanza, y donde no, simplemente no hay animación. Una entrada
nunca debe poder dejar la página en blanco. */
animation: entrar var(--dur-long) var(--ease-out) forwards;
animation-timeline: view();
animation-range: entry 5% cover 22%;
}
}
}
@keyframes entrar {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
/* 1b · Los titulares suben desde detrás de una máscara ----------------------
El recurso de Apple para los encabezados: la línea no aparece, ENTRA. La
caja de fuera recorta y la de dentro sube desde abajo. El relleno vertical
de la máscara está para que no se corten las colas de la g y la j ni la
virgulilla de la ñ: `overflow: hidden` recorta en la caja de relleno, así
que ese margen sobrevive.
Cuando hay más de una línea se escalonan moviendo el RANGO, no con
`animation-delay`: un retardo no significa nada cuando el tiempo lo marca el
scroll y el navegador lo ignora. `--l` lo pone el PHP en cada línea. */
.linea { display: block; overflow: hidden; padding-block: 0.06em; }
.linea-i { display: block; }
@supports (animation-timeline: view()) {
html.con-movimiento {
.linea-i {
animation: subir-linea 1s var(--ease-out) both;
animation-timeline: view();
animation-range: entry calc(6% + var(--l, 0) * 9%) entry calc(72% + var(--l, 0) * 9%);
}
}
}
@keyframes subir-linea {
from { transform: translateY(105%); }
to { transform: none; }
}
/* 1c · Las piezas de una lista entran una detrás de otra --------------------
Cada `li` y cada fila lleva su propia línea de tiempo, así que el escalonado
sale solo: la de abajo empieza más tarde porque entra más tarde. No hace
falta contar índices ni repartir retardos. */
@supports (animation-timeline: view()) {
html.con-movimiento {
.pasos > li,
.fallos > div,
.salidas tbody tr {
opacity: 0;
animation: entrar-lado var(--dur-long) var(--ease-out) both;
animation-timeline: view();
animation-range: entry 8% cover 30%;
}
}
}
@keyframes entrar-lado {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
/* 1d · El avance de la lectura: un corredor recorriendo una pista -----------
Antes era un damero de línea de meta que se iba pintando. Esto dice más con
menos: la pista es una hairline que cruza la pantalla, lo ya recorrido se
pinta en oro, y encima va un corredor de 16 px que avanza con el scroll.
Discreto a propósito — 16 px de alto, sin fondo ni caja.
`scroll(root block)` mide el documento entero, que es lo que hay que medir.
El corredor se mueve con `translate`, nunca con `left`: `left` es layout y
provoca reflow en cada fotograma. El recorrido va en `cqw` (ancho del propio
contenedor), así no hay que descontar a mano la barra de scroll como pasaría
con `100vw`. */
.avance {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
height: 18px;
z-index: var(--z-sticky);
pointer-events: none; /* no se puede hacer clic en una barra de progreso */
container-type: inline-size;
}
/* La pista: siempre visible, tenue, centrada en la franja. */
.avance::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: 3px;
height: var(--rule);
background: var(--color-rule-2);
}
/* La estela: lo ya leído, por detrás del corredor. */
.avance-estela {
position: absolute;
inset-inline: 0;
inset-block-end: 3px;
height: calc(var(--rule) * 2);
transform-origin: left center;
transform: scaleX(0);
background: var(--color-accent);
opacity: 0.55;
}
/* El icono lleva ~3 px de aire bajo los pies a este tamaño, que es justo la
altura a la que va la pista: pegando el SVG al fondo, el corredor la pisa
en vez de flotar por encima. */
.avance-corredor {
position: absolute;
inset-block-end: 0;
inset-inline-start: 0;
color: var(--color-accent);
/* Sin líneas de tiempo de scroll el corredor se quedaría clavado en el 0 %
fingiendo que no has bajado nada: en ese caso no se enseña. */
display: none;
}
@supports (animation-timeline: scroll()) {
html.con-movimiento {
.avance-estela {
animation: avanzar-estela 1s linear both;
animation-timeline: scroll(root block);
}
.avance-corredor {
display: block;
animation: correr-la-pista 1s linear both;
animation-timeline: scroll(root block);
}
}
html.sin-linea-de-scroll .avance-corredor { display: none; }
}
@keyframes avanzar-estela { to { transform: scaleX(1); } }
@keyframes correr-la-pista { to { translate: calc(100cqw - 16px) 0; } }
/* 1e · La foto del hero se acerca mientras la dejas atrás -------------------
Doce por ciento en toda la primera pantalla. Es el gesto de Apple y el único
sitio donde se permite, porque una foto que se mueve en cada sección marea.
Va sobre la imagen, no sobre su caja, para que el recorte no se despegue de
los bordes. */
@supports (animation-timeline: view()) {
html.con-movimiento {
.portada-lienzo .figura :is(img, video) {
animation: acercar 1s linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
}
}
@keyframes acercar {
from { transform: scale(1); }
to { transform: scale(1.12); }
}
/* 2 · El cronómetro en marcha ------------------------------------------------
Cada dígito que corre es una tira vertical de once cifras (0 a 9 y otra vez
0, para que la vuelta cierre sin salto) dentro de una ventana de la altura
de una sola. La tira sube de una en una con `steps()`, que es lo que le da
el golpe seco de un contador mecánico en vez de un deslizamiento blando.
Las velocidades son las de un cronómetro de verdad: la centésima de la
derecha gira diez veces por cada vuelta de la de su izquierda, y el segundo
avanza un paso mientras tanto. No es exacto al milisegundo, es legible, que
aquí es lo que importa.
Ojo: la ventana usa `em`, así que la pieza sigue a la escala fluida del
reloj sin tener que repetir el `clamp` en ningún sitio. */
.rodillo {
display: inline-block;
width: 0.62em; /* ancho de una cifra en IBM Plex Mono */
height: 1em;
overflow: hidden;
vertical-align: baseline;
/* Empuja la ventana para que la cifra visible se apoye en la línea de base
igual que el texto fijo de al lado. */
margin-bottom: -0.12em;
}
.rodillo b {
display: block;
height: 1em;
font-weight: inherit;
text-align: center;
}
/* (Aqui iba la version con linea de tiempo de scroll de los rodillos del reloj.
Fuera por lo mismo: ahora los pinta el script atados al video. El resto de
piezas de la pagina siguen usando `animation-timeline: view()` donde toca.) */
/* MUEVEN `margin-top`, NO `transform`, y la diferencia no es de gusto: es que
con `transform` esto NO FUNCIONA. Las cifras son hermanas en flujo normal
dentro de una ventana de 1em con `overflow: hidden`. Un `transform` sobre la
primera mueve SOLO a la primera: las otras se quedan donde estaban, asi que
la primera se va hacia arriba y detras no aparece ninguna. La ventana queda
EN BLANCO. Medido: con tres cifras a 0/20/40 px, `translateY(-1em)` las deja
en -20/20/40 (ventana vacia) y `margin-top: -1em` en -20/0/20 (se ve la
siguiente, que es lo que tiene que pasar).
`margin-top` negativo sobre la primera arrastra a todas las siguientes,
porque eso es lo que hacen los margenes en flujo normal. */
@keyframes girar { to { margin-top: -10em; } }
@keyframes avanzar { to { margin-top: -4em; } }
/* 3 · La línea de meta pasa de largo ----------------------------------------
El damero se desplaza a lo ancho mientras la franja cruza la pantalla. Es la
misma sensación de pasar corriendo por encima de la meta pintada en el
suelo. Se mueve un pseudo-elemento más ancho que la caja, con `transform`,
así que no hay repintado de fondo ni salto de maquetación. */
.meta-linea, .meta-fina { position: relative; overflow: hidden; }
.meta-linea > i, .meta-fina > i {
position: absolute;
inset: 0 -20% 0 -20%;
display: block;
background-image: inherit;
background-size: inherit;
background-position: inherit;
}
@supports (animation-timeline: view()) {
html.con-movimiento {
.meta-linea > i, .meta-fina > i {
animation: correr-meta 1s linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
}
}
@keyframes correr-meta { to { transform: translateX(-96px); } }
/* --- El respaldo para quien no sabe animar con el scroll -------------------
`animation-timeline` no es Baseline: falta en Firefox estable y en los
Safari anteriores al 26. En esos navegadores `portada.js` pone la clase de
abajo en la raíz y marca cada pieza cuando asoma, y aquí se hace lo mismo
con una animación de toda la vida.
La diferencia está en de dónde sale el tiempo: arriba lo marca el dedo que
arrastra la página, aquí lo marca el reloj del navegador. El efecto se
parece; el de arriba es mejor y por eso va primero.
NADA DE ESTO SE APLICA SI EL JAVASCRIPT NO CORRE, porque la clase la pone el
propio archivo. Sin él no hay `opacity: 0` en ningún sitio y la página se ve
completa. Es la única forma de que una animación de entrada no acabe siendo
una página en blanco. */
html.con-movimiento.sin-linea-de-scroll .reveal { opacity: 0; }
html.con-movimiento.sin-linea-de-scroll .reveal.a-la-vista {
animation: entrar var(--dur-long) var(--ease-out) both;
}
/* El reloj YA NO SE ANIMA DESDE AQUI. Lo pinta `portada.js` cifra a cifra desde
el `currentTime` del clip que va detras, para que se pare exactamente en el
fotograma del cruce. Aqui habia cuatro reglas mas que apuntaban a
`.rodillo-segundo` y `.rodillo-centesima-1/2`: esos rodillos ya no existen
—ahora son seis, de `min-d` a `cent-2`— asi que no seleccionaban nada.
Se quitan en vez de renombrarse: una animacion de respaldo que girase cifras
al azar seria peor que el reloj quieto en 0:00:00.00 que queda si el script
no corre, y que es justo «el formato» que la seccion dice estar enseñando. */
/* Quien pide menos movimiento se queda con la página quieta y completa. Las
reglas de arriba ni siquiera se aplican, así que aquí sólo hay que apagar
las transiciones de estado. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
}
}
/* El alzado del botón sólo donde hay un ratón de verdad. */
@media (hover: hover) and (pointer: fine) {
.boton:hover { transform: translateY(-1px); }
}
/* --- Anchos ----------------------------------------------------------------
De menor a mayor, que es la única dirección honesta: el teléfono es el caso
base y no la excepción. Comprobado a 320, 375, 414 y 768 px.
Hasta 60 rem todo va en una columna, y el bloque de oro deja de desbordar
sólo por un lado: a esos anchos se estira de canto a canto, porque un bloque
cortado en un teléfono se lee como roto, no como impreso. */
@media (max-width: 60rem) {
.portada .contenedor,
.diptico {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-xl);
}
.diptico-invertido > figure { order: 0; }
/* En una sola columna el bloque sangra por los DOS cantos: con el texto
apilado, un bloque que llega a la izquierda y se corta a la derecha parece
recortado a tijera. */
.bloque-titular {
margin-inline-end: calc(-1 * var(--gutter));
padding-inline-end: var(--gutter);
}
.fallos > div,
.pasos > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.figura-ancha { aspect-ratio: 16 / 9; }
}
@media (max-width: 40rem) {
body { font-size: var(--text-base); }
.seccion { padding-block: var(--space-2xl); }
.portada { padding-block: var(--space-2xl) var(--space-xl); }
.cierre { padding-block: var(--space-2xl); }
.bloque-titular { padding-block: var(--space-lg); }
/* La barra baja a 52 px en el teléfono. Se redefine el token, no la regla:
así bajan con él la pista del corredor y el salto de las anclas. */
:root { --alto-barra: 52px; }
.cabecera .contenedor { gap: var(--space-sm); }
.logo { height: 24px; }
/* En un teléfono no caben la marca, el nombre del producto y dos acciones
en la misma línea. Se van el separador, el nombre y el enlace secundario;
quedan la marca y el botón, que es lo que alguien viene a pulsar. Acortar
antes que partir en dos líneas o encoger la marca. */
.cabecera-separador, .cabecera-producto, .cabecera-enlace { display: none; }
.figura-3x2 { aspect-ratio: 4 / 3; }
/* El pie se apila: en un teléfono la banda de mástil no cabe en una línea. */
.pie .contenedor { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.boton { width: 100%; justify-content: center; }
}
/* ===========================================================================
LA GALERÍA QUE AVANZA CON EL SCROLL
Cómo funciona, porque no es evidente: la sección `.galeria` es una pista
alta (tres pantallas). Dentro, `.galeria-fija` se queda pegada arriba
ocupando la ventana entera, así que mientras recorres esas tres pantallas
ves siempre lo mismo. Lo único que cambia es la posición de la tira, que se
desplaza de lado conducida por lo que llevas recorrido de la pista.
Es el mecanismo de las páginas de producto de Apple, hecho sin JavaScript:
allí lo mueve un script sobre el hilo principal y aquí lo mueve el
compositor con `animation-timeline: view()`.
EL RESPALDO IMPORTA MÁS QUE EL EFECTO. Sin líneas de tiempo de scroll, la
pista se queda de una pantalla, nada se pega y la tira pasa a ser una fila
que se arrastra con el dedo, con anclaje por pieza. Se ve distinto, pero se
lee entero, que es lo único que no se negocia.
=========================================================================== */
.galeria {
background: var(--color-paper-2);
border-block: var(--rule) solid var(--color-rule-2);
}
.galeria-fija {
min-height: 100dvh;
display: grid;
align-content: center;
gap: var(--space-2xl);
padding-block: var(--space-3xl);
overflow: hidden; /* recorta la tira, que es más ancha que la ventana */
}
.galeria-titulo { margin: 0; }
.galeria-tira {
list-style: none;
margin: 0;
padding-inline: var(--sangria, var(--gutter));
display: flex;
gap: var(--space-xl);
/* Sin línea de tiempo de scroll esto es una fila que se arrastra. */
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.galeria-tira::-webkit-scrollbar { display: none; }
.galeria-pieza {
flex: 0 0 min(78vw, 34rem);
scroll-snap-align: center;
display: grid;
align-content: start;
gap: var(--space-sm);
padding: var(--space-xl);
background: var(--color-paper);
border: var(--rule) solid var(--color-rule-2);
min-height: clamp(15rem, 42dvh, 24rem);
}
.galeria-pieza .paso-n {
font-size: var(--text-2xl);
line-height: 1;
margin-bottom: var(--space-sm);
}
.galeria-pieza h3 {
margin: 0;
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 700;
line-height: 1.15;
color: var(--color-ink);
}
.galeria-pieza p {
margin: 0;
color: var(--color-ink-2);
font-size: var(--text-base);
}
@supports (animation-timeline: view()) {
html.con-movimiento {
/* La pista se alarga: ese alto de más es el recorrido que se convierte en
desplazamiento lateral. */
.galeria { min-height: 300dvh; }
.galeria-fija {
position: sticky;
top: 0;
height: 100dvh;
}
/* Ya no se arrastra a mano: lo mueve el scroll. */
.galeria-tira {
overflow-x: visible;
scroll-snap-type: none;
animation: desfilar 1s linear both;
animation-timeline: view();
animation-range: cover 12% cover 88%;
}
}
}
/* Dos piezas y media de recorrido: la última queda a la vista al final de la
pista, no pegada al canto. */
@keyframes desfilar {
from { transform: translateX(0); }
to { transform: translateX(calc(-2 * (min(78vw, 34rem) + var(--space-xl)))); }
}
@media (max-width: 40rem) {
.galeria-pieza { flex-basis: 86vw; padding: var(--space-lg); }
}
/* ===========================================================================
PANTALLAS: UNA IDEA, UNA PIEZA, UNA PANTALLA
Es el cambio de fondo que separa esto de un folleto. Antes había secciones
con tres ideas apiladas en texto; ahora cada idea tiene su pantalla, su
titular centrado y su pieza visual grande. En `apple.com/iphone-duo` no hay
ni una sola sección de puro texto: si algo merece contarse, merece una
imagen que lo enseñe.
El texto va centrado y CORTO (veinte caracteres de medida en el titular,
cincuenta en el apoyo). Centrar funciona aquí, y no en el hero, porque la
pieza que manda es la imagen: el texto sólo la presenta.
=========================================================================== */
.pantalla {
min-height: 100dvh;
display: grid;
align-content: center;
justify-items: center;
gap: var(--space-2xl);
/* Arriba menos que abajo, como ellos: 144 / 224 en pantalla grande. */
padding-block: var(--pad-seccion) var(--pad-seccion-final);
}
.pantalla-texto { display: grid; justify-items: center; }
.titulo-centro {
text-align: center;
/* `max-width: 75%` es la medida que usa Apple en
`.section-header-headline`. Con caracteres el titular se estrechaba de más
y salía en cuatro líneas. */
max-width: 75%;
margin-inline: auto;
font-size: var(--text-3xl);
}
.bajada-centro {
text-align: center;
max-width: 52ch;
margin-inline: auto;
color: var(--color-ink-2);
}
/* El titular centrado necesita que sus líneas también lo estén. */
.titulo-centro .linea-i { text-align: center; }
/* La cifra que hace de pieza visual donde no hay foto. Un cero de seis
centímetros dice «no se pierde ninguno» mejor que el párrafo que tiene
debajo, y es honesto: no es una métrica inventada, es el número que sale de
cómo está hecho el sistema. */
.cifra-gigante {
margin: 0 0 var(--space-md);
font-family: var(--font-mono);
font-weight: 500;
font-size: clamp(7rem, 26vw, 22rem);
line-height: 0.82;
letter-spacing: -0.05em;
color: var(--color-accent);
font-variant-numeric: tabular-nums;
}
/* La pieza de escenario: una imagen enorme, centrada, con aire alrededor. */
.figura-escenario {
width: min(100%, 78rem);
height: clamp(20rem, 64dvh, 44rem);
margin-inline: auto;
border: 0;
}
.pantalla > figure { width: 100%; padding-inline: var(--gutter); }
/* La imagen de cada pieza de la galería. */
.figura-pieza {
width: 100%;
height: clamp(11rem, 26dvh, 17rem);
border: 0;
margin-bottom: var(--space-lg);
}
@supports (animation-timeline: view()) {
html.con-movimiento {
/* Las piezas grandes entran creciendo un poco. Es el gesto que más se
asocia a las páginas de producto y aquí sólo lo llevan las imágenes
grandes, no cada tarjeta de la página. */
.figura-escenario :is(img, video),
.figura-panoramica :is(img, video) {
animation: crecer 1s var(--ease-out) both;
animation-timeline: view();
animation-range: entry 0% cover 45%;
}
/* Y la cifra gigante sube y aparece. */
.cifra-gigante {
opacity: 0;
animation: entrar-cifra 1s var(--ease-out) both;
animation-timeline: view();
animation-range: entry 10% cover 38%;
}
}
}
@keyframes crecer {
from { transform: scale(1.14); }
to { transform: scale(1); }
}
@keyframes entrar-cifra {
from { opacity: 0; transform: translateY(24px) scale(0.94); }
to { opacity: 1; transform: none; }
}
@media (max-width: 40rem) {
.pantalla { padding-block: var(--space-3xl); gap: var(--space-xl); }
.titulo-centro { max-width: 14ch; }
}
/* ===========================================================================
EL RITMO DE FONDOS
Apple alterna el color de fondo de una sección a la siguiente. Lo tiene
declarado así:
--global-section-background-color-alt: rgb(245,245,247)
--global-section-background-color-alt-dark: rgb(29,29,31)
y lo aplica con la clase `background-alt` sobre `.section`. No es un adorno:
es lo que separa una idea de la siguiente sin dibujar una línea. Una página
entera del mismo color se lee como un solo bloque largo, que es justo lo que
le pasaba a ésta.
Aquí los dos valores son los azules de la app de PC: el hondo y el de marca.
La alternancia va por posición, con `:nth-of-type`, para que no haya que
acordarse de poner una clase cada vez que se añade una sección.
=========================================================================== */
.pantalla:nth-of-type(even) { background: var(--color-paper-2); }
.pantalla:nth-of-type(odd) { background: var(--color-paper); }
/* Las secciones que ya traen fondo propio no entran en el reparto. */
.portada,
.galeria,
.cierre { background: var(--color-paper-2); }
.reloj { background: var(--color-paper); }
/* Un filete finísimo entre pantallas del mismo color, por si dos quedan
seguidas: sin él, el corte desaparece. */
.pantalla + .pantalla { border-top: var(--rule) solid var(--color-rule-2); }
/* --- El enlace que acompaña al titular -------------------------------------
En su página cada cabecera de sección lleva un enlace corto al lado
(`Watch the film ▸`). Da una salida a quien ya se convenció y no obliga a
bajar hasta el final. */
.titulo-con-accion {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-md) var(--space-xl);
width: 100%;
}
.accion-seccion {
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-accent-claro);
text-decoration: none;
white-space: nowrap;
border-bottom: var(--rule-2) solid transparent;
transition: border-color var(--dur-micro) var(--ease-out);
}
.accion-seccion:hover,
.accion-seccion:focus-visible { border-bottom-color: var(--color-accent-claro); }
/* ===========================================================================
LA PANTALLA CLARA
Apple alterna blanco y gris claro entre secciones, y sus fotos de producto
viven sobre ese fondo: el objeto va recortado, sin escenario y sin sombra,
así que el blanco de la foto se funde con el blanco de la página y parece
que el aparato flota en la hoja.
Poner esa misma foto sobre el marino dejaría un rectángulo blanco pegado en
medio. Por eso la sección que enseña producto cambia de papel: el azul
clarísimo de la app de PC, que ya es de la marca.
=========================================================================== */
.pantalla.pantalla-clara {
background: var(--color-papel-claro);
color: var(--color-tinta-clara);
}
.pantalla-clara .titulo { color: var(--color-tinta-clara); }
.pantalla-clara .bajada { color: color-mix(in oklab, var(--color-tinta-clara) 78%, transparent); }
.pantalla-clara .figura { background: transparent; border: 0; }
/* En papel claro el acento oscurece, porque el oro claro sobre casi blanco no
se lee: 1,6:1. El oro normal sobre este azul tenue da 2,4:1, tampoco. Se usa
el propio azul de marca, que da 12:1. */
.pantalla-clara .paso-n,
.pantalla-clara .cifra-gigante { color: var(--color-tinta-clara); }
/* La pieza de producto: enorme, sin caja, sin borde, sin sombra. */
.figura-producto {
width: min(100%, 86rem);
height: clamp(18rem, 58dvh, 40rem);
margin-inline: auto;
border: 0;
background: transparent;
}
.figura-producto > img { object-fit: contain; }
/* El blanco de la foto de producto se funde con el papel de la sección.
`multiply` deja pasar el fondo allí donde la foto es blanca, así que el
aparato queda flotando sin el rectángulo que delata el recorte. Es el truco
de siempre para fotos de producto sobre fondo claro, y evita tener que pedir
PNG con transparencia. Sólo vale sobre papel claro: sobre el marino
oscurecería la foto entera. */
.pantalla-clara .figura-producto > img { mix-blend-mode: multiply; }
/* ===========================================================================
EL SISTEMA DE LA REFERENCIA, APLICADO
Todo lo de este bloque sale de `ESTUDIO_APPLE_IPHONE_DUO.md`: valores
medidos en la página descargada, no aproximados. Va al final de la hoja
para ganar a lo anterior donde se solapan.
=========================================================================== */
/* --- Tipografía: caja baja, peso 600, espaciado negativo en lo grande -------
Las mayúsculas venían de HYROX. La referencia no usa ni una; el peso de
todos sus titulares es 600 y el del cuerpo 400. Es el cambio de un solo
golpe que más acerca la página. */
h1.titular,
.titulo,
.titulo-seccion,
.ficha-titular,
.tarjeta-titular,
.losa-titular {
text-transform: none;
font-weight: var(--peso-titular);
font-style: normal;
}
h1.titular {
font-size: var(--ap-titular-portada);
line-height: 1.062;
letter-spacing: -0.009em;
}
.titulo-seccion {
margin: 0;
font-family: var(--font-display);
font-size: var(--ap-titular-seccion);
line-height: 1.083;
letter-spacing: -0.003em;
color: var(--color-ink);
max-width: 75%;
overflow-wrap: anywhere;
min-width: 0;
}
body { font-size: var(--ap-cuerpo); line-height: 1.47; letter-spacing: -0.022em; }
.bajada, .entradilla, .reloj-texto { font-size: var(--ap-cuerpo); }
.rotulo {
font-size: var(--ap-antetitulo); line-height: 1; letter-spacing: 0.011em;
text-transform: none; font-weight: 600;
}
/* --- La barra local del producto ------------------------------------------
La segunda barra de la referencia: nombre del producto a la izquierda, dos
acciones a la derecha, y es la que se queda pegada al bajar. La global va
translúcida con desenfoque (rgba(232,232,237,.4) en su caso; aquí el marino
al 72 %). */
.logo { height: 24px; }
/* La pista del corredor cuelga justo por debajo de la barra. */
.avance { top: var(--alto-barra); }
/* --- Secciones: una idea por pantalla, con fondos alternos de verdad --------
Aquí «clara» es una sección clara de verdad (el azul tenue de la app de PC),
no un azul un poco menos oscuro. La referencia alterna blanco y gris claro;
nosotros marino y azul tenue. Sin regla entre secciones: el corte lo hace el
color. */
.seccion {
min-height: 0;
display: block;
padding-block: var(--pad-seccion) var(--pad-seccion-final);
background: var(--color-paper);
border: 0;
}
.seccion.clara {
background: var(--color-papel-claro);
color: var(--color-tinta-clara);
}
.seccion.clara .titulo-seccion { color: var(--color-tinta-clara); }
/* La cabecera de esta sección no va arriba y a lo ancho, sino en la columna
de la mesa: por la franja de arriba pasa el render, que sube -46 % hasta la
sección anterior, y con los corredores dentro el titular quedaba encima de
cuerpos oscuros —tinta marina sobre marrón— y no se leía. */
.seccion.clara .bajada { color: color-mix(in oklab, var(--color-tinta-clara) 78%, transparent); }
.seccion.clara .figura { background: transparent; border: 0; }
.seccion.clara .accion-seccion { color: var(--color-tinta-clara); }
.seccion.clara .figura.hueco {
background-color: color-mix(in oklab, var(--color-tinta-clara) 6%, transparent);
background-image: none;
border: var(--rule) dashed color-mix(in oklab, var(--color-tinta-clara) 30%, transparent);
}
.seccion.clara .figura.hueco span { color: color-mix(in oklab, var(--color-tinta-clara) 70%, transparent); }
.seccion.clara .figura.hueco img { display: none; }
.cabecera-seccion {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
gap: var(--space-md) var(--space-xl);
margin-bottom: var(--space-2xl);
}
.cabecera-centro { flex-direction: column; align-items: center; text-align: center; }
.cabecera-centro .titulo-seccion { max-width: 100%; text-align: center; }
.cabecera-centro .titulo-seccion .linea-i { text-align: center; }
.cabecera-centro .bajada { max-width: 52ch; text-align: center; margin: 0; }
.accion-seccion { text-transform: none; letter-spacing: -0.022em; font-size: var(--ap-cuerpo); font-weight: 400; }
/* --- Las tarjetas de destacados (MediaCardGallery) --------------------------
Tarjetas casi de ancho completo que se desplazan de lado con anclaje; la
siguiente asoma por la derecha para que se vea que hay más. Titular a 28 px
arriba centrado, la pieza debajo. Sin JavaScript se desplazan igual con el
dedo o la rueda; el script sólo pinta los puntos y las flechas. */
.tarjetas { position: relative; }
.tarjetas-pista {
list-style: none; margin: 0;
padding-inline: var(--sangria, var(--gutter));
display: flex; gap: var(--space-lg);
overflow-x: auto; scroll-snap-type: x mandatory;
scroll-padding-inline: var(--sangria, var(--gutter));
scrollbar-width: none; overscroll-behavior-x: contain;
}
.tarjetas-pista::-webkit-scrollbar { display: none; }
.tarjeta {
flex: 0 0 min(88vw, var(--ancho));
scroll-snap-align: start;
display: grid; grid-template-rows: auto minmax(0, 1fr);
justify-items: center; gap: var(--space-lg);
min-height: clamp(20rem, 66dvh, 44rem);
padding: var(--space-xl) var(--space-lg) var(--space-lg);
background: color-mix(in srgb, #fff 55%, var(--color-papel-claro));
}
.tarjeta-titular {
margin: 0; text-align: center;
font-family: var(--font-display); font-size: var(--ap-tarjeta); line-height: 1.142; letter-spacing: 0.007em;
color: var(--color-tinta-clara); max-width: 24ch;
}
.tarjeta .fig { width: 100%; height: 100%; margin: 0; }
.figura-tarjeta { width: 100%; height: 100%; min-height: 14rem; border: 0; background: transparent; }
.figura-tarjeta :is(img, video) { object-fit: cover; }
.figura-tarjeta-fundida :is(img, video) { object-fit: contain; mix-blend-mode: multiply; }
/* La tarjeta que es una frase: el texto es la pieza. */
.tarjeta-frase { background: var(--color-paper); align-content: center; }
.tarjeta-frase .tarjeta-titular {
color: var(--color-ink); font-size: var(--ap-titular-seccion);
line-height: 1.083; letter-spacing: -0.003em; max-width: 16ch;
}
.tarjeta-frase-texto { margin: 0; max-width: 40ch; text-align: center; color: var(--color-ink-2); }
/* El gráfico del anillo de centésimas: la pieza no fotográfica de la galería. */
.tarjeta-grafico { display: grid; place-items: center; position: relative; width: 100%; }
.anillo {
display: block; width: clamp(9rem, 26dvh, 15rem); aspect-ratio: 1;
border-radius: 50%;
border: 1.1rem solid color-mix(in oklab, var(--color-accent) 22%, transparent);
position: relative;
}
.anillo > i {
position: absolute; inset: -1.1rem; border-radius: 50%;
border: 1.1rem solid var(--color-accent);
border-right-color: transparent; border-bottom-color: transparent;
transform: rotate(-45deg);
}
.anillo-cifra {
position: absolute; font-family: var(--font-mono); font-size: var(--ap-titular-seccion);
color: var(--color-tinta-clara);
}
.tarjetas-control {
display: flex; align-items: center; justify-content: center; gap: var(--space-md);
margin-top: var(--space-lg);
}
.tarjetas-puntos {
list-style: none; margin: 0; padding: 0.4rem 0.8rem; display: flex; gap: 0.5rem;
background: color-mix(in oklab, var(--color-tinta-clara) 10%, transparent); border-radius: 999px;
}
.tarjetas-puntos li {
width: 0.5rem; height: 0.5rem; border-radius: 999px;
background: color-mix(in oklab, var(--color-tinta-clara) 32%, transparent);
transition: width 250ms cubic-bezier(0,0,0.5,1), background-color 250ms cubic-bezier(0,0,0.5,1);
}
.tarjetas-puntos li.activo { width: 1.5rem; background: var(--color-tinta-clara); }
.tarjetas-flecha {
width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0;
background: color-mix(in oklab, var(--color-tinta-clara) 10%, transparent); color: var(--color-tinta-clara);
font-size: 1.4rem; line-height: 1; cursor: pointer;
transition: background-color 200ms cubic-bezier(0,0,0.5,1);
}
.tarjetas-flecha:hover { background: color-mix(in oklab, var(--color-tinta-clara) 18%, transparent); }
/* --- El objeto en sus estados (ProductViewerGallery) ----------------------- */
.estados {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-lg);
}
.figura-estado { aspect-ratio: 1.89; border: 0; }
.estados .fig figcaption {
text-align: center; font-size: var(--ap-cuerpo-menor);
color: color-mix(in oklab, var(--color-tinta-clara) 70%, transparent);
}
/* --- La panorámica con el titular encima ----------------------------------- */
.panoramica { position: relative; }
.panoramica .figura-panoramica { position: relative; height: clamp(24rem, 92dvh, 56rem); }
.panoramica .figura-panoramica::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--color-paper) 88%, transparent) 100%);
}
.panoramica-texto { position: absolute; inset-inline: 0; bottom: var(--space-2xl); z-index: var(--z-raised); }
.titulo-sobre-foto { color: var(--color-ink); }
.bajada-sobre-foto { margin: var(--space-sm) 0 0; color: var(--color-ink-2); max-width: 52ch; }
/* --- Las fichas verticales (CaptionTileGallery) ----------------------------
Proporción 744×904 como las suyas; fondo OSCURO sobre sección clara. El
pie va debajo, fuera de la ficha, en 14 px. */
.fichas {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-lg);
}
.ficha { display: grid; gap: var(--space-md); align-content: start; }
.ficha-cuerpo {
aspect-ratio: 744 / 904; background: var(--color-paper); color: var(--color-ink);
display: grid; align-content: end; gap: var(--space-sm); padding: var(--space-xl);
}
.ficha-cifra {
margin: 0; font-family: var(--font-mono); font-weight: 500;
font-size: clamp(6rem, 12vw, 10rem); line-height: 0.85; letter-spacing: -0.05em; color: var(--color-accent);
}
.ficha-titular {
margin: 0; font-family: var(--font-display); font-size: var(--ap-tarjeta);
line-height: 1.142; letter-spacing: 0.007em;
}
.ficha-pie {
margin: 0; font-size: var(--ap-cuerpo-menor); line-height: 1.428; letter-spacing: -0.016em;
color: color-mix(in oklab, var(--color-tinta-clara) 78%, transparent);
}
.figura-ficha { aspect-ratio: 744 / 904; border: 0; }
/* --- Las losas de tipos de salida ------------------------------------------ */
.losas {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-lg);
}
.losa {
background: var(--color-paper-2); padding: var(--space-xl);
display: grid; align-content: end; gap: var(--space-sm); min-height: 16rem;
}
.losa-titular {
margin: 0; font-family: var(--font-display); font-size: var(--ap-tarjeta);
line-height: 1.142; letter-spacing: 0.007em; color: var(--color-accent-claro);
}
.losa p { margin: 0; color: var(--color-ink-2); }
/* --- El fundido escalonado (StaggeredFadeIn) --------------------------------
Como lo tiene programado la referencia: cada pieza arranca en opacidad 0 y
se enciende en 0,45 s con 0,15 s entre una y la siguiente. Se dispara al
entrar la LISTA, no cada pieza, para que el escalonado se vea. La clase
`encendido` la pone `portada.js` con un IntersectionObserver. */
/* El escalonado tiene DOS caminos, y antes sólo estaba escrito el segundo:
· Con líneas de tiempo de scroll (Chrome, Edge): lo lleva el CSS, igual que
los `.reveal`. Sin opacidad de base y con `forwards`, para que un elemento
cuya línea no avance se quede visible en vez de desaparecer.
· Sin ellas: lo lleva `portada.js` con su IntersectionObserver y su clase
`encendido`, y ahí sí hace falta la opacidad de base.
El fallo estaba en que la opacidad 0 se aplicaba SIEMPRE, pero la clase
`encendido` sólo llega por JS — y el JS se retira en cuanto detecta soporte
nativo. Resultado: las listas se quedaban invisibles justo en los
navegadores que mejor soportan todo lo demás. */
@supports (animation-timeline: view()) {
html.con-movimiento [data-staggered] {
animation: fade-in 0.45s cubic-bezier(0, 0, 0.5, 1) forwards;
animation-delay: calc(var(--i, 0) * 0.15s);
animation-timeline: view();
animation-range: entry 5% cover 20%;
}
}
html.con-movimiento.sin-linea-de-scroll [data-staggered] { opacity: 0; animation: none; }
html.con-movimiento.sin-linea-de-scroll .encendido [data-staggered] {
animation: fade-in 0.45s cubic-bezier(0, 0, 0.5, 1) both;
animation-delay: calc(var(--i, 0) * 0.15s);
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
@media (max-width: 40rem) {
.cabecera-enlace { display: none; }
.titulo-seccion { max-width: 100%; }
.tarjeta { flex-basis: 92vw; min-height: 0; }
.tarjetas-flecha { display: none; }
}
/* ===========================================================================
SEGUNDA CAPA DEL SISTEMA DE LA REFERENCIA: lo visual que no son fotos
Medido en su CSS: tarjetas y medios con esquinas de 28 px, botones en
píldora (980 px), botones «+» circulares que abren un detalle, acordeón de
preguntas, notas al pie. Y los clips de un solo gesto, aquí dibujados.
=========================================================================== */
/* --- Esquinas y píldoras ------------------------------------------------- */
:root { --radio-tarjeta: 28px; --radio-pildora: 980px; }
.tarjeta, .ficha-cuerpo, .losa, .figura-estado, .figura-ficha, .figura-producto, .figura-tarjeta,
.clip, .pregunta {
border-radius: var(--radio-tarjeta);
overflow: hidden;
}
.figura-tarjeta { border-radius: calc(var(--radio-tarjeta) - 8px); }
.boton, .cabecera-boton {
border-radius: var(--radio-pildora);
letter-spacing: -0.022em; text-transform: none; font-size: var(--ap-cuerpo); font-weight: 400;
}
.boton { padding: 0.7em 1.4em; min-height: 0; border-width: 1px; }
.cabecera-boton { font-size: var(--ap-cuerpo-menor); padding: 0.4em 1em; }
/* Los enlaces de acción llevan el chevrón de la casa. */
.accion-seccion::after, .cabecera-enlace::after { content: " \203A"; }
.accion-seccion { border: 0; }
/* --- El botón «+» y el detalle -------------------------------------------
En la referencia cada ficha lleva un círculo con «+» abajo a la derecha que
abre una ventana con la explicación larga. Aquí es un `