/* ══════════════════════════════════════════════════════════════════════════════════════════════
   GEIST, ALOJADA EN CASA — 2026-08-15. Las mismas declaraciones que en `public/sitio/aire-vivo.css`,
   repetidas aquí a propósito: `facturacion.html` y `order-history.html` NO cargan la hoja de marca,
   cargan ésta. Si sólo viviera allí, esas dos pantallas escribirían Geist sin que nadie la sirva y
   caerían a la letra del sistema en silencio — que es exactamente el fallo de Montserrat que ya
   cazó `una-sola-tipografia-en-toda-la-plataforma`.
   ⚠️ SON DOS SITIOS Y PUEDEN SEPARARSE. La guarda `la-tipografia-vive-en-casa` compara los dos
   ficheros y se pone roja si dejan de coincidir.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
/* latin-ext */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/Geist-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/Geist-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Geist-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Geist-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/Geist-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/Geist-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* latin-ext */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/Geist-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* latin */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/Geist-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =============================================
   AIRE VIVO — Sistema de diseño heredado
   ⚠️ Esta hoja NACIÓ para la mueblería de la que salió el proyecto, y su cabecera llevaba el
   nombre de aquella empresa. No era un comentario cualquiera: la cargan SIETE páginas servidas
   —/catalogo, /institucional, /trabajos, /blog, /checkout, /order-history y /facturacion—, así que
   ese texto se entregaba íntegro a todo visitante y a todo rastreador. Un comentario en una hoja
   servida NO es privado.
   ⚠️ Decía «las SIETE páginas PÚBLICAS» y no es exacto: son siete FICHEROS, pero la portada `/` y
   `/login` NO la cargan, y dos de los siete son páginas del ERP. Siete no es lo mismo que «todas»,
   y confundirlos habría hecho buscar el problema donde no está. Lo cazó una auditoría pidiendo el fichero con
   curl, no leyendo el repositorio.
   Los valores de dentro (#8B5E35, #673E23, Mortend) los pisa `public/sitio/aire-vivo.css` en
   las cinco páginas React — se ven bien, pero se SIRVEN igual. Sustituirla es su propio
   trabajo, no un parche de madrugada: queda registrada como B-316.
   ============================================= */

/* =============================================
   CUSTOM FONTS & BASE
   Helvetica - Clean, universal, professional
   Mortend Bold - Logo / Brand display only
   ============================================= */

@font-face {
    font-family: 'Mortend';
    src: url('fonts/Mortend-Bold.woff2') format('woff2'),
         url('fonts/Mortend-Bold.woff') format('woff'),
         url('fonts/Mortend-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    /* `optional`, NO `swap`. Mortend es ~80% más ancha que su fuente de reserva (230px contra
       128px para el logotipo de la marca anterior), así que sustituirla después del primer trazado desbordaba la
       fila del navbar móvil, bajaba los iconos a una segunda línea y desplazaba 44px todo lo que
       hay debajo — el CLS de 0.206 en trabajos y 0.225 en home medido el 2026-07-19.
       `optional` le da al navegador una ventana breve y, si la fuente no llegó, se queda con la
       de reserva durante el resto de esa carga: nunca hay un segundo trazado con métricas
       distintas. Va acompañado del <link rel="preload"> en las 5 páginas públicas, que es lo que
       hace que la fuente sí llegue a tiempo y el logo se vea en Mortend. Medido: sin el preload
       este cambio no sirve de nada (0.206 igual), y sólo con preload quedaban 3 de cada 12
       cargas de home todavía malas. Hacen falta los dos. */
    font-display: optional;
}

:root {
    /* Typography - Helvetica system stack */
    --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-logo: 'Mortend', 'Impact', 'Arial Black', sans-serif;

    /* Premium Colors - Sistema Unificado
       La rampa se corrió un escalón hacia el café (2026-07-20, auditoría axe). El primario era
       #B8814D, que da 3.34:1 sobre blanco: por debajo del 4.5:1 que WCAG AA pide para texto
       normal. Como --color-primary pinta títulos, antetítulos y el fondo de .btn-primary con
       texto blanco encima, ese único valor causaba las 27 violaciones de contraste que axe
       encontró en las 5 páginas públicas.
       Ahora: primary = #8B5E35 (5.60:1) — que NO es un tono nuevo, es el que ya era
       --color-primary-dark, o sea un café que el sitio ya mostraba en cada hover; y
       primary-dark = #6B4826 (8.14:1), para que el hover siga siendo distinguible del reposo.
       #B8814D no desaparece del sistema: sigue siendo válido donde no hay texto encima.
       La marca (beige #ECDFCD, naranja #FF5500, café #673E23) NO se toca: #B8814D nunca fue
       un color de marca, era el valor por defecto del design system. */
    --color-primary: #8B5E35;
    --color-primary-dark: #6B4826;
    --color-primary-light: #D4A574;
    /* --color-secondary era #E8DCC8 (beige claro) y ese valor estaba sencillamente equivocado,
       no "poco accesible": la variable hace DOS trabajos y el beige rompía los dos.
         · Como TEXTO (.section-title, .feature-title, .lifestyle-*) caía sobre fondos blancos
           o crema → 1.35:1. Eso no es "contraste bajo", es texto INVISIBLE: los títulos
           "Nuestro Catálogo" y "Nuestros valores" no se leían.
         · Como FONDO (.lifestyle-section, .newsletter-form button, .badge…) va SIEMPRE
           acompañada de `color: #fff` — o sea, el diseño da por hecho que es un color OSCURO.
           Con el beige, ese blanco encima daba otros 1.35:1.
       Que las 14 violaciones restantes de index e institucional salieran todas de aquí lo
       confirma. El valor correcto es el café de la marca, que sirve para los dos papeles
       (9.17:1 en ambos sentidos contra blanco) y no inventa ningún tono nuevo.
       En producción esto NO cambia nada si el sitio tiene `secondaryColor` configurado: el
       tema lo sobrescribe en caliente con ese mismo café (applyThemeConfig, src/utils/theme.js).
       Sólo cambia el estado por defecto — que hoy es el que se ve mientras carga /api/settings. */
    --color-secondary: #673E23;  /* Café de marca — se usa como texto Y como fondo con #fff encima */
    --color-accent: #F5E6D3;
    --color-cream: #FAF8F5;
    --color-warm-white: #FFFFFF;
    --color-charcoal: #1A1612;   /* Antes era #0F0D0B, ahora unificado */
    --color-text: #1A1612;
    --color-text-light: #3D3630;
    --color-text-muted: #6B6156;
    --color-border: #D5CFC5;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;
    --space-xxl: 10rem;

    /* Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =============================================
   GLOBAL STYLES
   ============================================= */
body {
    font-family: var(--font-body);
    background-color: var(--color-cream);
    color: var(--color-text);
    line-height: 1.7;
    overflow-x: hidden;
}

/* Elegant scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-cream);
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
}

/* Selection color */
::selection {
    background: var(--color-primary-light);
    color: var(--color-secondary);
}

/* =============================================
   ACCESSIBILITY - Focus States
   ============================================= */

/* Focus outline visible para accesibilidad */
:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Reset focus para elementos que no lo necesitan visualmente */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* Skip link para navegación por teclado */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    padding: 8px 16px;
    background: var(--color-primary);
    color: white;
    z-index: 10000;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* Mejora de contraste para textos */
.text-muted {
    color: var(--color-text-muted) !important;
}

/* =============================================
   BUTTONS - Accesibilidad y Contraste
   ============================================= */
.btn {
    transition: all var(--transition-fast);
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}

.btn-outline-primary {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Utilidades "primary" de Bootstrap — que NO pasaban por nuestra variable.
   .btn-primary y .btn-outline-primary ya estaban redefinidos arriba, pero el resto de la familia
   (.text-primary, .border-primary, .bg-primary…) seguía cayendo al azul #0d6efd de Bootstrap.
   Eso daba 4.50:1 sobre blanco —justo en la raya, y por debajo en cuanto el fondo no es blanco
   puro, que es el caso de casi todo el sitio (crema #FAF8F5)—. Así lo cazó axe en el importe
   total del checkout: <h5 class="text-primary">$33,900</h5>, el número más importante de la
   página de cobro, en un azul que además no es de la marca.
   Redefinir las variables de Bootstrap en :root arregla la CLASE entera de una vez (A8): toda
   utilidad `-primary` presente o futura hereda el café accesible en lugar del azul. */
:root {
    --bs-primary: #8B5E35;
    --bs-primary-rgb: 139, 94, 53;
}

.text-primary {
    color: var(--color-primary) !important;
}

/* .list-group-item.active conserva su propio azul de Bootstrap (--bs-list-group-active-bg), que
   no deriva de --bs-primary. En el blog eso dejaba el filtro de categoría activo con el texto
   café sobre fondo azul: 1.24:1, ilegible. Se alinea con el primario del sitio. */
.list-group-item.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Botón con mínimo tamaño accesible (44x44px área de toque) */
.btn-accessible {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 1rem;
}

/* =============================================
   TYPOGRAPHY
   ============================================= */
.heading-display {
    font-family: var(--font-display);
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.heading-elegant {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.text-uppercase-spaced {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    font-weight: 500;
}

/* =============================================
   HERO SECTION - Premium
   ============================================= */
.hero-premium {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0,0,0,0.4) 0%,
        rgba(0,0,0,0.2) 50%,
        rgba(0,0,0,0.4) 100%
    );
    z-index: 1;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    animation: heroZoom 20s ease-in-out infinite alternate;
}

@keyframes heroZoom {
    0% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: var(--space-md);
    max-width: 900px;
}

/* 🔴🔴 B-414 · EL TITULAR NACÍA INVISIBLE Y SÓLO LO ENCENDÍA UNA ANIMACIÓN.
   Angel, 2026-08-07: «Nosotros no dice nada» — el héroe con su bajada y NINGÚN titular.

   La causa no estaba en esa página. Estas tres reglas declaraban `opacity:0` y confiaban en que
   `fadeInUp` las devolviera a 1. Cuando el sistema pide MENOS MOVIMIENTO —«Reducir movimiento» de
   iOS, el ahorro de batería de Android, la preferencia del sistema en Firefox—, `aire-vivo.css`
   mata la animación con `.av *{animation:none!important}` y NADIE devuelve el estado de reposo.
   El titular se queda en cero PARA SIEMPRE.

   Encaja con la otra queja del mismo día —«la animación en Mozilla es inexistente, en chrome
   tampoco»—: no es que falte una animación, es que su ausencia se lleva el texto por delante.
   Es hermano del fallo de las uniones del manifiesto (B-368): una rama que aprende a no actuar y
   a la que nadie prueba. Una exención sin guarda es un interruptor de apagado.

   🔴 Y ERA PEOR DE LO REPORTADO. Angel vio UNA superficie. Medido con las dos pasadas —con y sin
   la preferencia— sobre las rutas DERIVADAS del sitio, el `<h1>` desaparecía en CINCO, y en los
   dos anchos, no sólo en el teléfono:

       /catalogo                «Lo que se puede llevar en la mano.»
       /institucional           «Nosotros»
       /institucional#shipping  «Cobertura y servicio»
       /institucional#contact   «Contacto»
       /categoria/:slug         el titular de la categoría
   … más el botón «Solicita tu cotización →» del héroe del catálogo. 18 hallazgos en total.

   ✅ EL ARREGLO NO ES UNA LISTA DE RESCATE, ES NO NACER INVISIBLE. Se podía haber añadido
   `.hero-title{opacity:1!important}` dentro de la consulta de movimiento reducido, pero eso es
   una lista escrita a mano: la siguiente regla que alguien esconda para animarla no estaría en
   ella. El estado escondido se declara SÓLO donde hay movimiento que lo devuelva, o sea dentro de
   `@media (prefers-reduced-motion: no-preference)`. Sin esa preferencia el elemento nunca se
   esconde, y no hay nada que recordar. Lo vigila `verificar-movimiento-reducido.js`. */
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: var(--space-sm);
    letter-spacing: 0.02em;
    text-shadow: 0 4px 30px rgba(0,0,0,0.3);
}

.hero-subtitle {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: var(--space-lg);
    color: rgba(255, 255, 255, 0.85);
}

@media (prefers-reduced-motion: no-preference) {
    .hero-title {
        opacity: 0;
        transform: translateY(40px);
        animation: fadeInUp 1s ease forwards;
        animation-delay: 0.3s;
    }

    .hero-subtitle {
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 1s ease forwards;
        animation-delay: 0.6s;
    }

    .hero-cta {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 1s ease forwards;
        animation-delay: 0.9s;
    }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Button Premium */
.btn-hero {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 2.5rem;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all var(--transition-medium);
    position: relative;
    overflow: hidden;
}

.btn-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    transition: left var(--transition-medium);
    z-index: -1;
}

.btn-hero:hover {
    border-color: var(--color-primary);
    color: #fff;
}

.btn-hero:hover::before {
    left: 0;
}

.btn-hero .arrow {
    transition: transform var(--transition-fast);
}

.btn-hero:hover .arrow {
    transform: translateX(5px);
}

/* Variantes del botón del hero — knob `ctaStyle` del editor de temas (Ola 8, 2026-07-20).
   El estilo BASE de .btn-hero ya es el de contorno (fondo transparente + borde), o sea que
   'outline' NO necesita clase: es lo que se ve hoy. Por eso sólo existen modificadores para las
   otras dos, y por eso el componente los aplica SÓLO si el dueño elige algo — sin elección, el
   home vivo queda byte-idéntico. Un default no nulo en el registry habría cambiado el aspecto
   del home el día que se cableara el knob, que es justo el modo de fallo que este cambio evita. */
.btn-hero--filled {
    background: var(--color-primary, #8B5E35);
    border-color: var(--color-primary, #8B5E35);
    color: #fff;
}
.btn-hero--filled:hover {
    background: var(--color-primary-dark, #673E23);
    border-color: var(--color-primary-dark, #673E23);
}
.btn-hero--rounded {
    border-radius: 999px;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    animation: bounce 2s infinite;
}

.scroll-indicator span {
    display: block;
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 12px;
    position: relative;
}

.scroll-indicator span::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    height: 8px;
    background: rgba(255,255,255,0.8);
    border-radius: 2px;
    transform: translateX(-50%);
    animation: scrollWheel 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

@keyframes scrollWheel {
    0% { opacity: 1; top: 8px; }
    100% { opacity: 0; top: 20px; }
}

/* =============================================
   FEATURES SECTION - Premium (Centered, Better Contrast)
   ============================================= */
.features-premium {
    padding: var(--space-xl) 0;
    background: var(--color-warm-white);
}

.features-premium .container {
    max-width: 1400px;
}

.features-premium .row {
    justify-content: center;
}

.feature-card {
    text-align: center;
    padding: var(--space-md) var(--space-sm);
    transition: all var(--transition-medium);
    background: transparent;
}

.feature-card:hover {
    transform: translateY(-8px);
}

.feature-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--space-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 50%;
    color: #fff;
    font-size: 1.5rem;
    transition: all var(--transition-medium);
    box-shadow: 0 4px 20px rgba(184, 129, 77, 0.25);
}

.feature-card:hover .feature-icon {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(184, 129, 77, 0.4);
}

.feature-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-secondary);
    letter-spacing: 0.02em;
}

.feature-desc {
    color: var(--color-text-light);
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 200px;
    margin: 0 auto;
    font-weight: 400;
}

/* 5 columns for features on large screens */
@media (min-width: 1200px) {
    .features-premium .col-xl-2 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .features-premium .col-lg-3 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}

/* =============================================
   CATALOG SECTION - Premium
   ============================================= */
.catalog-premium {
    padding: var(--space-xl) 0;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.section-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 400;
    color: var(--color-secondary);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.section-subtitle {
    font-size: 1rem;
    color: var(--color-text-light);
    max-width: 600px;
    margin: 0 auto;
    font-weight: 400;
}

/* =============================================
   PRODUCT CARD - Premium
   ============================================= */
.product-card-premium {
    position: relative;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    transition: all var(--transition-medium);
    box-shadow: 0 2px 20px rgba(0,0,0,0.05);
}

.product-card-premium:hover {
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    transform: translateY(-8px);
}

.product-image-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/5;
    background: #f5f5f5;
}

.product-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.product-card-premium:hover .product-image-wrapper img {
    transform: scale(1.08);
}

/* Product Overlay */
.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.7) 0%,
        transparent 50%
    );
    opacity: 0;
    transition: opacity var(--transition-medium);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--space-md);
}

.product-card-premium:hover .product-overlay {
    opacity: 1;
}

.product-quick-view {
    display: flex;
    gap: 0.75rem;
}

.product-quick-view button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    transform: translateY(20px);
    opacity: 0;
}

.product-card-premium:hover .product-quick-view button {
    transform: translateY(0);
    opacity: 1;
}

.product-card-premium:hover .product-quick-view button:nth-child(1) {
    transition-delay: 0.05s;
}

.product-card-premium:hover .product-quick-view button:nth-child(2) {
    transition-delay: 0.1s;
}

.product-card-premium:hover .product-quick-view button:nth-child(3) {
    transition-delay: 0.15s;
}

.product-quick-view button:hover {
    background: var(--color-primary);
    color: #fff;
    transform: scale(1.1);
}

/* Botón favorito activo */
.product-quick-view button.favorite-active {
    background: #e74c3c;
    color: #fff;
}

.product-quick-view button.favorite-active:hover {
    background: #c0392b;
    transform: scale(1.1);
}

/* Product Badge */
.product-badge {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    padding: 0.5rem 1rem;
    background: var(--color-secondary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    z-index: 2;
}

.product-badge.sale {
    background: #C75050;
}

.product-badge.new {
    background: var(--color-primary);
}

/* Product Info */
.product-info {
    padding: var(--space-md);
    text-align: center;
    background: #fff;
}

.product-category {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.product-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 0.5rem;
    transition: color var(--transition-fast);
}

.product-card-premium:hover .product-name {
    color: var(--color-primary);
}

.product-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
}

.product-price .old-price {
    text-decoration: line-through;
    color: var(--color-text-light);
    font-weight: 400;
    margin-right: 0.5rem;
}

/* =============================================
   LIFESTYLE SECTION
   ============================================= */
.lifestyle-section {
    padding: var(--space-xl) 0;
    background: var(--color-secondary);
    color: #fff;
    overflow: hidden;
}

.lifestyle-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: center;
}

@media (max-width: 991px) {
    .lifestyle-content {
        grid-template-columns: 1fr;
    }
}

.lifestyle-text {
    padding: var(--space-lg);
}

.lifestyle-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

.lifestyle-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.lifestyle-desc {
    font-size: 1rem;
    line-height: 1.8;
    opacity: 0.85;
    margin-bottom: var(--space-md);
}

.lifestyle-image {
    position: relative;
}

.lifestyle-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.lifestyle-image::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100px;
    height: 100px;
    border: 2px solid var(--color-accent);
    z-index: 1;
}

/* =============================================
   NEWSLETTER SECTION
   ============================================= */
.newsletter-premium {
    padding: var(--space-xl) 0;
    background: linear-gradient(135deg, var(--color-cream) 0%, #EDE8E0 100%);
}

.newsletter-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.newsletter-form {
    display: flex;
    gap: 0;
    margin-top: var(--space-md);
}

.newsletter-form input {
    flex: 1;
    padding: 1rem 1.5rem;
    border: 1px solid var(--color-border);
    border-right: none;
    font-size: 1rem;
    outline: none;
    transition: border-color var(--transition-fast);
}

.newsletter-form input:focus {
    border-color: var(--color-primary);
}

.newsletter-form button {
    padding: 1rem 2rem;
    background: var(--color-secondary);
    border: none;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.newsletter-form button:hover {
    background: var(--color-primary);
}

/* =============================================
   BUTTONS - Premium
   ============================================= */
.btn-premium {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition-medium);
    position: relative;
    overflow: hidden;
}

.btn-premium-primary {
    background: var(--color-primary);
    color: #fff;
}

.btn-premium-primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(184, 129, 77, 0.3);
}

.btn-premium-outline {
    background: transparent;
    border: 2px solid var(--color-secondary);
    color: var(--color-secondary);
}

.btn-premium-outline:hover {
    background: var(--color-secondary);
    color: #fff;
}

/* =============================================
   REVEAL ON SCROLL ANIMATIONS
   ============================================= */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* DESHABILITADO - causaba problemas de visibilidad en la página
   El IntersectionObserver no siempre marca los elementos como visible a tiempo
.reveal:not(.visible):not(:hover) {
    opacity: 0;
    transform: translateY(30px);
}
*/

.reveal.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.reveal-left {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* DESHABILITADO - causaba problemas de visibilidad
.reveal-left:not(.visible) {
    opacity: 0;
    transform: translateX(-30px);
}
*/

.reveal-left.visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.reveal-right {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* DESHABILITADO - causaba problemas de visibilidad
.reveal-right:not(.visible) {
    opacity: 0;
    transform: translateX(30px);
}
*/

.reveal-right.visible {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Stagger delay for grid items */
.reveal-stagger > *:nth-child(1) { transition-delay: 0.1s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.2s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.3s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.4s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.5s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.6s; }

/* =============================================
   LOADING STATES & SKELETONS
   ============================================= */

/* Skeleton loading animation */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.skeleton-title {
    height: 1.5em;
    width: 60%;
    margin-bottom: 1em;
}

.skeleton-image {
    width: 100%;
    padding-bottom: 75%;
}

.skeleton-button {
    height: 44px;
    width: 120px;
}

/* Loading overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Spinner mejorado */
.spinner-premium {
    width: 48px;
    height: 48px;
    border: 3px solid var(--color-secondary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Toast notifications */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

.toast-premium {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    animation: toast-in 0.3s ease-out;
}

.toast-success {
    background: #10B981;
    color: white;
}

.toast-error {
    background: #EF4444;
    color: white;
}

.toast-info {
    background: var(--color-primary);
    color: white;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================
   FOOTER - Premium
   ============================================= */
.footer-premium {
    background: var(--color-charcoal);
    color: #fff;
    padding: var(--space-xl) 0 var(--space-md);
}

.footer-logo {
    font-family: var(--font-logo);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

.footer-links h4 {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
    color: var(--color-accent);
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color var(--transition-fast);
    display: block;
    padding: 0.3rem 0;
}

.footer-links a:hover {
    color: var(--color-accent);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: var(--space-md);
    margin-top: var(--space-lg);
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.5);
}

/* =============================================
   NAVBAR - Premium
   ============================================= */
.navbar-premium {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1.5rem 0;
    transition: all var(--transition-medium);
}

.navbar-premium.scrolled {
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(10px);
    padding: 1rem 0;
    box-shadow: 0 2px 30px rgba(0,0,0,0.08);
}

.navbar-premium .nav-link {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 0.5rem 1rem !important;
    transition: color var(--transition-fast);
    position: relative;
}

.navbar-premium.scrolled .nav-link {
    color: var(--color-secondary);
}

.navbar-premium .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transition: transform var(--transition-fast);
}

.navbar-premium .nav-link:hover::after,
.navbar-premium .nav-link.active::after {
    transform: scaleX(1);
}

.navbar-brand-premium {
    font-family: var(--font-logo);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #fff !important;
    transition: color var(--transition-fast);
    text-transform: uppercase;
}

.navbar-premium.scrolled .navbar-brand-premium {
    color: var(--color-secondary) !important;
}

/* =============================================
   RESPONSIVE ADJUSTMENTS
   ============================================= */
@media (max-width: 991px) {
    .hero-premium {
        min-height: 80vh;
    }

    .hero-title {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .section-eyebrow::before,
    .section-eyebrow::after {
        display: none;
    }
}

@media (max-width: 767px) {
    :root {
        --space-lg: 2.5rem;
        --space-xl: 3.5rem;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input {
        border-right: 1px solid var(--color-border);
        border-bottom: none;
    }

    .product-card-premium:hover {
        transform: none;
    }

    .product-overlay {
        opacity: 1;
        background: linear-gradient(
            to top,
            rgba(0,0,0,0.5) 0%,
            transparent 30%
        );
    }

    .product-quick-view button {
        transform: translateY(0);
        opacity: 1;
    }
}

/* =============================================
   LOADING & TRANSITIONS
   ============================================= */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-secondary);
    z-index: 9999;
    transform: translateY(-100%);
    transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
}

.page-transition.active {
    transform: translateY(0);
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =============================================
   CUSTOM CURSOR (Optional - Desktop only)
   ============================================= */
@media (hover: hover) and (pointer: fine) {
    .custom-cursor {
        width: 20px;
        height: 20px;
        border: 2px solid var(--color-primary);
        border-radius: 50%;
        position: fixed;
        pointer-events: none;
        z-index: 9999;
        transition: transform 0.15s ease, opacity 0.15s ease;
        mix-blend-mode: difference;
    }

    .custom-cursor.hover {
        transform: scale(2);
        background: var(--color-primary);
        opacity: 0.5;
    }
}