/* ============================================================
   IEbridge — sistema visual basado en ieability.com
   Tokens medidos en el sitio de referencia:
     tipografía  Plus Jakarta Sans / Inter
     primario    #2563eb   ·  oscuro #0f172a  ·  grises slate
     h1          72px / 700 / -1.8px / interlineado 1
     h2          36px / 700 / sin tracking / lh 40px
     kicker      14px / 600 / azul
     tarjetas    radio 16 · borde #f1f5f9 · padding 32
                 sombra 0 4px 20px -2px rgba(0,0,0,.05)
     botones     píldora · 14-16px / 600
     secciones   96px verticales (py-24)
   ============================================================ */

:root{
  --blue-50:#eff6ff;  --blue-200:#bfdbfe; --blue-300:#93c5fd; --blue-500:#3b82f6;
  --blue-600:#2563eb; --blue-700:#1d4ed8; --indigo-300:#a5b4fc;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a;
  --green-500:#22c55e; --green-600:#16a34a; --green-50:#f0fdf4;
  --amber-100:#fef3c7; --amber-700:#b45309;
  --radius:16px; --pill:9999px;
  --shadow-card:0 4px 20px -2px rgba(0,0,0,.05);
  --shadow-lg:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
  --shadow-xl:0 25px 50px -12px rgba(0,0,0,.25);
  --blue-100:#dbeafe;
  --header-h:72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;scroll-padding-top:90px}
body{
  margin:0;overflow-x:hidden;overflow-x:clip;background:#fff;color:var(--slate-600);
  font-family:"Plus Jakarta Sans",Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
img,svg{display:block;max-width:100%}
h1,h2,h3{color:var(--slate-900);margin:0}
p{margin:0}
::selection{background:var(--blue-600);color:#fff}

.shell{width:min(1200px,calc(100% - 40px));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-60px;z-index:1000;padding:10px 16px;border-radius:8px;background:var(--slate-900);color:#fff}
.skip-link:focus{top:16px}
:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px}

/* ── Botones ──────────────────────────────────────────────── */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:var(--pill);font-size:14px;font-weight:600;
  padding:9px 20px;white-space:nowrap;cursor:pointer;
  transition:background .2s ease,box-shadow .25s ease,color .2s ease,filter .2s ease,
             translate .25s cubic-bezier(.4,0,.2,1),scale .13s ease;
}
/* El contenido va por encima del destello y de la onda del clic */
.btn>*{position:relative;z-index:1}

/* Hover: los CTA grandes se elevan, el de la cabecera crece */
.btn-lg:hover{translate:0 -4px}
.btn-block:hover{translate:0 -2px}


/* Destello que recorre el botón mientras el cursor está encima */
.btn-lg::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  translate:-100% 0;
}
/* En el botón blanco el destello tiene que ser oscuro para verse */
.btn-chrome::before{background:linear-gradient(90deg,transparent,rgba(15,23,42,.13),transparent)}
.btn-lg:hover::before{animation:btn-shimmer 1.5s linear infinite}
@keyframes btn-shimmer{to{translate:100% 0}}

/* Pulsación: hundido y con onda desde el punto del clic */
.btn:active{scale:.96}
.btn .ripple{
  position:absolute;z-index:0;border-radius:50%;pointer-events:none;
  background:currentColor;opacity:.3;transform:scale(0);
  animation:btn-ripple .6s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes btn-ripple{to{transform:scale(2.6);opacity:0}}

/* Confirmación al soltar */
.btn.is-pressed{animation:btn-pop .32s cubic-bezier(.34,1.56,.64,1)}
@keyframes btn-pop{0%{scale:.96}55%{scale:1.035}100%{scale:1}}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-lg{font-size:16px;padding:16px 30px}
.btn-lg svg{width:20px;height:20px}
.btn-block{width:100%;padding-block:15px;font-size:16px;font-weight:700}

.btn-primary{background:var(--blue-600);color:#fff;box-shadow:0 4px 14px rgba(37,99,235,.25)}
.btn-primary:hover{background:var(--blue-700);box-shadow:0 10px 24px rgba(37,99,235,.4)}
.btn-outline{background:var(--slate-50);color:var(--slate-700);box-shadow:inset 0 0 0 1px var(--slate-200)}
.btn-outline:hover{background:var(--slate-100);box-shadow:inset 0 0 0 1px var(--slate-300),0 8px 18px rgba(15,23,42,.08)}
.btn-chrome{background:#fff;color:var(--slate-900);box-shadow:var(--shadow-lg)}
.btn-chrome:hover{background:#fff;box-shadow:0 22px 36px -10px rgba(0,0,0,.5)}
.btn-edge{background:linear-gradient(90deg,#0891b2,#2563eb);color:#fff;box-shadow:var(--shadow-lg)}
.btn-edge:hover{filter:brightness(1.1);box-shadow:0 22px 36px -10px rgba(37,99,235,.55)}
/* Firefox y Opera con sus colores de marca, como Edge (2026-09-30). */
.btn-firefox{background:#ff7139;color:#fff;box-shadow:var(--shadow-lg)}
.btn-firefox:hover{filter:brightness(1.08);box-shadow:0 22px 36px -10px rgba(255,113,57,.5)}
.btn-opera{background:linear-gradient(90deg,#ff1b2d,#c4001a);color:#fff;box-shadow:var(--shadow-lg)}
.btn-opera:hover{filter:brightness(1.08);box-shadow:0 22px 36px -10px rgba(255,27,45,.5)}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.2);box-shadow:0 18px 30px -12px rgba(0,0,0,.5)}

/* ── Cabecera ─────────────────────────────────────────────── */
.site-header{
  position:fixed;inset:0 0 auto;z-index:50;width:100%;
  border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.nav-wrap{display:flex;align-items:center;gap:28px;height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:700;color:#fff}
.brand-mark{flex:0 0 32px;width:32px;height:32px;border-radius:50%;overflow:hidden}
.main-nav{display:flex;align-items:center;gap:30px;margin-inline:auto}
.main-nav a{font-size:15px;font-weight:500;color:var(--slate-300);transition:color .18s}
.main-nav a:hover{color:#fff}
.nav-actions{display:flex;align-items:center;gap:12px}
/* «Get started free» (2026-09-30): forma del botón de las tarjetas de precio
   (radio 8, 40 px), sin flecha. Blanco sobre la cabecera oscura, como antes, y azul
   cuando la cabecera pasa a blanca al bajar (reglas .scrolled / .is-solid). */
.btn-nav{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:8px;
  background:#fff;color:var(--slate-900);font-size:14px;font-weight:600;box-shadow:none;
  transition:background .18s ease,translate .18s ease,box-shadow .18s ease}
.btn-nav:hover{background:var(--slate-100);translate:0 -2px;box-shadow:0 8px 18px -8px rgba(15,23,42,.45)}
.site-header.scrolled .btn-nav:hover,.site-header.is-solid .btn-nav:hover{box-shadow:0 8px 18px -8px rgba(37,99,235,.55)}

/* Selector de idioma */
.lang{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  border:0;border-radius:var(--pill);background:rgba(255,255,255,.1);
  color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background .18s;
}
.lang-btn:hover{background:rgba(255,255,255,.18)}
.lang-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lang-caret{width:13px;height:13px;opacity:.7;transition:transform .2s}
.lang-btn[aria-expanded="true"] .lang-caret{transform:rotate(180deg)}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 10px);z-index:60;min-width:170px;
  margin:0;padding:6px;list-style:none;
  border:1px solid var(--slate-200);border-radius:14px;background:#fff;box-shadow:var(--shadow-lg);
}
/* Las paginas generadas por idioma usan enlaces (navegan a /de/, /ja/...) y
   restablecer.html sigue usando botones, porque alli el cambio es en caliente.
   Los dos tienen que verse igual. */
.lang-menu button,.lang-menu a{
  display:block;width:100%;padding:9px 12px;border:0;border-radius:9px;
  background:none;color:var(--slate-700);font-size:14px;font-weight:500;text-align:left;cursor:pointer;
  text-decoration:none;
}
.lang-menu button:hover,.lang-menu a:hover{background:var(--slate-50)}
.lang-menu button.is-active,.lang-menu a.is-active{background:var(--blue-50);color:var(--blue-700);font-weight:600}

/* ── Barra lateral de idiomas (2026-09-30) ──────────────────────────────
   Medida sobre starlink.com: se abre desde la derecha sobre la página
   oscurecida al 50 %, botón redondo de 32 px para cerrar, nombre en negrita
   de 16 px y debajo, más tenue, 14 px. Con un buscador arriba; sigue el
   tema del sistema (claro por defecto, grafito en oscuro). El selector de
   la cabecera queda en el globo, algo más grande. */
.lang-btn.lang-globo{justify-content:center;width:40px;height:40px;padding:0;border-radius:50%}
.lang-btn.lang-globo svg{width:22px;height:22px}
.lang-drawer{position:fixed;inset:0;z-index:200;
  /* Tema claro por defecto; oscuro si Windows (o el sistema) está en oscuro. */
  --lp-fondo:#fff;--lp-texto:var(--slate-900);--lp-tenue:var(--slate-500);--lp-borde:var(--slate-200);
  --lp-campo:var(--slate-50);--lp-campo-foco:#fff;--lp-boton:var(--slate-100);--lp-boton-hover:var(--slate-200);
  --lp-boton-texto:var(--slate-600);--lp-hover:var(--slate-50);--lp-activo:var(--blue-600);--lp-placeholder:var(--slate-400);
  --lp-sombra:-24px 0 48px rgba(15,23,42,.12);--lp-velo:rgba(15,23,42,.35);color-scheme:light}
@media(prefers-color-scheme:dark){.lang-drawer{
  --lp-fondo:var(--slate-900);--lp-texto:#fff;--lp-tenue:rgba(255,255,255,.7);--lp-borde:rgba(255,255,255,.16);
  --lp-campo:rgba(255,255,255,.06);--lp-campo-foco:rgba(255,255,255,.1);--lp-boton:rgba(255,255,255,.14);--lp-boton-hover:rgba(255,255,255,.24);
  --lp-boton-texto:rgba(255,255,255,.75);--lp-hover:rgba(255,255,255,.07);--lp-activo:var(--blue-300);--lp-placeholder:rgba(255,255,255,.5);
  --lp-sombra:-24px 0 48px rgba(2,6,23,.35);--lp-velo:rgba(2,6,23,.5);color-scheme:dark}}
.lang-velo{position:absolute;inset:0;background:var(--lp-velo);opacity:0;transition:opacity .25s ease}
.lang-panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;gap:16px;
  width:min(340px,88vw);padding:20px 24px calc(24px + env(safe-area-inset-bottom,0px));
  background:var(--lp-fondo);color:var(--lp-texto);box-shadow:var(--lp-sombra);border-left:1px solid var(--lp-borde);
  transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.lang-drawer.abierto .lang-velo{opacity:1}
.lang-drawer.abierto .lang-panel{transform:none}
html.lang-abierto{overflow:hidden}
.lang-cerrar{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;
  background:var(--lp-boton);color:var(--lp-boton-texto);cursor:pointer;transition:background .15s,color .15s}
.lang-cerrar:hover{background:var(--lp-boton-hover);color:var(--lp-texto)}
.lang-cerrar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lang-titulo{margin:4px 0 0;font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--lp-texto)}
.lang-buscar{position:relative;display:block}
.lang-buscar svg{position:absolute;left:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);fill:none;
  stroke:var(--lp-placeholder);stroke-width:2;stroke-linecap:round;pointer-events:none}
.lang-buscar input{width:100%;height:42px;padding:0 12px 0 38px;border:1px solid var(--lp-borde);border-radius:10px;
  background:var(--lp-campo);color:var(--lp-texto);font:inherit;font-size:14px;outline:none;transition:border-color .15s,background .15s}
.lang-buscar input::placeholder{color:var(--lp-placeholder)}
.lang-buscar input:focus{border-color:var(--blue-500);background:var(--lp-campo-foco)}
.lang-list{flex:1;min-height:0;overflow-y:auto;margin:0 -10px;padding:0;list-style:none}
.lang-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border-radius:10px;
  color:var(--lp-texto);text-decoration:none;transition:background .15s}
.lang-list a:hover,.lang-list a:focus-visible{background:var(--lp-hover);outline:none}
.lang-nombre{display:grid;gap:2px;min-width:0}
.lang-nativo{font-size:16px;font-weight:700;line-height:1.25}
.lang-aqui{font-size:14px;line-height:1.3;color:var(--lp-tenue)}
.lang-list a.is-active .lang-nativo{color:var(--lp-activo)}
.lang-visto{flex:none;width:18px;height:18px;fill:none;stroke:var(--lp-activo);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.lang-vacio{margin:0;font-size:14px;color:var(--lp-tenue)}
@media(prefers-reduced-motion:reduce){.lang-velo,.lang-panel{transition:none}}

.site-header.scrolled .lang-btn{background:var(--slate-100);color:var(--slate-700)}
.site-header.scrolled .lang-btn:hover{background:var(--slate-200)}

.site-header.scrolled{background:rgba(255,255,255,.95);border-color:var(--slate-100);box-shadow:0 1px 3px rgba(0,0,0,.06);backdrop-filter:blur(12px)}
.site-header.scrolled .brand{color:var(--slate-900)}
.site-header.scrolled .main-nav a{color:var(--slate-600)}
.site-header.scrolled .main-nav a:hover{color:var(--blue-600)}
.site-header.scrolled .nav-chip{background:var(--slate-100);color:var(--slate-600)}
.site-header.scrolled .btn-nav{background:var(--blue-600);color:#fff}
.site-header.scrolled .btn-nav:hover{background:var(--blue-700)}

.menu-toggle{display:none;padding:8px;border:0;background:none;cursor:pointer}
.menu-toggle>span:not(.sr-only){display:block;width:22px;height:2px;margin:4px 0;border-radius:2px;background:#fff;transition:background .3s}
.site-header.scrolled .menu-toggle>span:not(.sr-only){background:var(--slate-900)}
.site-header.is-solid .lang-btn{background:var(--slate-100);color:var(--slate-700)}
.site-header.is-solid .lang-btn:hover{background:var(--slate-200)}
.site-header.is-solid{background:rgba(255,255,255,.95);border-color:var(--slate-100);box-shadow:0 1px 3px rgba(0,0,0,.06);backdrop-filter:blur(12px)}
.site-header.is-solid .brand{color:var(--slate-900)}
.site-header.is-solid .main-nav a{color:var(--slate-600)}
.site-header.is-solid .main-nav a:hover{color:var(--blue-600)}
.site-header.is-solid .nav-chip{background:var(--slate-100);color:var(--slate-600)}
.site-header.is-solid .btn-nav{background:var(--blue-600);color:#fff}
.site-header.is-solid .btn-nav:hover{background:var(--blue-700)}
.site-header.is-solid .menu-toggle>span:not(.sr-only){background:var(--slate-900)}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding:calc(var(--header-h) + 76px) 0 84px;background:var(--slate-900);color:#fff;text-align:center}
.hero-canvas{position:absolute;inset:0;pointer-events:none}
.hero-canvas>span{position:absolute;inset:0;display:block}
.hero-circuit{
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='none' stroke='%2338bdf8' stroke-width='1' stroke-opacity='.28'%3E%3Cpath d='M0 40h60l18 18h52M220 40h-40l-16 16h-30M0 150h44l20-20h60M220 150h-56l-18 18H90M110 0v34l16 16v40M110 220v-40l-14-14v-36'/%3E%3Ccircle cx='130' cy='58' r='3'/%3E%3Ccircle cx='124' cy='130' r='3'/%3E%3Ccircle cx='90' cy='168' r='3'/%3E%3Ccircle cx='126' cy='90' r='3'/%3E%3Ccircle cx='164' cy='56' r='3'/%3E%3C/svg%3E");
}
.hero-grid-lines{
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:54px 54px;
}
.hero-glow{background:radial-gradient(60% 55% at 50% 0%,rgba(37,99,235,.34),transparent 70%)}
.hero-veil-x{background:linear-gradient(to right,rgba(15,23,42,.9),rgba(15,23,42,.1))}
.hero-veil-y{background:linear-gradient(to top,var(--slate-900),rgba(15,23,42,.7),transparent)}

.hero-inner{position:relative;z-index:1}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;padding:7px 16px;
  border:1px solid rgba(255,255,255,.12);border-radius:var(--pill);
  background:rgba(255,255,255,.06);color:var(--slate-200);font-size:14px;font-weight:600;
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green-500);box-shadow:0 0 0 4px rgba(34,197,94,.18)}

.hero h1{
  margin:26px auto 0;max-width:16ch;color:#fff;
  font-size:clamp(40px,5.6vw,72px);font-weight:700;line-height:1;letter-spacing:-1.8px;
}
.hero h1 .grad{
  background:linear-gradient(90deg,var(--blue-300),var(--indigo-300));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lead{max-width:640px;margin:24px auto 0;color:var(--slate-300);font-size:20px;line-height:1.45}
/* Las cuatro tiendas en una fila; «Preguntas frecuentes» debajo, centrado. */
.hero-actions{display:flex;flex-direction:column;align-items:center;gap:28px;margin-top:38px}
.hero-stores{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}

.hero-compat{max-width:1000px;margin:40px auto 0;padding-top:34px;border-top:1px solid rgba(255,255,255,.1)}
.hero-compat p{color:var(--slate-400);font-size:14px}
.compat-list{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 30px;margin-top:18px;color:var(--slate-300);font-size:17px;font-weight:700}

/* ── Secciones ────────────────────────────────────────────── */
.section{padding:96px 0}
/* «Precio» y «Empieza gratis» llevan aquí: con el título de la sección justo
   bajo la cabecera, sin el hueco del relleno (posición elegida por el usuario,
   2026-10-01). -106 = -(96 de relleno) - 10, contando los 90 de scroll-padding. */
#precio{scroll-margin-top:-106px}
.section-white{background:#fff}
.section-tint{background:var(--slate-50)}
.section-head{max-width:760px;margin:0 auto 56px;text-align:center}
.kicker{color:var(--blue-600);font-size:14px;font-weight:600;letter-spacing:.35px}
.section-head h2{margin:12px 0 16px;font-size:clamp(30px,3.4vw,36px);font-weight:700;line-height:1.11}
.section-sub{color:var(--slate-500);font-size:18px;line-height:1.55}

/* ── Rejilla de tarjetas ──────────────────────────────────── */
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{padding:32px;border:1px solid var(--slate-100);border-radius:var(--radius);background:#fff;
  box-shadow:var(--shadow-card);
  transition:box-shadow .3s ease,border-color .3s ease,translate .3s cubic-bezier(.4,0,.2,1)}
.card:hover{translate:0 -4px;border-color:var(--blue-100);box-shadow:var(--shadow-lg)}
.card-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:22px;border-radius:12px;
  background:var(--blue-50);color:var(--blue-600);transition:background .3s ease,color .3s ease}
.card:hover .card-icon{background:var(--blue-600);color:#fff}
.card-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:10px;font-size:18px;font-weight:700}
.card p{color:var(--slate-600);font-size:14px;line-height:1.6}

/* ── Casos de uso ─────────────────────────────────────────── */
.use{display:flex;flex-direction:column;gap:22px;padding:32px;border-radius:var(--radius);
  background:var(--slate-50);transition:background .3s ease}
.use:hover{background:#f4f8ff}
/* Desde que «Dónde se usa» va sobre fondo gris (2026-09-30), sus tarjetas son blancas: grises desaparecían. */
.section-tint .use{background:#fff;box-shadow:inset 0 0 0 1px var(--slate-200)}
.section-tint .use:hover{background:#f8fbff;box-shadow:inset 0 0 0 1px var(--blue-200)}
.use>p{flex:1;color:var(--slate-700);font-size:15px;line-height:1.6}
.use-foot{display:flex;align-items:center;gap:14px}
.use-foot strong{display:block;color:var(--slate-900);font-size:14px}
.use-foot small{color:var(--slate-500);font-size:13px}
.avatar{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;color:#fff;font-size:13px;font-weight:700}
.a1{background:var(--blue-500)} .a2{background:#db2777} .a3{background:#0891b2}
.a4{background:#10b981} .a5{background:#f97316} .a6{background:#a855f7}

/* ── Precio ───────────────────────────────────────────────────
   Rehecho el 2026-09-30 sobre extensionbooster.net/#pricing (medido, no
   a ojo), con nuestro azul: tarjetas de 305 px separadas 20 px, borde de
   1 px y radio 12, relleno 16. Cabecera centrada con el precio en Geist
   Mono, un recuadro gris de 224 px (aquí va el selector de equipos), la
   lista con un visto en círculo y el botón de 44 px pegado abajo. Sin
   efecto al pasar el ratón: la referencia no lo tiene. */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,320px));gap:20px;justify-content:center;align-items:stretch}
@media(max-width:1060px){.plans{grid-template-columns:repeat(2,minmax(0,320px))}}
@media(max-width:700px){.plans{grid-template-columns:minmax(0,420px)}}
.plan{position:relative;display:flex;flex-direction:column;padding:16px;border:1px solid var(--slate-200);
  border-radius:12px;background:#fff}
.plan-featured{border-color:rgba(15,23,42,.25)}
/* Hover pequeño (pedido por el usuario): sube 4 px con una sombra suave. */
.plan{transition:translate .2s ease,box-shadow .2s ease,border-color .2s ease}
.plan:hover{translate:0 -4px;border-color:var(--slate-300);box-shadow:0 12px 24px -12px rgba(15,23,42,.18)}
.plan-featured:hover{border-color:rgba(15,23,42,.4)}
.plan-badge{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  padding:3px 8px;border-radius:var(--pill);background:var(--blue-100);color:var(--blue-700);
  font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}

.plan-head{padding-top:9px;text-align:center}
.plan h3{margin:0;font-size:17px;font-weight:700;line-height:1.35;letter-spacing:-.015em;color:var(--slate-900)}
.plan-price{display:flex;justify-content:center;align-items:baseline;gap:6px;margin:12px 0 0;
  font-family:"Geist Mono",ui-monospace,"SF Mono",Consolas,monospace}
.plan-price strong{font-size:30px;font-weight:700;line-height:36px;letter-spacing:-.02em;color:var(--slate-900)}
.plan-price span{font-size:16px;font-weight:400;color:var(--slate-500)}
/* El plan corporativo no lleva cifra sino texto. */
.plan-price .plan-price-text{font-size:22px;letter-spacing:-.5px}
.plan-note{margin:6px 0 0;font-size:13px;line-height:18px;color:var(--slate-500)}

/* El recuadro gris: el de los créditos en la referencia; aquí, la nota del plan. */
.plan-box{width:260px;max-width:100%;margin:16px auto 0;padding:10px 12px;border:1px solid var(--slate-200);
  border-radius:12px;background:var(--slate-50);text-align:center}
.plan-box-text{margin:0;padding:2px 0;font-size:13px;line-height:18px;color:var(--slate-600)}
/* Cuántos equipos: abajo, justo encima del botón, como antes (lo pidió el usuario). */
.plan-qty{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 0;
  padding-top:16px;border-top:1px solid var(--slate-200)}
.plan-qty label{font-size:13px;font-weight:600;line-height:18px;color:var(--slate-700)}
.qty-stepper{display:flex;align-items:center;border:1px solid var(--slate-200);border-radius:8px;overflow:hidden;background:#fff}
.qty-step{
  width:32px;height:32px;border:0;background:#fff;color:var(--slate-600);
  font-size:16px;font-weight:700;line-height:1;cursor:pointer;
  transition:background .15s,color .15s;
}
.qty-step:hover:not(:disabled){background:var(--slate-50);color:var(--blue-600)}
.qty-step:disabled{color:var(--slate-300);cursor:not-allowed}
.qty-step:focus-visible{outline:2px solid var(--blue-600);outline-offset:-2px}
.qty-input{
  width:48px;min-width:48px;height:32px;border:0;border-inline:1px solid var(--slate-200);
  background:#fff;color:var(--slate-900);font:inherit;font-size:14px;font-weight:700;
  text-align:center;-moz-appearance:textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-input:focus-visible{outline:2px solid var(--blue-600);outline-offset:-2px}
.plan-total{margin:8px 0 0;font-size:13px;line-height:18px;text-align:center;color:var(--slate-500)}
/* El total ocupa su sitio desde el principio y solo se vuelve invisible: con
   `hidden` cada tarjeta se reacomodaba de una forma al subir de un equipo y
   la más alta daba un salto bajo el cursor. Reservando el renglón no se
   mueve nada en ninguna. */
.plan-total.vacio{visibility:hidden}
.plan-total strong{font-family:"Geist Mono",ui-monospace,Consolas,monospace;font-size:13px;font-weight:700;color:var(--slate-900)}

.plan-list{display:grid;align-content:start;gap:12px;flex:1;margin:16px 0 0;padding:0;list-style:none}
.plan-list li{position:relative;padding-left:22px;font-size:13px;line-height:18px}
.plan-list li:before{content:"";position:absolute;left:0;top:1px;width:15px;height:15px;
  background:center/15px 15px no-repeat}
.plan-list .yes{color:var(--slate-600)}
.plan-list .yes:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}
.plan-list .no{color:var(--slate-400)}
.plan-list .no:before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E")}

/* Botón: 44 px, radio 8, con flecha; relleno en la destacada y con borde en las demás. */
.plan .plan-cta{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:44px;
  margin-top:16px;padding:0 16px;border-radius:8px;font-size:14px;font-weight:600;box-shadow:none}
.plan .plan-cta::after{content:"";width:14px;height:14px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.plan .btn-outline{background:#fff;color:var(--slate-900);box-shadow:inset 0 0 0 1px var(--slate-200)}
.plan .btn-outline:hover{background:var(--slate-50);box-shadow:inset 0 0 0 1px var(--slate-300)}
.plan .btn-primary:hover{background:var(--blue-700)}
.plan-box-text a{color:var(--slate-600);text-decoration:underline;text-underline-offset:2px}
.plan-box-text a:hover{color:var(--blue-600)}

/* ── Compara los planes ───────────────────────────────────────
   Medida sobre extensionbooster.net (2026-09-30), con nuestro azul: cabecera
   y fila del precio en gris claro, filas de 45 px con raya fina, 14 px
   centrado, visto en círculo o «–», y la columna destacada (Pro) teñida y en
   negrita. En móvil la tabla se desplaza dentro de su caja con la primera
   columna fija; la página nunca. */
.compare{max-width:1100px;margin:72px auto 0}
.compare-head{margin-bottom:24px}
.compare-head h3{margin:0 0 4px;font-size:17px;font-weight:700;color:var(--slate-900)}
.compare-head p{margin:0;font-size:16px;color:var(--slate-500)}
.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare-table{width:100%;min-width:640px;border-collapse:separate;border-spacing:0;font-size:14px;line-height:20px}
.compare-table th,.compare-table td{padding:12px;border-bottom:1px solid var(--slate-200);text-align:center;vertical-align:middle;color:var(--slate-600)}
.compare-table th:first-child{width:36%;text-align:left;font-weight:500;color:var(--slate-900)}
.compare-table thead th{background:var(--slate-100);font-weight:700;color:var(--slate-900);border-bottom:0}
.compare-table thead th:first-child{border-top-left-radius:12px}
.compare-table thead th:last-child{border-top-right-radius:12px}
.compare-table .cmp-precio th,.compare-table .cmp-precio td{background:var(--slate-50);color:var(--slate-900)}
.compare-table .destacada{background:var(--blue-50);font-weight:700;color:var(--slate-900)}
.compare-table thead .destacada{background:#e3edfd;box-shadow:inset 0 -2px 0 var(--blue-600)}
.compare-table .cmp-precio .destacada{background:#e3edfd}
.cmp-badge{display:block;width:max-content;margin:4px auto 0;padding:2px 8px;border-radius:var(--pill);background:var(--blue-100);
  color:var(--blue-700);font-size:11px;font-weight:700;line-height:1.4;letter-spacing:.05em;text-transform:uppercase}
.cmp-cifra{font-family:"Geist Mono",ui-monospace,Consolas,monospace;font-weight:700;color:var(--slate-900)}
.compare-table td small{display:block;font-size:12px;font-weight:400;color:var(--slate-500)}
.cmp-si{display:inline-block;width:16px;height:16px;vertical-align:middle;fill:none;stroke:var(--green-600);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.cmp-no{color:var(--slate-400)}
@media(max-width:700px){
  .compare{margin-top:56px}
  .compare-table th:first-child{position:sticky;left:0;z-index:1;width:auto;min-width:170px;background:#fff;box-shadow:1px 0 0 var(--slate-200)}
  .compare-table thead th:first-child{background:var(--slate-100)}
  .compare-table .cmp-precio th:first-child{background:var(--slate-50)}
}

.notice{
  display:flex;align-items:center;gap:16px;max-width:880px;margin:32px auto 0;
  padding:20px 24px;border:1px solid var(--slate-200);border-radius:var(--radius);background:#fff;
}
.notice-icon{flex:0 0 36px;width:36px;height:36px;border-radius:50%;overflow:hidden}
.notice>div{flex:1}
.notice strong{color:var(--slate-900);font-size:15px}
.notice p{margin-top:4px;color:var(--slate-500);font-size:13.5px;line-height:1.5}
.notice-pill{padding:6px 14px;border-radius:var(--pill);background:var(--amber-100);color:var(--amber-700);font-size:12px;font-weight:700;white-space:nowrap}

/* ── Preguntas ────────────────────────────────────────────── */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:12px}
.faq-item{border:1px solid var(--slate-200);border-radius:var(--radius);background:#fff;overflow:hidden}
.faq-item button{
  display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;
  padding:22px 24px;border:0;background:none;color:var(--slate-900);text-align:left;cursor:pointer;
}
.faq-item button span{font-size:16px;font-weight:600}
.faq-item button i{
  display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;
  border-radius:8px;background:var(--blue-50);color:var(--blue-600);font-style:normal;font-size:14px;
}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.faq-answer>p,.faq-answer>.faq-answer-in{overflow:hidden;color:var(--slate-600);font-size:15px;line-height:1.65}
.faq-answer-in p+p{margin-top:14px}
.faq-item.open{border-color:var(--blue-200)}
.faq-item.open .faq-answer{grid-template-rows:1fr}
.faq-item.open .faq-answer>p,.faq-item.open .faq-answer>.faq-answer-in{padding:0 24px 24px}

/* ── Pie ──────────────────────────────────────────────────────
   Medido sobre extensionbooster.net (2026-09-30), con nuestros colores:
   rejilla de 12 columnas, la marca a la izquierda y tres columnas de
   enlaces de 2 columnas cada una pegadas a la derecha; debajo, una
   línea con el ©, el correo y el horario, y el aviso de Microsoft. */
.site-footer{padding:64px 0 40px;background:#fff;border-top:1px solid var(--slate-200)}
.footer-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px}
.footer-brand{grid-column:span 6}
.site-footer .brand{color:var(--slate-900);font-size:18px}
.footer-tagline{max-width:320px;margin:16px 0 20px;font-size:14px;line-height:1.625;color:var(--slate-500)}
.footer-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--slate-200);
  border-radius:var(--pill);background:var(--slate-50);font-size:14px;font-weight:500;color:var(--slate-900);
  transition:border-color .15s,color .15s}
.footer-pill:hover{border-color:var(--blue-300);color:var(--blue-700)}
.footer-pill svg,.footer-hours svg{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.footer-pill svg{width:16px;height:16px;color:var(--blue-600)}
.footer-col{grid-column:span 2}
.footer-col h3{margin:0 0 16px;font-size:12px;font-weight:700;line-height:16px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--slate-900)}
.footer-col ul{margin:0;padding:0;list-style:none}
.footer-col li+li{margin-top:12px}
.footer-col a{font-size:14px;line-height:20px;color:var(--slate-500);transition:color .15s}
.footer-col a:hover{color:var(--blue-600)}
.footer-bottom{margin-top:48px;padding-top:32px;border-top:1px solid var(--slate-200)}
.footer-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:12px;line-height:16px;color:var(--slate-500)}
.footer-meta p{margin:0}
.footer-meta a{color:var(--slate-500)}
.footer-meta a:hover{color:var(--blue-600)}
.footer-hours{display:inline-flex;align-items:center;gap:6px}
.footer-hours svg{width:13px;height:13px}
.footer-hours strong{font-weight:600;color:var(--slate-700)}
.footer-note{margin:16px 0 0;font-size:12px;line-height:1.6;color:var(--slate-400)}

/* ── Revelado al hacer scroll ─────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* ── Adaptable ────────────────────────────────────────────── */
@media(max-width:1024px){
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .shell{width:min(calc(100% - 32px),700px)}
  .menu-toggle{display:block}
  .nav-actions{margin-left:auto;gap:8px}
  .lang-current{display:none}
  .lang-btn{padding:8px 10px}
  .lang-btn.lang-globo{padding:0}
  .btn-nav{height:36px;padding:0 12px;font-size:13px}
  .main-nav{
    position:absolute;left:16px;right:16px;top:calc(var(--header-h) - 6px);
    display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:10px;
    border:1px solid var(--slate-200);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-lg);
  }
  .main-nav.open{display:flex}
  .main-nav a,.site-header .main-nav a{padding:13px;color:var(--slate-700)}
  .hero{padding:calc(var(--header-h) + 52px) 0 64px}
  .hero-actions,.hero-stores{width:100%}
  .hero-actions .btn{width:100%}
  .hero-compat{margin-top:32px}
  .compat-list{gap:24px;font-size:16px}
  .section{padding:72px 0}
  #precio{scroll-margin-top:-82px}
  .card-grid{grid-template-columns:minmax(0,1fr)}
  .notice{flex-wrap:wrap}
  .site-footer{padding:56px 0 36px}
  .footer-brand{grid-column:1/-1}
  .footer-col{grid-column:span 4}
}
@media(max-width:520px){
  .card,.use{padding:26px 22px}
  .faq-item button{padding:18px}
  .faq-item.open .faq-answer>p,.faq-item.open .faq-answer>.faq-answer-in{padding:0 18px 18px}
  .footer-col{grid-column:span 6}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.card{transition:none}
  .btn-lg:hover,.btn-block:hover{translate:none}
  .btn-nav:hover,.btn:active{scale:none}
  .btn-nav:hover{translate:none}
  .btn-lg:hover::before{animation:none}
  .btn.is-pressed{animation:none}
  .card:hover,.plan:hover{translate:none}
}

/* ── Gestión de licencia (restablecer.html) ──────────────────
   Página de cuenta, no de marketing: alineada a la izquierda,
   una sola columna estrecha y sin adornos del hero.          */
.account{padding:calc(var(--header-h) + 56px) 0 96px;background:var(--slate-50);min-height:70vh}
.account-shell{max-width:620px}
.account-eyebrow{margin:0;color:var(--slate-400);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.account-title{margin:10px 0 12px;color:var(--slate-900);font-size:clamp(26px,3vw,32px);font-weight:700;line-height:1.15;letter-spacing:-.02em}
.account-intro{margin:0 0 32px;color:var(--slate-500);font-size:16px;line-height:1.6}

.steps{display:flex;gap:24px;margin:0 0 16px;padding:0;list-style:none;counter-reset:paso}
.steps li{display:flex;align-items:center;gap:8px;color:var(--slate-400);font-size:13px;font-weight:600}
.steps li::before{
  counter-increment:paso;content:counter(paso);
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--slate-300);background:#fff;font-size:11px;font-weight:700;
}
.steps li.is-current{color:var(--slate-900)}
.steps li.is-current::before{border-color:var(--blue-600);background:var(--blue-600);color:#fff}
.steps li.is-done{color:var(--slate-600)}
.steps li.is-done::before{content:"✓";border-color:var(--blue-200);background:var(--blue-50);color:var(--blue-700)}

.panel{background:#fff;border:1px solid var(--slate-200);border-radius:14px;padding:28px 30px}
.pane h2{margin:0 0 8px;color:var(--slate-900);font-size:19px;font-weight:700;line-height:1.3}
.pane-note{margin:0 0 22px;color:var(--slate-500);font-size:14px;line-height:1.6}
.pane-note strong{color:var(--slate-800);font-weight:600;word-break:break-all}

.field{display:grid;gap:7px;margin:0}
.field>span{color:var(--slate-700);font-size:13px;font-weight:600}
.field input{
  width:100%;height:44px;padding:0 14px;border:1px solid var(--slate-300);border-radius:9px;
  background:#fff;color:var(--slate-800);font:inherit;font-size:15px;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.field input::placeholder{color:var(--slate-400)}
.field input:focus{border-color:var(--blue-600);box-shadow:0 0 0 3px var(--blue-50)}
.field-narrow{max-width:200px}
.otp-boxes{display:flex;gap:10px;max-width:340px}
.field .otp-box{
  flex:1 1 0;min-width:0;height:58px;padding:0;
  border:1px solid var(--slate-200);border-radius:12px;background:#fff;
  color:var(--slate-900);font:inherit;font-size:24px;font-weight:700;
  font-variant-numeric:tabular-nums;text-align:center;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.field .otp-box:hover:not(:focus){border-color:var(--slate-300)}
.field .otp-box:focus{outline:0;border-color:var(--blue-600);box-shadow:0 0 0 3px var(--blue-50)}
/* Una casilla escrita se distingue de una vacía sin gritar. */
.field .otp-box.is-filled{border-color:var(--slate-300);background:var(--slate-50)}
.field .otp-boxes.is-wrong .otp-box{border-color:#fca5a5}

.field-error{min-height:19px;margin:8px 0 0;color:#b91c1c;font-size:13px;line-height:1.45}
.pane-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.pane-actions .btn{padding:11px 22px;font-size:14px}
.pane-back{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--slate-100)}

.link-button{
  border:0;padding:0;background:none;color:var(--slate-500);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;
}
.link-button:hover{color:var(--blue-600);text-decoration:underline}

/* Elección entre conservar la clave o generar una nueva. */
.options{display:grid;gap:12px}
.option{
  display:grid;gap:5px;width:100%;padding:16px 18px;text-align:left;cursor:pointer;
  border:1px solid var(--slate-200);border-radius:11px;background:#fff;font:inherit;
  transition:border-color .15s,background .15s;
}
.option:hover{border-color:var(--blue-300);background:var(--blue-50)}
.option:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px}
.option-title{color:var(--slate-900);font-size:15px;font-weight:700}
.option-text{color:var(--slate-500);font-size:13.5px;line-height:1.55}

/* Equipos vinculados. */
.devices{display:grid;gap:0;margin:0 0 4px;padding:0;list-style:none;
  border:1px solid var(--slate-200);border-radius:11px;overflow:hidden}
.device+.device{border-top:1px solid var(--slate-100)}
.device label{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;cursor:pointer}
.device label:hover{background:var(--slate-50)}
.device input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--blue-600);flex:none;cursor:pointer}
.device-body{display:grid;gap:3px;min-width:0}
.device-code{
  color:var(--slate-900);font-size:14px;font-weight:700;letter-spacing:.06em;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
.device-meta{color:var(--slate-500);font-size:12.5px;line-height:1.5}
.device-empty{padding:18px 16px;color:var(--slate-500);font-size:14px}

/* Clave nueva. */
.keys{display:grid;gap:10px;margin:0 0 20px}
.key{display:flex;align-items:center;gap:12px;padding:13px 15px;
  border:1px solid var(--blue-200);border-radius:11px;background:var(--blue-50)}
.key code{
  flex:1;min-width:0;color:var(--blue-700);font-size:16px;font-weight:700;letter-spacing:.06em;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere;
}
.key-copy{
  flex:none;padding:7px 13px;border:1px solid var(--blue-200);border-radius:8px;background:#fff;
  color:var(--blue-700);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s;
}
.key-copy:hover{background:var(--blue-100)}

.account-foot{margin:22px 0 0;color:var(--slate-500);font-size:13.5px;line-height:1.6}
.account-foot a{color:var(--blue-600);font-weight:600}
.account-foot a:hover{text-decoration:underline}

.faq-link{color:var(--blue-600);font-weight:600}
.faq-link:hover{text-decoration:underline}

@media(max-width:520px){
  .account{padding:calc(var(--header-h) + 32px) 0 64px}
  .panel{padding:22px 18px;border-radius:12px}
  .steps{gap:14px}
  .steps li{font-size:12px}
  .pane-actions{gap:12px}
  .pane-actions .btn{width:100%;justify-content:center}
  .field-narrow{max-width:none}
  .key{flex-wrap:wrap}
  .key code{flex-basis:100%;text-align:center}
  .key-copy{width:100%}
}