@charset "UTF-8";
/**
 * Sistema de Estilos y Tokens Corporativos - Sintrameritos (Alta Vibridad & Animaciones 2026)
 * Paleta Oficial: Rojo Coral (#e13c2d) y Gris Neutro (#525252 / #6b6b6b)
 */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Colores Principales del Logo */
    --rojo-merito:        #e13c2d;
    --rojo-merito-oscuro: #b82b1d;
    --rojo-merito-luz:    #ff5242;
    --rojo-glow:          rgba(225, 60, 45, 0.35);

    /* Gris Neutro Puro (sin tono azul) */
    --gris-oscuridad:     #525252;
    --gris-acero:         #6b6b6b;
    --gris-acero-med:     #8a8a8a;
    --gris-acero-claro:   #a8a8a8;

    /* Superficies y Neutros */
    --superficie-blanca:  #ffffff;
    --superficie-gris:    #f8fafc;
    --border-color:       #e2e8f0;

    /* Geometría y Sombras Dinámicas */
    --radius-lg:          24px;
    --radius-md:          16px;
    --radius-pill:        50px;
    --sombra-viva:        0 15px 35px -5px rgba(225, 60, 45, 0.18);
    --sombra-card:        0 10px 30px -5px rgba(82, 82, 82, 0.08);

    /* Canales RGB para uso en rgba() con opacidad personalizada */
    --rojo-merito-rgb:     225, 60, 45;
    --gris-oscuridad-rgb:  82, 82, 82;
    --gris-acero-rgb:      107, 107, 107;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    background-color: var(--superficie-gris);
    color: var(--gris-oscuridad);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Keyframes de Animaciones Vibrantes */
@keyframes levitarFloat {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-10px); }
}

@keyframes pulsoBrillo {
    0% { box-shadow: 0 0 0 0 rgba(225, 60, 45, 0.6); }
    70% { box-shadow: 0 0 0 12px rgba(225, 60, 45, 0); }
    100% { box-shadow: 0 0 0 0 rgba(225, 60, 45, 0); }
}

@keyframes ondaResplandor {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ─────────────────── UTILIDADES ADAPTATIVAS Y RESPONSIVE ─────────────────── */
.container {
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (max-width: 576px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Contenedor Adaptativo de Tablas (Evita Desbordamiento en Móvil) */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

/* Elementos de Medios e Imágenes Fluidas */
img, svg, video {
    max-width: 100%;
    height: auto;
}

/* Botones e Inputs con Área Táctil Óptima (Touch-Friendly) */
button, input, select, textarea, .btn, a.btn-action-icon {
    touch-action: manipulation;
}

/* Modales Dinámicos y Adaptables */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-overlay.show {
    display: flex;
}

.modal-box {
    background: var(--superficie-blanca);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    border: 2px solid var(--rojo-merito);
    position: relative;
}

@media (max-width: 576px) {
    .modal-box {
        padding: 1.4rem;
        border-radius: 18px;
    }
}