/* ============================================================================
DRY ICE — Sistema de diseño
«Oro que no grita.»
Fuente de verdad: docs/BRAND_BRIEF_DRYICE.md §6.
Si algo aquí contradice al brief, gana el brief.
Las tres reglas que no se tocan:
1. El turquesa (--ice) ocupa como máximo ~5% de la superficie: CTA, precio
y una palabra por titular. Si está en todas partes deja de significar
"esto es lo que compras".
2. El gris frío (--prueba-txt) NUNCA vende. Es el color del dato: material,
micras, resultados de test. Se demuestra, no se ofrece. Si la prueba
brillara igual que el CTA, competirían y no se leería ninguna.
3. Nunca #000 ni #FFF puros. El negro es azulado, el blanco está roto.
4. NO hay dorado en la interfaz. El único oro de la página son las joyas
de las fotos. Un acento dorado competiría con el producto.
========================================================================== */
/* ── Tipografía ─────────────────────────────────────────────────────────────
Todo desde Google Fonts: una sola dependencia externa, y la misma que ya está
en preconnect. Simplifica la futura CSP.
Display: ARCHIVO Variable. El brief pedía Mona Sans "en eje Wide" — pero la
build de Mona Sans que hay en CDN solo trae el eje de peso, no el de anchura,
así que el `font-stretch` no haría nada y se perdería justo el carácter que
buscábamos. Archivo sí expone wdth 62%-125% y cumple la intención del brief:
grotesca ancha y pesada que lee como etiqueta de ropa.
Cuerpo y datos: Geist / Geist Mono.
Las fuentes se cargan con en el de cada pagina, NO con
@import aqui: un @import encadena HTML -> CSS -> CSS de fuentes -> fuente
y costaba ~2 s de primer pintado. */
/* ============================================================================
1. TOKENS
========================================================================== */
:root {
/* ── Color: base fría ──────────────────────────────────────────────────── */
--base: #0B0C0E; /* fondo global. Negro azulado, nunca #000 */
--profundo: #060708; /* hero, zonas de vídeo, footer */
--superficie: #131519; /* cards, acordeón, modales */
--superficie-alta: #1B1E24; /* hover de card, chips, tabla técnica */
--borde: #262A31; /* bordes 1px, separadores */
--borde-fuerte: #343A44;
/* ── Color: texto ──────────────────────────────────────────────────────── */
--tinta: #EDF1F5; /* blanco frío roto. Nunca #FFF */
--tinta-suave: #8B939E; /* specs, metadatos, subtítulos */
--tinta-tenue: #5A616B; /* deshabilitado, notas al pie */
/* ── Color: ICE — la acción y el dinero ────────────────────────────────
Turquesa. Acento único de la interfaz: CTA, precio y una palabra por
titular.
Por qué turquesa y no oro: el producto YA es dorado. Un acento dorado en
la interfaz competía con las propias joyas y le robaba el sitio al oro que
de verdad importa. Con el turquesa, el único oro de la página son las
piezas — que es justo donde debe ir el ojo. Y encaja con el nombre: hielo
seco, frío, vaho. */
--ice: #45D3C6; /* CTA, precio, palabra destacada. ~10,9:1 AAA */
--ice-claro: #7BE8DE; /* hover, glow, focus ring */
--ice-apagado: #2A7D76; /* bordes activos, iconos. NUNCA texto */
--ice-fondo: rgba(69, 211, 198, .10);
/* ── Color: PRUEBA — el dato ───────────────────────────────────────────
Gris azulado frío, deliberadamente apagado. El bloque de material, las
micras y los tests no se venden: se demuestran. La monoespaciada hace el
trabajo y el color solo acompaña. Si la prueba brillara igual que el CTA,
competirían y no se leería ninguna de las dos. */
--prueba-txt: #A9BECB; /* ~9,8:1 AAA */
--prueba-borde: #3A4A55;
--prueba-fondo: rgba(169, 190, 203, .06);
/* ── Color: estado ─────────────────────────────────────────────────────── */
--error: #E24B4B;
--exito: #5FC98A;
/* ── Tipografía ────────────────────────────────────────────────────────── */
--display: 'Archivo', 'Helvetica Neue', system-ui, sans-serif;
--cuerpo: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mono: 'Geist Mono', 'SFMono-Regular', Consolas, monospace;
/* Escala fluida. clamp() para no tener que declarar breakpoints por tamaño. */
--t-xs: 0.75rem;
--t-sm: 0.875rem;
--t-base: 1rem;
--t-lg: 1.125rem;
--t-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
--t-2xl: clamp(1.6rem, 1.3rem + 1.5vw, 2.25rem);
--t-3xl: clamp(2.1rem, 1.6rem + 2.6vw, 3.25rem);
--t-4xl: clamp(2.8rem, 1.9rem + 4.4vw, 5rem);
--t-hero: clamp(3.8rem, 2rem + 8.6vw, 9rem); /* solo lo usa .hero__titulo */
/* line-height mínimo 1.05 en display: por debajo, la display ancha recorta
ascendentes en mayúsculas. Regla heredada de _WORKFLOW.md. */
--lh-display: 1.04;
--lh-titulo: 1.14;
--lh-cuerpo: 1.62;
/* ── Espaciado y forma ─────────────────────────────────────────────────── */
--e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem;
--e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem;
--e-9: 6rem; --e-10: 8rem;
--r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-full: 999px;
--ancho: 1220px;
--ancho-texto: 62ch;
--borde-pagina: clamp(1rem, 5vw, 3rem);
/* ── Movimiento ────────────────────────────────────────────────────────── */
--rapido: 160ms cubic-bezier(.4, 0, .2, 1);
--medio: 320ms cubic-bezier(.4, 0, .2, 1);
--lento: 620ms cubic-bezier(.16, 1, .3, 1);
}
/* ============================================================================
2. RESET Y BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--base);
color: var(--tinta);
font-family: var(--cuerpo);
font-size: var(--t-base);
line-height: var(--lh-cuerpo);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
/* El foco se ve siempre. Accesibilidad no negociable. */
:focus-visible {
outline: 2px solid var(--ice-claro);
outline-offset: 3px;
border-radius: var(--r-sm);
}
::selection { background: var(--ice); color: var(--base); }
/* ── Tipografía base ───────────────────────────────────────────────────────*/
h1, h2, h3 {
font-family: var(--display);
font-weight: 800;
font-stretch: 115%; /* eje wdth de Archivo: ancho, no estrecho */
text-transform: uppercase;
letter-spacing: -0.02em;
line-height: var(--lh-display);
margin: 0 0 var(--e-4);
text-wrap: balance;
}
h1 { font-size: var(--t-4xl); font-weight: 900; }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); letter-spacing: -0.01em; }
p { margin: 0 0 var(--e-4); max-width: var(--ancho-texto); }
/* Números tabulares en TODO lo que sea un dato o un precio. */
.dato, .precio, table, .specs { font-variant-numeric: tabular-nums; }
/* ============================================================================
3. UTILIDADES DE MARCA
========================================================================== */
/* La palabra en oro dentro de un titular. Máximo UNA por titular. */
.acento { color: var(--ice); }
/* El dato frío. Mono + cian: parece un informe porque queremos que lo parezca. */
.prueba {
font-family: var(--mono);
font-size: var(--t-sm);
color: var(--prueba-txt);
letter-spacing: 0.01em;
}
.silencio { color: var(--tinta-suave); }
/* Texto SOLO para lectores de pantalla.
No se usa display:none ni visibility:hidden: eso lo esconderia tambien del
lector, que es justo a quien va dirigido. Se saca de flujo, se recorta a
1x1 px y se deja en una linea para que ningun navegador lo mida como una
columna de una letra.
La usa la cinta: su pista repite el mismo texto ocho veces y va
aria-hidden, asi que el mensaje de verdad se dice aqui una sola vez. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.contenedor {
width: 100%;
max-width: var(--ancho);
margin-inline: auto;
padding-inline: var(--borde-pagina);
}
.seccion { padding-block: clamp(var(--e-8), 10vw, var(--e-10)); }
.seccion--profunda { background: var(--profundo); }
/* Etiqueta de sección: mono, pequeña, con un filete de oro delante. */
.etiqueta {
display: inline-flex;
align-items: center;
gap: var(--e-3);
font-family: var(--mono);
font-size: var(--t-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tinta-suave);
margin-bottom: var(--e-4);
}
.etiqueta::before {
content: '';
width: 28px;
height: 1px;
background: var(--ice);
}
/* Migas de pan. Comparten la clase .etiqueta con los antetítulos de sección,
pero no cumplen lo mismo: aquí se navega. Se les sube el contraste y se
marcan los enlaces SIN tocar el tamaño de letra (16/09, David), que es lo
que las hacía casi invisibles sobre el fondo negro. */
nav.etiqueta[aria-label="Migas"] { color: var(--tinta-suave); }
nav.etiqueta[aria-label="Migas"] a {
color: var(--tinta);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: color-mix(in srgb, var(--ice) 45%, transparent);
transition: color var(--rapido), text-decoration-color var(--rapido);
}
nav.etiqueta[aria-label="Migas"] a:hover,
nav.etiqueta[aria-label="Migas"] a:focus-visible {
color: var(--ice);
text-decoration-color: var(--ice);
}
/* La página actual no es un enlace: se distingue sin gritar. */
nav.etiqueta[aria-label="Migas"] [aria-current='page'] { color: var(--tinta); font-weight: 500; }
/* Badge de prueba — el único sitio donde el cian manda. */
.badge-prueba {
display: inline-flex;
align-items: center;
gap: var(--e-2);
padding: var(--e-2) var(--e-3);
border: 1px solid var(--prueba-borde);
background: var(--prueba-fondo);
border-radius: var(--r-full);
font-family: var(--mono);
font-size: var(--t-xs);
color: var(--prueba-txt);
letter-spacing: 0.04em;
}
/* Sello «El punzón» — logo secundario. Nunca óvalo: no puede imitar un punzón
oficial de contraste ni sugerir metal precioso macizo. */
.punzon {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
padding: var(--e-2) var(--e-3);
border: 1px solid var(--ice-apagado);
/* Chaflán en las cuatro esquinas */
clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
font-family: var(--mono);
line-height: 1.1;
color: var(--ice);
}
.punzon b { font-size: var(--t-base); font-weight: 600; letter-spacing: 0.08em; }
.punzon span { font-size: 0.42rem; letter-spacing: 0.1em; color: var(--ice-apagado); }
/* ============================================================================
4. LOGO
========================================================================== */
/* «El vaho»: wordmark en oro con un vaho cian cayendo bajo la línea de base.
A 16px el vaho desaparece y queda un wordmark limpio. */
.logo {
position: relative;
display: inline-block;
font-family: var(--display);
font-weight: 900;
font-stretch: 125%;
font-size: var(--t-2xl);
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--ice);
line-height: 1;
padding-bottom: 0.34em;
}
.logo::after {
content: '';
position: absolute;
inset-inline: -6%;
bottom: 0;
height: 0.34em;
background: linear-gradient(to bottom, rgba(69, 211, 198, .34), transparent 78%);
filter: blur(3px);
pointer-events: none;
}
.logo--grande { font-size: var(--t-3xl); }
/* ============================================================================
5. BOTONES
========================================================================== */
.btn {
--btn-bg: transparent;
--btn-fg: var(--tinta);
--btn-borde: var(--borde-fuerte);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--e-2);
padding: 0.95rem 1.7rem;
min-height: 48px; /* objetivo táctil */
background: var(--btn-bg);
color: var(--btn-fg);
border: 1px solid var(--btn-borde);
border-radius: var(--r-full);
font-family: var(--cuerpo);
font-size: var(--t-sm);
font-weight: 600;
letter-spacing: 0.02em;
text-align: center;
transition: background var(--rapido), border-color var(--rapido),
color var(--rapido), transform var(--rapido);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* CTA: oro sólido con texto oscuro. NUNCA texto blanco sobre oro. */
.btn--ice {
--btn-bg: var(--ice);
--btn-fg: var(--base);
--btn-borde: var(--ice);
font-weight: 700;
}
.btn--ice:hover { --btn-bg: var(--ice-claro); --btn-borde: var(--ice-claro); }
.btn--fantasma:hover { --btn-borde: var(--ice-apagado); --btn-fg: var(--ice); }
.btn--bloque { width: 100%; }
/* Boton grande: el CTA principal del hero. Mismo componente, mas aire. */
.btn--grande {
padding: 1.25rem 2.6rem;
min-height: 60px;
font-size: var(--t-lg);
}
/* ============================================================================
CINTA — barra deslizante bajo la cabecera
La pista son DOS mitades identicas y la animacion va de 0 a -50%: al llegar
al final esta exactamente donde empezo, asi que el bucle no da el salto que
delata el truco. Si se cambian los mensajes hay que mantener el duplicado.
La velocidad es longitud/tiempo, no solo tiempo: al pasar de cuatro
mensajes a dos se mantiene el largo de la pista (ocho parejas por mitad),
porque si no, subir los segundos no la habria frenado nada.
========================================================================== */
.cinta {
display: block;
overflow: hidden;
text-decoration: none;
background: var(--ice);
color: var(--base);
/* Debajo de la cabecera (z 50) y por encima del contenido. No es pegajosa:
se lee al entrar y luego deja sitio. */
position: relative;
z-index: 40;
}
.cinta:hover { background: var(--ice-claro); }
.cinta__pista {
display: inline-flex;
align-items: center;
white-space: nowrap;
padding-block: 0.7rem;
will-change: transform;
animation: cinta-desliza 133s linear infinite;
}
@keyframes cinta-desliza {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Al pasar el raton se para: si no, no se puede leer un mensaje entero. */
.cinta:hover .cinta__pista { animation-play-state: paused; }
.cinta__item {
font-family: var(--mono);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding-inline: 1.6rem;
}
.cinta__sep { opacity: .55; font-size: .9rem; }
/* Sin movimiento: se queda quieta y se lee lo que quepa. */
@media (prefers-reduced-motion: reduce) {
.cinta__pista { animation: none; }
}
/* En movil la cinta ocupaba demasiado para lo que dice. Se baja un escalon.
La duracion tambien baja: al encoger el texto la pista se acorta (x0,8) y,
a los mismos 133 s, la cinta se habria ido frenando sola. Con 106 s mantiene
el ritmo de escritorio. */
@media (max-width: 619px) {
.cinta__pista { padding-block: 0.5rem; animation-duration: 106s; }
.cinta__item { font-size: 0.8rem; padding-inline: 1.1rem; }
.cinta__sep { font-size: .75rem; }
}
.btn[disabled], .btn[aria-disabled='true'] {
opacity: .45;
cursor: not-allowed;
transform: none;
}
/* ============================================================================
6. CABECERA
========================================================================== */
.cabecera {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, var(--base) 88%, transparent);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--borde);
}
.cabecera__fila {
/* De borde a borde. Con el max-width que hereda de .contenedor, el menu y
el carrito se agrupaban hacia el centro en pantallas anchas. Rejilla de
tres columnas en vez de space-between para que el logo quede centrado de
verdad aunque los dos botones midan distinto. */
max-width: none;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--e-4);
min-height: 88px;
}
.cabecera__fila .hamburguesa { justify-self: start; }
.cabecera__fila .logo { justify-self: center; }
.cabecera__fila .btn-carrito { justify-self: end; }
.nav {
display: none;
gap: var(--e-6);
font-size: var(--t-sm);
letter-spacing: 0.02em;
}
.nav a { color: var(--tinta-suave); transition: color var(--rapido); }
.nav a:hover, .nav a[aria-current='page'] { color: var(--tinta); }
/* El menú desplegable de móvil se sustituyó por el lateral off-canvas (§14):
con 4 categorías + marca, un acordeón en la cabecera se quedaba corto. */
@media (min-width: 860px) {
.nav { display: flex; }
}
/* ============================================================================
7. HERO
========================================================================== */
.hero {
position: relative;
background: var(--profundo);
padding-block: clamp(var(--e-8), 14vw, var(--e-10));
overflow: hidden;
}
/* El vaho de fondo: cian frío abajo, un punto cálido arriba a la derecha.
Es la marca entera en dos gradientes. */
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(70% 50% at 78% 12%, rgba(69, 211, 198, .13), transparent 62%),
radial-gradient(90% 60% at 22% 108%, rgba(123, 232, 222, .09), transparent 66%);
pointer-events: none;
}
.hero > * { position: relative; }
.hero__titulo {
font-size: var(--t-hero);
font-weight: 900;
font-stretch: 125%;
letter-spacing: -0.035em;
margin-bottom: var(--e-5);
}
.hero__claim {
font-size: var(--t-xl);
color: var(--tinta-suave);
max-width: 46ch;
margin-bottom: var(--e-6);
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
/* ============================================================================
FAQ — sustituye al bloque "El material"
nativo: abre y cierra sin JavaScript, el contenido sigue en el
HTML con JS desactivado (y por tanto se indexa) y el teclado ya funciona.
========================================================================== */
/* ============================================================================
PACKS — el escalon entre la pieza suelta y el look
========================================================================== */
.rejilla-packs { display: grid; gap: var(--e-5); grid-template-columns: 1fr; }
@media (min-width: 720px) { .rejilla-packs { grid-template-columns: repeat(2, 1fr); } }
.pack {
border: 1px solid var(--borde);
border-radius: var(--r-lg);
background: var(--superficie);
overflow: hidden;
transition: border-color var(--medio), transform var(--medio);
}
.pack:hover { border-color: var(--ice-apagado); transform: translateY(-3px); }
.pack__enlace { display: block; color: inherit; text-decoration: none; }
.pack__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--profundo); }
.pack__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La etiqueta la pone el catalogo. Hoy dice "Mas vendido" y "Mejor valorado"
por decision de David: no hay ventas ni resenas que las respalden todavia. */
.pack__etiqueta {
position: absolute; top: var(--e-4); left: var(--e-4);
font-family: var(--mono); font-size: var(--t-xs); font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
padding: .25rem .6rem; border-radius: var(--r-full);
background: var(--ice); color: var(--base);
}
.pack__cuerpo { padding: var(--e-5); }
.pack__nombre { font-family: var(--display); font-weight: 800; font-size: var(--t-2xl); margin: 0 0 var(--e-2); }
.pack__premisa { color: var(--tinta-suave); margin: 0 0 var(--e-3); max-width: 42ch; }
.pack__piezas { font-family: var(--mono); font-size: var(--t-xs); color: var(--prueba-txt); margin: 0 0 var(--e-4); }
.pack__precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-3); }
.pack__ahorro { font-family: var(--mono); font-size: var(--t-xs); color: var(--ice); }
.faq { border-top: 1px solid var(--borde); }
.faq__item {
border-bottom: 1px solid var(--borde);
}
.faq__p {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e-4);
padding: var(--e-5) 0;
cursor: pointer;
font-weight: 600;
font-size: var(--t-lg);
color: var(--tinta);
list-style: none;
}
/* El triangulito por defecto se quita en los dos motores y se pone el nuestro. */
.faq__p::-webkit-details-marker { display: none; }
.faq__p::marker { content: none; }
/* Un + que gira a x al abrir. Es un pseudo-elemento: no hay icono que cargar. */
.faq__p::after {
content: '+';
flex: none;
font-family: var(--mono);
font-size: var(--t-xl);
line-height: 1;
color: var(--ice);
transition: transform var(--medio);
}
.faq__item[open] .faq__p::after { transform: rotate(45deg); }
.faq__p:hover { color: var(--ice); }
.faq__p:focus-visible { outline: 2px solid var(--ice); outline-offset: 4px; }
.faq__r {
padding: 0 0 var(--e-5);
max-width: 68ch;
color: var(--tinta-suave);
}
.faq__r p { margin: 0 0 var(--e-3); }
.faq__r p:last-child { margin-bottom: 0; }
.faq__r a { color: var(--ice); }
/* Quien prefiere menos movimiento no ve girar el +. */
@media (prefers-reduced-motion: reduce) {
.faq__p::after { transition: none; }
}
.hero__claim strong { color: var(--tinta); font-weight: 600; }
/* ============================================================================
8. TARJETA DE LOOK — el producto estrella
========================================================================== */
.rejilla-looks {
display: grid;
gap: var(--e-5);
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .rejilla-looks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .rejilla-looks { grid-template-columns: repeat(3, 1fr); } }
/* Rejilla de categoría todavía vacía (la pinta categoria.js al cargar). Sin
alto reservado, el pie subía hasta arriba y bajaba de golpe al llegar las
tarjetas: CLS de 0,30 a 0,42 en escritorio. Con una pantalla de alto el pie
ya nace fuera de la vista y no hay salto que medir. Se mira «sin hijos
salvo el noscript», porque el HTML lleva ese aviso dentro y :empty no
casaría nunca. */
[data-rejilla]:not(:has(> :not(noscript))) { min-height: 100vh; }
.look {
display: flex;
flex-direction: column;
background: var(--superficie);
border: 1px solid var(--borde);
border-radius: var(--r-lg);
overflow: hidden;
transition: border-color var(--medio), transform var(--medio);
}
.look:hover {
border-color: var(--ice-apagado);
transform: translateY(-3px);
}
.look__media {
position: relative;
aspect-ratio: 4 / 5;
background:
radial-gradient(60% 50% at 70% 25%, rgba(69, 211, 198, .10), transparent 60%),
linear-gradient(170deg, var(--superficie-alta), var(--profundo));
display: grid;
place-items: center;
}
.look__media img { width: 100%; height: 100%; object-fit: cover; }
/* Marcador de foto pendiente. Se ve, y se ve que falta a propósito:
así nadie publica sin sustituirlo. */
.pendiente-foto {
display: grid;
place-items: center;
gap: var(--e-2);
padding: var(--e-5);
text-align: center;
font-family: var(--mono);
font-size: var(--t-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--tinta-tenue);
border: 1px dashed var(--borde-fuerte);
border-radius: var(--r-md);
margin: var(--e-4);
width: calc(100% - var(--e-8));
height: calc(100% - var(--e-8));
align-content: center;
}
.look__cuerpo {
display: flex;
flex-direction: column;
flex: 1;
gap: var(--e-3);
padding: var(--e-5);
}
.look__nombre {
font-family: var(--display);
font-weight: 900;
font-stretch: 120%;
font-size: var(--t-2xl);
letter-spacing: -0.02em;
text-transform: uppercase;
line-height: 1.02;
margin: 0;
}
.look__premisa {
color: var(--tinta-suave);
font-size: var(--t-sm);
margin: 0;
flex: 1;
}
.look__piezas {
font-family: var(--mono);
font-size: var(--t-xs);
color: var(--tinta-tenue);
letter-spacing: 0.02em;
margin: 0;
}
.look__precio {
display: flex;
align-items: baseline;
gap: var(--e-3);
flex-wrap: wrap;
padding-top: var(--e-3);
border-top: 1px solid var(--borde);
}
.precio {
font-family: var(--display);
font-weight: 800;
font-stretch: 112%;
font-size: var(--t-xl);
color: var(--ice);
letter-spacing: -0.01em;
}
.precio-antes {
font-size: var(--t-sm);
color: var(--tinta-tenue);
text-decoration: line-through;
}
.ahorro {
font-family: var(--mono);
font-size: var(--t-xs);
color: var(--prueba-txt);
}
/* Banner de oferta de la ficha de look.
Qué aporta sobre el precio que tiene justo debajo: ahí el ahorro va en
letra pequeña y gris, al lado de un tachado. Aquí se dice en una frase y
en grande, que es lo que se lee de verdad.
Solo la cifra va en cian: es precio, y el cian es para precio y CTA. El
resto en gris de dato — la regla del 5 % de la cabecera de este archivo. */
.oferta {
border: 1px solid var(--ice-apagado);
border-radius: var(--r-md);
background: var(--ice-fondo);
padding: var(--e-4) var(--e-5);
margin-bottom: var(--e-5);
}
.oferta__cifra {
font-family: var(--display);
font-weight: 800;
font-size: var(--t-lg);
color: var(--ice);
margin: 0;
}
.oferta__pie {
font-size: var(--t-xs);
color: var(--prueba-txt);
margin: var(--e-2) 0 0;
max-width: 46ch;
}
/* Texto del look SOBRE la animación, dentro del bloque pegajoso.
Antes era una sección propia encima: se leía el texto, se seguía bajando y
luego aparecían unas manos, sin que nada atara las dos cosas. Dentro del
bloque pegajoso el titular acompaña a la animación de principio a fin.
LEGIBILIDAD: el plano CAMBIA con el scroll. Lo que en un fotograma es negro,
veinte despues es una mano iluminada. Por eso el texto lleva su propio velo
y no se fia del fondo. */
.scrub__texto {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
/* La capa ocupa la pantalla entera: si capturara el raton se quedaria con
todos los clics. Solo el enlace lo recupera. */
pointer-events: none;
}
.scrub__texto .btn { pointer-events: auto; }
/* Velo bajo el texto. Va como ::before y el contenedor en position:relative,
para que el texto pinte por encima del velo y no al reves. */
.scrub__texto::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right,
var(--profundo) 0%,
color-mix(in srgb, var(--profundo) 70%, transparent) 36%,
transparent 66%);
}
.scrub__texto > .contenedor { position: relative; }
/* Un escalon por encima del resto de titulares: aqui el texto no compite con
un fondo liso, compite con un plano a pantalla completa. */
.scrub__texto h2 { font-size: var(--t-4xl); }
.scrub__texto .scrub__parrafo { font-size: var(--t-lg); }
/* Navegadores sin color-mix: velo plano, que tambien cumple. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
.scrub__texto::before {
background: linear-gradient(to right, var(--profundo) 0%, transparent 66%);
}
}
.scrub__parrafo {
color: var(--tinta-suave);
max-width: 46ch;
margin-bottom: var(--e-5);
}
/* ============================================================================
9. BLOQUE DE PRUEBA — acero vs bisutería
========================================================================== */
/* Aquí manda el cian. Es la sección donde no vendemos: demostramos. */
.prueba-bloque {
border: 1px solid var(--prueba-borde);
border-radius: var(--r-lg);
background:
linear-gradient(180deg, var(--prueba-fondo), transparent 55%),
var(--superficie);
padding: clamp(var(--e-5), 5vw, var(--e-7));
}
.tabla-tecnica {
width: 100%;
border-collapse: collapse;
font-family: var(--mono);
font-size: var(--t-sm);
margin-block: var(--e-5);
}
.tabla-tecnica th,
.tabla-tecnica td {
padding: var(--e-3) var(--e-2);
text-align: left;
border-bottom: 1px solid var(--borde);
vertical-align: top;
}
.tabla-tecnica th {
color: var(--tinta-suave);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: var(--t-xs);
}
.tabla-tecnica td:first-child { color: var(--tinta-suave); width: 38%; }
.tabla-tecnica .si { color: var(--prueba-txt); }
.tabla-tecnica .no { color: var(--tinta-tenue); }
/* Contenedor de scroll horizontal: la tabla nunca desborda la página. */
.scroll-x {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ============================================================================
10. LISTA DE ESPERA
========================================================================== */
.espera {
background: var(--superficie);
border: 1px solid var(--borde);
border-radius: var(--r-lg);
padding: clamp(var(--e-5), 5vw, var(--e-7));
}
.espera__form {
display: flex;
flex-direction: column;
gap: var(--e-3);
margin-top: var(--e-5);
max-width: 480px;
}
@media (min-width: 560px) {
.espera__form { flex-direction: row; flex-wrap: wrap; align-items: center; }
.espera__form .btn { flex: 0 0 auto; }
/* El campo no baja de 240px: si no, al entrar la casilla en la fila se
comprimía hasta quedar redondo (18/09). */
.espera__form .campo { flex: 1 1 240px; }
}
/* La casilla de consentimiento va SIEMPRE en su propio renglón, debajo del
campo y el botón: es una frase larga y en la fila estrujaba a los dos. */
.espera__consent { flex: 1 0 100%; order: 3; }
.campo {
flex: 1;
padding: 0.95rem 1.1rem;
min-height: 48px;
background: var(--base);
border: 1px solid var(--borde-fuerte);
border-radius: var(--r-full);
color: var(--tinta);
transition: border-color var(--rapido);
}
.campo::placeholder { color: var(--tinta-tenue); }
.campo:focus { border-color: var(--ice-apagado); outline: none; }
.campo[aria-invalid='true'] { border-color: var(--error); }
/* Honeypot: fuera de pantalla, NUNCA display:none (los bots lo detectan).
Lección heredada de HANDOFF_LANDINGS.md. */
.trampa {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.aviso {
margin-top: var(--e-3);
font-size: var(--t-sm);
min-height: 1.5em;
}
.aviso--ok { color: var(--exito); }
.aviso--error { color: var(--error); }
.letra-pequena {
font-size: var(--t-xs);
color: var(--tinta-tenue);
margin-top: var(--e-3);
max-width: 52ch;
}
/* ============================================================================
11. PIE
========================================================================== */
.pie {
background: var(--profundo);
border-top: 1px solid var(--borde);
padding-block: var(--e-8) var(--e-6);
margin-top: var(--e-9);
}
/* Móvil: marca a todo el ancho arriba, y los links en DOS columnas debajo.
Regla fija del proyecto (feedback_landing_footer_mobile). */
.pie__rejilla {
display: grid;
gap: var(--e-6);
grid-template-columns: 1fr;
}
.pie__marca { grid-column: 1 / -1; }
.pie__marca p {
color: var(--tinta-suave);
font-size: var(--t-sm);
margin-top: var(--e-3);
max-width: 40ch;
}
.pie__cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--e-5);
}
@media (min-width: 860px) {
.pie__rejilla { grid-template-columns: 1.4fr 2fr; align-items: start; }
.pie__marca { grid-column: auto; }
/* Dos, no tres: al quitar la columna "La marca" quedaba una pista vacia */
.pie__cols { grid-template-columns: repeat(2, 1fr); }
}
.pie h4 {
font-family: var(--mono);
font-size: var(--t-xs);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--tinta-tenue);
margin: 0 0 var(--e-3);
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.pie li a { color: var(--tinta-suave); font-size: var(--t-sm); transition: color var(--rapido); }
.pie li a:hover { color: var(--ice); }
.pie__redes { display: flex; gap: var(--e-3); align-items: center; margin-top: var(--e-4); }
.pie__red {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 999px;
border: 1px solid var(--borde); color: var(--tinta-suave);
transition: color var(--rapido), border-color var(--rapido);
}
.pie__red:hover { color: var(--ice); border-color: var(--ice-apagado); }
.pie__legal {
margin-top: var(--e-7);
padding-top: var(--e-5);
border-top: 1px solid var(--borde);
display: flex;
flex-wrap: wrap;
gap: var(--e-3) var(--e-5);
align-items: center;
justify-content: space-between;
font-size: var(--t-xs);
color: var(--tinta-tenue);
}
/* ============================================================================
12. MOVIMIENTO
========================================================================== */
/* Aparición al hacer scroll. El JS añade .visible con IntersectionObserver.
Si el JS no carga, el contenido se ve igual: la clase solo resta opacidad
cuando .js está presente en . */
.js .aparece {
opacity: 0;
transform: translateY(18px);
transition: opacity var(--lento), transform var(--lento);
}
.js .aparece.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
.js .aparece { opacity: 1; transform: none; }
}
/* ============================================================================
13. IMPRESIÓN — la guía de tallas se imprime a escala 1:1
========================================================================== */
@media print {
body { background: #fff; color: #000; }
.cabecera, .pie, .no-imprimir { display: none !important; }
}
/* ============================================================================
14. MENÚ LATERAL OFF-CANVAS
Patrón heredado de Women Essential. El panel entra desde la izquierda y el
overlay oscurece el resto. En escritorio también existe: es la navegación
completa de la tienda, no solo un recurso de móvil.
========================================================================== */
.side-menu { position: fixed; inset: 0; z-index: 100; }
.side-menu[hidden] { display: none; }
.side-menu__overlay {
position: absolute;
inset: 0;
background: rgba(6, 7, 8, .72);
backdrop-filter: blur(3px);
opacity: 0;
transition: opacity var(--medio);
}
.side-menu.is-open .side-menu__overlay { opacity: 1; }
.side-menu__panel {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: min(88vw, 340px);
background: var(--superficie);
border-inline-end: 1px solid var(--borde);
padding: var(--e-5) var(--e-5) var(--e-7);
overflow-y: auto;
overscroll-behavior: contain;
transform: translateX(-100%);
transition: transform var(--medio);
display: flex;
flex-direction: column;
}
.side-menu.is-open .side-menu__panel { transform: none; }
.sm-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e-4);
padding-bottom: var(--e-5);
border-bottom: 1px solid var(--borde);
margin-bottom: var(--e-5);
}
.sm-title {
margin: 0;
font-family: var(--display);
font-weight: 800;
font-stretch: 115%;
text-transform: uppercase;
letter-spacing: -0.01em;
font-size: var(--t-lg);
}
.sm-close {
display: grid;
place-items: center;
width: 44px; height: 44px;
margin-inline-end: -8px;
border-radius: var(--r-full);
color: var(--tinta-suave);
transition: color var(--rapido), background var(--rapido);
}
.sm-close:hover { color: var(--tinta); background: var(--superficie-alta); }
.sm-group {
margin: var(--e-5) 0 var(--e-3);
font-family: var(--mono);
font-size: var(--t-xs);
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--tinta-tenue);
}
.sm-group:first-of-type { margin-top: 0; }
.sm-list { list-style: none; margin: 0; padding: 0; display: grid; }
.sm-list a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e-3);
padding: var(--e-3) 0;
border-bottom: 1px solid var(--borde);
font-family: var(--display);
font-weight: 700;
font-stretch: 108%;
text-transform: uppercase;
font-size: var(--t-base);
letter-spacing: -0.005em;
transition: color var(--rapido), padding-inline-start var(--rapido);
}
.sm-list a:hover,
.sm-list a[aria-current='page'] { color: var(--ice); padding-inline-start: var(--e-2); }
.sm-count {
font-family: var(--mono);
font-size: var(--t-xs);
font-weight: 400;
color: var(--tinta-tenue);
letter-spacing: 0;
text-transform: none;
}
.sm-foot {
margin-top: auto;
padding-top: var(--e-6);
font-family: var(--mono);
font-size: var(--t-xs);
line-height: 1.7;
color: var(--tinta-tenue);
}
/* Botón hamburguesa de la cabecera: visible SIEMPRE, no solo en móvil. */
.hamburguesa {
display: inline-flex;
align-items: center;
gap: var(--e-2);
/* Sin texto, el aire va igual por los cuatro lados. */
padding: var(--e-3);
border: 1px solid var(--borde);
border-radius: var(--r-full);
font-family: var(--mono);
font-size: var(--t-xs);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--tinta-suave);
transition: border-color var(--rapido), color var(--rapido);
}
.hamburguesa:hover { border-color: var(--ice-apagado); color: var(--tinta); }
.hamburguesa svg { flex: 0 0 auto; }
/* ============================================================================
15. PÁGINA DE CATEGORÍA
========================================================================== */
.cabeza-categoria {
padding-block: var(--e-8) var(--e-6);
border-bottom: 1px solid var(--borde);
margin-bottom: var(--e-7);
}
.cabeza-categoria h1 { margin-bottom: var(--e-3); }
.cabeza-categoria .claim { color: var(--tinta-suave); max-width: 52ch; margin: 0; }
.filtros {
display: flex;
flex-wrap: wrap;
gap: var(--e-2);
margin-bottom: var(--e-6);
}
.filtro {
padding: var(--e-2) var(--e-4);
min-height: 40px;
border: 1px solid var(--borde-fuerte);
border-radius: var(--r-full);
font-size: var(--t-sm);
color: var(--tinta-suave);
transition: border-color var(--rapido), color var(--rapido), background var(--rapido);
}
.filtro:hover { border-color: var(--ice-apagado); color: var(--tinta); }
.filtro[aria-current='page'] {
background: var(--ice);
border-color: var(--ice);
color: var(--base);
font-weight: 600;
}
/* ============================================================================
16. SALTAR AL CONTENIDO
Estaba puesto con la clase del honeypot (.trampa, left:-9999px permanente),
así que era invisible para el teclado — justo lo contrario de su función.
Fuera de pantalla hasta recibir el foco, y entonces visible.
========================================================================== */
.saltar {
position: absolute;
inset-inline-start: -9999px;
top: 0;
z-index: 200;
padding: var(--e-3) var(--e-5);
background: var(--ice);
color: var(--base);
font-weight: 700;
border-radius: 0 0 var(--r-md) 0;
}
.saltar:focus {
inset-inline-start: 0;
outline: 2px solid var(--tinta);
outline-offset: -4px;
}
/* ============================================================================
17. ÍNDICE DE SECCIONES (home)
La home es la portada de la marca; el catálogo vive en sus páginas. Estas
tarjetas son la puerta a cada una.
LOOKS ocupa el doble porque es el producto: si todas las puertas pesan lo
mismo, el visitante entra por la que le pilla más cerca en vez de por la que
mejor le va, y acaba comprando un anillo suelto de 24,95 € en lugar de un
look de 79,95 €.
========================================================================== */
.rejilla-secciones {
display: grid;
gap: var(--e-3);
grid-template-columns: 1fr;
}
/* Movil: en vez de una columna de tarjetas que obliga a bajar cinco pantallas,
un carrusel lateral. Es scroll-snap puro, sin una linea de JavaScript: el
dedo ya sabe hacer esto y el teclado y el lector de pantalla siguen viendo
una lista normal.
Las tarjetas miden el 82 %: la siguiente asoma por el borde, que es lo que
le dice a la gente que hay mas y se puede arrastrar. Con el 100 % parece que
se acaba ahi.
El margen negativo saca el carrusel a los bordes de la pantalla y el padding
le devuelve el margen a la primera y la ultima: si no, la primera tarjeta
nace pegada al canto. */
@media (max-width: 619px) {
.rejilla-secciones {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
margin-inline: calc(var(--borde-pagina) * -1);
padding-inline: var(--borde-pagina);
scroll-padding-inline: var(--borde-pagina);
scrollbar-width: none;
}
.rejilla-secciones::-webkit-scrollbar { display: none; }
.rejilla-secciones > * {
flex: 0 0 82%;
scroll-snap-align: start;
}
}
@media (min-width: 620px) { .rejilla-secciones { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .rejilla-secciones { grid-template-columns: repeat(3, 1fr); } }
.seccion-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 220px;
padding: var(--e-5);
border: 1px solid var(--borde);
border-radius: var(--r-lg);
background: var(--superficie);
overflow: hidden;
isolation: isolate;
transition: border-color var(--medio), transform var(--medio);
}
.seccion-card:hover { border-color: var(--ice-apagado); transform: translateY(-3px); }
/* La foto va de fondo y muy apagada: aquí manda el nombre de la sección, no
la imagen. Con el hover sube un poco, lo justo para que se note vivo. */
.seccion-card__fondo {
position: absolute; inset: 0; z-index: -1;
background-size: cover; background-position: center;
opacity: .26;
transition: opacity var(--medio), transform var(--lento);
}
.seccion-card:hover .seccion-card__fondo { opacity: .38; transform: scale(1.04); }
.seccion-card::before {
content: ''; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to top, var(--base) 12%, rgba(11,12,14,.55) 55%, transparent);
}
.seccion-card__nombre {
font-family: var(--display);
font-weight: 900; font-stretch: 120%;
font-size: var(--t-2xl); line-height: 1.02;
letter-spacing: -.02em; text-transform: uppercase;
margin: 0 0 var(--e-2);
}
.seccion-card__claim {
margin: 0 0 var(--e-3);
font-size: var(--t-sm);
color: var(--tinta-suave);
}
.seccion-card__pie {
display: flex; align-items: center; justify-content: space-between;
gap: var(--e-3);
font-family: var(--mono); font-size: var(--t-xs);
letter-spacing: .06em; text-transform: uppercase;
color: var(--tinta-tenue);
}
.seccion-card__ir { color: var(--ice); }
/* La puerta principal */
.seccion-card--destacada {
min-height: 300px;
border-color: var(--ice-apagado);
}
@media (min-width: 620px) { .seccion-card--destacada { grid-column: span 2; } }
.seccion-card--destacada .seccion-card__nombre { font-size: var(--t-3xl); }
.seccion-card--destacada .seccion-card__fondo { opacity: .32; }
/* La imagen y el título de una tarjeta llevan a la ficha. Antes el único
enlace era el botón, así que en modo lista de espera la ficha del producto
era inalcanzable desde su propia categoría. */
.look__enlace { display: block; }
.look__nombre a { color: inherit; transition: color var(--rapido); }
.look:hover .look__nombre a { color: var(--ice); }
/* ==========================================================================
CARRITO — movido desde ficha.css el 14/09/2026.
Vivia en ficha.css, que solo cargan las fichas de pieza y de look. En la
home, las categorias, las legales y el 404 el cajon se inyectaba
sin un solo estilo: sin position:fixed aparecia como un bloque al final
del documento y carrito.js bloqueaba el scroll. Resultado para el
cliente: pulsa la cesta, no pasa nada y la pagina se congela.
El carrito es global. Sus estilos van en la hoja global. No devolverlos
a ficha.css.
========================================================================== */
/* ============================================================================
CAJÓN DEL CARRITO
Entra por la derecha. Mismo patrón que el menú lateral (doble rAF, respaldo
por tiempo al cerrar) pero con z-index por encima: si están los dos abiertos,
el carrito manda.
========================================================================== */
.cajon { position: fixed; inset: 0; z-index: 140; }
.cajon[hidden] { display: none; }
.cajon__fondo {
position: absolute; inset: 0;
background: rgba(6, 7, 8, .72);
backdrop-filter: blur(3px);
opacity: 0; transition: opacity var(--medio);
}
.cajon.is-open .cajon__fondo { opacity: 1; }
.cajon__panel {
position: absolute; inset-block: 0; inset-inline-end: 0;
width: min(92vw, 420px);
background: var(--superficie);
border-inline-start: 1px solid var(--borde);
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform var(--medio);
}
.cajon.is-open .cajon__panel { transform: none; }
.cajon__cab {
display: flex; align-items: center; justify-content: space-between;
gap: var(--e-4);
padding: var(--e-5);
border-bottom: 1px solid var(--borde);
}
.cajon__titulo {
margin: 0;
font-family: var(--display); font-weight: 800; font-stretch: 112%;
text-transform: uppercase; font-size: var(--t-lg); letter-spacing: -.01em;
}
/* Móvil: el cajón ocupa la pantalla entera (16/09). Anclado al lateral dejaba
una franja del fondo a la izquierda que invita a cerrarlo sin querer, y en
una pantalla de 390 px roba 30 px justo donde van las tallas y el total. */
@media (max-width: 619px) {
.cajon__panel {
width: 100%;
border-inline-start: 0;
}
.cajon__pie { padding-bottom: max(var(--e-5), env(safe-area-inset-bottom)); }
}
.cajon__cuerpo {
flex: 1; overflow-y: auto; overscroll-behavior: contain;
padding: var(--e-5);
}
.cajon__pie {
padding: var(--e-5);
border-top: 1px solid var(--borde);
background: var(--base);
}
.cajon__pie:empty,
.cajon__pie[hidden] { display: none; }
/* Linea de descuento por volumen: se pinta sobre el total cuando aplica. */
.cajon__linea {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--e-3);
margin: 0 0 var(--e-2);
font-size: var(--t-sm);
}
.cajon__total {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--e-3);
margin-bottom: var(--e-2);
font-family: var(--mono); font-size: var(--t-sm);
text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-suave);
}
.cajon__total .precio { font-size: var(--t-xl); }
/* ── Línea del carrito ───────────────────────────────────────────────────── */
.linea {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: var(--e-3);
padding: var(--e-4) 0;
border-bottom: 1px solid var(--borde);
}
.linea__foto {
width: 64px; height: 80px;
border-radius: var(--r-md);
overflow: hidden;
background: var(--superficie-alta);
}
.linea__foto img { width: 100%; height: 100%; object-fit: cover; }
.linea__nombre { margin: 0; font-weight: 600; font-size: var(--t-sm); }
.linea__detalle {
margin: 2px 0 var(--e-2);
font-family: var(--mono); font-size: var(--t-xs);
color: var(--tinta-tenue); line-height: 1.5;
}
.linea__ctrl { display: flex; align-items: center; gap: var(--e-2); }
.linea__ctrl button {
width: 30px; height: 30px;
display: grid; place-items: center;
border: 1px solid var(--borde-fuerte);
border-radius: var(--r-sm);
color: var(--tinta-suave);
font-size: var(--t-base); line-height: 1;
transition: border-color var(--rapido), color var(--rapido);
}
.linea__ctrl button:hover { border-color: var(--ice-apagado); color: var(--tinta); }
.linea__ctrl .num {
min-width: 24px; text-align: center;
font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.linea__quitar {
width: auto !important; padding-inline: var(--e-2);
border: 0 !important;
font-size: var(--t-xs) !important;
color: var(--tinta-tenue) !important;
text-decoration: underline; text-underline-offset: 3px;
}
.linea__quitar:hover { color: var(--error) !important; }
.linea__precio {
font-family: var(--mono); font-variant-numeric: tabular-nums;
font-size: var(--t-sm); white-space: nowrap;
}
/* Objetivos del cajón (envío gratis y, una vez conseguido, el descuento por
volumen). Van ARRIBA del todo: en el pie ya no empujan a nada. */
.cajon__objetivo { display: grid; gap: var(--e-2); margin-bottom: var(--e-4); }
.cajon__objetivo .envio-gratis { margin-bottom: 0; }
/* Formas de pago reales, en texto: no hay logos de marca en el proyecto y
dibujarlos a mano sería peor. */
.cajon__pagos {
display: flex; flex-wrap: wrap; gap: var(--e-2);
margin: var(--e-3) 0 0; padding: 0; list-style: none;
justify-content: center;
}
.cajon__pagos li {
padding: 2px var(--e-2);
border: 1px solid var(--borde);
border-radius: var(--r-sm);
font-family: var(--mono); font-size: var(--t-xs);
color: var(--tinta-tenue);
}
/* Tallas editables dentro de la línea del carrito. */
.linea__tallas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0 0 var(--e-2); }
.linea__tallaCampo { display: grid; gap: 2px; }
.linea__tallaCampo > span {
font-family: var(--mono); font-size: var(--t-xs); color: var(--tinta-tenue);
}
.linea__talla {
padding: 3px var(--e-2);
border: 1px solid var(--borde-fuerte);
border-radius: var(--r-sm);
background: var(--base); color: var(--tinta);
font-family: var(--mono); font-size: var(--t-xs);
}
/* ── Sugerencia de look ──────────────────────────────────────────────────── */
.sugerencia {
display: block;
margin-top: var(--e-5);
padding: var(--e-4);
border: 1px solid var(--ice-apagado);
border-radius: var(--r-md);
background: var(--ice-fondo);
font-size: var(--t-sm);
transition: border-color var(--rapido);
}
.sugerencia:hover { border-color: var(--ice); }
.sugerencia__tallas { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-3); }
.sugerencia__ver {
display: inline-block; margin-top: var(--e-2);
font-size: var(--t-xs); color: var(--tinta-tenue);
text-decoration: underline; text-underline-offset: 3px;
}
/* ============================================================================
POPUP DE CAPTACIÓN (js/popup.js)
Hoja inferior en móvil y tarjeta centrada en escritorio. Nunca a pantalla
completa: Google penaliza el intersticial que tapa el contenido, y tapar la
tienda entera para pedir un email es la forma más rápida de perder la visita.
========================================================================== */
.capta {
position: fixed; inset: 0; z-index: 150;
display: flex; align-items: flex-end; justify-content: center;
background: rgba(6, 7, 8, .55);
opacity: 0; transition: opacity var(--medio);
}
.capta[hidden] { display: none; }
.capta.is-open { opacity: 1; }
.capta__panel {
position: relative;
width: min(100%, 460px);
max-height: 80vh; overflow-y: auto;
padding: var(--e-6) var(--e-5) var(--e-5);
padding-bottom: max(var(--e-5), env(safe-area-inset-bottom));
background: var(--superficie);
border: 1px solid var(--borde);
border-bottom: 0;
border-radius: var(--r-lg) var(--r-lg) 0 0;
transform: translateY(12px);
transition: transform var(--medio);
}
.capta.is-open .capta__panel { transform: none; }
.capta__panel h2 { font-size: var(--t-2xl); margin: 0 0 var(--e-3); }
.capta__texto { margin: 0 0 var(--e-4); color: var(--tinta-suave); font-size: var(--t-sm); }
.capta__form { display: grid; gap: var(--e-3); }
.capta__x {
position: absolute; top: var(--e-3); inset-inline-end: var(--e-3);
width: 36px; height: 36px;
display: grid; place-items: center;
border-radius: 50%;
color: var(--tinta-suave);
}
.capta__x:hover { color: var(--tinta); }
/* Casilla de consentimiento: NUNCA premarcada, y el texto se lee sin lupa. */
.capta__consent {
display: flex; gap: var(--e-3); align-items: flex-start;
font-size: var(--t-xs); color: var(--tinta-suave); line-height: 1.5;
}
.capta__consent input { margin-top: 3px; accent-color: var(--ice); }
/* Información básica de protección de datos, bajo la casilla. Mismo tamaño que
el texto de la casilla, un tono más apagado: se lee, pero no compite. */
.capta__info {
margin: 0;
font-size: var(--t-xs); color: var(--tinta-tenue); line-height: 1.5;
}
.capta__info a { color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 2px; }
/* Pestaña lateral: lo que queda cuando alguien cierra el popup. Discreta, y
solo vuelve a abrirlo si la pulsa él.
Propiedades FÍSICAS a propósito: con writing-mode vertical, inset-inline-end
se traduce a bottom:0 y la pestaña se estiraba todo el alto por la
izquierda, tapando el precio de la barra fija. Por debajo de la barra de
compra (90) y del cajón (140). */
.capta-pestana {
position: fixed; right: 0; top: 40%; bottom: auto; left: auto;
height: auto;
z-index: 80;
padding: var(--e-3) var(--e-2);
writing-mode: vertical-rl;
background: var(--superficie-alta);
border: 1px solid var(--borde); border-right: 0;
border-radius: var(--r-md) 0 0 var(--r-md);
font-family: var(--mono); font-size: var(--t-xs);
letter-spacing: .1em; text-transform: uppercase;
color: var(--tinta-suave);
}
.capta-pestana[hidden] { display: none; }
.capta-pestana:hover { color: var(--ice); border-color: var(--ice-apagado); }
@media (min-width: 620px) {
.capta { align-items: center; }
.capta__panel { border-bottom: 1px solid var(--borde); border-radius: var(--r-lg); }
}
/* ── Botón del carrito en la cabecera ────────────────────────────────────── */
.btn-carrito { position: relative; }
.btn-carrito .cuenta {
position: absolute; top: -6px; inset-inline-end: -6px;
min-width: 19px; height: 19px; padding: 0 5px;
display: grid; place-items: center;
background: var(--ice); color: var(--base);
border-radius: var(--r-full);
font-family: var(--mono); font-size: 11px; font-weight: 600;
font-variant-numeric: tabular-nums;
}
.btn-carrito .cuenta[hidden] { display: none; }
/* ==========================================================================
SCROLL-SCRUB — el look PISTA en movimiento, conducido por el scroll.
La sección mide más que la pantalla: esa diferencia ES el recorrido de la
animación. Dentro, un bloque pegajoso de una pantalla de alto con el
canvas. Si se cambia la altura aquí, cambia la duración de la animación.
========================================================================== */
.scrub {
position: relative;
width: 100%;
/* 170vh, no 120: el recorrido real es la altura MENOS la pantalla pegada
(240-100 = 140vh). La mitad de 140 es 70, asi que la seccion mide
70 + 100 = 170vh. Con 120vh quedaban 20vh y se pasaba de golpe. */
height: 170vh;
background: var(--profundo);
isolation: isolate;
}
.scrub__sticky {
position: sticky;
top: 0;
width: 100%;
height: 100vh;
height: 100dvh; /* dvh: sin hueco al aparecer la barra del navegador */
overflow: hidden;
background: var(--profundo);
}
.scrub__lienzo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
/* Filtro opaco: el plano cede protagonismo al texto que viene después. */
opacity: .62;
filter: grayscale(.3) contrast(1.05) brightness(.92);
}
/* Velo + fundido de bordes, para que la banda no parezca pegada encima. */
.scrub__velo {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to bottom,
var(--base) 0%,
transparent 22%,
transparent 78%,
var(--base) 100%);
}
/* Sin canvas (menos movimiento o sin JS): el póster quieto, y la sección
deja de ser un recorrido largo para ocupar solo lo que se ve. */
@media (prefers-reduced-motion: reduce) {
.scrub { height: 62vh; }
.scrub__sticky { height: 62vh; background: var(--profundo) center / cover no-repeat; }
/* Cada animación, con su póster. Solo aquí y sin JS: con el canvas
encendido el póster se vería debajo, porque el lienzo es semitransparente. */
#scrubPista .scrub__sticky { background-image: url(/assets/frames/pista/poster.webp?v=1); }
#scrubNiebla .scrub__sticky { background-image: url(/assets/frames/niebla/poster.webp?v=1); }
.scrub__lienzo { display: none; }
}
.no-js .scrub { height: 62vh; }
/* Movil: el plano es 16:9 y la pantalla es vertical. El fotograma se encaja
entero (ver js/scrub.js) y el bloque pegajoso se acorta para que no sobre
negro alrededor. Con la pantalla completa se recortaba el 74 % del ancho
y las manos se salian de plano. */
@media (max-width: 820px) {
.scrub { height: 135vh; } /* 35vh de recorrido: la mitad que antes */
/* Pantalla completa, con el fotograma ENCAJADO dentro (js/scrub.js).
Acortar esto dejaba medio pantallazo de negro vacio debajo y parecia una
imagen pequena flotando arriba. Con el bloque entero, las bandas negras
quedan simetricas arriba y abajo y leen como plano ancho. */
.scrub__sticky { height: 100vh; height: 100dvh; } /* encajado, no recortado */
/* El plano 16:9 encajado en vertical deja bandas negras arriba y abajo.
El texto se ancla ARRIBA, que es donde sobra sitio, y el velo pasa a ser
de arriba abajo: centrado caeria justo sobre las manos. */
/* La cabecera es pegajosa, mide 89px y va a z-index 50. Como .scrub aisla su
apilado, el z-index 2 de esta capa NO puede ganarle: la unica salida es
apartarse. Con 48px la etiqueta caia entre 56 y 75px, o sea debajo de la
cabecera, y no se leia. Con 112px arranca a ~120px, holgada. */
.scrub__texto { align-items: flex-start; padding-top: calc(var(--e-9) + var(--e-4)); }
.scrub__texto::before {
background: linear-gradient(to bottom,
var(--profundo) 0%,
color-mix(in srgb, var(--profundo) 72%, transparent) 42%,
transparent 70%);
}
.scrub__parrafo { max-width: none; }
}
.no-js .scrub__sticky { height: 62vh; background: var(--profundo) center / cover no-repeat; }
.no-js #scrubPista .scrub__sticky { background-image: url(/assets/frames/pista/poster.webp?v=1); }
.no-js #scrubNiebla .scrub__sticky { background-image: url(/assets/frames/niebla/poster.webp?v=1); }
/* ── Upsell de pendientes ──────────────────────────────────────────────────
Vivía en ficha.css, que solo cargan las fichas. Desde el 16/09 sale también
al pie de cada rejilla de categoría, así que sube a la hoja global.
Va al FINAL a propósito: .upsell__btn y .btn--fantasma tienen la misma
especificidad y el botón lleva las dos clases, de modo que gana la que se
declara después. Subirlo de sitio le cambiaría el tamaño al botón.
Deliberadamente MÁS BAJO de contraste que el botón principal —borde y fondo
fantasma, tipografía pequeña— para que no compita con «Añadir al carrito».
Un upsell que grita más que la compra principal la canibaliza. */
.upsell { display: grid; gap: var(--e-2); margin-bottom: var(--e-5); }
.upsell__item {
display: flex; align-items: center; gap: var(--e-3);
padding: var(--e-3);
border: 1px solid var(--borde); border-radius: 10px;
}
.upsell__foto {
width: 48px; height: 60px; object-fit: cover; border-radius: 6px; flex: none;
}
.upsell__texto { flex: 1 1 auto; min-width: 0; }
.upsell__nombre { margin: 0; font-size: var(--t-sm); font-weight: 600; }
.upsell__detalle {
margin: 0; font-family: var(--mono); font-size: .72rem; color: var(--tinta-tenue);
}
.upsell__precio {
font-family: var(--mono); font-size: var(--t-sm); flex: none;
display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15;
}
/* El par vale 6,99 sueltos y 4,99 con look: sin el tachado, «4,99» no dice nada. */
.upsell__antes { font-size: .72rem; color: var(--tinta-tenue); }
.upsell__ahora { font-weight: 600; color: var(--ice); }
.upsell__flag { color: var(--ice); }
/* Cantidad: hay quien quiere dos pares y tenia que anadir, abrir el cajon y
sumar alli. Los dos botones son del tamano tactil minimo. */
.upsell__cant {
flex: none; display: inline-flex; align-items: center; gap: 2px;
border: 1px solid var(--borde); border-radius: 99px; padding: 2px;
background: var(--base);
}
.upsell__mas {
width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
background: transparent; color: var(--tinta); cursor: pointer;
font-size: 1rem; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
}
.upsell__mas:hover { background: var(--superficie-alta); }
.upsell__num {
min-width: 20px; text-align: center;
font-family: var(--mono); font-size: var(--t-sm); color: var(--tinta);
}
.upsell__btn { flex: none; padding: .4rem .7rem; min-height: 36px; font-size: .78rem; }
/* La linea del cajon con los pendientes a precio de acompanamiento. */
.linea__precio { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.linea__antes { font-size: .78rem; color: var(--tinta-tenue); }
.linea__ahora { font-weight: 600; }
/* En la ficha el upsell cae en una columna estrecha; en una categoría tendría
todo el ancho del contenedor y una fila de 1.200 px con una foto de 48 px
parece un error de maquetación. Se le pone el freno aquí, no en la ficha. */
.upsell-cat { margin-top: var(--e-7); }
.upsell-cat .upsell { max-width: 640px; margin-inline: auto; margin-bottom: 0; }
.upsell-cat .etiqueta { text-align: center; margin-bottom: var(--e-3); }
/* En móvil el precio y el botón bajan a su propia fila: con cuatro cosas en
línea, el nombre se partía en tres renglones. */
@media (max-width: 420px) {
.upsell__item { flex-wrap: wrap; }
.upsell__texto { flex: 1 1 60%; }
.upsell__btn { margin-inline-start: auto; }
}