/* ============================================================ FRAGANCIA URBANA — Global Stylesheet ============================================================ */ /* Geist y Cormorant Garamond se cargan vía en el de cada página — no repetir acá con @import (bloquea el render y duplica la descarga). */ /* ── TOKENS ─────────────────────────────────────────────── */ :root { --cream: #F5F0E8; --gold: #C9A84C; --gold-light: #E8D5A3; --dark: #0D0B09; --dark-2: #1A1712; --dark-3: #2A2520; --text: #E8E0D0; --text-muted: #968C7C; /* antes #8A7F6E: daba 3.86 sobre dark-3 (no llegaba a AA 4.5). Ahora 5.9 / 5.4 / 4.6 sobre dark / dark-2 / dark-3 */ --white: #FAF7F2; --font-display: 'Cormorant Garamond', serif; --font-body: 'Geist', system-ui, sans-serif; --nav-h: 72px; --ticker-h: 36px; --total-top: calc(var(--ticker-h) + var(--nav-h)); --radius: 4px; --radius-lg: 8px; --transition: 0.3s ease; /* Escala tipografica: solo tamanos pares en px (base 16px), expresados en rem */ --fs-10: 0.625rem; --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-28: 1.75rem; --fs-32: 2rem; --fs-36: 2.25rem; --fs-40: 2.5rem; --fs-48: 3rem; /* Ritmo vertical del footer: mismo paso entre lineas/items en todos los bloques */ --footer-line: 20px; /* alto de cada linea de texto */ --footer-gap: 10px; /* aire entre items -> paso = 30px */ /* Escala de espaciado (px enteros; usar en padding / margin / gap) */ --space-2: 0.125rem; --space-4: 0.25rem; --space-8: 0.5rem; --space-12: 0.75rem; --space-16: 1rem; --space-20: 1.25rem; --space-24: 1.5rem; --space-32: 2rem; --space-40: 2.5rem; --space-48: 3rem; --space-64: 4rem; --space-80: 5rem; --space-96: 6rem; /* Radios: --radius (4px) y --radius-lg (8px) ya existian; el circulo usa 50% */ --radius-pill: 999px; } /* ── RESET ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── JERARQUIA DE TITULOS (h1–h6) ───────────────────────── Roles tipograficos sobre la escala par (--fs-*). Cada nivel tiene UN tamano base. Usan :where() (especificidad 0): NO pisan las reglas por clase que ya existen y no tocan fuente, grosor ni interlineado, asi que los titulos actuales se ven exactamente igual. Los rangos clamp() son fluidos por diseno. */ :root { --text-display: clamp(2.5rem, 6vw, 5rem); /* hero: 40px -> 80px */ --text-h1: clamp(2rem, 4vw, 3.5rem); /* titulo de pagina: 32px -> 56px */ --text-h2: clamp(2rem, 3.5vw, 3rem); /* titulo de seccion: 32px -> 48px */ --text-h3: var(--fs-24); /* titulo de tarjeta */ --text-h4: var(--fs-18); --text-h5: var(--fs-16); --text-h6: var(--fs-14); } :where(h1) { font-size: var(--text-h1); } :where(h2) { font-size: var(--text-h2); } :where(h3) { font-size: var(--text-h3); } :where(h4) { font-size: var(--text-h4); } :where(h5) { font-size: var(--text-h5); } :where(h6) { font-size: var(--text-h6); } /* Clases de rol para titulos NUEVOS (o los que se quieran unificar): tamano + grosor + interlineado del rol. No se aplican a los titulos existentes para no cambiar su aspecto actual (varios dependen del negrita por defecto del navegador o de un interlineado heredado). Ej.:

. */ .t-display, .t-h1, .t-h2, .t-h3, .t-h4, .t-h5, .t-h6 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; } .t-display { font-size: var(--text-display); } .t-h1 { font-size: var(--text-h1); } .t-h2 { font-size: var(--text-h2); } .t-h3 { font-size: var(--text-h3); } .t-h4 { font-size: var(--text-h4); } .t-h5 { font-size: var(--text-h5); } .t-h6 { font-size: var(--text-h6); } /* Solo para lectores de pantalla y buscadores: existe en el HTML pero no se ve */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; /* Mismo fondo oscuro que body: si el navegador hace "rebote" al llegar al final/inicio de la página (rubber-band scroll), que se vea el mismo oscuro del sitio y no un margen negro/blanco de golpe. */ background: var(--dark); /* El scroll para en seco al llegar arriba/abajo — sin el "rebote" elástico de iOS/Chrome que deja ver ese margen fuera de la página. */ overscroll-behavior-y: none; } body { background: var(--dark); color: var(--text); font-family: var(--font-body); font-size: var(--fs-16); line-height: 1.6; /* El overflow-x/overscroll-behavior queda SOLO en html: si body también define overflow, algunos navegadores "heredan" el scroll de body en vez de html (comportamiento legado) y entonces el corte del rebote definido en html deja de aplicarse — por eso no se repite acá. */ position: relative; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* ── TICKER ─────────────────────────────────────────────── */ #ticker-root { position: fixed; top: 0; left: 0; width: 100%; height: var(--ticker-h); background: var(--gold); z-index: 1000; overflow: hidden; display: flex; align-items: center; } .ticker-track { display: flex; gap: 0; white-space: nowrap; animation: ticker-scroll 28s linear infinite; } .ticker-track span { font-family: var(--font-body); font-size: var(--fs-10); font-weight: 500; letter-spacing: 0.35em; text-transform: uppercase; color: var(--dark); padding: 0 var(--space-48); } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── NAV ────────────────────────────────────────────────── */ #nav-root { position: fixed; top: var(--ticker-h); left: 0; width: 100%; z-index: 999; } .nav-inner { display: flex; align-items: center; height: var(--nav-h); padding: 0 var(--space-40); background: rgba(13, 11, 9, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(201, 168, 76, 0.12); transition: border-bottom-color var(--transition); } .nav-inner.scrolled { border-bottom-color: rgba(201, 168, 76, 0.35); } .nav-logo { display: flex; align-items: center; gap: var(--space-12); flex-shrink: 0; } .nav-logo img { height: 36px; width: auto; } #logo-3d-wrap { width: 56px; height: 56px; flex-shrink: 0; position: relative; } #logo-3d-canvas { width: 100%; height: 100%; display: block; } /* Emblema estatico (liviano): se ve desde el primer pintado, y en movil/tablet es el unico. En escritorio el logo 3D se carga despues de que la pagina termina y, cuando esta listo, este emblema se desvanece. Mide ~31px de alto, igual que el emblema dentro del canvas 3D. */ #logo-3d-wrap .logo-static { position: absolute; left: 50%; top: 50%; height: 31px; width: auto; transform: translate(-50%, -50%); transition: opacity 0.5s ease; pointer-events: none; } #logo-3d-wrap.logo-3d-ready .logo-static { opacity: 0; } #logo-3d-canvas { position: relative; } .nav-logo-text { font-family: var(--font-display); font-size: var(--fs-16); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); } .nav-links { display: flex; align-items: center; gap: var(--space-4); margin: 0 auto; } .nav-links > li { position: relative; } .nav-links > li > a, .nav-links > li > button { font-family: var(--font-body); font-size: var(--fs-12); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); padding: var(--space-8) var(--space-16); transition: color var(--transition); display: flex; align-items: center; gap: var(--space-4); } .nav-links > li > a:hover, .nav-links > li > button:hover, .nav-links > li > a.active { color: var(--gold); } .nav-arrow { font-size: var(--fs-10); transition: transform var(--transition); } .nav-links > li.open .nav-arrow { transform: rotate(180deg); } /* Dropdown */ .nav-dropdown { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 210px; background: var(--dark-2); border: 1px solid rgba(201, 168, 76, 0.15); border-radius: var(--radius-lg); padding: var(--space-8) 0; opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; } .nav-links > li.open .nav-dropdown { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); } .nav-dropdown a { display: block; padding: var(--space-12) var(--space-20); font-size: var(--fs-14); letter-spacing: 0.05em; color: var(--text); transition: color var(--transition), background var(--transition); } .nav-dropdown a:hover { color: var(--gold); background: rgba(201, 168, 76, 0.06); } /* Nav right */ /* order:3 -> va tercero en el cluster de utilidades (ver nota más abajo junto a .nav-lang-toggle-persistent / .nav-a11y-toggle). */ .nav-right { display: flex; align-items: center; gap: var(--space-16); flex-shrink: 0; order: 3; } .nav-search { color: var(--text-muted); font-size: var(--fs-18); transition: color var(--transition); cursor: pointer; background: none; border: none; } .nav-search:hover { color: var(--gold); } .nav-lang-toggle { font-family: inherit; font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted); background: none; border: 1px solid rgba(201, 168, 76, 0.35); border-radius: var(--radius); padding: var(--space-4) var(--space-8); cursor: pointer; transition: color var(--transition), border-color var(--transition); } .nav-lang-toggle:hover { color: var(--gold); border-color: var(--gold); } /* Botón de idioma persistente: vive fuera de .nav-right a propósito (ver js/global.js) para que nunca desaparezca en tablet/celular, donde .nav-right entero se oculta. Cluster de utilidades del nav — un solo grupo visual pegado al extremo derecho, orden de izquierda a derecha: Idioma -> Accesibilidad -> Usuario -> Carrito (el carrito último, con más peso visual, por ser la conversión principal). El orden visual se controla con `order` en vez de reordenar el HTML, porque el idioma y accesibilidad viven fuera de .nav-right a propósito (deben seguir visibles en tablet/celular, donde .nav-right entero se oculta). El margin-left:auto va SOLO en el primer elemento del grupo (idioma) para absorber todo el espacio libre de una sola vez — así el cluster completo queda pegado a la derecha y separado del menú de navegación con un espacio amplio y limpio (dos zonas claras: navegación vs. utilidades+carrito). El gap entre los 4 elementos es consistente (14px) en vez de márgenes sueltos por botón. */ .nav-lang-toggle-persistent { order: 1; margin-left: auto; margin-right: var(--space-16); } .nav-a11y-toggle { order: 2; margin-left: 0; margin-right: var(--space-16); } /* Botón de accesibilidad dentro del nav: círculo con el mismo trazo/color que el pill de idioma (.nav-lang-toggle) para que ambos se lean como parte del mismo grupo. */ .nav-a11y-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--text-muted); background: none; border: 1px solid rgba(201, 168, 76, 0.35); border-radius: 50%; padding: 0; cursor: pointer; transition: color var(--transition), border-color var(--transition); } .nav-a11y-toggle:hover { color: var(--gold); border-color: var(--gold); } .nav-a11y-toggle .nav-icon { opacity: 0.85; } @media (max-width: 1024px) { .nav-a11y-toggle, .nav-lang-toggle-persistent { margin-right: var(--space-12); } } .nav-mobile-lang { font-family: inherit; font-size: var(--fs-16); color: var(--text-muted); background: none; border: none; border-top: 1px solid rgba(255,255,255,0.08); text-align: left; padding: var(--space-16) var(--space-24); cursor: pointer; width: 100%; } /* Íconos del design system Maison d'Or (SVG ya vienen en --gold #C9A84C) */ .nav-icon { display: block; opacity: 0.7; transition: opacity var(--transition); } .nav-search:hover .nav-icon { opacity: 1; } .nav-cart { display: inline-flex; align-items: center; gap: var(--space-8); font-size: var(--fs-12); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); padding: var(--space-8) var(--space-16); border: 1px solid rgba(201, 168, 76, 0.35); border-radius: var(--radius-pill); transition: all var(--transition); white-space: nowrap; } .nav-icon-cart { opacity: 1; } .nav-cart:hover { border-color: var(--gold); color: var(--gold); } .nav-cart-mobile { display: none; position: relative; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: var(--space-12); order: 4; /* mismo cluster que .nav-right en desktop: idioma, accesibilidad, [usuario/carrito de escritorio], carrito mobile, hamburguesa */ } .nav-cart-badge { display: none; position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 var(--space-4); border-radius: 50%; background: var(--gold); color: var(--dark); font-size: var(--fs-10); font-weight: 700; align-items: center; justify-content: center; line-height: 1; } /* Hamburger */ .nav-hamburger { display: none; flex-direction: column; gap: var(--space-4); padding: var(--space-4); order: 5; /* Sin este margen queda pegado al borde derecho de la pantalla en celulares reales (confirmado en un Samsung S24) — el padding lateral de .nav-inner no alcanza a compensar el padding interno del botón. */ margin-right: var(--space-4); } .nav-hamburger span { display: block; width: 24px; height: 1.5px; background: var(--text); transition: all var(--transition); } .nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile menu */ .nav-mobile { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--dark); z-index: 998; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-4); padding-left: 12%; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .nav-mobile.open { opacity: 1; pointer-events: all; } .nav-mobile a { display: flex; align-items: center; gap: var(--space-12); width: 100%; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-16); color: var(--text); padding: var(--space-8) 0; transition: color var(--transition); } .nav-mobile a:hover { color: var(--gold); } .nav-mobile-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; } .nav-mobile-sub a { font-size: var(--fs-16); font-weight: 600; color: var(--text-muted); } .nav-mobile-close { position: absolute; top: calc(var(--ticker-h) + 1.25rem); right: 1.25rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid rgba(201,168,76,0.3); border-radius: 50%; cursor: pointer; z-index: 999; } .nav-mobile-close span { position: absolute; width: 18px; height: 1.5px; background: var(--text); } .nav-mobile-close span:nth-child(1) { transform: rotate(45deg); } .nav-mobile-close span:nth-child(2) { transform: rotate(-45deg); } /* ── FOOTER ─────────────────────────────────────────────── */ #footer-root { background: var(--dark-2); border-top: 1px solid rgba(201, 168, 76, 0.08); padding: var(--space-64) var(--space-40) var(--space-32); margin-top: var(--space-96); } /* En las páginas donde la última sección antes del footer es la foto de "Quedate al tanto" (index, catálogo, promociones, mayoristas, ayuda, nosotros) no queremos el margen de separación estándar: la foto debe pasar directo al footer, sin franja negra de por medio. Se marca el
con data-ends-newsletter en vez de repetir un id por página. */ main[data-ends-newsletter] + #footer-root { margin-top: 0; } .footer-inner { max-width: 1200px; margin: 0 auto; } .footer-top { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--space-24); /* 24px: con 1200px de ancho cada columna mide 282px y el correo (280px) cabe sin forzar la 4a columna */ row-gap: var(--space-32); padding-bottom: var(--space-40); border-bottom: 1px solid rgba(201,168,76,0.08); } /* Bajo ~1280px las 4 columnas ya no le dan al correo sus 280px: pasa a 2x2 con columnas iguales */ @media (max-width: 1279px) { .footer-top { grid-template-columns: repeat(2, 1fr); } } .footer-brand img { height: 40px; margin-bottom: var(--space-16); } .footer-tagline { font-size: var(--fs-14); color: var(--text-muted); line-height: calc(var(--footer-line) + var(--footer-gap)); /* 30px: mismo paso que los items */ max-width: 260px; } .footer-col h4, .footer-col .footer-heading { font-family: var(--font-body); font-size: var(--fs-12); letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-20); } .footer-col ul li { margin-bottom: var(--footer-gap); font-size: var(--fs-14); /* mismo tamano que el link, evita 0.5px extra por el strut de 16px */ line-height: var(--footer-line); } .footer-col ul li a { font-size: var(--fs-14); line-height: var(--footer-line); color: var(--text-muted); transition: color var(--transition); } .footer-col ul li a:hover { color: var(--gold); } .footer-sinpe-badge { background: var(--dark-3); border: 1px solid rgba(201, 168, 76, 0.25); border-radius: var(--radius-lg); padding: var(--space-16) var(--space-20); margin-bottom: var(--space-16); } .footer-sinpe-badge .sinpe-label { font-size: var(--fs-10); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-4); } .footer-sinpe-badge .sinpe-number { font-family: var(--font-display); font-size: var(--fs-24); color: var(--gold-light); font-weight: 500; } .footer-sinpe-badge .sinpe-name { font-size: var(--fs-12); color: var(--text-muted); margin-top: var(--space-4); } .footer-contact a { font-size: var(--fs-14); color: var(--text-muted); transition: color var(--transition); display: block; margin-bottom: var(--space-8); } .footer-contact a:hover { color: var(--gold); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-32); flex-wrap: wrap; gap: var(--space-16); } .footer-bottom p:first-child { font-size: var(--fs-12); color: var(--text-muted); margin: 0; } .footer-copy { font-size: var(--fs-12); color: var(--text-muted); } .footer-disclaimer { font-size: var(--fs-12); color: var(--text-muted); opacity: 0.6; max-width: 600px; line-height: 1.5; } .footer-socials { display: flex; gap: var(--space-16); } .footer-socials a { font-size: var(--fs-12); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); transition: color var(--transition); } .footer-socials a:hover { color: var(--gold); } .footer-legal { font-size: var(--fs-12); color: var(--text-muted); opacity: 1; max-width: 700px; line-height: 1.5; margin: 0; } .footer-bottom-left { display: flex; flex-direction: column; gap: var(--space-4); } .footer-bottom-left p { margin: 0; font-size: var(--fs-12); color: var(--text-muted); } .footer-credit a { color: var(--gold); text-decoration: none; } .footer-credit a:hover { text-decoration: underline; } /* ── PAGE WRAPPER ───────────────────────────────────────── */ .page-content { padding-top: var(--space-96); } /* ── BUTTONS ────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: var(--space-8); font-family: var(--font-body); font-size: var(--fs-12); letter-spacing: 0.12em; text-transform: uppercase; padding: var(--space-12) var(--space-32); border-radius: var(--radius); transition: all var(--transition); cursor: pointer; } .btn-gold { background: transparent; color: var(--gold); border: 1px solid var(--gold); } .btn-gold:hover { background: var(--gold); color: var(--dark); } .btn-gold-solid { background: var(--gold); color: var(--dark); border: 1px solid var(--gold); } .btn-gold-solid:hover { background: var(--gold-light); border-color: var(--gold-light); } .btn-wa { background: #25D366; color: #fff; border: 1px solid #25D366; } .btn-wa:hover { background: #1ebe5c; border-color: #1ebe5c; } .btn-dark { background: var(--dark-3); color: var(--text); border: 1px solid rgba(201, 168, 76, 0.2); } .btn-dark:hover { border-color: var(--gold); color: var(--gold); } /* ── HERO (full viewport) ───────────────────────────────── */ .hero { /* .page-content (el wrapper que lo contiene) ya suma 100px de padding-top para no quedar tapado por el nav fijo. Si el hero además pidiera 100vh completo, el total (100px + 100vh) se pasaría del alto real de la pantalla y el buscador/flechas de abajo quedarían fuera de vista sin scrollear un poco. Restamos esos 100px acá para que el hero termine justo en el borde inferior de la ventana, sin necesitar bajar nada. */ position: relative; height: calc(100vh - 100px); min-height: 600px; overflow: hidden; background: #0a0a0a; } /* Placeholder visible al instante (sin esperar JS/fetch) mientras se cargan los hero slides desde Supabase — evita el "flash" negro vacío en la primera carga de la página. Se oculta desde JS (renderHeroSlides) apenas ya hay contenido para pintar. */ .hero-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; transition: opacity 0.35s ease; } .hero-loading.hero-loading--hidden { opacity: 0; pointer-events: none; } .hero-loading-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold, #c9a84c); animation: hero-loading-pulse 1s ease-in-out infinite; } @keyframes hero-loading-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } } .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; /* GSAP mueve este elemento (float + drag); su propia capa de GPU evita que quede "pegado" con un hueco negro arriba hasta forzar repintado. */ will-change: transform; backface-visibility: hidden; } /* Fotos con la persona hacia la derecha del encuadre (heroes fuego/agua): en pantallas altas y angostas (celular/tablet) el recorte "cover" centrado deja a la persona casi fuera de cuadro. La corremos hacia la derecha. */ .hero-bg-subject-right { background-position: 78% top; } .hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(13,11,9,0.05) 0%, rgba(13,11,9,0.30) 100%); z-index: 1; } /* Sombra lateral del hero (oscurece el lado izquierdo, donde va el texto) */ .hero-side-shadow { position: absolute; inset: 0; width: 100%; height: 100%; background: linear-gradient( 90deg, rgba(13, 11, 9, 1) 0%, rgba(13, 11, 9, 0.7) 35%, rgba(13, 11, 9, 0) 65%, rgba(13, 11, 9, 0) 100% ); z-index: 1; } .hero-content { position: absolute; z-index: 2; bottom: 8rem; left: 4rem; max-width: 680px; } .hero-eyebrow { font-size: var(--fs-10); letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-20); } .hero h1, .hero h2 { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 5rem); font-weight: 300; line-height: 1.05; color: var(--white); margin-bottom: var(--space-20); text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 6px 20px rgba(0,0,0,0.75); } .hero h1 em, .hero h2 em { font-style: italic; color: var(--gold); } .hero-sub { font-size: var(--fs-14); color: var(--gold-light); margin-bottom: var(--space-32); max-width: 480px; line-height: 1.7; text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 6px 16px rgba(0,0,0,0.7); } .hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-16); } /* ── SHORT HERO ─────────────────────────────────────────── */ .hero-short { position: relative; height: 42vh; min-height: 280px; display: flex; align-items: flex-end; overflow: hidden; } .hero-short-content { position: relative; z-index: 2; padding: var(--space-40) var(--space-40); width: 100%; max-width: 1200px; margin: 0 auto; } /* Variante usada en tienda/nosotros/faq/promociones/términos: hero corto con foto+canvas 3D de fondo, contenido alineado a la izquierda sin límite de ancho central. En mobile el padding fijo de 3.5rem se reduce para no comerse casi todo el ancho de pantalla. */ .hero-short-content-wide { max-width: none; width: auto; margin: 0; padding-left: var(--space-64); padding-right: var(--space-32); } .hero-short h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 400; color: var(--white); margin-bottom: var(--space-8); opacity: 0; } .hero-short .hero-eyebrow { margin-bottom: var(--space-12); } /* ── SECTION SPACING ────────────────────────────────────── */ section { padding: var(--space-80) var(--space-40); } .section-inner { max-width: 1200px; margin: 0 auto; } .section-header { margin-bottom: var(--space-48); } .section-title { font-family: var(--font-display); font-size: clamp(var(--fs-28), 3.5vw, var(--fs-48)); font-weight: 400; color: var(--white); margin-bottom: var(--space-12); } .section-subtitle { font-size: var(--fs-16); color: var(--text-muted); max-width: 520px; } .eyebrow { font-size: var(--fs-12); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-12); } /* ── RATINGS STRIP ──────────────────────────────────────── */ .ratings-strip { padding: var(--space-24) var(--space-40); background: var(--dark-2); border-top: 1px solid rgba(201, 168, 76, 0.08); border-bottom: 1px solid rgba(201, 168, 76, 0.08); text-align: center; } .ratings-strip p { font-size: var(--fs-14); letter-spacing: 0.1em; color: var(--text-muted); } .ratings-strip .stars { color: var(--gold); font-size: var(--fs-16); letter-spacing: 0.1em; } /* ── HERO SEARCH BAR (reemplaza el rating strip en index.html) ──── */ .hero-search-strip { padding: var(--space-24) var(--space-20); } .hero-search-wrap { position: relative; max-width: 620px; margin: 0 auto; } .hero-search-wrap input { width: 100%; background: #ffffff; border: 1px solid var(--gold); color: #17140f; padding: var(--space-16) 7.5rem var(--space-16) var(--space-48); font-size: var(--fs-16); outline: none; border-radius: var(--radius); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(201, 168, 76, 0.15); } .hero-search-wrap input::placeholder { color: rgba(23, 20, 15, 0.45); } .hero-search-wrap img { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; opacity: 0.7; pointer-events: none; } .hero-search-wrap input:focus { border-color: var(--gold); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25), 0 0 0 4px rgba(201, 168, 76, 0.28); } .hero-search-wrap #hero-search-btn { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: var(--gold); color: #17140f; border: none; border-radius: var(--radius); padding: var(--space-12) var(--space-20); font-size: var(--fs-14); font-weight: 600; cursor: pointer; letter-spacing: 0.02em; transition: opacity 0.15s ease; } .hero-search-wrap #hero-search-btn:hover { opacity: 0.85; } @media (max-width: 640px) { .hero-search-wrap input { padding: var(--space-16) var(--space-96) var(--space-16) var(--space-48); font-size: var(--fs-14); } .hero-search-wrap img { left: 0.9rem; width: 17px; height: 17px; } .hero-search-wrap #hero-search-btn { padding: var(--space-8) var(--space-12); font-size: var(--fs-12); } } /* ── GRID CARDS ─────────────────────────────────────────── */ .collections-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); } .collection-card { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg); cursor: pointer; border: 1px solid rgba(201, 168, 76, 0.25); transition: border-color 0.4s ease, transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease; } .collection-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.35); } .collection-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: 75% top; z-index: 0; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); } .collection-card:hover .collection-card-bg { transform: scale(1.06); } .collection-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,7,5,0.95) 0%, rgba(8,7,5,0.55) 45%, rgba(8,7,5,0.05) 75%); } .collection-card-content { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-32) var(--space-32); z-index: 2; } .collection-card-tag { font-size: var(--fs-10); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: var(--space-8); text-shadow: 0 1px 6px rgba(0,0,0,0.7); } .collection-card h3 { font-family: var(--font-display); font-size: var(--fs-24); font-weight: 400; color: var(--white); margin-bottom: var(--space-8); } .collection-card p { font-size: var(--fs-14); color: var(--text-muted); margin-bottom: var(--space-16); } .collection-card-link { font-size: var(--fs-12); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); transition: gap var(--transition); display: inline-flex; align-items: center; gap: var(--space-8); } .collection-card-link:hover { gap: var(--space-12); } .link-arrow { width: 13px; height: 13px; display: block; } /* ── PRODUCT CARDS ──────────────────────────────────────── */ .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; align-items: stretch; } /* Propuesta "D" — editorial de revista (sin número fantasma) */ .product-card { position: relative; display: flex; flex-direction: column; background: var(--dark-2); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-lg); overflow: hidden; padding: var(--space-24) var(--space-20) var(--space-20); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease; } .product-card:hover { border-color: rgba(201, 168, 76, 0.4); transform: translateY(-5px); } .product-card-img { width: 100%; aspect-ratio: 1 / 1.05; overflow: hidden; background: #fdfcfa; border-radius: var(--radius); flex-shrink: 0; position: relative; margin-bottom: var(--space-16); padding: var(--space-16); } /* Corazón "guardar" — ícono real del design system, sin fondo, al ras */ .wishlist-btn { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; } .wishlist-btn img { width: 19px; height: 19px; display: block; transition: transform 0.25s ease; } .wishlist-btn:hover img { transform: scale(1.15); } .wishlist-btn.is-active img { transform: scale(1.1); } .product-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); } .product-card:hover .product-card-img img { transform: scale(1.05); } .product-card-body { padding: 0; display: flex; flex-direction: column; flex: 1; } .product-card-brand { font-size: var(--fs-10); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-card-name { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--fs-18); --name-lh: 24px; /* alto de linea en px enteros (font 18px) */ --name-lines: 2; /* lineas visibles (movil usa 3) */ line-height: var(--name-lh); color: var(--text); margin-bottom: var(--space-4); display: -webkit-box; -webkit-line-clamp: var(--name-lines); -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; /* la caja mide EXACTAMENTE N lineas (siempre N, aunque el nombre sea corto) y ya no depende del tamano de fuente */ min-height: calc(var(--name-lh) * var(--name-lines)); max-height: calc(var(--name-lh) * var(--name-lines)); } .product-card-price { font-weight: 800; font-size: var(--fs-16); letter-spacing: -0.01em; color: var(--text); margin-top: var(--space-12); margin-bottom: var(--space-16); padding-top: var(--space-12); background-image: linear-gradient(90deg, var(--gold), transparent 75%); background-repeat: no-repeat; background-size: 100% 1px; background-position: top left; } /* Botón "glass con relieve" dentro de las cards (Ver más / Agregar / WhatsApp) */ .product-card-body .btn { position: relative; border-radius: var(--radius-pill); font-weight: 700; font-size: var(--fs-12); letter-spacing: 0.06em; padding: var(--space-16) var(--space-24); border: 1px solid rgba(255,255,255,0.18); background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 -6px 12px rgba(0,0,0,0.35) inset, 0 8px 20px rgba(0,0,0,0.4); transition: all 0.35s cubic-bezier(0.22,1,0.36,1); } .product-card-body .btn:hover { transform: translateY(-2px); } .product-card-body .btn.btn-dark:hover, .product-card-body .btn.btn-gold:hover, .product-card-body .btn.btn-gold-solid:hover { background: linear-gradient(180deg, rgba(201,168,76,0.9), rgba(201,168,76,0.65)); color: var(--dark); border-color: var(--gold); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 -6px 14px rgba(0,0,0,0.15) inset, 0 12px 26px rgba(201,168,76,0.35); } .product-card-body .btn.btn-wa { color: #fff; background: linear-gradient(180deg, rgba(37,211,102,0.25), rgba(37,211,102,0.08)); border-color: rgba(37,211,102,0.3); } .product-card-body .btn.btn-wa:hover { background: linear-gradient(180deg, rgba(37,211,102,0.95), rgba(37,211,102,0.7)); border-color: #25D366; box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 -6px 14px rgba(0,0,0,0.15) inset, 0 12px 26px rgba(37,211,102,0.35); } .product-card-body .btn:active { transform: translateY(0); } /* ── 2-COL GRID ─────────────────────────────────────────── */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); } /* Grid de promociones activas: en vez de 3 columnas fijas que dejan un hueco vacío cuando hay 1 o 2 promos activas, cada tarjeta tiene un ancho fijo y el grid las centra — con 1 sale centrada sola, con 2 ambas centradas, con 3+ se acomodan igual centradas y en filas. */ #promos-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 340px)); justify-content: center; } /* ── VALUE PROP 2-COL ───────────────────────────────────── */ .value-prop { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-80); align-items: center; } .value-prop-img { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; } .value-prop-img img { width: 100%; height: 100%; object-fit: cover; } .value-prop-text h2 { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 400; color: var(--white); margin-bottom: var(--space-24); line-height: 1.2; } .value-list { display: flex; flex-direction: column; gap: var(--space-12); margin-bottom: var(--space-32); } .value-list li { display: flex; align-items: center; gap: var(--space-12); font-size: var(--fs-16); color: var(--text-muted); } .value-list .check { color: var(--gold); font-size: var(--fs-16); } .check-icon { width: 18px; height: 18px; flex-shrink: 0; } /* ── HERO SLIDER ────────────────────────────────────────── */ .hero-slider { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; } .hero-slider.dragging { cursor: grabbing; } .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(201, 168, 76, 0.35); background: rgba(13, 11, 9, 0.45); backdrop-filter: blur(6px); color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .hero-arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--dark); } .hero-arrow svg { width: 20px; height: 20px; } .hero-arrow-prev { left: 1.5rem; } .hero-arrow-next { right: 1.5rem; } @media (max-width: 768px) { .hero-arrow { width: 38px; height: 38px; top: 34%; } .hero-arrow svg { width: 16px; height: 16px; } .hero-arrow-prev { left: 0.75rem; } .hero-arrow-next { right: 0.75rem; } } .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; /* visibility (con transition-delay) saca por completo el slide inactivo del compositor de Chrome en vez de dejarlo "transparente pero pintado". Antes solo usábamos opacity, y Chrome en macOS a veces se quedaba pegado mostrando los dos slides superpuestos (texto duplicado) hasta forzar un repintado manual. Con visibility:hidden real, ya no queda esa capa fantasma detrás. */ visibility: hidden; transition: opacity 1s ease, visibility 0s linear 1s; pointer-events: none; will-change: opacity; transform: translateZ(0); backface-visibility: hidden; } .hero-slide.active { opacity: 1; visibility: visible; transition: opacity 1s ease, visibility 0s linear 0s; pointer-events: auto; } .hero-dots { position: absolute; top: 1.75rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0; /* cada punto ya mide 24px de area (WCAG 2.5.8): el espacio lo da el propio boton */ z-index: 10; } /* Eyebrow del hero principal, separado del bloque de texto de abajo: arriba a la izquierda, para que no se pierda contra la foto de fondo (antes quedaba pegado sobre el título y se notaba poco). No toca .hero-eyebrow base porque esa clase también la usa el hero corto de otras páginas (tienda/nosotros/faq/...), que no debe volverse absolute. */ .hero-eyebrow-float { position: absolute; top: 1.75rem; left: 4rem; z-index: 5; margin: 0; } /* Buscador del hero: abajo, centrado horizontalmente (no en medio de la ventana, para no taparse con el texto de la izquierda) */ .hero .hero-search-wrap { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); width: min(560px, 88%); z-index: 6; } .hero-dot { /* Boton de 24x24 (area de toque/clic minima AA); el punto visible de 8px se dibuja con ::before */ position: relative; width: 24px; height: 24px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; padding: 0; } .hero-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; border: 1px solid rgba(201, 168, 76, 0.6); background: transparent; transition: all 0.3s; } .hero-dot.active::before { background: var(--gold); border-color: var(--gold); transform: scale(1.3); } /* ── DECANT EXPLAINER ───────────────────────────────────── */ .decant-explainer { background: var(--dark); border-top: 1px solid rgba(201, 168, 76, 0.08); padding: var(--space-96) var(--space-48); } .decant-explainer-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-80); align-items: center; } .decant-explainer-text h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; color: var(--white); margin-bottom: var(--space-24); } .decant-explainer-text p { font-size: var(--fs-16); color: var(--text-muted); line-height: 1.8; } .decant-explainer-img img { width: 100%; border-radius: var(--radius-lg); display: block; } @media (max-width: 768px) { .decant-explainer { padding: var(--space-64) var(--space-24); } .decant-explainer-inner { grid-template-columns: 1fr; gap: var(--space-40); } } /* ── SINPE SECTION ──────────────────────────────────────── */ .sinpe-section { padding: var(--space-80) var(--space-40); text-align: center; } .sinpe-card { display: inline-block; background: var(--dark-2); border: 1px solid var(--gold); border-radius: var(--radius-lg); padding: var(--space-48) var(--space-64); max-width: 520px; width: 100%; } .sinpe-card .sinpe-eyebrow { font-size: var(--fs-12); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-20); } .sinpe-card h2 { font-family: var(--font-display); font-size: var(--fs-24); color: var(--white); margin-bottom: var(--space-16); } .sinpe-number-big { font-family: var(--font-display); font-size: var(--fs-48); color: var(--gold); font-weight: 500; letter-spacing: 0.1em; margin-bottom: var(--space-4); } .sinpe-name { font-size: var(--fs-14); color: var(--text-muted); margin-bottom: var(--space-24); } .sinpe-note { font-size: var(--fs-12); color: var(--text-muted); line-height: 1.7; margin-bottom: var(--space-24); } /* ── NEWSLETTER ─────────────────────────────────────────── */ .newsletter { position: relative; background: var(--dark-3); padding: var(--space-48) var(--space-40); min-height: 51vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; isolation: isolate; } @media (max-width: 768px) { .newsletter { min-height: 46vh; padding: var(--space-48) var(--space-24); } } .newsletter-bg-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 0; } /* Sin "zoom" extra: la caja de la foto mide exactamente el tamaño del contenedor (recorte mínimo, el que exige el propio cambio de proporción). El recorrido del parallax no mueve la foto — mueve el encuadre (object-position) de abajo hacia arriba mediante la variable --img-y, así nunca se pierde de más ni la botella ni las caras. */ .newsletter-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; --img-y: 100%; object-position: 50% var(--img-y); } @media (max-width: 1150px) { /* Foto estática en celular/tablet, corrida hacia la derecha para que se vea a las dos personas con los perfumes (en desktop el encuadre horizontal centrado sí funciona). El --img-y se fija en 0% desde JS (ver 6b. NEWSLETTER) para todo este rango. */ .newsletter-bg-img { object-position: 78% var(--img-y); } } .newsletter-bg-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,9,8,0.28) 0%, rgba(10,9,8,0.44) 55%, rgba(10,9,8,0.28) 100%); } .newsletter-content { position: relative; z-index: 1; width: 100%; } .newsletter h2 { font-family: var(--font-display); font-size: var(--fs-32); color: var(--white); margin-bottom: var(--space-8); } .newsletter p { font-size: var(--fs-14); color: var(--text-muted); margin-bottom: var(--space-32); } .newsletter-form { position: relative; display: flex; gap: 0; max-width: 420px; margin: 0 auto; } .newsletter-form input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(201, 168, 76, 0.2); border-right: none; border-radius: var(--radius) 0 0 var(--radius); padding: var(--space-12) var(--space-20); color: var(--text); font-family: var(--font-body); font-size: var(--fs-14); outline: none; transition: border-color var(--transition); } .newsletter-form input:focus { border-color: var(--gold); } .newsletter-form input::placeholder { color: var(--text-muted); } .newsletter-form button { background: var(--gold); color: var(--dark); border: 1px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--space-12) var(--space-24); font-family: var(--font-body); font-size: var(--fs-12); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background var(--transition); } .newsletter-form button:hover { background: var(--gold-light); } /* ── PROMO CARDS ────────────────────────────────────────── */ .promo-card { background: var(--dark-2); border: 1px solid rgba(201, 168, 76, 0.2); border-radius: var(--radius-lg); padding: var(--space-40) var(--space-32); position: relative; overflow: hidden; transition: border-color var(--transition); /* Las tarjetas de promo pueden tener textos de distinto largo (una promo con código armada a mano vs. la de envío gratis). Sin esto, el botón de cada tarjeta queda a una altura distinta según cuánto texto tenga arriba — se ve "desalineado" comparando una tarjeta con la de al lado. Con flex-column + margin-top:auto en el botón, el botón siempre queda pegado abajo, a la misma altura en ambas. */ height: 100%; display: flex; flex-direction: column; } .promo-card .btn { margin-top: auto; align-self: flex-start; } .promo-card:hover { border-color: var(--gold); } .promo-badge { display: inline-block; background: var(--gold); color: var(--dark); font-size: var(--fs-10); letter-spacing: 0.15em; text-transform: uppercase; padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill); margin-bottom: var(--space-16); font-weight: 500; } .promo-card h3 { font-family: var(--font-display); font-size: var(--fs-24); color: var(--white); margin-bottom: var(--space-8); } .promo-card .promo-validity { font-size: var(--fs-12); color: var(--gold); letter-spacing: 0.08em; margin-bottom: var(--space-16); } .promo-card p { font-size: var(--fs-14); color: var(--text-muted); margin-bottom: var(--space-24); line-height: 1.7; } /* ── FAQ ACCORDION ──────────────────────────────────────── */ .faq-list { max-width: 760px; margin: 0 auto; } .faq-item { border-bottom: 1px solid rgba(201, 168, 76, 0.1); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--space-24) 0; font-size: var(--fs-16); color: var(--text); font-family: var(--font-body); cursor: pointer; background: none; border: none; text-align: left; transition: color var(--transition); } .faq-question:hover { color: var(--gold); } .faq-question.open { color: var(--gold); } .faq-icon { width: 20px; height: 20px; border: 1px solid rgba(201, 168, 76, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--fs-14); transition: transform var(--transition), border-color var(--transition); } .faq-question.open .faq-icon { transform: rotate(45deg); border-color: var(--gold); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .faq-answer.open { max-height: 500px; } .faq-answer p { font-size: var(--fs-14); color: var(--text-muted); padding-bottom: var(--space-24); line-height: 1.8; } /* ── CARRITO ────────────────────────────────────────────── */ .cart-layout { display: grid; grid-template-columns: 1fr 400px; gap: var(--space-40); align-items: start; } .cart-title { font-family: var(--font-display); font-size: var(--fs-32); color: var(--white); margin-bottom: var(--space-32); } .cart-empty { text-align: center; padding: var(--space-64) var(--space-32); color: var(--text-muted); } .cart-empty h3 { font-family: var(--font-display); font-size: var(--fs-24); color: var(--white); margin-bottom: var(--space-16); } .cart-table { width: 100%; border-collapse: collapse; } .cart-table th { font-size: var(--fs-12); letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); text-align: left; padding: var(--space-12) 0; border-bottom: 1px solid rgba(201, 168, 76, 0.1); } .cart-table td { padding: var(--space-16) 0; border-bottom: 1px solid rgba(201, 168, 76, 0.06); vertical-align: middle; font-size: var(--fs-14); } .cart-product-info { display: flex; align-items: center; gap: var(--space-16); } .cart-product-img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius); } .cart-product-brand { font-size: var(--fs-10); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); } .cart-product-name { font-family: var(--font-display); font-size: var(--fs-16); color: var(--white); } .qty-control { display: flex; align-items: center; gap: var(--space-12); } .qty-btn { width: 28px; height: 28px; border: 1px solid rgba(201, 168, 76, 0.2); border-radius: var(--radius); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; background: none; transition: all var(--transition); font-size: var(--fs-16); } .qty-btn:hover { border-color: var(--gold); color: var(--gold); } .remove-item { color: var(--text-muted); cursor: pointer; background: none; border: none; transition: color var(--transition); font-size: var(--fs-14); } .remove-item:hover { color: #e74c3c; } /* Cart sidebar */ .cart-sidebar { position: sticky; top: calc(var(--total-top) + 2rem); } .cart-summary { background: var(--dark-2); border: 1px solid rgba(201, 168, 76, 0.1); border-radius: var(--radius-lg); padding: var(--space-32); margin-bottom: var(--space-24); } .cart-summary h3 { font-family: var(--font-display); font-size: var(--fs-24); color: var(--white); margin-bottom: var(--space-24); } .summary-row { display: flex; justify-content: space-between; font-size: var(--fs-14); color: var(--text-muted); margin-bottom: var(--space-12); } .summary-row.total { color: var(--white); font-size: var(--fs-16); font-weight: 500; border-top: 1px solid rgba(201, 168, 76, 0.1); padding-top: var(--space-12); margin-top: var(--space-12); } .cart-sinpe-box { background: var(--dark-2); border: 1px solid var(--gold); border-radius: var(--radius-lg); padding: var(--space-32); margin-bottom: var(--space-24); } .cart-sinpe-box h3 { font-family: var(--font-display); font-size: var(--fs-20); color: var(--white); margin-bottom: var(--space-16); } .cart-sinpe-number { font-family: var(--font-display); font-size: var(--fs-32); color: var(--gold); letter-spacing: 0.1em; margin-bottom: var(--space-4); } .cart-sinpe-name { font-size: var(--fs-14); color: var(--text-muted); margin-bottom: var(--space-16); } .cart-sinpe-steps { font-size: var(--fs-14); color: var(--text-muted); line-height: 1.8; margin-bottom: var(--space-24); padding: var(--space-16); background: rgba(201, 168, 76, 0.04); border-radius: var(--radius); } .cart-form { background: var(--dark-2); border: 1px solid rgba(201, 168, 76, 0.1); border-radius: var(--radius-lg); padding: var(--space-32); } .cart-form h3 { font-family: var(--font-display); font-size: var(--fs-20); color: var(--white); margin-bottom: var(--space-20); } .form-group { margin-bottom: var(--space-16); } .form-group label { display: block; font-size: var(--fs-12); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-8); } .form-group input, .form-group textarea { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(201, 168, 76, 0.15); border-radius: var(--radius); padding: var(--space-12) var(--space-16); color: var(--text); font-family: var(--font-body); font-size: var(--fs-14); outline: none; transition: border-color var(--transition); } .form-group input:focus, .form-group textarea:focus { border-color: var(--gold); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); } /* ── ABOUT — QUIENES SOMOS ──────────────────────────────── */ .about-intro { font-family: var(--font-display); font-size: clamp(var(--fs-20), 2vw, var(--fs-24)); color: var(--text); line-height: 1.7; max-width: 760px; } .values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-24); } .values-grid .value-item:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; } .value-item { background: var(--dark-2); border: 1px solid rgba(201, 168, 76, 0.08); border-radius: var(--radius-lg); padding: var(--space-32); transition: border-color var(--transition); } .value-item:hover { border-color: rgba(201, 168, 76, 0.25); } .value-item-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--dark-3); border: 1px solid rgba(201, 168, 76, 0.25); margin-bottom: var(--space-20); } .value-item-icon img { width: 20px; height: 20px; display: block; } /* ── INTRO SCREEN ──────────────────────────── */ body.fu-intro-active { overflow: hidden; } #fu-intro { position: fixed; inset: 0; z-index: 99999; background: #0f0d0a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-32); } #fu-intro-logo svg { width: 220px; height: auto; opacity: 0; animation: fu-logo-in 0.9s ease 0.1s forwards; } @keyframes fu-logo-in { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } } #fu-intro-bar-wrap { width: 120px; height: 1px; background: rgba(201, 168, 76, 0.2); overflow: hidden; } #fu-intro-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #b17513, #fae697, #b17513); animation: fu-bar-fill 1.1s ease 0.3s forwards; /* termina justo antes de que empiece el fade (1.4s) */ } @keyframes fu-bar-fill { from { width: 0%; } to { width: 100%; } } #fu-intro-tagline { font-family: 'Geist', system-ui, sans-serif; font-size: var(--fs-10); letter-spacing: 0.28em; text-transform: uppercase; color: rgba(201, 168, 76, 0.55); opacity: 0; animation: fu-tag-in 0.6s ease 0.5s forwards; } @keyframes fu-tag-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } #fu-intro.fade-out { opacity: 0; transition: opacity 0.6s ease; pointer-events: none; } .value-item h3 { font-family: var(--font-display); font-size: var(--fs-20); color: var(--white); margin-bottom: var(--space-8); } .value-item p { font-size: var(--fs-14); color: var(--text-muted); line-height: 1.7; } /* ── SEALED BANNER ──────────────────────────────────────── */ .sealed-banner { display: inline-flex; align-items: center; gap: var(--space-8); background: rgba(201, 168, 76, 0.1); border: 1px solid rgba(201, 168, 76, 0.3); border-radius: var(--radius-pill); padding: var(--space-8) var(--space-16); font-size: var(--fs-12); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-24); } /* El widget de accesibilidad (js/accessibility-widget.js) dibuja su propio botón circular flotante (bottom:20px/right:20px por defecto), que además colisionaba con el flotante de WhatsApp y "subir arriba" en esa misma esquina. Ahora el acceso al widget vive dentro del nav (.nav-a11y-toggle, ver js/global.js), así que el botón flotante original se oculta del todo — el panel del widget se abre/cierra igual, solo cambia el disparador. */ #a11y-toggle-btn { display: none !important; } /* ── WA FLOAT BUTTON ────────────────────────────────────── */ .wa-float { position: fixed; bottom: 2rem; right: 2rem; z-index: 900; width: 56px; height: 56px; background: #25D366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); transition: transform var(--transition), box-shadow var(--transition); text-decoration: none; } .wa-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37, 211, 102, 0.55); } .wa-float svg { width: 28px; height: 28px; fill: #fff; } /* ── TIENDA CATALOG ─────────────────────────────────────── */ .catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); } .catalog-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid rgba(201, 168, 76, 0.08); background: var(--dark-2); transition: border-color var(--transition), transform var(--transition); } .catalog-card:hover { border-color: rgba(201, 168, 76, 0.3); transform: translateY(-4px); } .catalog-card-img { aspect-ratio: 16 / 9; background-size: cover; background-position: center; overflow: hidden; } .catalog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .catalog-card:hover .catalog-card-img img { transform: scale(1.05); } .catalog-card-body { padding: var(--space-24); } .catalog-card-body h3 { font-family: var(--font-display); font-size: var(--fs-24); color: var(--white); margin-bottom: var(--space-8); } .catalog-card-body p { font-size: var(--fs-14); color: var(--text-muted); margin-bottom: var(--space-20); line-height: 1.6; } /* ── UTILITY ────────────────────────────────────────────── */ .text-center { text-align: center; } .text-gold { color: var(--gold); } .mt-1 { margin-top: var(--space-16); } .mt-2 { margin-top: var(--space-32); } .mt-3 { margin-top: var(--space-48); } .mb-1 { margin-bottom: var(--space-16); } .mb-2 { margin-bottom: var(--space-32); } .divider { height: 1px; background: rgba(201, 168, 76, 0.08); margin: var(--space-32) 0; } /* ── RESPONSIVE ─────────────────────────────────────────── */ @media (max-width: 1024px) { .products-grid { grid-template-columns: repeat(2, 1fr); } .catalog-grid { grid-template-columns: repeat(2, 1fr); } .footer-top { grid-template-columns: 1fr 1fr; } .cart-layout { grid-template-columns: 1fr; } .cart-sidebar { position: static; } } /* Tablets/laptops angostos (iPad Mini, iPad Air, iPad normal, y pantallas de compu hasta 1144px): con "Ventas mayoristas" el nav completo ya no entra bien (quedan ítems cortados / hay que hacer scroll horizontal para llegar a "Nosotros" o al carrito), así que por debajo de 1145px también usamos el menú hamburguesa, igual que en celular. De 1145px en adelante (iPad Pro apaisado, laptops, escritorio) sigue mostrando el nav completo. */ @media (min-width: 769px) and (max-width: 1150px) { .nav-links, .nav-right { display: none; } .nav-hamburger { display: flex; } .nav-cart-mobile { display: flex; } } @media (max-width: 768px) { :root { --nav-h: 60px; } section { padding: var(--space-64) var(--space-20); } .section-inner { padding: 0; } #cart-toast { left: 1rem !important; right: 1rem !important; bottom: 1.25rem !important; max-width: none !important; } .nav-links, .nav-right { display: none; } .nav-hamburger { display: flex; } .nav-cart-mobile { display: flex; } .nav-inner { padding: 0 var(--space-20); } .nav-logo-text { display: none; } .hero { /* Alto fijo (no ligado a 100vh/100svh, que en Safari iOS varían mientras aparece/desaparece la barra de navegación y provocaban que el hero se "agrandara" solo al hacer scroll). Lo bajamos más de lo que "se ve bonito" a propósito: al entrar a la página, con la barra de direcciones de Safari todavía visible (viewport más chico), el botón tiene que entrar SIN scrollear. Recorta un poco más las cabezas de las fotos, pero es la prioridad. */ /* Sin vh/svh/dvh en NINGUNA parte de esta regla: esas unidades cambian solas cuando la barra de Safari se esconde al hacer scroll, y eso es justo lo que hacía que el hero "creciera" y los textos/ botón parecieran reposicionarse solos apenas te movías. Alto fijo en píxeles nomás, no depende del estado de la barra en ese momento. */ /* --hero-h-mobile lo calcula JS (ver "AJUSTE DE ALTO DEL HERO" en index.html) midiendo el alto REAL disponible en cada celular, para que la franja de reseñas de abajo siempre entre completa con su borde inferior visible. 560px es el valor de respaldo mientras JS no corrió todavía (o si está desactivado). */ height: var(--hero-h-mobile, 560px); min-height: 0; max-height: none; } .hero-content { margin-left: 0; left: 0; right: 0; top: auto; /* Pegado justo arriba del buscador (que en mobile queda en bottom:1.1rem con ~3.3rem de alto), en vez de dejar un hueco vacío en el medio del hero. */ bottom: 3.3rem; padding: var(--space-20) var(--space-20) 0; max-width: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--space-8); } .hero-text-block { text-align: left; } .hero h1, .hero h2 { font-size: var(--fs-32); margin-bottom: var(--space-8); } /* Refuerzo extra de sombra en el itálico dorado ("Puro orgullo tico."): el dorado se camufla más que el blanco contra fotos con colores claros/saturados (como la bandera), así que necesita más contraste. */ .hero h1 em, .hero h2 em { text-shadow: 0 0 4px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.85), 0 2px 4px rgba(0,0,0,0.9), 0 6px 18px rgba(0,0,0,0.75); } .hero-sub { margin-bottom: var(--space-4); } .hero-cta { width: 100%; justify-content: center; } .hero-dots { /* A la derecha en vez de centrados: el eyebrow (arriba a la izquierda) puede ser largo según el slide ("Mes de la Patria · Costa Rica") y en pantallas angostas chocaba con los puntitos centrados. */ top: calc(0.75rem + env(safe-area-inset-top, 0px)); left: auto; right: 1.25rem; transform: none; bottom: auto; } .hero-eyebrow-float { top: calc(0.75rem + env(safe-area-inset-top, 0px)); left: 1.25rem; right: 4.5rem; max-width: none; } .hero .hero-search-wrap { width: min(560px, 90%); bottom: 1.1rem; } /* En el alto fijo del hero mobile, "78% top" dejaba a la persona recortada de forma rara (mucho aire arriba, cuerpo cortado abajo). La bajamos un poco para que la cara/torso queden centrados en el recuadro en vez de pegados arriba. */ .hero-bg-subject-right { background-position: 78% 30%; } /* En mobile: oscurecido suave abajo (curva pareja, sin corte recto en ningún punto) + la línea superior (eyebrow) en una píldora negra sólida, que se lee igual sin importar qué haya detrás. */ .hero-overlay { /* Sombreado de abajo hacia arriba, más fuerte y arrancando antes (desde ~30% del alto del hero) para que el bloque de texto (título + subtítulo itálico dorado) se lea encima de cualquier foto, no solo el borde inferior. */ background: linear-gradient( to bottom, rgba(13,11,9,0) 0%, rgba(13,11,9,0.05) 28%, rgba(13,11,9,0.18) 42%, rgba(13,11,9,0.4) 56%, rgba(13,11,9,0.62) 68%, rgba(13,11,9,0.8) 82%, rgba(13,11,9,0.92) 100% ); } .hero-side-shadow { background: none; } .hero-eyebrow { /* Antes tenía una píldora negra de fondo que tapaba la cara en las 3 fotos del hero — la sacamos, mismo texto, sin caja, pero con un "contorno" de sombras apiladas para que siga leyéndose bien incluso sobre partes claras de la foto. */ color: #c9a84c; text-shadow: 0 0 3px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.9), 0 4px 12px rgba(0,0,0,0.75); } .collections-grid { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .products-grid { grid-template-columns: repeat(2, 1fr); } .catalog-grid { grid-template-columns: 1fr; } .value-prop { grid-template-columns: 1fr; gap: var(--space-32); } .values-grid { grid-template-columns: 1fr; } .values-grid .value-item:last-child:nth-child(odd) { grid-column: auto; max-width: 100%; } .sinpe-card { padding: var(--space-32) var(--space-24); } .sinpe-number-big { font-size: var(--fs-36); } .footer-top { grid-template-columns: 1fr; gap: var(--space-32); } .footer-bottom { flex-direction: column; gap: var(--space-12); } .newsletter-form { flex-direction: column; } .newsletter-form input, .newsletter-form button { border-radius: var(--radius); border-right: 1px solid rgba(201, 168, 76, 0.2); } .newsletter-form button { border-top: none; } .hero-short { height: auto; min-height: 240px; padding-bottom: var(--space-24); } .hero-short-content-wide { padding-left: var(--space-20); padding-right: var(--space-20); } .hero-short-content-wide h1 { font-size: var(--fs-28); } .collections-grid { grid-template-columns: 1fr; } .collection-card { aspect-ratio: 4 / 3; } } /* ─── CATALOG LAYOUT ─── */ .catalog-layout { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-40); align-items: start; padding: 0 var(--space-32); } .catalog-sidebar { position: sticky; top: 100px; } .filter-tabs { display: flex; flex-wrap: nowrap; gap: var(--space-8); margin-bottom: var(--space-24); } .filter-tab { flex: 0 0 auto; white-space: nowrap; padding: var(--space-8) var(--space-12); font-family: var(--font-body); font-size: var(--fs-12); letter-spacing: 0.08em; text-transform: uppercase; background: transparent; border: none; color: var(--text-muted); cursor: pointer; transition: all 0.2s; } .filter-tab.active { background: var(--gold); color: var(--dark); font-weight: 500; } .filter-section { margin-bottom: var(--space-32); border-top: 1px solid rgba(201,168,76,0.1); padding-top: var(--space-24); } .filter-title { font-size: var(--fs-10); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-16); font-weight: 400; } /* Género: en vez de una lista de checkboxes apilados, se muestran como chips clickeables en una sola fila — usa mucho menos espacio vertical en el sidebar de filtros. */ .gender-pill-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); } .gender-pill { flex: 0 0 auto; padding: var(--space-8) var(--space-20); border: 1.5px solid rgba(201,168,76,0.55); border-radius: var(--radius-pill); background: rgba(201,168,76,0.08); color: var(--text); font-family: var(--font-body); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .gender-pill:hover { border-color: var(--gold); background: rgba(201,168,76,0.18); } .gender-pill.active { background: var(--gold); color: var(--dark); border-color: var(--gold); font-weight: 600; box-shadow: 0 0 0 3px rgba(201,168,76,0.22); } .brand-filter-item { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-8) 0; cursor: pointer; font-size: var(--fs-12); color: var(--text-muted); transition: color 0.2s; } .brand-filter-item:hover { color: var(--text); } .brand-filter-item input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--gold); cursor: pointer; flex-shrink: 0; } .brand-count { font-size: var(--fs-10); color: var(--text-muted); margin-left: auto; } .filter-show-all { font-size: var(--fs-12); color: var(--gold); background: none; border: none; cursor: pointer; padding: var(--space-8) 0; font-family: var(--font-body); text-decoration: underline; display: none; } .catalog-topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--space-24) var(--space-32) var(--space-16); border-bottom: 1px solid rgba(201,168,76,0.1); margin-bottom: var(--space-16); } .catalog-sort { margin-left: auto; } .catalog-sort { display: flex; align-items: center; gap: var(--space-12); } .catalog-sort label { font-size: var(--fs-10); letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); } .catalog-sort select { background: var(--dark-2); border: 1px solid rgba(201,168,76,0.2); color: var(--text); font-family: var(--font-body); font-size: var(--fs-12); padding: var(--space-8) var(--space-12); cursor: pointer; outline: none; } .catalog-sort select:focus { border-color: var(--gold); } .product-card-img { position: relative; } .product-badge { position: absolute; top: 0.8rem; left: 0.8rem; background: var(--gold); color: var(--dark); font-size: var(--fs-10); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: var(--space-4) var(--space-8); } .catalog-empty { color: var(--text-muted); font-size: var(--fs-14); grid-column: 1 / -1; padding: var(--space-48) 0; text-align: center; } /* Entre 769px y 1279px las tarjetas no pueden bajar de 208px de ancho (la etiqueta CANTIDAD + los botones -/1/+ necesitan ~170px de texto), asi que las columnas se adaptan al ancho: 3 columnas en ~770-940px y 4 desde ~940px. Tope de 4 columnas. Se usa .catalog-layout para ganarle al .products-grid base (repeat(4,1fr)) que esta mas abajo. */ @media (min-width: 769px) and (max-width: 1279px) { .catalog-layout .products-grid { grid-template-columns: repeat(auto-fill, minmax(max(208px, calc((100% - 3 * 1.25rem) / 4 - 1px)), 1fr)); } } /* El panel de filtros (200px + 2.5rem de aire) esconde bajo 1279px: con 4 columnas fijas las tarjetas quedaban tan angostas que el control de cantidad se salia. Pasa al boton "Filtros" (ver mobile.css). */ @media (max-width: 1279px) { .catalog-layout { grid-template-columns: 1fr; padding: var(--space-32) var(--space-24); } .catalog-sidebar { position: static; } .filter-tabs { max-width: 100%; } } /* ─── SINPE HORIZONTAL ─── */ .sinpe-horizontal { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-48); max-width: 1100px; margin: 0 auto; padding: var(--space-48) var(--space-64); border: 1px solid rgba(201,168,76,0.3); background: var(--dark-2); } .sinpe-horizontal-left { display: flex; flex-direction: column; gap: var(--space-12); } .sinpe-horizontal-left h2 { font-family: var(--font-display); font-size: var(--fs-32); font-weight: 400; color: var(--white); } .sinpe-horizontal-center { text-align: center; padding: 0 var(--space-32); border-left: 1px solid rgba(201,168,76,0.15); border-right: 1px solid rgba(201,168,76,0.15); } .sinpe-horizontal-right { display: flex; justify-content: flex-end; align-items: center; } @media (max-width: 768px) { .sinpe-horizontal { grid-template-columns: 1fr; text-align: center; padding: var(--space-32) var(--space-24); gap: var(--space-32); } .sinpe-horizontal-center { border-left: none; border-right: none; border-top: 1px solid rgba(201,168,76,0.15); border-bottom: 1px solid rgba(201,168,76,0.15); padding: var(--space-24) 0; } .sinpe-horizontal-right { justify-content: center; width: 100%; } .sinpe-wa-btn { width: 100%; white-space: normal; line-height: 1.4; padding: var(--space-16) var(--space-16); font-size: var(--fs-12); letter-spacing: 0.08em; } } /* ── PRODUCT CARD REDISEÑO ─────────────────── */ .product-format-wrap { margin-bottom: var(--space-8); } .product-format-label { display: block; font-size: var(--fs-10); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-4); } .product-format-select { width: 100%; background: var(--dark-2); border: 1px solid rgba(201, 168, 76, 0.25); color: var(--text); font-family: var(--font-body); font-size: var(--fs-14); padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12); border-radius: var(--radius); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23C9A84C' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; } .product-format-select:focus { outline: none; border-color: var(--gold); } .product-qty-wrap { display: flex; align-items: center; justify-content: space-between; margin: var(--space-12) 0 var(--space-8); } .product-qty-label { font-size: var(--fs-10); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .product-qty-controls { display: flex; align-items: center; gap: 0; border: 1px solid rgba(201, 168, 76, 0.25); border-radius: var(--radius); overflow: hidden; } .qty-btn { background: var(--dark-2); border: none; color: var(--gold); width: 32px; height: 32px; font-size: var(--fs-18); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; flex-shrink: 0; } .qty-btn:hover { background: rgba(201, 168, 76, 0.12); } .qty-value { min-width: 32px; text-align: center; font-size: var(--fs-14); color: var(--text); font-family: var(--font-body); padding: 0 var(--space-4); } .product-total { font-size: var(--fs-10); color: var(--text-muted); letter-spacing: 0.05em; margin-bottom: var(--space-12); } .product-total .total-value { color: var(--gold); font-weight: 500; } .product-actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); } /* Botón "Comprar ahora" — pill dorado sólido del design system (Button System / Primary Variant), centrado y con ícono real. */ .product-card-body .btn.btn-buy-now { width: auto; min-width: 68%; justify-content: center; background: var(--gold); color: var(--dark); border: 1px solid var(--gold); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 4px 16px rgba(201, 168, 76, 0.25); } .product-card-body .btn.btn-buy-now:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--dark); box-shadow: 0 0 0 6px rgba(201, 168, 76, 0.18), 0 10px 26px rgba(201, 168, 76, 0.4); } .btn-icon { width: 15px; height: 15px; display: block; } /* El SVG del ícono viene coloreado en gold (#C9A84C); sobre el botón dorado sólido lo oscurecemos para que tenga contraste, como en el Figma. */ .btn-buy-now .btn-icon { filter: brightness(0); } /* ── CART PAGE ─────────────────────────────── */ .cart-page { max-width: 1260px; margin: 0 auto; padding: var(--space-40) var(--space-32) var(--space-96); } .cart-page-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-32); } .cart-page-title { font-family: var(--font-display); font-size: var(--fs-32); font-weight: 400; color: var(--white); margin: 0; } .cart-back-link { font-size: var(--fs-12); color: var(--text-muted); text-decoration: none; letter-spacing: 0.04em; transition: color 0.2s; } .cart-back-link:hover { color: var(--gold); } /* Empty state */ .cart-empty-state { text-align: center; padding: var(--space-80) var(--space-32); color: var(--text-muted); } .cart-empty-icon { font-size: var(--fs-48); margin-bottom: var(--space-16); } .cart-empty-state h3 { font-family: var(--font-display); font-size: var(--fs-24); font-weight: 400; color: var(--white); margin-bottom: var(--space-8); } /* Main grid */ .cart-main-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-32); align-items: start; } /* Left column */ .cart-left { display: flex; flex-direction: column; } .cart-clear-btn { display: none; align-self: flex-end; margin-top: var(--space-16); background: none; border: 1px solid rgba(231, 76, 60, 0.35); color: #e88377; font-size: var(--fs-12); letter-spacing: 0.06em; text-transform: uppercase; padding: var(--space-8) var(--space-16); border-radius: var(--radius-pill); cursor: pointer; transition: all var(--transition); } .cart-clear-btn:hover { border-color: #e74c3c; background: rgba(231, 76, 60, 0.1); color: #ff6b5b; } .cart-items-head { display: flex; align-items: center; gap: var(--space-16); padding: 0 0 var(--space-12); border-bottom: 1px solid rgba(255,255,255,0.07); font-size: var(--fs-12); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } /* Cart item row */ .cart-item { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16) 0; border-bottom: 1px solid rgba(255,255,255,0.06); } .cart-item-img { flex: 0 0 64px; flex-shrink: 0; width: 64px; border-radius: var(--radius); overflow: hidden; background: var(--dark-2); } .cart-item-img img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid rgba(201,168,76,0.1); } .cart-item-info { flex: 3; min-width: 0; } .cart-item-info .cart-item-brand { font-size: var(--fs-10); color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-2); } .cart-item-info .cart-item-name { font-family: var(--font-display); font-size: var(--fs-16); color: var(--white); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .cart-item-format { flex: 1.5; font-size: var(--fs-12); color: var(--text-muted); } .cart-item-price { flex: 1; font-size: var(--fs-14); color: var(--text); text-align: right; } .cart-item-qty { flex: 1.2; display: flex; align-items: center; justify-content: center; gap: var(--space-8); } .cart-item-qty button { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: var(--text); font-size: var(--fs-14); line-height: 1; cursor: pointer; transition: border-color 0.2s, color 0.2s; padding: 0; display: flex; align-items: center; justify-content: center; } .cart-item-qty button:hover { border-color: var(--gold); color: var(--gold); } .cart-item-qty span { font-size: var(--fs-14); min-width: 18px; text-align: center; color: var(--white); } .cart-item-subtotal { flex: 1; font-size: var(--fs-14); font-weight: 500; color: var(--gold); text-align: right; } button.cart-item-remove { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-muted); font-size: var(--fs-16); cursor: pointer; padding: 0; line-height: 1; transition: color 0.2s; } .cart-item-remove-icon { width: 13px; height: 13px; opacity: 0.7; } button.cart-item-remove:hover { color: #e74c3c; } button.cart-item-remove:hover .cart-item-remove-icon { opacity: 1; filter: invert(38%) sepia(74%) saturate(1600%) hue-rotate(335deg) brightness(95%) contrast(90%); } /* ── PANEL "MIS FAVORITOS" ───────────────────────────────── */ .wishlist-panel { background: var(--dark-2); border: 1px solid rgba(201, 168, 76, 0.15); border-radius: var(--radius-lg); padding: var(--space-32) var(--space-32) var(--space-8); margin-bottom: var(--space-32); } .wishlist-panel-title { display: flex; align-items: center; gap: var(--space-8); font-family: var(--font-display); font-size: var(--fs-20); color: var(--white); margin-bottom: var(--space-20); } .wishlist-panel-title img { width: 18px; height: 18px; } .wishlist-item { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16) 0; border-bottom: 1px solid rgba(255,255,255,0.06); } .wishlist-item:last-child { border-bottom: none; } .wishlist-item-img { flex: 0 0 60px; width: 60px; height: 60px; border-radius: var(--radius); overflow: hidden; background: var(--dark-3); } .wishlist-item-img img { width: 100%; height: 100%; object-fit: cover; } .wishlist-item-info { flex: 1; min-width: 0; } .wishlist-item-brand { font-size: var(--fs-10); color: var(--gold); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-2); } .wishlist-item-name { font-family: var(--font-display); font-size: var(--fs-16); color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wishlist-item-price { font-size: var(--fs-12); color: var(--text-muted); margin-top: var(--space-2); } .wishlist-item-actions { display: flex; align-items: center; gap: var(--space-12); flex-shrink: 0; } .wishlist-item-actions .btn-buy-now { min-width: unset; white-space: nowrap; padding: var(--space-8) var(--space-16); font-size: var(--fs-10); } .wishlist-item-remove { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-muted); font-size: var(--fs-14); cursor: pointer; transition: color 0.2s; } .wishlist-item-remove:hover { color: #e74c3c; } @media (max-width: 640px) { .wishlist-item { flex-wrap: wrap; } .wishlist-item-actions { width: 100%; justify-content: space-between; margin-top: var(--space-8); } } /* Right column cards */ .cart-right { position: sticky; top: 90px; display: flex; flex-direction: column; gap: var(--space-16); } .cart-card-title { font-family: var(--font-display); font-size: var(--fs-18); font-weight: 400; color: var(--white); margin: 0 0 var(--space-16); letter-spacing: 0.02em; } /* Summary card */ .cart-summary-card { background: var(--dark-2); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-lg); padding: var(--space-24); } .cart-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-14); color: var(--text-muted); margin-bottom: var(--space-8); } .cart-shipping-note { font-size: var(--fs-10); color: var(--text-muted); margin: 0 0 var(--space-12); opacity: 0.7; } .cart-promo-msg { font-size: var(--fs-12); margin: var(--space-8) 0 var(--space-16); min-height: 1em; } .cart-promo-msg.success { color: var(--gold, #c9a84c); } .cart-promo-msg.error { color: #e07a6b; } .cart-summary-divider { height: 1px; background: rgba(255,255,255,0.08); margin: var(--space-12) 0; } .cart-total-row { font-size: var(--fs-16); font-weight: 600; color: var(--white); } .cart-total-row span:last-child { color: var(--gold); } /* Subtotal en tiempo real debajo de la lista de productos — solo mobile, ver el media query en mobile.css. En desktop no ocupa espacio. */ .cart-mobile-subtotal { display: none; } /* SINPE card */ .cart-sinpe-card { background: var(--dark-2); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-lg); padding: var(--space-24); text-align: center; } .cart-sinpe-tag { display: inline-block; font-size: var(--fs-10); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); border-radius: var(--radius); padding: 0.2em 0.6em; margin-bottom: var(--space-12); } .cart-sinpe-num { font-family: var(--font-display); font-size: var(--fs-32); font-weight: 600; color: var(--white); letter-spacing: 0.1em; line-height: 1; margin-bottom: var(--space-4); } .cart-sinpe-name { font-size: var(--fs-12); color: var(--text-muted); margin-bottom: 0; } .cart-sinpe-steps { margin: var(--space-16) 0 0; padding: 0; list-style: none; counter-reset: steps; text-align: left; } .cart-sinpe-steps li { counter-increment: steps; display: flex; gap: var(--space-8); align-items: flex-start; font-size: var(--fs-12); color: var(--text-muted); margin-bottom: var(--space-8); line-height: 1.4; } .cart-sinpe-steps li::before { content: counter(steps); flex: 0 0 18px; height: 18px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); font-size: var(--fs-10); display: flex; align-items: center; justify-content: center; margin-top: 0.05em; } /* Form card */ .cart-form-card { background: var(--dark-2); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius-lg); padding: var(--space-24); } /* Método de entrega */ .cart-delivery-wrap { margin-bottom: var(--space-24); } .cart-delivery-tabs { display: flex; gap: var(--space-12); flex-wrap: wrap; } .cart-delivery-btn { flex: 1; min-width: 220px; display: flex; align-items: center; gap: var(--space-12); background: var(--dark-2); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: var(--space-16) var(--space-16); cursor: pointer; text-align: left; transition: all var(--transition); color: var(--text); } .cart-delivery-btn:hover { border-color: rgba(201,168,76,0.4); } .cart-delivery-btn.active { border-color: var(--gold); background: rgba(201,168,76,0.07); } .cart-delivery-btn-icon { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px; display: flex; align-items: center; justify-content: center; background: var(--dark-3); border: 1px solid rgba(201,168,76,0.25); } .cart-delivery-btn-icon img { width: 17px; height: 17px; } .cart-delivery-btn-title { display: block; font-size: var(--fs-14); color: var(--white); font-weight: 500; } .cart-delivery-btn-sub { display: block; font-size: var(--fs-12); color: var(--text-muted); margin-top: var(--space-2); } .cart-pickup-note { display: none; align-items: flex-start; gap: var(--space-8); margin-top: var(--space-20); background: rgba(201,168,76,0.06); border: 1px solid rgba(201,168,76,0.25); border-radius: var(--radius-lg); padding: var(--space-16) var(--space-16); font-size: var(--fs-12); color: var(--text-muted); line-height: 1.6; } .cart-pickup-note strong { color: var(--gold); font-weight: 600; } .cart-form-field { margin-bottom: var(--space-12); } .cart-form-field label { display: block; font-size: var(--fs-10); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-4); } .cart-form-field input, .cart-form-field textarea, .cart-form-field select { width: 100%; background: var(--dark-3); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); color: var(--white); font-family: var(--font-body); font-size: var(--fs-14); padding: var(--space-8) var(--space-12); outline: none; box-sizing: border-box; resize: none; transition: border-color 0.2s; } .cart-form-field input:focus, .cart-form-field textarea:focus, .cart-form-field select:focus { border-color: var(--gold); } .cart-form-field input::placeholder, .cart-form-field textarea::placeholder { color: rgba(255,255,255,0.2); } /* no heredan el fondo oscuro del