/* ============================================================
   SMARTLEASE — VARIABLES GLOBALES
   ============================================================
   Este es el ÚNICO archivo donde se definen variables y el
   reset base. NINGÚN otro archivo CSS debe redefinir :root.
   Orden de carga: 1° (primero que todos los demás CSS)
   ============================================================ */

/* ── 1. VARIABLES DE DISEÑO ─────────────────────────────── */
:root {
    /* Colores de identidad de marca */
    --primary:       #dd0a14;   /* Rojo Smartlease */
    --primary-hover: #b80811;   /* Rojo oscuro para hover */
    --dark:          #423f40;   /* Gris oscuro / casi negro */
    --white:         #ffffff;
    --light-bg:      #f4f4f4;   /* Fondo gris claro de secciones */
    --border-soft:   #d1d1d1;   /* Gris suave para bordes */

    /* Colores de navegación móvil (PWA) */
    --nav-bg:     rgba(255, 255, 255, 0.98);
    --nav-text:   #8e8e93;
    /* --nav-active eliminada: usar var(--primary) directamente */

    /* Bordes y sombras */
    --radius:        20px;   /* Cards principales (unit-card, card-solucion) */
    --radius-md:     15px;   /* Contenedores secundarios (branches-wrapper) */
    --radius-sm:     10px;   /* Botones y elementos pequeños */
    --shadow:        0 10px 30px rgba(0, 0, 0, 0.05);
    --shadow-strong: 0 4px 20px rgba(0, 0, 0, 0.15);

    /* Tipografía */
    --font-main: 'Montserrat', sans-serif;
}

/* ── 2. RESET GLOBAL ────────────────────────────────────── */
/* Elimina márgenes y rellenos por defecto en todos los elementos */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* Quita el flash azul al tocar en móvil */
}

/* ── 3. ESTILOS BASE DEL BODY ───────────────────────────── */
body {
    font-family: var(--font-main);
    line-height: 1.6;
    color: var(--dark);
    background-color: var(--white);
    scroll-behavior: smooth;
    overflow-x: hidden; /* Evita scroll horizontal accidental */
}

/* ── 4. ESCALA DE ESPACIADO ─────────────────────────────── */
/* Usar estas variables en lugar de valores hardcodeados de px */
:root {
    --spacing-lg: 80px;   /* Secciones principales (hero, layout) */
    --spacing-md: 50px;   /* Banners de experiencia, section-padding */
    --spacing-sm: 20px;   /* Elementos internos, gaps pequeños */
}

/* ── 5. ANIMACIONES GLOBALES ────────────────────────────── */
/* Todas las @keyframes del proyecto viven aquí — NO duplicar en otros archivos */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

/* Animación del ticker de logos (movida desde clients.css) */
@keyframes ticker-move {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}