/* ============================================================================
CANDY · LA PORTADA
Hereda `tokens.css` ENTERO. Ni un hexadecimal aquí: si hiciera falta un color
que no está en los tokens, faltaría una decisión, no un color.
Qué se trae de la portada de Hilo, que es lo que Kike pidió:
· el ritmo — secciones altas, medida de lectura de 672 px, un solo salto de
gutter (20 → 32 px);
· la escala tipográfica con TRACKING NEGATIVO PROPORCIONAL: cuanto más
grande el titular, más apretado (-0.021em por defecto → -0.04em a 72 px);
· los pasos numerados con su hilo vertical al lado;
· «Lo que no es» como sección de peso, no como letra pequeña;
· el aparecer al entrar en pantalla, corto y una sola vez.
Qué NO se trae, y por qué:
· Hilo es CLARO y CANDY es OSCURO. Hilo puede permitirse blanco puro sobre
gris casi blanco; aquí los mismos saltos de luminosidad se comen entre
ellos. Las superficies van de --sup-0 a --sup-3 y el contraste lo pone la
LÍNEA, no el relleno.
· el acento de Hilo pinta seis cosas; el de CANDY pinta MENOS. `--marca` es
lo que TÚ accionas y nada más: no toca ni un dato, ni una cifra, ni un
estado. La regla está escrita en `tokens.css` y aquí se respeta.
· el degradado sobre el titular. En oscuro, un degradado recortado sobre
texto se come el contraste por un extremo y no hay forma de medirlo con
`contraste.py`. El titular va en `--txt-1` y punto.
========================================================================= */
.p-cuerpo {
margin: 0;
background: var(--sup-0);
color: var(--txt-2);
font: 400 17px/1.65 var(--tipo, ui-sans-serif, system-ui, -apple-system,
"Segoe UI", Roboto, sans-serif);
-webkit-font-smoothing: antialiased;
}
/* EL LATERAL, EN UNA VARIABLE, y no por elegancia: con `border-box` puesto, un
`max-width` incluye el padding, así que la columna de TEXTO es el ancho menos
los dos lados. Escribir 1.152 y obtener 1.088 de texto es la forma de que un
titular calculado para caber en dos líneas salga en tres — pasó aquí mismo al
poner el reset. Declarándolo así, el número grande sigue siendo la medida de
lectura de verdad. */
.p-ancho { --lado: 20px;
max-width: calc(1152px + 2 * var(--lado));
margin: 0 auto; padding: 0 var(--lado); }
/* LA MEDIDA DE LECTURA, y no es decoración: 672 px es donde una línea deja de
obligar a mover la cabeza. Todo el cuerpo de texto de la página cabe aquí. */
.p-lee { max-width: 672px; }
.p-centro { max-width: calc(768px + 2 * var(--lado, 20px));
margin: 0 auto; text-align: center; }
@media (min-width: 768px) { .p-ancho { --lado: 32px; } }
/* EL RESET QUE ESTA PÁGINA NO TENÍA. `candy.css` trae el
`*{box-sizing:border-box}` de la aplicación, y la portada NO carga
`candy.css`: aquí cada `max-width` medía en realidad su valor MÁS el padding
(`.p-ancho` daba 1.192 px, no 1.152). No rompía nada a la vista, pero la hoja
está escrita como si border-box estuviera puesto — y es una trampa cruzada:
el día que alguien enlace `candy.css` para reutilizar `.etq`, TODOS los
anchos encogen de golpe y nadie sabrá por qué. */
.p-cuerpo, .p-cuerpo *, .p-cuerpo *::before, .p-cuerpo *::after {
box-sizing: border-box;
}
/* ---- tipografía: el tracking se aprieta con el tamaño ------------------- */
.p-h1 {
margin: 28px 0 0;
/* EL SUELO ERA 40 px Y NO CABE. A 375 px quedan 335 de ancho y «en el
botón, antes de pulsarlo.» necesita unos 446: el titular salía a tres
líneas con «pulsarlo.» sola en la tercera. El `
` está bien en pantalla
ancha —parte la frase por su articulación— y estorba en el móvil. */
font-size: clamp(2.25rem, 7vw, 4rem);
line-height: 1.03;
letter-spacing: -0.04em;
font-weight: 600;
color: var(--txt-1);
text-wrap: balance;
}
@media (max-width: 767px) { .p-h1 br { display: none; } }
.p-h2 {
margin: 12px 0 0;
font-size: clamp(1.6rem, 3.4vw, 2.25rem);
line-height: 1.15;
letter-spacing: -0.032em;
font-weight: 600;
color: var(--txt-1);
}
.p-h3 {
margin: 0;
font-size: 1.0625rem;
letter-spacing: -0.015em;
font-weight: 600;
color: var(--txt-1);
}
.p-entradilla { margin: 24px 0 0; font-size: 1.1875rem; line-height: 1.6; }
.p-p { margin: 16px 0 0; }
.p-antetitulo {
margin: 0;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--txt-3);
}
.p-num {
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.08em;
font-variant-numeric: tabular-nums;
color: var(--marca);
}
.p-menor { font-size: 0.9375rem; color: var(--txt-3); }
/* ---- secciones ---------------------------------------------------------- */
.p-seccion { padding: 80px 0; border-top: 1px solid var(--linea-1); }
.p-seccion--alta{ padding: 96px 0; }
.p-seccion--fondo { background: var(--sup-1); }
@media (min-width: 768px) {
.p-seccion { padding: 112px 0; }
.p-seccion--alta { padding: 128px 0; }
}
/* ---- la cabecera -------------------------------------------------------- */
.p-cab {
position: sticky; top: 0; z-index: 40;
display: flex; align-items: center; justify-content: space-between;
height: 64px;
border-bottom: 1px solid var(--linea-1);
background: color-mix(in srgb, var(--sup-0) 82%, transparent);
backdrop-filter: blur(12px);
}
.p-marca {
display: inline-flex; align-items: center; gap: 10px;
font-weight: 600; letter-spacing: -0.02em; color: var(--txt-1);
}
.p-vela { width: 14px; height: 20px; border-radius: 3px; background: var(--marca); }
/* ---- botones ------------------------------------------------------------ */
.p-btn {
display: inline-flex; align-items: center; gap: 8px;
height: 48px; padding: 0 24px;
border: 1px solid var(--linea-2); border-radius: 12px;
background: var(--sup-2); color: var(--txt-1);
font: inherit; font-size: 0.9375rem; font-weight: 500;
text-decoration: none; cursor: pointer;
transition: border-color .15s, background .15s, transform .15s;
}
.p-btn:hover { border-color: var(--linea-3); background: var(--sup-3); }
/* TEXTO OSCURO SOBRE EL ACENTO. El blanco sobre `--marca` da 4,01:1 y no llega
al 4,5 de la AA; `--sup-0` encima da 4,84:1. Es el mismo arreglo que se hizo
en `candy.css`, y salió de medir esta página. */
.p-btn--marca {
background: var(--marca); border-color: transparent; color: var(--sup-0);
box-shadow: var(--brillo-acento);
}
.p-btn--marca:hover { background: var(--marca); transform: translateY(-1px); }
.p-btn:focus-visible { outline: none; box-shadow: var(--foco); }
/* El de la cabecera iba con `height:38px` en línea. 38 px queda por debajo del
mínimo táctil de 44, y es el único botón de conversión de la página. */
.p-btn--cab { height: 44px; padding: 0 16px; font-size: 0.875rem; }
@media (min-width: 768px) { .p-btn--cab { height: 38px; } }
/* El «Entrar» de la cabecera: un enlace, no un botón. Compite con «Pedir
acceso», que es lo que la página quiere que pase; darle el mismo peso visual
a los dos deja al que llega sin saber cuál es cuál. */
.p-enlace {
color: var(--txt-2); text-decoration: none; font-size: 0.9375rem;
border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.p-enlace:hover { color: var(--txt-1); border-bottom-color: var(--linea-3); }
.p-enlace:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 3px; }
/* ---- la cinta de pasos, con su hilo ------------------------------------- */
.p-pasos { position: relative; display: grid; gap: 88px; }
@media (min-width: 1024px) {
.p-pasos { padding-left: 72px; }
/* EL NÚMERO SOBRE EL HILO. Iba en flujo normal, 56 px a la derecha de la
línea: una raya decorativa que no tocaba nada de lo que decía unir. Con el
fondo detrás, además, interrumpe el hilo como un nudo. */
.p-pasos > * { position: relative; }
.p-pasos .p-num {
position: absolute; left: -72px; width: 32px; text-align: center;
background: var(--sup-0); padding: 6px 0;
}
.p-pasos .p-h2 { margin-top: 0; }
/* EL HILO. Es de Hilo, literalmente, y aquí significa otra cosa: la secuencia
de lo que pasa desde que dibujas el stop hasta que puedes explicarlo. */
.p-pasos::before {
/* LOS TOPES VAN EN PÍXELES, NO EN PORCENTAJE. Con `8%` sobre un
contenedor de 4.189 px el desvanecido medía 335 px — más que el paso 01
entero (310), así que el hilo no existía justo donde empieza la
secuencia. Y peor: el porcentaje acopla cosas sin relación, porque
alargar el paso 04 apagaba el hilo al lado del paso 01. */
content: ""; position: absolute; left: 16px; top: 8px; bottom: 8px;
width: 1px; background: linear-gradient(to bottom,
transparent 0, var(--linea-2) 48px,
var(--linea-2) calc(100% - 48px), transparent 100%);
}
}
/* ---- tarjetas y maquetas ------------------------------------------------ */
.p-caja {
border: 1px solid var(--linea-2); border-radius: var(--r-flota);
background: var(--sup-1); padding: 20px;
}
.p-maqueta {
border: var(--borde, 1px) solid var(--linea-2); border-radius: var(--r-flota);
/* EL MARCO, DECLARADO. Con `border-box` puesto, un `max-width` en línea sobre
una maqueta pasa a incluir el relleno y el borde: los tres que hay en la
página (420, 560 y 460) perdieron 38 px de contenido cada uno sin que nadie
tocara ese número. Derivándolo aquí, el valor de fuera vuelve a ser el ancho
del contenido y no hay que acordarse de sumar nada a mano. */
--relleno: 18px; --borde: 1px;
--marco: calc(2 * (var(--relleno) + var(--borde)));
background: var(--sup-1); padding: var(--relleno);
/* `--sombra-flota` sobre `#0b0d12` da 1,04:1 en su punto más oscuro: ocho
capas de composición a cambio de nada. En oscuro la elevación la da la
línea, como dice la cabecera de esta hoja y luego no aplicaba. */
box-shadow: inset 0 1px 0 var(--linea-2);
}
/* LA ETIQUETA DE EJEMPLO VA DENTRO DE LA IMAGEN Y CON EL CUERPO DE LETRA DEL
TEXTO DE ALREDEDOR, nunca en un pie ni en gris pequeño. Es lo que dice la
revisión de cumplimiento y es lo que la hace valer. */
.p-ejemplo {
margin: 14px 0 0; font-size: 0.9375rem; color: var(--txt-3);
}
.p-rejilla { display: grid; gap: 12px; }
@media (min-width: 700px) { .p-rejilla--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .p-rejilla--2 { grid-template-columns: repeat(2, 1fr); } }
/* ---- «lo que no es» ----------------------------------------------------- */
/* A DOS COLUMNAS, y no por adorno: sin `max-width` esta lista corría a 1.056 px
de ancho, o sea 130-140 caracteres por línea. Es la única parte de la página
que se saltaba la medida de lectura que el resto de la hoja defiende — y
precisamente la que tiene que leerse entera. */
.p-nolista { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 0;
/* A UNA COLUMNA TAMBIÉN HAY QUE ACOTARLA. El tope de 1.088 px solo mordía a
partir de 1.216 px de ventana, y para entonces las dos columnas ya habían
partido la línea: en toda la banda de 768 a 1023 px la lista iba a UNA
columna y a todo el ancho de la sección — 927 px de texto, que es 1,4 veces
la medida de lectura que el resto de la página defiende. El 704 deja ~672
de texto, descontando la columna del ✕ y su hueco. */
max-width: 704px; }
@media (min-width: 1024px) {
.p-nolista { max-width: 1088px;
grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
.p-nolista li {
display: grid; grid-template-columns: 20px 1fr; gap: 12px;
padding: 14px 0; border-bottom: 1px solid var(--linea-1);
}
.p-nolista b { color: var(--txt-1); font-weight: 600; }
/* `--txt-4` da 3,32:1 y `tokens.css` lo reserva para «apagado», prohibiéndolo
para cifras. Aquí no es decoración: es el marcador que dice que la fila es una
negación. Sube a `--txt-3` (6,44:1). */
.p-no { color: var(--txt-3); }
/* ---- el aparecer, corto y una vez --------------------------------------- */
/* AL REVÉS DE COMO SE ESCRIBE NORMALMENTE, y por una razón:
**lo que esconde el contenido lo pone el guion, no la hoja.**
Escrito de la forma habitual —`.p-entra { opacity: 0 }` en el CSS y una clase
que lo enciende— el adorno decide si la página se ve. Y entonces cualquier
cosa que impida al observador disparar deja la página EN BLANCO: un
navegador sin `IntersectionObserver`, un guion que no llega, una pestaña que
no llega a pintarse. Lo vi aquí mismo: con el panel del navegador oculto, el
observador no dispara y solo se veían dos bloques de doce.
Así, sin guion no hay nada escondido. `.js-anima` la pone un `