/* Menus de navegacion: lateral movil (#sideNav) y desplegables de escritorio (#principalNav).
   Fondos opacos, ancho acorde al contenido y submenus legibles. Sobrescribe app.css;
   se carga desde layouts/responsive-navbar.blade.php. */

body #sideNav {
    background: #0d0d17;
    height: 100vh;
    height: 100dvh;
    padding-top: 84px;
    padding-bottom: 32px;
}
body #sideNav.active {
    width: min(86vw, 320px) !important;
    border-right: 1px solid rgba(255,255,255,.1);
    /* el primer sombreado oscurece el resto de la pagina para que no se confunda con el menu */
    box-shadow: 0 0 0 100vmax rgba(0,0,0,.55), 12px 0 40px rgba(0,0,0,.5);
}
body #buttonNav.active { left: calc(min(86vw, 320px) - 70px) !important; }

body #sideNav ul { margin: 0; padding: 0; }
body #sideNav ul li { width: auto; padding: 0; font-size: 1.5rem; }
body #sideNav ul li span.border:before { display: none; }
body #sideNav .navigation > li { position: relative; padding: 0 24px; border-bottom: 1px solid rgba(255,255,255,.09); }
body #sideNav .navigation > li > a {
    display: block; padding: 18px 44px 18px 0; font-size: 1.5rem; letter-spacing: .02em; line-height: 1.3;
}

/* Flechas de los acordeones: alineadas a la fila del titulo (no al centro del bloque abierto) */
body #sideNav .servicios-mobile-flecha,
body #sideNav .dw-mobile-flecha {
    position: absolute; top: 4px; right: 0; transform: none; width: 48px; height: 48px;
    color: #fff; font-size: 1.3rem; display: grid; place-items: center; cursor: pointer;
}
body #sideNav .servicios-mobile-item { padding-right: 24px; }
body #sideNav .servicios-mobile-flecha { right: 18px; }
body #sideNav .dw-mobile-flecha { right: -6px; }
body #sideNav [aria-expanded="true"] .glyphicon { transform: rotate(180deg); }
body #sideNav .glyphicon { transition: transform .2s ease; }

/* Submenu de Servicios */
body #sideNav .servicios-mobile-submenu { margin: 0 0 14px; padding: 0 0 0 14px; border-left: 2px solid rgba(255,255,255,.22); }
body #sideNav .servicios-mobile-submenu > li { position: relative; padding: 0; border: 0; }
body #sideNav .servicios-mobile-submenu > li > a {
    display: block; padding: 13px 44px 13px 0; font-size: 1.45rem; font-weight: 700;
    text-transform: none; letter-spacing: 0; line-height: 1.3;
}

/* Submenu anidado de Desarrollo Web (ACTIVA / a medida / comparar) */
body #sideNav .dw-mobile-submenu { margin: 0 0 8px; padding: 0 0 0 12px; border-left: 2px solid #de091e; }
body #sideNav .dw-mobile-submenu > li { padding: 0; border: 0; }
body #sideNav .dw-mobile-submenu > li > a {
    display: block; padding: 11px 0; font-size: 1.35rem; font-weight: 500; line-height: 1.4;
    text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.86) !important;
}
body #sideNav .dw-mobile-submenu a strong { display: block; color: #fff; font-weight: 800; }

@media (prefers-reduced-motion: reduce) { body #sideNav .glyphicon { transition: none; } }

/* La regla heredada "ul li span:before" (barra blanca) pisaba el icono de las flechas */
body #sideNav ul li span.glyphicon:before {
    border-top: 0; width: auto; position: static; top: auto; display: inline-block; content: "\e114";
}

/* ---- Escritorio: desplegables de #principalNav (Servicios y submenu de Desarrollo Web) ---- */
body header nav#principalNav .dropdown-menu {
    background-color: #0d0d17;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 24px 50px -16px rgba(0,0,0,.7);
}
body header nav#principalNav .dropdown-menu li a:hover,
body header nav#principalNav .dropdown-menu li a:focus { background-color: rgba(255,255,255,.12); }
body header nav#principalNav .dropdown-menu .divider { background-color: rgba(255,255,255,.14); }
body header nav#principalNav .dw-menu-dropdown small { color: #a3a4bd; }
/* Cabecera clara y variante roja */
body header.light nav#principalNav .dropdown-menu { background-color: #fff; border-color: #d4d5d8; box-shadow: 0 24px 50px -20px rgba(57,49,133,.35); }
body header.light nav#principalNav .dropdown-menu li a:hover,
body header.light nav#principalNav .dropdown-menu li a:focus { background-color: rgba(57,49,133,.08); }
.rojo #principalNav .dropdown-menu { background-color: #fff !important; }

/* Con el menu abierto, el boton de llamada se oculta: caia encima del boton de cierre del menu */
body #buttonNav ~ .rounded-telephone { transition: opacity .2s ease; }
body #buttonNav.active ~ .rounded-telephone { opacity: 0; pointer-events: none; visibility: hidden; }

/* Llamar desde el menu (reemplaza al boton flotante mientras el menu esta abierto) */
body #sideNav .navigation > li.menu-llamar { border-bottom: 0; padding: 22px 24px 0; }
body #sideNav .navigation > li.menu-llamar > a {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 14px 18px;
    background: #de091e; text-transform: uppercase; font-size: 1.5rem; line-height: 1.25;
}
body #sideNav .navigation > li.menu-llamar small { flex-basis: 100%; padding-left: 28px; font-size: 1.2rem; font-weight: 500; letter-spacing: .02em; opacity: .92; }
body #sideNav ul li.menu-llamar span.glyphicon:before { content: "\e182"; }

/* Desplegable de escritorio: la fila completa se ilumina y la flecha del submenu va al borde derecho */
body header nav#principalNav .dropdown-menu > li > a { display: block; width: 100%; box-sizing: border-box; }
body header nav#principalNav .dropdown-submenu > a { position: relative; padding-right: 40px; }
body header nav#principalNav .dropdown-submenu > a:after {
    float: none; position: absolute; right: 18px; top: 50%; margin: -5px 0 0 0;
}
body header nav#principalNav .dropdown-submenu:hover > a,
body header nav#principalNav .dropdown-submenu.open > a { background-color: rgba(255,255,255,.12); }
body header.light nav#principalNav .dropdown-submenu:hover > a,
body header.light nav#principalNav .dropdown-submenu.open > a { background-color: rgba(57,49,133,.08); }

/* Testimonios del home: flechas dentro del ancho del contenido */
body .testimonials .testimonials-slider .slick-prev { left: 0; z-index: 2; }
body .testimonials .testimonials-slider .slick-next { right: 0; z-index: 2; }

/* Paginas del layout dark con un .container anidado dentro de .content.container: el padding de
   50px del .content lo desplazaba a la derecha y se salia del margen del sitio (ej. /desarrollo-app). */
body .content.container:has(> .container) { padding-left: 0; padding-right: 0; }

/* Flecha "desplazate hacia abajo" para heroes que ocupan toda la pantalla */
.scroll-cue {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90;
    width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    border: 2px solid rgba(255,255,255,.75); background: rgba(13,13,23,.35); color: #fff; cursor: pointer;
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease, background .2s ease;
    animation: scrollCueBob 1.8s ease-in-out infinite;
}
.scroll-cue.is-visible { opacity: .95; visibility: visible; }
.scroll-cue:hover, .scroll-cue:focus-visible { background: #de091e; border-color: #de091e; color: #fff; }
.scroll-cue svg { width: 20px; height: 20px; display: block; }
@keyframes scrollCueBob { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: -7px; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; transition: none; } }