/* ==========================================================================
   MAYAN WORLD · MANUAL DE DISEÑO INSTITUCIONAL — Q360 UI/UX
   Versión 1.0 — Tokens Globales de Diseño Institucional
   ========================================================================== */

:root {
    /* --- 1. Paleta Cromática Oficial Institucional --- */
    --mw-forest: #10251D;    /* Navbar, footer y fondos oscuros */
    --mw-green: #1B4933;     /* Botones y elementos interactivos primarios */
    --mw-gold: #C9A05B;      /* Acentos, CTA, bordes activos y detalles de énfasis */
    --mw-ivory: #F7F3EC;     /* Fondos principales de página y secciones */
    --mw-white: #FFFEFA;     /* Tarjetas, modales y formularios */
    --mw-sage: #64766C;      /* Textos secundarios, metadatos y etiquetas */
    --mw-ink: #202722;       /* Títulos y texto principal de lectura */

    /* --- 2. Sistema Tipográfico Oficial --- */
    --mw-font-display: 'Cormorant Garamond', Georgia, serif;
    --mw-font-body: 'Manrope', Arial, sans-serif;

    /* --- 3. Sistema de Espaciado y Layout --- */
    --mw-container: 1680px;
    --mw-container-compact: 1240px;
    --mw-container-prose: 960px;
    --mw-section-space: clamp(56px, 7vw, 112px);
    --mw-card-gap: 24px;
    --mw-radius-card: 12px;
    --mw-radius-button: 8px;
    --mw-radius-pill: 999px;

    /* --- 4. Alturas de Componentes Institucionales --- */
    --mw-btn-height: 48px;
    --mw-input-height: 48px;
    --mw-navbar-height: 78px;
    --mw-navbar-height-mobile: 66px;

    /* --- 5. Animaciones y Transiciones --- */
    --mw-transition: 220ms ease;
    --mw-transition-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);

    /* --- 6. Sombras Institucionales Suaves --- */
    --mw-shadow-sm: 0 2px 8px rgba(16, 37, 29, 0.04);
    --mw-shadow-md: 0 8px 24px -4px rgba(16, 37, 29, 0.08);
    --mw-shadow-lg: 0 18px 40px -8px rgba(16, 37, 29, 0.12);

    /* --- Mapeo de Compatibilidad Semántica --- */
    --jade-950: var(--mw-forest);
    --jade-900: var(--mw-forest);
    --jade-800: #143D2A;
    --jade-700: var(--mw-green);
    --jade-600: var(--mw-green);
    --jade-300: #7CB895;
    --jade-100: #EAF3EE;

    --stone-50: var(--mw-ivory);
    --stone-100: #EFE8DD;
    --stone-200: #E2D9CB;
    --stone-400: #9E9382;

    --ink: var(--mw-ink);
    --muted: var(--mw-sage);
    --gold: var(--mw-gold);

    --primary-color: var(--mw-green);
    --primary-dark: var(--mw-forest);
    --secondary-color: var(--mw-sage);
    --light-color: var(--mw-ivory);
    --dark-color: var(--mw-forest);

    --font-family-sans: var(--mw-font-body);
    --font-family-display: var(--mw-font-display);

    --border-radius: var(--mw-radius-button);
    --border-radius-sm: 6px;
    --border-radius-lg: var(--mw-radius-card);
    --border-radius-xl: 16px;
    --border-radius-pill: var(--mw-radius-pill);

    /* --- Scrim Fotográfico Cinematográfico --- */
    --scrim-hero: linear-gradient(180deg, rgba(16, 37, 29, 0.52) 0%, rgba(16, 37, 29, 0.25) 40%, rgba(16, 37, 29, 0.75) 100%);
    --scrim-card: linear-gradient(180deg, rgba(16, 37, 29, 0.0) 45%, rgba(16, 37, 29, 0.75) 100%);

    /* --- Puente Bootstrap 5.3 --- */
    --bs-primary: var(--mw-green);
    --bs-primary-rgb: 27, 73, 51;
    --bs-primary-text-emphasis: var(--mw-forest);
    --bs-primary-bg-subtle: var(--jade-100);
    --bs-primary-border-subtle: var(--jade-300);
    --bs-secondary: var(--mw-sage);
    --bs-secondary-rgb: 100, 118, 108;
    --bs-body-bg: var(--mw-ivory);
    --bs-body-color: var(--mw-ink);
    --bs-body-font-family: var(--mw-font-body);
    --bs-link-color: var(--mw-green);
    --bs-link-hover-color: var(--mw-gold);
    --bs-focus-ring-color: rgba(201, 160, 91, 0.28);
}

/* Base Body Styles */
html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: var(--mw-font-body);
    background-color: var(--mw-ivory);
    color: var(--mw-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    max-width: 100%;
}

/* Contenedores Institucionales Q360 */
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    width: 100%;
    padding-right: 24px;
    padding-left: 24px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container, .container-sm { max-width: 540px; }
}
@media (min-width: 768px) {
    .container, .container-sm, .container-md { max-width: 720px; }
}
@media (min-width: 992px) {
    .container, .container-sm, .container-md, .container-lg { max-width: 960px; }
}
@media (min-width: 1200px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1240px; }
}
@media (min-width: 1400px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: var(--mw-container, 1680px) !important;
        padding-left: clamp(24px, 3.8vw, 64px) !important;
        padding-right: clamp(24px, 3.8vw, 64px) !important;
    }
}

@media (max-width: 768px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* Headings Institucionales */
h1, h2, h3 {
    font-family: var(--mw-font-display);
    font-weight: 500;
    color: var(--mw-ink);
    letter-spacing: -0.02em;
}

/* Accesibilidad: Foco visible */
:focus-visible {
    outline: 3px solid var(--mw-gold);
    outline-offset: 3px;
}

/* Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}