/* ============================================================
   VEGIN — Sistema de diseño
   Paleta: Horizonte Vegin
   ============================================================ */

/* ── Lemon Milk (auto-hosteada, WOFF2) — solo pesos usados ── */
@font-face {
    font-family: 'Lemon Milk';
    src: url('../fonts/LEMONMILK-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lemon Milk';
    src: url('../fonts/LEMONMILK-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lemon Milk';
    src: url('../fonts/LEMONMILK-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lemon Milk';
    src: url('../fonts/LEMONMILK-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── Gotham (auto-hosteada, WOFF2) — solo pesos usados ── */
@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Book.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Font Awesome se carga vía <link> en cada página (con preconnect). */

/* ============================================================
   Variables de diseño
   ============================================================ */
:root {
    /* Paleta Horizonte Vegin */
    --color-amanecer:  #ed6b16;  /* Amanecer Libre  - CTAs principales */
    --color-oceano:    #00a5d5;  /* Océano Justo    - links, secundario */
    --color-bosque:    #03a34c;  /* Bosque Pacífico - éxito, "Apóyanos" */
    --color-alba:      #f0efe4;  /* Alba Consciente - fondos suaves */
    --color-noche:     #343b4c;  /* Noche Rebelde   - texto, navbar */

    /* Neutros */
    --color-white:     #ffffff;
    --color-text:      #1a1a1a;
    --color-muted:     #6b7280;
    --color-border:    #e5e5e5;

    /* Tipografía */
    --font-heading: 'Lemon Milk', 'Gotham', sans-serif;
    --font-body:    'Gotham', system-ui, -apple-system, sans-serif;

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.25rem;
    --fs-2xl:  1.5rem;
    --fs-3xl:  2rem;
    --fs-4xl:  2.75rem;
    --fs-5xl:  3.75rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;

    /* Otros */
    --radius-sm: 6px;
    --radius:    12px;
    --radius-lg: 20px;
    --radius-full: 999px;

    --shadow-sm: 0 1px 3px rgba(52, 59, 76, 0.08);
    --shadow:    0 4px 16px rgba(52, 59, 76, 0.10);
    --shadow-lg: 0 12px 32px rgba(52, 59, 76, 0.14);

    --transition: 0.2s ease;

    --container: 1200px;
    --container-narrow: 880px;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--color-oceano); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-amanecer); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ============================================================
   Tipografía
   ============================================================ */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-noche);
    line-height: 1.15;
    letter-spacing: 0.02em;
    font-weight: 700;
}
h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5, h6 { font-family: var(--font-heading); font-weight: 500; color: var(--color-noche); }
h5 { font-size: var(--fs-lg); }
p  { margin-bottom: var(--space-4); }
.lead { font-size: var(--fs-lg); color: var(--color-noche); font-weight: 500; }

@media (max-width: 768px) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.35rem; }
}

/* ============================================================
   Layout
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-6);
}
.container-narrow { max-width: var(--container-narrow); }

section { padding: var(--space-16) 0; }
@media (max-width: 768px) { section { padding: var(--space-12) 0; } }

.section-title {
    text-align: center;
    margin-bottom: var(--space-12);
}
.section-title .eyebrow {
    display: inline-block;
    color: var(--color-amanecer);
    font-family: var(--font-heading);
    font-size: var(--fs-sm);
    letter-spacing: 0.15em;
    margin-bottom: var(--space-3);
    text-transform: uppercase;
}

/* ============================================================
   Botones
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-base);
    border-radius: var(--radius-full);
    transition: all var(--transition);
    cursor: pointer;
    white-space: nowrap;
    border: 2px solid transparent;
}
.btn-primary {
    background: var(--color-amanecer);
    color: var(--color-white);
}
.btn-primary:hover {
    background: var(--color-noche);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.btn-secondary {
    background: var(--color-noche);
    color: var(--color-white);
}
.btn-secondary:hover {
    background: var(--color-amanecer);
    color: var(--color-white);
    transform: translateY(-2px);
}
.btn-success {
    background: var(--color-bosque);
    color: var(--color-white);
}
.btn-success:hover {
    background: var(--color-noche);
    color: var(--color-white);
}
.btn-outline {
    background: transparent;
    color: var(--color-noche);
    border-color: var(--color-noche);
}
.btn-outline:hover {
    background: var(--color-noche);
    color: var(--color-white);
}
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--fs-lg); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); }
.btn-block { width: 100%; }

/* ============================================================
   Utilidades
   ============================================================ */
.text-center { text-align: center; }
.text-amanecer { color: var(--color-amanecer); }
.text-oceano   { color: var(--color-oceano); }
.text-bosque   { color: var(--color-bosque); }
.text-noche    { color: var(--color-noche); }
.text-muted    { color: var(--color-muted); }

.bg-alba   { background: var(--color-alba); }
.bg-noche  { background: var(--color-noche); color: var(--color-white); }
.bg-noche h1, .bg-noche h2, .bg-noche h3 { color: var(--color-white); }

.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-8 { margin-bottom: var(--space-8); }

.hidden { display: none !important; }

/* Imágenes decorativas — solo escritorio */
@media (max-width: 768px) {
    .hide-mobile-img { display: none !important; }
}

/* ============================================================
   Animaciones de entrada — desactivadas (sin animación al scrollear)
   ============================================================ */
.fade-in,
.fade-in.visible { opacity: 1; transform: none; transition: none; }

/* ============================================================
   Transiciones de página
   ============================================================ */
/* IMPORTANTE: el body NO debe tener transform — un ancestro con transform
   rompe el position:fixed del menú lateral (se ancla al documento en vez del
   viewport y, al estar scrolleado, el drawer aparece vacío). Solo opacidad. */
@keyframes page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
    body {
        animation: page-in 0.35s ease both;
    }
    body.page-out {
        opacity: 0;
        transition: opacity 0.22s ease;
        pointer-events: none;
    }
}