/* ============ BOTÓN DE IDIOMA ============
   v6 (30-oct): el botón es un enlace a la página gemela de /es/; sin Google Translate. Lo crea assets/lang-v6.js.
   v4 (28-sep): píldora de cristal navy. v5 (09-oct, pedido del cliente): BLANCA y más notoria — fondo blanco
   sólido, texto navy, globo y "En Español" en el cyan de texto (#18709F, 5.44:1 sobre blanco), un poco más grande
   y con un pulso suave de anillo al cargar. Sigue colgando bajo el header, alineada bajo "Start your visit" y
   pegada bajo el menú al hacer scroll (nunca flotante: tapaba la frase de receta y el texto legal).
   El contenedor mide 0 de alto y sólo el botón recibe clics.
   Su JS publica el alto que ocupa (--lang-h), su ancho (--lang-w) y el
   alto del menú (--nav-box). */
:root{--lang-h:0px;--lang-w:0px}
/* z-index bajo el del menú (50): el menú móvil y los desplegables la tapan */
.lang{position:sticky;top:var(--nav-box,62px);z-index:49;height:0;pointer-events:none;font-family:'Figtree',system-ui,sans-serif}
.lang__in{display:flex;justify-content:flex-end;width:min(1280px,94vw);margin:0 auto;padding-top:10px}
.lang__btn{pointer-events:auto;text-decoration:none;position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.6rem;
  min-height:42px;max-width:calc(100vw - 24px);margin:0;padding:.5rem 1.25rem .5rem .9rem;border:1px solid rgba(60,80,137,.22);
  border-radius:999px;cursor:pointer;color:#141B2E;background:#fff;
  font:700 .86rem/1.2 'Figtree',system-ui,sans-serif;letter-spacing:.005em;text-align:left;
  /* sombra marcada: el botón se despega del nav navy, de la foto del hero y de la hoja blanca de las legales */
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 22px rgba(3,8,22,.26),0 1px 3px rgba(3,8,22,.16);
  transition:transform .4s cubic-bezier(.22,.68,0,1),box-shadow .4s cubic-bezier(.22,.68,0,1)}
/* pulso de anillo cyan al cargar (3 veces) para que se note sin quedarse moviendo */
.lang__btn::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 rgba(82,178,229,.6);animation:lang-pulse 1.9s cubic-bezier(.22,.68,0,1) .9s 3}
@keyframes lang-pulse{0%{box-shadow:0 0 0 0 rgba(82,178,229,.6)}100%{box-shadow:0 0 0 14px rgba(82,178,229,0)}}
.lang__btn:hover{transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 28px rgba(3,8,22,.32),0 0 0 4px rgba(143,205,238,.45)}
.lang__btn:focus-visible{outline:2px solid #8FCDEE;outline-offset:3px}
.lang__btn svg{flex:0 0 auto;width:17px;height:17px;color:#18709F}
.lang__tx{display:flex;flex-direction:column;min-width:0}
.lang__tx b{font-weight:800;color:#18709F;border-bottom:1.5px solid rgba(24,112,159,.55);padding-bottom:1px}
.lang__tx small{margin-top:.15rem;font-size:.7rem;font-weight:600;color:#44546B;white-space:normal}

/* lo que se pega bajo el header deja sitio a la píldora */
section[id],[id="top"]{scroll-margin-top:calc(var(--nav-h) + var(--lang-h) + 18px)}
.pdp-hero__col{top:calc(var(--nav-h) + var(--lang-h) + 20px)}
.faq__head{top:calc(var(--nav-h) + var(--lang-h) + 28px)}
@media(min-width:901px){
  /* 29-sep: en móvil la foto del FAQ es position:relative y este top la bajaba encima de las preguntas */
  .faqx__ph{top:calc(var(--nav-h) + var(--lang-h) + 28px)}
  /* landings: la frase de las pestañas se corre a la izquierda de la píldora */
  .pdp-tabs .wrap{padding-right:calc(var(--lang-w) + 28px)}
}
@media(max-width:900px){
  /* landings: las pestañas bajan lo que ocupa la píldora; home: el rótulo "Illustrative image" también */
  .pdp-tabs{padding-top:var(--lang-h)}
  .hero__ph{top:calc(12px + var(--lang-h))}
  .lang__btn{font-size:.82rem;min-height:40px}
}

/* /es/: el menú en español es más largo; de 901 a 1280 px se aprieta para que el logo no desaparezca (medido en verificar-es.py) */
@media(min-width:901px) and (max-width:1280px){
  html[lang="es"] .nav__logo{flex:none}
  html[lang="es"] .nav__links{gap:.6rem}
  html[lang="es"] .nav__links a{font-size:.8rem}
  html[lang="es"] .nav__dd{gap:0}
  html[lang="es"] .nav__tog{width:16px}
  html[lang="es"] .nav__cta .arw{display:none}
}
@media(min-width:901px) and (max-width:1023px){
  html[lang="es"] .nav__links{gap:.35rem}
  html[lang="es"] .nav__links a{font-size:.75rem}
  html[lang="es"] .nav__logo img,html[lang="es"] .nav.stuck .nav__logo img{height:30px}
  html[lang="es"] .nav__cta{margin-left:.1rem}
}

@media(prefers-reduced-motion:reduce){.lang__btn{transition:none}.lang__btn::after{animation:none}}
@media print{.lang{display:none}}