/* ============================================================
           VARIABLES DE COLOR DE MARCA (equivalente a tailwind.config)
           ============================================================ */
        :root {
            --primary: #950606;
            --primary-dark: #750505;
            --header-red-dark: #2b0505;
            --footerBg: var(--header-red-dark);
            --textMain: #1A1A1A;
            --textMuted: #6F6F6F;
            --bgLight: #FAFAFA;
            --borderGray: #E5E5E5;
            --accent-ofertas: #950606;
            --desc-gray: #374151;
            --gold: #950606;
            --whatsapp: #25D366;
            --gray-50: #F9FAFB;
            --gray-100: #F3F4F6;
            --gray-200: #E5E7EB;
            --gray-300: #D1D5DB;
            --gray-400: #9CA3AF;
            --yellow-400: #FACC15;
            --red-50: #FEF2F2;
            --red-800: #950606;
            --black: #000000;
            --white: #FFFFFF;
            --dark1: #1A1A1A;
            --dark2: #111111;
            --offwhite: #F9F9F9;

            /* ---- Escala de Z-Index (de menor a mayor prioridad visual) ---- */
            --z-navbar:          50;   /* Header / navbar */
            --z-promo-bar:       58;   /* Barra superior sticky del cronómetro de oferta */
            --z-float-btn:       60;   /* Botones flotantes (WhatsApp, volver arriba) */
            --z-drawer:          70;   /* Drawers laterales (carrito, menú móvil) */
            --z-modal-info:     105;
            --z-modal-checkout: 110;
            --z-modal-login:    115;
            --z-modal-quickview:120;
            --z-modal-lightbox: 125;
            --z-modal-auth:     130;
            --z-modal-review:   135;
            --z-modal-sizeguide:140;
            --z-modal-welcome:  145;
            --z-toast:          200;   /* Notificaciones: siempre por encima de todo */
        }

        /* ============================================================
           RESET BASE (equivalente minimo al preflight de Tailwind)
           ============================================================ */
        *, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; }
        html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
        body { margin: 0; overflow-x: hidden; max-width: 100%; }
        h1, h2, h3, h4, h5, h6, p { margin: 0; }
        a { color: inherit; text-decoration: none; }
        b, strong { font-weight: bolder; }
        button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; }
        button, select { text-transform: none; }
        button, [type='button'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; cursor: pointer; }
        input::placeholder, textarea::placeholder { opacity: 1; color: var(--textMuted); }
        ul, ol { list-style: none; margin: 0; padding: 0; }
        img, svg, video { display: block; vertical-align: middle; }
        img, video { max-width: 100%; height: auto; }
        svg { fill: none; }

        /* ============================================================
           ESTILOS BASE Y COMPONENTES PROPIOS DE MILAN RICH
           ============================================================ */
        body {
            font-family: 'Montserrat', sans-serif;
            color: var(--textMain);
            background-color: #FFFFFF;
        }
        h1, h2, h3 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            letter-spacing: -0.02em;
        }
        .menu {
            font-family: 'Montserrat', sans-serif;
            font-weight: 500;
        }
        .btn {
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            letter-spacing: 0.04em;
        }
        /* Evita el zoom automático de iOS al tocar inputs (necesita font-size >= 16px) */
        @media (max-width: 768px) {
            input[type="text"], input[type="email"], input[type="password"],
            input[type="search"], input[type="tel"], input[type="number"], textarea, select {
                font-size: 16px !important;
            }
        }
        /* Tipografía serif reservada para titulos principales, banners y nombres de colecciones */
        .font-display {
            font-family: 'Montserrat', sans-serif;
            text-transform: uppercase;
            letter-spacing: 0.01em;
            font-weight: 300;
        }
        p, .text-body { line-height: 1.6; }
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .hover-zoom-container { overflow: hidden; }
        .hover-zoom-container img { transition: transform 0.5s ease; }
        .hover-zoom-container:hover img { transform: scale(1.05); }
        .btn-primary { background-color: var(--primary); color: white; transition: background 0.2s ease; }
        .btn-primary:hover { background-color: var(--primary-dark); }
        .btn-primary:active { transform: scale(0.98); }

        #toast-container { position: fixed; bottom: 20px; right: 20px; z-index: var(--z-toast); }
        .toast {
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(20px) saturate(160%);
            -webkit-backdrop-filter: blur(20px) saturate(160%);
            border: 1px solid rgba(255,255,255,0.7);
            box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
            color: var(--textMain, #1A1A1A);
            padding: 12px 20px;
            border-radius: 10px;
            margin-top: 10px;
            opacity: 0;
            transform: translateY(12px) scale(0.97);
            transition: opacity 0.35s cubic-bezier(0.16,1,0.3,1), transform 0.35s cubic-bezier(0.16,1,0.3,1);
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            font-weight: 500;
        }
        .toast.show { opacity: 1; transform: translateY(0) scale(1); }

        /* ============================================================
           FOMO TOAST — Prueba social dinámica (compras recientes)
           Contenedor independiente del toast de acciones (abajo-izquierda
           en vez de abajo-derecha, para no chocar con confirmaciones de
           carrito ni con el botón flotante de WhatsApp).
           ============================================================ */
        #fomo-toast-container {
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: var(--z-toast);
            max-width: 300px;
            pointer-events: none;
        }
        .fomo-toast {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            background: rgba(255, 255, 255, 0.90);
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            border: 1px solid rgba(255,255,255,0.7);
            color: var(--textMain, #1A1A1A);
            padding: 13px 16px;
            border-radius: 12px;
            box-shadow: 0 20px 48px rgba(0,0,0,0.12), 0 1px 0 rgba(255,255,255,0.6) inset;
            opacity: 0;
            transform: translateX(-22px) scale(0.97);
            transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1), transform 0.45s cubic-bezier(0.16,1,0.3,1);
            pointer-events: auto;
            cursor: default;
        }
        .fomo-toast.show { opacity: 1; transform: translateX(0) scale(1); }
        .fomo-toast.hide { opacity: 0; transform: translateX(-14px) scale(0.98); }
        .fomo-toast-icon {
            width: 32px; height: 32px; flex: none;
            border-radius: 50%;
            background: var(--primary);
            display: flex; align-items: center; justify-content: center;
        }
        .fomo-toast-icon i { width: 15px; height: 15px; color: #FFFFFF; }
        .fomo-toast-text { font-size: 12px; line-height: 1.45; color: var(--textMain, #1A1A1A); }
        .fomo-toast-text strong { font-weight: 700; }
        .fomo-toast-time { display: block; font-size: 10px; color: var(--textMuted, #6F6F6F); margin-top: 3px; letter-spacing: 0.02em; }
        @media (max-width: 768px) {
            #fomo-toast-container { left: 12px; right: auto; max-width: min(calc(100% - 96px), 320px); bottom: 90px; }
            .fomo-toast { max-width: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .fomo-toast { transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1), transform 0.45s cubic-bezier(0.16,1,0.3,1); transform: none !important; }
        }

        /* ============================================================
           GARANTÍA DE AUTENTICIDAD — micro-animaciones en hover
           (efecto tecnológico: leve giro 3D + resplandor de marca)
           ============================================================ */
        .trust-grid { perspective: 900px; }
        .trust-card { transition: transform 0.35s ease; }
        .trust-icon {
            width: 3.5rem; height: 3.5rem;
            margin: 0 auto 1rem;
            border-radius: 9999px;
            background-color: #FFFFFF;
            box-shadow: 0 1px 2px rgba(0,0,0,0.06);
            display: flex; align-items: center; justify-content: center;
            color: var(--primary);
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.5s cubic-bezier(.16,1,.3,1), box-shadow 0.5s ease;
            will-change: transform;
        }
        .trust-icon::before {
            content: '';
            position: absolute;
            inset: -7px;
            border-radius: 9999px;
            background: radial-gradient(circle, rgba(194,0,14,0.35), transparent 70%);
            opacity: 0;
            transform: scale(0.8);
            transition: opacity 0.4s ease, transform 0.4s ease;
            z-index: -1;
        }
        .trust-icon i { transition: transform 0.5s cubic-bezier(.16,1,.3,1); }
        .trust-card:hover .trust-icon {
            transform: rotateY(16deg) rotateX(8deg) translateY(-4px);
            box-shadow: 0 14px 26px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.1);
        }
        .trust-card:hover .trust-icon::before { opacity: 1; transform: scale(1); }
        .trust-card:hover .trust-icon i { transform: rotateY(-16deg) scale(1.1); }
        .trust-card:hover h3 { color: var(--primary); }
        .trust-card h3 { transition: color 0.3s ease; }
        @media (prefers-reduced-motion: reduce) {
            .trust-icon, .trust-icon::before, .trust-icon i { transition: none !important; }
            .trust-card:hover .trust-icon { transform: none; }
        }

        /* ============================================================
           "HABLEMOS CON TRANSPARENCIA" — FAQ acordeón (cards premium)
           ============================================================ */
        .faq-container { max-width: 760px; margin: 0 auto; }
        .faq-list { display: flex; flex-direction: column; }

        .faq-item {
            background-color: #FFFFFF;
            border: none;
            border-top: 1px solid var(--borderGray);
            overflow: hidden;
        }
        .faq-item:last-child { border-bottom: 1px solid var(--borderGray); }
        .faq-item:hover { background: none; }

        /* Oculta el marcador nativo del navegador en todos los motores
           (Chrome/Edge usan ::-webkit-details-marker, Firefox/Safari usan ::marker) */
        .faq-item > summary { list-style: none; }
        .faq-item > summary::-webkit-details-marker { display: none; }
        .faq-item > summary::marker { content: ""; font-size: 0; }

        .faq-question {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            cursor: pointer;
            font-size: 13.5px;
            font-weight: 700;
            color: var(--textMain);
            line-height: 1.4;
            transition: background-color 0.25s ease, color 0.25s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .faq-question:hover { background-color: transparent; color: var(--primary); }
        .faq-item[open] > .faq-question { color: var(--primary); }

        .faq-icon {
            flex: none;
            color: var(--primary);
            transition: transform 0.35s cubic-bezier(.4,0,.2,1);
        }
        .faq-item[open] .faq-icon { transform: rotate(180deg); }

        /* Truco de CSS Grid: permite animar de 0 a "auto" alto sin JS y sin saltos.
           display:grid se fuerza con !important porque el navegador aplica
           "display:none" por defecto al contenido cerrado de <details>. */
        .faq-panel {
            display: grid !important;
            grid-template-rows: 0fr;
            opacity: 0;
            transition: grid-template-rows 0.35s cubic-bezier(.4,0,.2,1), opacity 0.3s ease;
        }
        .faq-item[open] > .faq-panel { grid-template-rows: 1fr; opacity: 1; }

        .faq-answer {
            overflow: hidden;
            min-height: 0;
            color: var(--textMuted);
            border-top: 1px solid var(--borderGray);
        }
        .faq-answer p { margin: 0; }
        .faq-answer strong { color: var(--textMain); }

        @media (prefers-reduced-motion: reduce) {
            .faq-panel, .faq-icon { transition: none !important; }
        }

        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }
        .glass-header {
            background-color: var(--header-red-dark);
            color: #FFFFFF;
            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.28);
        }
        /* Selector con mayor especificidad que ".top-0" (utilidad compilada) para
           que el header quede siempre pegado justo debajo de la barra de oferta,
           sin importar el orden en que se cargue el CSS. La altura real de la
           barra la calcula JS y la guarda en --promo-bar-h (ver initPromoTopBar). */
        header.glass-header { top: var(--promo-bar-h, 0px); }
        #cart-counter { transition: transform 0.2s ease; }
        /* --- Burbuja de notificación del carrito: pequeña, sutil y elegante --- */
        /* .cart-badge legacy — reemplazado por .hdr-cart design (ver abajo) */
        /* --- Iconos de cabecera: SVG outline puros, mismo tamaño y grosor --- */
        .header-icon {
            width: 22px;
            height: 22px;
            stroke: currentColor;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            fill: none;
        }
        /* --- Logo del header: una sola instancia, centrada, igual en cualquier
           tamaño de pantalla. El filtro fuerza el logo a blanco puro sin importar
           su color original — así funciona sobre el fondo rojo oscuro sin
           necesidad de subir una versión aparte del archivo. --- */
        #header-logo-img {
            max-height: var(--header-logo-h, 32px);
            width: auto;
            height: auto;
            filter: brightness(0) invert(1);
        }
        @media (max-width: 767px) {
            #header-logo-img, #header-logo-text { max-width: 100%; }
        }
        /* Marquee CSS puro — aceleración GPU, sin requestAnimationFrame */
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
#marquee-track {
    animation: marqueeScroll 30s linear infinite;
    will-change: transform;
}
#marquee-container:hover #marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { #marquee-track { animation: none !important; } }
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        /* --- Marquee / top bar: ítems reutilizables + ajuste para móvil --- */
        .marquee-item {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            margin-right: 4rem;
            font-size: 12px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            white-space: nowrap;
        }
        @media (max-width: 768px) {
            #marquee-container { padding: 8px 0; }
            .marquee-item { font-size: 11px; margin-right: 2rem; gap: 4px; }
            #marquee-container .w-4 { width: 14px; height: 14px; }
        }
        @media (max-width: 420px) {
            .marquee-item { font-size: 10px; margin-right: 1.5rem; }
        }

        /* ============================================================
           UTILIDADES (equivalentes a las clases de Tailwind usadas)
           ============================================================ */
        .-right-2 { right: -0.5rem; }
        .-top-12 { top: -3rem; }
        .-top-2 { top: -0.5rem; }
        .-translate-x-1 { transform: translateX(-0.25rem); }
        .-translate-x-1\/2 { transform: translateX(-50%); }
        .-translate-x-full { transform: translateX(-100%); }
        .absolute { position: absolute; }
        .accent-primary { accent-color: var(--primary); }
        .animate-spin { animation: spin 1s linear infinite; }
        .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
        .aspect-\[21\/9\] { aspect-ratio: 21 / 9; }
        .aspect-\[3\/4\] { aspect-ratio: 3 / 4; }
        .aspect-\[4\/3\] { aspect-ratio: 4 / 3; }
        .aspect-\[4\/5\] { aspect-ratio: 4 / 5; }
        .aspect-auto { aspect-ratio: auto; }
        .aspect-square { aspect-ratio: 1 / 1; }
        .backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
        .bg-\[\#111\] { background-color: var(--dark2); }
        .bg-\[\#1a1a1a\] { background-color: var(--dark1); }
        .bg-\[\#25D366\] { background-color: var(--whatsapp); }
        .bg-\[\#D4AF37\] { background-color: var(--gold); }
        .bg-\[\#F9F9F9\] { background-color: var(--offwhite); }
        .bg-bgLight { background-color: var(--bgLight); }
        .bg-black { background-color: var(--black); }
        .bg-black\/10 { background-color: rgba(0, 0, 0, 0.1); }
        .bg-black\/50 { background-color: rgba(0, 0, 0, 0.5); }
        .bg-black\/60 { background-color: rgba(0, 0, 0, 0.6); }
        .bg-black\/70 { background-color: rgba(0, 0, 0, 0.7); }
        .bg-black\/90 { background-color: rgba(0, 0, 0, 0.9); }
        .bg-center { background-position: center; }
        .bg-cover { background-size: cover; }
        .bg-footerBg { background-color: var(--footerBg); }
        /* --- Footer ultra minimalista --- */
        .footer-location {
            font-family: 'Montserrat', sans-serif;
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: 0.25em;
            color: rgba(255, 255, 255, 0.55);
        }
        .footer-info-link {
            font-family: 'Montserrat', sans-serif;
            font-size: 13px;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.7);
        }
        .footer-info-link:hover { color: #FFFFFF; }
        .bg-gray-100 { background-color: var(--gray-100); }
        .bg-gray-50 { background-color: var(--gray-50); }
        .bg-primary { background-color: var(--primary); }
        .bg-red-50 { background-color: var(--red-50); }
        .bg-red-800 { background-color: var(--red-800); }
        .bg-textMain { background-color: var(--textMain); }
        .bg-transparent { background-color: transparent; }
        .bg-white { background-color: var(--white); }
        .bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
        .bg-white\/25 { background-color: rgba(255, 255, 255, 0.25); }
        .bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }
        .block { display: block; }
        .blur-xl { filter: blur(24px); }
        .border { border-width: 1px; }
        .border-2 { border-width: 2px; }
        .border-\[\#333\] { border-color: #333333; }
        .border-\[\#D4AF37\] { border-color: var(--gold); }
        .border-\[\#D4AF37\]\/30 { border-color: rgba(212, 175, 55, 0.3); }
        .border-b { border-bottom-width: 1px; }
        .border-b-0 { border-bottom-width: 0px; }
        .border-b-2 { border-bottom-width: 2px; }
        .border-bgLight { border-color: var(--bgLight); }
        .border-black { border-color: var(--black); }
        .border-borderGray { border-color: var(--borderGray); }
        .border-dashed { border-style: dashed; }
        .border-gray-100 { border-color: var(--gray-100); }
        .border-gray-50 { border-color: var(--gray-50); }
        .border-primary { border-color: var(--primary); }
        .border-primary\/20 { border-color: rgba(200, 16, 46, 0.2); }
        .border-red-800 { border-color: var(--red-800); }
        .border-t { border-top-width: 1px; }
        .border-textMain { border-color: var(--textMain); }
        .border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
        .bottom-0 { bottom: 0; }
        .bottom-24 { bottom: 6rem; }
        .bottom-6 { bottom: 1.5rem; }
        .bottom-8 { bottom: 2rem; }
        .brightness-75 { filter: brightness(0.75); }
        .brightness-90 { filter: brightness(0.9); }
        .brightness-95 { filter: brightness(0.95); }
        .col-span-full { grid-column: 1 / -1; }
        .cursor-pointer { cursor: pointer; }
        .cursor-zoom-in { cursor: zoom-in; }
        .cursor-zoom-out { cursor: zoom-out; }
        .drop-shadow-2xl { filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15)); }
        .drop-shadow-md { filter: drop-shadow(0 4px 3px rgba(0,0,0,0.07)) drop-shadow(0 2px 2px rgba(0,0,0,0.06)); }
        .duration-1000 { transition-duration: 1000ms; }
        .duration-200 { transition-duration: 200ms; }
        .duration-300 { transition-duration: 300ms; }
        .duration-700 { transition-duration: 700ms; }
        .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
        .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
        .fill-current { fill: currentColor; }
        .fill-primary { fill: var(--primary); }
        .fixed { position: fixed; }
        .flex { display: flex; }
        .flex-1 { flex: 1 1 0%; }
        .flex-col { flex-direction: column; }
        .flex-grow { flex-grow: 1; }
        .flex-grow-0 { flex-grow: 0; }
        .flex-row { flex-direction: row; }
        .flex-shrink-0 { flex-shrink: 0; }
        .flex-wrap { flex-wrap: wrap; }
        .font-bold { font-weight: 700; }
        .font-medium { font-weight: 500; }
        .font-normal { font-weight: 400; }
        .font-semibold { font-weight: 600; }
        .gap-0 { gap: 0px; }
        .gap-0\.5 { gap: 0.125rem; }
        .gap-1 { gap: 0.25rem; }
        .gap-1\.5 { gap: 0.375rem; }
        .gap-10 { gap: 2.5rem; }
        .gap-12 { gap: 3rem; }
        .gap-14 { gap: 3.5rem; }
        .gap-16 { gap: 4rem; }
        .gap-2 { gap: 0.5rem; }
        .gap-2\.5 { gap: 0.625rem; }
        .gap-20 { gap: 5rem; }
        .gap-24 { gap: 6rem; }
        .gap-3 { gap: 0.75rem; }
        .gap-3\.5 { gap: 0.875rem; }
        .gap-4 { gap: 1rem; }
        .gap-5 { gap: 1.25rem; }
        .gap-6 { gap: 1.5rem; }
        .gap-64 { gap: 16rem; }
        .gap-7 { gap: 1.75rem; }
        .gap-8 { gap: 2rem; }
        .gap-9 { gap: 2.25rem; }
        .grayscale { filter: grayscale(100%); }
        .grid { display: grid; }
        .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
        .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .h-0 { height: 0px; }
        .h-0\.5 { height: 0.125rem; }
        .h-1 { height: 0.25rem; }
        .h-1\.5 { height: 0.375rem; }
        .h-10 { height: 2.5rem; }
        .h-12 { height: 3rem; }
        .h-14 { height: 3.5rem; }
        .h-16 { height: 4rem; }
        .h-2 { height: 0.5rem; }
        .h-2\.5 { height: 0.625rem; }
        .h-20 { height: 5rem; }
        .h-24 { height: 6rem; }
        .h-3 { height: 0.75rem; }
        .h-3\.5 { height: 0.875rem; }
        .h-4 { height: 1rem; }
        .h-5 { height: 1.25rem; }
        .h-6 { height: 1.5rem; }
        .h-64 { height: 16rem; }
        .h-7 { height: 1.75rem; }
        .h-8 { height: 2rem; }
        .h-9 { height: 2.25rem; }
        .h-full { height: 100%; }
        .h-px { height: 1px; }
        .hidden{display:none!important}
        .inline-block { display: inline-block; }
        .inline-flex { display: inline-flex; }
        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
        .inset-x-0 { left: 0; right: 0; }
        .items-baseline { align-items: baseline; }
        .items-center { align-items: center; }
        .items-end { align-items: flex-end; }
        .items-start { align-items: flex-start; }
        .justify-between { justify-content: space-between; }
        .justify-center { justify-content: center; }
        .justify-end { justify-content: flex-end; }
        .leading-none { line-height: 1; }
        .leading-relaxed { line-height: 1.625; }
        .leading-snug { line-height: 1.375; }
        .leading-tight { line-height: 1.25; }
        .left-0 { left: 0; }
        .left-1\/2 { left: 50%; }
        .left-3 { left: 0.75rem; }
        .line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
        .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
        .line-through { text-decoration: line-through; }
        .max-h-60 { max-height: 15rem; }
        .max-h-64 { max-height: 16rem; }
        .max-h-\[480px\] { max-height: 480px; }
        .max-h-full { max-height: 100%; }
        .max-w-\[1200px\] { max-width: 1200px; }
        .max-w-\[700px\] { max-width: 700px; }
        .max-w-full { max-width: 100%; }
        .max-w-md { max-width: 28rem; }
        .max-w-sm { max-width: 24rem; }
        .mb-0 { margin-bottom: 0px; }
        .mb-0\.5 { margin-bottom: 0.125rem; }
        .mb-1 { margin-bottom: 0.25rem; }
        .mb-1\.5 { margin-bottom: 0.375rem; }
        .mb-10 { margin-bottom: 2.5rem; }
        .mb-12 { margin-bottom: 3rem; }
        .mb-14 { margin-bottom: 3.5rem; }
        .mb-16 { margin-bottom: 4rem; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-2\.5 { margin-bottom: 0.625rem; }
        .mb-20 { margin-bottom: 5rem; }
        .mb-24 { margin-bottom: 6rem; }
        .mb-3 { margin-bottom: 0.75rem; }
        .mb-3\.5 { margin-bottom: 0.875rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mb-5 { margin-bottom: 1.25rem; }
        .mb-6 { margin-bottom: 1.5rem; }
        .mb-64 { margin-bottom: 16rem; }
        .mb-7 { margin-bottom: 1.75rem; }
        .mb-8 { margin-bottom: 2rem; }
        .mb-9 { margin-bottom: 2.25rem; }
        .min-h-\[320px\] { min-height: 320px; }
        .min-h-\[560px\] { min-height: 560px; }
        .min-h-\[60vh\] { min-height: 60vh; }
        .min-h-screen { min-height: 100vh; }
        .min-w-\[16px\] { min-width: 16px; }
        .ml-0 { margin-left: 0px; }
        .ml-0\.5 { margin-left: 0.125rem; }
        .ml-1 { margin-left: 0.25rem; }
        .ml-1\.5 { margin-left: 0.375rem; }
        .ml-10 { margin-left: 2.5rem; }
        .ml-12 { margin-left: 3rem; }
        .ml-14 { margin-left: 3.5rem; }
        .ml-16 { margin-left: 4rem; }
        .ml-2 { margin-left: 0.5rem; }
        .ml-2\.5 { margin-left: 0.625rem; }
        .ml-20 { margin-left: 5rem; }
        .ml-24 { margin-left: 6rem; }
        .ml-3 { margin-left: 0.75rem; }
        .ml-3\.5 { margin-left: 0.875rem; }
        .ml-4 { margin-left: 1rem; }
        .ml-5 { margin-left: 1.25rem; }
        .ml-6 { margin-left: 1.5rem; }
        .ml-64 { margin-left: 16rem; }
        .ml-7 { margin-left: 1.75rem; }
        .ml-8 { margin-left: 2rem; }
        .ml-9 { margin-left: 2.25rem; }
        .mr-0 { margin-right: 0px; }
        .mr-0\.5 { margin-right: 0.125rem; }
        .mr-1 { margin-right: 0.25rem; }
        .mr-1\.5 { margin-right: 0.375rem; }
        .mr-10 { margin-right: 2.5rem; }
        .mr-12 { margin-right: 3rem; }
        .mr-14 { margin-right: 3.5rem; }
        .mr-16 { margin-right: 4rem; }
        .mr-2 { margin-right: 0.5rem; }
        .mr-2\.5 { margin-right: 0.625rem; }
        .mr-20 { margin-right: 5rem; }
        .mr-24 { margin-right: 6rem; }
        .mr-3 { margin-right: 0.75rem; }
        .mr-3\.5 { margin-right: 0.875rem; }
        .mr-4 { margin-right: 1rem; }
        .mr-5 { margin-right: 1.25rem; }
        .mr-6 { margin-right: 1.5rem; }
        .mr-64 { margin-right: 16rem; }
        .mr-7 { margin-right: 1.75rem; }
        .mr-8 { margin-right: 2rem; }
        .mr-9 { margin-right: 2.25rem; }
        .mt-0 { margin-top: 0px; }
        .mt-0\.5 { margin-top: 0.125rem; }
        .mt-1 { margin-top: 0.25rem; }
        .mt-1\.5 { margin-top: 0.375rem; }
        .mt-10 { margin-top: 2.5rem; }
        .mt-12 { margin-top: 3rem; }
        .mt-14 { margin-top: 3.5rem; }
        .mt-16 { margin-top: 4rem; }
        .mt-2 { margin-top: 0.5rem; }
        .mt-2\.5 { margin-top: 0.625rem; }
        .mt-20 { margin-top: 5rem; }
        .mt-24 { margin-top: 6rem; }
        .mt-3 { margin-top: 0.75rem; }
        .mt-3\.5 { margin-top: 0.875rem; }
        .mt-4 { margin-top: 1rem; }
        .mt-5 { margin-top: 1.25rem; }
        .mt-6 { margin-top: 1.5rem; }
        .mt-64 { margin-top: 16rem; }
        .mt-7 { margin-top: 1.75rem; }
        .mt-8 { margin-top: 2rem; }
        .mt-9 { margin-top: 2.25rem; }
        .mx-auto { margin-left: auto; margin-right: auto; }
        .object-center { object-position: center; }
        .object-contain { object-fit: contain; }
        .object-cover { object-fit: cover; }
        .opacity-0 { opacity: 0; }
        .opacity-100 { opacity: 1; }
        .opacity-20 { opacity: 0.2; }
        .opacity-40 { opacity: 0.4; }
        .opacity-50 { opacity: 0.5; }
        .outline-none { outline: none; }
        .overflow-auto { overflow: auto; }
        .overflow-hidden { overflow: hidden; }
        .overflow-x-hidden { overflow-x: hidden; }
        .overflow-y-auto { overflow-y: auto; }
        .p-0 { padding: 0px; }
        .p-0\.5 { padding: 0.125rem; }
        .p-1 { padding: 0.25rem; }
        .p-1\.5 { padding: 0.375rem; }
        .p-10 { padding: 2.5rem; }
        .p-12 { padding: 3rem; }
        .p-14 { padding: 3.5rem; }
        .p-16 { padding: 4rem; }
        .p-2 { padding: 0.5rem; }
        .p-2\.5 { padding: 0.625rem; }
        .p-20 { padding: 5rem; }
        .p-24 { padding: 6rem; }
        .p-3 { padding: 0.75rem; }
        .p-3\.5 { padding: 0.875rem; }
        .p-4 { padding: 1rem; }
        .p-5 { padding: 1.25rem; }
        .p-6 { padding: 1.5rem; }
        .p-64 { padding: 16rem; }
        .p-7 { padding: 1.75rem; }
        .p-8 { padding: 2rem; }
        .p-9 { padding: 2.25rem; }
        .pb-0 { padding-bottom: 0px; }
        .pb-0\.5 { padding-bottom: 0.125rem; }
        .pb-1 { padding-bottom: 0.25rem; }
        .pb-1\.5 { padding-bottom: 0.375rem; }
        .pb-10 { padding-bottom: 2.5rem; }
        .pb-12 { padding-bottom: 3rem; }
        .pb-14 { padding-bottom: 3.5rem; }
        .pb-16 { padding-bottom: 4rem; }
        .pb-2 { padding-bottom: 0.5rem; }
        .pb-2\.5 { padding-bottom: 0.625rem; }
        .pb-20 { padding-bottom: 5rem; }
        .pb-24 { padding-bottom: 6rem; }
        .pb-3 { padding-bottom: 0.75rem; }
        .pb-3\.5 { padding-bottom: 0.875rem; }
        .pb-4 { padding-bottom: 1rem; }
        .pb-5 { padding-bottom: 1.25rem; }
        .pb-6 { padding-bottom: 1.5rem; }
        .pb-64 { padding-bottom: 16rem; }
        .pb-7 { padding-bottom: 1.75rem; }
        .pb-8 { padding-bottom: 2rem; }
        .pb-9 { padding-bottom: 2.25rem; }
        .pl-0 { padding-left: 0px; }
        .pl-0\.5 { padding-left: 0.125rem; }
        .pl-1 { padding-left: 0.25rem; }
        .pl-1\.5 { padding-left: 0.375rem; }
        .pl-10 { padding-left: 2.5rem; }
        .pl-12 { padding-left: 3rem; }
        .pl-14 { padding-left: 3.5rem; }
        .pl-16 { padding-left: 4rem; }
        .pl-2 { padding-left: 0.5rem; }
        .pl-2\.5 { padding-left: 0.625rem; }
        .pl-20 { padding-left: 5rem; }
        .pl-24 { padding-left: 6rem; }
        .pl-3 { padding-left: 0.75rem; }
        .pl-3\.5 { padding-left: 0.875rem; }
        .pl-4 { padding-left: 1rem; }
        .pl-5 { padding-left: 1.25rem; }
        .pl-6 { padding-left: 1.5rem; }
        .pl-64 { padding-left: 16rem; }
        .pl-7 { padding-left: 1.75rem; }
        .pl-8 { padding-left: 2rem; }
        .pl-9 { padding-left: 2.25rem; }
        .pointer-events-auto { pointer-events: auto; }
        .pointer-events-none { pointer-events: none; }
        .pr-0 { padding-right: 0px; }
        .pr-0\.5 { padding-right: 0.125rem; }
        .pr-1 { padding-right: 0.25rem; }
        .pr-1\.5 { padding-right: 0.375rem; }
        .pr-10 { padding-right: 2.5rem; }
        .pr-12 { padding-right: 3rem; }
        .pr-14 { padding-right: 3.5rem; }
        .pr-16 { padding-right: 4rem; }
        .pr-2 { padding-right: 0.5rem; }
        .pr-2\.5 { padding-right: 0.625rem; }
        .pr-20 { padding-right: 5rem; }
        .pr-24 { padding-right: 6rem; }
        .pr-3 { padding-right: 0.75rem; }
        .pr-3\.5 { padding-right: 0.875rem; }
        .pr-4 { padding-right: 1rem; }
        .pr-5 { padding-right: 1.25rem; }
        .pr-6 { padding-right: 1.5rem; }
        .pr-64 { padding-right: 16rem; }
        .pr-7 { padding-right: 1.75rem; }
        .pr-8 { padding-right: 2rem; }
        .pr-9 { padding-right: 2.25rem; }
        .pt-0 { padding-top: 0px; }
        .pt-0\.5 { padding-top: 0.125rem; }
        .pt-1 { padding-top: 0.25rem; }
        .pt-1\.5 { padding-top: 0.375rem; }
        .pt-10 { padding-top: 2.5rem; }
        .pt-12 { padding-top: 3rem; }
        .pt-14 { padding-top: 3.5rem; }
        .pt-16 { padding-top: 4rem; }
        .pt-2 { padding-top: 0.5rem; }
        .pt-2\.5 { padding-top: 0.625rem; }
        .pt-20 { padding-top: 5rem; }
        .pt-24 { padding-top: 6rem; }
        .pt-3 { padding-top: 0.75rem; }
        .pt-3\.5 { padding-top: 0.875rem; }
        .pt-4 { padding-top: 1rem; }
        .pt-5 { padding-top: 1.25rem; }
        .pt-6 { padding-top: 1.5rem; }
        .pt-64 { padding-top: 16rem; }
        .pt-7 { padding-top: 1.75rem; }
        .pt-8 { padding-top: 2rem; }
        .pt-9 { padding-top: 2.25rem; }
        .px-0 { padding-left: 0px; padding-right: 0px; }
        .px-0\.5 { padding-left: 0.125rem; padding-right: 0.125rem; }
        .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
        .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
        .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
        .px-12 { padding-left: 3rem; padding-right: 3rem; }
        .px-14 { padding-left: 3.5rem; padding-right: 3.5rem; }
        .px-16 { padding-left: 4rem; padding-right: 4rem; }
        .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
        .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
        .px-20 { padding-left: 5rem; padding-right: 5rem; }
        .px-24 { padding-left: 6rem; padding-right: 6rem; }
        .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
        .px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
        .px-4 { padding-left: 1rem; padding-right: 1rem; }
        .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
        .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
        .px-64 { padding-left: 16rem; padding-right: 16rem; }
        .px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
        .px-8 { padding-left: 2rem; padding-right: 2rem; }
        .px-9 { padding-left: 2.25rem; padding-right: 2.25rem; }
        .py-0 { padding-top: 0px; padding-bottom: 0px; }
        .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
        .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
        .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
        .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
        .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
        .py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
        .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
        .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
        .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
        .py-20 { padding-top: 5rem; padding-bottom: 5rem; }
        .py-24 { padding-top: 6rem; padding-bottom: 6rem; }
        .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
        .py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
        .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
        .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
        .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
        .py-64 { padding-top: 16rem; padding-bottom: 16rem; }
        .py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem; }
        .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
        .py-9 { padding-top: 2.25rem; padding-bottom: 2.25rem; }
        .relative { position: relative; }
        .right-0 { right: 0; }
        .right-2 { right: 0.5rem; }
        .right-3 { right: 0.75rem; }
        .right-4 { right: 1rem; }
        .right-6 { right: 1.5rem; }
        .rounded-full { border-radius: 9999px; }
        .rounded-l-none { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }
        .rounded-none { border-radius: 0px; }
        .rounded-r-none { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
        .rounded-sm { border-radius: 0.125rem; }
        .scale-105 { transform: scale(1.05); }
        .scale-110 { transform: scale(1.1); }
        .scale-125 { transform: scale(1.25); }
        .scale-95 { transform: scale(0.95); }
        .select-none { user-select: none; -webkit-user-select: none; }
        .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }
        .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); }
        .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
        .shadow-none { box-shadow: none; }
        .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
        .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }
        .sticky { position: sticky; }
        .tabular-nums { font-variant-numeric: tabular-nums; }
        .text-2xl { font-size: 1.5rem; line-height: 2rem; }
        .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
        .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
        .text-5xl { font-size: 3rem; line-height: 1; }
        .text-6xl { font-size: 3.75rem; line-height: 1; }
        .text-\[\#D4AF37\] { color: var(--gold); }
        .text-\[10px\] { font-size: 10px; }
        .text-\[11px\] { font-size: 11px; }
        .text-\[9px\] { font-size: 9px; }
        .text-base { font-size: 1rem; line-height: 1.5rem; }
        .text-black { color: var(--black); }
        .text-borderGray { color: var(--borderGray); }
        .text-center { text-align: center; }
        .text-gray-200 { color: var(--gray-200); }
        .text-gray-300 { color: var(--gray-300); }
        .text-gray-400 { color: var(--gray-400); }
        .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
        .text-primary { color: var(--primary); }
        .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
        .text-textMain { color: var(--textMain); }
        .text-textMuted { color: var(--textMuted); }
        .text-white { color: var(--white); }
        .text-white\/80 { color: rgba(255, 255, 255, 0.8); }
        .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
        .text-xs { font-size: 0.75rem; line-height: 1rem; }
        .text-yellow-400 { color: var(--yellow-400); }
        .top-0 { top: 0; }
        .top-2 { top: 0.5rem; }
        .top-28 { top: 7rem; }
        .top-3 { top: 0.75rem; }
        .top-4 { top: 1rem; }
        .top-full { top: 100%; }
        .tracking-\[0\.15em\] { letter-spacing: 0.15em; }
        .tracking-\[0\.1em\] { letter-spacing: 0.1em; }
        .tracking-\[0\.25em\] { letter-spacing: 0.25em; }
        .tracking-\[0\.2em\] { letter-spacing: 0.2em; }
        .tracking-\[0\.3em\] { letter-spacing: 0.3em; }
        .tracking-\[0\.4em\] { letter-spacing: 0.4em; }
        .tracking-tighter { letter-spacing: -0.05em; }
        .tracking-wide { letter-spacing: 0.025em; }
        .tracking-wider { letter-spacing: 0.05em; }
        .tracking-widest { letter-spacing: 0.1em; }
        .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
        .transition-colors { transition-property: color, background-color, border-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
        .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
        .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
        .translate-x-1 { transform: translateX(0.25rem); }
        .translate-x-full { transform: translateX(100%); }
        .translate-y-0 { transform: translateY(0px); }
        .translate-y-4 { transform: translateY(1rem); }
        .underline { text-decoration: underline; }
        .uppercase { text-transform: uppercase; }
        .w-0 { width: 0px; }
        .w-0\.5 { width: 0.125rem; }
        .w-1 { width: 0.25rem; }
        .w-1\.5 { width: 0.375rem; }
        .w-10 { width: 2.5rem; }
        .w-12 { width: 3rem; }
        .w-14 { width: 3.5rem; }
        .w-16 { width: 4rem; }
        .w-2 { width: 0.5rem; }
        .w-2\.5 { width: 0.625rem; }
        .w-2\/4 { width: 50%; }
        .w-2\/5 { width: 40%; }
        .w-20 { width: 5rem; }
        .w-24 { width: 6rem; }
        .w-3 { width: 0.75rem; }
        .w-3\.5 { width: 0.875rem; }
        .w-3\/5 { width: 60%; }
        .w-4 { width: 1rem; }
        .w-4\/5 { width: 80%; }
        .w-5 { width: 1.25rem; }
        .w-6 { width: 1.5rem; }
        .w-64 { width: 16rem; }
        .w-7 { width: 1.75rem; }
        .w-8 { width: 2rem; }
        .w-9 { width: 2.25rem; }
        .w-\[300px\] { width: 300px; }
        .w-\[350px\] { width: 350px; }
        .w-\[380px\] { width: 380px; }
        .w-full { width: 100%; }
        .whitespace-normal { white-space: normal; }
        .whitespace-nowrap { white-space: nowrap; }
        .z-10 { z-index: 10; }
        .z-20 { z-index: 20; }
        .z-40 { z-index: 40; }
        .z-50 { z-index: var(--z-navbar); }        /* Navbar y sus desplegables */
        .z-\[60\] { z-index: var(--z-drawer); }     /* Drawers: carrito y menú móvil */
        .z-\[70\] { z-index: var(--z-modal-checkout); }  /* Modal de checkout */
        .z-\[75\] { z-index: var(--z-modal-login); }     /* Modal de login */
        .z-\[80\] { z-index: var(--z-modal-lightbox); }  /* Lightbox de imágenes */

        /* ---- Espaciado vertical entre elementos hijos (space-y-N) ---- */
        .space-y-2 > * + * { margin-top: 0.5rem; }
        .space-y-3 > * + * { margin-top: 0.75rem; }
        .space-y-4 > * + * { margin-top: 1rem; }
        .space-y-5 > * + * { margin-top: 1.25rem; }

        /* ---- Combinaciones especiales ---- */
        .bg-black.bg-opacity-50 { background-color: rgba(0, 0, 0, 0.5); }
        .bg-gradient-to-t.from-black\/90.to-transparent { background-image: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0)); }

        /* ============================================================
           ESTADOS: hover / focus
           ============================================================ */
        .hover\:bg-\[\#D4AF37\]:hover { background-color: var(--gold); }
        .hover\:bg-bgLight:hover { background-color: var(--bgLight); }
        .hover\:bg-red-50:hover { background-color: var(--red-50); }
        .hover\:bg-red-800:hover { background-color: var(--red-800); }
        .hover\:bg-textMain:hover { background-color: var(--textMain); }
        .hover\:bg-white:hover { background-color: var(--white); }
        .hover\:bg-white\/25:hover { background-color: rgba(255, 255, 255, 0.25); }
        .hover\:border-primary:hover { border-color: var(--primary); }
        .hover\:scale-110:hover { transform: scale(1.1); }
        .hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
        .hover\:text-black:hover { color: var(--black); }
        .hover\:text-primary:hover { color: var(--primary); }
        .hover\:text-white:hover { color: var(--white); }
        .hover\:underline:hover { text-decoration: underline; }

        .focus\:border-primary:focus { border-color: var(--primary); }
        .focus\:outline-none:focus { outline: none; }

        /* ============================================================
           ESTADOS: group-hover (requiere clase .group en el padre)
           ============================================================ */
        .group:hover .group-hover\:-translate-x-1 { transform: translateX(-0.25rem); }
        .group:hover .group-hover\:brightness-90 { filter: brightness(0.9); }
        .group:hover .group-hover\:brightness-95 { filter: brightness(0.95); }
        .group:hover .group-hover\:opacity-100 { opacity: 1; }
        .group:hover .group-hover\:scale-105 { transform: scale(1.05); }
        .group:hover .group-hover\:text-primary { color: var(--primary); }
        .group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }

        /* ---- Breakpoint sm: min-width 640px ---- */
        @media (min-width: 640px) {
            .sm\:block { display: block; }
            .sm\:flex-row { flex-direction: row; }
            .sm\:rounded-l-none { border-top-left-radius: 0px; border-bottom-left-radius: 0px; }
            .sm\:rounded-r-none { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
            .sm\:w-\[350px\] { width: 350px; }
            .sm\:w-\[380px\] { width: 380px; }
        }

        /* ---- Breakpoint md: min-width 768px ---- */
        @media (min-width: 768px) {
            .md\:aspect-\[21\/9\] { aspect-ratio: 21 / 9; }
            .md\:aspect-auto { aspect-ratio: auto; }
            .md\:flex{display:flex!important}
            .md\:flex-grow-0 { flex-grow: 0; }
            .md\:flex-row { flex-direction: row; }
            .md\:gap-4 { gap: 1rem; }
            .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .md\:h-5 { height: 1.25rem; }
            .md\:h-6 { height: 1.5rem; }
            .md\:h-64 { height: 16rem; }
            .md\:hidden{display:none!important}
            .md\:mt-0 { margin-top: 0px; }
            .md\:p-12 { padding: 3rem; }
            .md\:p-14 { padding: 3.5rem; }
            .md\:px-4 { padding-left: 1rem; padding-right: 1rem; }
            .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
            .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
            .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
            .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
            .md\:text-5xl { font-size: 3rem; line-height: 1; }
            .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
            .md\:text-\[10px\] { font-size: 10px; }
            .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
            .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
            .md\:text-sm { font-size: 0.875rem; line-height: 1.25rem; }
            .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
            .md\:text-xs { font-size: 0.75rem; line-height: 1rem; }
            .md\:w-5 { width: 1.25rem; }
            .md\:w-6 { width: 1.5rem; }
        }

        /* ---- Breakpoint lg: min-width 1024px ---- */
        @media (min-width: 1024px) {
            .lg\:block { display: block; }
            .lg\:flex { display: flex; }
            .lg\:flex-row { flex-direction: row; }
            .lg\:gap-8 { gap: 2rem; }
            .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
            .lg\:h-20 { height: 5rem; }
            .lg\:hidden{display:none!important}
            .lg\:mb-12 { margin-bottom: 3rem; }
            .lg\:min-h-\[560px\] { min-height: 560px; }
            .lg\:p-12 { padding: 3rem; }
            .lg\:sticky { position: sticky; }
            .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
            .lg\:text-xs { font-size: 0.75rem; line-height: 1rem; }
            .lg\:top-28 { top: 7rem; }
            .lg\:w-2\/5 { width: 40%; }
            .lg\:w-20 { width: 5rem; }
            .lg\:w-3\/5 { width: 60%; }
            .lg\:w-64 { width: 16rem; }
        }

        /* ---- Breakpoint xl: min-width 1280px ---- */
        @media (min-width: 1280px) {
            .xl\:p-16 { padding: 4rem; }
        }

        /* ============================================================
           REDISEÑO: SECCIÓN DE PRODUCTO (ESTILO PREMIUM MINIMALISTA)
           ============================================================ */

        /* Layout general: galería + info */
        .product-hero {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            margin-bottom: 2rem;
        }
        @media (min-width: 1024px) {
            .product-hero { flex-direction: row; align-items: flex-start; gap: 3.5rem; }
        }

        /* Galería de imágenes */
        .product-gallery {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        @media (min-width: 1024px) {
            .product-gallery { flex-direction: row; gap: 1rem; }
        }

        /* Columna izquierda completa: galería + tira de confianza.
           Esto es lo que ocupa el 63% y queda sticky — antes solo la
           galería tenía sticky, dejando un hueco vacío debajo cuando
           la columna de info (con specs/tabs) era más alta. */
        .product-gallery-col {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        @media (min-width: 1024px) {
            .product-gallery-col {
                flex: 0 0 63%;
                position: sticky;
                top: 100px;
            }
        }


        .product-main-img-wrap {
            order: 1;
            position: relative;
            background-color: var(--bgLight);
            border-radius: 14px;
            overflow: hidden;
            aspect-ratio: 1 / 1;
            cursor: zoom-in;
        }
        @media (min-width: 1024px) {
            .product-main-img-wrap { order: 2; flex: 1; }
        }
        .product-main-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 0.5rem;
            transition: transform 0.5s ease;
        }
        .product-main-img-wrap:hover img { transform: scale(1.04); }

        .zoom-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 2.25rem;
            height: 2.25rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            color: var(--textMain);
            pointer-events: none;
        }
        .zoom-badge svg { width: 1rem; height: 1rem; }

        .product-thumbs {
            order: 2;
            display: flex;
            flex-direction: row;
            gap: 0.6rem;
            overflow-x: auto;
        }
        @media (min-width: 1024px) {
            .product-thumbs {
                order: 1;
                flex-direction: column;
                width: 76px;
                flex-shrink: 0;
                overflow-x: visible;
            }
        }

        .thumb {
            flex-shrink: 0;
            width: 64px;
            height: 64px;
            border: 1px solid var(--borderGray);
            border-radius: 8px;
            background-color: var(--bgLight);
            padding: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: border-color 0.2s ease;
        }
        .thumb img { width: 100%; height: 100%; object-fit: contain; }
        .thumb:hover { border-color: var(--primary); }
        .thumb.active { border-color: var(--primary); border-width: 1.5px; }

        /* Columna principal: imagen */
        .product-main-col {
            order: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex: 1;
            min-width: 0;
        }

        /* Acceso de video destacado (recuadro elegante) */
        .product-video-link {
            display: flex;
            align-items: center;
            gap: 13px;
            margin: 16px 0;
            padding: 13px 16px;
            text-decoration: none;
            cursor: pointer;
            border: 1px solid var(--borderGray);
            border-radius: 12px;
            background: #fff;
            transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
        }
        .product-video-link:hover {
            border-color: var(--primary);
            box-shadow: 0 4px 16px rgba(122, 0, 21, 0.12);
            transform: translateY(-1px);
        }
        .product-video-link-icon {
            width: 40px; height: 40px; flex-shrink: 0;
            border-radius: 10px;
            background: var(--bgLight);
            display: flex; align-items: center; justify-content: center;
            color: var(--primary);
        }
        .product-video-link-icon svg {
            width: 22px; height: 22px; display: block;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
        }
        .product-video-link-text { display: flex; flex-direction: column; line-height: 1.25; flex: 1; }
        .product-video-link-title {
            font-weight: 700;
            font-size: 0.8rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--primary);
        }
        .product-video-link-sub {
            font-size: 0.7rem;
            color: var(--textMuted);
            margin-top: 2px;
        }
        .product-video-link-arrow {
            flex-shrink: 0;
            color: var(--primary);
            opacity: 0.45;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }
        .product-video-link:hover .product-video-link-arrow { transform: translateX(3px); opacity: 1; }

        /* Bloque de información del producto */
        .product-info {
            display: flex;
            flex-direction: column;
            gap: 0.95rem;
        }
        @media (min-width: 1024px) {
            .product-info { flex: 1; padding-top: 0.25rem; }
        }

        /* Precio + selector de cantidad en la misma fila — se sienten
           como una sola decisión de compra, no dos pasos separados. */
        .price-qty-row {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .badge-sale {
            align-self: flex-start;
            background-color: var(--primary);
            color: #FFFFFF;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            padding: 0.35rem 0.85rem;
            border-radius: 4px;
        }


.product-meta {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--textMuted);
}

.product-rating-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}
.product-rating-stars { display: inline-flex; gap: 2px; flex-shrink: 0; }
.product-rating-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--textMain);
    letter-spacing: 0.01em;
}


        .product-description { font-size: 0.9rem; line-height: 1.6; color: var(--desc-gray); }

        /* Cantidad */
        .option-group { display: flex; flex-direction: column; }
        .option-label {
            display: block;
            font-size: 0.68rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--textMain);
            margin-bottom: 0.5rem;
        }

        /* Selector de cantidad */
        .qty-selector {
            display: inline-flex;
            align-items: center;
            border: 1px solid var(--borderGray);
            border-radius: 8px;
            height: 46px;
            width: fit-content;
            overflow: hidden;
        }
        .qty-selector button {
            width: 42px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            color: var(--textMain);
            background-color: #FFFFFF;
            transition: background-color 0.15s ease;
        }
        .qty-selector button:hover { background-color: var(--bgLight); }
        .qty-selector span {
            width: 40px;
            text-align: center;
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--textMain);
        }

        /* Botones de compra */
        .product-actions { display: flex; flex-direction: column; gap: 0.7rem; }

        /* Carrito + favorito en la misma fila — el corazón ya no es un
           link de texto discreto debajo, ahora vive junto al botón. */
        .cart-fav-row { display: flex; gap: 0.6rem; }
        .cart-fav-row .btn-add-to-bag { flex: 1; width: auto; min-width: 0; }
        .btn-fav-icon {
            width: 54px;
            height: 54px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--borderGray);
            border-radius: 2px;
            background: #FFFFFF;
            cursor: pointer;
            transition: border-color 0.2s ease, background-color 0.2s ease;
        }
        .btn-fav-icon:hover { border-color: var(--primary); background: var(--bgLight); }
        .btn-fav-icon svg { width: 19px; height: 19px; color: var(--textMain); stroke-width: 1.75; transition: fill 0.15s ease, stroke 0.15s ease; }
        .btn-fav-icon svg.is-fav { fill: var(--primary); stroke: var(--primary); }
        .size-guide-link {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 0.72rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: 0.06em;
            color: var(--textMain);
            text-decoration: underline; text-underline-offset: 3px;
            cursor: pointer; width: fit-content;
            transition: color 0.2s ease;
        }
        .size-guide-link:hover { color: var(--primary); }
        .size-guide-link svg { stroke-width: 2; }

        .btn-add-to-bag, .btn-buy-now {
            width: 100%;
            height: 54px;
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.6rem;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            cursor: pointer;
            transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .btn-add-to-bag svg, .btn-buy-now svg,
        .btn-add-to-bag i, .btn-buy-now i { width: 15px; height: 15px; flex-shrink: 0; }
        .btn-add-to-bag:active, .btn-buy-now:active { transform: scale(0.99); }

        /* Botón principal (sólido, el CTA que más debe resaltar): Comprar ahora */
        .btn-buy-now {
            background-color: var(--header-red-dark);
            color: #FFFFFF;
            border: 1px solid var(--header-red-dark);
            box-shadow: 0 1px 3px rgba(0,0,0,0.12);
        }
        .btn-buy-now:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 2px 6px rgba(0,0,0,0.16); }

        /* Botón secundario (fantasma): Agregar a la bolsa */
        .btn-add-to-bag { background-color: #FFFFFF; color: #111111; border: 1.5px solid #111111; }
        .btn-add-to-bag:hover { background-color: #111111; color: #FFFFFF; }

        /* Favoritos discreto */

        /* Barra de beneficios - Página de detalle del producto */
        .benefits-bar {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.5rem;
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--borderGray);
        }
        @media (min-width: 640px) {
            .benefits-bar { grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
        }
        .benefit-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            text-align: center;
            padding: 0.85rem 0.4rem;
            background: #FAFAFA;
            border: 1px solid var(--borderGray);
            border-radius: 2px;
            transition: all 0.25s ease;
        }
        .benefit-item:hover {
            background: #FFFFFF;
            border-color: var(--primary);
        }
        .benefit-item svg {
            width: 22px;
            height: 22px;
            color: var(--primary);
            stroke-width: 1.5;
        }
        .benefit-item .benefit-title {
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--textMain);
            line-height: 1.2;
        }
        .benefit-item .benefit-sub {
            font-size: 0.62rem;
            color: var(--textMuted);
            letter-spacing: 0.02em;
            line-height: 1.3;
            margin-top: -0.1rem;
        }

        /* ============================================================
           ALTA RELOJERÍA: NAV OFERTAS, BOTONES FLOTANTES, BADGES, MODAL LOGIN, CLUB VIP
           ============================================================ */

        /* --- Header: enlace OFERTAS destacado --- */
        /* Ofertas — texto rojo con guión bajo (referencia: Festina/BALIQ).
           Se quitó el fondo sólido: competía visualmente con la franja roja
           del marquee y con el pill del carrito — demasiado rojo a la vez. */
        .nav-ofertas {
            color: var(--accent-ofertas) !important;
            font-weight: 700;
            letter-spacing: 0.01em;
            position: relative;
            padding-bottom: 2px;
        }
        .nav-ofertas::after {
            content: '';
            position: absolute;
            left: 0; right: 0; bottom: -3px;
            height: 2px;
            background: var(--accent-ofertas);
            transform: scaleX(0.7);
            transform-origin: left;
            transition: transform 0.2s cubic-bezier(0.16,1,0.3,1);
        }
        .nav-ofertas:hover::after { transform: scaleX(1); }
        .nav-ofertas--mobile { width: fit-content; }
        .nav-ofertas--mobile::after { display: none; }

        /* --- Botones flotantes (WhatsApp / Volver arriba): identicos en diseño --- */
        .float-btn {
            position: fixed;
            z-index: var(--z-float-btn);
            width: 60px;
            height: 60px;
            border-radius: 9999px;
            background-color: #111111;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.2), 0 8px 10px -6px rgba(0,0,0,0.2);
            transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
        }
        .float-btn svg { width: 26px; height: 26px; }
        .float-btn:hover { transform: translateY(-2px); }
        .float-btn-whatsapp {
            right: 24px;
            bottom: 24px;
            background-color: var(--whatsapp);
            color: #FFFFFF;
            animation: whatsappPulse 2.5s ease-in-out infinite;
        }
        .float-btn-whatsapp svg {
            fill: currentColor;
            width: 30px;
            height: 30px;
        }
        .float-btn-whatsapp:hover {
            background-color: #1ebd5a;
            color: #FFFFFF;
            animation: none;
            transform: translateY(-2px) scale(1.05);
        }
        @keyframes whatsappPulse {
            0%, 100% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35); }
            50% { box-shadow: 0 12px 32px rgba(37, 211, 102, 0.65); }
        }
        .float-btn-top { right: 24px; bottom: 100px; }
        .float-btn-top:hover { background-color: var(--gold); color: #111111; }

        @media (max-width: 768px) {
            .float-btn { width: 48px; height: 48px; }
            .float-btn svg { width: 20px; height: 20px; }
            .float-btn-whatsapp {
                width: 56px;
                height: 56px;
                right: 14px;
                bottom: 14px;
                background-color: var(--whatsapp);
            }
            .float-btn-whatsapp svg { width: 28px; height: 28px; }
            .float-btn-top { right: 14px; bottom: 86px; }
        }

        /* --- Insignia de producto (slot para PNG, ej. REBAJAS) --- */
        .product-badge-slot {
            position: absolute;
            width: 56px;
            height: auto;
            z-index: 10;
            pointer-events: none;
        }
        .product-badge-slot img { width: 100%; height: auto; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
        /* Posiciones del sticker (esquinas) */
        .product-badge-slot.pos-tl { top: 10px; left: 10px; }
        .product-badge-slot.pos-tr { top: 10px; right: 10px; }
        .product-badge-slot.pos-bl { bottom: 10px; left: 10px; }
        .product-badge-slot.pos-br { bottom: 10px; right: 10px; }
        /* En la ficha de detalle, las esquinas respiran un poco más */
        .product-badge-slot.on-detail.pos-tl,
        .product-badge-slot.on-detail.pos-tr { top: 16px; }
        .product-badge-slot.on-detail.pos-bl,
        .product-badge-slot.on-detail.pos-br { bottom: 16px; }
        .product-badge-slot.on-detail.pos-tl,
        .product-badge-slot.on-detail.pos-bl { left: 16px; }
        .product-badge-slot.on-detail.pos-tr,
        .product-badge-slot.on-detail.pos-br { right: 16px; }

        /* --- Modal de Inicio de Sesión (Reseñas) --- */
        .auth-input {
            width: 100%;
            border: 1px solid var(--borderGray);
            border-radius: 4px;
            padding: 0.85rem 1rem;
            font-size: 0.85rem;
            color: var(--textMain);
            background-color: #FFFFFF;
            transition: border-color 0.2s ease;
        }
        .auth-input:focus { outline: none; border-color: var(--textMain); }
        .auth-switch-link { text-align: center; font-size: 0.78rem; color: var(--textMuted); }
        .auth-switch-link a, .auth-switch-link span.auth-link {
            color: var(--textMain); font-weight: 600; cursor: pointer; text-decoration: underline;
        }

        /* --- Footer redes sociales --- */
        .footer-social-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: #FFFFFF;
            border-radius: 50%;
            color: var(--primary);
            transition: all 0.25s ease;
        }
        .footer-social-link svg {
            fill: var(--primary) !important;
            width: 18px !important;
            height: 18px !important;
            display: block;
        }
        .footer-social-link:hover {
            transform: translateY(-2px);
            background-color: #1A1A1A;
        }
        .footer-social-link:hover svg {
            fill: #FFFFFF !important;
        }

        /* --- Reseñas: scrollbar y snap --- */
        .review-card {
            scroll-snap-align: start;
            transition: transform 0.25s ease;
        }
        .review-card:hover { transform: translateY(-3px); }
        #reviews-scroller::-webkit-scrollbar { height: 6px; }
        #reviews-scroller::-webkit-scrollbar-track { background: transparent; }
        #reviews-scroller::-webkit-scrollbar-thumb { background: #d8d4cc; border-radius: 999px; }
        #reviews-scroller::-webkit-scrollbar-thumb:hover { background: var(--primary); }

        /* --- Modal informativo (footer links) --- */
        .info-modal-overlay {
            position: fixed; inset: 0; z-index: var(--z-modal-info);
            background: rgba(10, 10, 12, 0.6);
            backdrop-filter: blur(4px);
            display: none; align-items: center; justify-content: center;
            padding: 20px;
            overflow-y: auto;
        }
        .info-modal-overlay.open { display: flex; }
        .info-modal-card {
            background: #FFFFFF;
            width: 100%; max-width: 720px;
            border-radius: 4px;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
            max-height: 88vh;
            display: flex; flex-direction: column;
            overflow: hidden;
            animation: infoModalSlideIn 0.3s ease-out;
        }
        @keyframes infoModalSlideIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .info-modal-head {
            display: flex; align-items: center; justify-content: space-between;
            padding: 20px 28px;
            background: #1A1A1A;
            color: #FFFFFF;
            flex: none;
        }
        .info-modal-title {
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            font-size: 1.5rem;
            letter-spacing: 0.04em;
            margin: 0;
        }
        .info-modal-close {
            background: transparent; border: none;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer; padding: 6px;
            border-radius: 4px;
            transition: color 0.2s, background 0.2s;
        }
        .info-modal-close:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.1); }
        .info-modal-body {
            padding: 28px 32px;
            overflow-y: auto;
            color: #1A1A1A;
            font-size: 0.92rem;
            line-height: 1.7;
        }
        .info-modal-body h4 {
            font-weight: 700;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: var(--primary);
            margin-top: 1.6rem;
            margin-bottom: 0.6rem;
        }
        .info-modal-body h4:first-child { margin-top: 0; }
        .info-modal-body p { margin-bottom: 0.95rem; color: #1A1A1A; }
        .info-modal-body ul {
            list-style: disc;
            padding-left: 1.4rem;
            margin: 0.6rem 0 1.1rem;
            color: #1A1A1A;
        }
        .info-modal-body li { margin-bottom: 0.4rem; }
        .info-modal-body strong { font-weight: 700; color: #1A1A1A; }
        .info-modal-body a {
            color: var(--primary);
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        @media (max-width: 640px) {
            .info-modal-head { padding: 16px 20px; }
            .info-modal-title { font-size: 1.3rem; }
            .info-modal-body { padding: 22px 22px; font-size: 0.88rem; }
        }

        /* ============================================================
           BANNER DE BIENVENIDA (oferta + captura de correo)
           Formato "ticket premium": tarjeta roja de marca con un marco
           interior fino (como un certificado/voucher de boutique), cifra
           del descuento a gran tamaño y reglas divisorias finas. Todo en
           colores sólidos — sin degradados, sin sombras "glow".
           ============================================================ */
        .welcome-modal-overlay {
            position: fixed; inset: 0; z-index: var(--z-modal-welcome);
            background: rgba(17, 15, 15, 0.55);
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
            display: none; align-items: center; justify-content: center;
            padding: 16px;
        }
        .welcome-modal-overlay.open { display: flex; }
        .welcome-modal-card {
            background: var(--primary);
            width: 100%; max-width: 404px;
            border-radius: 14px;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
            padding: 40px 26px 28px;
            text-align: center;
            position: relative;
            max-height: 92vh;
            overflow-y: auto;
            animation: welcomeModalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        /* Marco interior fino — el detalle que le da el aire de "voucher"
           de boutique en vez de popup genérico. Una sola línea sólida. */
        .welcome-modal-card::before {
            content: ''; position: absolute; inset: 10px;
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-radius: 8px; pointer-events: none;
        }
        .welcome-modal-card > * { position: relative; z-index: 1; }
        @keyframes welcomeModalIn {
            from { opacity: 0; transform: translateY(20px) scale(0.97); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        .welcome-modal-close {
            position: absolute; top: 14px; right: 14px; z-index: 2;
            background: rgba(255, 255, 255, 0.12); border: none; color: rgba(255, 255, 255, 0.8);
            width: 28px; height: 28px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: color 0.2s, background 0.2s;
        }
        .welcome-modal-close:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.22); }
        /* Etiqueta tipo "talón de boleto": mayúsculas espaciadas entre dos
           filetes finos, en vez de una píldora de color rellena. */
        .welcome-modal-kicker {
            display: inline-block; font-family: 'Montserrat', sans-serif;
            font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
            color: rgba(255, 255, 255, 0.9);
            padding: 8px 0; margin: 0 auto 22px;
            border-top: 1px solid rgba(255, 255, 255, 0.32);
            border-bottom: 1px solid rgba(255, 255, 255, 0.32);
        }
        .welcome-modal-hero {
            display: flex; align-items: flex-start; justify-content: center; gap: 3px;
            margin: 0; line-height: 1;
        }
        .welcome-modal-hero-currency {
            font-family: 'Montserrat', sans-serif; font-weight: 700; color: #FFFFFF;
            font-size: 1.5rem; margin-top: 10px;
        }
        .welcome-modal-hero-amount {
            font-family: 'Montserrat', sans-serif; font-weight: 800; color: #FFFFFF;
            font-size: 4.4rem; letter-spacing: -0.02em;
        }
        .welcome-modal-hero-caption {
            font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
            letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85);
            margin: 6px 0 20px;
        }
        .welcome-modal-subtitle {
            font-family: 'Montserrat', sans-serif; color: rgba(255, 255, 255, 0.72);
            font-size: 0.84rem; line-height: 1.6; margin: 0 auto 22px; max-width: 280px;
        }
        .welcome-modal-divider { height: 1px; background: rgba(255, 255, 255, 0.2); margin: 4px 0 20px; }
        .welcome-modal-btn {
            display: block; width: 100%; font-family: 'Montserrat', sans-serif;
            font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
            font-size: 0.76rem; padding: 15px 18px; border-radius: 4px; border: none;
            cursor: pointer; transition: background 0.2s, color 0.2s;
        }
        /* CTA plano, sin sombra ni glow: el contraste blanco-sobre-rojo ya
           basta para que destaque. */
        .welcome-modal-btn-primary { background: #FFFFFF; color: var(--primary); margin-bottom: 12px; }
        .welcome-modal-btn-primary:hover { background: rgba(255, 255, 255, 0.88); }
        .welcome-modal-btn-primary:disabled { cursor: not-allowed; opacity: 0.7; }
        /* Acción secundaria como texto discreto — evita el look de "dos
           botones enfrentados" típico de los popups genéricos. */
        .welcome-modal-btn-ghost {
            background: transparent; border: none; padding: 4px 8px;
            color: rgba(255, 255, 255, 0.6); font-weight: 600; font-size: 0.72rem;
            letter-spacing: 0.03em; text-transform: none;
        }
        .welcome-modal-btn-ghost:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
        .welcome-modal-input-wrap { position: relative; margin-bottom: 14px; }
        .welcome-modal-input-wrap svg {
            position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
            width: 16px; height: 16px; color: rgba(255, 255, 255, 0.55); pointer-events: none;
        }
        .welcome-modal-input {
            width: 100%; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28);
            color: #FFFFFF; border-radius: 4px; padding: 14px 14px 14px 42px; font-size: 0.9rem;
            font-family: 'Montserrat', sans-serif; transition: border-color 0.2s, background 0.2s;
        }
        .welcome-modal-input::placeholder { color: rgba(255, 255, 255, 0.55); }
        .welcome-modal-input:focus { outline: none; border-color: #FFFFFF; background: rgba(255, 255, 255, 0.16); }
        .welcome-modal-error {
            color: #FFFFFF; font-size: 11px; margin: -6px 0 12px; display: none;
            font-family: 'Montserrat', sans-serif; text-align: left; font-weight: 700;
        }
        .welcome-modal-error.show { display: block; }
        @media (max-width: 480px) {
            .welcome-modal-card { padding: 36px 20px 24px; border-radius: 12px; }
            .welcome-modal-hero-amount { font-size: 3.6rem; }
            .welcome-modal-hero-currency { font-size: 1.25rem; }
        }

        /* ============================================================
           BARRA SUPERIOR — cronómetro de la oferta activa (sticky)
           Vive antes del header (ver index.html) y se solapa con él
           mediante --promo-bar-h (calculado por JS en initPromoTopBar).
           Diseño claro, coherente con el header "glass" — el único color
           fuerte es el botón de llamada a la acción, a propósito.
           ============================================================ */
        .promo-top-bar {
            display: none;
            position: sticky; top: 0; z-index: var(--z-promo-bar, 58);
            width: 100%;
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--borderGray);
        }
        .promo-top-bar.show { display: block; }
        .promo-top-bar-inner {
            max-width: 1200px; margin: 0 auto;
            display: flex; align-items: center; justify-content: center;
            gap: 10px; padding: 9px 16px;
        }
        .promo-top-bar-icon { width: 15px; height: 15px; flex: none; color: var(--primary); }
        .promo-top-bar-text {
            display: flex; align-items: baseline; gap: 6px; min-width: 0;
            font-family: 'Montserrat', sans-serif; white-space: nowrap;
        }
        .promo-top-bar-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--textMain); }
        .promo-top-bar-sep { color: var(--borderGray); }
        .promo-top-bar-sub { font-size: 11.5px; color: var(--textMuted); font-weight: 500; }
        .promo-top-bar-clock { display: flex; align-items: center; gap: 3px; flex: none; margin-left: 2px; }
        .ptbc-unit {
            display: inline-flex; align-items: baseline; gap: 1px;
            background: var(--bgLight); border: 1px solid var(--borderGray);
            border-radius: 4px; padding: 2px 5px; font-variant-numeric: tabular-nums;
        }
        .ptbc-unit span { font-size: 12px; font-weight: 700; color: var(--primary); }
        .ptbc-unit em { font-size: 9px; font-style: normal; color: var(--textMuted); margin-left: 1px; }
        .ptbc-colon { color: var(--borderGray); font-weight: 700; font-size: 11px; }
        .promo-top-bar-cta {
            display: inline-flex; align-items: center; gap: 5px; flex: none;
            background: var(--primary); color: #FFFFFF; border: none; border-radius: 999px;
            padding: 7px 14px; font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700;
            letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer;
            transition: background 0.2s, transform 0.15s; margin-left: 4px;
        }
        .promo-top-bar-cta:hover { background: var(--primary-dark); }
        .promo-top-bar-cta:active { background: var(--primary-dark); }
        .promo-top-bar-cta.is-claimed { background: var(--bgLight); color: var(--textMuted); border: 1px solid var(--borderGray); cursor: default; }
        .promo-top-bar-cta.is-claimed:hover { background: var(--bgLight); }
        .promo-top-bar-cta:disabled { pointer-events: none; }
        @media (max-width: 640px) {
            .promo-top-bar-inner { padding: 7px 10px; gap: 6px; flex-wrap: nowrap; }
            .promo-top-bar-sub, .promo-top-bar-sep { display: none; }
            .promo-top-bar-text { flex: 0 1 auto; overflow: hidden; }
            .promo-top-bar-label { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
            .promo-top-bar-clock { gap: 2px; margin-left: 0; }
            .ptbc-unit { padding: 2px 4px; }
            .ptbc-unit span { font-size: 11px; }
            .ptbc-unit em { display: none; }
            .promo-top-bar-cta { padding: 6px 10px; font-size: 9.5px; margin-left: 2px; }
        }
        @media (max-width: 380px) {
            .promo-top-bar-inner { gap: 5px; }
            .promo-top-bar-icon { width: 13px; height: 13px; }
            .promo-top-bar-label { max-width: 78px; }
            .promo-top-bar-cta { padding: 5px 8px; }
        }
        @media (max-width: 330px) {
            /* Último recurso en pantallas muy angostas: se prioriza el
               contador y el botón de reclamo por sobre la etiqueta de texto. */
            .promo-top-bar-label { display: none; }
        }

        /* Footer info link como botón (manteniendo apariencia de link) */
        button.footer-info-link {
            background: none; border: none; padding: 0;
            font: inherit; text-align: left;
            cursor: pointer; color: inherit;
        }

        /* ---- Utilidades adicionales (select de orden) ---- */
        .catalog-count-text {
            font-family: 'Montserrat', sans-serif;
            font-size: 13px;
            font-weight: 400;
            color: #6b7280;
            text-transform: none;
            letter-spacing: normal;
        }
        .border-0 { border-width: 0; }
        .top-1\/2 { top: 50%; }
        .-translate-y-1\/2 { transform: translateY(-50%); }
        .appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
        select.appearance-none::-ms-expand { display: none; }


/* ============================================================
   UTILIDADES COMPLEMENTARIAS (generadas con Tailwind v3)
   Cubren las clases que antes solo funcionaban por el CDN de
   Tailwind, ya eliminado. Regenerar con el build si cambias el HTML.
   ============================================================ */
.-left-2{left:-.5rem}.z-30{z-index:30}.z-\[85\]{z-index:var(--z-modal-auth)}.z-\[88\]{z-index:var(--z-modal-review)}.z-\[89\]{z-index:var(--z-modal-sizeguide)}.mx-2{margin-left:.5rem;margin-right:.5rem}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.inline{display:inline}.h-\[18px\]{height:18px}.w-56{width:14rem}.w-\[180px\]{width:180px}.w-\[18px\]{width:18px}.min-w-\[200px\]{min-width:200px}.max-w-4xl{max-width:56rem}.max-w-lg{max-width:32rem}.flex-none{flex:none}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-mandatory{--tw-scroll-snap-strictness:mandatory}.items-stretch{align-items:stretch}.overflow-x-auto{overflow-x:auto}.scroll-smooth{scroll-behavior:smooth}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border-green-100{--tw-border-opacity:1;border-color:rgb(220 252 231/var(--tw-border-opacity,1))}.border-primary\/15{border-color:rgba(194,0,14,.15)}.border-white\/15{border-color:hsla(0,0%,100%,.15)}.bg-black\/80{background-color:rgba(0,0,0,.8)}.bg-borderGray{--tw-bg-opacity:1;background-color:rgb(229 229 229/var(--tw-bg-opacity,1))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.bg-primary\/5{background-color:rgba(194,0,14,.05)}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-black\/60{--tw-gradient-from:rgba(0,0,0,.6) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-black\/10{--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,.1) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.text-left{text-align:left}.text-right{text-align:right}.font-serif{font-family:Cormorant Garamond,serif}.lowercase{text-transform:lowercase}.italic{font-style:italic}.tracking-tight{letter-spacing:-.025em}.text-gold\/30{color:rgba(194,0,14,.3)}.text-gray-200\/70{color:rgba(229,231,235,.7)}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity,1))}.text-white\/50{color:hsla(0,0%,100%,.5)}.text-white\/90{color:hsla(0,0%,100%,.9)}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.drop-shadow-lg{--tw-drop-shadow:drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.first-letter\:uppercase:first-letter{text-transform:uppercase}.last\:border-0:last-child{border-width:0}.hover\:border-textMain:hover{--tw-border-opacity:1;border-color:rgb(26 26 26/var(--tw-border-opacity,1))}.hover\:bg-black:hover{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.hover\:bg-primary:hover{--tw-bg-opacity:1;background-color:rgb(122 0 21/var(--tw-bg-opacity,1))}.hover\:bg-primary-dark:hover{--tw-bg-opacity:1;background-color:rgb(92 0 16/var(--tw-bg-opacity,1))}.hover\:opacity-70:hover{opacity:.7}.hover\:opacity-80:hover{opacity:.8}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.group:hover .group-hover\:scale-\[1\.02\]{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:gap-2\.5{gap:.625rem}@media (min-width:640px){.sm\:inline{display:inline!important}.sm\:hidden{display:none!important}.sm\:w-\[200px\]{width:200px}.sm\:text-\[10px\]{font-size:10px}}@media (min-width:768px){.md\:mb-10{margin-bottom:2.5rem}.md\:mb-14{margin-bottom:3.5rem}.md\:block{display:block!important}.md\:inline-flex{display:inline-flex!important}.md\:h-3\.5{height:.875rem}.md\:w-1\/2{width:50%}.md\:w-11{width:2.75rem}.md\:w-3\.5{width:.875rem}.md\:w-\[220px\]{width:220px}.md\:justify-center{justify-content:center}.md\:gap-2{gap:.5rem}.md\:gap-5{gap:1.25rem}.md\:bg-black\/30{background-color:rgba(0,0,0,.3)}.md\:p-4{padding:1rem}.md\:p-5{padding:1.25rem}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:py-10{padding-top:2.5rem;padding-bottom:2.5rem}.md\:py-16{padding-top:4rem;padding-bottom:4rem}.md\:py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.md\:py-4{padding-top:1rem;padding-bottom:1rem}.md\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}.md\:text-\[11px\]{font-size:11px}.md\:tracking-\[0\.15em\]{letter-spacing:.15em}.md\:tracking-\[0\.2em\]{letter-spacing:.2em}.md\:text-white\/90{color:hsla(0,0%,100%,.9)}}@media (min-width:1024px){.lg\:w-\[240px\]{width:240px}}

/* Utilidades del formulario de checkout (generadas con Tailwind) */
.mb-1\.5{margin-bottom:.375rem}.h-3\.5{height:.875rem}.max-h-\[70vh\]{max-height:70vh}.max-h-\[92vh\]{max-height:92vh}.w-3\.5{width:.875rem}.resize-none{resize:none}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.text-\[11px\]{font-size:11px}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Utilidades bloque garantía */
.max-w-5xl{max-width:64rem}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:768px){.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:py-16{padding-top:4rem;padding-bottom:4rem}}
/* Chips de filtro por marca */
.store-chip { background:#fff; border-color: var(--borderGray); color: var(--textMuted); cursor:pointer; }
.store-chip:hover { border-color: var(--primary); color: var(--primary); }
.store-chip.is-active { background: var(--primary); border-color: var(--primary); color:#fff; }

/* Utilidades Quick-view */
.max-w-2xl{max-width:42rem}@media (min-width:640px){.sm\:border-b-0{border-bottom-width:0}.sm\:border-r{border-right-width:1px}}
/* Carrusel de Instagram Reels */
.ig-reel-card { display: block; background: #1a1a1a; cursor: pointer; }
.ig-reel-card .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* z-index popup bienvenida */
.z-\[90\]{z-index:var(--z-modal-welcome)}
/* z-index quickview */
.z-\[78\]{z-index:var(--z-modal-quickview)}
/* Skeleton loaders */
@keyframes skeleton-pulse { 0%,100% { opacity: .06; } 50% { opacity: .12; } }
.skeleton-card { background: #fff; border-radius: 2px; overflow: hidden; }
.skeleton-img { width: 100%; aspect-ratio: 3/4; background: var(--borderGray); animation: skeleton-pulse 1.5s ease-in-out infinite; }
.skeleton-line { height: 12px; margin: 12px 10px 0; border-radius: 4px; background: var(--borderGray); animation: skeleton-pulse 1.5s ease-in-out infinite; }

/* ================================================================
   MILAN RICH — OPTIMIZACIONES UI/UX v1.0
   ================================================================ */

/* [1] TIPOGRAFÍA PREMIUM */
.section-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px; font-weight: 700; letter-spacing: 0.25em;
    text-transform: uppercase; color: var(--primary);
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem;
}
.section-headline {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.5rem, 2.8vw, 2.25rem); font-weight: 700; line-height: 1.1;
    color: var(--textMain); text-transform: none; letter-spacing: -0.025em;
}
.section-subtext {
    font-family: 'Montserrat', sans-serif; font-size: 0.875rem;
    color: var(--textMuted); line-height: 1.6; max-width: 38rem; margin: 0.75rem auto 0;
}

/* [2] HOME CURADO — Secciones temáticas */
.home-section { padding: 3.5rem 0; border-top: 1px solid var(--borderGray); }
.home-section:first-of-type { border-top: none; }

.home-section-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 0 1rem 1.25rem; margin-bottom: 1.75rem; gap: 1rem;
    border-bottom: 1px solid var(--borderGray);
}
@media (min-width: 768px) { .home-section-header { padding: 0 1.5rem 1.25rem; } }

.home-section-title-block { display: flex; flex-direction: column; gap: 0.2rem; }
.home-section-eyebrow {
    display: none; /* Sin kickers en cada sección — decisión ya tomada antes */
}
.home-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.35rem); font-weight: 300;
    color: var(--textMain); line-height: 1.1; letter-spacing: 0.01em; text-transform: uppercase;
}
.home-section-cta {
    font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--textMain);
    display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
    border-bottom: 1px solid var(--textMain); padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease; cursor: pointer; flex-shrink: 0;
    background: none; border-top: none; border-left: none; border-right: none;
    align-self: flex-end; margin-bottom: 0.1rem;
}
.home-section-cta:hover { color: var(--primary); border-bottom-color: var(--primary); }
.home-section-cta svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.5; fill: none; flex-shrink: 0; }

/* Scroll horizontal tipo carrusel */
.home-section-scroll {
    display: flex; gap: 0.75rem; overflow-x: auto;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scroll-padding-left: 1rem;
    overscroll-behavior-x: contain;
    scrollbar-width: none; padding: 0 1rem 0.5rem;
}
.home-section-scroll::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .home-section-scroll { gap: 1.25rem; padding: 0 1.5rem 0.5rem; scroll-padding-left: 1.5rem; } }

.home-section-scroll .product-card-wrap {
    flex: 0 0 calc(50% - 0.375rem); scroll-snap-align: start;
}
@media (min-width: 640px) { .home-section-scroll .product-card-wrap { flex: 0 0 calc(33.333% - 0.5rem); } }
@media (min-width: 1024px) { .home-section-scroll .product-card-wrap { flex: 0 0 calc(25% - 0.9375rem); } }

/* Difuminado al borde derecho del scroll horizontal: convierte la tarjeta
   parcialmente cortada en una pista visual de "desliza para ver más" en vez
   de verse como un error de layout. Se oculta solo al llegar al final real. */
.home-section-scroll-wrap { position: relative; }
.home-section-fade {
    position: absolute; top: 0; right: 0; bottom: 0.5rem; width: 36px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.95) 70%);
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.home-section-scroll-wrap.is-end .home-section-fade { opacity: 0; }
@media (min-width: 768px) { .home-section-fade { width: 56px; } }

/* ============================================================
   Home: Hero + Categorías a pantalla completa (esquina a esquina)
   La separación (--home-gap) es la misma en horizontal y vertical,
   y usa clamp() con vw para adaptarse al hacer zoom o cambiar de tamaño.
   ============================================================ */
.home-hero-full-bleed {
    --home-gap: clamp(8px, 1.6vw, 28px);
    width: 100%;
}

/* Portada grande + 2 tarjetas apiladas (Estuches / Joyería), todo en un mismo grid.
   El aspect-ratio del conjunto se va afinando (más delgado) en pantallas más anchas. */
.home-showcase-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--home-gap);
    width: 100%;
    aspect-ratio: 1.5/1;
}
@media (min-width: 480px)  { .home-showcase-grid { aspect-ratio: 16/10; } }
@media (min-width: 768px)  { .home-showcase-grid { aspect-ratio: 2/1; } }
@media (min-width: 1024px) { .home-showcase-grid { aspect-ratio: 2.6/1; } }
@media (min-width: 1440px) { .home-showcase-grid { aspect-ratio: 3.3/1; } }

/* Variante: solo portada, a todo el ancho, proporción 1920×500 (≈3.84/1)
   en todos los tamaños de pantalla — ya no hay columna de tarjetas de
   categoría al lado. En mobile se mantiene 16:9 (una franja 3.84:1
   quedaría demasiado angosta/aplastada en pantallas verticales). */
.home-showcase-grid--full {
    grid-template-columns: 1fr;
    aspect-ratio: 1920 / 500;
}
@media (min-width: 480px)  { .home-showcase-grid--full { aspect-ratio: 1920 / 500; } }
@media (min-width: 768px)  { .home-showcase-grid--full { aspect-ratio: 1920 / 500; } }
@media (min-width: 1024px) { .home-showcase-grid--full { aspect-ratio: 1920 / 500; } }
@media (min-width: 1440px) { .home-showcase-grid--full { aspect-ratio: 1920 / 500; } }
@media (max-width: 767px)  { .home-showcase-grid--full { aspect-ratio: 16 / 9; } }

.home-showcase-hero { background: var(--bgLight); }

/* ============================================================
   OVERLAY DE TEXTO DEL HERO — formato editorial (foto grande +
   tipografía fina + botón outline), inspirado en portadas de
   relojerías de lujo. Colores sólidos, sin degradados en el texto
   ni efectos "glow" en el botón — el contraste lo da el scrim.
   ============================================================ */
.hero-slide-scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.3) 42%, rgba(0, 0, 0, 0) 74%);
}
.hero-slide-content {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
    padding: 28px 28px 32px;
}
.hero-slide-eyebrow {
    font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85);
    margin: 0 0 10px;
}
.hero-slide-title {
    font-family: 'Montserrat', sans-serif; font-weight: 300; color: #FFFFFF;
    font-size: clamp(1.7rem, 4vw, 3.25rem); line-height: 1.1; letter-spacing: 0.01em;
    text-transform: uppercase; margin: 0 0 22px; max-width: 720px;
}
.hero-slide-cta {
    display: inline-flex; align-items: center;
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.8); color: #FFFFFF;
    font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    padding: 13px 24px; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.hero-slide-cta:hover { background: #FFFFFF; color: #111111; }
@media (max-width: 767px) {
    .hero-slide-content { padding: 18px 18px 22px; }
    .hero-slide-eyebrow { font-size: 9.5px; letter-spacing: 0.22em; margin-bottom: 7px; }
    .hero-slide-title { font-size: clamp(1.25rem, 6vw, 1.85rem); margin-bottom: 16px; }
    .hero-slide-cta { padding: 10px 18px; font-size: 10px; }
}

.home-showcase-side {
    display: flex;
    flex-direction: column;
    gap: var(--home-gap);
}
.home-showcase-side .collection-card {
    aspect-ratio: auto;
    flex: 1 1 0;
    min-height: 0;
}

/* Móvil (<768px): portada a todo el ancho arriba, Estuches + Joyería lado a lado debajo.
   Todo con su propio aspect-ratio (ya no depende del grid 3fr/2fr), para que se vea
   proporcional y no aplastado. */
@media (max-width: 767px) {
    .home-showcase-grid {
        display: block;
        aspect-ratio: auto;
    }
    .home-showcase-hero {
        width: 100%;
        aspect-ratio: 16 / 9;
        margin-bottom: var(--home-gap);
    }
    .home-showcase-side {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--home-gap);
    }
    .home-showcase-side .collection-card {
        aspect-ratio: 3 / 4;
        flex: none;
        min-height: 0;
    }
    /* Las tarjetas de esta columna son angostas (mitad de pantalla) — todo el
       contenido interno (texto y botón) se achica proporcionalmente para que
       "VER MÁS" entre en una sola línea y no se vea gigante. */
    .home-showcase-side .collection-card-overlay { padding: 0.85rem; }
    .home-showcase-side .collection-card-label { font-size: 0.95rem; }
    .home-showcase-side .collection-card-sub { font-size: 9px; letter-spacing: 0.12em; }
    .home-showcase-side .collection-card-btn {
        margin-top: 0.55rem;
        padding: 0.4rem 0.65rem;
        font-size: 9px;
        letter-spacing: 0.06em;
        gap: 0.3rem;
        white-space: nowrap;
    }
    .home-showcase-side .collection-card-btn svg { width: 10px; height: 10px; }
}

/* Grid de colecciones visuales */
.collection-cards-row {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; padding: 0 1rem;
}
@media (min-width: 768px) { .collection-cards-row { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; padding: 0 1.5rem; } }

.collection-card {
    position: relative; aspect-ratio: 3/4; overflow: hidden;
    cursor: pointer; background: var(--bgLight); border: 1px solid var(--borderGray);
}
.collection-card:hover img { transform: scale(1.05); }
.collection-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; display: block; }
.collection-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 55%);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem;
}
.collection-card-label { font-family: 'Montserrat', sans-serif; font-size: 1.125rem; font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -0.01em; }
.collection-card-sub { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: 0.2rem; }
.collection-card-arrow {
    width: 30px; height: 30px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-top: 0.65rem; color: var(--textMain); flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease;
}
.collection-card-arrow svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2.5; fill: none; }
.collection-card:hover .collection-card-arrow { background: var(--primary); color: #fff; }

/* Botón "Ver más" dentro de las tarjetas de categoría del home,
   mismo lenguaje visual que el resto de la web (outline + mayúsculas + tracking ancho) */
.collection-card-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin-top: 0.75rem; width: fit-content;
    padding: 0.55rem 1.1rem;
    background: transparent; border: 1.5px solid #fff; color: #fff;
    font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    cursor: pointer; transition: background 0.25s ease, color 0.25s ease;
}
.collection-card-btn svg { width: 12px; height: 12px; stroke: currentColor; transition: transform 0.25s ease; }
.collection-card-btn:hover { background: #fff; color: var(--textMain); }
.collection-card-btn:hover svg { transform: translateX(3px); }

/* Banner editorial "Precio Justo" */
.value-banner {
    background: var(--primary); padding: 2.5rem 1.5rem;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 1rem; position: relative; overflow: hidden; margin: 0.5rem 0;
}
@media (min-width: 768px) { .value-banner { flex-direction: row; text-align: left; gap: 2rem; padding: 2.5rem 3rem; } }
.value-banner-headline {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.25rem, 2.5vw, 1.875rem); font-weight: 700; color: #fff; line-height: 1.1; letter-spacing: -0.025em; flex: 1;
}
.value-banner-cta {
    font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase; background: #fff;
    color: var(--primary); padding: 0.85rem 2rem; white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease; cursor: pointer; display: inline-block;
    border: none;
}
.value-banner-cta:hover { background: var(--textMain); color: #fff; }

/* ============================================================
   SPLIT-SCREEN CATEGORÍA (Hombre / Mujer) — banner full-bleed
   Sale del contenedor max-w-[1200px] y toca ambos bordes de pantalla.
   ============================================================ */
.split-category-banner {
    display: grid;
    grid-template-columns: 1fr;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
@media (min-width: 768px) {
    .split-category-banner { grid-template-columns: 1fr 1fr; }
}

.split-category-col {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    cursor: pointer;
    height: clamp(380px, 82vw, 520px);
    background: var(--textMain);
}
@media (min-width: 768px) {
    .split-category-col { height: clamp(480px, 46vw, 640px); }
}

.split-category-col img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transition: transform 0.7s ease;
}
.split-category-col:hover img { transform: scale(1.045); }

/* Overlay oscuro y frío — Hombre */
.split-category-col--men::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,10,10,0.10) 0%, rgba(8,8,8,0.55) 55%, rgba(5,5,5,0.85) 100%);
}

/* Overlay cálido rose-gold — Mujer */
.split-category-col--women::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(30,15,15,0.05) 0%, rgba(35,18,18,0.45) 55%, rgba(60,25,25,0.78) 100%);
}

.split-category-content {
    position: relative; z-index: 2;
    width: 100%;
    padding: 2rem 1.5rem 2.25rem;
}
@media (min-width: 768px) {
    .split-category-content { padding: 3rem 3.25rem; max-width: 460px; }
}

.split-category-eyebrow {
    font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.85);
    display: block; margin-bottom: 0.6rem;
}
.split-category-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700;
    color: #fff; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 0.55rem;
}
.split-category-sub {
    font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 500;
    color: rgba(255,255,255,0.82); letter-spacing: 0.02em; line-height: 1.4;
    margin-bottom: 1.5rem;
}
.split-category-cta {
    font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase;
    padding: 0.9rem 2.1rem; border: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.5rem;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.split-category-cta svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.5; fill: none; flex-shrink: 0; }
.split-category-cta:hover { transform: translateX(3px); }

/* Hombre: CTA blanco sólido, acento rojo de marca en hover */
.split-category-col--men-cta { background: #fff; color: var(--textMain); }
.split-category-col--men-cta:hover { background: var(--primary); color: #fff; }

/* Mujer: CTA rose-gold, acento oscuro en hover */
.split-category-col--women-cta { background: #C9A17A; color: #2a1a12; }
.split-category-col--women-cta:hover { background: #fff; color: #2a1a12; }

/* ══════════════════════════════════════════════════════════
   COLECCIONES DESTACADAS — grid de 4 "puertas de entrada"
   Hombre / Mujer / Joyería / Ofertas, debajo del hero.
   Mismo lenguaje visual que split-category (imagen + overlay +
   contenido anclado abajo), pero en 4 columnas con tinte propio
   por categoría en vez del genérico gris/negro de cualquier tienda.
   ══════════════════════════════════════════════════════════ */
.fcol-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    background: var(--borderGray); /* el gap actúa como hairline entre tiles */
}
@media (min-width: 1024px) {
    .fcol-grid { grid-template-columns: repeat(4, 1fr); }
}

.fcol-tile {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    cursor: pointer;
    background: var(--textMain);
    display: flex;
    align-items: flex-end;
}

.fcol-tile img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transition: transform 0.6s ease;
}
.fcol-tile:hover img { transform: scale(1.06); }

.fcol-tile::after {
    content: '';
    position: absolute; inset: 0;
}
/* Hombre — overlay frío oscuro */
.fcol-tile--men::after {
    background: linear-gradient(180deg, rgba(10,10,10,0.05) 0%, rgba(8,8,8,0.55) 60%, rgba(5,5,5,0.9) 100%);
}
/* Mujer — overlay cálido rose-gold */
.fcol-tile--women::after {
    background: linear-gradient(180deg, rgba(35,18,18,0.05) 0%, rgba(40,20,20,0.5) 60%, rgba(60,25,25,0.85) 100%);
}
/* Joyería — overlay negro con base champagne */
.fcol-tile--jewelry::after {
    background: linear-gradient(180deg, rgba(10,8,4,0.05) 0%, rgba(15,11,4,0.55) 60%, rgba(10,8,3,0.92) 100%);
}
/* Ofertas — overlay crimson, urgencia de marca */
.fcol-tile--offers::after {
    background: linear-gradient(180deg, rgba(40,4,4,0.1) 0%, rgba(60,4,4,0.55) 60%, rgba(70,2,2,0.92) 100%);
}

.fcol-tile__content {
    position: relative; z-index: 2;
    width: 100%;
    padding: 1.1rem 1rem 1.3rem;
}
@media (min-width: 1024px) {
    .fcol-tile__content { padding: 1.75rem 1.5rem 2rem; }
}

.fcol-tile__eyebrow {
    font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 700;
    letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.75);
    display: block; margin-bottom: 0.35rem;
}
.fcol-tile__title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.15rem, 2.4vw, 1.6rem); font-weight: 300; text-transform: uppercase;
    color: #fff; letter-spacing: 0.02em; margin-bottom: 0.8rem; line-height: 1.1;
}
.fcol-tile__cta {
    font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    padding: 0.65rem 1.1rem; border: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.4rem;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.fcol-tile__cta svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.5; fill: none; flex-shrink: 0; }
.fcol-tile__cta:hover { transform: translateX(3px); }

.fcol-tile--men .fcol-tile__cta { background: #fff; color: var(--textMain); }
.fcol-tile--men .fcol-tile__cta:hover { background: var(--primary); color: #fff; }

.fcol-tile--women .fcol-tile__cta { background: #C9A17A; color: #2a1a12; }
.fcol-tile--women .fcol-tile__cta:hover { background: #fff; color: #2a1a12; }

.fcol-tile--jewelry .fcol-tile__cta { background: #C9A84C; color: #241b06; }
.fcol-tile--jewelry .fcol-tile__cta:hover { background: #fff; color: #241b06; }

.fcol-tile--offers .fcol-tile__cta { background: var(--primary); color: #fff; }
.fcol-tile--offers .fcol-tile__cta:hover { background: #fff; color: var(--primary); }

@media (prefers-reduced-motion: reduce) {
    .fcol-tile img, .fcol-tile__cta { transition: none !important; }
}

/* [3] GARANTÍA v2 — Fondo oscuro premium */
.trust-v2-section {
    background: var(--primary); padding: 4rem 0; position: relative; overflow: hidden;
}
.trust-v2-section::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,255,255,0.07) 0%, transparent 70%),
                radial-gradient(ellipse 40% 50% at 80% 100%, rgba(0,0,0,0.12) 0%, transparent 60%);
    pointer-events: none;
}
.trust-v2-header { text-align: center; margin-bottom: 3rem; position: relative; z-index: 1; }
.trust-v2-eyebrow {
    font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: 0.35em; text-transform: uppercase; color: rgba(255,255,255,0.7);
    display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 0.75rem;
}
.trust-v2-eyebrow::before, .trust-v2-eyebrow::after {
    content: ''; display: block; width: 2rem; height: 1px; background: rgba(255,255,255,0.4); opacity: 1;
}
.trust-v2-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; color: #fff; line-height: 1.15; letter-spacing: -0.025em;
}
.trust-v2-subtitle { font-family: 'Montserrat', sans-serif; font-size: 0.8rem; color: rgba(255,255,255,0.5); margin-top: 0.75rem; letter-spacing: 0.04em; }

.trust-v2-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
    border: 1px solid rgba(255,255,255,0.06); position: relative; z-index: 1;
    max-width: 1100px; margin: 0 auto;
}
@media (min-width: 768px) { .trust-v2-grid { grid-template-columns: repeat(4, 1fr); } }

.trust-v2-card {
    padding: 2rem 1.5rem; background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem;
    transition: background 0.3s ease, border-color 0.3s ease; position: relative; overflow: hidden;
}
.trust-v2-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: rgba(255,255,255,0.5); transform: scaleX(0); transition: transform 0.35s ease; transform-origin: center;
}
.trust-v2-card:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); }
.trust-v2-card:hover::after { transform: scaleX(1); }

.trust-v2-seal {
    width: 60px; height: 60px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center; color: #fff;
    flex-shrink: 0; transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.trust-v2-card:hover .trust-v2-seal { border-color: rgba(255,255,255,0.6); box-shadow: none; }

/* FIX CRÍTICO: forzar dimensiones SVG dentro del sello — previene bloque negro */
.trust-v2-seal svg {
    width: 26px !important; height: 26px !important;
    display: block; flex-shrink: 0;
    stroke: currentColor; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round; fill: none;
}

.trust-v2-card-title { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; }
.trust-v2-card-text { font-family: 'Montserrat', sans-serif; font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.55; }

.trust-v2-legal {
    max-width: 1100px; margin: 2rem auto 0; padding: 1.25rem 1.5rem;
    background: rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.15);
    display: flex; flex-direction: column; gap: 0.75rem;
    align-items: center; text-align: center; position: relative; z-index: 1;
}
@media (min-width: 768px) { .trust-v2-legal { flex-direction: row; justify-content: space-between; text-align: left; } }
.trust-v2-legal-text { font-family: 'Montserrat', sans-serif; font-size: 12px; color: rgba(255,255,255,0.4); line-height: 1.5; }
.trust-v2-legal-text strong { color: rgba(255,255,255,0.7); font-weight: 600; }
.trust-v2-legal-badge {
    font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase; color: #fff;
    border: 1px solid rgba(255,255,255,0.45); padding: 0.5rem 1rem; white-space: nowrap; flex-shrink: 0;
}

/* [4] IMAGEN DE PRODUCTO — Sin sombra (ancho y padding consolidados arriba en .product-gallery / .product-main-img-wrap) */
.product-main-img-wrap { box-shadow: none !important; }

/* [4b] BANDA DE ANCHO COMPLETO — Características clave.
   Reemplaza el viejo sistema de tabs+tabla que vivía apretado en la
   columna angosta. Ahora vive a todo el ancho debajo del hero, así
   no depende de emparejar la altura de dos columnas. */
.product-features-band {
    padding: 1.5rem 0;
    background: var(--bgLight);
}
/* Tarjeta blanca única, borde fino — igual al resto de tarjetas del
   sitio (mismo lenguaje que .review-card, .video-link, etc). */
.pf-card {
    background: #FFFFFF;
    border: 1px solid var(--borderGray);
    border-radius: 4px;
    padding: 2rem 1.75rem;
}
.pf-band-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--textMain);
    padding-bottom: 1rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--borderGray);
}
.pf-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem 2.5rem;
    justify-content: center;
}
@media (min-width: 480px) {
    .pf-grid { grid-template-columns: repeat(2, max-content); }
}
@media (min-width: 1024px) {
    .pf-grid { grid-template-columns: repeat(4, max-content); }
}
/* Ícono a la izquierda + texto a la derecha (ficha técnica), en vez
   de ícono grande arriba y texto centrado debajo. */
.pf-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.pf-item-icon {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
.pf-item:hover .pf-item-icon { transform: scale(1.06); }
.pf-item-icon svg, .pf-item-icon img { width: 100%; height: 100%; object-fit: contain; }
.pf-item-text-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    white-space: nowrap;
}
.pf-item-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--textMain);
    line-height: 1.3;
}
.pf-item-text {
    font-size: 0.78rem;
    color: var(--textMuted);
}

/* [5] FOMO — variante con imagen de producto */
.fomo-toast-img { width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: 6px; padding: 3px; flex-shrink: 0; display: block; }

/* [6] HTACCESS FIX — charset nota visual (no afecta rendering) */
/* Agregar en .htaccess: AddDefaultCharset UTF-8 */

/* [7] RESPONSIVE MÓVIL */
@media (max-width: 640px) {
    .home-section { padding: 2rem 0; }
    .home-section-header { padding: 0 1rem; }
    .home-section-scroll { padding: 0 1rem 0.5rem; }
    .collection-cards-row { padding: 0 0.75rem; gap: 0.5rem; }
    .trust-v2-section { padding: 2.5rem 0; }
    .trust-v2-card { padding: 1.5rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .trust-v2-card, .trust-v2-card::after, .trust-v2-seal,
    .collection-card img, .collection-card-arrow { transition: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   MILAN RICH v2 — NUEVOS COMPONENTES PREMIUM
   ══════════════════════════════════════════════════════════════════════ */

/* ─── TARJETA DE PRODUCTO (v2) ──────────────────────────────────────── */
.mr-pcard {
    display: flex;
    flex-direction: column;
    cursor: default;
}
.mr-pcard__img {
    position: relative;
    overflow: hidden;
    background: var(--bgLight);
    aspect-ratio: 4 / 5;
    margin-bottom: 0.875rem;
    cursor: pointer;
}
.mr-pcard__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mr-pcard:hover .mr-pcard__img img { transform: scale(1.04); }

.mr-pcard__qv {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--borderGray);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    color: var(--textMain);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.mr-pcard:hover .mr-pcard__qv { opacity: 1; }
.mr-pcard__qv:hover { color: var(--primary); border-color: var(--primary); }

.mr-pcard__body {
    flex: 1;
    cursor: pointer;
    padding-bottom: 0.875rem;
}
.mr-pcard__brand {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--textMuted);
    margin-bottom: 0.3rem;
}
.mr-pcard__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--textMain);
    line-height: 1.35;
    margin-bottom: 0.25rem;
    letter-spacing: 0;
    /* Reserva siempre 2 líneas de alto — títulos de 1 línea no deben
       dejar la tarjeta más "alta" que sus vecinas de 2 líneas. Esto es
       lo que causaba que precio/botón quedaran a distinta altura entre
       tarjetas con nombres cortos vs. nombres largos. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(0.8125rem * 1.35 * 2);
}
.mr-pcard__spec {
    font-size: 0.6875rem;
    font-weight: 300;
    color: var(--textMuted);
    line-height: 1.4;
    text-transform: lowercase;
    /* Misma lógica que el título: 1 línea fija reservada */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(0.6875rem * 1.4);
}
.mr-pcard__spec::first-letter { text-transform: uppercase; }

.mr-pcard__stars {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
    min-width: 0;
}
.mr-pcard__stars-row { display: inline-flex; gap: 1px; }
.mr-pcard__stars-count {
    font-size: 0.625rem;
    color: var(--textMuted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mr-pcard__foot {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--borderGray);
}
.mr-pcard__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.mr-pcard__price {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.mr-price-old {
    font-size: 0.6875rem;
    font-weight: 400;
    color: var(--textMuted);
    text-decoration: line-through;
}
.mr-price-now {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.02em;
}
.mr-price-now--single { color: var(--textMain); }

.mr-pcard__icon-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.mr-pcard__icon-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--borderGray);
    border-radius: 2px;
    background: none;
    cursor: pointer;
    color: var(--textMuted);
    transition: border-color 0.15s, color 0.15s, transform 0.2s ease;
    flex-shrink: 0;
}
.mr-pcard__icon-btn svg, .mr-pcard__icon-btn i { width: 14px; height: 14px; pointer-events: none; }
.mr-pcard__icon-btn:hover { border-color: var(--primary); color: var(--primary); transform: scale(1.06); }
.mr-pcard__icon-btn.is-fav { border-color: var(--primary); color: var(--primary); }

.mr-pcard__buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: var(--header-red-dark);
    border: none;
    padding: 0.65rem 0.5rem;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.15s ease;
}
.mr-pcard__buy svg, .mr-pcard__buy i { width: 13px; height: 13px; flex-shrink: 0; pointer-events: none; }
.mr-pcard__buy:hover { background-color: var(--primary-dark); }
.mr-pcard__buy:active { transform: scale(0.97); }

.mr-pcard__stock-oos {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9ca3af;
}

/* ─── CARRITO LATERAL (v2) ──────────────────────────────────────────── */
.mr-cart-list { display: flex; flex-direction: column; }

.mr-cart-item {
    display: flex;
    gap: 0.875rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--borderGray);
}
.mr-cart-item:first-child { padding-top: 0; }

.mr-cart-item__img {
    width: 4rem;
    height: 5rem;
    flex-shrink: 0;
    background: var(--bgLight);
    overflow: hidden;
}
.mr-cart-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mr-cart-item__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    gap: 0.5rem;
}
.mr-cart-item__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}
.mr-cart-item__brand {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--textMuted);
    margin-bottom: 0.2rem;
}
.mr-cart-item__name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--textMain);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.mr-cart-item__remove {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--textMuted);
    transition: color 0.15s;
    margin-top: -0.125rem;
}
.mr-cart-item__remove:hover { color: var(--primary); }

.mr-cart-price { display: flex; align-items: baseline; gap: 0.375rem; }

.mr-cart-item__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.mr-cart-qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--borderGray);
}
.mr-cart-qty button {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--textMain);
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}
.mr-cart-qty button:hover { background: var(--bgLight); color: var(--primary); }
.mr-cart-qty span {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--textMain);
    min-width: 1.75rem;
    text-align: center;
    padding: 0 0.25rem;
    border-left: 1px solid var(--borderGray);
    border-right: 1px solid var(--borderGray);
    line-height: 1.75rem;
}

/* Los estilos de .home-section-header/.home-section-title/.home-section-cta
   viven en un solo lugar ahora (ver sección [2] HOME CURADO, arriba). */

/* ─── BARRA DE CONFIANZA (v2) ───────────────────────────────────────── */
/* El trust bar en grid con boxShadow se reemplaza por una tira limpia */
.trust-bar-v2 {
    border-top: 1px solid var(--borderGray);
    border-bottom: 1px solid var(--borderGray);
    padding: 1.375rem 0;
    background: #fff;
}
.trust-bar-v2-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.trust-stat {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 2.5rem;
    position: relative;
}
.trust-stat + .trust-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 1.75rem;
    background: var(--borderGray);
}
.trust-stat__num {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--textMain);
    line-height: 1;
    letter-spacing: -0.03em;
}
.trust-stat__lbl {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--textMuted);
    max-width: 9ch;
    line-height: 1.35;
}
@media (max-width: 640px) {
    .trust-stat { padding: 0.5rem 1.25rem; }
    .trust-stat__num { font-size: 1.375rem; }
}
@media (max-width: 380px) {
    .trust-bar-v2-inner { gap: 0; }
    .trust-stat { padding: 0.375rem 0.875rem; }
    .trust-stat__num { font-size: 1.25rem; }
}

/* ─── BLOQUE DE PRECIO EN PDP ───────────────────────────────────────── */
.price-block {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.price-row { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.price-current {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.03em;
    line-height: 1;
}
.price-old {
    font-size: 1rem;
    font-weight: 400;
    color: var(--textMuted);
    text-decoration: line-through;
}
.savings-text {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--primary);
}

/* ─── TÍTULO EN PDP ─────────────────────────────────────────────────── */
.product-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.65rem, 2.8vw, 2.5rem);
    font-weight: 700;
    color: var(--textMain);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-transform: none;
    margin-bottom: 0.5rem;
}

/* Estilos de .btn-add-to-bag y .btn-buy-now consolidados arriba, junto a .product-actions */

/* ─── FOOTER OSCURO ─────────────────────────────────────────────────── */
/* bg-footerBg ahora usa #111111 — actualizado en tokens */
/* Las siguientes reglas refinan el footer sin cambiar la estructura */
footer.bg-footerBg,
footer[style*="background"] {
    background-color: var(--footerBg) !important;
}

/* ─── REDUCED MOTION ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mr-pcard__img img { transition: none !important; }
    .mr-pcard__qv { transition: none !important; }
    .mr-pcard__buy, .mr-pcard__icon-btn, .mr-cart-qty button { transition: none !important; }
}


/* ══════════════════════════════════════════════════════════
   SOCIAL PROOF STRIP — rating real de Facebook + avatares
   Franja compacta y clara (no full-bleed): rating a la izquierda,
   stack de clientes a la derecha. En mobile se apila centrado.
   ══════════════════════════════════════════════════════════ */
.sps {
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--borderGray);
    opacity: 0;
    transform: translateY(8px);
}
.sps.is-in {
    animation: spsRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes spsRise {
    to { opacity: 1; transform: translateY(0); }
}
.sps__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 0.9rem;
    column-gap: 2.75rem;
}

/* ── Bloque rating — solo estrellas, en el dorado de marca Milan Rich ── */
.sps__rating {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    justify-content: center;
}
.sps__stars {
    display: flex;
    gap: 3px;
}
.sps__star {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sps__star svg {
    width: 100%;
    height: 100%;
    fill: var(--primary); /* rojo de marca Milan Rich, igual que el resto de la web */
    filter: drop-shadow(0 1px 1px rgba(26,26,26,0.12));
}
.sps__score {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--textMain);
}
.sps__dot {
    color: var(--borderGray);
    font-size: 0.85rem;
}
.sps__reviews {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--textMuted);
    white-space: nowrap;
}

/* ── Bloque clientes satisfechos ── */
.sps__customers {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.sps__avatars {
    display: flex;
    flex-shrink: 0;
}
.sps__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--borderGray);
    margin-left: -9px;
    display: block;
}
.sps__avatar:first-child { margin-left: 0; }
.sps__customers-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--textMain);
    white-space: nowrap;
}

@media (max-width: 560px) {
    .sps__inner { column-gap: 1.5rem; }
    .sps__star { width: 18px; height: 18px; }
    .sps__avatar { width: 28px; height: 28px; margin-left: -8px; }
}

@media (prefers-reduced-motion: reduce) {
    .sps { opacity: 1 !important; transform: none !important; animation: none !important; }
}


/* ── Fase 3.2: Escasez premium en tarjeta de producto ───────────── */
.mr-pcard__scarcity {
    height: 20px;           /* espacio fijo → precios siempre alineados */
    display: flex;
    align-items: center;
    overflow: hidden;
    gap: 5px;
}
.mr-pcard__scarcity--on {
    font-size: 10px;
    font-weight: 700;
    color: #c2000e;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1;
}
.mr-scarcity-dot {
    width: 6px;
    height: 6px;
    min-width: 6px;
    background: #c2000e;
    border-radius: 50%;
    animation: scarcityPulse 1.8s ease-in-out infinite;
}
@keyframes scarcityPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
    .mr-scarcity-dot { animation: none; }
}
/* Escasez en ficha de producto */
.scarcity-detail-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #c2000e;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 14px;
    padding: 7px 12px;
    background: rgba(194,0,14,0.05);
    border-radius: 6px;
    border: 1px solid rgba(194,0,14,0.18);
}
.scarcity-detail-dot {
    width: 7px;
    height: 7px;
    min-width: 7px;
    background: #c2000e;
    border-radius: 50%;
    animation: scarcityPulse 1.8s ease-in-out infinite;
}

/* ── Fase 3.4: Visor en vivo ─────────────────────────────────────── */
.live-viewers-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--textMuted, #6F6F6F);
    margin-bottom: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.live-viewers-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #16a34a;
    border-radius: 50%;
    animation: liveViewerPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes liveViewerPulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(22,163,74,0.4); }
    50%       { opacity: 0.8; transform: scale(1.15); box-shadow: 0 0 0 4px rgba(22,163,74,0); }
}
@media (prefers-reduced-motion: reduce) {
    .live-viewers-dot { animation: none; }
}


/* ══════════════════════════════════════════════════════════════════
   STICKY BUY BAR — CTA fijo en la ficha de producto.
   Mobile: banda blanca de borde a borde. Desktop: tarjeta centrada
   flotante (max-width del sitio), con más aire — se siente como una
   tarjeta, no como una franja pegada al monitor entero.
   Slide-up con spring cubic-bezier. Z-index 45 (bajo modales).
   ══════════════════════════════════════════════════════════════════ */
#sticky-buy-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 45;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 14px;
    /* Compensa safe-area en iPhones con notch inferior */
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    background: #FFFFFF;
    border-top: 1px solid #E5E5E5;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.10);
    /* Estado inicial: oculto abajo */
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
#sticky-buy-bar.sbb-visible {
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    #sticky-buy-bar { transition: none; }
}
@media (min-width: 768px) {
    #sticky-buy-bar {
        max-width: 1200px;
        margin: 0 auto;
        left: 0; right: 0;
        bottom: 20px;
        padding: 16px 28px;
        gap: 24px;
        border: 1px solid var(--borderGray);
        border-radius: 10px;
        box-shadow: 0 16px 48px rgba(0,0,0,0.14);
        transform: translateY(140%);
    }
    #sticky-buy-bar.sbb-visible { transform: translateY(0); }
}
.sbb-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.sbb-name {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--textMuted, #6F6F6F);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    margin: 0 0 2px 0;
}
.sbb-prices {
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.sbb-price {
    font-size: 17px;
    font-weight: 700;
    color: #950606;
    letter-spacing: -0.02em;
    line-height: 1;
}
@media (min-width: 768px) {
    .sbb-name { font-size: 11px; }
    .sbb-price { font-size: 20px; }
}
.sbb-price-old {
    font-size: 11px;
    font-weight: 400;
    color: var(--textMuted, #6F6F6F);
    text-decoration: line-through;
}
.sbb-cta {
    flex-shrink: 0;
    background: #950606;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    padding: 12px 18px;
    min-height: 44px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}
.sbb-cta:active { transform: scale(0.97); background: #7A0015; }
@media (min-width: 768px) {
    .sbb-cta { padding: 13px 28px; font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════════
   FREE SHIPPING NUDGE — en ficha de producto, sobre la benefits-bar
   Tres estados: neutro (gap), cercano (close), completado (done).
   ══════════════════════════════════════════════════════════════════ */
.product-freeship-nudge-wrap {
    min-height: 0;
    overflow: hidden;
}
.freeship-nudge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    color: var(--textMuted, #6F6F6F);
    background: #F7F7F7;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 14px;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.35;
}
.freeship-nudge svg {
    flex-shrink: 0;
    color: var(--textMuted, #6F6F6F);
}
.freeship-nudge--close {
    background: rgba(149, 6, 6, 0.06);
    color: var(--primary);
}
.freeship-nudge--close svg { color: var(--primary); }
.freeship-nudge--done {
    background: rgba(149, 6, 6, 0.06);
    color: var(--primary);
    font-weight: 600;
}
.freeship-nudge--done svg { color: var(--primary); }

/* ══════════════════════════════════════════════════════════════════
   HEADER UNIFICADO — una sola fila, igual en cualquier tamaño de
   pantalla: hamburguesa (abre el menú) — logo centrado — íconos.
   El grid 1fr/auto/auto/1fr con las acciones y la hamburguesa en
   columnas de igual fracción es lo que garantiza que el logo quede
   SIEMPRE perfectamente centrado, sin importar cuántos íconos haya
   a la derecha.
   ══════════════════════════════════════════════════════════════════ */
.hdr-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 72px;
    gap: 12px;
}
.hdr-hamburger { justify-self: start; }
.hdr-logo-center {
    justify-self: center;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.hdr-logo-fallback {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    font-weight: 300;
    letter-spacing: 0.12em;
    color: #FFFFFF;
    white-space: nowrap;
}
.hdr-logo-fallback span { color: rgba(255, 255, 255, 0.7); font-weight: 300; }

/* ══════════════════════════════════════════════════════════════════
   HEADER — botones y acciones de la derecha, sobre fondo rojo oscuro.
   El único color "fuerte" es la insignia del carrito, invertida a
   blanco para que se lea bien sobre el rojo del header.
   ══════════════════════════════════════════════════════════════════ */
.hdr-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 2px;
}

/* Base: todos los botones del header */
.hdr-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 6px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.hdr-btn:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.12);
}

/* Cart button */
.hdr-cart {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.hdr-cart:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.12); }

/* Insignia del carrito: invertida (blanco sólido + texto rojo oscuro)
   para que tenga contraste sobre el fondo rojo del header. */
.hdr-cart span {
    font-size: 9px;
    font-weight: 700;
    color: var(--header-red-dark);
    background: #FFFFFF;
    border-radius: 100px;
    padding: 1px 4px;
    min-width: 15px;
    text-align: center;
    letter-spacing: 0;
    line-height: 1.5;
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
    position: absolute;
    top: 4px;
    right: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   PANEL DE BÚSQUEDA — tarjeta clara que se despliega bajo el header
   oscuro (un solo panel, igual en cualquier tamaño de pantalla).
   ══════════════════════════════════════════════════════════════════ */
.hdr-search-panel {
    background: #FFFFFF;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}
.hdr-search-wrap { transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); }
.hdr-search-input {
    border-color: var(--borderGray);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hdr-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(149, 6, 6, 0.08);
}
.hdr-search-wrap:focus-within { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
    .hdr-search-wrap, .hdr-search-wrap:focus-within { transition: none; transform: none; }
}


/* ══════════════════════════════════════════════════════════════════
   ESTADOS DE CARGA — evita el "flash" de contenido roto/vacío
   mientras Firestore resuelve (logo, hero, bloques de categoría).
   Reutiliza la animación skeleton-pulse ya existente en el sitio.
   ══════════════════════════════════════════════════════════════════ */

/* Logo del header: barra neutra en vez del texto de marca equivocado.
   Un solo tamaño compacto — ya no hay versión "grande" de escritorio. */
.skeleton-logo-bar {
    width: 110px;
    height: 24px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.16);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* Hero: mismo degradé de siempre, ahora nombrado para consistencia */
.skeleton-hero-bg {
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-logo-bar { animation: none; opacity: 0.08; }
}

/* ══════════════════════════════════════════════════════════════════
   MILAN RICH — REDESIGN TOTAL v3
   Dirección: "Quiet Luxury" — header blanco, sin marquee,
   tipografía editorial, ruido visual eliminado, gold accents.
   ══════════════════════════════════════════════════════════════════ */

/* ── Tokens nuevos ─────────────────────────────────────────────── */
:root {
    --gold: #C9A84C;
    --gold-soft: rgba(201,168,76,0.12);
    --ivory: #F5F5F3;
    --charcoal: #141414;
    --font-editorial: 'Cormorant Garamond', Georgia, serif;
}

/* ══════════════════════════════════════════════════════════════════
   MARQUEE — eliminado. Agrega ruido visual innecesario.
   ══════════════════════════════════════════════════════════════════ */
#marquee-container {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   PROMO TOP BAR — editorial luxury announcement
   Sin cajas en el countdown, todo inline y elegante.
   ══════════════════════════════════════════════════════════════════ */
.promo-top-bar {
    background: #950606 !important;
    border-bottom: none !important;
    min-height: 0 !important;
    padding: 0 !important;
}
.promo-top-bar-inner {
    gap: 0 !important;
    padding: 10px 20px !important;
    justify-content: center !important;
}
.promo-top-bar-icon { display: none !important; }
.promo-top-bar-text {
    gap: 6px !important;
}
.promo-top-bar-label {
    font-family: var(--font-editorial) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-style: italic !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    color: #FFFFFF !important;
}
.promo-top-bar-sub {
    font-family: var(--font-editorial) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    font-style: italic !important;
    color: rgba(255,255,255,0.5) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.promo-top-bar-sep {
    color: rgba(255,255,255,0.2) !important;
    margin: 0 2px !important;
}

/* Countdown: sin cajas, inline limpio, gold */
.promo-top-bar-clock {
    gap: 0 !important;
    margin-left: 10px !important;
    padding-left: 12px !important;
    border-left: 1px solid rgba(255,255,255,0.12) !important;
}
.ptbc-unit {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: 1px !important;
}
.ptbc-unit span {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--gold) !important;
    letter-spacing: 0.04em !important;
}
.ptbc-unit em {
    font-size: 9px !important;
    color: rgba(201,168,76,0.45) !important;
    margin-left: 0 !important;
    font-style: normal !important;
}
.ptbc-colon {
    color: rgba(201,168,76,0.3) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    margin: 0 1px !important;
}

/* CTA: texto sutil, sin botón aparatoso */
.promo-top-bar-cta {
    background: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(201,168,76,0.4) !important;
    border-radius: 0 !important;
    color: var(--gold) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 0 0 1px !important;
    margin-left: 12px !important;
    letter-spacing: 0.14em !important;
    transition: border-color 0.2s, color 0.2s !important;
}
.promo-top-bar-cta:hover {
    background: none !important;
    border-bottom-color: var(--gold) !important;
    color: #FFFFFF !important;
}
.promo-top-bar-cta:active {
    background: none !important;
    transform: none !important;
}
.promo-top-bar-cta.is-claimed {
    background: none !important;
    border: none !important;
    border-bottom: 1px solid transparent !important;
    color: rgba(255,255,255,0.35) !important;
}

/* Mobile: más compacto pero mismo estilo */
@media (max-width: 640px) {
    .promo-top-bar-inner { padding: 8px 12px !important; }
    .promo-top-bar-label { font-size: 11px !important; }
    .promo-top-bar-sub { display: none !important; }
    .promo-top-bar-sep { display: none !important; }
    .promo-top-bar-clock { margin-left: 8px !important; padding-left: 8px !important; }
    .ptbc-unit span { font-size: 11px !important; }
    .promo-top-bar-cta { margin-left: 8px !important; font-size: 9px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   HEADER — transparente sobre el hero, blanco al hacer scroll.
   Los íconos son blancos por defecto y oscuros al scrollear.
   ══════════════════════════════════════════════════════════════════ */
.glass-header {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid transparent !important;
    transition: background 0.35s ease, border-color 0.35s ease !important;
}
.glass-header.header-scrolled {
    background: #FFFFFF !important;
    border-bottom: 1px solid #EBEBEB !important;
}
header.glass-header {
    top: var(--promo-bar-h, 0px);
}
.hdr-row {
    min-height: 60px !important;
}

/* Hero: se extiende detrás del header */
.home-hero-full-bleed {
    margin-top: -60px !important;
}
#hero-carousel {
    min-height: calc(70vh + 60px) !important;
}

/* ── Íconos: blancos por defecto (sobre el hero) ─────────────── */
.hdr-btn { color: #FFFFFF !important; }
.hdr-btn:hover { color: rgba(255,255,255,0.7) !important; background: transparent !important; }
.hdr-hamburger { color: #FFFFFF !important; }
.header-icon { stroke: #FFFFFF !important; stroke-width: 1.5 !important; }
.hdr-btn:hover .header-icon { stroke: rgba(255,255,255,0.7) !important; }
.hdr-btn svg.header-icon { stroke: #FFFFFF !important; }
.hdr-cart { color: #FFFFFF !important; }
.hdr-cart:hover { color: rgba(255,255,255,0.7) !important; background: transparent !important; }
.hdr-cart .header-icon, .hdr-cart i { color: #FFFFFF !important; }
#account-login-btn svg { stroke: #FFFFFF !important; }
.hdr-logo-fallback { color: #FFFFFF !important; }
.hdr-logo-fallback span { color: rgba(255,255,255,0.7) !important; }
#header-logo-img { filter: brightness(0) invert(1) !important; }
.skeleton-logo-bar { background: rgba(255,255,255,0.16) !important; }
.hdr-cart span, #cart-counter {
    background: #FFFFFF !important;
    color: var(--primary) !important;
}

/* ── Al hacer scroll: íconos oscuros sobre fondo blanco ──────── */
.glass-header.header-scrolled .hdr-btn { color: var(--textMain) !important; }
.glass-header.header-scrolled .hdr-btn:hover { color: var(--primary) !important; }
.glass-header.header-scrolled .hdr-hamburger { color: var(--textMain) !important; }
.glass-header.header-scrolled .header-icon { stroke: var(--textMain) !important; }
.glass-header.header-scrolled .hdr-btn:hover .header-icon { stroke: var(--primary) !important; }
.glass-header.header-scrolled .hdr-btn svg.header-icon { stroke: var(--textMain) !important; }
.glass-header.header-scrolled .hdr-cart { color: var(--textMain) !important; }
.glass-header.header-scrolled .hdr-cart:hover { color: var(--primary) !important; }
.glass-header.header-scrolled .hdr-cart .header-icon,
.glass-header.header-scrolled .hdr-cart i { color: var(--textMain) !important; }
.glass-header.header-scrolled #account-login-btn svg { stroke: var(--textMain) !important; }
.glass-header.header-scrolled .hdr-logo-fallback { color: var(--textMain) !important; }
.glass-header.header-scrolled .hdr-logo-fallback span { color: var(--textMuted) !important; }
.glass-header.header-scrolled #header-logo-img { filter: none !important; }
.glass-header.header-scrolled .skeleton-logo-bar { background: rgba(0,0,0,0.08) !important; }
.glass-header.header-scrolled .hdr-cart span,
.glass-header.header-scrolled #cart-counter {
    background: var(--primary) !important;
    color: #FFFFFF !important;
}

/* Search panel: siempre blanco */
.hdr-search-panel {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
    border-bottom: 1px solid #EBEBEB !important;
    background: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE MENU — fondo blanco limpio, sin rojo
   ══════════════════════════════════════════════════════════════════ */
.mobile-menu-item {
    font-family: var(--font-editorial) !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   SOCIAL PROOF STRIP — oculto completamente. Las estrellas con
   "5.0/5 · +500 reseñas" se ven artificiales. La confianza se
   construye mejor con las reseñas reales dentro de cada producto.
   ══════════════════════════════════════════════════════════════════ */
.sps {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   TYPOGRAPHY — editorial display headings everywhere
   ══════════════════════════════════════════════════════════════════ */
.font-display {
    font-family: var(--font-editorial) !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    font-weight: 400 !important;
}
.home-section-title {
    font-family: var(--font-editorial) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem) !important;
}
.hero-slide-title {
    font-family: var(--font-editorial) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
}
.product-title {
    font-family: var(--font-editorial) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    font-size: clamp(1.8rem, 3.2vw, 2.8rem) !important;
}
.split-category-title {
    font-family: var(--font-editorial) !important;
    font-weight: 500 !important;
    text-transform: none !important;
}
.fcol-tile__title {
    font-family: var(--font-editorial) !important;
    font-weight: 500 !important;
    text-transform: none !important;
}
.cat-banner-title {
    font-family: var(--font-editorial) !important;
    font-weight: 400 !important;
    text-transform: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   SECTION HEADERS — sin borde inferior, más limpio
   ══════════════════════════════════════════════════════════════════ */
.home-section-header {
    border-bottom: none !important;
    margin-bottom: 1.25rem !important;
    padding-bottom: 0 !important;
}
.home-section-cta {
    border-bottom-color: transparent !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    color: var(--textMuted) !important;
}
.home-section-cta:hover {
    color: var(--primary) !important;
    border-bottom-color: var(--primary) !important;
}

/* ══════════════════════════════════════════════════════════════════
   EYEBROWS — gold accent, siempre
   ══════════════════════════════════════════════════════════════════ */
.hero-slide-eyebrow { color: var(--gold) !important; }
.split-category-eyebrow { color: var(--gold) !important; }
.fcol-tile__eyebrow { color: var(--gold) !important; }
#objections-section .text-primary { color: var(--gold) !important; }
#ig-section .text-primary { color: var(--gold) !important; }

/* ══════════════════════════════════════════════════════════════════
   PRODUCT CARDS — editorial luxury redesign
   Nombre en serif, botón ghost, mejor jerarquía visual.
   ══════════════════════════════════════════════════════════════════ */

/* Card container */
.mr-pcard {
    border-color: transparent !important;
    transition: all 0.35s ease !important;
    position: relative;
}

/* Image area: borde sutil al hover */
.mr-pcard__img {
    background: #F3F3F1 !important;
    margin-bottom: 1rem !important;
    position: relative;
}
.mr-pcard__img::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    transition: border-color 0.35s ease;
    pointer-events: none;
}
.mr-pcard:hover .mr-pcard__img::after {
    border-color: #D0D0D0;
}

/* Quick view: más limpio */
.mr-pcard__qv {
    border: none !important;
    box-shadow: none !important;
    background: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* Brand: más sutil */
.mr-pcard__brand {
    font-size: 0.5rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.22em !important;
    color: var(--textMuted) !important;
    margin-bottom: 0.35rem !important;
}

/* Nombre del producto: serif editorial */
.mr-pcard__name {
    font-family: var(--font-editorial) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
    color: var(--textMain) !important;
    min-height: calc(1rem * 1.25 * 2) !important;
}

/* Specs: un toque más limpio */
.mr-pcard__spec {
    font-size: 0.65rem !important;
    color: #AAAAAA !important;
    margin-top: 0.15rem !important;
    letter-spacing: 0.03em !important;
}

/* Stars: gold, más pequeñas */
.mr-pcard__stars svg,
.mr-pcard__stars-row svg {
    fill: var(--gold) !important;
    filter: none !important;
}
.mr-pcard__stars-count {
    color: #BBBBBB !important;
    font-size: 0.6rem !important;
}

/* Pie de card: sin borde superior, más limpio */
.mr-pcard__foot {
    border-top: none !important;
    padding-top: 0.5rem !important;
    gap: 0.65rem !important;
}

/* Precio: más peso visual */
.mr-price-now {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--textMain) !important;
    letter-spacing: -0.03em !important;
}
.mr-price-old {
    font-size: 0.65rem !important;
    color: #C0C0C0 !important;
}
/* Si tiene descuento, el precio actual va en crimson */
.mr-price-now:not(.mr-price-now--single) {
    color: var(--primary) !important;
}

/* Íconos carrito/favorito: más refinados */
.mr-pcard__icon-btn {
    width: 2.1rem !important;
    height: 2.1rem !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 50% !important;
    color: #BBBBBB !important;
    transition: all 0.2s ease !important;
}
.mr-pcard__icon-btn:hover {
    border-color: var(--textMain) !important;
    color: var(--textMain) !important;
    transform: none !important;
}
.mr-pcard__icon-btn.is-fav {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background: rgba(149,6,6,0.04) !important;
}

/* ── Botón COMPRAR AHORA → crimson sólido elegante ───────────── */
.mr-pcard__buy {
    background: var(--primary) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.7rem 0.5rem !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    transition: all 0.25s ease !important;
}
.mr-pcard__buy:hover {
    background: var(--primary-dark) !important;
    color: #FFFFFF !important;
}
.mr-pcard__buy:active {
    transform: none !important;
}

/* Scarcity: gold sutil */
.mr-scarcity-dot {
    background: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(201,168,76,0.15) !important;
}
.mr-pcard__scarcity--on {
    color: var(--gold) !important;
    background: var(--gold-soft) !important;
    border-color: transparent !important;
}

/* Stock agotado */
.mr-pcard__stock-oos {
    font-style: italic !important;
    letter-spacing: 0.06em !important;
}

/* ══════════════════════════════════════════════════════════════════
   SECTION HEADERS — con línea gold decorativa, mejor jerarquía
   ══════════════════════════════════════════════════════════════════ */
.home-section-header {
    border-bottom: none !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
    position: relative !important;
}
.home-section-title {
    font-family: var(--font-editorial) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem) !important;
    position: relative !important;
    padding-bottom: 12px !important;
}
/* Línea gold decorativa debajo del título */
.home-section-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 40px !important;
    height: 2px !important;
    background: var(--gold) !important;
}
.home-section-cta {
    border-bottom-color: transparent !important;
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
    color: var(--textMuted) !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
.home-section-cta:hover {
    color: var(--textMain) !important;
    border-bottom-color: var(--textMain) !important;
}

/* ── Scroll horizontal: más gap entre cards ──────────────────── */
.home-section-scroll {
    gap: 1rem !important;
}
@media (min-width: 768px) {
    .home-section-scroll { gap: 1.5rem !important; }
}

/* ── Cards en scroll: ancho mínimo más generoso ──────────────── */
.home-section-scroll .mr-pcard {
    min-width: 260px;
    max-width: 300px;
}
@media (max-width: 640px) {
    .home-section-scroll .mr-pcard {
        min-width: 200px;
        max-width: 240px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   FAQ / OBJECTIONS — serif italic questions, más editorial
   ══════════════════════════════════════════════════════════════════ */
#objections-section {
    background: var(--ivory) !important;
    border-top: none !important;
}
#objections-section h2 {
    font-family: var(--font-editorial) !important;
    text-transform: none !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
}
.faq-question span {
    font-family: var(--font-editorial) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    font-style: italic !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.faq-item {
    border-color: #E0E0E0 !important;
}
.faq-icon {
    color: var(--textMuted) !important;
}
.faq-item[open] > .faq-question { color: var(--textMain) !important; }
.faq-item[open] .faq-icon { color: var(--primary) !important; }

/* ══════════════════════════════════════════════════════════════════
   INSTAGRAM SECTION — más limpio
   ══════════════════════════════════════════════════════════════════ */
#ig-section {
    background: #FFFFFF !important;
}
#ig-section h2 {
    font-family: var(--font-editorial) !important;
    text-transform: none !important;
    font-weight: 400 !important;
}
#ig-follow-btn {
    background: var(--charcoal) !important;
    border-radius: 0 !important;
}
#ig-follow-btn:hover {
    background: #333 !important;
}

/* ══════════════════════════════════════════════════════════════════
   TRUST SECTION v2 — gold tinted icons
   ══════════════════════════════════════════════════════════════════ */
.trust-icon {
    color: var(--gold) !important;
}
.trust-icon::before {
    background: radial-gradient(circle, rgba(201,168,76,0.2), transparent 70%) !important;
}
.trust-v2-section {
    background: var(--charcoal) !important;
}

/* ══════════════════════════════════════════════════════════════════
   FOOTER — charcoal oscuro, más editorial
   ══════════════════════════════════════════════════════════════════ */
footer.bg-footerBg {
    background-color: var(--charcoal) !important;
}
#footer-logo-text {
    font-weight: 300 !important;
    letter-spacing: 0.25em !important;
    font-size: 1rem !important;
}
footer h4 {
    color: rgba(255,255,255,0.3) !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
}
.footer-info-link {
    color: rgba(255,255,255,0.5) !important;
    font-size: 12.5px !important;
}
.footer-info-link:hover { color: #fff !important; }
.footer-social-link {
    opacity: 0.4 !important;
    transition: opacity 0.2s !important;
}
.footer-social-link:hover { opacity: 1 !important; }
footer .text-gray-200 { color: rgba(255,255,255,0.45) !important; }
footer li { color: rgba(255,255,255,0.45) !important; }
.footer-location { color: rgba(255,255,255,0.3) !important; }

/* ══════════════════════════════════════════════════════════════════
   WELCOME / AUTH MODALS — serif hero, menos agresivo
   ══════════════════════════════════════════════════════════════════ */
.welcome-modal-hero {
    font-family: var(--font-editorial) !important;
}
#auth-logo-text {
    font-weight: 300 !important;
    letter-spacing: 0.2em !important;
}

/* ══════════════════════════════════════════════════════════════════
   CART DRAWER — serif heading, más limpio
   ══════════════════════════════════════════════════════════════════ */
#cartDrawerContent h2 {
    font-family: var(--font-editorial) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 1.15rem !important;
}

/* ══════════════════════════════════════════════════════════════════
   CATEGORY BLOCKS — serif titles, gold eyebrows
   ══════════════════════════════════════════════════════════════════ */
.split-category-col {
    border-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════
   PRODUCT DETAIL (PDP) — serif heading, gold stars
   ══════════════════════════════════════════════════════════════════ */
.price-current {
    letter-spacing: -0.03em !important;
}

/* PDP star ratings */
.product-star svg {
    fill: var(--gold) !important;
}

/* Quick view modal: serif title */
#quickviewContent h2,
#quickviewContent .product-title {
    font-family: var(--font-editorial) !important;
    font-weight: 400 !important;
    text-transform: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   WHATSAPP FLOAT — más sutil
   ══════════════════════════════════════════════════════════════════ */
.float-btn-whatsapp {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

/* ══════════════════════════════════════════════════════════════════
   GENERAL — reducir ruido visual global
   ══════════════════════════════════════════════════════════════════ */

/* Buttons: sin border-radius redondeado */
.btn-primary {
    border-radius: 0 !important;
}

/* Toast: menos sombra */
.toast {
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
}

/* Fomo toast: menos intrusivo */
.fomo-toast {
    border-radius: 4px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
}

/* Store chips (filters) */
.store-chip.is-active {
    border-color: var(--textMain) !important;
    background: var(--textMain) !important;
    color: #fff !important;
}

/* Checkout modal: serif title */
#checkoutModalContent h2 {
    font-family: var(--font-editorial) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 500 !important;
}

/* Recently viewed: serif title */
#recently-viewed h2 {
    font-family: var(--font-editorial) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    font-size: 1.6rem !important;
}

/* Review modal: serif title */
#reviewModal h2 {
    font-family: var(--font-editorial) !important;
    text-transform: none !important;
}

/* SBB CTA (see-by-brand): cleaner */
.sbb-cta {
    border-radius: 0 !important;
}

/* Alternating section bg */
.home-curated-section:nth-child(even) {
    background: var(--ivory);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* ══════════════════════════════════════════════════════════════════
   SPACING — más aire entre secciones
   ══════════════════════════════════════════════════════════════════ */
#home-curated-sections > * {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}

/* End of REDESIGN TOTAL v3 */

/* ══════════════════════════════════════════════════════════════════
   BOTONES EXPLORAR + COMPRAR — todos crimson rojo
   ══════════════════════════════════════════════════════════════════ */
.split-category-cta,
.split-category-col--men-cta,
.split-category-col--women-cta {
    background: var(--primary) !important;
    color: #FFFFFF !important;
}
.split-category-cta:hover,
.split-category-col--men-cta:hover,
.split-category-col--women-cta:hover {
    background: var(--primary-dark) !important;
    color: #FFFFFF !important;
}

.fcol-tile__cta,
.fcol-tile--men .fcol-tile__cta,
.fcol-tile--women .fcol-tile__cta,
.fcol-tile--jewelry .fcol-tile__cta,
.fcol-tile--offers .fcol-tile__cta {
    background: var(--primary) !important;
    color: #FFFFFF !important;
}
.fcol-tile__cta:hover,
.fcol-tile--men .fcol-tile__cta:hover,
.fcol-tile--women .fcol-tile__cta:hover,
.fcol-tile--jewelry .fcol-tile__cta:hover,
.fcol-tile--offers .fcol-tile__cta:hover {
    background: var(--primary-dark) !important;
    color: #FFFFFF !important;
}

.sbb-cta {
    background: var(--primary) !important;
    color: #FFFFFF !important;
}
.sbb-cta:hover, .sbb-cta:active {
    background: var(--primary-dark) !important;
}