/* Menú de cristal líquido: cápsula de vidrio con una gota que viaja a la opción activa.
   Inspirado en "Liquid Navbar" (Nimbus UI), reescrito sin dependencias. */
.lq-pill{position:relative;display:inline-flex;align-items:center;gap:2px;padding:5px;border-radius:999px;isolation:isolate}
.lq-glass{position:absolute;inset:0;border-radius:inherit;z-index:-2;background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.22),0 12px 30px -14px rgba(10,28,32,.55)}
.lq-drop{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;will-change:transform,width;
  background:radial-gradient(120% 140% at 30% 0%,rgba(255,255,255,.85),rgba(255,255,255,0) 55%),rgba(232,222,217,.92);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -2px 6px rgba(10,137,158,.25),inset 0 0 0 1px rgba(255,255,255,.6),0 6px 16px -6px rgba(10,28,32,.45)}
.lq-pill.has-active .lq-drop{opacity:1}
.site-header nav .lq-item{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:999px;color:rgba(17,17,17,.72);font-size:14px;transition:color .25s;text-decoration:none}
.site-header nav .lq-item:hover,.site-header nav .lq-item[aria-current="true"]{color:#111;text-decoration:none}
.lq-ico{display:inline-flex;flex:none}
.lq-ico svg{transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.lq-item[aria-current="true"] .lq-ico svg{transform:translateY(-1px) scale(1.08)}
.lq-ripple{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;z-index:0;border:1.5px solid rgba(255,255,255,.9);animation:lqRipple .7s ease-out forwards}
@keyframes lqRipple{to{transform:scale(9);opacity:0}}

/* Pequeña escena de cada icono al pulsar */
.lq-ico.play-compass svg{animation:lqSpin .9s cubic-bezier(.2,.75,.25,1) both}
@keyframes lqSpin{to{transform:rotate(360deg) scale(1.08)}}
.lq-ico.play-wave svg{animation:lqWave .9s ease-in-out both;transform-origin:50% 92%}
@keyframes lqWave{20%{transform:rotate(-15deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(4deg)}100%{transform:translateY(-1px) scale(1.08)}}
.lq-ico.play-beat svg{animation:lqBeat .8s ease both}
@keyframes lqBeat{15%{transform:scale(1.3)}30%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:translateY(-1px) scale(1.08)}}
.lq-ico.play-flip svg{animation:lqFlip .8s cubic-bezier(.2,.75,.25,1) both}
@keyframes lqFlip{from{transform:perspective(80px) rotateY(0)}to{transform:perspective(80px) rotateY(360deg) scale(1.08)}}
.lq-ico.play-drop svg{animation:lqDrop .9s cubic-bezier(.4,0,.3,1) both;transform-origin:50% 100%}
@keyframes lqDrop{26%{transform:translateY(-10px) scale(.9,1.1)}46%{transform:translateY(2px) scale(1.25,.72)}64%{transform:translateY(-2px) scale(.94,1.06)}100%{transform:translateY(-1px) scale(1.08)}}

@media(max-width:1050px){.site-header nav .lq-item{padding:0 11px;font-size:13px}}
@media(max-width:900px) and (min-width:641px){.site-header nav .lq-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media(max-width:640px){
  .lq-pill{display:flex;flex-direction:column;align-items:stretch;padding:0;width:100%}
  .lq-glass,.lq-drop{display:none}
  .site-header nav .lq-item{height:auto;min-height:44px;padding:12px;border-radius:6px;color:#111}
}
@media(prefers-reduced-motion:reduce){.lq-ico svg{animation:none!important}.lq-ripple{display:none}}

/* Botón «Conversemos»: gota de cristal llena */
.site-header .header-cta{position:relative;overflow:hidden;isolation:isolate;border:0;border-radius:999px;padding:12px 22px;color:#111;
  background:radial-gradient(120% 140% at 30% 0%,rgba(255,255,255,.85),rgba(255,255,255,0) 55%),rgba(232,222,217,.92);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -2px 6px rgba(10,137,158,.25),inset 0 0 0 1px rgba(255,255,255,.6),0 10px 24px -10px rgba(10,28,32,.55);
  transition:box-shadow .3s}
.site-header .header-cta:hover{background:radial-gradient(120% 140% at 30% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 60%),rgba(232,222,217,1);animation:lqJelly .7s cubic-bezier(.3,1.4,.5,1)}
@keyframes lqJelly{25%{transform:scale(1.07,.92)}50%{transform:scale(.96,1.05)}75%{transform:scale(1.02,.98)}100%{transform:none}}
.header-cta span:not(.lq-ripple){display:inline-block;transition:transform .2s}
.header-cta:hover span:not(.lq-ripple){animation:lqArrow .8s cubic-bezier(.55,0,.3,1)}
@keyframes lqArrow{40%{transform:translate(14px,-14px);opacity:0}41%{transform:translate(-12px,12px);opacity:0}100%{transform:none;opacity:1}}
.header-cta .lq-ripple{border-color:rgba(10,137,158,.6)}
@media(prefers-reduced-motion:reduce){.site-header .header-cta:hover,.header-cta:hover span:not(.lq-ripple){animation:none}}