/* ═══════════════════════════════════════════════════════════
   ENCABEZADO ESTÁNDAR DEL SITIO (oct 2026)
   Barra superior, menú, menú del celular, botón «Comprar» y barra
   fija de compra del celular.

   Lo cargan el inicio (index.html, después de index.css) y las
   páginas sueltas que llevan el mismo encabezado
   (/manilla-adulto-mayor). Un cambio al menú se hace AQUÍ.

   Las reglas base de la barra y del menú son copia de las de
   index.css: en el inicio no cambian nada, y en las páginas sueltas
   —que no cargan index.css— son las que pintan el encabezado.
   Solo clases: la CSP del sitio no admite estilos en línea.
═══════════════════════════════════════════════════════════ */

/* Medidas del encabezado. En las páginas sueltas paginas.css define
   otro --nav (66 px, para su barra vieja): body.enc-sitio lo iguala
   al del inicio. */
body.enc-sitio{--nav:72px;--banner-h:40px;--fs-label:.78rem}
body.enc-sitio.has-pioneer-bar{padding-top:calc(var(--nav) + var(--banner-h))}
body.enc-sitio:not(.has-pioneer-bar){padding-top:var(--nav)}
/* paginas.css subraya los enlaces al pasar el cursor; el encabezado
   del inicio no lo hace. */
.enc-sitio #nav a:hover,.enc-sitio .pioneer-bar a:hover,.enc-sitio .mmenu a:hover,
.enc-sitio .cta-fija a:hover{text-decoration:none}
.enc-sitio .brand img{display:inline-block}
.enc-sitio button{font-family:inherit;cursor:pointer}
/* index.css quita las viñetas de todas las listas; paginas.css no. */
.navlinks{list-style:none;margin:0;padding:0}

/* ── BARRA SUPERIOR ──────────────────────────────────────── */
.pioneer-bar{position:fixed;top:0;left:0;right:0;z-index:999;height:var(--banner-h);
  overflow:hidden;background:linear-gradient(90deg,#1a1500 0%,rgba(26,21,0,.97) 50%,#1a1500 100%);
  border-bottom:1px solid rgba(201,165,53,.4);display:flex;align-items:center}
.pioneer-bar-inner{width:100%;padding:0 clamp(1rem,3vw,2rem);
  display:flex;align-items:center;gap:clamp(.6rem,1.5vw,1.2rem)}
.pioneer-bar-gem{color:var(--gold);font-size:.65rem;flex-shrink:0;opacity:.9}
.pioneer-bar-msg{flex:1;min-width:0;font-size:.78rem;color:var(--soft);letter-spacing:.02em;
  display:flex;align-items:center;gap:.65rem;font-family:'Raleway',sans-serif}
.pioneer-bar-text{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pioneer-bar-tag{display:inline-block;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);font-weight:700;white-space:nowrap;flex-shrink:0}
.pioneer-bar-cta{flex-shrink:0;font-size:.73rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dark);background:var(--gold);
  padding:.3rem 1rem;border-radius:2px;transition:background .2s;
  white-space:nowrap;font-family:'Raleway',sans-serif}
.pioneer-bar-cta:hover{background:var(--gold-l)}
.pioneer-bar-close{flex-shrink:0;background:none;border:none;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  padding:.3rem;line-height:1;opacity:.55;cursor:pointer;
  transition:opacity .2s,color .2s}
.pioneer-bar-close:hover{opacity:1;color:var(--gold)}
/* Offsets when banner is visible */
body.has-pioneer-bar #nav{top:var(--banner-h)!important}
body.has-pioneer-bar .page{padding-top:calc(var(--nav) + var(--banner-h))}
body.has-pioneer-bar .mmenu{padding-top:calc(var(--nav) + var(--banner-h))}
body.has-pioneer-bar .hero{min-height:calc(100vh - var(--nav) - var(--banner-h));min-height:calc(100svh - var(--nav) - var(--banner-h))}
/* Kids en contorno y no en dorado sólido: con dos botones rellenos
   seguidos ninguno de los dos parece el principal. Senior se queda
   sólido por ser el producto con el que arrancó la marca. */
.pioneer-bar-cta.pioneer-bar-cta-kids{
  background:transparent;color:var(--gold);border:1px solid var(--gold);
}
.pioneer-bar-cta.pioneer-bar-cta-kids:hover{background:var(--gold-dim)}

@media(max-width:600px){
  .pioneer-bar-inner{gap:.5rem}
  .pioneer-bar-text{font-size:.72rem}
  .pioneer-bar-tag{display:none}
  .pioneer-bar-gem{display:none}
  .pioneer-bar-cta{font-size:.67rem;padding:.26rem .65rem}
  .pioneer-bar-close{padding:.15rem .25rem}
}
/* Con tres botones el mensaje ya no cabe en pantallas estrechas: se
   quedaba en dos letras y puntos suspensivos, que no informa de nada.
   Se retira y la barra queda solo con los accesos, que es lo que de
   verdad se usa desde el móvil. */
@media(max-width:760px){
  .pioneer-bar-msg{display:none}
}
/* Por debajo de 520px los tres botones no caben con la palabra
   «Asistencia» delante: la barra desbordaba y el último quedaba fuera
   de pantalla. Se recorta el prefijo y quedan «Senior», «Kids» y
   «Comunidad», que en ese contexto se entienden solos. */
@media(max-width:520px){
  .cta-pre{display:none}
  .pioneer-bar-cta{letter-spacing:.05em;padding:.26rem .55rem}
}
/* ──────────────────────────────────────────────────────── */

/* ── MENÚ ────────────────────────────────────────────────── */
#nav{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--nav);
     background:rgba(24,27,33,.96);backdrop-filter:blur(16px);
     -webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--dborder);
     display:flex;align-items:center;justify-content:space-between;
     padding:0 clamp(1rem,4vw,3rem);transition:box-shadow .3s}
#nav.sc{box-shadow:0 4px 40px rgba(0,0,0,.5)}

.brand{display:flex;align-items:center;gap:.9rem;flex-shrink:0}
.brand-logo{height:44px;width:auto;object-fit:contain;
            filter:drop-shadow(0 0 8px rgba(201,165,53,.35));transition:filter .3s}
.brand:hover .brand-logo{filter:drop-shadow(0 0 14px rgba(201,165,53,.6))}
.brand-txt{display:flex;flex-direction:column;line-height:1.1}
.brand-txt .b1{font-family:'Cormorant Garamond',serif;font-size:1.3rem;
               font-weight:600;color:var(--gold);letter-spacing:.08em}
.brand-txt .b2{font-family:'Cormorant Garamond',serif;font-size:.85rem;
               font-weight:300;color:var(--soft);letter-spacing:.2em;text-transform:uppercase}

.navlinks{display:flex;align-items:center;gap:clamp(.4rem,1.4vw,1.5rem)}
.navlinks a{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
            color:var(--muted);font-weight:500;padding:.3rem .1rem;
            border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
.navlinks a:hover,.navlinks a.act{color:var(--gold);border-bottom-color:var(--gold)}
.navlinks .login-btn{
  background:transparent;border:1px solid rgba(201,165,53,.5);
  color:var(--gold) !important;padding:.4rem 1rem;border-radius:var(--r);
  border-bottom:1px solid rgba(201,165,53,.5) !important;
  transition:background .2s,color .2s !important;font-size:.72rem}
.navlinks .login-btn:hover{background:var(--gold);color:var(--dark) !important}
.navlinks .btn-comunidad-nav{
  background:linear-gradient(135deg,#1a6b3c,#2e9e5e);
  color:#fff !important;padding:.4rem 1rem;border-radius:var(--r);
  border-bottom:none !important;font-size:.72rem;font-weight:700;
  transition:opacity .2s,transform .15s !important;white-space:nowrap}
.navlinks .btn-comunidad-nav:hover{opacity:.88;transform:translateY(-1px)}
.mmenu .btn-comunidad-nav{
  display:block;background:linear-gradient(135deg,#1a6b3c,#2e9e5e);
  color:#fff !important;padding:.6rem 1.2rem;border-radius:var(--r);
  font-weight:700;text-align:center;margin-bottom:6px}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:6px;z-index:201}
.burger span{display:block;width:24px;height:1.5px;background:var(--gold);transition:transform .3s,opacity .3s}
.burger.op span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.op span:nth-child(2){opacity:0}
.burger.op span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* height:100dvh — el menú termina en el borde visible real del navegador
   móvil (100vh/inset queda detrás de la barra de URL y tapa la última opción) */
.mmenu{display:none;position:fixed;inset:0;height:100vh;height:100dvh;
       background:rgba(24,27,33,.98);
       backdrop-filter:blur(20px);z-index:199;flex-direction:column;
       align-items:center;gap:1.5rem;padding-top:var(--nav);
       padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));
       overflow-y:auto;-webkit-overflow-scrolling:touch}
/* Centrado con margen automático: se ve centrado cuando hay espacio,
   pero permite hacer scroll cuando las opciones no caben en pantalla
   (justify-content:center recorta el inicio y bloquea el scroll) */
.mmenu > :first-child{margin-top:auto}
.mmenu > :last-child{margin-bottom:auto}
.mmenu.op{display:flex}
.mmenu a{font-family:'Cormorant Garamond',serif;font-size:1.8rem;
         color:var(--soft);transition:color .2s}
.mmenu a:hover{color:var(--gold)}
.mmenu .mob-login{font-size:1.2rem !important;border:1px solid rgba(201,165,53,.4);
                  padding:.5rem 2rem;border-radius:var(--r);color:var(--gold) !important}
/* Pantallas bajas: compactar para que quepan las 9 opciones sin scroll
   (esta regla debe ir DESPUÉS de .mmenu a para poder sobreescribirla) */
@media(max-height:700px){
  .mmenu{gap:1rem}
  .mmenu a{font-size:1.55rem}
}

@media(max-width:900px){
  .burger{display:flex}.navlinks{display:none}
}

/* ── «Comprar» en el menú (computador) ───────────────────── */
.navlinks .nav-comprar{
  background:var(--gold);color:var(--dark) !important;font-weight:700;
  padding:.45rem 1.1rem;border-radius:var(--r);border-bottom:none !important;
  white-space:nowrap;transition:background .2s,transform .15s !important}
.navlinks .nav-comprar:hover{background:var(--gold-l);transform:translateY(-1px)}
.navlinks a{white-space:nowrap}
.nav-comprar-solo{display:none}
/* Con «Comprar» el menú completo ya no cabe por debajo de ~1200 px:
   se recoge en la hamburguesa (como ya pasaba bajo 900 px) y queda
   a la vista solo el botón de comprar. */
@media(max-width:1200px){
  .burger{display:flex}
  .navlinks{display:none}
  .nav-comprar-solo{display:inline-block;margin-left:auto;margin-right:1rem;
    background:var(--gold);color:var(--dark);font-weight:700;font-size:.74rem;
    letter-spacing:.1em;text-transform:uppercase;padding:.55rem 1.1rem;border-radius:var(--r);
    white-space:nowrap}
  .nav-comprar-solo:hover{background:var(--gold-l);text-decoration:none}
}
/* En el celular el botón lo pone la barra fija de abajo. */
@media(max-width:900px){.nav-comprar-solo{display:none}}
@media(min-width:1201px) and (max-width:1400px){
  .navlinks{gap:1rem}
  .navlinks a{letter-spacing:.07em}
}

/* ── «Comprar» en el menú del celular ───────────────────── */
.mmenu .mob-comprar{font-family:'Raleway',sans-serif;font-size:1.05rem !important;
  font-weight:700;letter-spacing:.06em;background:var(--gold);color:var(--dark) !important;
  padding:.75rem 2rem;border-radius:var(--r)}

/* ── Barra fija de compra (celular) ──────────────────────── */
.cta-fija{display:none}
@media(max-width:900px){
  .cta-fija{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:150;
    gap:.6rem;align-items:stretch;
    padding:.65rem clamp(.8rem,4vw,1.2rem) calc(.65rem + env(safe-area-inset-bottom));
    background:rgba(24,27,33,.97);border-top:1px solid var(--dborder);
    box-shadow:0 -6px 30px rgba(0,0,0,.45);
    transform:translateY(110%);transition:transform .25s ease;visibility:hidden}
  body.cta-fija-on .cta-fija{transform:none;visibility:visible}
  /* Para que la barra no tape el final de la página (pie, botones). */
  body.cta-fija-on{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .cta-fija-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:var(--gold);color:var(--dark);border-radius:var(--r);padding:.6rem 1rem;
    min-height:52px;text-decoration:none}
  .cta-fija-btn:active{background:var(--gold-l)}
  .cta-fija-t{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.88rem}
  .cta-fija-p{font-size:.74rem;font-weight:600;opacity:.8;margin-top:.1rem}
  .cta-fija-wa{flex:0 0 52px;display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(201,165,53,.5);border-radius:var(--r);color:var(--gold)}
}
@media print{.cta-fija{display:none !important}}

/* ── FRANJA «EN ESTA PÁGINA» (páginas sueltas) ───────────────
   Mismo estilo que las pestañas del sitio (.snb de index.css). Se
   queda pegada justo debajo del menú al bajar. */
.m-subnav{position:sticky;top:var(--nav);z-index:60;
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  padding:0 clamp(1rem,4vw,3rem);
  background:var(--dmid);border-bottom:1px solid var(--dborder)}
.has-pioneer-bar .m-subnav{top:calc(var(--nav) + var(--banner-h))}
.m-subnav::-webkit-scrollbar{display:none}
.m-subnav-link{color:var(--muted);font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;padding:1rem 1.2rem;border-bottom:2px solid transparent;
  white-space:nowrap;font-weight:500;flex-shrink:0;transition:color .2s,border-color .2s}
.m-subnav-link:hover,.m-subnav-link.act{color:var(--gold);border-bottom-color:var(--gold);text-decoration:none}
/* Un salto a #planes o #preguntas tiene que caer debajo del menú y
   de la franja, no tapado por ellos. */
body.enc-sitio section[id],body.enc-sitio div[id]{scroll-margin-top:calc(var(--nav) + 4.5rem)}
body.enc-sitio.has-pioneer-bar section[id],body.enc-sitio.has-pioneer-bar div[id]{
  scroll-margin-top:calc(var(--nav) + var(--banner-h) + 4.5rem)}