/* =====================================================
   DC MOBILE FIX
   Corrige el desborde horizontal (scroll lateral) en
   celular causado por:
   1) Conflicto de display/flex entre main.css y
      dc-nav-auth.css en el menú móvil (#navmenu > ul)
   2) Falta total de estilos para el nuevo footer
      (.footer-brand, .footer-nav, .footer-bottom, etc.)
   Cargar DESPUÉS de main.css, custom.css y
   dc-nav-auth.css.
   ===================================================== */

/* Evita que cualquier elemento ancho empuje el body */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* -----------------------------------------------------
   1) HEADER / NAVMENU MÓVIL

   Causa raíz del panel "roto" y del scroll ancho:
   dc-nav-auth.css fija:
     #navmenu        { position: static !important; }
     #navmenu > ul   { display: flex !important; position: static !important; }
   ...para TODOS los tamaños de pantalla, sin excepción.

   Pero main.css depende de que, al activar el menú
   móvil, .mobile-nav-active .navmenu pase a
   position: fixed; inset:0 (pantalla completa) y
   .navmenu > ul pase a display:block. Como el
   "!important" de dc-nav-auth.css gana, el menú móvil
   nunca se convierte en overlay de pantalla completa:
   queda flotando con position:static dentro del
   header-container (que tiene border-radius:50px),
   de ahí el "blob" redondeado y el ancho extraño.
   ----------------------------------------------------- */
@media (max-width: 1199.98px) {
    /* Por defecto (menú cerrado): mantenemos oculto */
    #navmenu > ul {
        display: none !important;
        flex-wrap: wrap !important;
    }

    /* Menú abierto: forzamos el overlay fixed de
       pantalla completa, por encima del !important
       de dc-nav-auth.css */
    .mobile-nav-active #navmenu {
        position: fixed !important;
        inset: 0 !important;
        width: 100%;
        height: 100%;
        background: rgba(33, 37, 41, 0.8);
        z-index: 9997;
    }

    .mobile-nav-active #navmenu > ul {
        display: block !important;
        position: absolute !important;
        inset: 60px 20px 20px 20px !important;
        width: auto;
        max-width: calc(100% - 40px);
        max-height: calc(100% - 80px);
        overflow-y: auto;
        background-color: var(--nav-mobile-background-color, #fff);
        border-radius: 6px;
        padding: 10px 0;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    }

    /* Dentro del panel móvil, los <li> deben ocupar
       todo el ancho disponible y nunca desbordar */
    #navmenu > ul > li {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    #navmenu .nav-auth-item > a,
    #navmenu .nav-auth-cta {
        white-space: normal;
        word-break: break-word;
    }

    #navmenu .nav-auth-cta {
        margin-left: 0 !important;
        box-sizing: border-box;
    }

    /* El header-container con border-radius:50px no debe
       deformarse ni quedar visible detrás del overlay */
    .mobile-nav-active .header-container {
        border-radius: 50px;
        overflow: visible;
    }

    /* -------------------------------------------------
       Botones "Iniciar sesión" / "Registrarse" en móvil
       Se separan del resto del menú con su propia franja,
       y se agrandan para ser más fáciles de tocar.
       ------------------------------------------------- */
    #navmenu .nav-auth-divider {
        display: block !important;
        width: 100%;
        height: 1px;
        margin: 14px 0 16px;
        background: color-mix(in srgb, var(--default-color), transparent 88%);
    }

    #navmenu .nav-auth-item {
        padding: 0 20px;
    }

    #navmenu .nav-auth-item:first-of-type {
        margin-top: 0;
    }

    /* "Iniciar sesión": botón outline con color de acento,
       ancho completo */
    #navmenu .nav-auth-item > a:not(.nav-auth-cta) {
        justify-content: center;
        width: 100%;
        padding: 13px 20px !important;
        border-radius: 10px;
        border: 1.5px solid color-mix(in srgb, var(--accent-color), transparent 55%);
        font-weight: 600;
        color: var(--accent-color);
        background: color-mix(in srgb, var(--accent-color), transparent 95%);
        transition: border-color 0.2s, color 0.2s, background 0.2s;
    }

    #navmenu .nav-auth-item > a:not(.nav-auth-cta):hover,
    #navmenu .nav-auth-item > a:not(.nav-auth-cta):active {
        border-color: var(--accent-color);
        color: #fff;
        background: var(--accent-color);
    }

    /* "Registrarse": CTA sólido, ancho completo, más alto */
    #navmenu .nav-auth-cta {
        justify-content: center;
        width: 100%;
        margin: 10px 0 0 !important;
        padding: 14px 20px !important;
        border-radius: 10px;
        font-size: 1rem;
        font-weight: 700;
        box-shadow: 0 4px 14px color-mix(in srgb, var(--dch-accent, #5d8c3f), transparent 70%);
    }

    /* Último item del menú (zona de auth) con un poco
       más de aire respecto al borde del panel */
    #navmenu > ul > li:last-child {
        margin-bottom: 6px;
    }
}

/* -----------------------------------------------------
   2) FOOTER — sin estos estilos el footer no tiene
   layout y desborda en móvil (logo + tagline + bloque
   derecho en una sola fila sin wrap).
   ----------------------------------------------------- */
.footer {
    overflow-x: hidden;
}

.footer-brand {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer-logo img {
    max-height: 40px;
    max-width: 100%;
}

.footer-tagline {
    margin-top: 14px;
    max-width: 320px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.footer-socials {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
    color: var(--default-color);
    flex-shrink: 0;
    transition: 0.3s;
}

.footer-socials a:hover {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

.footer-brand-right {
    text-align: right;
    flex-shrink: 0;
    max-width: 100%;
}

.footer-brand-right p {
    font-family: var(--heading-font);
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
    color: var(--heading-color);
    word-break: break-word;
}

.footer-nav h4 {
    font-size: 1rem;
    margin-bottom: 14px;
    color: var(--heading-color);
}

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

.footer-nav ul li {
    margin-bottom: 10px;
    font-size: 0.9rem;
    word-break: break-word;
}

.footer-nav ul li a {
    color: color-mix(in srgb, var(--default-color), transparent 25%);
    text-decoration: none;
    transition: 0.3s;
}

.footer-nav ul li a:hover {
    color: var(--accent-color);
}

.footer-nav ul li i {
    margin-right: 6px;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    font-size: 0.85rem;
}

.footer-bottom .copyright,
.footer-bottom .credits {
    margin: 0;
    max-width: 100%;
    word-break: break-word;
}

/* En móvil: todo se apila y centra, sin overflow */
@media (max-width: 767.98px) {
    .footer-brand {
        flex-direction: column;
    }

    .footer-brand-right {
        text-align: left;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-nav .row > div {
        margin-bottom: 24px;
    }
}