/* Nanametztli — estilos custom · v0.15.0 */

@font-face {
    font-family: 'BigJohnPRO';
    src: url('../fonts/BigJohnPRO-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'BigJohnPRO';
    src: url('../fonts/BigJohnPRO-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'BigJohnPRO';
    src: url('../fonts/BigJohnPRO-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --nm-turquesa: #009193;
    --nm-magenta:  #B60C98;
    --nm-azul:     #002060;

    --nm-font-display: 'BigJohnPRO', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Tipografía display — BigJohnPRO en títulos y elementos de marca */
h1, h2, h3, h4, h5, h6,
.site-title, .site-title a,
.entry-title, .entry-title a,
.widget-title,
.elementor-heading-title,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6 {
    font-family: var(--nm-font-display);
}

/* Menú principal — BigJohnPRO + tamaño aumentado */
.main-navigation .menu > li > a,
.main-navigation .main-nav > ul > li > a {
    font-family: var(--nm-font-display);
    font-size: 1.125rem;
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .main-navigation .menu > li > a,
    .main-navigation .main-nav > ul > li > a {
        font-size: 1rem;
    }
}

/* Defensa: evitar scroll horizontal accidental por desbordes puntuales */
body {
    overflow-x: hidden;
}

/* Móvil: mostrar la imagen del header completa (no recortada por "cover").
   El "cover" de Elementor estaba escalando la imagen 1920x460 al alto de la
   sección y recortando los lados en pantallas angostas. */
@media (max-width: 767px) {
    /* Header BG en móvil: imagen completa (contain) + relleno magenta de marca
       en los espacios superior/inferior que deja el aspect-ratio 4:1. */
    .elementor-element.elementor-element-8401adf > .elementor-background-overlay {
        background-size: contain !important;
        background-color: var(--nm-magenta) !important;
    }

    /* Logo del header en móvil — widget 88e1deb (b5ab912 es la versión
       desktop, oculta por responsive visibility de Elementor).
       Verificado por el usuario en DevTools que esta regla aplica. */
    .elementor-22 .elementor-element.elementor-element-88e1deb {
        position: relative;
        top: 50px !important;
    }
    .elementor-22 .elementor-element.elementor-element-88e1deb img {
        width: 70% !important;
        height: auto !important;
    }

    /* El logo desplazado con top: 50px tapaba el botón hamburguesa del nav
       de GeneratePress (queda visualmente debajo y le robaba el clic).
       Subir el nav a un stacking context propio por encima. */
    .main-navigation {
        position: relative;
        z-index: 100;
    }
}