/* ════════════════════════════════════════════════════════════════
   AJUSTES (oct 2026) — se carga DESPUÉS de styles.css y pisa solo esto:
   1. Header del mismo color que el fondo (antes naranja)
   2. Logo nuevo en el header
   3. Menús desplegables que no se salgan de la pantalla en el celu
   ════════════════════════════════════════════════════════════════ */

/* 1. Header oscuro, como el resto de la página, con una línea sutil abajo */
nav {
  background: var(--bg, #252422);
  border-bottom: 1px solid rgba(231,231,221,0.10);
}
nav .nav-links a,
nav .nav-dropdown-toggle { color: var(--cream, #E7E7DD); opacity: 0.85; }
nav .nav-links a:hover,
nav .nav-dropdown-toggle:hover,
nav .nav-dropdown.open .nav-dropdown-toggle { opacity: 1; color: #fff; }

/* Desplegables en el mismo tono, con borde para que se distingan del fondo */
nav .nav-dropdown-menu {
  background: var(--bg, #252422);
  border: 1px solid rgba(231,231,221,0.14);
  border-top: 2px solid var(--orange, #E84118);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
}
nav .nav-dropdown-menu a { color: rgba(255,255,255,0.88); opacity: 1; }
nav .nav-dropdown-menu a:hover { background: rgba(232,65,24,0.14); color: #fff; }

/* 2. Logo nuevo (naranja, fondo transparente) */
.nav-logo img.logo-header { height: 40px; width: auto; display: block; }
@media (max-width: 480px) {
  .nav-logo img.logo-header { height: 34px; }
}

/* 3. En celu/tablet el último desplegable visible ("Nosotros") queda pegado al borde
      derecho: lo alineamos a la derecha para que no se corte "Quiénes te acompañan" */
.nav-dropdown-menu { max-width: calc(100vw - 24px); }
@media (max-width: 780px) {
  .nav-links .nav-dropdown:nth-of-type(3) .nav-dropdown-menu {
    left: auto;
    right: 0;
    transform: none;
  }
  /* y el primero ("Servicios") se alinea a la izquierda, para que no se corte en celus chicos */
  .nav-links .nav-dropdown:nth-of-type(1) .nav-dropdown-menu {
    left: 0;
    right: auto;
    transform: none;
  }
}