/* agiltech — menú mobile.
 *
 * El header de escritorio no se toca: todo vive dentro del media query. Los
 * selectores van por estructura porque el marcado lo genera el canvas y no
 * tiene clases: header > div:nth-of-type(1) es la fila del logo y
 * header > div:nth-of-type(2) el submenú de secciones.
 *
 * En mobile la fila principal queda en 72px (logo · CTA · hamburguesa) y tanto
 * el menú principal como los enlaces de sección se despliegan debajo.
 */

/* El botón lo inyecta nav.js; en escritorio no existe visualmente. */
.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(244, 243, 240, .28);
  border-radius: 12px;
  color: #F4F3F0;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.nav-toggle:hover { border-color: rgba(244, 243, 240, .6); }
.nav-toggle .nav-icon-close { display: none; }
body.nav-open .nav-toggle .nav-icon-open { display: none; }
body.nav-open .nav-toggle .nav-icon-close { display: block; }

@media (max-width: 1024px) {

  /* ---------- fila principal ---------- */
  header > div:nth-of-type(1) {
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 12px !important;
  }
  /* El espaciador se identifica por estructura y no por su style inline: es el
     único <div> hijo de la fila, y así el selector aguanta que el runtime
     re-serialice los estilos ("flex:1" vs "flex: 1"). */
  header > div:nth-of-type(1) > a:first-child { order: 0; }              /* logo */
  header > div:nth-of-type(1) > div { order: 1; }                        /* espaciador */
  header > div:nth-of-type(1) > a:last-of-type { order: 2; }             /* CTA */
  .nav-toggle { order: 3; display: flex; }

  /* El menú principal cae a una línea completa y se apila. Queda oculto
     salvo que el panel esté abierto. */
  header > div:nth-of-type(1) > nav {
    order: 10;
    width: 100%;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin-top: 4px;
    border-top: 1px solid rgba(244, 243, 240, .14);
  }
  body.nav-open header > div:nth-of-type(1) > nav { display: flex !important; }
  header > div:nth-of-type(1) > nav > a {
    padding: 15px 0 !important;
    font-size: 16.5px !important;
    box-shadow: none !important;          /* el subrayado de "activo" no aplica apilado */
    border-bottom: 1px solid rgba(244, 243, 240, .08);
  }
  header > div:nth-of-type(1) > nav > a:last-child { border-bottom: 0; }

  /* ---------- submenú de secciones, dentro del panel ---------- */
  header > div:nth-of-type(2) { display: none; }
  body.nav-open header > div:nth-of-type(2) { display: block; }
  header > div:nth-of-type(2) > div {
    padding: 0 20px 20px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    min-height: 0 !important;
  }
  header > div:nth-of-type(2) > div > div { display: none; }   /* espaciador */
  header > div:nth-of-type(2) > div > span { padding: 16px 0 4px; }
  header > div:nth-of-type(2) > div > a {
    padding: 12px 0 !important;
    font-size: 15.5px !important;
  }

  /* Si el panel no entra en pantalla, que scrollee el menú y no la página. */
  body.nav-open header {
    max-height: 100vh;
    overflow-y: auto;
  }
}