/* ========================================================= ARISTAS — Prototipo de experiencia Tipografía real (Montserrat) · tokens reales del selector + capa cálida editorial (elevar) · visualizador de telas ========================================================= */ :root{ /* Colores de marca — Manual de Marca Aristas v2.0 */ --white:#ffffff; /* principal */ --ink:#1e1e1c; /* principal */ --cream:#f4f3ee; /* complementario */ --sand:#eae1d0; /* complementario */ --charcoal:#333333; /* complementario */ --brown:#4a3c3a; /* complementario */ --push:#560408; /* uso EXCLUSIVO piezas push/promocionales — no usar como acento general */ --bg-light:#f8f8f8; --border:#e7e2d9; --text-2:#5a5a5a; /* #8a8177 daba 3,83:1 sobre blanco y 3,44 sobre el crema: por debajo del 4,5 que pide WCAG AA y ocho fallos de contraste en la ficha. Mismo gris calido, un punto mas oscuro: 5,01 y 4,51. No es color de manual, es un gris de interfaz derivado, asi que no toca la identidad. */ --text-3:#766e66; --taupe:#b9a98f; --clay:#8c7357; --espresso:#1e1e1c; --accent:#8c7357; --accent-ink:#6f5a44; --ease:cubic-bezier(.4,0,.2,1); --sans:'FuturaPT','Montserrat',-apple-system,'Helvetica Neue',Arial,sans-serif; --display:'Amadine','Montserrat',-apple-system,sans-serif; --maxw:1360px; } @font-face{font-family:'Amadine';src:url('../fonts/Amandine_Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'Amadine';src:url('../fonts/Amandine_Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Amadine';src:url('../fonts/Amandine_Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'FuturaPT';src:url('../fonts/FuturaPTLight.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'FuturaPT';src:url('../fonts/FuturaPTBook.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'FuturaPT';src:url('../fonts/FuturaPTMedium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'FuturaPT';src:url('../fonts/FuturaPTDemi.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} .screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important} del{color:var(--text-3);text-decoration:line-through;margin-right:8px;font-size:.8em} ins{text-decoration:none} *{box-sizing:border-box} html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* Los enlaces a un ancla de la misma pagina saltaban de golpe. El desplazamiento suave lo hace el navegador, pero hay que pedirlo; se deja fuera para quien tenga activado "reducir movimiento" en su sistema. No afecta a los carruseles: los suyos van en el elemento de la pista. */ @media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}} /* font-size 15 -> 16: escala de letra B aprobada por Aristas el 2026-10-05 (11->12, 12->13, 13->14, 14->15, 15->16; de 16px para arriba no cambia), aplicada a TODOS los font-size del tema salvo el encabezado. El encabezado no hereda este tamano: cada pieza suya declara el propio. */ body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--white);font-weight:400;font-size:16px;line-height:1.62} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} /* Los controles sin tamano propio traian el de fabrica del navegador (13,33px) y la escala de letra B los subia a 14px junto con el resto (13 -> 14). :where() deja la especificidad en cero: cualquier regla con tamano propio, del tema o de un plugin, gana como siempre. El encabezado no entra: la segunda regla le deja su 13,33 de fabrica a los controles sin tamano propio. TAMBIEN con :where(): un `#headerMobile button` normal (especificidad de id) le habria ganado a .header-mobile__close y a .header-mobile__expand, que si declaran el suyo. */ :where(button,input,select,textarea){font-size:14px} :where(.site-header,#headerMobile) :where(button,input,select,textarea){font-size:13.3333px} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px} .linky{background:none;border:none;color:var(--accent);border-bottom:1px solid currentColor;padding:0 0 1px;font-size:inherit} .section-title{font-weight:600;font-size:28px;line-height:1.15;letter-spacing:-.01em;margin:0} .section-sub{color:var(--text-2);margin:.6em 0 0;max-width:54ch;font-weight:400} /* --accent da 4,46:1 sobre blanco, justo por debajo del 4,5. --accent-ink es la variante del mismo color pensada para texto y llega a 6,3. */ .eyebrow{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 14px;font-weight:600} .eyebrow span{color:var(--text-3)} /* ================= HEADER ================= */ .site-header{position:relative;z-index:100;width:100%} /* --- variante NEGRO (producto/categoría/carrito/checkout): barra sólida, texto oscuro, sticky normal, sin overlay sobre ningún hero --- */ /* sin position:sticky en el header completo — la fila sticky se define abajo */ .header--negro{background:var(--white);border-bottom:1px solid var(--border);--hc:var(--ink);--hc-2:var(--text-2)} /* --- variante BLANCO (home + resto): flota transparente sobre el hero, texto claro; al hacer scroll pasa a fija, sólida y con texto oscuro --- */ /* La barra negra NO puede flotar sobre el banner: es un bloque sólido. Se queda en el flujo y solo la fila del menú va encima del arte (regla más abajo). Antes esto valía solo en móvil, porque en escritorio el topbar era transparente; con el rediseño del mockup es negro en los dos anchos. */ .header--blanco{position:relative;background:transparent;--hc:#fff;--hc-2:rgba(255,255,255,.78)} /* Al hacer scroll el blanco se comporta IGUAL que el negro (verificado en producción): colapsa el topbar, deja fija solo la fila del menú sobre el velo negro y el contenido en blanco. Antes pasaba a una barra blanca sólida conservando las tres filas, que no es lo que hace producción. */ /* --- header--negro al hacer scroll (comportamiento de producción) --- NADA se colapsa por animación: las filas que sobran (topbar y, en desktop, la del logo) simplemente se van con el scroll, y solo una fila es sticky. Es importante que sea así y no con max-height animado: el header está en el flujo, así que encogerlo mueve todo el contenido hacia arriba de golpe, y ese salto vuelve a cruzar el umbral del scroll → titileo. Al quedar pegada, la barra pasa a un velo negro con el contenido en blanco. Producción invierte el logo con filter:brightness(0) invert(1); acá cruzamos al logo-blanco.png real. */ .site-header.is-scrolled{--hc:#fff;--hc-2:rgba(255,255,255,.6)} .site-header.is-scrolled .header-logo__img--dark{opacity:0} .site-header.is-scrolled .header-logo__img--light{opacity:1} /* Centinela de 1px: marca dónde empieza la fila sticky. El JS observa cuándo sale del viewport, que es exactamente cuando la fila queda pegada — sin umbrales de scroll que oscilen. El margen negativo lo deja sin alto real. */ .header-sticky-sentinel{display:block;height:1px;margin-bottom:-1px} /* La fila sticky es distinta según el ancho: en desktop la del menú (y la del logo le pasa por debajo, visible a través del velo); en móvil .header-main entera, porque ahí el logo vive en esa misma fila. */ /* position:fixed y no sticky: una fila interna solo se pega dentro de la caja de su padre, y el padre es el header — se despegaría a los pocos píxeles. Al pasar a fixed la fila sale del flujo, así que su padre recibe un padding equivalente (--sticky-h, medido en JS) y el contenido no se mueve ni un px. Se califica con .header--negro porque .header-main__row se redefine más abajo con position:relative y, a igual especificidad, ganaría por orden. */ /* El logo ya vive DENTRO de la fila del menú, así que la fila que se pega es la misma en los dos anchos: .header-main entera. Antes en escritorio era solo .header-main__row--nav, para dejar pasar la fila del logo por debajo. En --blanco, el hero arranca justo debajo de la barra negra y la fila del menú se le monta encima; si flotara también la barra negra, el arte subiría ~40px y el logo caería sobre el texto que viene dentro de la imagen. */ .header--negro .header-main{background:var(--white);transition:background .3s var(--ease)} .header--blanco .header-main{background:transparent;transition:background .3s var(--ease);position:absolute;top:100%;left:0;right:0} .site-header.is-scrolled .header-main{position:fixed;top:0;left:0;right:0;z-index:30;background:rgba(0,0,0,.45)} /* Solo la variante NEGRA compensa: ahí .header-main está en el flujo y al pasar a fixed deja un hueco de --sticky-h. En la BLANCA ya es absolute, así que no ocupa flujo y este padding no compensaba nada — empujaba el hero 96px hacia abajo justo al pegarse. */ .header--negro.is-scrolled{padding-bottom:var(--sticky-h,0px)} /* --- barra pegada compacta --- Al pegarse, el logo baja de 200 a 150px y el aire de 20 a 9px: la fila pasa de 96 a ~60px, un 37% menos de pantalla comida. No hace falta volver a medir --sticky-h: el hueco que hay que tapar en el flujo es el del alto ORIGINAL, no el del comprimido. */ .site-header.is-scrolled .header-main__row{padding-top:9px;padding-bottom:9px} .site-header.is-scrolled .header-logo__img{width:150px} /* el buscador se abre sobre la barra pegada, no en lo alto del documento */ .site-header.is-scrolled .header-search{position:fixed;top:0} /* --- barra negra: enlaces · promo · redes + lupa + carrito --- Negra en los dos anchos (antes solo en móvil). Los colores son los del manual v2 — fondo --ink, texto --sand — y no los del mockup (#1a1a1a / #cfc6b8), que eran valores sueltos de la maqueta sin respaldo de marca. */ .header-topbar{background:var(--ink);--hc:var(--sand);--hc-2:rgba(255,255,255,.45)} .header-topbar__inner{max-width:var(--maxw);margin:0 auto;padding:9px 40px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px} .header-topbar__links{grid-column:1;justify-self:start} .header-topbar__promo{grid-column:2;justify-self:center} .header-topbar__utils{grid-column:3;justify-self:end} .header-topbar__links{display:flex;align-items:center;gap:0;font-size:11px;min-width:0;font-weight:400;letter-spacing:.12em;text-transform:uppercase;list-style:none;margin:0;padding:0} /* El menu ahora va dentro de un