/* ═══════════════════════════════════════════════════════════════
    CONTACT — BRANDING & DESIGN TOKENS
   Sistema visual unificado: Negro / Blanco / Plus Jakarta Sans
   Importar este archivo ANTES que cualquier otro CSS en todas las páginas.
   ═══════════════════════════════════════════════════════════════ */

/* ─── GOOGLE FONTS ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {

    /* ── PALETA PRINCIPAL — Negro / Blanco ────────────────────── */
    --brand-primary:        #111111;   /* Negro oscuro — color corporativo */
    --brand-primary-dark:   #000000;   /* Negro profundo — hover */
    --brand-primary-light:  #2F2F2F;   /* Gris grafito — acentos suaves */
    --brand-primary-bg:     #F3F4F6;   /* Gris claro — fondos sutiles */

    --brand-secondary:      #111111;   /* Negro — unificado con primario */
    --brand-secondary-dark: #000000;
    --brand-secondary-bg:   #F9FAFB;

    --brand-accent:        #efb13e;   /* Naranja — ofertas, premium, estrellas */
    --brand-accent-dark:   #EA580C;   /* Naranja oscuro — hover */
    --brand-accent-light:  #FB923C;   /* Naranja suave */
    --brand-accent-bg:     #FFF7ED;   /* Fondo naranja muy claro */

    /* ── GRADIENTES DE MARCA — Solo escala de grises ─────────── */
    --brand-gradient:         linear-gradient(135deg, #111111 0%, #2F2F2F 100%);
    --brand-gradient-reverse: linear-gradient(135deg, #2F2F2F 0%, #111111 100%);
    --brand-gradient-warm:    linear-gradient(135deg, #111111 0%, #374151 100%);
    --brand-gradient-hero:    linear-gradient(135deg, #000000 0%, #111111 50%, #1F2937 100%);
    --brand-gradient-card:    linear-gradient(180deg, rgba(17,17,17,0.06) 0%, rgba(17,17,17,0.0) 100%);
    --chip-gradient:          linear-gradient(135deg, #d4af37 0%, #f0d060 100%);

    /* ── NEUTROS ──────────────────────────────────────────────── */
    --color-blanco:     #FFFFFF;
    --color-fondo:      #F9FAFB;
    --color-fondo-alt:  #F3F4F6;
    --color-borde:      #E5E7EB;
    --color-borde-dark: #D1D5DB;

    --color-texto:           #111111;   /* Negro principal — títulos */
    --color-texto-medio:     #374151;   /* Gris muy oscuro — cuerpo */
    --color-texto-suave:     #6B7280;   /* Gris medio — secundario */
    --color-texto-muy-suave: #9CA3AF;   /* Gris claro — placeholders */

    /* Aliases semánticos (compatibilidad con archivos existentes) */
    --color-primario:    var(--brand-primary);
    --color-secundario:  var(--brand-primary-dark);
    --color-acento:      var(--brand-accent);

    /* ── TIPOGRAFÍA — Plus Jakarta Sans en todo ───────────────── */
    --font-display:     'Plus Jakarta Sans', sans-serif;   /* Títulos */
    --font-body:        'Plus Jakarta Sans', sans-serif;   /* Cuerpo / UI */
    --fuente-principal: var(--font-body);                  /* Alias legacy */

    /* Escala tipográfica */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */
    --text-4xl:  2.25rem;    /* 36px */
    --text-5xl:  3rem;       /* 48px */
    --text-6xl:  3.75rem;    /* 60px */

    /* Pesos */
    --font-regular:   400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;
    --font-extrabold: 800;

    /* ── ESPACIADO ────────────────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ── BORDES Y RADIOS ──────────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-full: 9999px;
    --radio-borde: var(--radius-md);   /* Alias legacy */

    /* ── SOMBRAS — Sin tinte de color ────────────────────────── */
    --shadow-xs:       0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm:       0 2px 10px rgba(0, 0, 0, 0.07);
    --shadow-md:       0 4px 20px rgba(0, 0, 0, 0.10);
    --shadow-lg:       0 10px 40px rgba(0, 0, 0, 0.12);
    --shadow-xl:       0 20px 60px rgba(0, 0, 0, 0.15);
    --shadow-brand:    0 8px 30px rgba(17, 17, 17, 0.22);
    --shadow-brand-lg: 0 16px 50px rgba(17, 17, 17, 0.30);
    --sombra: var(--shadow-sm);   /* Alias legacy */

    /* ── TRANSICIONES ─────────────────────────────────────────── */
    --transition-fast:   all 0.15s ease;
    --transition-base:   all 0.25s ease;
    --transition-slow:   all 0.4s ease;
    --transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── LOGO ─────────────────────────────────────────────────── */
    --logo-font:           var(--font-display);
    --logo-color:          var(--brand-primary);
    --logo-size:           1.5rem;
    --logo-weight:         800;
    --logo-letter-spacing: 0.5px;

    /* ── ESTADOS / FEEDBACK ───────────────────────────────────── */
    --color-success:    #10B981;
    --color-success-bg: #D1FAE5;
    --color-warning:    #F59E0B;
    --color-warning-bg: #FEF3C7;
    --color-error:      #EF4444;
    --color-error-bg:   #FEE2E2;
    --color-info:        #3B82F6;
    --color-info-bg:     #DBEAFE;
    --color-info-strong: #1E40AF;   /* Azul oscuro — texto sobre info-bg (AA/AAA) */

    /* ── Z-INDEX ──────────────────────────────────────────────── */
    --z-base:    1;
    --z-raised:  10;
    --z-overlay: 100;
    --z-modal:   1000;
    --z-sticky:  999;
    --z-toast:   9999;
}

/* ─── UTILIDADES DE MARCA ────────────────────────────────────── */

.logo-wordmark,
nav .logo {
    font-family: var(--logo-font);
    font-size: var(--logo-size);
    font-weight: var(--logo-weight);
    color: var(--logo-color);
    letter-spacing: var(--logo-letter-spacing);
    text-decoration: none;
}

.brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-fondo-alt);
    color: var(--brand-primary);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border: 1px solid var(--color-borde);
}

.text-gradient {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-divider {
    width: 40px;
    height: 3px;
    background: var(--brand-primary);
    border-radius: var(--radius-full);
    margin: 0 auto var(--space-6);
}