:root {



    --color-primary-50: #faf5ef;

    --color-primary-100: #f1e6d5;

    --color-primary-200: #e2cba8;

    --color-primary-300: #d0ab76;

    --color-primary-400: #c19355;

    --color-primary-500: #a67b45;

    --color-primary-600: #8b6238;

    --color-primary-700: #704c2e;

    --color-primary-800: #5c3e28;

    --color-primary-900: #4c3423;

    --color-primary-950: #2b1a11;



    /* Secondary - Honey Amber (Pine) */

    --color-secondary-50: #fffbeb;

    --color-secondary-100: #fef3c7;

    --color-secondary-200: #fde68a;

    --color-secondary-300: #fcd34d;

    --color-secondary-400: #f5b73a;

    --color-secondary-500: #d99a28;

    --color-secondary-600: #b8791c;

    --color-secondary-700: #925a18;

    --color-secondary-800: #78471a;

    --color-secondary-900: #653b1b;



    /* Neutral - Warm Wood Tones */

    --color-gray-50: #f9f7f4;

    --color-gray-100: #f0ebe4;

    --color-gray-200: #dfd6c8;

    --color-gray-300: #c9b9a5;

    --color-gray-400: #b09880;

    --color-gray-500: #9c8268;

    --color-gray-600: #8a7058;

    --color-gray-700: #735c49;

    --color-gray-800: #604d3f;

    --color-gray-900: #382c22;

    --color-gray-950: #1c1610;



    /* Semantic Colors */

    --color-success: #22c55e;

    --color-success-light: #dcfce7;

    --color-warning: #f59e0b;

    --color-warning-light: #fef3c7;

    --color-error: #ef4444;

    --color-error-light: #fee2e2;

    --color-info: #3b82f6;

    --color-info-light: #dbeafe;



    /* Brand Colors */

    --color-whatsapp: #25D366;

    --color-whatsapp-hover: #20bd5a;

    --color-instagram: #E4405F;

    --color-facebook: #1877F2;



    /* � � � � � � � � � � � � � � � � � � � � � � � �  Semantic Tokens (Light Mode) � � � � � � � � � � � � � � � � � � � � � � � �  */

    --color-bg: var(--color-gray-50);

    --color-bg-alt: #F5F7F6;

    --color-surface: #FFFFFF;

    --color-surface-elevated: #FFFFFF;

    --color-border: rgba(0, 0, 0, 0.06);

    --color-border-strong: rgba(0, 0, 0, 0.12);



    --color-text-primary: var(--color-gray-900);

    --color-text-secondary: var(--color-gray-600);

    --color-text-muted: var(--color-gray-500);

    --color-text-disabled: var(--color-gray-400);

    --color-text-inverse: #FFFFFF;

    --color-text-link: var(--color-primary-600);

    --color-text-link-hover: var(--color-primary-700);



    /* � � � � � � � � � � � � � � � � � � � � � � � �  Typography � � � � � � � � � � � � � � � � � � � � � � � �  */

    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --font-family-display: 'Playfair Display', Georgia, serif;

    --font-family-mono: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas, monospace;



    /* Font Sizes - Fluid Typography */

    --font-size-2xs: clamp(0.625rem, 0.6rem + 0.125vw, 0.6875rem);

    --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);

    --font-size-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);

    --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);

    --font-size-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.1875rem);

    --font-size-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.375rem);

    --font-size-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.75rem);

    --font-size-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);

    --font-size-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 2.75rem);

    --font-size-5xl: clamp(3rem, 2.5rem + 2.5vw, 3.75rem);

    --font-size-6xl: clamp(3.75rem, 3rem + 3.75vw, 4.75rem);

    --font-size-7xl: clamp(4.5rem, 3.5rem + 5vw, 6rem);



    /* Font Weights */

    --font-weight-normal: 400;

    --font-weight-medium: 500;

    --font-weight-semibold: 600;

    --font-weight-bold: 700;

    --font-weight-extrabold: 800;



    /* Line Heights */

    --line-height-none: 1;

    --line-height-tight: 1.1;

    --line-height-snug: 1.25;

    --line-height-normal: 1.5;

    --line-height-relaxed: 1.625;

    --line-height-loose: 2;



    /* Letter Spacing */

    --letter-spacing-tighter: -0.05em;

    --letter-spacing-tight: -0.025em;

    --letter-spacing-normal: 0;

    --letter-spacing-wide: 0.025em;

    --letter-spacing-wider: 0.05em;

    --letter-spacing-widest: 0.1em;



    /* � � � � � � � � � � � � � � � � � � � � � � � �  Spacing Scale � � � � � � � � � � � � � � � � � � � � � � � �  */

    --space-px: 1px;

    --space-0: 0;

    --space-0-5: 0.125rem;

    /* 2px */

    --space-1: 0.25rem;

    /* 4px */

    --space-1-5: 0.375rem;

    /* 6px */

    --space-2: 0.5rem;

    /* 8px */

    --space-2-5: 0.625rem;

    /* 10px */

    --space-3: 0.75rem;

    /* 12px */

    --space-3-5: 0.875rem;

    /* 14px */

    --space-4: 1rem;

    /* 16px */

    --space-5: 1.25rem;

    /* 20px */

    --space-6: 1.5rem;

    /* 24px */

    --space-7: 1.75rem;

    /* 28px */

    --space-8: 2rem;

    /* 32px */

    --space-9: 2.25rem;

    /* 36px */

    --space-10: 2.5rem;

    /* 40px */

    --space-11: 2.75rem;

    /* 44px */

    --space-12: 3rem;

    /* 48px */

    --space-14: 3.5rem;

    /* 56px */

    --space-16: 4rem;

    /* 64px */

    --space-18: 4.5rem;

    /* 72px */

    --space-20: 5rem;

    /* 80px */

    --space-24: 6rem;

    /* 96px */

    --space-28: 7rem;

    /* 112px */

    --space-32: 8rem;

    /* 128px */

    --space-36: 9rem;

    /* 144px */

    --space-40: 10rem;

    /* 160px */

    --space-44: 11rem;

    /* 176px */

    --space-48: 12rem;

    /* 192px */

    --space-52: 13rem;

    /* 208px */

    --space-56: 14rem;

    /* 224px */

    --space-60: 15rem;

    /* 240px */

    --space-64: 16rem;

    /* 256px */

    --space-72: 18rem;

    /* 288px */

    --space-80: 20rem;

    /* 320px */

    --space-96: 24rem;

    /* 384px */



    /* � � � � � � � � � � � � � � � � � � � � � � � �  Border Radius � � � � � � � � � � � � � � � � � � � � � � � �  */

    --radius-none: 0;

    --radius-sm: 0.25rem;

    /* 4px */

    --radius-md: 0.375rem;

    /* 6px */

    --radius-lg: 0.5rem;

    /* 8px */

    --radius-xl: 0.75rem;

    /* 12px */

    --radius-2xl: 1rem;

    /* 16px */

    --radius-3xl: 1.5rem;

    /* 24px */

    --radius-4xl: 2rem;

    /* 32px */

    --radius-5xl: 2.5rem;

    /* 40px */

    --radius-full: 9999px;



    /* � � � � � � � � � � � � � � � � � � � � � � � �  Shadows � � � � � � � � � � � � � � � � � � � � � � � �  */

    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);

    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    --shadow-3xl: 0 35px 60px -15px rgba(0, 0, 0, 0.3);

    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

    --shadow-none: 0 0 transparent;



    /* Colored Shadows */

    --shadow-primary: 0 10px 40px -10px rgba(139, 98, 56, 0.35);

    --shadow-primary-lg: 0 20px 50px -15px rgba(112, 76, 46, 0.4);

    --shadow-secondary: 0 10px 40px -10px rgba(217, 154, 40, 0.35);

    --shadow-success: 0 10px 40px -10px rgba(34, 197, 94, 0.35);

    --shadow-error: 0 10px 40px -10px rgba(239, 68, 68, 0.35);



    /* Glow Effects */

    --glow-primary: 0 0 20px rgba(139, 98, 56, 0.3);

    --glow-secondary: 0 0 20px rgba(217, 154, 40, 0.3);



    /* � � � � � � � � � � � � � � � � � � � � � � � �  Transitions � � � � � � � � � � � � � � � � � � � � � � � �  */

    --transition-fast: 150ms;

    --transition-base: 200ms;

    --transition-normal: 300ms;

    --transition-slow: 500ms;

    --transition-slower: 700ms;

    --transition-slowest: 1000ms;



    /* Easing Functions */

    --ease-linear: linear;

    --ease-in: cubic-bezier(0.4, 0, 1, 1);

    --ease-out: cubic-bezier(0, 0, 0.2, 1);

    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

    --ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);

    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);



    /* � � � � � � � � � � � � � � � � � � � � � � � �  Z-Index Scale � � � � � � � � � � � � � � � � � � � � � � � �  */

    --z-behind: -1;

    --z-base: 0;

    --z-dropdown: 100;

    --z-sticky: 200;

    --z-fixed: 300;

    --z-overlay: 400;

    --z-modal: 500;

    --z-popover: 600;

    --z-tooltip: 700;

    --z-toast: 800;

    --z-max: 9999;



    /* � � � � � � � � � � � � � � � � � � � � � � � �  Layout � � � � � � � � � � � � � � � � � � � � � � � �  */

    --container-xs: 20rem;

    /* 320px */

    --container-sm: 24rem;

    /* 384px */

    --container-md: 28rem;

    /* 448px */

    --container-lg: 32rem;

    /* 512px */

    --container-xl: 36rem;

    /* 576px */

    --container-2xl: 42rem;

    /* 672px */

    --container-3xl: 48rem;

    /* 768px */

    --container-4xl: 56rem;

    /* 896px */

    --container-5xl: 64rem;

    /* 1024px */

    --container-6xl: 72rem;

    /* 1152px */

    --container-7xl: 80rem;

    /* 1280px */

    --container-8xl: 90rem;

    /* 1440px */

    --container-max: 80rem;

    /* 1280px - Default max */



    --header-height: 5rem;

    /* 80px */

    --header-height-sm: 4rem;

    /* 64px */



    /* � � � � � � � � � � � � � � � � � � � � � � � �  Breakpoints (for reference) � � � � � � � � � � � � � � � � � � � � � � � �  */

    --breakpoint-xs: 475px;

    --breakpoint-sm: 640px;

    --breakpoint-md: 768px;

    --breakpoint-lg: 1024px;

    --breakpoint-xl: 1280px;

    --breakpoint-2xl: 1536px;

    --breakpoint-3xl: 1920px;

}





/* �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" �

   2. GENERIC - Reset & Normalize

   �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" � */



/**

 * Box sizing rules

 */

*,

*::before,

*::after {

    box-sizing: border-box;

}



/**

 * Remove default margin and padding

 */

* {

    margin: 0;

    padding: 0;

}



/**

 * Prevent font size inflation on mobile

 */

html {

    -moz-text-size-adjust: none;

    -webkit-text-size-adjust: none;

    text-size-adjust: none;

    scroll-behavior: smooth;

    scroll-padding-top: var(--header-height);

}



/**

 * Set core body defaults

 */

body {

    min-height: 100vh;

    min-height: 100dvh;

    font-family: var(--font-family-sans);

    font-size: var(--font-size-base);

    line-height: var(--line-height-normal);

    color: var(--color-text-primary);

    background-color: var(--color-bg);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;

    overflow-x: hidden;

}



/**

 * Remove list styles

 */

ul[role='list'],

ol[role='list'],

ul:not([class]),

ol:not([class]) {

    list-style: none;

}



/**

 * Set shorter line heights on headings and interactive elements

 */

h1,

h2,

h3,

h4,

h5,

h6,

button,

input,

label {

    line-height: var(--line-height-tight);

}



/**

 * Balance text wrapping on headings

 */

h1,

h2,

h3,

h4,

h5,

h6 {

    text-wrap: balance;

}



/**

 * Improve text wrapping

 */

p,

li,

figcaption {

    text-wrap: pretty;

    max-width: 75ch;

}



/**

 * Remove default anchor styles

 */

a {

    color: inherit;

    text-decoration: none;

    text-decoration-skip-ink: auto;

}



/**

 * Make images easier to work with

 */

img,

picture,

video,

canvas,

svg {

    display: block;

    max-width: 100%;

    height: auto;

}



/**

 * Inherit fonts for inputs and buttons

 */

input,

button,

textarea,

select {

    font: inherit;

    color: inherit;

}



/**

 * Remove default button styles

 */

button {

    background: none;

    border: none;

    cursor: pointer;

}



/**

 * Make sure textareas without a rows attribute are not tiny

 */

textarea:not([rows]) {

    min-height: 10em;

}



/**

 * Anything that has been anchored to should have extra scroll margin

 */

:target {

    scroll-margin-block: calc(var(--header-height) + var(--space-4));

}



/**

 * Remove all animations and transitions for people that prefer not to see them

 */

@media (prefers-reduced-motion: reduce) {

    html:focus-within {

        scroll-behavior: auto;

    }



    *,

    *::before,

    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }

}





/* �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" �

   3. ELEMENTS - Base HTML Element Styles

   �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" � */



/**

 * Headings

 */

h1,

h2,

h3,

h4,

h5,

h6 {

    font-family: var(--font-family-display);

    font-weight: var(--font-weight-bold);

    color: var(--color-text-primary);

    letter-spacing: var(--letter-spacing-tight);

}



h1 {

    font-size: var(--font-size-5xl);

    font-weight: var(--font-weight-extrabold);

    letter-spacing: var(--letter-spacing-tighter);

}



h2 {

    font-size: var(--font-size-4xl);

    font-weight: var(--font-weight-extrabold);

}



h3 {

    font-size: var(--font-size-3xl);

}



h4 {

    font-size: var(--font-size-2xl);

}



h5 {

    font-size: var(--font-size-xl);

}



h6 {

    font-size: var(--font-size-lg);

}



/**

 * Paragraphs

 */

p {

    margin-bottom: var(--space-4);

}



p:last-child {

    margin-bottom: 0;

}



/**

 * Strong & Bold

 */

strong,

b {

    font-weight: var(--font-weight-semibold);

}



/**

 * Small

 */

small {

    font-size: var(--font-size-sm);

}



/**

 * Links

 */

a:not([class]) {

    color: var(--color-text-link);

    text-decoration: underline;

    text-underline-offset: 0.2em;

    transition: color var(--transition-fast) var(--ease-out);

}



a:not([class]):hover {

    color: var(--color-text-link-hover);

}



/**

 * Selection

 */

::selection {

    background-color: var(--color-primary-500);

    color: var(--color-text-inverse);

}



/**

 * Focus styles

 */

:focus-visible {

    outline: 2px solid var(--color-primary-500);

    outline-offset: 3px;

    border-radius: var(--radius-sm);

}



:focus:not(:focus-visible) {

    outline: none;

}



/**

 * Scrollbar

 */

::-webkit-scrollbar {

    width: 10px;

    height: 10px;

}



::-webkit-scrollbar-track {

    background: transparent;

}



::-webkit-scrollbar-thumb {

    background: var(--color-gray-300);

    border-radius: var(--radius-full);

    border: 2px solid transparent;

    background-clip: content-box;

}



::-webkit-scrollbar-thumb:hover {

    background: var(--color-primary-500);

    border: 2px solid transparent;

    background-clip: content-box;

}



/* Firefox */

* {

    scrollbar-width: thin;

    scrollbar-color: var(--color-gray-300) transparent;

}



/**

 * Horizontal rule

 */

hr {

    border: none;

    border-top: 1px solid var(--color-border);

    margin: var(--space-8) 0;

}





/* �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" �

   4. OBJECTS - Layout Patterns

   �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" � */



/**

 * Container

 */

.o-container {

    width: 100%;

    max-width: var(--container-max);

    margin-inline: auto;

    padding-inline: var(--space-4);

}



@media (min-width: 640px) {

    .o-container {

        padding-inline: var(--space-6);

    }

}



@media (min-width: 1024px) {

    .o-container {

        padding-inline: var(--space-8);

    }

}



/**

 * Section

 */

.o-section {

    padding-block: var(--space-16);

}



.o-section--lg {

    padding-block: var(--space-20);

}



.o-section--xl {

    padding-block: var(--space-24);

}



@media (min-width: 768px) {

    .o-section {

        padding-block: var(--space-20);

    }



    .o-section--lg {

        padding-block: var(--space-24);

    }



    .o-section--xl {

        padding-block: var(--space-32);

    }

}



/**

 * Grid

 */

.o-grid {

    display: grid;

    gap: var(--space-6);

}



.o-grid--2 {

    grid-template-columns: repeat(2, minmax(0, 1fr));

}



.o-grid--3 {

    grid-template-columns: repeat(3, minmax(0, 1fr));

}



.o-grid--4 {

    grid-template-columns: repeat(4, minmax(0, 1fr));

}



.o-grid--auto {

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

}



/**

 * Flex utilities

 */

.o-flex {

    display: flex;

}



.o-flex--col {

    flex-direction: column;

}



.o-flex--wrap {

    flex-wrap: wrap;

}



.o-flex--center {

    align-items: center;

    justify-content: center;

}



.o-flex--between {

    justify-content: space-between;

}



.o-flex--gap-2 {

    gap: var(--space-2);

}



.o-flex--gap-4 {

    gap: var(--space-4);

}



.o-flex--gap-6 {

    gap: var(--space-6);

}



.o-flex--gap-8 {

    gap: var(--space-8);

}





/* �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" �

   5. COMPONENTS - UI Components (BEM)

   �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" � */



/* � � � � � � � � � � � � � � � � � � � � � � � �  Glass Effect � � � � � � � � � � � � � � � � � � � � � � � �  */

.c-glass {

    background: rgba(255, 255, 255, 0.85);

    backdrop-filter: blur(16px) saturate(180%);

    -webkit-backdrop-filter: blur(16px) saturate(180%);

}



.c-glass--strong {

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(24px) saturate(200%);

    -webkit-backdrop-filter: blur(24px) saturate(200%);

}



/* � � � � � � � � � � � � � � � � � � � � � � � �  Header � � � � � � � � � � � � � � � � � � � � � � � �  */

.c-header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: var(--z-fixed);

    height: var(--header-height);

    transition: all var(--transition-normal) var(--ease-out);

}



.c-header__bg {

    position: absolute;

    inset: 0;

    opacity: 0;

    transition: opacity var(--transition-normal) var(--ease-out);

    border-bottom: 1px solid var(--color-border);

    z-index: -1;

}



.c-header--scrolled .c-header__bg {

    opacity: 1;

}



.c-header--scrolled {

    box-shadow: var(--shadow-md);

}



#header.c-header--scrolled {

    top: 0 !important;

    transition: top 0.3s ease, box-shadow 0.3s ease;

}



.c-header--hidden {

    transform: translateY(-100%);

}



.c-header__inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 100%;

    max-width: var(--container-max);

    margin-inline: auto;

    padding-inline: var(--space-4);

}



@media (min-width: 640px) {

    .c-header__inner {

        padding-inline: var(--space-6);

    }

}



@media (min-width: 1024px) {

    .c-header__inner {

        padding-inline: var(--space-8);

    }

}



/* � � � � � � � � � � � � � � � � � � � � � � � �  Logo � � � � � � � � � � � � � � � � � � � � � � � �  */

.c-logo {

    display: flex;

    align-items: center;

    gap: var(--space-3);

    position: relative;

    z-index: 10;

}



.c-logo__icon {

    width: 2.75rem;

    height: 2.75rem;

    background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-700));

    border-radius: var(--radius-xl);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-text-inverse);

    box-shadow: var(--shadow-md), var(--shadow-primary);

    transition: transform var(--transition-base) var(--ease-out-back),

        box-shadow var(--transition-base) var(--ease-out);

}



.c-logo:hover .c-logo__icon {

    transform: scale(1.05);

    box-shadow: var(--shadow-lg), var(--shadow-primary-lg);

}



.c-logo__text {

    display: flex;

    flex-direction: column;

}



.c-logo__brand {

    font-size: var(--font-size-xl);

    font-weight: var(--font-weight-extrabold);

    color: var(--color-primary-600);

    line-height: 1;

    letter-spacing: var(--letter-spacing-tight);

}



.c-logo__tagline {

    font-size: 0.625rem;

    font-weight: var(--font-weight-bold);

    letter-spacing: 0.25em;

    text-transform: uppercase;

    color: var(--color-secondary-500);

}



/* � � � � � � � � � � � � � � � � � � � � � � � �  Navigation � � � � � � � � � � � � � � � � � � � � � � � �  */

.c-nav {

    display: none;

    align-items: center;

    gap: var(--space-1);

}



@media (min-width: 1024px) {

    .c-nav {

        display: flex;

    }

}



.c-nav__link {

    padding: var(--space-2) var(--space-4);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-semibold);

    color: var(--color-text-secondary);

    border-radius: var(--radius-lg);

    transition: all var(--transition-fast) var(--ease-out);

    position: relative;

}



.c-nav__link::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 0;

    height: 2px;

    background-color: var(--color-primary-500);

    border-radius: var(--radius-full);

    transition: width var(--transition-normal) var(--ease-out-expo);

}



.c-nav__link:hover,

.c-nav__link--active {

    color: var(--color-primary-600);

    background-color: rgba(0, 0, 0, 0.03);

}



.c-nav__link:hover::after,

.c-nav__link--active::after {

    width: 60%;

}



/* � � � � � � � � � � � � � � � � � � � � � � � �  Mobile Menu � � � � � � � � � � � � � � � � � � � � � � � �  */

.c-mobile-menu {

    position: fixed;

    inset: 0;

    top: var(--header-height);

    background-color: var(--color-surface);

    z-index: var(--z-overlay);

    overflow-y: auto;

    transform: translateX(100%);

    opacity: 0;

    visibility: hidden;

    transition: all var(--transition-normal) var(--ease-out-expo);

}



.c-mobile-menu--open {

    transform: translateX(0);

    opacity: 1;

    visibility: visible;

}



.c-mobile-menu__nav {

    display: flex;

    flex-direction: column;

    padding: var(--space-5);

    gap: var(--space-2);

    max-width: var(--container-lg);

    margin-inline: auto;

}



.c-mobile-menu__link {

    display: flex;

    align-items: center;

    gap: var(--space-4);

    padding: var(--space-4);

    border-radius: var(--radius-xl);

    font-weight: var(--font-weight-semibold);

    color: var(--color-text-primary);

    transition: all var(--transition-fast) var(--ease-out);

}



.c-mobile-menu__link:hover {

    background-color: var(--color-primary-50);

    color: var(--color-primary-600);

}



.c-mobile-menu__icon {

    width: 2.5rem;

    height: 2.5rem;

    background-color: var(--color-primary-100);

    color: var(--color-primary-600);

    border-radius: var(--radius-lg);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background-color var(--transition-fast) var(--ease-out);

}



.c-mobile-menu__link:hover .c-mobile-menu__icon {

    background-color: var(--color-primary-200);

}



/* � � � � � � � � � � � � � � � � � � � � � � � �  Buttons � � � � � � � � � � � � � � � � � � � � � � � �  */

.c-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: var(--space-2);

    padding: var(--space-3) var(--space-6);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-bold);

    line-height: 1;

    border-radius: var(--radius-xl);

    transition: all var(--transition-base) var(--ease-out);

    cursor: pointer;

    white-space: nowrap;

    text-align: center;

    position: relative;

    overflow: hidden;

}



.c-btn--primary {

    background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));

    color: var(--color-text-inverse);

    box-shadow: var(--shadow-md), var(--shadow-primary);

}



.c-btn--primary:hover {

    background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-700));

    transform: translateY(-2px);

    box-shadow: var(--shadow-xl), var(--shadow-primary-lg);

}



.c-btn--primary:active {

    transform: translateY(0);

}



.c-btn--secondary {

    background: linear-gradient(135deg, var(--color-secondary-400), var(--color-secondary-500));

    color: var(--color-text-inverse);

    box-shadow: var(--shadow-md), var(--shadow-secondary);

}



.c-btn--secondary:hover {

    background: linear-gradient(135deg, var(--color-secondary-500), var(--color-secondary-600));

    transform: translateY(-2px);

    box-shadow: var(--shadow-xl);

}



.c-btn--outline {

    background-color: var(--color-surface);

    border: 2px solid var(--color-border-strong);

    color: var(--color-text-primary);

}



.c-btn--outline:hover {

    border-color: var(--color-primary-400);

    color: var(--color-primary-600);

    box-shadow: var(--shadow-md);

}



.c-btn--ghost {

    background-color: transparent;

    color: var(--color-text-secondary);

}



.c-btn--ghost:hover {

    background-color: rgba(0, 0, 0, 0.05);

    color: var(--color-primary-600);

}



.c-btn--lg {

    padding: var(--space-4) var(--space-8);

    font-size: var(--font-size-base);

}



.c-btn--sm {

    padding: var(--space-2) var(--space-4);

    font-size: var(--font-size-xs);

}



.c-btn--icon {

    width: 2.75rem;

    height: 2.75rem;

    padding: 0;

    border-radius: var(--radius-full);

}



.c-btn--rounded {

    border-radius: var(--radius-full);

}



.c-btn:disabled {

    opacity: 0.5;

    cursor: not-allowed;

    transform: none !important;

}



/* Button shine effect */

.c-btn--shine::after {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

    transition: left var(--transition-slow) var(--ease-out);

}



.c-btn--shine:hover::after {

    left: 100%;

}



/* � � � � � � � � � � � � � � � � � � � � � � � �  Cards � � � � � � � � � � � � � � � � � � � � � � � �  */

.c-card {

    background-color: var(--color-surface);

    border-radius: var(--radius-2xl);

    border: 1px solid var(--color-border);

    overflow: hidden;

    display: flex;

    flex-direction: column;

    height: 100%;

    transition: transform var(--transition-normal) var(--ease-out),

        box-shadow var(--transition-normal) var(--ease-out);

}



.c-card--hover:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-xl);

}



.c-card--glow:hover {

    box-shadow: var(--shadow-lg), var(--glow-primary);

}



.c-card__image {

    position: relative;

    overflow: hidden;

    background-color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 220px;

}



.c-card__image img {

    width: 100%;

    height: 240px;

    object-fit: contain;

    padding: 0.75rem;

    transition: transform var(--transition-slow) var(--ease-out);

}



.c-card:hover .c-card__image img {

    transform: scale(1.08);

}



.c-card__overlay {

    position: absolute;

    inset: 0;

    background-color: rgba(0, 0, 0, 0);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background-color var(--transition-normal) var(--ease-out);

}



.c-card:hover .c-card__overlay {

    background-color: rgba(0, 0, 0, 0.25);

}



.c-card__zoom {

    color: var(--color-text-inverse);

    font-size: 2rem;

    opacity: 0;

    transform: scale(0.8);

    transition: all var(--transition-normal) var(--ease-out-back);

}



.c-card:hover .c-card__zoom {

    opacity: 1;

    transform: scale(1);

}



.c-card__body {

    padding: var(--space-5);

    display: flex;

    flex-direction: column;

    flex: 1;

}



.c-card__title {

    font-size: var(--font-size-lg);

    font-weight: var(--font-weight-bold);

    margin-bottom: var(--space-1);

    line-height: var(--line-height-snug);

    color: var(--color-text-primary);

}



.c-card__subtitle {

    font-size: var(--font-size-xs);

    color: var(--color-text-muted);

    text-transform: uppercase;

    letter-spacing: var(--letter-spacing-wider);

}



.c-card__footer {

    padding-top: var(--space-4);

    margin-top: auto;

    border-top: 1px solid var(--color-border);

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.c-card__price {

    font-size: var(--font-size-lg);

    font-weight: var(--font-weight-extrabold);

    color: var(--color-primary-600);

    margin-top: auto;

}



/*                          Pills / Chips                          */

.c-pill {

    display: inline-flex;

    align-items: center;

    gap: var(--space-2);

    padding: var(--space-2) var(--space-5);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-bold);

    border-radius: var(--radius-full);

    background-color: var(--color-surface);

    border: 1px solid var(--color-border-strong);

    color: var(--color-text-secondary);

    cursor: pointer;

    transition: all var(--transition-fast) var(--ease-out);

}



.c-pill:hover:not(.c-pill--active) {

    transform: translateY(-2px);

    box-shadow: var(--shadow-md);

    border-color: var(--color-primary-300);

}



.c-pill--active {

    background-color: var(--color-primary-500);

    border-color: var(--color-primary-500);

    color: var(--color-text-inverse);

    box-shadow: var(--shadow-primary);

}



/* � � � � � � � � � � � � � � � � � � � � � � � �  Inputs � � � � � � � � � � � � � � � � � � � � � � � �  */

.c-input {

    width: 100%;

    padding: var(--space-4);

    font-size: var(--font-size-base);

    background-color: var(--color-surface);

    border: 1px solid var(--color-border-strong);

    border-radius: var(--radius-xl);

    transition: all var(--transition-fast) var(--ease-out);

}



.c-input:hover {

    border-color: var(--color-gray-400);

}



.c-input:focus {

    border-color: var(--color-primary-500);

    box-shadow: 0 0 0 3px rgba(46, 92, 72, 0.1);

    outline: none;

}



.c-input::placeholder {

    color: var(--color-text-disabled);

}



.c-input--search {

    padding-left: var(--space-12);

}



.c-input-group {

    position: relative;

}



.c-input-group__icon {

    position: absolute;

    left: var(--space-4);

    top: 50%;

    transform: translateY(-50%);

    color: var(--color-text-muted);

    pointer-events: none;

}



/* � � � � � � � � � � � � � � � � � � � � � � � �  Badge � � � � � � � � � � � � � � � � � � � � � � � �  */

.c-badge {

    display: inline-flex;

    align-items: center;

    padding: var(--space-1) var(--space-3);

    font-size: var(--font-size-xs);

    font-weight: var(--font-weight-bold);

    border-radius: var(--radius-full);

    text-transform: uppercase;

    letter-spacing: var(--letter-spacing-wide);

}



.c-badge--primary {

    background-color: var(--color-primary-100);

    color: var(--color-primary-700);

}



.c-badge--secondary {

    background-color: var(--color-secondary-100);

    color: var(--color-secondary-700);

}



.c-badge--success {

    background-color: var(--color-success-light);

    color: #166534;

}



/* � � � � � � � � � � � � � � � � � � � � � � � �  Testimonial Card � � � � � � � � � � � � � � � � � � � � � � � �  */

.c-testimonial {

    flex-shrink: 0;

    width: 85vw;

    max-width: 400px;

    scroll-snap-align: center;

    background-color: var(--color-surface);

    padding: var(--space-8);

    border-radius: var(--radius-2xl);

    border: 1px solid var(--color-border);

    box-shadow: var(--shadow-sm);

    transition: box-shadow var(--transition-normal) var(--ease-out);

}



.c-testimonial:hover {

    box-shadow: var(--shadow-lg);

}



.c-testimonial__stars {

    display: flex;

    gap: var(--space-1);

    color: var(--color-secondary-400);

    margin-bottom: var(--space-4);

}



.c-testimonial__text {

    font-style: italic;

    line-height: var(--line-height-relaxed);

    margin-bottom: var(--space-6);

    color: var(--color-text-secondary);

}



.c-testimonial__author {

    display: flex;

    align-items: center;

    gap: var(--space-3);

}



.c-testimonial__avatar {

    width: 2.5rem;

    height: 2.5rem;

    border-radius: var(--radius-full);

    background-color: var(--color-primary-100);

    color: var(--color-primary-600);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-bold);

}



.c-testimonial__name {

    font-weight: var(--font-weight-bold);

    font-size: var(--font-size-sm);

    color: var(--color-text-primary);

}



.c-testimonial__location {

    font-size: var(--font-size-xs);

    color: var(--color-text-muted);

}



/* � � � � � � � � � � � � � � � � � � � � � � � �  Lightbox � � � � � � � � � � � � � � � � � � � � � � � �  */

.c-lightbox {

    position: fixed;

    inset: 0;

    z-index: var(--z-modal);

    background-color: rgba(0, 0, 0, 0.95);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transition: all var(--transition-normal) var(--ease-out);

}



.c-lightbox--active {

    opacity: 1;

    visibility: visible;

}



.c-lightbox__image {

    max-width: 90vw;

    max-height: 85vh;

    object-fit: contain;

    border-radius: var(--radius-lg);

    transform: scale(0.9);

    transition: transform var(--transition-normal) var(--ease-out-back);

}



.c-lightbox--active .c-lightbox__image {

    transform: scale(1);

}



.c-lightbox__close {

    position: absolute;

    top: var(--space-4);

    right: var(--space-4);

    color: rgba(255, 255, 255, 0.7);

    padding: var(--space-3);

    border-radius: var(--radius-full);

    transition: all var(--transition-fast) var(--ease-out);

}



.c-lightbox__close:hover {

    color: white;

    background-color: rgba(255, 255, 255, 0.1);

}



@media (min-width: 640px) {

    .c-lightbox__close {

        top: var(--space-6);

        right: var(--space-6);

    }

}



/* � � � � � � � � � � � � � � � � � � � � � � � �  WhatsApp Button � � � � � � � � � � � � � � � � � � � � � � � �  */

.c-whatsapp {

    position: fixed;

    bottom: var(--space-6);

    right: var(--space-6);

    z-index: var(--z-fixed);

    width: 3.5rem;

    height: 3.5rem;

    background-color: var(--color-whatsapp);

    color: var(--color-text-inverse);

    border-radius: var(--radius-full);

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: var(--shadow-lg), 0 0 20px rgba(37, 211, 102, 0.3);

    transition: all var(--transition-normal) var(--ease-out);

}



.c-whatsapp:hover {

    background-color: var(--color-whatsapp-hover);

    transform: scale(1.1) translateY(-4px);

    box-shadow: var(--shadow-2xl), 0 0 30px rgba(37, 211, 102, 0.4);

}



.c-whatsapp__tooltip {

    position: absolute;

    right: 100%;

    margin-right: var(--space-3);

    background-color: var(--color-surface);

    color: var(--color-text-primary);

    padding: var(--space-2-5) var(--space-4);

    border-radius: var(--radius-xl);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-bold);

    white-space: nowrap;

    box-shadow: var(--shadow-lg);

    opacity: 0;

    visibility: hidden;

    transform: translateX(10px);

    transition: all var(--transition-fast) var(--ease-out);

    pointer-events: none;

}



.c-whatsapp:hover .c-whatsapp__tooltip {

    opacity: 1;

    visibility: visible;

    transform: translateX(0);

}



/* � � � � � � � � � � � � � � � � � � � � � � � �  Toast � � � � � � � � � � � � � � � � � � � � � � � �  */

.c-toast {

    position: fixed;

    bottom: 100px;

    left: 50%;

    transform: translateX(-50%) translateY(20px);

    background-color: var(--color-gray-900);

    color: var(--color-text-inverse);

    padding: var(--space-3-5) var(--space-6);

    border-radius: var(--radius-xl);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-semibold);

    box-shadow: var(--shadow-2xl);

    z-index: var(--z-toast);

    opacity: 0;

    visibility: hidden;

    transition: all var(--transition-normal) var(--ease-out-expo);

    display: flex;

    align-items: center;

    gap: var(--space-3);

}



.c-toast--show {

    opacity: 1;

    visibility: visible;

    transform: translateX(-50%) translateY(0);

}



.c-toast--success {

    background-color: var(--color-success);

}



.c-toast--error {

    background-color: var(--color-error);

}



/* � � � � � � � � � � � � � � � � � � � � � � � �  Skeleton Loader � � � � � � � � � � � � � � � � � � � � � � � �  */

.c-skeleton {

    background: linear-gradient(90deg,

            var(--color-gray-100) 0%,

            var(--color-gray-50) 50%,

            var(--color-gray-100) 100%);

    background-size: 200% 100%;

    animation: skeleton-shimmer 1.5s infinite;

    border-radius: var(--radius-md);

}



/* � � � � � � � � � � � � � � � � � � � � � � � �  Scroll Progress � � � � � � � � � � � � � � � � � � � � � � � �  */

.c-scroll-progress {

    position: fixed;

    top: 0;

    left: 0;

    height: 3px;

    background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-400), var(--color-secondary-400));

    z-index: var(--z-max);

    transform-origin: left;

    transform: scaleX(var(--scroll-progress, 0));

    will-change: transform;

}



/* ═══════════════════════════════════════════════════════════════════════════════

   BLOQUE B — COMPONENTES ÚNICOS DE SECCIÓN 11 (rescatar y mover a sección 5)

   

   Estos NO tienen equivalente en las secciones 1-10 de input.css.

   Agregar al final de la sección 5 (COMPONENTS), ANTES de la sección 6.

   ═══════════════════════════════════════════════════════════════════════════════ */



/* ──── Header Category Bar ──── */

#header-cat-list button {

    flex-shrink: 0;

    padding: 0.5rem 1.1rem;

    border-radius: 9999px;

    font-size: 0.8125rem;

    font-weight: 600;

    color: rgba(255, 255, 255, 0.45);

    background: transparent;

    border: 1px solid transparent;

    transition: all 0.2s;

    cursor: pointer;

    white-space: nowrap;

    letter-spacing: 0.02em;

}



#header-cat-list button:hover {

    color: rgba(255, 255, 255, 0.8);

    background: rgba(255, 255, 255, 0.06);

}



#header-cat-list button.active {

    color: #fff;

    background: rgba(255, 255, 255, 0.1);

    border-color: rgba(255, 255, 255, 0.15);

}



.header-cat-skeleton {

    flex-shrink: 0;

    width: 5.5rem;

    height: 1.9rem;

    border-radius: 9999px;

    background: linear-gradient(90deg,

            rgba(255, 255, 255, 0.06) 0%,

            rgba(255, 255, 255, 0.14) 50%,

            rgba(255, 255, 255, 0.06) 100%);

    background-size: 200% 100%;

    animation: skeleton-shimmer 1.4s infinite;

}



/* ──── Chip (botón de consultar en cards) ──── */

.c-chip {

    display: inline-flex;

    align-items: center;

    gap: 0.25rem;

    padding: 0.3rem 0.7rem;

    border-radius: 999px;

    font-size: 0.68rem;

    font-weight: 600;

    background: #faf6f1;

    color: #7a4e2d;

    border: 1px solid #e0ccab;

    transition: all 0.2s;

    white-space: nowrap;

    flex-shrink: 0;

    cursor: pointer;

}



.c-chip:hover {

    background: #b07d3e;

    color: #fff;

    border-color: #b07d3e;

}



/* ──── Nav Link con indicador activo ──── */

.nav-link {

    position: relative;

}



.nav-link::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%) scaleX(0);

    width: 16px;

    height: 2px;

    background: currentColor;

    border-radius: 999px;

    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);

}



.nav-link.active {

    color: #b07d3e !important;

}



.nav-link.active::after {

    transform: translateX(-50%) scaleX(1);

}



/* ──── Cart Badge ──── */

.cart-badge {

    position: absolute;

    top: 2px;

    right: 2px;

    background: #b07d3e;

    color: #fff;

    font-size: 10px;

    font-weight: 700;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    display: none;

    align-items: center;

    justify-content: center;

    line-height: 1;

    transition: transform 0.2s ease;

}



/* ──── Cart Drawer & Backdrop ──── */

.cart-backdrop {

    opacity: 0;

    transition: opacity 0.3s ease;

}



.cart-backdrop.hidden {

    display: none;

}



.cart-drawer {

    transform: translateX(100%);

    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);

}



.cart-drawer--open {

    transform: translateX(0);

}



/* ──── Premium Gradient Text ──── */

.text-gradient {

    background: linear-gradient(135deg, #daa520 0%, #f0c02d 50%, #daa520 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



/* ──── Grain Texture Overlay ──── */

.grain::before {

    content: '';

    position: absolute;

    inset: 0;

    opacity: 0.03;

    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    pointer-events: none;

    z-index: 1;

}



/* ──── Category Pills Fade Edges ──── */

.pills-container {

    mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);

    -webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);

}



@media (min-width: 1024px) {

    .pills-container {

        mask-image: none;

        -webkit-mask-image: none;

    }

}



/* ──── Image Zoom on Group Hover ──── */

.img-zoom {

    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);

}



.group:hover .img-zoom {

    transform: scale(1.06);

}



/* ──── Add to Cart Button Shine Effect ──── */

.btn-add-cart {

    position: relative;

    overflow: hidden;

}



.btn-add-cart::after {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

    transform: translateX(-100%);

    transition: transform 0.6s;

}



.btn-add-cart:hover::after {

    transform: translateX(100%);

}



/* ──── Hero Slider ──── */

.hero-slide {

    opacity: 0;

    z-index: 0;

    transition: opacity 0.7s ease;

}



.hero-slide--active {

    opacity: 1;

    z-index: 10;

}



/* DESPUÉS */
.hero {
    height: 100vh;
    height: 100dvh;
    min-height: 460px;
    margin-top: 0;
    padding-top: 0;
}



.hero-slide img {

    transition: transform 8s ease-out;

}



.hero-image {

    object-position: center 10%;

}



.hero-content-panel {

    background: rgba(8, 8, 8, 0.62);

    border: 1px solid rgba(255, 255, 255, 0.22);

    border-radius: 1rem;

    backdrop-filter: blur(8px);

    padding: 1.1rem 1.2rem;

    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.42);

}



.hero-title-shadow {

    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.85);

}



.hero-copy-shadow {

    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);

}



.hero-slide.opacity-100 img,

.hero-slide.z-10 img,

.hero-slide--active img {

    transform: scale(1);

}



/* ──── Products Sidebar Layout ──── */

.products-layout {

    display: flex;

    gap: 2rem;

}



.products-sidebar {

    width: 220px;

    flex-shrink: 0;

}



.sidebar-sticky {

    position: sticky;

    top: 100px;

}



.products-content {

    flex: 1;

    min-width: 0;

}



/* Sidebar category items */

.sidebar-cat {

    display: flex;

    align-items: center;

    gap: 0.625rem;

    padding: 0.625rem 0.875rem;

    border-radius: 0.75rem;

    font-size: 0.8125rem;

    font-weight: 500;

    color: var(--dark-500, #64748b);

    transition: all 0.2s;

    cursor: pointer;

    border: none;

    background: transparent;

    width: 100%;

    text-align: left;

}



.sidebar-cat:hover {

    background: var(--dark-50, #f8fafc);

    color: var(--dark-900, #0f172a);

}



.sidebar-cat--active {

    background: var(--dark-950, #0f172a);

    color: #fff;

    font-weight: 600;

}



.sidebar-cat--active:hover {

    background: var(--dark-900, #1e293b);

    color: #fff;

}



.sidebar-cat .material-symbols-outlined {

    font-size: 1.125rem;

}



/* On mobile, hide sidebar, show pills */

@media (max-width: 1023px) {

    .products-layout {

        display: block;

    }

}



/* ──── Scroll Progress Bar ──── */

.scroll-progress {

    transform: scaleX(var(--scroll-progress, 0));

}



/* ═══════════════════════════════════════════════════════════════════════════════

   BLOQUE A — UTILITIES QUE REEMPLAZAN TAILWIND

   

   Estas clases sustituyen TODAS las utilities de Tailwind usadas en index.html.

   Colores mapeados desde tailwind.config.js (paleta dark/accent/brand).

   

   INSTRUCCIONES: 

   Reemplazar toda la sección 6 de input.css con este contenido.

   ═══════════════════════════════════════════════════════════════════════════════ */





/* ──────────────────────────── Display ──────────────────────────── */

.hidden {

    display: none

}



.block {

    display: block

}



.inline {

    display: inline

}



.inline-block {

    display: inline-block

}



.flex {

    display: flex

}



.inline-flex {

    display: inline-flex

}



.grid {

    display: grid

}



/* ──────────────────────────── Position ──────────────────────────── */

.fixed {

    position: fixed

}



.absolute {

    position: absolute

}



.relative {

    position: relative

}



.sticky {

    position: sticky

}



.inset-0 {

    inset: 0

}



.top-0 {

    top: 0

}



.top-4 {

    top: 1rem

}



.top-8 {

    top: 2rem

}



.top-16 {

    top: 4rem

}



.bottom-0 {

    bottom: 0

}



.bottom-6 {

    bottom: 1.5rem

}



.bottom-24 {

    bottom: 6rem

}



.left-0 {

    left: 0

}



.left-4 {

    left: 1rem

}



.left-1\/2 {

    left: 50%

}



.right-0 {

    right: 0

}



.right-4 {

    right: 1rem

}



.right-6 {

    right: 1.5rem

}



.right-full {

    right: 100%

}



.top-1\/2 {

    top: 50%

}



/* Z-index */

.z-10 {

    z-index: 10

}



.z-40 {

    z-index: 40

}



.z-50 {

    z-index: 50

}



.z-\[51\] {

    z-index: 51

}



.z-\[60\] {

    z-index: 60

}



.z-\[61\] {

    z-index: 61

}



.z-\[100\] {

    z-index: 100

}



.z-\[9998\] {

    z-index: 9998

}



.z-\[9999\] {

    z-index: 9999

}



.z-20 {

    z-index: 20

}



/* ──────────────────────────── Flexbox ──────────────────────────── */

.flex-col {

    flex-direction: column

}



.flex-row {

    flex-direction: row

}



.flex-wrap {

    flex-wrap: wrap

}



.flex-1 {

    flex: 1 1 0%

}



.flex-shrink-0 {

    flex-shrink: 0

}



.items-center {

    align-items: center

}



.items-start {

    align-items: flex-start

}



.items-end {

    align-items: flex-end

}



.justify-center {

    justify-content: center

}



.justify-between {

    justify-content: space-between

}



.self-end {

    align-self: flex-end

}



/* ──────────────────────────── 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))

}



.col-span-2 {

    grid-column: span 2 / span 2

}



/* ──────────────────────────── Gap ──────────────────────────── */

.gap-0\.5 {

    gap: 0.125rem

}



.gap-1 {

    gap: 0.25rem

}



.gap-1\.5 {

    gap: 0.375rem

}



.gap-2 {

    gap: 0.5rem

}



.gap-3 {

    gap: 0.75rem

}



.gap-4 {

    gap: 1rem

}



.gap-5 {

    gap: 1.25rem

}



.gap-6 {

    gap: 1.5rem

}



.gap-12 {

    gap: 3rem

}



.gap-16 {

    gap: 4rem

}



/* ──────────────────────────── Space Between ──────────────────────────── */

.space-y-3>*+* {

    margin-top: 0.75rem

}



.space-y-4>*+* {

    margin-top: 1rem

}



.space-y-5>*+* {

    margin-top: 1.25rem

}



.space-y-8>*+* {

    margin-top: 2rem

}



/* ──────────────────────────── Padding ──────────────────────────── */

.p-1\.5 {

    padding: 0.375rem

}



.p-2 {

    padding: 0.5rem

}



.p-2\.5 {

    padding: 0.625rem

}



.p-3 {

    padding: 0.75rem

}



.p-3\.5 {

    padding: 0.875rem

}



.p-4 {

    padding: 1rem

}



.p-6 {

    padding: 1.5rem

}



.p-8 {

    padding: 2rem

}



.px-2\.5 {

    padding-left: 0.625rem;

    padding-right: 0.625rem

}



.px-3 {

    padding-left: 0.75rem;

    padding-right: 0.75rem

}



.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-7 {

    padding-left: 1.75rem;

    padding-right: 1.75rem

}



.px-8 {

    padding-left: 2rem;

    padding-right: 2rem

}



.py-0\.5 {

    padding-top: 0.125rem;

    padding-bottom: 0.125rem

}



.py-1\.5 {

    padding-top: 0.375rem;

    padding-bottom: 0.375rem

}



.py-2 {

    padding-top: 0.5rem;

    padding-bottom: 0.5rem

}



.py-2\.5 {

    padding-top: 0.625rem;

    padding-bottom: 0.625rem

}



.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-12 {

    padding-top: 3rem;

    padding-bottom: 3rem

}



.py-20 {

    padding-top: 5rem;

    padding-bottom: 5rem

}



.py-24 {

    padding-top: 6rem;

    padding-bottom: 6rem

}



.pt-6 {

    padding-top: 1.5rem

}



.pt-8 {

    padding-top: 2rem

}



.pt-16 {

    padding-top: 4rem

}



.pt-24 {

    padding-top: 6rem

}



.pb-3 {

    padding-bottom: 0.75rem

}



.pb-4 {

    padding-bottom: 1rem

}



.pb-8 {

    padding-bottom: 2rem

}



.pb-20 {

    padding-bottom: 5rem

}



.pl-5 {

    padding-left: 1.25rem

}



.pl-11 {

    padding-left: 2.75rem

}



.pl-12 {

    padding-left: 3rem

}



.pr-12 {

    padding-right: 3rem

}



/* ──────────────────────────── Margin ──────────────────────────── */

.mx-auto {

    margin-left: auto;

    margin-right: auto

}



.mx-1\.5 {

    margin-left: 0.375rem;

    margin-right: 0.375rem

}



.-mx-5 {

    margin-left: -1.25rem;

    margin-right: -1.25rem

}



.mx-10 {

    margin-left: 2.5rem;

    margin-right: 2.5rem

}



.ml-1 {

    margin-left: 0.25rem

}



.mr-1 {

    margin-right: 0.25rem

}



.mr-3 {

    margin-right: 0.75rem

}



.mt-0\.5 {

    margin-top: 0.125rem

}



.mt-1 {

    margin-top: 0.25rem

}



.mt-3 {

    margin-top: 0.75rem

}



.mt-5 {

    margin-top: 1.25rem

}



.mt-8 {

    margin-top: 2rem

}



.mt-14 {

    margin-top: 3.5rem

}



.mb-2 {

    margin-bottom: 0.5rem

}



.mb-3 {

    margin-bottom: 0.75rem

}



.mb-4 {

    margin-bottom: 1rem

}



.mb-5 {

    margin-bottom: 1.25rem

}



.mb-6 {

    margin-bottom: 1.5rem

}



.mb-10 {

    margin-bottom: 2.5rem

}



.mb-12 {

    margin-bottom: 3rem

}



.mb-14 {

    margin-bottom: 3.5rem

}



.my-4 {

    margin-top: 1rem;

    margin-bottom: 1rem

}



/* ──────────────────────────── Width ──────────────────────────── */

.w-full {

    width: 100%

}



.w-px {

    width: 1px

}



.w-1\.5 {

    width: 0.375rem

}



.w-3\.5 {

    width: 0.875rem

}



.w-4 {

    width: 1rem

}



.w-5 {

    width: 1.25rem

}



.w-6 {

    width: 1.5rem

}



.w-11 {

    width: 2.75rem

}



.w-14 {

    width: 3.5rem

}



.w-20 {

    width: 5rem

}



/* ──────────────────────────── Height ──────────────────────────── */

.h-full {

    height: 100%

}



.h-px {

    height: 1px

}



.h-1\.5 {

    height: 0.375rem

}



.h-3 {

    height: 0.75rem

}



.h-3\.5 {

    height: 0.875rem

}



.h-5 {

    height: 1.25rem

}



.h-6 {

    height: 1.5rem

}



.h-8 {

    height: 2rem

}



.h-11 {

    height: 2.75rem

}



.h-14 {

    height: 3.5rem

}



.h-20 {

    height: 5rem

}



/* Arbitrary heights */

.h-\[2px\] {

    height: 2px

}



.h-\[76px\] {

    height: 76px

}



/* ──────────────────────────── Min/Max Sizing ──────────────────────────── */

.min-h-screen {

    min-height: 100vh

}



.min-w-0 {

    min-width: 0

}



.max-w-md {

    max-width: 28rem

}



.max-w-lg {

    max-width: 32rem

}



.max-w-xl {

    max-width: 36rem

}



.max-w-2xl {

    max-width: 42rem

}



.max-w-3xl {

    max-width: 48rem

}



.max-w-4xl {

    max-width: 56rem

}



.max-w-7xl {

    max-width: 80rem

}



.max-h-\[60vh\] {

    max-height: 60vh

}



.max-h-\[85vh\] {

    max-height: 85vh

}



/* ──────────────────────────── Typography ──────────────────────────── */

/* Font size */

.text-xs {

    font-size: 0.75rem;

    line-height: 1rem

}



.text-sm {

    font-size: 0.875rem;

    line-height: 1.25rem

}



.text-base {

    font-size: 1rem;

    line-height: 1.5rem

}



.text-lg {

    font-size: 1.125rem;

    line-height: 1.75rem

}



.text-xl {

    font-size: 1.25rem;

    line-height: 1.75rem

}



.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

}



/* Arbitrary font sizes */

.text-\[10px\] {

    font-size: 10px

}



.text-\[11px\] {

    font-size: 11px

}



.text-\[11\.5px\] {

    font-size: 11.5px

}



.text-\[12px\] {

    font-size: 12px

}



.text-\[13px\] {

    font-size: 13px

}



.text-\[22px\] {

    font-size: 22px

}



.text-\[26px\] {

    font-size: 26px

}



/* Font weight */

.font-medium {

    font-weight: 500

}



.font-semibold {

    font-weight: 600

}



.font-bold {

    font-weight: 700

}



.font-black {

    font-weight: 900

}



/* Font family */

.font-sans {

    font-family: 'Inter', system-ui, sans-serif

}



.font-display {

    font-family: 'Playfair Display', Georgia, serif

}



/* Text alignment */

.text-center {

    text-align: center

}



/* Text transform & style */

.uppercase {

    text-transform: uppercase

}



.italic {

    font-style: italic

}



.antialiased {

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale

}



.truncate {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap

}



.whitespace-nowrap {

    white-space: nowrap

}



/* Line height */

.leading-none {

    line-height: 1

}



.leading-tight {

    line-height: 1.25

}



.leading-relaxed {

    line-height: 1.625

}



/* Letter spacing */

.tracking-tight {

    letter-spacing: -0.025em

}



.tracking-wide {

    letter-spacing: 0.025em

}



.tracking-wider {

    letter-spacing: 0.05em

}



.tracking-\[0\.06em\] {

    letter-spacing: 0.06em

}



.tracking-\[0\.14em\] {

    letter-spacing: 0.14em

}



.tracking-\[0\.15em\] {

    letter-spacing: 0.15em

}



.tracking-\[0\.2em\] {

    letter-spacing: 0.2em

}



.tracking-\[0\.3em\] {

    letter-spacing: 0.3em

}



/* ──────────────────────────── Background Colors ──────────────────────────── */

/* Solids */

.bg-white {

    background-color: #fff

}



.bg-transparent {

    background-color: transparent

}



.bg-dark-50 {

    background-color: #f7f5f2

}



.bg-dark-100 {

    background-color: #ece7df

}



.bg-dark-900 {

    background-color: #312720

}



.bg-dark-950 {

    background-color: #1a1410

}



.bg-accent-500 {

    background-color: #daa520

}



.bg-brand-100 {

    background-color: #f0e6d6

}



.bg-amber-500 {

    background-color: #f59e0b

}



.bg-green-400 {

    background-color: #4ade80

}



.bg-red-400 {

    background-color: #f87171

}



.bg-\[\#25D366\] {

    background-color: #25D366

}



/* With opacity */

.bg-dark-50\/50 {

    background-color: rgba(247, 245, 242, 0.5)

}



.bg-dark-950\/5 {

    background-color: rgba(26, 20, 16, 0.05)

}



.bg-dark-900\/10 {

    background-color: rgba(49, 39, 32, 0.1)

}



.bg-accent-500\/10 {

    background-color: rgba(218, 165, 32, 0.1)

}



.bg-black\/50 {

    background-color: rgba(0, 0, 0, 0.5)

}



.bg-black\/95 {

    background-color: rgba(0, 0, 0, 0.95)

}



.bg-white\/5 {

    background-color: rgba(255, 255, 255, 0.05)

}



.bg-white\/\[0\.04\] {

    background-color: rgba(255, 255, 255, 0.04)

}



.bg-white\/\[0\.05\] {

    background-color: rgba(255, 255, 255, 0.05)

}



.bg-white\/\[0\.06\] {

    background-color: rgba(255, 255, 255, 0.06)

}



.bg-white\/10 {

    background-color: rgba(255, 255, 255, 0.1)

}



.bg-white\/40 {

    background-color: rgba(255, 255, 255, 0.4)

}



/* Gradients */

.bg-gradient-to-r {

    background-image: linear-gradient(to right, var(--tw-gradient-stops))

}



.from-brand-500 {

    --tw-gradient-from: #b07d3e;

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(176, 125, 62, 0))

}



.via-accent-500 {

    --tw-gradient-stops: var(--tw-gradient-from), #daa520, var(--tw-gradient-to, rgba(218, 165, 32, 0))

}



.to-brand-400 {

    --tw-gradient-to: #bf9355

}



.from-transparent {

    --tw-gradient-from: transparent;

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent)

}



.via-accent-500\/30 {

    --tw-gradient-stops: var(--tw-gradient-from), rgba(218, 165, 32, 0.3), var(--tw-gradient-to, rgba(218, 165, 32, 0))

}



.to-transparent {

    --tw-gradient-to: transparent

}



/* ──────────────────────────── Text Colors ──────────────────────────── */

.text-white {

    color: #fff

}



.text-dark-200 {

    color: #d9cfbf

}



.text-dark-300 {

    color: #c3b299

}



.text-dark-400 {

    color: #ab9272

}



.text-dark-500 {

    color: #997e5e

}



.text-dark-600 {

    color: #836a4f

}



.text-dark-700 {

    color: #6b5442

}



.text-dark-800 {

    color: #594639

}



.text-dark-900 {

    color: #312720

}



.text-dark-950 {

    color: #1a1410

}



.text-accent-400 {

    color: #f0c02d

}



.text-accent-500 {

    color: #daa520

}



.text-brand-600 {

    color: #966434

}



.text-brand-700 {

    color: #7a4e2d

}



.text-green-400 {

    color: #4ade80

}



/* With opacity */

.text-white\/45 {

    color: rgba(255, 255, 255, 0.45)

}



.text-white\/50 {

    color: rgba(255, 255, 255, 0.5)

}



.text-white\/60 {

    color: rgba(255, 255, 255, 0.6)

}



.text-white\/70 {

    color: rgba(255, 255, 255, 0.7)

}



.text-white\/80 {

    color: rgba(255, 255, 255, 0.8)

}



/* ──────────────────────────── Borders ──────────────────────────── */

.border {

    border-width: 1px;

    border-style: solid

}



.border-0 {

    border-width: 0

}



.border-b {

    border-bottom-width: 1px;

    border-bottom-style: solid

}



.border-t {

    border-top-width: 1px;

    border-top-style: solid

}



.border-dark-100 {

    border-color: #ece7df

}



.border-dark-200 {

    border-color: #d9cfbf

}



.border-dark-900 {

    border-color: #312720

}



.border-dark-900\/10 {

    border-color: rgba(49, 39, 32, 0.1)

}



.border-white\/10 {

    border-color: rgba(255, 255, 255, 0.1)

}



.border-white\/\[0\.06\] {

    border-color: rgba(255, 255, 255, 0.06)

}



.border-accent-500\/15 {

    border-color: rgba(218, 165, 32, 0.15)

}



/* ──────────────────────────── Border Radius ──────────────────────────── */

.rounded {

    border-radius: 0.25rem

}



.rounded-lg {

    border-radius: 0.5rem

}



.rounded-xl {

    border-radius: 0.75rem

}



.rounded-2xl {

    border-radius: 1rem

}



.rounded-3xl {

    border-radius: 1.5rem

}



.rounded-full {

    border-radius: 9999px

}



/* ──────────────────────────── Shadows ──────────────────────────── */

.shadow-sm {

    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)

}



.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-xl {

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)

}



.shadow-2xl {

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25)

}



.shadow-green-500\/25 {

    box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.25)

}



/* ──────────────────────────── Opacity ──────────────────────────── */

.opacity-0 {

    opacity: 0

}



.opacity-50 {

    opacity: 0.5

}



.opacity-100 {

    opacity: 1

}



/* ──────────────────────────── Overflow ──────────────────────────── */

.overflow-hidden {

    overflow: hidden

}



.overflow-x-auto {

    overflow-x: auto

}



.overflow-y-auto {

    overflow-y: auto

}



/* ──────────────────────────── Transforms ──────────────────────────── */





.translate-y-6 {

    transform: translateY(1.5rem)

}



.-translate-y-6 {

    transform: translateY(-1.5rem)

}



.-translate-x-1\/2 {

    transform: translateX(-50%)

}



.-translate-y-1\/2 {

    transform: translateY(-50%)

}



.scale-90 {

    transform: scale(0.9)

}



.scale-95 {

    transform: scale(0.95)

}



.scale-105 {

    transform: scale(1.05)

}



/* ──────────────────────────── Transitions ──────────────────────────── */

.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, text-decoration-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

}



.duration-200 {

    transition-duration: 200ms

}



.duration-300 {

    transition-duration: 300ms

}



.duration-500 {

    transition-duration: 500ms

}



/* ──────────────────────────── Misc Utilities ──────────────────────────── */

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border-width: 0;

}



.invisible {

    visibility: hidden

}



.visible {

    visibility: visible

}



.cursor-pointer {

    cursor: pointer

}



.pointer-events-none {

    pointer-events: none

}



.align-middle {

    vertical-align: middle

}



.origin-left {

    transform-origin: left

}



.object-cover {

    object-fit: cover

}



.object-contain {

    object-fit: contain

}



.aspect-square {

    aspect-ratio: 1 / 1

}



.snap-x {

    scroll-snap-type: x mandatory

}



.snap-mandatory {

    scroll-snap-type: x mandatory

}



.backdrop-blur-sm {

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px)

}



/* No scrollbar (reused from section 11) */

.no-scrollbar::-webkit-scrollbar {

    display: none

}



.no-scrollbar {

    -ms-overflow-style: none;

    scrollbar-width: none

}





.pt-\[76px\] {

    padding-top: 76px

}



.pt-\[112px\] {

    padding-top: 112px

}



.pt-\[116px\] {

    padding-top: 116px

}



/* ═══════════════════════════════════════════════════════════════════════════════

   HOVER / FOCUS / GROUP / PLACEHOLDER STATES

   ═══════════════════════════════════════════════════════════════════════════════ */



/* Hover: backgrounds */

.hover\:bg-dark-50:hover {

    background-color: #f7f5f2

}



.hover\:bg-dark-100:hover {

    background-color: #ece7df

}



.hover\:bg-dark-800:hover {

    background-color: #594639

}



.hover\:bg-dark-900:hover {

    background-color: #312720

}



.hover\:bg-accent-600:hover {

    background-color: #b8801a

}



.hover\:bg-white\/10:hover {

    background-color: rgba(255, 255, 255, 0.1)

}



.hover\:bg-white\/\[0\.05\]:hover {

    background-color: rgba(255, 255, 255, 0.05)

}



.hover\:bg-white\/\[0\.06\]:hover {

    background-color: rgba(255, 255, 255, 0.06)

}



.hover\:bg-\[\#20bd5a\]:hover {

    background-color: #20bd5a

}



.hover\:bg-\[\#1877F2\]:hover {

    background-color: #1877F2

}



/* Hover: text */

.hover\:text-white:hover {

    color: #fff

}



.hover\:text-accent-400:hover {

    color: #f0c02d

}



.hover\:text-dark-600:hover {

    color: #836a4f

}



.hover\:text-dark-900:hover {

    color: #312720

}



.hover\:text-green-400:hover {

    color: #4ade80

}



/* Hover: transforms */

.hover\:-translate-y-0\.5:hover {

    transform: translateY(-0.125rem)

}



.hover\:-translate-y-1:hover {

    transform: translateY(-0.25rem)

}



.hover\:scale-105:hover {

    transform: scale(1.05)

}



.hover\:scale-110:hover {

    transform: scale(1.1)

}



/* Hover: misc */

.hover\:shadow-sm:hover {

    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)

}



.hover\:shadow-lg:hover {

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)

}



.hover\:shadow-xl:hover {

    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)

}



.hover\:border-dark-900:hover {

    border-color: #312720

}



.hover\:underline:hover {

    text-decoration-line: underline

}



/* Focus */

.focus\:outline-none:focus {

    outline: 2px solid transparent;

    outline-offset: 2px

}



.focus\:ring-0:focus {

    box-shadow: none

}



.focus\:ring-2:focus {

    box-shadow: 0 0 0 2px rgba(218, 165, 32, 0.5)

}



.focus\:ring-accent-500\/50:focus {

    box-shadow: 0 0 0 3px rgba(218, 165, 32, 0.5)

}



.focus\:not-sr-only:focus {

    position: static;

    width: auto;

    height: auto;

    padding: inherit;

    margin: inherit;

    overflow: visible;

    clip: auto;

    white-space: normal;

}



.focus\:fixed:focus {

    position: fixed

}



.focus\:top-4:focus {

    top: 1rem

}



.focus\:left-4:focus {

    left: 1rem

}



.focus\:z-\[9999\]:focus {

    z-index: 9999

}



/* Group hover */

.group:hover .group-hover\:opacity-100 {

    opacity: 1

}



.group:hover .group-hover\:scale-105 {

    transform: scale(1.05)

}



/* Placeholder */

.placeholder\:text-dark-400::placeholder {

    color: #ab9272

}





/* ═══════════════════════════════════════════════════════════════════════════════

   RESPONSIVE UTILITIES

   ═══════════════════════════════════════════════════════════════════════════════ */



/* ── sm: 640px ── */

@media (min-width: 640px) {

    .sm\:hidden {

        display: none

    }



    .sm\:block {

        display: block

    }



    .sm\:flex {

        display: flex

    }



    .sm\:grid {

        display: grid

    }



    .sm\:px-8 {

        padding-left: 2rem;

        padding-right: 2rem

    }



    .sm\:gap-1 {

        gap: 0.25rem

    }



    .sm\:gap-4 {

        gap: 1rem

    }



    .sm\:gap-6 {

        gap: 1.5rem

    }



    .sm\:w-16 {

        width: 4rem

    }



    .sm\:h-16 {

        height: 4rem

    }



    .sm\:top-6 {

        top: 1.5rem

    }



    .sm\:top-8 {

        top: 2rem

    }



    .sm\:right-6 {

        right: 1.5rem

    }



    .sm\:grid-cols-2 {

        grid-template-columns: repeat(2, minmax(0, 1fr))

    }



    .sm\:pt-\[108px\] {

        padding-top: 108px

    }



    .sm\:pt-\[144px\] {

        padding-top: 144px

    }



    .sm\:left-8 {

        left: 2rem

    }



    .sm\:right-8 {

        right: 2rem

    }



    .sm\:pt-\[148px\] {

        padding-top: 148px

    }



    .sm\:pt-\[152px\] {

        padding-top: 152px

    }



    .sm\:pt-\[168px\] {

        padding-top: 168px

    }



}



/* ── md: 768px ── */

@media (min-width: 768px) {

    .md\:inline {

        display: inline

    }



    .md\:flex-row {

        flex-direction: row

    }



    .md\:items-end {

        align-items: flex-end

    }



    .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\:col-span-2 {

        grid-column: span 2 / span 2

    }



    .md\:p-12 {

        padding: 3rem

    }



    .md\:pt-10 {

        padding-top: 2.5rem

    }



    .md\:pb-28 {

        padding-bottom: 7rem

    }



    .md\:py-28 {

        padding-top: 7rem;

        padding-bottom: 7rem

    }



    .md\:py-32 {

        padding-top: 8rem;

        padding-bottom: 8rem

    }



    .md\:mb-14 {

        margin-bottom: 3.5rem

    }



    .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-base {

        font-size: 1rem;

        line-height: 1.5rem

    }

}



/* ── lg: 1024px ── */

@media (min-width: 1024px) {

    .lg\:hidden {

        display: none

    }



    .lg\:flex {

        display: flex

    }



    .lg\:block {

        display: block

    }



    .lg\:grid-cols-2 {

        grid-template-columns: repeat(2, minmax(0, 1fr))

    }



    .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\:col-span-2 {

        grid-column: span 2 / span 2

    }



    .lg\:flex-wrap {

        flex-wrap: wrap

    }



    .lg\:justify-center {

        justify-content: center

    }



    .lg\:overflow-visible {

        overflow: visible

    }



    .lg\:order-1 {

        order: 1

    }



    .lg\:order-2 {

        order: 2

    }



    .lg\:px-0 {

        padding-left: 0;

        padding-right: 0

    }



    .lg\:px-10 {

        padding-left: 2.5rem;

        padding-right: 2.5rem

    }



    .lg\:pb-0 {

        padding-bottom: 0

    }



    .lg\:mx-0 {

        margin-left: 0;

        margin-right: 0

    }



    .lg\:text-6xl {

        font-size: 3.75rem;

        line-height: 1

    }

}



/* ── xl: 1280px ── */

@media (min-width: 1280px) {

    .xl\:grid-cols-4 {

        grid-template-columns: repeat(4, minmax(0, 1fr))

    }

}



/* ── print ── */

@media print {

    .print\:hidden {

        display: none

    }

}





/* �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" �

   7. ANIMATIONS - Keyframes & Transitions

   �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" � */



/* � � � � � � � � � � � � � � � � � � � � � � � �  Keyframes � � � � � � � � � � � � � � � � � � � � � � � �  */

@keyframes fadeIn {

    from {

        opacity: 0;

    }



    to {

        opacity: 1;

    }

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(24px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes fadeInDown {

    from {

        opacity: 0;

        transform: translateY(-16px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes slideInLeft {

    from {

        opacity: 0;

        transform: translateX(-24px);

    }



    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes slideInRight {

    from {

        opacity: 0;

        transform: translateX(24px);

    }



    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes scaleIn {

    from {

        opacity: 0;

        transform: scale(0.95);

    }



    to {

        opacity: 1;

        transform: scale(1);

    }

}



@keyframes float {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-12px);

    }

}



@keyframes bounceSubtle {



    0%,

    100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-6px);

    }

}



@keyframes pulse {



    0%,

    100% {

        opacity: 1;

    }



    50% {

        opacity: 0.5;

    }

}



@keyframes ping {



    75%,

    100% {

        transform: scale(2);

        opacity: 0;

    }

}



@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}



@keyframes skeleton-shimmer {

    0% {

        background-position: -200% 0;

    }



    100% {

        background-position: 200% 0;

    }

}



/* � � � � � � � � � � � � � � � � � � � � � � � �  Animation Classes � � � � � � � � � � � � � � � � � � � � � � � �  */

.a-fade-in {

    animation: fadeIn 0.5s var(--ease-out) forwards;

}



.a-fade-in-up {

    animation: fadeInUp 0.6s var(--ease-out) forwards;

}



.a-fade-in-down {

    animation: fadeInDown 0.5s var(--ease-out) forwards;

}



.a-slide-in-left {

    animation: slideInLeft 0.5s var(--ease-out) forwards;

}



.a-slide-in-right {

    animation: slideInRight 0.5s var(--ease-out) forwards;

}



.a-scale-in {

    animation: scaleIn 0.4s var(--ease-out) forwards;

}



.a-float {

    animation: float 4s var(--ease-in-out) infinite;

}



.a-bounce {

    animation: bounceSubtle 2s var(--ease-in-out) infinite;

}



.a-pulse {

    animation: pulse 2s var(--ease-in-out) infinite;

}



.a-spin {

    animation: spin 1s linear infinite;

}



.a-spin-slow {

    animation: spin 3s linear infinite;

}



/* � � � � � � � � � � � � � � � � � � � � � � � �  Animation Delays � � � � � � � � � � � � � � � � � � � � � � � �  */

.a-delay-100 {

    animation-delay: 100ms;

}



.a-delay-200 {

    animation-delay: 200ms;

}



.a-delay-300 {

    animation-delay: 300ms;

}



.a-delay-400 {

    animation-delay: 400ms;

}



.a-delay-500 {

    animation-delay: 500ms;

}



.a-delay-600 {

    animation-delay: 600ms;

}



.a-delay-700 {

    animation-delay: 700ms;

}



.a-delay-1000 {

    animation-delay: 1000ms;

}



/* � � � � � � � � � � � � � � � � � � � � � � � �  Scroll Reveal Classes � � � � � � � � � � � � � � � � � � � � � � � �  */

/* Initial hidden state �   applied by JS when enabled */

.js-enabled .reveal {

    opacity: 0;

    transform: translateY(25px);

    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);

}



.js-enabled .reveal-left {

    opacity: 0;

    transform: translateX(-30px);

    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);

}



.js-enabled .reveal-right {

    opacity: 0;

    transform: translateX(30px);

    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);

}



.js-enabled .reveal-scale {

    opacity: 0;

    transform: scale(0.92);

    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);

}



/* Visible state �   added by IntersectionObserver */

.reveal--visible,

.reveal-left--visible,

.reveal-right--visible,

.reveal-scale--visible {

    opacity: 1 !important;

    transform: none !important;

}



/* Stagger delays for sequential reveals */

.stagger-1 {

    transition-delay: 0.1s;

}



.stagger-2 {

    transition-delay: 0.2s;

}



.stagger-3 {

    transition-delay: 0.3s;

}



.stagger-4 {

    transition-delay: 0.4s;

}



.stagger-5 {

    transition-delay: 0.5s;

}



.stagger-6 {

    transition-delay: 0.6s;

}



/* Fallback for no-JS: everything visible */

.no-js .reveal,

.no-js .reveal-left,

.no-js .reveal-right,

.no-js .reveal-scale {

    opacity: 1;

    transform: none;

}



/* Respect reduced-motion preference */

@media (prefers-reduced-motion: reduce) {



    .reveal,

    .reveal-left,

    .reveal-right,

    .reveal-scale {

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;

    }

}





/* �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" �

   8. DARK MODE - Theme Overrides

   �" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" ��" � */



.dark {

    /* Semantic Tokens Override */

    --color-bg: var(--color-gray-950);

    --color-bg-alt: #0F1211;

    --color-surface: var(--color-gray-900);

    --color-surface-elevated: #1E2321;

    --color-border: rgba(255, 255, 255, 0.06);

    --color-border-strong: rgba(255, 255, 255, 0.12);



    --color-text-primary: #E8EDEB;

    --color-text-secondary: var(--color-gray-400);

    --color-text-muted: var(--color-gray-500);

    --color-text-disabled: var(--color-gray-600);

    --color-text-link: var(--color-primary-400);

    --color-text-link-hover: var(--color-primary-300);



    /* Shadows for dark mode */

    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);

    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);

    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);

}



/* Dark mode specific overrides */

.dark .c-glass {

    background: rgba(24, 28, 26, 0.9);

}



.dark .c-glass--strong {

    background: rgba(15, 18, 17, 0.95);

}



.dark .c-logo__brand {

    color: var(--color-text-inverse);

}



.dark .c-nav__link:hover,

.dark .c-nav__link--active {

    color: var(--color-text-inverse);

    background-color: rgba(255, 255, 255, 0.05);

}



.dark .c-nav__link::after {

    background-color: var(--color-secondary-400);

}



.dark .c-card__price {

    color: var(--color-secondary-400);

}



.dark .c-skeleton {

    background: linear-gradient(90deg,

            var(--color-gray-800) 0%,

            var(--color-gray-700) 50%,

            var(--color-gray-800) 100%);

    background-size: 200% 100%;

}



.dark .c-toast {

    background-color: var(--color-surface);

    color: var(--color-text-primary);

}



.dark ::-webkit-scrollbar-thumb {

    background: var(--color-gray-700);

}



.dark ::-webkit-scrollbar-thumb:hover {

    background: var(--color-primary-400);

}



.dark ::selection {

    background-color: var(--color-secondary-500);

    color: var(--color-gray-950);

}



.dark :focus-visible {

    outline-color: var(--color-secondary-400);

}







/* � � � � � � � � � � � � � � � � � � � � � � � �  Mobile-Specific Optimizations � � � � � � � � � � � � � � � � � � � � � � � �  */



/* Safe area for notched phones */

@supports (padding: env(safe-area-inset-bottom)) {

    body {

        padding-bottom: env(safe-area-inset-bottom);

    }



    .c-whatsapp {

        bottom: calc(1.5rem + env(safe-area-inset-bottom));

    }

}



/* Small screens: better product grid & touch targets */

@media (max-width: 639px) {



    /* Product cards: single column with better spacing */

    #products-grid {

        grid-template-columns: 1fr;

        gap: 1rem;

    }



    /* Ensure touch targets are at least 44px */

    .c-btn,

    button,

    a[role="tab"] {

        min-height: 44px;

    }



    /* Category pills scrollable on mobile */

    #category-pills {

        flex-wrap: nowrap;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;

        justify-content: flex-start;

        padding-bottom: 0.5rem;

    }



    #category-pills::-webkit-scrollbar {

        display: none;

    }



    /* Gallery two-column on small mobile */

    #gallery-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 0.5rem;

    }



    /* Form: better spacing on mobile */

    #quote-form .space-y-5>*+* {

        margin-top: 1rem;

    }



    /* Testimonials: full-width cards */

    #testimonials-carousel>* {

        min-width: 85vw;

    }



    /* Hero section: better mobile padding */

    .min-h-screen .max-w-4xl {

        padding-top: 6rem;

    }

}







/* ═══════════════════════════════════════════════════════════════════════════════

   DYNAMIC JS UTILITIES — classes toggled by main.js at runtime

   ═══════════════════════════════════════════════════════════════════════════════ */



/* Opacity */

.opacity-0 {

    opacity: 0;

}



.opacity-100 {

    opacity: 1;

}



/* Transform: scale */

.scale-75 {

    transform: scale(.75);

}



.scale-95 {

    transform: scale(.95);

}



.scale-100 {

    transform: scale(1);

}



.scale-125 {

    transform: scale(1.25);

}



/* Z-index (hero slider) */

.z-0 {

    z-index: 0;

}



.z-10 {

    z-index: 10;

}



/* Widths (hero indicators) */

.w-3 {

    width: 0.75rem;

}



.w-8 {

    width: 2rem;

}



/* Backgrounds (hero indicators) */

.bg-white {

    background-color: #fff;

}



.bg-white\/40 {

    background-color: rgb(255 255 255 / 0.4);

}





/* ═══════════════════════════════════════════════════════════════════════════════

   10. PRINT - Print Styles

   ═══════════════════════════════════════════════════════════════════════════════ */



@media print {



    /* Hide non-essential elements */

    .c-header,

    .c-whatsapp,

    .c-lightbox,

    .c-toast,

    .c-scroll-progress,

    .no-print {

        display: none !important;

    }



    /* Reset colors */

    body {

        background: white !important;

        color: black !important;

    }



    /* Show links */

    a[href]::after {

        content: " (" attr(href) ")";

        font-size: 0.8em;

        color: #666;

    }



    /* Page breaks */

    h2,

    h3 {

        page-break-after: avoid;

    }



    img {

        page-break-inside: avoid;

    }



    /* Ensure content fits on page */

    .o-container {

        max-width: 100%;

        padding: 0;

    }

}



/* ═══════════════════════════════════════════════════════════════════════════════

   SEARCH RESULTS

   ═══════════════════════════════════════════════════════════════════════════════ */



.search-empty {

    text-align: center;

    padding: 3rem 1rem;

    color: var(--color-dark-400, #9ca3af);

}



.search-empty .material-symbols-outlined {

    font-size: 3rem;

    display: block;

    margin-bottom: 0.75rem;

    opacity: 0.4;

}



.search-empty p {

    font-size: 0.9375rem;

    margin: 0;

}



.search-empty-hint {

    display: block;

    font-size: 0.8125rem;

    margin-top: 0.5rem;

    opacity: 0.6;

}



.search-count {

    font-size: 0.75rem;

    font-weight: 600;

    color: var(--color-dark-400, #9ca3af);

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-bottom: 0.5rem;

    padding: 0 0.25rem;

}



.search-result-card {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 0.75rem;

    border-radius: 0.75rem;

    text-decoration: none;

    color: inherit;

    transition: background-color 0.15s ease;

}



.search-result-card:hover {

    background-color: var(--color-dark-50, #f9fafb);

}



.search-result-img {

    width: 4rem;

    height: 4rem;

    object-fit: cover;

    border-radius: 0.5rem;

    flex-shrink: 0;

    background: var(--color-dark-50, #f3f4f6);

}



.search-result-info {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 0.125rem;

}



.search-result-name {

    font-size: 0.9375rem;

    font-weight: 600;

    color: var(--color-dark-900, #111827);

    margin: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.search-result-cat {

    font-size: 0.75rem;

    color: var(--color-dark-400, #9ca3af);

    text-transform: capitalize;

}



.search-result-dim {

    font-size: 0.75rem;

    color: var(--color-dark-400, #9ca3af);

}



.search-result-price {

    font-size: 0.875rem;

    font-weight: 700;

    color: var(--color-brand-600, #b8860b);

}



.search-result-arrow {

    color: var(--color-dark-300, #d1d5db);

    flex-shrink: 0;

    transition: transform 0.15s ease;

}



.search-result-card:hover .search-result-arrow {

    transform: translateX(3px);

    color: var(--color-dark-500, #6b7280);

}





/* ═══════════════════════════════════════════════════════════════════════════════

   DARK MODE

   ═══════════════════════════════════════════════════════════════════════════════ */



/* Smooth transition for theme changes */

body {

    transition: background-color 0.3s ease, color 0.3s ease;

}



[data-theme="dark"] {

    /* Override semantic tokens */

    --color-bg: #1a1a1a;

    --color-bg-alt: #1e1e1e;

    --color-surface: #242424;

    --color-surface-elevated: #2a2a2a;

    --color-border: rgba(255, 255, 255, 0.08);

    --color-border-strong: rgba(255, 255, 255, 0.15);

    --color-text-primary: #e8e8e8;

    --color-text-secondary: #a0a0a0;

    --color-text-muted: #808080;

    --color-text-disabled: #606060;

    --color-text-inverse: #1a1a1a;

    --color-text-link: var(--color-primary-400);

    --color-text-link-hover: var(--color-primary-300);

    --color-gray-50: #1a1a1a;

    --color-gray-100: #242424;

    --color-gray-200: #333333;

    --color-gray-300: #444444;

    --color-gray-900: #e8e8e8;

    --color-gray-950: #f0f0f0;

    color-scheme: dark;

}



/* Body bg + text */

[data-theme="dark"] body {

    background-color: #1a1a1a;

    color: #e8e8e8;

}



/* Content sections that use bg-white */

[data-theme="dark"] section[class*="bg-white"],

[data-theme="dark"] div[class*="bg-white"] {

    background-color: #1a1a1a !important;

}



/* Alt background sections */

[data-theme="dark"] section[class*="bg-dark-50"],

[data-theme="dark"] div[class*="bg-dark-50"] {

    background-color: #1e1e1e !important;

}



/* Main content area */

[data-theme="dark"] main {

    background-color: #1a1a1a;

}



/* Headings */

[data-theme="dark"] h1:not([class*="text-white"]),

[data-theme="dark"] h2:not([class*="text-white"]),

[data-theme="dark"] h3:not([class*="text-white"]),

[data-theme="dark"] h4:not([class*="text-white"]) {

    color: #e8e8e8 !important;

}



/* Dark text overrides */

[data-theme="dark"] [class*="text-dark-950"]:not(header *):not(footer *):not(nav *):not(#mobile-menu *) {

    color: #f0f0f0 !important;

}



[data-theme="dark"] [class*="text-dark-900"]:not(header *):not(footer *):not(nav *):not(#mobile-menu *) {

    color: #e8e8e8 !important;

}



[data-theme="dark"] [class*="text-dark-800"]:not(header *):not(footer *):not(nav *):not(#mobile-menu *) {

    color: #d0d0d0 !important;

}



[data-theme="dark"] [class*="text-dark-700"]:not(header *):not(footer *):not(nav *):not(#mobile-menu *) {

    color: #b0b0b0 !important;

}



[data-theme="dark"] [class*="text-dark-600"]:not(header *):not(footer *):not(nav *):not(#mobile-menu *) {

    color: #a0a0a0 !important;

}



[data-theme="dark"] [class*="text-dark-500"]:not(header *):not(footer *):not(nav *):not(#mobile-menu *) {

    color: #909090 !important;

}



[data-theme="dark"] [class*="text-dark-400"]:not(header *):not(footer *):not(nav *):not(#mobile-menu *) {

    color: #808080 !important;

}



/* Cards */

[data-theme="dark"] .c-card {

    background-color: #242424;

    border-color: rgba(255, 255, 255, 0.08);

}



[data-theme="dark"] .c-card__image {

    background-color: #2a2a2a !important;

}



/* Badges & pills */

[data-theme="dark"] [class*="bg-dark-950/5"],

[data-theme="dark"] [class*="bg-dark-950\\/5"] {

    background-color: rgba(255, 255, 255, 0.08) !important;

}



[data-theme="dark"] [class*="border-dark-900/10"],

[data-theme="dark"] [class*="border-dark-900\\/10"] {

    border-color: rgba(255, 255, 255, 0.1) !important;

}



/* Category pills */

[data-theme="dark"] .c-pill {

    background-color: #2a2a2a;

    color: #a0a0a0;

    border-color: rgba(255, 255, 255, 0.1);

}



[data-theme="dark"] .c-pill.c-pill--active,

[data-theme="dark"] .c-pill:hover {

    background-color: var(--color-primary-600);

    color: #fff;

}



/* Sidebar categories */

[data-theme="dark"] .sidebar-cat {

    color: #a0a0a0;

}



[data-theme="dark"] .sidebar-cat:hover,

[data-theme="dark"] .sidebar-cat--active {

    background-color: rgba(255, 255, 255, 0.06);

    color: var(--color-primary-400);

}



/* Buttons with borders */

[data-theme="dark"] [class*="border-dark-200"]:not(header *):not(footer *) {

    border-color: rgba(255, 255, 255, 0.12) !important;

}



[data-theme="dark"] [class*="hover\\:bg-dark-50"]:hover {

    background-color: rgba(255, 255, 255, 0.06) !important;

}



/* Inputs */

[data-theme="dark"] input:not(header input):not(#mobile-search-input),

[data-theme="dark"] textarea,

[data-theme="dark"] select {

    background-color: #2a2a2a !important;

    color: #e8e8e8 !important;

    border-color: rgba(255, 255, 255, 0.12) !important;

}



[data-theme="dark"] input::placeholder,

[data-theme="dark"] textarea::placeholder {

    color: #666 !important;

}



/* Search modal */

[data-theme="dark"] #search-container {

    background-color: #242424;

    border-color: rgba(255, 255, 255, 0.1);

}



[data-theme="dark"] .search-result-card {

    background-color: #2a2a2a;

}



[data-theme="dark"] .search-result-card:hover {

    background-color: #333;

}



[data-theme="dark"] .search-result-name {

    color: #e8e8e8 !important;

}



/* Glass effect in dark mode */

[data-theme="dark"] .c-glass {

    background: rgba(30, 30, 30, 0.9);

}



[data-theme="dark"] .c-glass--strong {

    background: rgba(36, 36, 36, 0.95);

}



/* Quote form section */

[data-theme="dark"] [class*="bg-gradient-to-br"][class*="from-dark-50"] {

    background: #1e1e1e !important;

}



/* Testimonial cards */

[data-theme="dark"] [class*="bg-dark-50\\/50"],

[data-theme="dark"] [class*="bg-dark-50/50"] {

    background-color: #242424 !important;

}



/* Gallery */

[data-theme="dark"] .c-gallery__overlay {

    background-color: rgba(0, 0, 0, 0.6);

}



/* Scrollbar */

[data-theme="dark"] ::-webkit-scrollbar-thumb {

    background: #444;

}



[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {

    background: var(--color-primary-500);

}



[data-theme="dark"] * {

    scrollbar-color: #444 transparent;

}



/* Lightbox */

[data-theme="dark"] #lightbox {

    background-color: rgba(0, 0, 0, 0.95);

}



/* Toast */

[data-theme="dark"] #toast {

    background-color: #333;

    color: #e8e8e8;

}



/* Selection */

[data-theme="dark"] ::selection {

    background-color: var(--color-primary-600);

    color: #fff;

}

/* ── Colores de acento que faltaban ── */
.text-accent-200 { color: #fde68a; }
.border-white\/35 { border-color: rgba(255, 255, 255, 0.35); }

/* ── Hero shadows mejoradas para mejor legibilidad ── */
.hero-title-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 4px 24px rgba(0,0,0,0.7);
}
.hero-copy-shadow {
    text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 2px 16px rgba(0,0,0,0.8);
}