/* CAPO Health — menú principal con desplegable por categoría (09-oct, pedido del cliente).
   El HTML lo genera scripts/menu.py para todas las páginas; el comportamiento está en nav-v1.js.
   Escritorio (≥901px): el panel de cada categoría abre con hover, con foco (teclado) y con el chevron (.open).
   Móvil (≤900px): dentro del panel de la hamburguesa cada categoría es un acordeón (el chevron abre su lista).
   Va aparte de site-v7.css porque lo cargan también las legales y el blog. El nombre es la versión: nav-v2.css si cambia. */

.nav__dd{--dd:linear-gradient(90deg,#2C8FCB,#8FCDEE);position:relative;display:flex;align-items:center;gap:.2rem}
.nav__dd--wl{--dd:linear-gradient(90deg,#2C8FCB,#8FCDEE)}
.nav__dd--ms{--dd:linear-gradient(90deg,#6E85C4,#BDE1F5)}
.nav__dd--sh{--dd:linear-gradient(90deg,#B8304A,#F07A8A)}
.nav__dd--el{--dd:linear-gradient(90deg,#2A9DB0,#8FE0EA)}

.nav__tog{display:grid;place-items:center;width:22px;height:22px;margin:0;padding:0;border:0;border-radius:6px;
  background:none;color:#8FA0C8;cursor:pointer;transition:color .25s}
.nav__tog svg{transition:transform .3s var(--ease,cubic-bezier(.22,.68,0,1))}
.nav__tog:focus-visible{outline:2px solid #BDE1F5;outline-offset:2px}
.nav__dd:hover .nav__tog,.nav__dd.open .nav__tog{color:#fff}
.nav__links a.nav__cat[aria-current]{color:#fff}
.nav__links a.nav__cat[aria-current]::after{transform:scaleX(1)}

/* panel */
.nav__panel{position:relative;padding:.6rem;border-radius:18px;background:rgba(15,22,40,.97);
  border:1px solid rgba(189,225,245,.16);box-shadow:0 30px 70px rgba(3,8,22,.55),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
.nav__panel::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:2px;border-radius:2px;background:var(--dd)}
.nav__mh{display:flex;align-items:center;gap:.5rem;margin:.25rem .5rem .45rem;font-family:var(--fh,'Inter'),system-ui,sans-serif;
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#BDE1F5}
.nav__mh::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dd);flex:0 0 auto}

/* ítems (ganan a .nav__links a y a su subrayado animado de site-v7.css) */
.nav__links a.nav__item,.nav__links a.nav__all{position:static}
.nav__links a.nav__item::after,.nav__links a.nav__all::after{display:none}
.nav__links a.nav__item{display:flex;align-items:center;gap:.75rem;padding:.5rem .7rem .5rem .5rem;border-radius:12px;
  color:#fff;font-size:.9rem;font-weight:500;transition:background .2s}
.nav__links a.nav__item:hover,.nav__links a.nav__item:focus-visible{background:rgba(143,205,238,.12);color:#fff}
.nav__item img{flex:0 0 auto;width:40px;height:40px;border-radius:10px;object-fit:cover;background:#E9EEF7}
.nav__item b{display:block;font-size:.92rem;font-weight:600;line-height:1.2;color:#fff}
.nav__item small{display:block;margin-top:.12rem;font-size:.75rem;color:#AEBBDA}
.nav__item .rx{font-size:.58rem;color:#BDE1F5}
.nav__links a.nav__all{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.35rem;
  padding:.75rem .7rem .35rem;border-top:1px solid rgba(189,225,245,.12);font-size:.84rem;font-weight:600;color:#BDE1F5}
.nav__links a.nav__all:hover{color:#fff}

@media(min-width:901px){
  /* el padding-top hace de puente: el mouse baja al panel sin salir de .nav__dd */
  .nav__menu{position:absolute;top:100%;left:50%;z-index:60;width:330px;padding-top:16px;
    opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,8px);
    transition:opacity .2s ease,transform .3s var(--ease,cubic-bezier(.22,.68,0,1)),visibility 0s linear .3s}
  .nav__dd:hover .nav__menu,.nav__dd:focus-within .nav__menu,.nav__dd.open .nav__menu{
    opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition-delay:0s}
  .nav__dd:hover .nav__tog svg,.nav__dd.open .nav__tog svg{transform:rotate(180deg)}
  /* cerrado con Escape (nav-v1.js) aunque el foco o el mouse sigan dentro */
  .nav__dd.shut .nav__menu{opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,8px)}
  .nav__dd.shut .nav__tog svg{transform:none}
}
/* 4 categorías + Partners + Log in + CTA: en anchos medianos se acorta el aire */
@media(min-width:901px) and (max-width:1499px){
  .nav .wrap{gap:1.2rem}
  .nav__links{gap:1.05rem}
  .nav__links a{font-size:.88rem}
}

@media(max-width:900px){
  /* el panel de la hamburguesa crece con los acordeones: scroll propio */
  .nav__links{max-height:calc(100vh - var(--nav-h));max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain}
  .nav__dd{flex-wrap:wrap;width:100%;gap:0;border-bottom:1px solid var(--hair,rgba(189,225,245,.10))}
  .nav__links a.nav__cat{flex:1 1 auto;width:auto;border-bottom:0}
  .nav__tog{width:44px;height:44px;border-radius:10px;color:#BDE1F5}
  .nav__dd.open .nav__tog svg{transform:rotate(180deg)}
  .nav__menu{display:none;flex-basis:100%}
  .nav__dd.open .nav__menu{display:block}
  .nav__panel{padding:0 0 .8rem;background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav__panel::before,.nav__mh{display:none}
  .nav__links a.nav__item{width:100%;padding:.5rem;border-bottom:0;font-size:.95rem}
  .nav__links a.nav__all{width:100%;margin-top:.2rem;padding:.7rem .5rem .2rem;border-bottom:0}
}

@media(prefers-reduced-motion:reduce){.nav__menu,.nav__tog svg{transition:none!important}}
@media print{.nav__menu{display:none!important}}


/* ================= TELÉFONO DE CONTACTO EN EL MENÚ (20-oct, pedido de Dan: "Or call us at …") =================
   Móvil: línea centrada bajo "Start your visit" dentro de la hamburguesa. Escritorio: solo ícono + número, a la derecha
   del CTA, y únicamente cuando sobra ancho (≥1320px) para no apretar las 4 categorías. v2 = el nombre es la versión. */
.nav__links a.nav__tel{position:static;display:inline-flex;align-items:center;gap:.4rem;color:#BDE1F5;font-size:.84rem;
  font-weight:600;white-space:nowrap;border-bottom:0}
.nav__links a.nav__tel::after{display:none}
.nav__links a.nav__tel:hover,.nav__links a.nav__tel:focus-visible{color:#fff}
.nav__tel svg{flex:0 0 auto}
.nav__tel b{font-weight:700;color:inherit}
@media(min-width:901px){.nav__tel__pre{display:none}.nav__links a.nav__tel{margin-left:.1rem}}
/* 20-oct: con Partners en el menú el teléfono solo cabe desde 1500 px (antes 1320) */
@media(min-width:901px) and (max-width:1499px){.nav__links a.nav__tel{display:none}}
@media(max-width:900px){
  .nav__links a.nav__tel{width:100%;justify-content:center;gap:.5rem;margin-top:.9rem;padding:.4em 0 1.1em;font-size:.98rem;
    border-bottom:0!important}
  .nav__tel svg{width:16px;height:16px}
}


/* ================= PARTNERS EN EL MENÚ (20-oct, pedido de Dan) =================
   Enlace simple a la sección #partners del home, entre las categorías y el botón Log in. En móvil es una
   fila más de la hamburguesa. v3 = el nombre es la versión. */
.nav__links a.nav__partners{white-space:nowrap}
/* 20-oct: con Partners + teléfono los enlaces se partían en dos líneas aunque no hubiera desbordamiento
   (el .wrap limita el ancho y flex los compríme). Se fuerza una sola línea y se acorta el aire. */
@media(min-width:901px){
  .nav__links a.nav__cat,.nav__links a.nav__partners,.nav__links a.nav__login,.nav__links a.nav__cta{white-space:nowrap}
  .nav__links a.nav__cta,.nav__links a.nav__login{flex:0 0 auto}
}
@media(min-width:1500px){.nav .wrap{gap:1rem}.nav__links{gap:1.15rem}}
@media(max-width:900px){
  .nav__links a.nav__partners{width:100%;padding:.95em 0;border-bottom:1px solid var(--hair,rgba(189,225,245,.10))}
}