/* Cabecera única del sitio (22-10-2026). Siempre transparente: logo y menú en dos cápsulas de vidrio
   de la misma altura, con el mismo margen lateral del Inicio. Prefijo sh-. */
:root{--sh-pad:clamp(20px,4.4vw,72px);--sh-h:64px;--sh-ink:var(--brand-deep-blue,#000082);--sh-blue:var(--brand-electric-blue,#2954FF);--sh-ease:cubic-bezier(.2,.75,.15,1)}
.sh-header{position:fixed;z-index:60;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(16px,2.6vh,24px) var(--sh-pad);pointer-events:none;font-family:var(--display,Delight,sans-serif);transition:padding .45s var(--sh-ease),opacity 1s ease}
.sh-header>*{pointer-events:auto}
.sh-pill{display:flex;align-items:center;height:var(--sh-h);border-radius:999px;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 0 0 1px rgba(0,0,130,.07),inset 0 1px 0 rgba(255,255,255,.7),0 12px 32px -20px rgba(0,0,130,.42);transition:height .45s var(--sh-ease)}
.sh-logo{padding:0 clamp(22px,2vw,30px)}
.sh-logo img{display:block;height:clamp(36px,2.9vw,44px);width:auto;transition:height .45s var(--sh-ease)}
.sh-nav{gap:2px;padding:0 8px}
.sh-nav a,.sh-toggle{display:inline-flex;align-items:center;gap:6px;height:calc(var(--sh-h) - 16px);padding:0 clamp(14px,1.3vw,20px);border-radius:999px;
  font:500 14px/1 var(--display,Delight,sans-serif);color:var(--sh-ink);text-decoration:none;white-space:nowrap;transition:background .4s var(--sh-ease),color .4s var(--sh-ease),height .45s var(--sh-ease)}
.sh-nav a:hover,.sh-nav a:focus-visible{background:var(--sh-ink);color:#fff;outline:none}
.sh-nav a[aria-current="page"]{background:rgba(0,0,130,.07)}
.sh-nav a.sh-cta{background:var(--sh-ink);color:#fff;margin-left:4px}
.sh-nav a.sh-cta:hover,.sh-nav a.sh-cta:focus-visible{background:var(--sh-blue)}
.sh-nav a:active,.sh-toggle:active{transform:scale(.97)}
.sh-toggle{display:none;appearance:none;border:0;background:none;cursor:pointer}
.sh-toggle i{position:relative;width:14px;height:8px;border-block:1.6px solid currentColor;transition:transform .4s var(--sh-ease)}
.sh-header.is-open .sh-toggle i{transform:rotate(90deg)}
/* Al hacer scroll las dos cápsulas bajan de alto juntas */
.sh-header.is-scrolled{--sh-h:54px;padding-top:12px;padding-bottom:12px}
/* El logo se achica recién cuando aparece su cápsula (.sh-solid); sobre el hero conserva su tamaño */
.sh-header.is-scrolled.sh-solid .sh-logo img{height:clamp(30px,2.4vw,36px)}
/* Panel del menú en pantallas medianas y celulares */
.sh-panel{position:absolute;top:calc(100% - 4px);right:var(--sh-pad);display:grid;gap:2px;min-width:240px;padding:8px;border-radius:24px;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 0 0 1px rgba(0,0,130,.07),0 24px 50px -24px rgba(0,0,130,.45);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;visibility:hidden;transition:opacity .35s var(--sh-ease),transform .45s var(--sh-ease),visibility 0s .45s}
.sh-header.is-open .sh-panel{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.sh-panel a{padding:14px 18px;border-radius:16px;font:500 15px/1.2 var(--display,Delight,sans-serif);color:var(--sh-ink);text-decoration:none}
.sh-panel a:hover,.sh-panel a:focus-visible{background:rgba(0,0,130,.06);outline:none}
.sh-panel a[aria-current="page"]{background:rgba(0,0,130,.06)}
.sh-panel a.sh-cta{background:var(--sh-ink);color:#fff;text-align:center;margin-top:4px}
@media (min-width:1101px){.sh-panel{display:none}}
@media (max-width:1100px){
  .sh-js .sh-nav a:not(.sh-keep){display:none}
  .sh-js .sh-toggle{display:inline-flex}
  .sh-header:not(.sh-js) .sh-nav{overflow-x:auto;max-width:calc(100vw - 2 * var(--sh-pad));scrollbar-width:none}
}
@media (max-width:600px){
  :root{--sh-h:56px}
  .sh-header{padding:12px 20px}
  .sh-header:not(.sh-js){flex-wrap:wrap}
  .sh-logo{padding:0 18px}
  .sh-logo img{height:36px}
  .sh-header.is-scrolled .sh-logo img{height:32px}
  .sh-nav{padding:0 6px}
  .sh-js .sh-nav a.sh-keep{display:none}
  .sh-panel{right:20px;left:20px;min-width:0}
  .sh-toggle{padding:0 18px}
}
@media (prefers-reduced-transparency:reduce){.sh-pill,.sh-panel{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.sh-header,.sh-pill,.sh-logo img,.sh-panel,.sh-nav a{transition:none}}
/* Inicio: la cabecera entra junto con el titular de la portada */
body:has(.hx.hx-js:not(.hx-in)) .sh-header{opacity:0}
/* Páginas interiores: las migas de pan van sobre el hero, bajo la cabecera, sin franja propia */
.sh-offset .breadcrumbs{position:absolute;z-index:2;top:calc(var(--sh-h) + clamp(28px,4vh,40px));left:var(--sh-pad);margin:0;padding:0;background:none;border:0}
/* El primer bloque recupera el alto que ocupaba la cabecera vieja, pero con su propio fondo: el color del hero
   sube detrás de las cápsulas y no queda franja. (Fertilidad tiene un hero a pantalla completa y queda igual.) */
.sh-offset main>:first-child:not(.breadcrumbs):not(.fv-hero2):not(.hc-hero):not(.hc-sec),
.sh-offset main>.breadcrumbs:first-child+*:not(.fv-hero2):not(.hc-hero):not(.hc-sec){border-top:calc(var(--sh-h) + clamp(56px,9vh,88px)) solid transparent}
/* QA-68: al hacer scroll el vidrio se vuelve casi opaco para que el contenido oscuro no se vea detrás del logo */
.sh-header.is-scrolled .sh-pill{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)}
/* Inicio: la portada de la marca paraguas lleva el logo más grande (D16); las dos cápsulas crecen juntas
   y al hacer scroll vuelven al tamaño del resto del sitio */
.sh-home:not(.is-scrolled){--sh-h:76px}
.sh-home:not(.is-scrolled) .sh-logo img{height:clamp(44px,3.6vw,54px)}
@media (max-width:600px){.sh-home:not(.is-scrolled){--sh-h:60px}.sh-home:not(.is-scrolled) .sh-logo img{height:36px}}
/* 30-10-2026 (Fran): sobre el hero el logo va suelto (cápsula 100 % transparente); la cápsula aparece recién
   cuando el hero ya pasó (site-header.js pone .sh-solid). El margen negativo mantiene el logo alineado con el texto
   en los dos estados, así no salta al aparecer el vidrio. */
.sh-logo{margin-left:calc(-1 * clamp(22px,2vw,30px));transition:height .45s var(--sh-ease),background-color .5s var(--sh-ease),box-shadow .5s var(--sh-ease),-webkit-backdrop-filter .5s var(--sh-ease),backdrop-filter .5s var(--sh-ease)}
@media (max-width:600px){.sh-logo{margin-left:-18px}}
.sh-header:not(.sh-solid) .sh-logo{background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}