/* ============================================================
   uvac-header.css
   Estilos del header global UVAC (.site-header + .drawer),
   extraídos de /assets/css/home.css y scopeados.

   Ubicación: /public_html/assets/css/uvac-header.css

   POR QUÉ EXISTE:
   home.css trae el diseño completo de la home, incluyendo clases
   genéricas (.card, .btn, .price, .eyebrow, .grid, .wrap) que
   chocan con las páginas de /descuentos/. Este archivo contiene
   solo lo del header, con todo prefijado por .site-header o
   .drawer, así que no puede afectar nada más de la página.

   MANTENIMIENTO: si cambias el diseño del header en home.css,
   hay que replicarlo aquí. Es el costo de no tener colisiones.
   ============================================================ */

/* Variables propias (prefijo --uv-) para no chocar con las
   variables que ya usen los CSS de /descuentos/ */
.site-header,
.drawer {
  --uv-ink: #0A1F3D;
  --uv-ink-soft: #16335c;
  --uv-azure: #1e73be;
  --uv-sky: #EAF2FB;
  --uv-line: rgba(10,31,61,.10);
  --uv-coral: #bf0707;
  --uv-display: 'Nunito', system-ui, sans-serif;
  --uv-body: 'Montserrat', system-ui, sans-serif;
  --uv-shadow-lg: 0 24px 60px -20px rgba(10,31,61,.35);
}

.site-header *,
.drawer * { box-sizing: border-box; }

/* ===== HEADER ===== */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(248,245,239,.85);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--uv-line);
  font-family:var(--uv-body); line-height:1.55; color:var(--uv-ink);
}
.site-header a{ color:inherit; text-decoration:none; }
.site-header img{ display:block; max-width:100%; }
.site-header .wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
.site-header .nav{ display:flex; align-items:center; gap:26px; height:70px; }
.site-header .brand{ display:flex; align-items:center; gap:10px; font-family:var(--uv-display); font-weight:800; font-size:1.22rem; }
.site-header .brand .logo{ width:auto; height:50px; flex:none; }

.site-header .nav-links{ display:flex; gap:20px; margin-left:auto; font-weight:600; font-size:.9rem; }
.site-header .nav-links a{ color:var(--uv-ink-soft); padding:6px 2px; position:relative; }
.site-header .nav-links a:hover{ color:var(--uv-azure); }
.site-header .nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--uv-coral); transition:right .25s; }
.site-header .nav-links a:hover::after{ right:0; }
.site-header .nav-cta{ display:flex; gap:10px; align-items:center; }

/* ===== BOTONES (solo dentro del header) ===== */
.site-header .btn{
  font-family:var(--uv-body); font-weight:700; font-size:.9rem;
  border:none; cursor:pointer; border-radius:999px; padding:11px 20px;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s, box-shadow .2s, background .2s;
}
.site-header .btn:hover{ transform:translateY(-1px); }
.site-header .btn-primary{ background:var(--uv-azure); color:#fff; box-shadow:0 8px 20px -8px var(--uv-azure); }
.site-header .btn-primary:hover{ background:var(--uv-ink-soft); }
.site-header .btn-ghost{ background:transparent; color:var(--uv-ink); border:1.5px solid var(--uv-line); }
.site-header .btn-ghost:hover{ border-color:var(--uv-azure); color:var(--uv-azure); }

/* ===== DROPDOWNS ===== */
.site-header .nav-links .has-drop{ position:relative; display:flex; align-items:center; }
.site-header .nav-links .has-drop>a{ display:inline-flex; align-items:center; gap:5px; }
.site-header .nav-links .has-drop>a svg{ width:11px; height:11px; }
.site-header .nav-links .drop{
  position:absolute; top:100%; left:-12px; min-width:248px; max-height:74vh; overflow:auto;
  background:#fff; border:1px solid var(--uv-line); border-radius:14px; box-shadow:var(--uv-shadow-lg);
  padding:8px; display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:all .2s ease; z-index:90;
}
.site-header .nav-links .has-drop:hover .drop{ opacity:1; visibility:visible; transform:translateY(0); }
.site-header .nav-links .drop.cols{ display:grid; grid-template-columns:1fr 1fr; min-width:440px; }
.site-header .nav-links .drop.cols .more{ grid-column:1 / -1; }
.site-header .nav-links .drop a{ padding:9px 12px; border-radius:9px; font-size:.85rem; color:var(--uv-ink-soft); white-space:nowrap; }
.site-header .nav-links .drop a::after{ display:none !important; }
.site-header .nav-links .drop a:hover{ background:var(--uv-sky); color:var(--uv-azure); }
.site-header .nav-links .drop .more{ color:var(--uv-azure); font-weight:700; }

/* Submenú anidado de "Destinos" */
.site-header .nav-links .drop-destinos{ overflow:visible; max-height:none; }
.site-header .nav-links .drop .has-sub{ position:relative; }
.site-header .nav-links .drop .has-sub>span{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; border-radius:9px; font-size:.85rem; font-weight:700; color:var(--uv-ink-soft); cursor:default; }
.site-header .nav-links .drop .has-sub>span svg{ width:13px; height:13px; flex:none; }
.site-header .nav-links .drop .has-sub:hover>span{ background:var(--uv-sky); color:var(--uv-azure); }
.site-header .nav-links .subdrop{
  position:absolute; top:-8px; right:100%; min-width:380px;
  background:#fff; border:1px solid var(--uv-line); border-radius:14px; box-shadow:var(--uv-shadow-lg);
  padding:8px; display:grid; grid-template-columns:1fr 1fr; gap:2px;
  opacity:0; visibility:hidden; transform:translateX(8px); transition:all .2s ease; z-index:95;
}
.site-header .nav-links .drop .has-sub:hover .subdrop{ opacity:1; visibility:visible; transform:translateX(0); }
.site-header .nav-links .subdrop a{ padding:9px 12px; border-radius:9px; font-size:.85rem; color:var(--uv-ink-soft); white-space:nowrap; }
.site-header .nav-links .subdrop a::after{ display:none !important; }
.site-header .nav-links .subdrop a:hover{ background:var(--uv-sky); color:var(--uv-azure); }

/* ===== BURGER ===== */
.site-header .burger{ display:none; width:42px; height:42px; border:1px solid rgba(10,31,61,.14); border-radius:10px; background:#fff; cursor:pointer; align-items:center; justify-content:center; }
.site-header .burger span{ position:relative; width:18px; height:2px; background:#0A1F3D; display:block; }
.site-header .burger span::before,
.site-header .burger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:#0A1F3D; }
.site-header .burger span::before{ top:-6px; }
.site-header .burger span::after{ top:6px; }

/* ===== DRAWER (menú móvil) ===== */
.drawer{ position:fixed; inset:0; z-index:100; background:rgba(10,31,61,.45); opacity:0; pointer-events:none; transition:opacity .25s; font-family:var(--uv-body); }
.drawer.open{ opacity:1; pointer-events:auto; }
.drawer-panel{ position:absolute; top:0; right:0; height:100%; width:min(86%,360px); background:#fff; padding:22px; transform:translateX(100%); transition:transform .28s ease; overflow-y:auto; display:flex; flex-direction:column; }
.drawer.open .drawer-panel{ transform:translateX(0); }
.drawer-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.drawer-close{ width:36px; height:36px; border:1px solid rgba(10,31,61,.14); border-radius:10px; display:grid; place-items:center; background:#fff; cursor:pointer; }
.drawer a{ display:block; padding:12px 0; font-weight:600; color:#0A1F3D; border-bottom:1px solid rgba(10,31,61,.08); text-decoration:none; }
.drawer a span{ color:#1e73be; }
.drawer .brand .logo{ width:auto; height:34px; }
.drawer .sub{ padding-left:14px; border-left:2px solid rgba(10,31,61,.1); margin:4px 0 8px; }
.drawer .sub a{ font-size:14px; padding:9px 0; border-bottom:0; }
.drawer .header-cta{ margin-top:18px; justify-content:center; text-align:center; background:#bf0707; color:#fff; border-radius:999px; padding:12px; font-weight:700; display:block; }

/* ===== RESPONSIVE ===== */
@media (max-width:980px){
  .site-header .nav-links{ display:none; }
  .site-header .burger{ display:inline-flex; }
}
@media (max-width:560px){
  .site-header .nav-cta .btn span.txt{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .site-header *, .drawer *{ animation:none !important; transition:none !important; }
}