/*==================================================
01. VARIABLES
==================================================*/

:root {

    /* =========================
       COLORES DE MARCA
    ========================== */

    --verde: #003b12;
    --verde-claro: #9ace16;
    --cafe: #5c432c;

    /* Neutros */

    --blanco: #ffffff;
    --fondo: #f7f8f5;
    --texto: #222222;

    /* =========================
       TIPOGRAFÍA
    ========================== */

    --font-title: "Manrope", sans-serif;
    --font-text: "Inter", sans-serif;

    /* =========================
       COLORES DE TEXTO
    ========================== */

    --text-light: #ffffff;
    --text-light-soft: rgba(255, 255, 255, 0.92);

    /* =========================
       DIVISORES
    ========================== */

    --divider-width: 90px;
    --divider-height: 4px;
    --card-divider-width: 60px;

    /* =========================
       HERO
    ========================== */

    --hero-title: clamp(42px, 5vw, 64px);
    --hero-text: 1.15rem;
    --hero-line: 1.8;
    --hero-height: 420px;
    --hero-overlay: linear-gradient(
        rgba(0, 59, 18, 0.72),
        rgba(0, 59, 18, 0.48)
    );

    /* =========================
       TÍTULOS
    ========================== */

    --title-section: clamp(2rem, 3vw, 2.7rem);
    --title-card: 1.45rem;
    --title-small: 1.15rem;

    /* =========================
       SUBTÍTULOS
    ========================== */

    --subtitle-size: 0.9rem;
    --subtitle-spacing: 2px;

    /* =========================
       PÁRRAFOS
    ========================== */

    --text-lg: 1.08rem;
    --text-md: 1rem;
    --text-sm: 0.95rem;

    --line-lg: 1.8;
    --line-md: 1.7;
    --line-sm: 1.6;

    /* =========================
       LAYOUT
    ========================== */

    --container: 1200px;
    --section: 60px;

    /* =========================
       RADIOS
    ========================== */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius: 15px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* =========================
       SOMBRAS
    ========================== */

    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.12);
    --soft-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);

    /* =========================
       TRANSICIONES
    ========================== */

    --transition: 0.35s ease;
    --transition-slow: 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);

    /* =========================
       BOTONES
    ========================== */

    --btn-radius: 999px;
    --btn-padding-y: 12px;
    --btn-padding-x: 24px;
    --btn-weight: 600;
}