/* ════════════════════════════════════════════════════════════════════
   CABECERA v2 COMÚN (home + resto del sitio) · 2026-10-02
   1. Fija «inteligente»: se esconde al bajar leyendo y vuelve al subir.
      vs-nav.js publica --vs-hdr (alto visible: 0 si está escondida) para
      que otras barras fijas (subnav de la ficha) se coloquen debajo.
   2. Menú móvil a pantalla completa: se abre en círculo desde la
      hamburguesa, enlaces grandes en Bricolage que entran escalonados,
      y la hamburguesa de dos líneas se convierte en una X.
   Carga después de home-v2.css / viving-v2.css.
   ════════════════════════════════════════════════════════════════════ */
:root{--vs-hdr:0px;--vs-hdr-full:76px;--vs-nav-ease:cubic-bezier(.22,1,.36,1)}

/* sticky necesita que ningún ancestro tenga overflow hidden (template.css lo pone en .main-wrapper); clip recorta igual sin romperlo */
html body .main-wrapper{overflow:visible!important;overflow-x:clip!important}
html body #navbar{position:sticky!important;top:0;z-index:1030;transition:transform .5s var(--vs-nav-ease),box-shadow .3s ease,background-color .3s ease}
html body.vs-nav-hide #navbar{transform:translateY(-100%);box-shadow:none!important}

/* Hamburguesa → X */
.vs-burger{position:relative;z-index:3;width:46px;height:46px;padding:0!important;margin-right:-10px;border:0!important;border-radius:50%;background:transparent!important;box-shadow:none!important;outline:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .25s}
.vs-burger:focus-visible{box-shadow:0 0 0 3px rgba(26,49,81,.18)!important}
.vs-burger:active{background:rgba(26,49,81,.06)!important}
.vs-burger-l{position:absolute;right:12px;height:2px;border-radius:2px;background:#1A3151;transition:transform .55s cubic-bezier(.65,0,.35,1),top .35s var(--vs-nav-ease),width .45s var(--vs-nav-ease)}
.vs-burger-l:first-child{top:18px;width:22px}
.vs-burger-l:last-child{top:26px;width:14px}
.vs-burger:hover .vs-burger-l:last-child{width:22px}
body.vs-menu-open .vs-burger-l{top:22px;width:22px}
body.vs-menu-open .vs-burger-l:first-child{transform:rotate(45deg)}
body.vs-menu-open .vs-burger-l:last-child{transform:rotate(-45deg)}

@media (max-width:991.98px){
  html body #navbar .navbar-brand{position:relative;z-index:3}
  /* Con el menú abierto, nada de blur ni transform en la cabecera: crearían
     un bloque contenedor y el panel fixed dejaría de cubrir la pantalla. */
  html body.vs-menu-open #navbar,html body.vs-menu-open #navbar .navbar{transform:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#F8F2E8!important;box-shadow:none!important}

  html body #navbar #navbarContent{display:flex!important;flex-direction:column;position:fixed;inset:0;z-index:2!important;height:100vh;height:100dvh;margin:0!important;padding:calc(var(--vs-hdr-full) + 12px) 24px calc(22px + env(safe-area-inset-bottom));background:#F8F2E8;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;clip-path:circle(0 at calc(100% - 42px) 38px);transition:clip-path .65s cubic-bezier(.77,0,.18,1),visibility 0s linear .65s}
  html body.vs-menu-open #navbar #navbarContent{visibility:visible;clip-path:circle(150% at calc(100% - 42px) 38px);transition:clip-path .7s cubic-bezier(.77,0,.18,1),visibility 0s}
  /* Detalle de fondo: un círculo melocotón difuminado abajo */
  html body #navbar #navbarContent::before{content:'';position:absolute;right:-30vw;bottom:-18vh;width:85vw;height:85vw;border-radius:50%;background:radial-gradient(closest-side,rgba(242,205,185,.75),rgba(242,205,185,0));pointer-events:none;z-index:-1}

  html body #navbar #navbarContent .navbar-nav{flex-direction:column;align-items:stretch!important;margin:0!important;padding:0}
  html body #navbar #navbarContent > .navbar-nav:first-child{counter-reset:vsnav}
  html body #navbar #navbarContent > .navbar-nav:first-child > .nav-item{counter-increment:vsnav;margin:0!important;border-bottom:1px solid #E3DDD4;opacity:0;transform:translateY(22px);transition:opacity .3s ease,transform .3s ease}
  html body.vs-menu-open #navbar #navbarContent > .navbar-nav:first-child > .nav-item{opacity:1;transform:none;transition:opacity .55s ease,transform .7s var(--vs-nav-ease);transition-delay:calc(.2s + var(--i,0) * .055s)}
  html body #navbar #navbarContent > .navbar-nav:first-child .nav-link{display:flex!important;align-items:center;gap:.9rem;padding:1rem 0!important;font-family:"Bricolage Grotesque","Bricolage Reserva",Arial,sans-serif!important;font-size:clamp(1.65rem,7.4vw,2.1rem)!important;font-weight:700!important;letter-spacing:-.025em;line-height:1.1;color:#1A3151!important;text-decoration:none!important}
  html body #navbar #navbarContent > .navbar-nav:first-child .nav-link::before{content:counter(vsnav,decimal-leading-zero);font-family:Inter,system-ui,sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.04em;color:#8A93A3;min-width:1.4rem;transform:translateY(-.55em)}
  html body #navbar #navbarContent > .navbar-nav:first-child .nav-link::after{content:'→';margin-left:auto;font-family:Inter,system-ui,sans-serif;font-size:1.2rem;font-weight:500;color:#B75A44;opacity:0;transform:translateX(-10px);transition:opacity .25s,transform .35s var(--vs-nav-ease)}
  html body #navbar #navbarContent > .navbar-nav:first-child .nav-link:active::after,
  html body #navbar #navbarContent > .navbar-nav:first-child .nav-link:hover::after,
  html body #navbar #navbarContent > .navbar-nav:first-child .nav-link.active::after{opacity:1;transform:none}
  html body #navbar #navbarContent > .navbar-nav:first-child .nav-link.active{color:#B75A44!important}
  html body #navbar #navbarContent .dropdown-menu{position:static!important;float:none;transform:none!important;border:0;box-shadow:none;background:transparent;padding:0 0 .8rem 2.3rem}

  /* Botones de acceso abajo, a dos columnas */
  html body #navbar #navbarContent > .navbar-nav:nth-child(2){margin-top:auto!important;padding-top:1.75rem;opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s}
  html body.vs-menu-open #navbar #navbarContent > .navbar-nav:nth-child(2){opacity:1;transform:none;transition:opacity .5s ease .5s,transform .7s var(--vs-nav-ease) .5s}
  html body #navbar #navbarContent > .navbar-nav:nth-child(2){width:100%}
  html body #navbar #navbarContent > .navbar-nav:nth-child(2) > .nav-item{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0!important}
  html body #navbar #navbarContent > .navbar-nav:nth-child(2) .btn{display:flex!important;align-items:center;justify-content:center;gap:.4rem;margin:0!important;min-height:54px;border-radius:14px!important;font-size:1rem!important;text-decoration:none!important}
  html body #navbar #navbarContent > .navbar-nav:nth-child(2) .btn-mode{display:none!important}
  html body #navbar #navbarContent > .navbar-nav:nth-child(2) .btn-outline-secondary{border:1.5px solid #1A3151!important;background:#fff!important;color:#1A3151!important}
  html body #navbar #navbarContent > .navbar-nav:nth-child(2) .btn-primary,
  html body #navbar #navbarContent > .navbar-nav:nth-child(2) .btn-black{background:#1A3151!important;border-color:#1A3151!important;color:#fff!important}
  html body #navbar #navbarContent > .navbar-nav:nth-child(2) .btn-warning{grid-column:1/-1}

  .vs-menu-foot{padding-top:1.25rem;text-align:left;font-family:Inter,system-ui,sans-serif;opacity:0;transition:opacity .3s}
  body.vs-menu-open .vs-menu-foot{opacity:1;transition:opacity .6s ease .62s}
  .vs-menu-foot p{margin:0 0 .35rem!important;font-size:.875rem;color:#5B6577!important}
  .vs-menu-foot p a{color:#1A3151!important;font-weight:600;text-decoration:underline;text-underline-offset:3px}
  .vs-menu-foot .vs-menu-pro{font-size:.875rem;color:#5B6577!important;text-decoration:none!important}
  .vs-menu-foot .vs-menu-pro span{color:#B75A44;font-weight:600}
}
@media (min-width:992px){.vs-menu-foot{display:none!important}}
@media (prefers-reduced-motion:reduce){
  html body #navbar,html body #navbar #navbarContent,.vs-burger-l,html body #navbar #navbarContent .nav-item{transition:none!important}
}