/* ============================================================
   FORZA BOLIVIA — DESIGN TOKENS v3.0
   Basado en Tegel Design System (Scania)
   ============================================================ */

:root {
    /* ========================================
       PALETA CORPORATIVA FORZA (base Scania)
       ======================================== */
    --f-black: #0E1013;
    --f-dark: #15181D;
    --f-gray: #333333;
    --f-mid: #666666;
    --f-light-gray: #E5E7EB;
    --f-off-white: #F6F7F9;
    --f-white: #FFFFFF;

    /* Colores funcionales Scania */
    --scania-red: #D6001C;
    --scania-green: #3C763D;
    --scania-yellow: #E1A93E;
    --scania-blue: #041E42;
    --scania-blue-bright: #0B6EC5;
    --scania-blue-dark: #02142C;

    /* Acento corporativo FORZA (Scania Blue) */
    --f-accent: var(--scania-blue);
    --f-accent-dark: var(--scania-blue-dark);
    --f-accent-bright: var(--scania-blue-bright);

    /* ========================================
       FAMILIAS TIPOGRÁFICAS (estilo Scania)
       ======================================== */
    --font-display: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-condensed: 'Oswald', 'Barlow Condensed', 'Arial Narrow', sans-serif;

    /* ========================================
       ESCALA TIPOGRÁFICA MODULAR
       Ratio: 1.25 (Major Third)
       ======================================== */
    --text-10: 0.625rem;   /* 10px - Micro captions */
    --text-12: 0.75rem;    /* 12px - Detail, labels */
    --text-14: 0.875rem;   /* 14px - UI, body small */
    --text-16: 1rem;       /* 16px - Body standard */
    --text-18: 1.125rem;   /* 18px - Lead small */
    --text-20: 1.25rem;    /* 20px - Lead / intro */
    --text-24: 1.5rem;     /* 24px - H4 */
    --text-28: 1.75rem;    /* 28px - H3 */
    --text-32: 2rem;       /* 32px - H2 móvil */
    --text-40: 2.5rem;     /* 40px - H2 */
    --text-48: 3rem;       /* 48px - H1 móvil */
    --text-56: 3.5rem;     /* 56px - H1 */
    --text-64: 4rem;       /* 64px - Display */
    --text-72: 4.5rem;     /* 72px - Hero móvil */
    --text-80: 5rem;       /* 80px - Hero desktop */
    --text-96: 6rem;       /* 96px - Hero XL */
    --text-128: 8rem;      /* 128px - Statement */

    /* ========================================
       LETTER SPACING (espaciado entre letras)
       Scania usa negativo en titulares grandes
       ======================================== */
    --tracking-tighter: -0.04em;   /* Headlines XL */
    --tracking-tight: -0.02em;     /* Headlines */
    --tracking-normal: 0;          /* Body text */
    --tracking-wide: 0.01em;       /* UI elements */
    --tracking-wider: 0.03em;      /* Labels */
    --tracking-widest: 0.15em;     /* Overline, caps */

    /* ========================================
       LINE HEIGHT (altura de línea)
       ======================================== */
    --leading-none: 1;             /* Display / hero */
    --leading-tight: 1.1;          /* Headlines */
    --leading-snug: 1.25;          /* Subheadings */
    --leading-normal: 1.5;         /* Body text */
    --leading-relaxed: 1.75;       /* Long reading */

    /* ========================================
       FONT WEIGHTS (pesos)
       ======================================== */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --weight-black: 900;

    /* ========================================
       ESPACIADO DE SECCIONES
       ======================================== */
    --section-py: 7rem;
    --section-py-sm: 5rem;
    --section-py-lg: 10rem;

    /* ========================================
       BORDER RADIUS (Scania usa 0 casi siempre)
       ======================================== */
    --radius-none: 0;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;

    /* ========================================
       SOMBRAS (sutiles, estilo Scania)
       ======================================== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);

    /* ========================================
       TRANSICIONES
       ======================================== */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* ========================================
       Z-INDEX SCALE
       ======================================== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 500;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-popover: 1100;
    --z-tooltip: 1200;
}

/* ============================================================
   VARIABLES POR MARCA — COLORES OFICIALES
   ============================================================ */

/* SCANIA: Paleta oficial corporativa */
[data-brand="scania"] {
    --brand-primary: #041E42;         /* Azul Scania (Scania Blue) */
    --brand-primary-dark: #02142C;    /* Azul Scania Oscuro (para hovers) */
    --brand-primary-bright: #0B6EC5;  /* Azul Scania Claro (para detalles) */
    --brand-primary-light: rgba(4, 30, 66, 0.08);
    --brand-text-on-primary: #FFFFFF; /* Blanco */
    
    --brand-accent: #D6001C;          /* Rojo Scania (Scania Red) */
    --brand-accent-dark: #A80016;     /* Rojo Scania Oscuro */
    
    --brand-gold: #CCA330;            /* Oro (Corona del grifo) */
    --brand-silver: #CCCCCC;          /* Plata (Bordes/detalles) */
    --brand-black: #2D2926;           /* Negro Scania */
    --brand-gray-light: #828282;      /* Cinza Claro */
}

/* ZOOMLION: Verde Aurora #AACE39 */
[data-brand="zoomlion"] {
    --brand-primary: #AACE39;
    --brand-primary-dark: #8BB22C;
    --brand-primary-bright: #B8DC4A;
    --brand-primary-light: rgba(170, 206, 57, 0.1);
    --brand-text-on-primary: #0E1013;
    --brand-accent: #AACE39;
}

/* SHANTUI: Amarillo #FEC00F */
[data-brand="shantui"] {
    --brand-primary: #FEC00F;
    --brand-primary-dark: #D9A40C;
    --brand-primary-bright: #FFD23F;
    --brand-primary-light: rgba(254, 192, 15, 0.1);
    --brand-text-on-primary: #030200;
    --brand-accent: #F35C17;
}

/* LIBRELATO: Azul Librelato #008BD2 */
[data-brand="librelato"] {
    --brand-primary: #008BD2;           /* Azul Librelato */
    --brand-primary-dark: #012340;      /* Azul Marinho */
    --brand-primary-bright: #3FA9F5;    /* Azul Claro */
    --brand-primary-light: rgba(0, 139, 210, 0.1);
    --brand-text-on-primary: #FFFFFF;   /* Branco */
    --brand-accent: #008BD2;
    --brand-royal: #00091F;             /* Azul Royal */
    --brand-digital: #ADEAFF;           /* Azul Digital */
    --brand-gray-dark: #4D4D4D;         /* Cinza Escuro */
    --brand-gray-light: #828282;        /* Cinza Claro */
}

/* ============================================================
   TIPOGRAFÍA SEMÁNTICA ESTILO SCANIA
   ============================================================ */

/* Display / Hero principal */
.type-display {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(3rem, 8vw, var(--text-80));
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tighter);
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    max-width: 15ch;
}

/* Headline 1 */
.type-h1 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(2.25rem, 6vw, var(--text-56));
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-feature-settings: 'kern' 1, 'liga' 1;
    max-width: 18ch;
}

/* Headline 2 */
.type-h2 {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: clamp(1.875rem, 4vw, var(--text-40));
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Headline 3 */
.type-h3 {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-28);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
}

/* Headline 4 */
.type-h4 {
    font-family: var(--font-display);
    font-weight: var(--weight-medium);
    font-size: var(--text-24);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
}

/* Lead / Intro paragraph */
.type-lead {
    font-family: var(--font-body);
    font-weight: var(--weight-light);
    font-size: var(--text-20);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-normal);
    color: var(--f-mid);
    max-width: 60ch;
}

/* Body text */
.type-body {
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: var(--text-16);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    max-width: 65ch;
}

/* Body small */
.type-body-sm {
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: var(--text-14);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
}

/* Detail / Caption */
.type-detail {
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: var(--text-12);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

/* Overline (etiqueta superior con línea) */
.type-overline {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-12);
    line-height: 1;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--f-mid);
    display: inline-block;
    position: relative;
    padding-top: 1.5rem;
}

.type-overline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--f-accent);
}

/* UI Label (botones, navegación) */
.type-ui {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-14);
    line-height: 1;
    letter-spacing: var(--tracking-wide);
}

/* Condensed (espacios reducidos) */
.type-condensed {
    font-family: var(--font-condensed);
    font-weight: var(--weight-bold);
    font-size: var(--text-40);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
}

/* ============================================================
   ANIMACIONES GLOBALES
   ============================================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   MEDIA QUERIES RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    :root {
        --section-py: 5rem;
        --section-py-lg: 7rem;
    }
}

@media (max-width: 768px) {
    :root {
        --section-py: 4rem;
        --section-py-lg: 5rem;
    }
}

@media (max-width: 480px) {
    :root {
        --section-py: 3rem;
    }
}

/* Reduced 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;
    }
}