/*
 * Tokens de diseño de la web pública.
 *
 * La paleta sale del logotipo real (muestreado del archivo): teal #309090
 * dominante, dorado #F0A800 y un rojo #D84818 de detalle. Los cuatro colores
 * marcados como editables se sobre-escriben desde el administrador.
 */

/* ── Tipografía autoalojada ──────────────────────────────────────────────── */
@font-face {
    font-family: 'Sora';
    src: url('/assets/fonts/web/sora-variable.woff2') format('woff2-variations');
    font-weight: 300 800;
    font-display: swap;
    font-style: normal;
    /* Solo latín: el resto de rangos no se descarga. */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/web/inter-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

:root {
    /* ── Color de marca (editable desde el CMS) ──────────────────────────── */
    --web-primary: #309090;
    --web-primary-dark: #1F6E6E;
    --web-primary-soft: #E8F4F4;
    --web-accent: #F0A800;
    --web-chispa: #D84818;
    --web-ink: #14293F;

    /* ── Neutros ─────────────────────────────────────────────────────────── */
    --web-body: #4A5A6B;
    --web-sand: #F7F5F0;
    --web-white: #FFFFFF;
    --web-line: rgba(20, 41, 63, .12);
    --web-line-fuerte: rgba(20, 41, 63, .22);

    /* ── Estado ──────────────────────────────────────────────────────────── */
    --web-danger: #C0392B;
    --web-success: #1E8449;

    /* Compatibilidad: el naranja se renombró a acento. */
    --web-naranja: var(--web-accent);

    /* ── Gradientes ──────────────────────────────────────────────────────── */
    --web-grad-marca: linear-gradient(120deg, var(--web-primary-dark) 0%, var(--web-primary) 55%, #4FB3AE 100%);
    --web-grad-oscuro: linear-gradient(160deg, #0B2038 0%, var(--web-ink) 55%, #0C2A45 100%);
    --web-grad-acento: linear-gradient(90deg, var(--web-accent), var(--web-chispa));
    --web-grad-vidrio: linear-gradient(160deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04));

    /* ── Tipografía ──────────────────────────────────────────────────────── */
    --web-fuente-titulo: 'Sora', 'Segoe UI', system-ui, sans-serif;
    --web-fuente-texto: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Escala fluida. El display crece más que el cuerpo para dar jerarquía. */
    --fs-xs: .8125rem;
    --fs-sm: .9375rem;
    --fs-base: clamp(1rem, .97rem + .14vw, 1.0625rem);
    --fs-lg: clamp(1.125rem, 1.07rem + .26vw, 1.28rem);
    --fs-xl: clamp(1.375rem, 1.26rem + .52vw, 1.7rem);
    --fs-2xl: clamp(1.75rem, 1.5rem + 1.15vw, 2.5rem);
    --fs-3xl: clamp(2.25rem, 1.8rem + 2.1vw, 3.75rem);
    --fs-display: clamp(2.5rem, 1.85rem + 3vw, 4.75rem);

    --lh-titulo: 1.12;
    --lh-texto: 1.65;
    --ls-titulo: -.025em;

    /* ── Espaciado ───────────────────────────────────────────────────────── */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 2.5rem;
    --sp-8: 3rem;
    --sp-9: 4rem;
    --sp-10: 5rem;
    /* Ritmo vertical entre secciones. Tres alturas y nada más, para que la
       página respire igual de arriba abajo. */
    --sp-seccion: clamp(4rem, 2.75rem + 5vw, 7.5rem);
    --sp-seccion-media: clamp(3rem, 2.25rem + 3vw, 5rem);
    --sp-seccion-corta: clamp(2rem, 1.5rem + 2vw, 3.25rem);

    /* ── Formas ──────────────────────────────────────────────────────────── */
    --web-radius-xs: 6px;
    --web-radius-sm: 10px;
    --web-radius: 16px;
    --web-radius-lg: 28px;
    --web-radius-xl: 40px;

    /* ── Elevación ───────────────────────────────────────────────────────── */
    --web-shadow-sm: 0 2px 8px rgba(20, 41, 63, .06);
    --web-shadow: 0 12px 32px rgba(20, 41, 63, .10);
    --web-shadow-lg: 0 24px 60px rgba(20, 41, 63, .16);
    --web-glow: 0 10px 30px rgba(48, 144, 144, .32);
    --web-glow-acento: 0 10px 26px rgba(240, 168, 0, .34);

    /* ── Estructura ──────────────────────────────────────────────────────── */
    --web-header-h: 76px;
    --web-max: 1240px;

    /* ── Movimiento ──────────────────────────────────────────────────────── */
    --web-ease: cubic-bezier(.22, .61, .36, 1);
    --web-ease-suave: cubic-bezier(.4, 0, .2, 1);
    --web-dur-rapida: .18s;
    --web-dur: .3s;
    --web-dur-lenta: .6s;
}

/* El administrador puede bajar o apagar el movimiento para todo el sitio. */
html[data-movimiento="sutil"] {
    --web-dur-lenta: .35s;
}