/* --------------------------------------------------------------------------
   UI COMPARTIDA — clases genéricas sin prefijo de página
   --------------------------------------------------------------------------
   Extraído de components/hero-home.css. Son nombres muy genéricos (.badge,
   .avatar, .stat-label, .search-form...) que se escribieron para la home
   pero que OTRAS páginas ya estaban usando sin saberlo: al no llevar prefijo
   ni estar dentro de un contenedor, aplican en toda la web. Por eso hasta
   ahora cada página cargaba el CSS de la home aunque no tuviera hero.

   Se carga en la MISMA posición que ocupaba hero-home.css para no alterar
   el orden de la cascada.

   TODO: renombrarlas con prefijo (.rig-badge, .rig-avatar...) o moverlas a
   base.css. Mientras tanto, cuidado al tocarlas: afectan a varias páginas.
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--brand-accent);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .12em;
    background: rgba(129, 140, 248, .08);
    border: 1px solid rgba(129, 140, 248, .22);
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 28px;
}

.badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--brand-accent);
    border-radius: var(--radius-circle);
    animation: pulse 2s ease-in-out infinite;
}

.avatar {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--brand-accent), var(--amber));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Teko', sans-serif;
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    color: var(--text-white);
    flex-shrink: 0;
}

.stats-row {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.stat-label {
    display: block;
    font-size: var(--fs-2xs);
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 5px;
}

.stat-value {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--text-white);
}

.highlight {
    color: var(--brand-accent);
    font-weight: var(--fw-bold);
}