@import url("fonts.css");
@import url("bootstrap-icons.min.css");

/* =============================================================
   WispControl — web pública
   Sistema visual claro, con color por módulo y mucho aire.
   ============================================================= */

:root{
  --blanco:#FFFFFF;
  --nieve:#F5F8FC;
  --nieve2:#EDF2F9;
  --tinta:#0E1726;
  --tinta2:#4A5468;
  --tinta3:#7C879E;
  --linea:#E2E8F1;
  --linea2:#CFD8E6;

  --azul:#0072D0;      --azul-osc:#0257A0;  --azul-luz:#E6F1FC;
  --cian:#00A9BE;      --cian-luz:#E0F5F8;
  --violeta:#6B4CE0;   --violeta-luz:#EDE9FD;
  --verde:#0F9D58;     --verde-luz:#E3F5EB;
  --ambar:#E9930B;     --ambar-luz:#FDF1DC;
  --coral:#EF4B54;     --coral-luz:#FDEAEB;
  --rosa:#D6409F;      --rosa-luz:#FBE9F5;
  --indigo:#4457D6;    --indigo-luz:#E9ECFC;

  --noche:#0B1220;
  --noche2:#141D2E;

  --w:1200px;
  --gut:clamp(20px,4vw,36px);
  --r:16px;
  --r-sm:10px;
  --sombra:0 1px 2px rgba(14,23,38,.05), 0 14px 34px -16px rgba(14,23,38,.22);
  --sombra-alta:0 2px 4px rgba(14,23,38,.06), 0 26px 54px -18px rgba(14,23,38,.30);

  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:"Archivo", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--blanco); color:var(--tinta);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
::selection{ background:var(--azul); color:#fff; }

h1,h2,h3,h4{ margin:0; letter-spacing:-0.035em; line-height:1.06; font-weight:800; }
h1{ font-size:clamp(2.35rem,4.9vw,3.9rem); letter-spacing:-0.045em; }
h2{ font-size:clamp(1.95rem,3.7vw,3rem); }
h3{ font-size:1.22rem; font-weight:700; letter-spacing:-0.024em; line-height:1.28; }
h4{ font-size:1rem; font-weight:700; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:var(--w); margin:0 auto; padding-inline:var(--gut); }
.pad{ padding-block:clamp(58px,7.5vw,110px); }
.pad-sm{ padding-block:clamp(30px,3.6vw,48px); }
.nieve{ background:var(--nieve); }
.lead{ font-size:clamp(1.06rem,1.5vw,1.24rem); line-height:1.55; color:var(--tinta2); }
.small{ font-size:.93rem; color:var(--tinta2); }
.mono{ font-family:var(--mono); }
.centro{ text-align:center; }
.maxw{ max-width:62ch; }
.maxw-c{ max-width:60ch; margin-inline:auto; }

/* ---------- píldoras y etiquetas ---------- */

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--azul); background:var(--azul-luz); padding:7px 14px; border-radius:999px;
  margin-bottom:18px;
}
.eyebrow i{ font-size:14px; }
.eyebrow--cian{ color:#00808F; background:var(--cian-luz); }
.eyebrow--violeta{ color:var(--violeta); background:var(--violeta-luz); }
.eyebrow--ambar{ color:#B87309; background:var(--ambar-luz); }
.eyebrow--verde{ color:var(--verde); background:var(--verde-luz); }
.eyebrow--coral{ color:var(--coral); background:var(--coral-luz); }
.eyebrow--claro{ color:#fff; background:rgba(255,255,255,.16); }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px;
  background:var(--nieve2); color:var(--tinta2); white-space:nowrap;
}
.chip i{ font-size:13px; }
.chip--api{ background:var(--verde-luz); color:var(--verde); }
.chip--fich{ background:var(--azul-luz); color:var(--azul-osc); }
.chip--man{ background:var(--nieve2); color:var(--tinta3); }

/* ---------- botones ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:15px; font-weight:700; letter-spacing:-.01em; text-decoration:none;
  padding:14px 24px; border-radius:999px; border:1.5px solid transparent; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .18s, color .18s;
}
.btn i{ font-size:16px; transition:transform .18s; }
.btn:hover{ transform:translateY(-2px); }
.btn:hover i{ transform:translateX(3px); }
.btn--pri{ background:var(--azul); color:#fff; box-shadow:0 8px 22px -8px rgba(0,114,208,.75); }
.btn--pri:hover{ background:var(--azul-osc); box-shadow:0 14px 30px -10px rgba(0,114,208,.8); }
.btn--sec{ background:var(--blanco); color:var(--tinta); border-color:var(--linea2); }
.btn--sec:hover{ border-color:var(--tinta); }
.btn--claro{ background:#fff; color:var(--azul-osc); }
.btn--fantasma{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn--fantasma:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn--sm{ padding:10px 18px; font-size:14px; }
.btn--full{ width:100%; }

.enlace{
  display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:15px;
  color:var(--azul); text-decoration:none;
}
.enlace i{ transition:transform .18s; }
.enlace:hover{ color:var(--azul-osc); }
.enlace:hover i{ transform:translateX(4px); }

/* ---------- cabecera ---------- */

.top{ position:sticky; top:0; z-index:80; background:rgba(255,255,255,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--linea); }
.top__in{ display:flex; align-items:center; gap:20px; height:72px; }
.top__in > .btn{ white-space:nowrap; flex:0 0 auto; }
.brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; }
.brand__logo{ width:36px; height:auto; flex:0 0 auto; }
.brand__txt{ display:block; line-height:.9; }
.brand__txt b{ display:block; font-size:20px; font-weight:800; letter-spacing:-.045em; color:var(--tinta); }
.brand__txt i{ display:block; font-style:normal; font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--tinta2); margin-top:1px; }
.pie .brand__txt b{ color:#fff; }
.pie .brand__txt i{ color:#94A0B5; }
.pie .brand__logo{ width:34px; }

.nav{ display:flex; align-items:center; gap:6px; }
.nav a{ white-space:nowrap;
  font-size:15px; font-weight:600; text-decoration:none; color:var(--tinta2);
  padding:9px 13px; border-radius:999px; transition:background .15s,color .15s;
}
.nav a:hover{ background:var(--nieve); color:var(--tinta); }
.nav a[aria-current]{ color:var(--azul); background:var(--azul-luz); }

.burger{ display:none; width:42px; height:38px; border:1px solid var(--linea2); background:#fff; border-radius:10px; cursor:pointer; align-items:center; justify-content:center; }
.burger i{ font-size:20px; }
@media (max-width:980px){
  .nav{ position:fixed; inset:72px 0 auto 0; flex-direction:column; align-items:stretch; gap:2px;
        background:#fff; border-bottom:1px solid var(--linea); padding:10px var(--gut) 22px; display:none;
        box-shadow:var(--sombra); }
  .nav.is-open{ display:flex; }
  .nav a{ padding:14px; font-size:16px; border-radius:12px; }
  .burger{ display:flex; }
  .top__in > .btn{ display:none; }
}

/* ---------- portada ---------- */

.hero{ position:relative; overflow:visible; padding-block:clamp(44px,5.5vw,76px) clamp(30px,3.4vw,50px); }
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto -10%; height:150%;
  background:
    radial-gradient(48% 46% at 12% 8%, rgba(0,169,190,.20), transparent 62%),
    radial-gradient(46% 44% at 88% 4%, rgba(107,76,224,.18), transparent 60%),
    radial-gradient(60% 50% at 50% 0%, rgba(0,114,208,.16), transparent 68%);
  z-index:-1;
}
.hero__grid{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(30px,4.5vw,60px); align-items:center; }
@media (max-width:940px){ .hero__grid{ grid-template-columns:1fr; } }
.hero h1 span{ background:linear-gradient(100deg,var(--azul),var(--cian) 70%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__sub{ margin-top:22px; max-width:52ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero__pruebas{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:26px; }
.hero__pruebas span{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--tinta2); }
.hero__pruebas i{ color:var(--verde); font-size:16px; }

/* mosaico de la portada */
.mosaico{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.mosaico figure{ margin:0; border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra); background:#fff; }
.mosaico img{ width:100%; height:100%; object-fit:cover; }
.mosaico .alta{ grid-row:span 2; aspect-ratio:3/4.35; }
.mosaico .baja{ aspect-ratio:4/3; }
.mosaico .tarjeta{
  border-radius:var(--r); background:#fff; box-shadow:var(--sombra-alta); padding:16px 18px;
  position:absolute; left:-10%; bottom:-7%; width:58%; z-index:3;
}
@media (max-width:520px){ .mosaico .tarjeta{ position:static; width:100%; margin-top:14px; } }

/* ---------- cifras ---------- */

.cifras{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:760px){ .cifras{ grid-template-columns:repeat(2,1fr); } }
.cifra{ border-radius:var(--r); padding:24px 22px; background:var(--nieve); border:1px solid var(--linea); }
.cifra b{ display:block; font-size:clamp(2.1rem,3.6vw,2.8rem); font-weight:800; letter-spacing:-.05em; line-height:1; }
.cifra span{ display:block; margin-top:8px; font-size:14px; font-weight:600; color:var(--tinta2); }
.cifra--azul{ background:var(--azul-luz); border-color:#CFE4F8; } .cifra--azul b{ color:var(--azul-osc); }
.cifra--cian{ background:var(--cian-luz); border-color:#C6EAEF; } .cifra--cian b{ color:#00808F; }
.cifra--violeta{ background:var(--violeta-luz); border-color:#DCD4FB; } .cifra--violeta b{ color:var(--violeta); }
.cifra--ambar{ background:var(--ambar-luz); border-color:#F7E2BC; } .cifra--ambar b{ color:#B87309; }

/* ---------- tarjetas de módulo ---------- */

.rejilla{ display:grid; gap:18px; }
.r-2{ grid-template-columns:repeat(2,1fr); }
.r-3{ grid-template-columns:repeat(3,1fr); }
.r-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .r-4{ grid-template-columns:repeat(2,1fr); } .r-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .r-2,.r-3,.r-4{ grid-template-columns:1fr; } }

.tarj{
  background:#fff; border:1px solid var(--linea); border-radius:var(--r); padding:26px 24px;
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, border-color .22s;
}
.tarj:hover{ transform:translateY(-4px); box-shadow:var(--sombra); border-color:var(--linea2); }
.tarj__ico{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  font-size:22px; margin-bottom:16px;
}
.tarj h3{ margin-bottom:8px; }
.tarj p{ font-size:.94rem; color:var(--tinta2); }
.tarj ul{ margin:14px 0 0; padding:0; list-style:none; }
.tarj li{ position:relative; padding:5px 0 5px 22px; font-size:.885rem; color:var(--tinta2); }
.tarj li::before{
  content:"\F26E"; font-family:"bootstrap-icons"; position:absolute; left:0; top:5px;
  font-size:12px; color:var(--verde);
}

.ico-azul{ background:var(--azul-luz); color:var(--azul); }
.ico-cian{ background:var(--cian-luz); color:#00808F; }
.ico-violeta{ background:var(--violeta-luz); color:var(--violeta); }
.ico-verde{ background:var(--verde-luz); color:var(--verde); }
.ico-ambar{ background:var(--ambar-luz); color:#B87309; }
.ico-coral{ background:var(--coral-luz); color:var(--coral); }
.ico-rosa{ background:var(--rosa-luz); color:var(--rosa); }
.ico-indigo{ background:var(--indigo-luz); color:var(--indigo); }

/* ---------- bloque de dos columnas con foto ---------- */

.duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4.5vw,64px); align-items:center; }
.duo--flip > *:first-child{ order:2; }
@media (max-width:900px){ .duo{ grid-template-columns:1fr; } .duo--flip > *:first-child{ order:0; } }

.foto{ position:relative; border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra); }
.foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.foto figcaption{
  position:absolute; left:16px; bottom:16px; right:16px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  border-radius:12px; padding:12px 14px; font-size:13.5px; font-weight:600; color:var(--tinta);
  box-shadow:0 8px 22px -10px rgba(14,23,38,.4);
}
.foto--alta img{ aspect-ratio:3/4; }

.lista{ margin:24px 0 0; padding:0; list-style:none; }
.lista li{ display:flex; gap:14px; padding:13px 0; border-top:1px solid var(--linea); }
.lista li:last-child{ border-bottom:1px solid var(--linea); }
.lista i{ font-size:19px; flex:0 0 auto; margin-top:2px; }
.lista b{ display:block; font-size:.98rem; font-weight:700; }
.lista span{ display:block; font-size:.9rem; color:var(--tinta2); line-height:1.5; }

/* ---------- panel simulado de producto ---------- */

.panel{ border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra-alta); background:#fff; border:1px solid var(--linea); }
.panel__hd{
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:linear-gradient(120deg,var(--azul),var(--cian)); color:#fff;
  font-size:13.5px; font-weight:700;
}
.panel__hd .pt{ margin-left:auto; font-family:var(--mono); font-size:11.5px; opacity:.85; font-weight:500; }
.panel__bd{ padding:6px 0 0; }
.panel table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.panel th{
  text-align:left; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta3); padding:10px 16px; border-bottom:1px solid var(--linea);
}
.panel td{ padding:12px 16px; border-bottom:1px solid var(--linea); }
.panel tr:last-child td{ border-bottom:0; }
.panel td:first-child{ font-weight:600; }
.panel .num{ font-family:var(--mono); font-size:.84rem; color:var(--tinta2); }
.panel__pie{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; background:var(--nieve); border-top:1px solid var(--linea); font-size:14px; }

/* ---------- barra de progreso decorativa ---------- */
.barra{ height:6px; border-radius:999px; background:var(--nieve2); overflow:hidden; }
.barra i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--azul),var(--cian)); }

/* ---------- sección oscura ---------- */

.noche{ position:relative; background:var(--noche); color:#D6DCE8; overflow:hidden; }
.noche h2,.noche h3,.noche h4{ color:#fff; }
.noche .lead{ color:#A9B3C6; }
.noche p{ color:#A9B3C6; }
.noche::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(50% 60% at 82% 12%, rgba(0,169,190,.22), transparent 60%),
             radial-gradient(46% 52% at 10% 90%, rgba(107,76,224,.20), transparent 62%);
}
.noche > *{ position:relative; }
.noche .tarj{ background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.10); }
.noche .tarj:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
.noche .tarj p, .noche .tarj li{ color:#A9B3C6; }
.noche .lista li{ border-color:rgba(255,255,255,.10); }
.noche .lista span{ color:#A9B3C6; }
.noche .lista b{ color:#fff; }

/* ---------- muro de logos ---------- */

.logos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.logos div{
  height:84px; display:grid; place-items:center; padding:16px;
  background:#fff; border:1px solid var(--linea); border-radius:14px;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.logos div:hover{ transform:translateY(-3px); box-shadow:var(--sombra); border-color:var(--linea2); }
.logos img{ max-height:34px; width:auto; object-fit:contain; }
.tira{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 30px; }
.tira img{ max-height:26px; width:auto; opacity:.68; }

/* ---------- pestañas ---------- */

.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.tabs button{
  font-family:var(--sans); font-size:14.5px; font-weight:700; color:var(--tinta2);
  background:var(--nieve); border:1.5px solid transparent; padding:10px 18px; border-radius:999px;
  cursor:pointer; transition:all .16s; display:inline-flex; align-items:center; gap:8px;
}
.tabs button:hover{ color:var(--tinta); background:var(--nieve2); }
.tabs button[aria-selected="true"]{ background:var(--azul); color:#fff; box-shadow:0 8px 20px -10px rgba(0,114,208,.9); }
.tabpanel[hidden]{ display:none; }

.tabla{ width:100%; border-collapse:collapse; font-size:.93rem; background:#fff; }
.tabla thead th{
  text-align:left; font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tinta3); padding:12px 16px; border-bottom:2px solid var(--linea);
}
.tabla td{ padding:14px 16px; border-bottom:1px solid var(--linea); vertical-align:top; }
.tabla td:first-child{ font-weight:700; width:24%; }
.tabla tr:hover td{ background:var(--nieve); }
.tabla .desc{ color:var(--tinta2); font-size:.9rem; }
.tabla-caja{ border:1px solid var(--linea); border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra); }
@media (max-width:760px){
  .tabla, .tabla tbody, .tabla tr, .tabla td{ display:block; width:100%; }
  .tabla thead{ display:none; }
  .tabla tr{ border-bottom:1px solid var(--linea); padding:14px 16px; }
  .tabla tr:last-child{ border-bottom:0; }
  .tabla td{ border:0; padding:3px 0; width:auto !important; }
  .tabla td:first-child{ font-size:1.02rem; width:auto; }
}

/* ---------- planes ---------- */

.planes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
@media (max-width:900px){ .planes{ grid-template-columns:1fr; } }
.plan{ background:#fff; border:1px solid var(--linea); border-radius:20px; padding:30px 28px; display:flex; flex-direction:column; }
.plan--dest{
  background:linear-gradient(160deg,var(--noche),#16233B); color:#D6DCE8; border-color:transparent;
  box-shadow:var(--sombra-alta); transform:translateY(-8px);
}
.plan--dest h3{ color:#fff; }
.plan--dest li{ color:#B6BFD0; }
.plan__k{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--azul); }
.plan--dest .plan__k{ color:#5FC8DA; }
.plan h3{ font-size:1.7rem; margin:10px 0 8px; letter-spacing:-.04em; }
.plan__desc{ font-size:.93rem; color:var(--tinta2); margin-bottom:20px; }
.plan--dest .plan__desc{ color:#A9B3C6; }
.plan ul{ list-style:none; margin:0 0 26px; padding:0; flex:1; }
.plan li{ position:relative; padding:8px 0 8px 26px; font-size:.9rem; color:var(--tinta2); }
.plan li::before{ content:"\F26E"; font-family:"bootstrap-icons"; position:absolute; left:0; top:8px; font-size:13px; color:var(--verde); }
.plan--dest li::before{ color:#4FD08A; }

/* ---------- formulario ---------- */

.form{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.form .full{ grid-column:1/-1; }
@media (max-width:640px){ .form{ grid-template-columns:1fr; } }
.campo label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:7px; }
.campo input,.campo select,.campo textarea{
  width:100%; font-family:var(--sans); font-size:15px; color:var(--tinta);
  background:#fff; border:1.5px solid var(--linea2); border-radius:12px; padding:13px 15px;
  transition:border-color .15s, box-shadow .15s;
}
.campo textarea{ min-height:130px; resize:vertical; }
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--azul); box-shadow:0 0 0 4px rgba(0,114,208,.14);
}
.campo label.check{
  display:flex; gap:11px; align-items:flex-start; font-size:.88rem; font-weight:500;
  color:var(--tinta2); margin-bottom:0; cursor:pointer; line-height:1.5;
}
.campo label.check input{ width:auto; margin-top:3px; accent-color:var(--azul); }

/* ---------- preguntas ---------- */

.faq details{ background:#fff; border:1px solid var(--linea); border-radius:14px; padding:20px 22px; margin-bottom:12px; transition:border-color .18s, box-shadow .18s; }
.faq details[open]{ border-color:var(--linea2); box-shadow:var(--sombra); }
.faq summary{ cursor:pointer; list-style:none; font-weight:700; font-size:1.04rem; letter-spacing:-.02em; display:flex; justify-content:space-between; gap:18px; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"\F64D"; font-family:"bootstrap-icons"; color:var(--azul); font-size:1rem; transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq p{ margin-top:12px; font-size:.95rem; color:var(--tinta2); max-width:76ch; }

/* ---------- cierre y pie ---------- */

.cierre{
  border-radius:24px; padding:clamp(34px,5vw,60px); color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(125deg,var(--azul-osc),var(--azul) 42%,var(--cian));
  box-shadow:var(--sombra-alta);
}
.cierre::after{
  content:""; position:absolute; right:-8%; top:-40%; width:52%; height:190%;
  background:radial-gradient(circle at center, rgba(255,255,255,.20), transparent 62%);
}
.cierre > *{ position:relative; }
.cierre h2{ color:#fff; }
.cierre p{ color:rgba(255,255,255,.9); }

.pie{ background:var(--noche); color:#94A0B5; padding-block:clamp(50px,6vw,74px) 26px; }
.pie a{ color:#C3CBDA; text-decoration:none; }
.pie a:hover{ color:#fff; }
.pie__cols{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:32px; }
@media (max-width:820px){ .pie__cols{ grid-template-columns:1fr 1fr; } }
.pie h4{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#68748C; margin-bottom:14px; }
.pie ul{ list-style:none; margin:0; padding:0; }
.pie li{ padding:6px 0; font-size:.93rem; }
.pie__bar{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.10); font-size:13px; }
.pie .brand__name{ color:#fff; }

/* ---------- animación ---------- */

.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.75,.3,1); }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

/* ---------- móvil simulado (portal y app del cliente) ---------- */
.movil{
  width:270px; max-width:100%; margin-inline:auto; border-radius:32px; padding:10px;
  background:linear-gradient(160deg,#1B2436,#0B1220); box-shadow:var(--sombra-alta);
}
.movil__pantalla{ background:#fff; border-radius:24px; overflow:hidden; }
.movil__barra{
  display:flex; align-items:center; justify-content:space-between; padding:9px 16px 7px;
  font-size:10.5px; font-weight:700; color:var(--tinta3); font-family:var(--mono);
}
.movil__cab{ background:linear-gradient(120deg,var(--azul),var(--cian)); color:#fff; padding:16px; }
.movil__cab span{ font-size:12px; opacity:.9; }
.movil__cab strong{ display:block; font-size:20px; letter-spacing:-.03em; margin-top:2px; }
.movil__cuerpo{ padding:12px 14px 18px; }
.movil__fila{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--linea); font-size:13px; }
.movil__fila:last-child{ border-bottom:0; }
.movil__fila i{ font-size:17px; }
.movil__fila b{ margin-left:auto; font-weight:700; }
.movil__btn{
  display:block; text-align:center; background:var(--azul); color:#fff; border-radius:12px;
  padding:11px; font-size:13.5px; font-weight:700; margin-top:12px; text-decoration:none;
  box-shadow:0 6px 16px -8px rgba(0,114,208,.9);
}
.tiendas{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.tienda{
  display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:12px;
  background:var(--tinta); color:#fff; font-size:13px; font-weight:600; text-decoration:none;
}
.tienda i{ font-size:19px; }
.tienda span small{ display:block; font-size:10px; opacity:.7; font-weight:500; }

/* ---------- bloque de código (API) ---------- */
.codigo{
  background:var(--noche); border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra-alta);
  font-family:var(--mono); font-size:13px; line-height:1.65;
}
.codigo__hd{
  display:flex; align-items:center; gap:8px; padding:11px 16px; border-bottom:1px solid rgba(255,255,255,.09);
  color:#8FA0BC; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
}
.codigo__hd em{ margin-left:auto; font-style:normal; letter-spacing:0; text-transform:none; color:#5FC8DA; }
.codigo pre{ margin:0; padding:16px; overflow-x:auto; color:#D6DCE8; }
.codigo .k{ color:#5FC8DA; }
.codigo .s{ color:#8FD69B; }
.codigo .c{ color:#6B7794; }
.codigo .n{ color:#F0B45E; }

/* ---------- marco de navegador para capturas reales ---------- */
.marco{
  border-radius:16px; overflow:hidden; background:#fff;
  border:1px solid var(--linea); box-shadow:var(--sombra-alta);
}
.marco__barra{
  display:flex; align-items:center; gap:8px; padding:11px 14px;
  background:var(--nieve); border-bottom:1px solid var(--linea);
}
.marco__punto{ width:10px; height:10px; border-radius:50%; background:#D8DEE8; flex:0 0 auto; }
.marco__punto:nth-child(1){ background:#FF5F57; }
.marco__punto:nth-child(2){ background:#FEBC2E; }
.marco__punto:nth-child(3){ background:#28C840; }
.marco__url{
  margin-left:10px; flex:1; background:#fff; border:1px solid var(--linea);
  border-radius:8px; padding:5px 12px; font-family:var(--mono); font-size:11.5px; color:var(--tinta3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.marco img{ width:100%; display:block; }
.marco figcaption{ padding:12px 16px; font-size:13.5px; color:var(--tinta2); background:var(--nieve); border-top:1px solid var(--linea); }

.hero--captura{ padding-bottom:0; }
.hero__centro{ max-width:780px; margin-inline:auto; text-align:center; }
.hero__centro .hero__cta,
.hero__centro .hero__pruebas{ justify-content:center; }
.hero__centro .hero__sub{ margin-inline:auto; }
.captura-portada{ margin-top:clamp(34px,4vw,54px); }

/* ---------- buscador de integraciones ---------- */
.buscador{ position:relative; max-width:620px; margin:0 auto 28px; }
.buscador i.bi-search{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  color:var(--tinta3); font-size:17px; pointer-events:none;
}
.buscador input{
  width:100%; font-family:var(--sans); font-size:16px; color:var(--tinta);
  background:#fff; border:1.5px solid var(--linea2); border-radius:999px;
  padding:15px 46px 15px 48px; transition:border-color .15s, box-shadow .15s;
}
.buscador input:focus{ outline:none; border-color:var(--azul); box-shadow:0 0 0 4px rgba(0,114,208,.14); }
.buscador__limpiar{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:var(--nieve2); border:0; border-radius:50%; width:26px; height:26px;
  cursor:pointer; color:var(--tinta2); display:none; align-items:center; justify-content:center;
}
.buscador__limpiar.visible{ display:flex; }

.sugerencias{ display:none; flex-wrap:wrap; gap:8px; justify-content:center; margin:-14px 0 26px; }
.sugerencias.visible{ display:flex; }
.sugerencias b{ width:100%; text-align:center; font-size:13px; color:var(--tinta3); font-weight:600; margin-bottom:2px; }
.sugerencias a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:var(--azul-luz); color:var(--azul-osc); border-radius:999px;
  padding:9px 16px; font-size:14px; font-weight:700; transition:background .15s, transform .15s;
}
.sugerencias a:hover{ background:#D6E8FA; transform:translateY(-2px); }
.sin-resultados{ display:none; text-align:center; padding:44px 20px; color:var(--tinta2); }
.sin-resultados.visible{ display:block; }
.tabs button .cuenta{ font-weight:600; opacity:.75; }

/* ---------- matriz de capacidades ---------- */
.matriz-caja{ border:1px solid var(--linea); border-radius:var(--r); box-shadow:var(--sombra); overflow-x:auto; background:#fff; }
.matriz{ width:100%; min-width:760px; border-collapse:collapse; font-size:.92rem; }
.matriz thead th{
  text-align:center; font-size:11.5px; font-weight:700; letter-spacing:.03em;
  color:var(--tinta2); padding:14px 10px; border-bottom:2px solid var(--linea);
  background:var(--nieve); vertical-align:bottom; line-height:1.25;
}
.matriz thead th:first-child{ text-align:left; padding-left:18px; min-width:230px; }
.matriz td{ padding:13px 10px; border-bottom:1px solid var(--linea); text-align:center; vertical-align:middle; }
.matriz td:first-child{ text-align:left; padding-left:18px; }
.matriz tr:last-child td{ border-bottom:0; }
.matriz tbody tr:hover td{ background:var(--nieve); }
.matriz .nom{ font-weight:700; display:block; letter-spacing:-.015em; }
.matriz .det{ display:block; font-size:.8rem; color:var(--tinta3); margin-top:2px; line-height:1.4; }
.si{ color:var(--verde); font-size:17px; }
.no{ color:#C9D2DF; font-size:15px; }
.matriz caption{
  caption-side:top; text-align:left; padding:16px 18px 0; font-size:.9rem; color:var(--tinta2);
}

/* ---------- buscador global (cabecera + panel) ---------- */
.abrir-buscador{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  background:var(--nieve); border:1.5px solid var(--linea); border-radius:999px;
  padding:9px 14px; font-family:var(--sans); font-size:14px; font-weight:600; color:var(--tinta3);
  transition:border-color .15s, color .15s, background .15s;
}
.abrir-buscador:hover{ border-color:var(--linea2); color:var(--tinta2); background:#fff; }
.abrir-buscador i{ font-size:15px; }
.abrir-buscador kbd{
  font-family:var(--mono); font-size:10.5px; background:#fff; color:var(--tinta3);
  border:1px solid var(--linea2); border-radius:5px; padding:2px 6px; line-height:1;
}
@media (max-width:1120px){ .abrir-buscador span, .abrir-buscador kbd{ display:none; } .abrir-buscador{ padding:9px 11px; } }

.velo{
  position:fixed; inset:0; z-index:200; background:rgba(14,23,38,.55);
  backdrop-filter:blur(3px); display:none; padding:clamp(16px,7vh,90px) 16px 16px;
  overflow-y:auto;
}
.velo.abierto{ display:block; }
.panel-buscar{
  width:100%; max-width:660px; margin:0 auto; background:#fff; border-radius:18px;
  box-shadow:0 30px 80px -20px rgba(14,23,38,.55); overflow:hidden;
}
.panel-buscar__caja{ position:relative; border-bottom:1px solid var(--linea); }
.panel-buscar__caja i{ position:absolute; left:20px; top:50%; transform:translateY(-50%); color:var(--tinta3); font-size:18px; }
.panel-buscar__caja input{
  width:100%; border:0; outline:0; font-family:var(--sans); font-size:17px; color:var(--tinta);
  padding:20px 56px 20px 52px; background:transparent;
}
.panel-buscar__cerrar{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:var(--nieve2); border:0; border-radius:8px; padding:5px 9px; cursor:pointer;
  font-family:var(--mono); font-size:11px; color:var(--tinta2);
}
.panel-buscar__lista{ max-height:min(58vh,460px); overflow-y:auto; padding:8px; }
.panel-buscar__grupo{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta3); padding:12px 14px 6px;
}
.resultado{
  display:flex; align-items:flex-start; gap:12px; padding:11px 14px; border-radius:12px;
  text-decoration:none; color:inherit;
}
.resultado:hover, .resultado.activo{ background:var(--azul-luz); }
.resultado__ico{
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--nieve2); color:var(--tinta2); font-size:15px;
}
.resultado.activo .resultado__ico{ background:var(--azul); color:#fff; }
.resultado b{ display:block; font-size:15px; font-weight:700; letter-spacing:-.015em; }
.resultado span{ display:block; font-size:13px; color:var(--tinta2); line-height:1.4; margin-top:1px; }
.resultado mark{ background:#FFF0A8; color:inherit; border-radius:3px; padding:0 1px; }
.panel-buscar__pie{
  display:flex; gap:16px; align-items:center; padding:12px 18px; border-top:1px solid var(--linea);
  background:var(--nieve); font-size:12px; color:var(--tinta3);
}
.panel-buscar__pie kbd{
  font-family:var(--mono); font-size:10.5px; background:#fff; border:1px solid var(--linea2);
  border-radius:5px; padding:2px 6px; margin-right:5px;
}
.panel-buscar__vacio{ padding:34px 20px; text-align:center; color:var(--tinta2); font-size:14.5px; }
/* el de dentro del menú es solo para pantallas pequeñas */
.nav .abrir-buscador{ display:none; }
@media (max-width:980px){
  .nav .abrir-buscador{ display:inline-flex; width:100%; justify-content:flex-start; margin-bottom:8px; }
  .nav .abrir-buscador span, .nav .abrir-buscador kbd{ display:inline; }
  .top__in > .abrir-buscador{ display:none; }
}
/* el buscador nativo ya trae su aspa: sobra la del navegador */
.panel-buscar__caja input::-webkit-search-cancel-button{ display:none; }

/* ---------- composición portátil + móvil (portal y app) ---------- */
.dispositivos{ position:relative; padding-bottom:20px; }
.dispositivos__portatil img{ width:100%; display:block; }
.dispositivos__movil{
  position:absolute; right:-2%; bottom:0; width:29%; min-width:120px;
  filter:drop-shadow(0 18px 34px rgba(14,23,38,.32));
}
.dispositivos__movil img{ width:100%; display:block; }
@media (max-width:600px){
  .dispositivos__movil{ position:static; width:52%; margin:16px auto 0; }
}

/* ---------- volver arriba ---------- */
.arriba{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--linea);
  background:#fff; color:var(--tinta2); cursor:pointer;
  display:grid; place-items:center; font-size:19px;
  box-shadow:var(--sombra);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s, transform .25s, visibility .25s, color .15s, border-color .15s;
}
.arriba.visible{ opacity:1; visibility:visible; transform:none; }
.arriba:hover{ color:var(--azul); border-color:var(--azul); }
@media (max-width:600px){ .arriba{ right:14px; bottom:14px; width:42px; height:42px; } }

/* ---------- llamada a la acción intercalada ---------- */
.cta-fina{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px;
  border:1px solid var(--linea); border-radius:18px; padding:22px 26px;
  background:linear-gradient(120deg, var(--azul-luz), var(--cian-luz));
}
.cta-fina p{ margin:0; font-size:1.05rem; font-weight:700; letter-spacing:-.02em; flex:1 1 320px; }
.cta-fina p span{ display:block; font-size:.9rem; font-weight:500; color:var(--tinta2); margin-top:3px; letter-spacing:0; }
.cta-fina .btn{ flex:0 0 auto; }

/* ---------- páginas legales ---------- */
.legal{ max-width:760px; margin-inline:auto; }
.legal h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin:44px 0 14px; }
.legal h2:first-of-type{ margin-top:0; }
.legal h3{ font-size:1.06rem; margin:26px 0 8px; }
.legal p, .legal li{ font-size:1rem; line-height:1.7; color:var(--tinta2); }
.legal ul, .legal ol{ margin:0 0 1em; padding-left:22px; }
.legal li{ margin-bottom:7px; }
.legal strong{ color:var(--tinta); }
.legal a{ color:var(--azul); font-weight:600; }
.legal dl{ margin:0 0 1em; }
.legal dt{ font-weight:700; color:var(--tinta); margin-top:14px; }
.legal dd{ margin:2px 0 0; }
.legal table{ width:100%; border-collapse:collapse; font-size:.95rem; margin:0 0 1.4em; }
.legal th{ text-align:left; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta3); padding:10px 12px 10px 0; border-bottom:2px solid var(--linea); }
.legal td{ padding:12px 12px 12px 0; border-bottom:1px solid var(--linea); vertical-align:top; color:var(--tinta2); }
.legal td:first-child{ font-weight:700; color:var(--tinta); width:34%; }
.legal .fecha{ font-size:.9rem; color:var(--tinta3); }

.rellenar{
  background:#FFF3BF; color:#7A5B00; border-radius:5px; padding:1px 7px;
  font-weight:700; font-family:var(--mono); font-size:.86em; white-space:nowrap;
}
.aviso-borrador{
  display:flex; gap:14px; align-items:flex-start;
  background:#FFF8E1; border:1px solid #F2D98C; border-radius:14px;
  padding:18px 20px; margin-bottom:34px;
}
.aviso-borrador i{ color:#B87309; font-size:20px; flex:0 0 auto; margin-top:2px; }
.aviso-borrador p{ margin:0; font-size:.94rem; color:#6B5200; }

/* ---------- testimonio de cliente ---------- */
.testimonio{
  display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:clamp(26px,4vw,56px); align-items:start;
  background:#fff; border:1px solid var(--linea); border-radius:22px;
  padding:clamp(28px,4vw,48px); box-shadow:var(--sombra);
}
@media (max-width:820px){ .testimonio{ grid-template-columns:1fr; } }
.testimonio__marca{ text-align:center; }
.testimonio__marca img{ max-width:200px; margin:0 auto 16px; }
.testimonio__marca b{ display:block; font-size:1.02rem; letter-spacing:-.02em; }
.testimonio__marca span{ display:block; font-size:.86rem; color:var(--tinta3); margin-top:3px; }
.testimonio__cita{
  font-size:clamp(1.25rem,2.2vw,1.65rem); font-weight:700; letter-spacing:-.03em;
  line-height:1.3; color:var(--tinta); margin:0 0 22px; position:relative;
}
.testimonio__cita::before{
  content:"\201C"; position:absolute; left:-.42em; top:-.16em;
  font-size:2.6em; line-height:1; color:var(--azul); opacity:.22;
}
.testimonio p{ font-size:.98rem; color:var(--tinta2); line-height:1.65; }
.testimonio p + p{ margin-top:.85em; }

/* ---------- calculadora de precios ---------- */
.calc{
  background:#fff; border:1px solid var(--linea); border-radius:22px;
  box-shadow:var(--sombra-alta); overflow:hidden;
}
.calc__grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
@media (max-width:900px){ .calc__grid{ grid-template-columns:1fr; } }
.calc__campos{ padding:clamp(24px,3vw,36px); }
.calc__total{
  padding:clamp(24px,3vw,36px); color:#fff;
  background:linear-gradient(150deg,var(--azul-osc),var(--azul) 45%,var(--cian));
  display:flex; flex-direction:column; justify-content:center;
}
.calc__campo + .calc__campo{ margin-top:26px; padding-top:26px; border-top:1px solid var(--linea); }
.calc__campo > label{ display:block; font-size:14.5px; font-weight:700; margin-bottom:4px; }
.calc__campo .ayuda{ display:block; font-size:13px; color:var(--tinta3); margin-bottom:14px; }
.calc__fila{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.calc__num{
  width:130px; font-family:var(--mono); font-size:17px; font-weight:700; color:var(--tinta);
  border:1.5px solid var(--linea2); border-radius:12px; padding:11px 13px; text-align:center;
}
.calc__num:focus{ outline:none; border-color:var(--azul); box-shadow:0 0 0 4px rgba(0,114,208,.14); }
.calc input[type="range"]{ flex:1; min-width:180px; accent-color:var(--azul); height:6px; }
.calc__tramo{
  display:inline-block; font-size:12.5px; font-weight:700; color:var(--azul-osc);
  background:var(--azul-luz); border-radius:999px; padding:5px 12px; margin-top:12px;
}
.calc__ops{ display:flex; flex-wrap:wrap; gap:8px; }
.calc__op{ position:relative; }
.calc__op input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.calc__op span{
  display:block; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--tinta2);
  border:1.5px solid var(--linea2); border-radius:12px; padding:10px 14px; transition:all .15s;
}
.calc__op span small{ display:block; font-size:11.5px; font-weight:500; color:var(--tinta3); margin-top:2px; }
.calc__op input:checked + span{ border-color:var(--azul); background:var(--azul-luz); color:var(--azul-osc); }
.calc__op input:checked + span small{ color:var(--azul-osc); }
.calc__total .rot{ font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.85; }
.calc__cifra{ font-size:clamp(3rem,6vw,4.4rem); font-weight:800; letter-spacing:-.05em; line-height:1; margin:6px 0 4px; }
.calc__cifra small{ font-size:.3em; font-weight:700; letter-spacing:-.02em; }
.calc__nota{ font-size:13px; opacity:.9; }
.calc__desglose{ list-style:none; margin:20px 0 0; padding:18px 0 0; border-top:1px solid rgba(255,255,255,.25); }
.calc__desglose li{ display:flex; justify-content:space-between; gap:14px; font-size:14px; padding:5px 0; }
.calc__desglose li b{ font-weight:700; }
.calc__desglose li.pago-unico{ opacity:.85; font-size:13px; margin-top:6px; }

.tabla-precios td.precio, .tabla-precios th.precio{ text-align:right; font-family:var(--mono); font-weight:700; }
.tabla-precios tr.destacada td{ background:var(--azul-luz); }

.ejemplo{ background:#fff; border:1px solid var(--linea); border-radius:18px; padding:26px 24px; }
.ejemplo h3{ font-size:1.15rem; margin-bottom:4px; }
.ejemplo .cuentas{ font-size:13px; color:var(--tinta3); font-weight:600; }
.ejemplo ul{ list-style:none; margin:18px 0; padding:0; }
.ejemplo li{ display:flex; justify-content:space-between; gap:12px; font-size:.92rem; color:var(--tinta2); padding:7px 0; border-bottom:1px solid var(--linea); }
.ejemplo li b{ font-family:var(--mono); color:var(--tinta); font-weight:700; }
.ejemplo .total{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:6px; }
.ejemplo .total span{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--tinta3); }
.ejemplo .total b{ font-size:1.6rem; font-weight:800; letter-spacing:-.04em; color:var(--azul-osc); }

/* ---------- selector de idioma ---------- */
.idiomas{ display:flex; align-items:center; gap:2px; margin-left:4px; }
/* el de dentro del menú es solo para pantallas pequeñas, igual que el buscador */
.nav .idiomas{ display:none; }
.idiomas a{
  font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--tinta3);
  text-decoration:none; padding:5px 7px; border-radius:8px; transition:all .15s;
}
.idiomas a:hover{ color:var(--tinta); background:var(--nieve); }
.idiomas a[aria-current]{ color:#fff; background:var(--azul); }
@media (max-width:1200px){ .idiomas a{ padding:5px 5px; font-size:12px; } }
@media (max-width:980px){
  .nav .idiomas{ display:flex; flex-wrap:wrap; margin:10px 0 0; gap:6px; }
  .nav .idiomas a{ padding:9px 12px; font-size:14px; border:1px solid var(--linea); }
  .top__in > .idiomas{ display:none; }
}

/* ---------- selector de idioma de la cabecera (escritorio) ---------- */
.idiomas-sel{ position:relative; margin-left:2px; }
.idiomas-sel__btn{
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--linea); border-radius:999px;
  padding:7px 10px; font:inherit; font-size:12.5px; font-weight:700; letter-spacing:.03em;
  color:var(--tinta2); cursor:pointer; transition:all .15s; line-height:1;
}
.idiomas-sel__btn:hover{ color:var(--tinta); border-color:var(--tinta3); background:var(--nieve); }
.idiomas-sel__btn .bi-globe2{ font-size:14px; }
.idiomas-sel__flecha{ font-size:10px; transition:transform .15s; }
.idiomas-sel__btn[aria-expanded="true"]{ color:var(--tinta); border-color:var(--azul); }
.idiomas-sel__btn[aria-expanded="true"] .idiomas-sel__flecha{ transform:rotate(180deg); }
.idiomas-sel__lista{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60; min-width:180px;
  background:#fff; border:1px solid var(--linea); border-radius:12px; padding:6px;
  box-shadow:0 12px 32px rgba(15,32,56,.14);
}
.idiomas-sel__lista[hidden]{ display:none; }
.idiomas-sel__lista a{
  display:flex; align-items:baseline; gap:8px; padding:8px 10px; border-radius:8px;
  font-size:14px; color:var(--tinta2); text-decoration:none; white-space:nowrap;
}
.idiomas-sel__lista a b{ font-size:11.5px; letter-spacing:.05em; color:var(--tinta3); min-width:20px; }
.idiomas-sel__lista a:hover{ background:var(--nieve); color:var(--tinta); }
.idiomas-sel__lista a[aria-current]{ background:var(--azul); color:#fff; }
.idiomas-sel__lista a[aria-current] b{ color:rgba(255,255,255,.75); }
@media (max-width:980px){ .idiomas-sel{ display:none; } }