/**
 * main.css — Variables, reset, tipografía y estilos base
 * Sistema de diseño: Pilates Integral Chile · Tatiana Libuy
 * ────────────────────────────────────────────────────────────
 * Define los design tokens globales y el baseline tipográfico.
 * Componentes → components.css | Secciones home → sections.css
 */

:root {
    /* ─── Paleta base ─────────────────────────────────────── */
    --nude-light: #F5F0EB;
    --nude:       #E8DDD3;
    --rose-pale:  #A8C9DA;
    --rose:       #6FA7C2;   /* Color primario de marca */
    --terracotta: #5A8CA8;   /* Secundario / hover */
    --charcoal:   #2C2C2C;
    --white:      #FFFFFF;
    --off-white:  #FEFDFB;

    /* ─── Tokens "Efecto WOW" ─────────────────────────────── */
    --ink:        #232020;
    --rose-deep:  #3F7591;
    --glow:       rgba(111, 167, 194, 0.35);
    --shadow-sm:  0 4px 20px -8px rgba(44, 44, 44, 0.12);
    --shadow-md:  0 12px 40px -12px rgba(44, 44, 44, 0.18);
    --shadow-lg:  0 24px 60px -16px rgba(44, 44, 44, 0.22);
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);

    /* ─── Tipografía ──────────────────────────────────────── */
    --font-display: 'Fraunces', 'Cormorant Garamond', serif;
    --font-serif:   'Cormorant Garamond', serif;
    --font-sans:    'Jost', sans-serif;

    /* ─── Layout ──────────────────────────────────────────── */
    --nav-h:     88px;
    --container: 1400px;
    --gutter:    clamp(1.2rem, 5vw, 4rem);
}

/* ─── Reset ──────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-h);
}

html, body { overflow-x: hidden; width: 100%; }

body {
    font-family: var(--font-sans);
    background-color: var(--off-white);
    color: var(--charcoal);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Textura de grano sutil global (Efecto WOW) */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.025;
    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.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── Tipografía base ────────────────────────────────────── */
h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* ─── Utilidad: eyebrow (rótulo de sección) ──────────────── */
.eyebrow {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--rose-deep);
    display: inline-block;
    margin-bottom: 1.2rem;
}
.eyebrow::before { content: '— '; opacity: 0.7; }

/* ─── Accesibilidad: reduce motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}