/* =========================================================================
   1. VARIABLES DE PALETA DE COLORES (Edítalas aquí para cambiar todo el sitio)
   ========================================================================= */
:root {
    --color-bg: #EFECE5;
    /* Arena claro de fondo */
    --color-text: #1F221D;
    /* Antracita / Negro brutalista */
    --color-brand: #659287; /* #4B5E40;*/
    /* Verde musgo de acento */
    --color-brand-light: rgba(75, 94, 64, 0.1);
    /* Verde con opacidad */
    --color-brand-border: rgba(75, 94, 64, 0.2);
    /* Bordes de acento */
    --color-border-soft: rgba(75, 94, 64, 0.15);
    /* Separadores de secciones */
    --color-scroll-thumb: #D5D1C7;
    /* Barra de scroll inactiva */
}

/* =========================================================================
   2. ESTILOS BASE Y CONFIGURACIÓN
   ========================================================================= */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
    /* Altura exacta del header sticky + espaciador visual */
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
}

section {
    width: 100%;
    min-height: 100dvh;
}

/* Tipografía brutalista e imponente */
.font-anton {
    font-family: 'Anton', sans-serif;
    text-transform: uppercase;
    line-height: 0.82;
    letter-spacing: -0.04em;
}

/* =========================================================================
   3. EFECTOS Y TRANSICIONES (Barba.js & GSAP)
   ========================================================================= */
.page-wipe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-brand);
    transform: scaleY(0);
    transform-origin: bottom;
    z-index: 100;
    pointer-events: none;
}

/* =========================================================================
   4. SCROLLBAR EDITORIAL CUSTOM
   ========================================================================= */
::-webkit-scrollbar {
    width: 6px;
}

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

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

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


 /* Estilizaciones de scroll finas y variables globales de suavizado */
        html {
            scroll-behavior: smooth;
            font-smoothing: antialiased;
        }

        ::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #E2E8F0;
            border-radius: 99px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #CBD5E1;
        }

        [x-cloak] {
            display: none !important;
        }