/* ── Navbar ISLA ─────────────────────────────────────────────────────────────
   Convierte el navbar del front en una isla flotante. El movimiento (seguir el
   scroll al bajar / reaparecer al subir con la animación del sticky-cta) y el
   padding-top del body los gestiona assets/js/navbar-isla.js.
   Se carga DESPUÉS de base.css → sobrescribe .navbar. Owner 13-jul-2026.
   NOTA: no toca las sombras de las tarjetas del contenido. */

/* Reserva el hueco del navbar fijo solo en páginas que lo tienen (evita FOUC).
   El JS lo ajusta al alto exacto. */
body:has(header.navbar){ padding-top:90px; }

.navbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:none;
  padding:16px 16px 0;
  transform:translateY(0); opacity:1;
  transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
  will-change:transform;
}
.navbar.scrolled{ box-shadow:none; }   /* anula la sombra que añade main.js */

.navbar-inner{
  max-width:1112px; height:58px; padding:0 50px;   /* = --max-w (1160) − padding del contenido (2×24) */
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-radius:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.05), 0 14px 34px rgba(19,44,52,.13); /* sombra reforzada: despega del hero */
  transition:box-shadow .3s cubic-bezier(.4,0,.2,1);   /* suaviza el cambio al abrir/cerrar el menú móvil */
}
@media(max-width:1100px){ .navbar-inner{ padding:0 30px; } }
@media(max-width:768px){ .navbar-inner{ padding:0 20px; } }

/* Con el menú móvil abierto la isla queda sobre el blanco a pantalla completa:
   la sombra reforzada canta demasiado → se suaviza mientras .menu-open. */
.navbar.menu-open .navbar-inner{ box-shadow:0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(19,44,52,.06); }

/* Cristal también en el desplegable "Conoce tus derechos" (solo escritorio;
   más opaco que la barra para que el texto se lea bien sobre el hero). */
.nav-dropdown-inner{
  background:rgba(255,255,255,.985);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  backdrop-filter:saturate(180%) blur(24px);
}

/* Menú móvil a pantalla completa: el blanco cubre TODO, incluida la franja sobre
   la card. El top lo fija main.js por JS (inline) → hay que ganarle con !important. */
.mob-overlay{ top:0 !important; }
.mobile-menu{ top:0 !important; }
.mobile-menu .mob-body{ padding-top:90px; }