/* ============================================================
   LIQUID GLASS — buttons, fields, toggles (RIM design system v2)
   Thick refractive rim · colored light inside · strong specular
   ============================================================ */
.lg{
  --tint-a:#1aa7b8; --tint-b:#0b3d4a; --glow:rgba(26,167,184,.55); --fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:58px;padding:0 32px;border-radius:999px;
  font:600 16px/1 'Inter',system-ui,sans-serif;letter-spacing:.01em;color:var(--fg);
  text-decoration:none;cursor:pointer;border:0;isolation:isolate;overflow:visible;white-space:nowrap;
  background:
    /* top specular sheet */
    linear-gradient(180deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.10) 20%,rgba(255,255,255,0) 48%),
    /* light trapped at the edges of the glass */
    radial-gradient(60% 120% at 0% 60%,var(--tint-a) 0%,transparent 60%),
    radial-gradient(60% 120% at 100% 50%,color-mix(in srgb,var(--tint-a) 70%,#fff) 0%,transparent 60%),
    radial-gradient(90% 60% at 50% 110%,color-mix(in srgb,var(--tint-a) 80%,#fff) 0%,transparent 60%),
    /* dark glass body */
    linear-gradient(180deg,color-mix(in srgb,var(--tint-b) 70%,#1a2a33),color-mix(in srgb,var(--tint-b) 55%,#000));
  background-blend-mode:normal,screen,screen,screen,normal;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.85),            /* bright top rim */
    inset 0 -4px 8px rgba(0,0,0,.55),                 /* thick bottom edge */
    inset 3px 0 6px rgba(255,255,255,.22),
    inset -3px 0 6px rgba(255,255,255,.18),
    inset 0 -18px 24px -14px rgba(255,255,255,.25),   /* inner lower glow */
    0 1px 0 rgba(255,255,255,.25),
    0 18px 34px -10px var(--glow),                    /* colored light under the glass */
    0 30px 60px -20px rgba(0,0,0,.8);
  backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,filter .3s ease;
  transform:translateZ(0);
}
/* refractive rim: a lighter inner pill offset inside the outer one */
.lg::before{
  content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;z-index:1;padding:2px;
  background:conic-gradient(from 200deg,rgba(255,255,255,.75),rgba(255,255,255,.28) 25%,color-mix(in srgb,var(--tint-a) 70%,#fff) 45%,rgba(255,255,255,.28) 62%,rgba(255,255,255,.7) 80%,rgba(255,255,255,.1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.9;
}
/* elongated specular blob (the "liquid" highlight) */
.lg::after{
  content:"";position:absolute;left:14px;right:38%;top:5px;height:34%;border-radius:999px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,.35) 60%,rgba(255,255,255,0));
  filter:blur(1.2px);opacity:.9;mix-blend-mode:screen;
}
.lg:hover{transform:translateY(-2px) scale(1.015);filter:saturate(1.15) brightness(1.06);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.9),inset 0 -4px 8px rgba(0,0,0,.55),inset 3px 0 6px rgba(255,255,255,.25),inset -3px 0 6px rgba(255,255,255,.2),inset 0 -18px 24px -14px rgba(255,255,255,.3),0 1px 0 rgba(255,255,255,.3),0 26px 44px -10px var(--glow),0 36px 70px -20px rgba(0,0,0,.85)}
.lg:active{transform:translateY(1px) scale(.985);filter:brightness(.96)}
.lg svg{width:20px;height:20px;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.lg span{position:relative;text-shadow:0 1px 2px rgba(0,0,0,.55)}

/* ---- color variants (light trapped inside the glass) ---- */
.lg-cyan   {--tint-a:#3fe3ff; --tint-b:#063a4b; --glow:rgba(63,227,255,.55)}
.lg-teal   {--tint-a:#17c6b2; --tint-b:#063c3a; --glow:rgba(23,198,178,.5)}
.lg-orange {--tint-a:#ff8a3d; --tint-b:#5a1d08; --glow:rgba(255,138,61,.55)}
.lg-magenta{--tint-a:#ff4fb0; --tint-b:#3a0c3a; --glow:rgba(255,79,176,.5)}
.lg-violet {--tint-a:#8a6bff; --tint-b:#1c0f4a; --glow:rgba(138,107,255,.55)}
.lg-dark   {--tint-a:#5b6b78; --tint-b:#0c1116; --glow:rgba(120,160,190,.35)}
.lg-white  {--tint-a:#ffffff; --tint-b:#aeb7c0; --glow:rgba(255,255,255,.35); --fg:#0b1a22}
.lg-white span{text-shadow:0 1px 0 rgba(255,255,255,.6)}
.lg-white::after{opacity:1}

/* sizes */
.lg-sm{min-height:44px;padding:0 20px;font-size:14px}
.lg-lg{min-height:66px;padding:0 40px;font-size:18px}
.lg-xl{min-height:76px;padding:0 48px;font-size:20px;border-radius:999px}
.lg-block{width:100%}

/* icon-leading button: round icon well */
.lg .well{display:grid;place-items:center;width:38px;height:38px;margin-left:-14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(255,255,255,.08) 60%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -2px 4px rgba(0,0,0,.45)}

/* ---- glass text field ---- */
.lg-field{
  --tint-a:#cfe9f2; --tint-b:#1a2b33; --glow:rgba(180,220,235,.35);
  display:flex;align-items:center;gap:12px;min-height:58px;padding:0 20px 0 22px;border-radius:999px;position:relative;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.06) 35%,rgba(0,0,0,.18)),linear-gradient(180deg,#223640,#0c161c);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.75),inset 0 -4px 8px rgba(0,0,0,.55),inset 3px 0 6px rgba(255,255,255,.2),inset -3px 0 6px rgba(255,255,255,.15),0 18px 34px -12px var(--glow),0 30px 60px -20px rgba(0,0,0,.8);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
}
.lg-field::after{content:"";position:absolute;left:14px;right:45%;top:5px;height:32%;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,0));filter:blur(1.2px);pointer-events:none;mix-blend-mode:screen}
.lg-field input{flex:1;background:none;border:0;outline:0;color:#fff;font:500 16px 'Inter',system-ui,sans-serif;min-width:0;position:relative;z-index:1}
.lg-field input::placeholder{color:rgba(255,255,255,.65)}
.lg-field svg{width:20px;height:20px;color:#fff;position:relative;z-index:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}

/* ---- glass toggle (EN / ES) ---- */
.lg-toggle{display:inline-flex;align-items:center;min-height:50px;padding:5px;border-radius:999px;position:relative;isolation:isolate;gap:4px;
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.05) 40%,rgba(0,0,0,.2)),linear-gradient(180deg,#1d2f38,#0a1318);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.7),inset 0 -4px 8px rgba(0,0,0,.55),0 16px 30px -12px rgba(63,227,255,.35),0 24px 50px -20px rgba(0,0,0,.8)}
.lg-toggle button{min-width:52px;height:40px;border-radius:999px;font:700 13px 'Orbitron',sans-serif;letter-spacing:.15em;color:rgba(255,255,255,.65);transition:.25s}
.lg-toggle button.on{color:#fff;background:radial-gradient(90% 140% at 30% 30%,#5df0ff,#0e7f99 70%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.85),inset 0 -3px 6px rgba(0,0,0,.4),0 6px 16px -4px rgba(63,227,255,.7)}

/* ---- glass card / window ---- */
.lg-card{
  position:relative;border-radius:26px;padding:28px;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.05) 30%,rgba(255,255,255,.02) 70%,rgba(0,0,0,.18)),linear-gradient(160deg,rgba(14,52,64,.75),rgba(5,22,30,.85));
  box-shadow:inset 0 2px 1px rgba(255,255,255,.55),inset 0 -3px 8px rgba(0,0,0,.45),inset 2px 0 4px rgba(255,255,255,.12),inset -2px 0 4px rgba(255,255,255,.1),0 30px 70px -20px rgba(0,0,0,.8),0 20px 50px -24px rgba(63,227,255,.35);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
}
.lg-card::after{content:"";position:absolute;left:18px;right:40%;top:6px;height:22px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,0));filter:blur(2px);pointer-events:none;mix-blend-mode:screen}