: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: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-display: 'Manrope', system-ui, sans-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);
}

.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;
    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%;
    max-height: 320px;
    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);
}

/* � � � � � � � � � � � � � � � � � � � � � � � �  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.
   ═══════════════════════════════════════════════════════════════════════════════ */


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

/* ──── 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%
}

/* 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
}

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

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

/* Arbitrary top padding used on main */
.pt-\[120px\] {
    padding-top: 120px
}




/* ═══════════════════════════════════════════════════════════════════════════════
   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-\[164px\] {
        padding-top: 164px
    }
}

/* ── 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;
    }
}