/* ==========================================================
   03-header.css
   FUNCIÓN: Barra de navegación fija arriba: logo, enlaces,
   botón "Agendar recolección" y botón de menú para celular.
   ========================================================== */

/* ---------- BLOQUE: Contenedor del header (se queda fijo al hacer scroll) ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.92);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(27,27,34,0.08);
}
nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 32px;max-width:1160px;margin:0 auto;
  gap:16px;
}

/* ---------- BLOQUE: Logo (también se usa en el footer) ---------- */
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.logo img{height:50px;width:auto;border-radius:var(--r-sm);}

/* ---------- BLOQUE: Enlaces del menú ---------- */
.nav-links{display:flex;gap:22px;font-size:0.88rem;font-weight:500;}
.nav-links a{opacity:.75;transition:opacity .2s;color:var(--azul-osc);white-space:nowrap;}
.nav-links a:hover{opacity:1;}
.logo img{aspect-ratio:1/1;}

/* ---------- BLOQUE: Botón de acción y botón hamburguesa ---------- */
.nav-cta{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.menu-toggle{display:none;background:none;border:none;font-size:1.6rem;line-height:1;width:44px;height:44px;border-radius:var(--r-sm);cursor:pointer;color:var(--azul-osc);} /* solo se ve en celular */
.menu-cta{display:none;} /* botón extra dentro del menú desplegable (solo celular) */