/* ==========================================================================
   Old Mackayans Network - Design System & UI Engine
   Basado en la identidad corporativa de The Mackay School & Old Mackayans
   ========================================================================== */

/* 1. Variables y Tokens de Diseño */
:root {
    /* Paleta Principal */
    --om-primary: #0f1b59;
    --om-primary-dark: #0a113b;
    --om-primary-light: #1a2c8a;
    --om-gold: #c5a977;
    --om-gold-hover: #b09664;
    --om-gold-light: #f7f3ec;
    --om-gold-gradient: linear-gradient(135deg, #c5a977 0%, #dfc89f 100%);
    --om-navy-gradient: linear-gradient(135deg, #0a113b 0%, #17277a 100%);
    --om-dark: #121624;
    --om-dark-surface: #1a2035;

    /* Superficies y Neutros */
    --om-bg: #f8fafc;
    --om-surface: #ffffff;
    --om-surface-subtle: #f1f5f9;
    --om-border: #e2e8f0;
    --om-border-hover: #cbd5e1;

    /* Tipografía y Textos */
    --om-text-main: #1e293b;
    --om-text-muted: #64748b;
    --om-text-light: #94a3b8;
    --om-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --om-font-heading: 'Montserrat', sans-serif;

    /* Sombras Premium */
    --om-shadow-xs: 0 1px 2px 0 rgba(15, 27, 89, 0.05);
    --om-shadow-sm: 0 4px 12px 0 rgba(15, 27, 89, 0.06);
    --om-shadow-md: 0 10px 25px -3px rgba(15, 27, 89, 0.08), 0 4px 6px -2px rgba(15, 27, 89, 0.04);
    --om-shadow-lg: 0 20px 40px -4px rgba(15, 27, 89, 0.12), 0 8px 16px -4px rgba(15, 27, 89, 0.06);
    --om-shadow-gold: 0 8px 20px 0 rgba(197, 169, 119, 0.35);

    /* Radios */
    --om-radius-sm: 8px;
    --om-radius-md: 14px;
    --om-radius-lg: 20px;
    --om-radius-full: 9999px;

    /* Transiciones */
    --om-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    --om-transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 2. Reseteo y Base Global */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;

    /* ESCALA TIPOGRÁFICA FLUIDA
       ------------------------------------------------------------------
       Casi toda la interfaz se dimensiona en rem (tipografías, paddings,
       alturas de control). Como el rem se ancla al tamaño de raíz, y la
       raíz estaba en los 16px por defecto del navegador, un mismo botón
       medía igual en un monitor de 1920 que en un portátil de 1280: en el
       chico ocupaba proporcionalmente mucho más y "se veía todo grande".

       Al hacer fluida la raíz, TODA la interfaz se reescala con el ancho
       disponible sin tocar ninguna otra regla.

       La recta está calibrada para dejar intacto lo que ya se veía bien:
         1440px -> 16px   (referencia actual, sin cambios)
         1366px -> 15.5px
         1280px -> 15px
         1152px -> 14.5px (mínimo)
         1680px+ -> 17px  (máximo, para que no se infle en pantallas grandes)
       ------------------------------------------------------------------ */
    font-size: clamp(14.5px, 7px + 0.625vw, 17px);
}

/* Por debajo de 992px el diseño ya pasa a una columna y el contenido manda
   sobre el ancho: ahí la escala vuelve al tamaño íntegro, para no encoger el
   texto ni las áreas táctiles en móvil y tablet. */
@media (max-width: 991.98px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: var(--om-font-sans);
    background-color: var(--om-bg);
    color: var(--om-text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--om-font-heading);
    font-weight: 700;
    color: var(--om-primary-dark);
    letter-spacing: -0.02em;
}

.hero-slider-section h1,
.hero-slider-section h2,
.hero-slider-section h3,
.hero-slider-section .hero-main-title,
.hero-slider-section .hero-title {
    color: #ffffff !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.85);
}

a {
    color: var(--om-primary);
    text-decoration: none;
    transition: var(--om-transition);
}

a:hover {
    color: var(--om-gold);
}

/* 3. Animaciones */
@keyframes kenburns {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
}

@keyframes float {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
}

@keyframes pulseGlow {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 4. Tarjetas y Superficies Premium */
.card-premium {
    background: var(--om-surface);
    border: 1px solid var(--om-border);
    border-radius: var(--om-radius-md);
    box-shadow: var(--om-shadow-sm);
    transition: var(--om-transition);
    overflow: hidden;
}

.card-premium:hover {
    transform: translateY(-6px);
    box-shadow: var(--om-shadow-lg);
    border-color: rgba(197, 169, 119, 0.4);
}

.card-glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--om-radius-md);
    box-shadow: var(--om-shadow-md);
}

.hover-lift {
    transition: var(--om-transition);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--om-shadow-md);
}

/* 5. Botones Corporativos */
.btn-om-gold {
    background: var(--om-gold-gradient);
    color: #ffffff !important;
    font-weight: 600;
    border: none;
    border-radius: var(--om-radius-full);
    padding: 0.75rem 1.75rem;
    box-shadow: var(--om-shadow-gold);
    transition: var(--om-transition-bounce);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-om-gold:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 25px 0 rgba(197, 169, 119, 0.5);
    color: #ffffff !important;
}

.btn-om-gold:active {
    transform: translateY(0) scale(0.98);
}

.btn-om-navy {
    background: var(--om-primary);
    color: #ffffff !important;
    font-weight: 600;
    border: none;
    border-radius: var(--om-radius-full);
    padding: 0.75rem 1.75rem;
    box-shadow: 0 4px 14px rgba(15, 27, 89, 0.3);
    transition: var(--om-transition-bounce);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-om-navy:hover {
    background: var(--om-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 27, 89, 0.4);
    color: #ffffff !important;
}

.btn-om-outline {
    background: transparent;
    color: var(--om-primary);
    font-weight: 600;
    border: 2px solid var(--om-primary);
    border-radius: var(--om-radius-full);
    padding: 0.65rem 1.5rem;
    transition: var(--om-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-om-outline:hover {
    background: var(--om-primary);
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* 6. Badges e Insignias */
.badge-gold {
    background: var(--om-gold-light);
    color: #8c6e3b;
    border: 1px solid rgba(197, 169, 119, 0.35);
    font-weight: 600;
    border-radius: var(--om-radius-full);
    padding: 0.35em 0.85em;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.badge-navy {
    background: rgba(15, 27, 89, 0.08);
    color: var(--om-primary);
    border: 1px solid rgba(15, 27, 89, 0.15);
    font-weight: 600;
    border-radius: var(--om-radius-full);
    padding: 0.35em 0.85em;
    font-size: 0.78rem;
}

.badge-opentowork {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    font-weight: 600;
    border-radius: var(--om-radius-full);
    padding: 0.35em 0.85em;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    display: inline-block;
    animation: pulseGlow 2s infinite;
}

/* 7. Encabezados de Sección */
.section-heading-wrapper {
    text-align: center;
    margin-bottom: 3.5rem;
    position: relative;
}

.section-title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--om-primary-dark);
    margin-bottom: 0.75rem;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--om-text-muted);
    max-width: 650px;
    margin: 0 auto;
}

.section-divider {
    width: 60px;
    height: 4px;
    background: var(--om-gold-gradient);
    margin: 1.25rem auto 0;
    border-radius: 2px;
}

/* 8. Shell de Navegación (Sidebar & App Layout) */
.app-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.app-sidebar {
    width: 280px;
    background: var(--om-primary-dark);
    background: linear-gradient(180deg, #0a113b 0%, #070c28 100%);
    color: #ffffff;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    z-index: 1020;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    transition: var(--om-transition);
}

.app-sidebar .nav-link {
    color: rgba(255, 255, 255, 0.75);
    padding: 0.75rem 1rem;
    border-radius: var(--om-radius-sm);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
    transition: var(--om-transition);
}

.app-sidebar .nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

.app-sidebar .nav-link.active {
    color: #ffffff !important;
    background: rgba(197, 169, 119, 0.15) !important;
    border-left: 4px solid var(--om-gold);
    font-weight: 600;
}

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--om-bg);
}

/* 9. Navbar Superior */
.top-navbar {
    background: #ffffff;
    border-bottom: 1px solid var(--om-border);
    padding: 0.75rem 1.5rem;
    box-shadow: var(--om-shadow-xs);
    position: sticky;
    top: 0;
    z-index: 1010;
}

.public-navbar {
    background: rgba(10, 17, 59, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(197, 169, 119, 0.25);
    padding: 0.85rem 0;
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: var(--om-transition);
}

.public-navbar .nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: var(--om-transition);
}

.public-navbar .nav-link:hover {
    color: var(--om-gold);
}

/* 10. Footer Corporativo */
.app-footer {
    background: #0a113b;
    background: linear-gradient(180deg, #0d1544 0%, #060a22 100%);
    color: #cbd5e1;
    padding: 4.5rem 0 2rem;
    border-top: 3px solid var(--om-gold);
    margin-top: auto;
}

.footer-heading {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.75rem;
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 2px;
    background: var(--om-gold);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: #94a3b8;
    transition: var(--om-transition);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-links a:hover {
    color: var(--om-gold);
    transform: translateX(4px);
}

.footer-social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: var(--om-transition);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-social-btn:hover {
    background: var(--om-gold);
    color: #0a113b;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(197, 169, 119, 0.4);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 3rem;
    padding-top: 1.75rem;
    font-size: 0.9rem;
}

/* 11. Adaptabilidad y Media Queries */
@media (max-width: 991.98px) {
    .app-sidebar-desktop {
        display: none !important;
    }

    .top-navbar {
        padding: 0.6rem 1rem;
    }
}

@media (min-width: 992px) {
    .sidebar-mobile-toggle {
        display: none !important;
    }
}

/* Menús Desplegables de Lujo (Dropdowns) - Selección Traslúcida */
.dropdown-menu-dark-luxury,
.dropdown-menu[style*="#111827"] {
    background: #111827 !important;
    border: 1px solid rgba(197, 160, 89, 0.35) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 1px rgba(197, 160, 89, 0.4) !important;
}

.dropdown-menu-dark-luxury .dropdown-item,
.dropdown-menu[style*="#111827"] .dropdown-item {
    color: rgba(255, 255, 255, 0.9) !important;
    background-color: transparent !important;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.dropdown-menu-dark-luxury .dropdown-item:hover,
.dropdown-menu-dark-luxury .dropdown-item:focus,
.dropdown-menu[style*="#111827"] .dropdown-item:hover,
.dropdown-menu[style*="#111827"] .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    transform: translateX(3px);
}

.dropdown-menu-dark-luxury .dropdown-item:active,
.dropdown-menu[style*="#111827"] .dropdown-item:active {
    background-color: rgba(197, 160, 89, 0.28) !important;
    color: #ffffff !important;
}