/*
 * base.css
 * ------------------------------------------------------------
 * Fundaciones globales: design tokens, reset, tipografía.
 * Cargar ANTES que layout, components y admin.
 *
 * Branding "Comercial Oregón" (Claude Design handoff):
 * verde bosque (#2F6B4A) sobre crema (#FBF6EC), tipografías
 * Figtree (texto) + Plus Jakarta Sans (títulos). Cambiar los
 * tokens de abajo es el único knob para rebrandear.
 * ------------------------------------------------------------
 */

:root {
    /* Texto — verdes oscuros + grises verdosos del branding */
    --color-text:           #3C4A3E;
    --color-text-strong:    #22301F;
    --color-text-muted:     #5A6553;
    --color-text-subtle:    #8A9484;

    /* Fondos — off-white neutro tibio + superficies blancas + banda verde clara */
    --color-bg:             #F5F6F2;   /* off-white general (menos beige, leve verde) */
    --color-bg-surface:     #ffffff;   /* tarjetas / superficies elevadas */
    --color-bg-alt:         #EAF1EA;   /* secciones / banda verde clara */
    --color-bg-hover:       #DFEADF;
    --color-bg-app:         #F4F1E8;

    /* Bordes — verde apagado, suaves */
    --color-border:         #E4E9DF;
    --color-border-strong:  #CCD8C8;

    /* Marca / acento — verde bosque */
    --color-primary:        #2F6B4A;       /* verde bosque — CTA principal */
    --color-primary-hover:  #37805A;
    --color-wa:             #2F6B4A;       /* WhatsApp comparte el verde de marca */
    --color-wa-hover:       #37805A;
    --color-primary-text:   #ffffff;
    --color-accent:         #2F6B4A;       /* eyebrows / precios / detalles */
    --color-accent-soft:    #EAF1EA;

    /* Verde bosque — barra/footer/detalles */
    --color-forest:         #2F6B4A;
    --color-forest-dark:    #22301F;       /* footer profundo */
    --color-forest-soft:    #EAF1EA;

    /* Estados */
    --color-success:        #15803d;
    --color-success-soft:   #f0fdf4;
    --color-warn:           #b45309;
    --color-warn-soft:      #fffbeb;
    --color-danger:         #b91c1c;
    --color-danger-soft:    #fef2f2;

    /* Tipografía — Figtree (texto) + Plus Jakarta Sans (títulos) */
    --font-family:        "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-display:       "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-family-mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --font-size-base:     15px;
    --line-height-base:   1.6;
    --font-feature:       "kern", "liga";
    --font-numeric:       tabular-nums;

    /* Espaciado */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2.5rem;
    --space-2xl: 4rem;

    /* Sizing — radios generosos (cards 24px, píldoras 999px) */
    --container-max: 1200px;
    --radius-sm:     8px;
    --radius:        12px;
    --radius-lg:     16px;
    --radius-xl:     24px;
    --radius-2xl:    30px;
    --radius-pill:   999px;

    /* Elevación — sombras verdosas suaves */
    --shadow-xs: 0 1px 0 rgba(47,74,53,0.03);
    --shadow-sm: 0 2px 8px rgba(47,74,53,0.07);
    --shadow-md: 0 8px 24px rgba(47,74,53,0.08);
    --shadow-lg: 0 18px 44px -12px rgba(47,74,53,0.18), 0 6px 16px -8px rgba(47,74,53,0.10);

    /* Focus ring (accesible y elegante) */
    --ring:        0 0 0 3px rgba(47,107,74,0.18);
    --ring-strong: 0 0 0 3px rgba(47,107,74,0.30);

    /* Motion */
    --transition:        150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   250ms cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);
}

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

/* Transición limpia entre páginas (navegadores compatibles) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) { animation: vt-fade-out 0.22s var(--ease-out-quart) both; }
    ::view-transition-new(root) { animation: vt-fade-in 0.28s var(--ease-out-quart) both; }
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Animaciones de aparición al hacer scroll */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease-out-quart), transform 0.6s var(--ease-out-quart);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* Entradas del hero (branding handoff) */
@keyframes oFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes oFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================
   Reset
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

/* Evita que el header fijo tape los anclajes (#contacto, #productos, ...) */
:where(section[id], [id].section, [id].hero) { scroll-margin-top: 120px; }
@media (max-width: 720px) {
    :where(section[id], [id].section, [id].hero) { scroll-margin-top: 140px; }
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-feature-settings: var(--font-feature);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, video, svg { max-width: 100%; height: auto; }

::selection {
    background: var(--color-text);
    color: var(--color-primary-text);
}

/* ==========================================================
   Tipografía
   ========================================================== */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.15;
    margin: 0 0 var(--space-md);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-strong);
}

/* Títulos principales en Plus Jakarta Sans, peso 800 (branding) */
h1, h2, h3 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
}

h1 { font-size: 1.95rem; letter-spacing: -0.03em; font-weight: 800; }
h2 { font-size: 1.45rem; letter-spacing: -0.02em; font-weight: 800; }
h3 { font-size: 1.05rem; letter-spacing: -0.015em; font-weight: 700; }
h4 { font-size: 0.95rem; font-weight: 700; }

p { margin: 0 0 var(--space-md); }

a {
    color: var(--color-primary);
    text-decoration: none;
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
    transition: color var(--transition), text-decoration-color var(--transition);
}
a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
    text-decoration-color: currentColor;
}

small {
    font-size: 0.85em;
    color: var(--color-text-muted);
}

code {
    font-family: var(--font-family-mono);
    font-size: 0.88em;
    background: var(--color-bg-hover);
    padding: 0.12em 0.4em;
    border-radius: 4px;
    color: var(--color-text);
}

pre {
    font-family: var(--font-family-mono);
    font-size: 0.88rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-md);
    overflow-x: auto;
    margin: 0 0 var(--space-md);
    white-space: pre-wrap;
    line-height: 1.5;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-lg) 0;
}

/* ==========================================================
   Utilities
   ========================================================== */
.text-muted    { color: var(--color-text-muted); }
.text-subtle   { color: var(--color-text-subtle); }
.text-tabular  { font-variant-numeric: tabular-nums; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}