/* ============================================================
   MILPBOOST - Estilos Personalizados para Movil
   Archivo: custom-mobile.css  (se carga DESPUES de main.css)

   Contiene:
   - Rediseno del panel de navegacion lateral (#navPanel)
   - Barra superior movil mas gruesa (#mobileHeader)
   - Banner de inicio mas alto (mejor encuadro de hexagonos)
   - Ajuste de la seccion inferior para compensar el header
   ============================================================ */

@media screen and (max-width: 840px) {

    /* =====================================================
       BARRA SUPERIOR MOVIL  (logo + nombre + hamburguesa)
       Mas gruesa y con acento vino (antes 44px y azul).
       ===================================================== */
    #mobileHeader {
        height: 60px;
        padding: 0 0.75em;
        background: rgba(10, 10, 11, 0.97);
        border-bottom: solid 1px rgba(161, 48, 69, 0.45);
        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
    }
    #mobileHeader .mobile-brand {
        gap: 0.7em;
        padding-left: 0.4em;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
    }
    #mobileHeader .mobile-brand img {
        height: 2.15em;
    }
    #mobileHeader .mobile-brand span {
        font-size: 1.2em;
        letter-spacing: 0.06em;
    }
    /* Hamburguesa en color vino (antes azul #245174) */
    #mobileHeader .toggle:before {
        background: linear-gradient(135deg, #8B2635 0%, #A13045 100%);
        border-radius: 8px;
        font-size: 17px;
        height: 2.35em;
        line-height: 2.35em;
        width: 3.4em;
        box-shadow: 0 2px 8px rgba(139, 38, 53, 0.5);
    }

    /* =====================================================
       PANEL DE NAVEGACION LATERAL  (#navPanel)
       ===================================================== */
    #navPanel {
        background: #141416;
        box-shadow: 6px 0 24px rgba(0, 0, 0, 0.6);
        z-index: 10002 !important;
    }

    /* Encabezado del panel (logo + nombre), alineado a la izquierda */
    #navPanel .brand {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.75em;
        padding: 1.35em 1.25em;
        border-bottom: solid 1px rgba(255, 255, 255, 0.08);
        background: linear-gradient(135deg, rgba(38, 56, 139, 0.62) 0%, rgb(17, 17, 74) 70%);
    }
    #navPanel .brand img {
        height: 2.1em;
        width: auto;
        filter: brightness(1.1);
    }
    #navPanel .brand span {
        color: #fff;
        font-family: "Montserrat", sans-serif;
        font-weight: 700;
        font-size: 1.15em;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    #navPanel nav {
        display: block;
        padding: 0.5em 0 1.5em 0;
    }

    /* Enlaces del menu (base) - sin lineas divisorias pesadas */
    #navPanel .link {
        display: block;
        border: 0;
        border-left: 3px solid transparent;
        color: #fff;
        height: auto;
        line-height: 1.25;
        padding: 0.9em 1.25em;
        font-size: 0.98em;
        text-decoration: none;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    /* Items de primer nivel (Inicio, Contactar): mas peso visual */
    #navPanel a.link.depth-0 {
        font-weight: 600;
        padding-left: 1.5em;
    }

    /* Sub-items (hijos de una categoria): indentados y algo mas tenues */
    #navPanel a.link.depth-1,
    #navPanel a.link.depth-2 {
        color: var(--color-gray-light);
        font-size: 0.92em;
        padding-left: 2.5em;
        position: relative;
    }

    /* La indentacion se controla por padding: anulamos los espaciadores viejos */
    #navPanel .link .indent-1,
    #navPanel .link .indent-2,
    #navPanel .link .indent-3,
    #navPanel .link .indent-4,
    #navPanel .link .indent-5 {
        display: none;
    }

    /* Punto-guia a la izquierda de cada sub-item (jerarquia visual) */
    #navPanel a.link.depth-1::before,
    #navPanel a.link.depth-2::before {
        content: '';
        position: absolute;
        left: 1.5em;
        top: 50%;
        width: 5px;
        height: 5px;
        margin-top: -2.5px;
        border-radius: 50%;
        background: rgba(161, 48, 69, 0.7);
        transition: background 0.2s ease, transform 0.2s ease;
    }

    /* Separador sutil antes de un item de primer nivel que sigue a un sub-item
       (p. ej. "Contactar" despues de "Accesos y Perimetro") */
    #navPanel a.link.depth-2 + a.link.depth-0 {
        border-top: solid 1px rgba(255, 255, 255, 0.08);
        margin-top: 0.5em;
        padding-top: 1.1em;
    }

    /* Hover / activo (toque) */
    #navPanel a.link:hover,
    #navPanel a.link:active,
    #navPanel a.link:focus {
        background: rgba(139, 38, 53, 0.22);
        border-left-color: #A13045;
        color: #fff;
    }
    #navPanel a.link.depth-1:hover::before,
    #navPanel a.link.depth-2:hover::before,
    #navPanel a.link.depth-1:active::before,
    #navPanel a.link.depth-2:active::before {
        background: #C75A6E;
        transform: scale(1.3);
    }

    /* Encabezados de categoria: [Servicios] / [Soluciones]
       Son TITULOS de seccion: NO clicables y NO confundibles con un item.
       Alta especificidad + !important para ganar a estilos en linea. */
    #navPanel nav .link.category-label,
    #navPanel nav .link.category-label:hover,
    #navPanel nav .link.category-label:active,
    #navPanel nav .link.category-label:focus {
        display: block !important;
        height: auto !important;
        line-height: 1.2 !important;
        border: 0 !important;
        border-left: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #A13045 !important;
        font-size: 0.7em !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.22em !important;
        padding: 1.85em 1.5em 0.55em 1.5em !important;
        margin: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        cursor: default !important;
        pointer-events: none !important;
    }

    /* =====================================================
       BANNER DE INICIO (#banner) - encuadro de hexagonos
       Mas alto y con el contenido centrado verticalmente,
       con holgura para la barra superior mas gruesa.
       ===================================================== */
    #banner {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        min-height: 70vh;
        box-sizing: border-box;
        padding: 7.5em 2em 5em 2em !important;
    }

    /* Bajar un poco la seccion inferior (Transformacion Digital...)
       para compensar el espacio del header mas grueso */
    body.landing #main {
        padding-top: 2.25em !important;
    }

    /* Paginas internas: asegurar holgura del contenido bajo el header de 60px */
    body:not(.landing) #main {
        padding-top: 5.75em !important;
    }
}

/* ---- Telefonos pequenos ---- */
@media screen and (max-width: 480px) {
    #banner {
        min-height: 72vh;
        padding: 7.5em 1.5em 5em 1.5em !important;
    }
}

/* ============================================
   TABLETS (841px - 1024px)
   ============================================ */
@media screen and (min-width: 841px) and (max-width: 1024px) {
    /* Espacio para estilos de tablet si se requieren */
}

/* ============================================
   ACCESIBILIDAD
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    #navPanel .link,
    #navPanel .link::before,
    #mobileHeader {
        transition: none !important;
    }
}

/* ============================================
   WHATSAPP (global)
   Los elementos con data-wa-item permanecen ocultos hasta que
   se configure el numero en assets/js/site-config.js.
   El !important evita que estilos del template anulen [hidden].
   ============================================ */
[data-wa-item][hidden] {
    display: none !important;
}