/* =========================================================
   VC HEADER — Tanqueray x Apple (dark glass, mobile-first)
   Files: vc-header.css + vc-header.js + template-parts/header.php
   Logo: /images/logo.png (root)
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --vc-bg: rgba(7, 10, 18, .76);           /* dark glass */
  --vc-bg-2: rgba(10, 14, 26, .88);        /* darker */
  --vc-line: rgba(255,255,255,.10);
  --vc-line-2: rgba(255,255,255,.14);
  --vc-ink: rgba(255,255,255,.92);
  --vc-ink-2: rgba(255,255,255,.72);
  --vc-shadow: 0 18px 54px rgba(0,0,0,.38);
  --vc-radius: 18px;
  --vc-radius-lg: 22px;

  /* Tanqueray-ish accent (gold) */
  --vc-gold: #D8B25A;
  --vc-gold-2: rgba(216,178,90,.22);

  /* Tap */
  --vc-tap: rgba(255,255,255,.08);
}

/* ---------- TOPBAR (floating capsule) ---------- */
.vc-topbar{
  position: sticky;
  top: calc(10px + env(safe-area-inset-top));
  z-index: 11000;
  margin: 10px 10px 12px;
  padding: 10px 12px;
  border-radius: var(--vc-radius-lg);
  background: rgb(255 255 255 / 36%);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  border: 1px solid var(--vc-line);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  transition:
    transform .24s cubic-bezier(.2,.9,.2,1),
    opacity .18s ease,
    filter .18s ease;
  will-change: transform, opacity, filter;
}
.vc-topbar__inner{
  display:flex;
  align-items:center;
    justify-content: space-between;
}
.vc-topbar__brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  gap: 10px;
  min-width: 140px;
}
.vc-topbar__brand img{
  display:block;
  height:auto;
  max-width: 180px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.28));
}

/* Trust (desktop/tablet only) */
.vc-topbar__trust{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  max-width: 46vw;
}
.vc-trust__badges{display:flex; gap:8px; align-items:center;}
.vc-trust__badges img{display:block; object-fit:contain; filter:saturate(1.05);}
.vc-trust__txt{
  font-size: 11px;
  line-height: 1.05;
  color: var(--vc-ink-2);
  white-space: nowrap;
}
.vc-trust__txt strong{color: var(--vc-ink); font-weight: 900}

/* Acciones derecha */
.vc-topbar__actions{display:flex; gap:10px; align-items:center;}

.vc-trust-text {color: white;}

/* CTA topbar (desktop only) */
.vc-topbar__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .2px;
  text-decoration:none;
  color: black;
  background: #E3C300;
  border: 1px solid rgba(216,178,90,.38);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  transition: transform .14s ease, filter .14s ease;
}
.vc-topbar__cta:active{transform: scale(.98);}
.vc-topbar__cta:hover{filter: brightness(1.05);}

.vc-nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: black;
  cursor:pointer;
  transition: transform .14s ease, background .14s ease;
}
.vc-nav-toggle:active{transform: scale(.98);}
.vc-nav-toggle:focus-visible,
.vc-topbar__cta:focus-visible{
  outline: 3px solid rgba(216,178,90,.45);
  outline-offset: 2px;
}

/* Mobile: ultra clean */
@media (max-width: 520px){
  .vc-topbar{ margin: 8px 10px 10px; padding: 10px 10px; }
  .vc-topbar__trust{display:none;}
  .vc-topbar__cta{display:none;} /* CTA vive en el drawer */
}

/* ---------- Overlay ---------- */
.vc-nav-overlay{
  position: fixed;
  inset: 0;
  z-index: 10990;
  background: rgba(0,0,0,.46);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.vc-nav-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Drawer (right sheet) ---------- */
.vc-drawer{
  position: fixed;
  top: 0;
  right: 0;
  width: min(84vw, 360px);
  height: 100dvh;
  z-index: 10995;
background: rgb(0 0 0 / 48%);
    backdrop-filter: blur(20px) saturate(0.0);
  -webkit-backdrop-filter: blur(26px) saturate(1.18);
  border-left: 1px solid rgba(255,255,255,.12);
  box-shadow: -22px 0 62px rgba(0,0,0,.40);
  transform: translateX(110%);
  transition: transform .22s cubic-bezier(.2,.9,.2,1);
  display:flex;
  flex-direction:column;
  pointer-events: none;
  border-top-left-radius: 26px;
  border-bottom-left-radius: 26px;
  overflow:hidden;
}
.vc-drawer.is-open{
  transform: translateX(0);
  pointer-events: auto;
}

html.vc-nav-open, body.vc-nav-open{ overflow:hidden; }

/* Hide topbar when drawer open */
html.vc-nav-open .vc-topbar{
  transform: translateY(calc(-110% - 14px));
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
}

/* Drawer head */
.vc-drawer__head{
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: calc(14px + env(safe-area-inset-top)) 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.vc-drawer__title{
  font-weight: 950;
  letter-spacing: .2px;
  color: var(--vc-ink);
}
.vc-drawer__close{
  width: 40px; height: 40px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--vc-ink);
  transition: transform .14s ease, background .14s ease;
}
.vc-drawer__close:active{transform: scale(.98);}

/* Drawer body: scrollable */
.vc-drawer__body{
  flex: 1 1 auto;
  padding: 12px 14px 12px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Footer: fixed zone for CTA + trust */
.vc-drawer__footer{
  flex: 0 0 auto;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(8,12,22,.10), rgba(8,12,22,.46));
}

/* Nav list (compact, not chunky pills) */
.vc-drawer .navbar-nav{
  margin: 0;
  padding: 0;
  list-style:none;
  display:flex;
  flex-direction:column;
}

/* Each row */
.vc-drawer .nav-item{ margin: 0; }

.vc-drawer .nav-link{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration:none;
  color: var(--vc-ink);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 850;
  letter-spacing: .1px;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  margin-bottom: 10px;
}
.vc-drawer .nav-link:hover{border-color: rgba(216,178,90,.32);}
.vc-drawer .nav-link:active{transform: scale(.99); background: rgba(255,255,255,.09);}

/* Submenu container */
.vc-drawer .submenu ul{
  margin: -4px 0 10px;
  padding: 10px 10px 6px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}

/* Submenu links: tighter */
.vc-drawer .submenu ul .nav-link{
  margin-bottom: 8px;
  padding: 10px 10px;
  border-radius: 12px;
  font-weight: 800;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
.vc-drawer .submenu ul .nav-link:hover{border-color: rgba(216,178,90,.28);}

/* Remove any caret / extra icons */
.vc-caret{display:none !important;}

/* CTA (premium) */
.vc-drawer__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 50px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(216,178,90,.92), rgba(173,132,44,.92));
  color: #0A0C10;
  text-decoration:none;
  font-weight: 950;
  letter-spacing: .2px;
  box-shadow: 0 16px 34px rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.12);
}
.vc-drawer__cta:active{transform: scale(.99);}
.vc-drawer__cta:focus-visible{
  outline: 3px solid rgba(216,178,90,.50);
  outline-offset: 3px;
}

/* Drawer trust (mobile credibility, subtle) */
.vc-drawer__trust{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
      flex-direction: column;

}
.vc-drawer__trust .vc-trust__txt{font-size: 11px;}
.vc-drawer__trust .vc-trust__txt strong{color: var(--vc-gold);}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .vc-drawer, .vc-nav-overlay, .vc-nav-toggle, .vc-drawer__close, .vc-drawer .nav-link{transition:none;}
}

/* ---------- Slim hero for login/registro pages (less invasive) ---------- */
body.page-iniciar-sesion .page-header,
body.page-registro .page-header,
body.page-registrar .page-header,
body.page-mi-cuenta .page-header{
  padding: 18px 0 16px !important;
  margin: 10px 10px 14px !important;
  border-radius: 22px;
  min-height: unset !important;
}
body.page-iniciar-sesion .page-header .page-header-box h1,
body.page-registro .page-header .page-header-box h1,
body.page-registrar .page-header .page-header-box h1,
body.page-mi-cuenta .page-header .page-header-box h1{
  margin: 0 0 6px !important;
  font-size: clamp(24px, 3.2vw, 40px) !important;
  line-height: 1.05 !important;
}
body.page-iniciar-sesion .page-header .breadcrumb,
body.page-registro .page-header .breadcrumb,
body.page-registrar .page-header .breadcrumb,
body.page-mi-cuenta .page-header .breadcrumb{
  margin: 0 !important;
  opacity:.9;
}