/* ============================================================
   ADOPTARTE — DESIGN SYSTEM CENTRALIZADO
   Este archivo define los tokens globales del proyecto.
   Incluir en layout.html para que aplique a todos los módulos.
   ============================================================ */

/* --- PALETA UNIFICADA --- */
:root {
    /* Azul Primario: 1 solo valor para todo el proyecto */
    --brand-primary:     #1a5276;
    --brand-primary-hover: #154360;
    --brand-secondary:   #2980b9;
    --brand-accent:      #f39c12;
    --brand-accent-hover: #e67e22;

    /* Grises y Neutros */
    --neutral-50:  #f8f9fa;
    --neutral-100: #eef2f6;
    --neutral-200: #dee2e6;
    --neutral-600: #64748b;
    --neutral-900: #1e293b;

    /* Fondos */
    --bg-body: #f4f6f9;
    --bg-card: #ffffff;

    /* Tipografía */
    --font-main: 'Poppins', 'Segoe UI', system-ui, sans-serif;
    --font-size-base: 1rem;
    --line-height-base: 1.6;

    /* Bordes y Radios */
    --radius-sm:   10px;
    --radius-md:   16px;
    --radius-lg:   24px;
    --radius-pill: 50px;

    /* Sombras */
    --shadow-sm:  0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-md:  0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-lg:  0 20px 50px rgba(0, 0, 0, 0.12);

    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-std:  0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- TIPOGRAFÍA GLOBAL (Poppins desde Google Fonts) --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

body {
    font-family: var(--font-main);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--neutral-900);
    background-color: var(--bg-body);
}

/* --- UTILIDADES GLOBALES DE MARCA --- */
.text-brand    { color: var(--brand-primary) !important; }
.text-accent   { color: var(--brand-accent) !important; }
.bg-brand      { background-color: var(--brand-primary) !important; }
.bg-accent     { background-color: var(--brand-accent) !important; }

/* --- BOTONES DE MARCA --- */
.btn-brand {
    background-color: var(--brand-primary);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    font-weight: 700;
    transition: all var(--transition-fast);
    box-shadow: 0 6px 20px rgba(26, 82, 118, 0.25);
}
.btn-brand:hover {
    background-color: var(--brand-primary-hover);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(26, 82, 118, 0.35);
}

.btn-accent {
    background-color: var(--brand-accent);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    font-weight: 700;
    transition: all var(--transition-fast);
    box-shadow: 0 6px 20px rgba(243, 156, 18, 0.3);
}
.btn-accent:hover {
    background-color: var(--brand-accent-hover);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(243, 156, 18, 0.4);
}

/* --- CARDS GLOBALES --- */
.card-brand {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.card-brand:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

/* --- SECCIÓN SEPARADOR VISUAL (Divider) --- */
.section-divider {
    width: 60px;
    height: 4px;
    background: var(--brand-primary);
    border-radius: 2px;
    margin: 12px auto 0;
}

/* --- MICRO-ANIMACIONES (Animate.css helper) --- */
.hover-lift {
    transition: transform var(--transition-fast);
}
.hover-lift:hover {
    transform: translateY(-4px);
}