/**
 * site-theme.css — sistema de diseño compartido: colores, tipografía,
 * íconos y tarjetas. Se incluye en todas las páginas del sitio.
 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&display=swap');

:root {
    --navy: #0A2342;
    --navy-deep: #051426;
    --navy-mid: #16305A;
    --gold: #FFD700;
    --gold-deep: #A6790A;
    --paper: #F7F5F0;      /* fondo cálido, no gris puro */
    --ink: #1B2430;        /* texto principal, no negro puro */
    --ink-soft: #5B6472;   /* texto secundario */
    --line: #E7E2D6;       /* bordes sutiles */

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 6px 18px -8px rgba(5, 20, 38, .18);
    --shadow-md: 0 20px 44px -18px rgba(5, 20, 38, .35);
}

/* ── Fondo base ── */
body { background: var(--paper); color: var(--ink); }

/* ── Tipografía ── */
/* Poppins para títulos (más moderna/geométrica), Inter para el resto del texto. */
h1, h2, h3, h4,
.font-display {
    font-family: 'Poppins', 'Inter', sans-serif;
    text-wrap: balance;
    letter-spacing: -0.01em;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold-deep);
}
.eyebrow.on-dark { color: var(--gold); }
.section-kicker {
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: var(--gold);
    margin: 14px auto 0;
}
.section-kicker.left { margin-left: 0; }

/* ── Insignia de ícono: círculo de color + ícono de línea ── */
.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    flex-shrink: 0;
}
.icon-badge svg { width: 26px; height: 26px; stroke-width: 1.75; }
.icon-badge.navy    { background: rgba(10,35,66,.08);  color: var(--navy); }
.icon-badge.gold    { background: rgba(255,215,0,.16); color: var(--gold-deep); }
.icon-badge.amber   { background: rgba(225,163,61,.16); color: #B4791E; }
.icon-badge.blue    { background: rgba(59,130,196,.14); color: #2A6390; }
.icon-badge.teal    { background: rgba(42,157,143,.14); color: #1F7A70; }
.icon-badge.violet  { background: rgba(124,92,191,.14); color: #6A4CB0; }
.icon-badge.on-dark { background: rgba(255,255,255,.1); color: var(--gold); }

/* ── Tarjetas ── */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.card.hoverable:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
    border-color: transparent;
}

/* ── Botones ── */
.btn-outline-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    border: 1.5px solid rgba(255,255,255,.35);
    color: #fff;
    transition: all .25s ease;
}
.btn-outline-dark:hover {
    background: #fff;
    color: var(--navy);
    border-color: #fff;
}

/* ── Utilidades de sección ── */
.section-tight { max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.text-balance { text-wrap: balance; }