/* ============================================================================ 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.2rem, 1.8rem + 7vw, 7.5rem); /* 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); } .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); } /* 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-xl); 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%; } .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: 68px; } .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-lg); color: var(--tinta-suave); max-width: 46ch; margin-bottom: var(--e-6); } .hero__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); } /* ============================================================================ 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); } } .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; } /* Presentación del look que se anima justo debajo, en la home. Va pegada a la animación a propósito: es su pie de foto, no una sección aparte. */ .intro-scrub { padding-bottom: var(--e-6); } .intro-scrub__texto { max-width: 56ch; 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; } .espera__form .btn { flex: 0 0 auto; } } .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; } .pie__cols { grid-template-columns: repeat(3, 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); padding: var(--e-2) var(--e-4) var(--e-2) 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; } @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, ofertas, 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; } .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 { 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; } /* ── 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); } /* ── 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) url(/assets/frames/pista/poster.webp?v=1) center / cover no-repeat; } .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 */ } .no-js .scrub__sticky { height: 62vh; background: var(--profundo) url(/assets/frames/pista/poster.webp?v=1) center / cover no-repeat; }