/* Índice Brand Tokens (Marketing 2025)
   Este archivo redefine tokens y componentes base para alinear la landing al ERP.
*/
:root {
    /* Paleta requerida */
    --primary: #1f4d9f;
    --logo-yellow: #ffd650;
    --logo-green: #2bb673;
    --logo-red: #e74c3c;
    --violet: #6f42c1;
    /* para Fintech */

    /* Superficies */
    --bg-surface: #f9fafb;
    --bg-card: #ffffff;

    /* Geometría y elevación */
    --radius: 16px;
    --shadow: 0 2px 10px rgba(15, 23, 42, 0.06);

    /* Mapear a variables existentes en el sitio */
    --brand: var(--primary);
    --seasalt: var(--bg-surface);
    --card: var(--bg-card);
}

/* Fuente global (ya se carga Inter desde header) */
body {
    font-family: Inter, Arial, sans-serif;
}

/* Componentes reutilizables */
.card-min {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.btn-brand {
    background: var(--brand);
    border-color: var(--brand);
}

.btn-ghost {
    border-color: var(--brand);
    color: var(--brand);
}

.lead-soft {
    color: var(--muted, #6b7280);
}

/* Píldora de pilar */
.pilar-icon {
    border-radius: 14px;
}

/* Hero y superficies */
.bg-surface {
    background: var(--bg-surface) !important;
}

.bg-card {
    background: var(--bg-card) !important;
}

/* Accesibilidad: foco visible coherente */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* Hero illustration styling */
.hero-illustration {
    max-height: 420px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    object-fit: contain;
}

/* Utilitarios de color adicionales */
.bg-violet {
    background-color: var(--violet) !important;
}

.text-violet {
    color: var(--violet) !important;
}

/* ---- Módulos 2025: cartas modernas y niveles ---- */
/* Espaciado utilitario */
.py-6 { padding-top: 4rem; padding-bottom: 4rem; }

/* Card moderna de módulo */
.module-card-modern {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid #e5e7eb;
}
.module-card-modern:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.module-card-modern .module-icon {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

/* Tarjeta de nivel (Controla / Escala / Corporativiza) */
.card-level {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.05);
    transition: 0.3s;
    border: 1px solid #e5e7eb;
}
.card-level:hover { transform: translateY(-4px); }