/* ============================================================
   BASE.CSS
   Cimentación del sitio: reset, fuentes y variables globales.
   Esto se carga en TODAS las páginas.
   ============================================================ */

/* ---------- 1. FUENTES (GT Walsheim Pro del cliente) ---------- */
/* Las rutas apuntan a la carpeta fonts/ desde la raíz del sitio */
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('../fonts/GTWalsheimProRegular.woff2') format('woff2'),
         url('../fonts/GTWalsheimProRegular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('../fonts/GTWalsheimProBold.woff2') format('woff2'),
         url('../fonts/GTWalsheimProBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('../fonts/GTWalsheimPro-Black.woff2') format('woff2'),
         url('../fonts/GTWalsheimPro-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('../fonts/GTWalsheimPro-RegularOblique.woff2') format('woff2'),
         url('../fonts/GTWalsheimPro-RegularOblique.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* ---------- 2. RESET (basado en Josh W. Comeau) ---------- */
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
html, body {
    height: 100%;
}
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
a {
    text-decoration: none;
    color: inherit;
}
ul, ol {
    list-style: none;
    padding: 0;
}

/* ---------- 3. VARIABLES GLOBALES ---------- */
:root {
    /* Tipografía */
    --fuente-principal: 'GT Walsheim Pro', system-ui, sans-serif;

    /* Colores de marca (los iré ajustando con tus hex exactos) */
    --color-texto:        #2B2E4A;
    --color-blanco:       #FFFFFF;
    --color-negro:        #000000;

    /* Paletas por nivel (según tus notas de diseño) */
    --nuevos-primario:    #38539A;
    --nuevos-claro:       #6984C9;
    --nuevos-fondo:       #F1F2FF;

    --constructores-primario: #546223;
    --constructores-medio:    #889564;
    --constructores-claro:    #BCC7A4;

    /* --- Colores completos por nivel (para las páginas de intro) --- */
    /* NUEVOS */
    --nuevos-pagina:      #DAE0F1;   /* fondo de página */
    --nuevos-caja:        #304783;   /* caja de texto del banner */
    --nuevos-btn1:        #6984C9;   /* botón 1 (más oscuro) */
    --nuevos-btn2:        #8FA2D6;   /* botón 2 */
    --nuevos-btn3:        #A9B8E0;   /* botón 3 */
    --nuevos-btn4:        #C3CDEA;   /* botón 4 (más claro) */
    /* CONSTRUCTORES */
    --constructores-pagina: #ECF2D9;
    --constructores-caja:   #3F4A1A;
    --constructores-btn1:   #748730;
    --constructores-btn2:   #94AD3E;
    --constructores-btn3:   #AEC06A;
    --constructores-btn4:   #C6D398;
    /* LÍDERES */
    --lideres-primario:   #396E75;
    --lideres-pagina:     #CCE3E6;
    --lideres-caja:       #2A5359;
    --lideres-btn1:       #396E75;
    --lideres-btn2:       #498E97;
    --lideres-btn3:       #6FAAB1;
    --lideres-btn4:       #9AC6CB;

    /* Espaciados base (escala consistente) */
    --espacio-xs:  0.5rem;   /*  8px */
    --espacio-sm:  1rem;     /* 16px */
    --espacio-md:  1.5rem;   /* 24px */
    --espacio-lg:  2.5rem;   /* 40px */
    --espacio-xl:  4rem;     /* 64px */

    /* Radios y sombras reutilizables */
    --radio-boton: 16px;
    --sombra-suave: 0 4px 12px rgba(0, 0, 0, 0.12);

    /* Ancho máximo del contenido (el sitio no crece infinito) */
    --ancho-maximo: 1440px;
    /* Margen lateral estándar de TODO el proyecto (de tu Figma) */
    --margen-lateral: 80px;
    /* Área de contenido útil = 1440 - 80 - 80 = 1280px */

    /* --- Medidas exactas del diseño de Figma (frame 1440×1024) --- */
    --barra-alto:       100px;   /* alto de la bar-nav */
    --caja-pad-lat:     82px;    /* padding lateral de la caja azul */
    --caja-pad-vert:    72px;    /* padding vertical de la caja azul */
    --caja-desde-arriba: 73%;    /* la caja arranca al 73% del alto (Y752/1024) */
}

/* ============================================================
   PALETAS POR NIVEL · se activan con data-nivel en el <body>
   Vive aquí (base) para que TODAS las páginas la hereden:
   intros e internas. Cada nivel expone las mismas variables:
     --nivel  : color primario (títulos, miga, bordes)
     --pagina : fondo de la página
     --caja   : caja de texto del banner (intros)
     --btn1..4: tonos de botones, de oscuro a claro
   ============================================================ */
[data-nivel="nuevos"] {
    --nivel:  var(--nuevos-primario);
    --pagina: var(--nuevos-pagina);
    --caja:   var(--nuevos-caja);
    --btn1:   var(--nuevos-btn1);
    --btn2:   var(--nuevos-btn2);
    --btn3:   var(--nuevos-btn3);
    --btn4:   var(--nuevos-btn4);
}
[data-nivel="constructores"] {
    --nivel:  var(--constructores-primario);
    --pagina: var(--constructores-pagina);
    --caja:   var(--constructores-caja);
    --btn1:   var(--constructores-btn1);
    --btn2:   var(--constructores-btn2);
    --btn3:   var(--constructores-btn3);
    --btn4:   var(--constructores-btn4);
}
[data-nivel="lideres"] {
    --nivel:  var(--lideres-primario);
    --pagina: var(--lideres-pagina);
    --caja:   var(--lideres-caja);
    --btn1:   var(--lideres-btn1);
    --btn2:   var(--lideres-btn2);
    --btn3:   var(--lideres-btn3);
    --btn4:   var(--lideres-btn4);
}

/* ---------- 4. BASE DEL BODY ---------- */
body {
    font-family: var(--fuente-principal);
    color: var(--color-texto);
    background-color: var(--color-blanco);
}

/* Cuando un modal está abierto, se bloquea el scroll de la página
   (el JS añade esta clase al body). Oculta la barra de desplazamiento. */
body.sin-scroll {
    overflow: hidden;
}