@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap");

:root{
  /* ===== LIGHT is the DEFAULT theme (no data-theme attribute). =====
     Dark values live in the single html[data-theme="dark"]{} block below.
     Themeable surfaces/borders/grid/shadow + the pale-indigo accent TEXT
     are driven by these vars so the whole file flips from one place. */
  --bg:#ffffff;
  --bg-elev:#ffffff;
  --bg-elev-2:#f6f7fb;
  /* surfaces: faint ink tints / white cards (were white-translucent on dark) */
  --surface-1:rgba(15,23,42,.02);   /* was rgba(255,255,255,.02) */
  --surface-2:rgba(15,23,42,.03);   /* was rgba(255,255,255,.03) */
  --surface-3:rgba(15,23,42,.04);   /* was rgba(255,255,255,.04) */
  --surface-4:rgba(15,23,42,.05);   /* was rgba(255,255,255,.05) */
  --surface-hover:rgba(15,23,42,.07); /* was rgba(255,255,255,.06) hover */
  --panel:rgba(15,23,42,.03);       /* was rgba(255,255,255,.035) */
  --panel-2:rgba(15,23,42,.05);     /* was rgba(255,255,255,.055) */
  /* hairlines */
  --hairline:rgba(15,23,42,.08);    /* was rgba(255,255,255,.06/.07/.08) */
  --hairline-2:rgba(15,23,42,.10);  /* was rgba(255,255,255,.09/.1) */
  --hairline-3:rgba(15,23,42,.12);  /* was rgba(255,255,255,.12) */
  --hairline-faint:rgba(15,23,42,.05); /* was rgba(255,255,255,.04) */
  --grid:rgba(15,23,42,.022);       /* was rgba(255,255,255,.015) */
  --border:rgba(15,23,42,.10);      /* was rgba(255,255,255,.08) */
  --text:#0f172a;
  --muted:#475569;
  --dim:#64748b;
  /* accent TEXT that sits on white — deepened for contrast (light only) */
  --accent-ink:#5563f0;             /* was #98a8ff / #93a8ff / #9eabff */
  --accent-ink-2:#3344dd;           /* was #b9c5ff / #c8d2ff (stronger) */
  --brand:#6d7cff;
  --brand-2:#5368ff;
  --accent:#ff6152;
  --success:#2ad18a;
  --shadow:0 24px 54px rgba(15,23,42,.12);
  --shadow-strong:0 28px 60px rgba(15,23,42,.14);
  --shadow-soft:0 14px 28px rgba(15,23,42,.10);
  /* opaque/translucent special surfaces (sticky nav, mobile drawer, dropdown) */
  --nav-bg:rgba(255,255,255,1);
  --drawer-bg:rgba(255,255,255,.98);
  --dropdown-bg:#ffffff;
  --chevron:rgba(15,23,42,.34);     /* was rgba(255,255,255,.32) */
  /* card "glass" gradients — clean white cards on the light page */
  --card-grad:linear-gradient(180deg,#ffffff 0%,#ffffff 100%);
  --card-grad-2:linear-gradient(180deg,#ffffff 0%,rgba(15,23,42,.02) 100%);
  --footer-grad:linear-gradient(180deg,rgba(15,23,42,.025) 0%,rgba(15,23,42,.018) 100%);
  --hero-visual-bg:
    radial-gradient(circle at 14% 18%,rgba(255,98,79,.10),transparent 24%),
    radial-gradient(circle at 88% 18%,rgba(109,124,255,.12),transparent 30%),
    linear-gradient(180deg,#ffffff 0%,#f3f5fb 34%,#eef1f8 100%);
  --icon-glyph:#0f172a;             /* icon-wrap glyph: deep slate on pale tints (was #fff) */
  --track:rgba(15,23,42,.14);       /* toggle track (white knob needs contrast) */
  --track-hover:rgba(15,23,42,.20);
  --knob-shadow:rgba(15,23,42,.18);
  --success-ink:#0e9f6e;            /* savings/guarantee text — was pale mint #98f0be */
  --link-violet:#6d28d9;            /* cta-subtitle link on white (was #a78bfa) */
  --link-violet-hover:#5b21b6;      /* was #c4b3ff */
  --card-grad-featured:linear-gradient(180deg,#ffffff 0%,#ffffff 100%);
  --off-dot:rgba(15,23,42,.22);     /* disabled bullet (was rgba(255,255,255,.18)) */
  --off-underline:rgba(15,23,42,.28);
  --placeholder:rgba(71,85,105,.66); /* was rgba(182,189,217,.66) */
}

html[data-theme="dark"]{
  /* ===== DARK = the file's ORIGINAL look (it was dark before this change). ===== */
  --bg:#070811;
  --bg-elev:#0d1020;
  --bg-elev-2:#12162a;
  --surface-1:rgba(255,255,255,.02);
  --surface-2:rgba(255,255,255,.03);
  --surface-3:rgba(255,255,255,.04);
  --surface-4:rgba(255,255,255,.05);
  --surface-hover:rgba(255,255,255,.06);
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.055);
  --hairline:rgba(255,255,255,.08);
  --hairline-2:rgba(255,255,255,.1);
  --hairline-3:rgba(255,255,255,.12);
  --hairline-faint:rgba(255,255,255,.04);
  --grid:rgba(255,255,255,.015);
  --border:rgba(255,255,255,.08);
  --text:#f5f7ff;
  --muted:#b6bdd9;
  --dim:#8d96bb;
  --accent-ink:#98a8ff;
  --accent-ink-2:#b9c5ff;
  --shadow:0 24px 54px rgba(0,0,0,.28);
  --shadow-strong:0 28px 60px rgba(0,0,0,.34);
  --shadow-soft:0 14px 28px rgba(0,0,0,.28);
  --nav-bg:rgba(7,8,12,1);
  --drawer-bg:rgba(8,10,17,.98);
  --dropdown-bg:#080a11;
  --chevron:rgba(255,255,255,.32);
  --card-grad:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.03) 100%);
  --card-grad-2:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.02) 100%);
  --footer-grad:linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.025) 100%);
  --hero-visual-bg:
    radial-gradient(circle at 14% 18%,rgba(255,98,79,.18),transparent 24%),
    radial-gradient(circle at 88% 18%,rgba(109,124,255,.18),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(13,16,32,.96) 34%,rgba(8,10,16,.98) 100%);
  --icon-glyph:#fff;
  --track:rgba(255,255,255,.1);
  --track-hover:rgba(255,255,255,.14);
  --knob-shadow:rgba(0,0,0,.26);
  --success-ink:#98f0be;
  --link-violet:#a78bfa;
  --link-violet-hover:#c4b3ff;
  --card-grad-featured:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.035) 100%);
  --off-dot:rgba(255,255,255,.18);
  --off-underline:rgba(255,255,255,.22);
  --placeholder:rgba(182,189,217,.66);
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  background:
    radial-gradient(circle at 10% 10%,rgba(255,99,80,.06),transparent 26%),
    radial-gradient(circle at 88% 16%,rgba(100,120,255,.08),transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#f6f7fb 58%,#ffffff 100%);
  color:var(--text);
}
html[data-theme="dark"]{
  background:
    radial-gradient(circle at 10% 10%,rgba(255,99,80,.16),transparent 26%),
    radial-gradient(circle at 88% 16%,rgba(100,120,255,.18),transparent 28%),
    linear-gradient(180deg,#080912 0%,#06070b 58%,#090b12 100%);
}
body{
  margin:0;
  font-family:"Manrope","Segoe UI",sans-serif;
  color:var(--text);
  background:transparent;
  overflow-x:hidden;
}
/* Decorative body::before grid overlay removed: position:fixed + mask repainted
   the full viewport on every scroll frame, and at --grid alpha × .22 opacity it
   was imperceptible — all scroll cost, no visual. */
a{color:inherit;text-decoration:none}
.container{width:min(1280px,calc(100vw - 40px));margin:0 auto}

/* No backdrop-filter on the scroll path: a per-frame re-blur is the single
   biggest continuous scroll cost. Near-opaque bg makes it unnecessary. */
.nav{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--nav-bg);
  border-bottom:1px solid var(--hairline);
  transform:translateZ(0);
  backface-visibility:hidden;
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:82px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:"Space Grotesk","Segoe UI",sans-serif;
  font-size:1.55rem;
  font-weight:700;
  letter-spacing:-.04em;
}
.brand-mark{
  width:48px;
  height:48px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(140deg,#ff6152 0%,#eb4037 100%);
  color:#fff;
  font-size:1.35rem;
  font-weight:800;
  box-shadow:0 14px 28px rgba(235,64,55,.22);
}
.menu{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border:1px solid var(--hairline);
  border-radius:999px;
  background:var(--surface-1);
}
.menu a,.lang a,.nav-link{
  padding:11px 16px;
  border-radius:999px;
  color:var(--dim);
  font-size:.94rem;
  font-weight:700;
  transition:180ms ease;
  white-space:nowrap;
}
.menu a:hover,.menu a:focus-visible,.lang a:hover,.lang a:focus-visible,.nav-link:hover,.nav-link:focus-visible{
  background:var(--surface-4);
  color:var(--text);
}
.menu a:focus-visible,.lang a:focus-visible,.nav-link:focus-visible{
  outline:2px solid rgba(140,162,255,.65);
  outline-offset:2px;
}
.menu a.active,.nav-link.active{
  background:var(--surface-4);
  color:var(--text);
  box-shadow:inset 0 0 0 1px rgba(140,162,255,.22);
}
.menu .cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  color:#fff;
  box-shadow:0 16px 34px rgba(82,103,255,.28);
}
.menu .cta::after,.btn-primary::after{
  content:"";
  position:absolute;
  inset:-120% auto -120% -30%;
  width:42%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  transform:rotate(18deg);
  transition:transform .6s ease;
  pointer-events:none;
}
.menu .cta:hover::after,.menu .cta:focus-visible::after,.btn-primary:hover::after,.btn-primary:focus-visible::after{
  transform:translateX(320%) rotate(18deg);
}
.nav-group{position:relative}
.nav-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:0;
  background:transparent;
  cursor:pointer;
  font-family:inherit;
}
.nav-toggle::after{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  opacity:.75;
}
.nav-dropdown{
  position:absolute;
  top:calc(100% + 14px);
  left:0;
  /* Two-column "mega menu" grid so long menus (Producto = 8 products,
     Recursos = 7) stay short instead of running off the bottom of the
     viewport. Desktop-only — the mobile drawer (.menu display:none below)
     is a separate component, so this never affects narrow screens. */
  width:520px;
  max-width:calc(100vw - 40px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  padding:14px;
  border-radius:24px;
  border:1px solid var(--hairline-2);
  background:var(--dropdown-bg);
  box-shadow:0 2px 4px rgba(15,23,42,.05),0 14px 28px rgba(15,23,42,.12),0 36px 64px rgba(15,23,42,.24);
  display:grid;
  gap:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
}
/* Header row spans both columns. */
.nav-dropdown .nav-meta{grid-column:1 / -1;}
/* The rightmost dropdown (Recursos = last .nav-group) opens RIGHTWARD under its
   trigger like Producto/Soluciones, for visual consistency. Only on the narrow
   desktop band (1025-1100px, where the 520px panel would run off the right edge)
   does it flip to open leftward. Below 1025px the nav is the mobile drawer
   (.menu becomes display:none), so this never applies there. */
@media (min-width:1025px) and (max-width:1100px){
  .nav-group:last-of-type .nav-dropdown{left:auto;right:0;}
}
/* Invisible bridge: closes the 14px gap between trigger and dropdown
   so the hover state survives when the cursor crosses from the
   nav-link into the dropdown panel. */
.nav-dropdown::before{
  content:"";
  position:absolute;
  top:-14px;
  left:0;
  right:0;
  height:14px;
}
.nav-group:hover .nav-dropdown,.nav-group:focus-within .nav-dropdown{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}
.nav-dropdown.right{
  left:auto;
  right:0;
}
.nav-dropdown a{
  display:block;
  position:relative;
  /* Override .menu a { white-space:nowrap } — that rule is for the top nav
     links; here it would stop the card descriptions from wrapping and they
     overflow into the next grid column. */
  white-space:normal;
  padding:14px 38px 14px 16px;
  border-radius:18px;
  background:var(--surface-2);
}
.nav-dropdown a::after{
  content:"";
  position:absolute;
  right:18px;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid var(--chevron);
  border-top:2px solid var(--chevron);
  transform:translateY(-50%) rotate(45deg);
  transition:border-color .15s ease,transform .15s ease;
}
.nav-dropdown a:hover,.nav-dropdown a:focus-visible{background:var(--surface-hover)}
.nav-dropdown a:hover::after,.nav-dropdown a:focus-visible::after{
  border-color:var(--text);
  transform:translateY(-50%) translateX(2px) rotate(45deg);
}
.nav-dropdown strong{
  display:block;
  color:var(--text);
  font-size:.92rem;
}
.nav-dropdown small{
  display:block;
  margin-top:4px;
  color:var(--dim);
  line-height:1.45;
}
.nav-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:4px 4px 2px;
}
.nav-meta span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--muted);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.lang{display:flex;gap:8px}
.lang .active{
  background:rgba(109,124,255,.12);
  border:1px solid rgba(140,162,255,.26);
  color:var(--accent-ink-2);
}
.toggle{
  display:none;
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid var(--hairline);
  background:var(--surface-2);
  color:var(--text);
  align-items:center;
  justify-content:center;
}
.toggle svg{width:22px;height:22px}
.toggle:focus-visible{outline:2px solid rgba(140,162,255,.7);outline-offset:3px}
.nav-toggle:focus-visible{outline:2px solid rgba(140,162,255,.7);outline-offset:3px;border-radius:8px}

.page-hero{
  position:relative;
  overflow:hidden;
  padding:72px 0 46px;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:90px auto auto 6%;
  width:340px;
  height:340px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(255,98,79,.14),transparent 72%);
  filter:blur(16px);
  pointer-events:none;
}
.page-hero::after{
  content:"";
  position:absolute;
  inset:10px 5% auto auto;
  width:420px;
  height:420px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(109,124,255,.16),transparent 72%);
  filter:blur(20px);
  pointer-events:none;
}
.page-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,.86fr);
  gap:26px;
  align-items:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:0 18px;
  border-radius:999px;
  background:rgba(109,124,255,.12);
  border:1px solid rgba(109,124,255,.22);
  color:var(--accent-ink);
  font-size:.82rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.eyebrow::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 8px rgba(255,98,79,.12);
}
.headline{
  margin:22px 0 0;
  font-family:"Space Grotesk","Segoe UI",sans-serif;
  font-size:clamp(3rem,5.8vw,5.7rem);
  line-height:1.05;
  letter-spacing:-.055em;
  max-width:10ch;
}
.headline span{color:var(--accent-ink)}
.subheadline{
  margin:24px 0 0;
  max-width:60ch;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.82;
}
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  padding:0 24px;
  border-radius:16px;
  font-size:1rem;
  font-weight:800;
  transition:180ms ease;
}
.btn:hover,.btn:focus-visible{transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid rgba(140,162,255,.7);outline-offset:3px}
.btn-primary{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  color:#fff;
  box-shadow:0 18px 36px rgba(82,103,255,.28);
}
.btn-secondary{
  background:var(--surface-2);
  border:1px solid var(--hairline-2);
  color:var(--text);
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}
.chips span{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--hairline);
  color:var(--muted);
  font-size:.86rem;
  font-weight:800;
}

.hero-visual,.card,.mini-card,.detail-card,.feature-card,.solution-card,.suite-card,.cta-box,.footer-wrap{
  border:1px solid var(--border);
  background:var(--card-grad);
  box-shadow:var(--shadow);
}
.hero-visual{
  position:relative;
  overflow:hidden;
  padding:28px;
  border-radius:32px;
  background:var(--hero-visual-bg);
}
.hero-visual::after{
  content:"";
  position:absolute;
  inset:auto -8% -24% auto;
  width:220px;
  height:220px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(109,124,255,.18),transparent 70%);
}
.visual-top{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.dots{display:inline-flex;gap:8px}
.dots span{width:10px;height:10px;border-radius:999px}
.dots span:nth-child(1){background:#ff6c63}
.dots span:nth-child(2){background:#f7b852}
.dots span:nth-child(3){background:#2ad18a}
.visual-pill{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 12px;
  border-radius:999px;
  background:var(--surface-4);
  border:1px solid var(--hairline);
  color:var(--muted);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.visual-body{
  position:relative;
  z-index:1;
  display:grid;
  gap:14px;
  margin-top:22px;
}
.mini-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.mini-card,.detail-card{
  padding:16px;
  border-radius:20px;
}
.mini-card strong,.detail-card strong,.feature-card h3,.suite-card h3,.solution-card h3{
  display:block;
  font-family:"Space Grotesk","Segoe UI",sans-serif;
  letter-spacing:-.04em;
}
.mini-card strong{font-size:1.35rem}
.mini-card span,.detail-card p,.feature-card p,.suite-card p,.solution-card p{
  display:block;
  margin-top:8px;
  color:var(--muted);
  line-height:1.7;
}
.detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.section{padding:96px 0}
.section.alt{
  background:var(--surface-1);
  border-top:1px solid var(--hairline-faint);
  border-bottom:1px solid var(--hairline-faint);
}
.section-head{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,.82fr);
  gap:24px;
  align-items:end;
  margin-bottom:32px;
}
.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--accent-ink);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.section-kicker::before{
  content:"";
  width:34px;
  height:1px;
  background:linear-gradient(90deg,rgba(255,98,79,.7),rgba(109,124,255,.5));
}
.section-head h2{
  margin:16px 0 0;
  font-family:"Space Grotesk","Segoe UI",sans-serif;
  font-size:clamp(2rem,4vw,3.6rem);
  line-height:1.08;
  letter-spacing:-.05em;
  max-width:11ch;
}
.section-head p{
  margin:0;
  max-width:52ch;
  color:var(--muted);
  font-size:1rem;
  line-height:1.85;
}

.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:1280px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
.card,.feature-card,.solution-card,.suite-card,.cta-box{border-radius:28px}
.card,.feature-card,.solution-card,.suite-card{padding:28px}
.icon-wrap{
  width:58px;
  height:58px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,rgba(109,124,255,.28) 0%,rgba(82,103,255,.12) 100%);
  border:1px solid rgba(140,162,255,.18);
  color:var(--icon-glyph);
}
.icon-wrap svg{width:28px;height:28px}
.icon-wrap.success{background:linear-gradient(135deg,rgba(42,209,138,.24) 0%,rgba(42,209,138,.1) 100%);border-color:rgba(42,209,138,.16)}
.icon-wrap.accent{background:linear-gradient(135deg,rgba(255,98,79,.22) 0%,rgba(255,98,79,.08) 100%);border-color:rgba(255,98,79,.16)}
.icon-wrap.gold{background:linear-gradient(135deg,rgba(244,187,74,.24) 0%,rgba(244,187,74,.08) 100%);border-color:rgba(244,187,74,.16)}
.card h3,.feature-card h3,.suite-card h3,.solution-card h3{
  margin:18px 0 0;
  font-size:1.5rem;
  line-height:1.05;
}
.card p,.feature-card p,.suite-card p,.solution-card p{
  margin:12px 0 0;
}
.card-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  color:var(--accent-ink);
  font-size:.9rem;
  font-weight:800;
}
.card-link::after{
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
}
.list{
  margin:18px 0 0;
  padding:0;
  list-style:none;
}
.list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--muted);
  line-height:1.72;
}
.list li+li{margin-top:10px}
.list li::before{
  content:"";
  width:8px;
  height:8px;
  margin-top:10px;
  border-radius:999px;
  background:var(--accent-ink);
  flex-shrink:0;
}

.cta-box{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,.85fr);
  gap:24px;
  align-items:center;
  padding:42px;
  background:
    radial-gradient(circle at top right,rgba(109,124,255,.22),transparent 36%),
    var(--card-grad);
}
.cta-box h2{
  margin:16px 0 0;
  font-family:"Space Grotesk","Segoe UI",sans-serif;
  font-size:clamp(2rem,4vw,3.5rem);
  line-height:1.08;
  letter-spacing:-.05em;
  max-width:11ch;
}
.cta-box p{
  margin:14px 0 0;
  color:var(--muted);
  line-height:1.82;
}
.proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.proof-card{
  padding:20px;
  border-radius:22px;
  border:1px solid var(--hairline);
  background:var(--surface-2);
}
.proof-card strong{
  display:block;
  font-family:"Space Grotesk","Segoe UI",sans-serif;
  font-size:1.55rem;
  letter-spacing:-.05em;
}
.proof-card span{
  display:block;
  margin-top:8px;
  color:var(--text);
  font-size:.94rem;
  font-weight:800;
}
.proof-card small{
  display:block;
  margin-top:8px;
  color:var(--muted);
  line-height:1.7;
}

.billing-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px 36px;
  margin:0 0 28px;
}
.billing-controls-divider{
  width:1px;
  height:28px;
  background:var(--hairline-3);
}
@media(max-width:720px){
  .billing-controls-divider{display:none}
}
.billing-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:28px;
}
.billing-controls .billing-toggle{margin-bottom:0}
.billing-toggle span{
  color:var(--dim);
  font-size:.96rem;
  font-weight:800;
}
.billing-toggle .is-active{color:var(--text)}
.billing-switch{
  width:78px;
  height:42px;
  padding:0;
  border:0;
  border-radius:999px;
  background:var(--track);
  box-shadow:inset 0 0 0 1px var(--hairline);
  cursor:pointer;
  transition:180ms ease;
}
.billing-switch:hover,.billing-switch:focus-visible{
  background:var(--track-hover);
}
.billing-switch:focus-visible{
  outline:2px solid rgba(140,162,255,.7);
  outline-offset:3px;
}
.billing-knob{
  display:block;
  width:32px;
  height:32px;
  margin:5px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 10px 20px var(--knob-shadow);
  transition:transform .24s ease;
}
.billing-switch.is-annual .billing-knob,.billing-switch.is-iva .billing-knob{transform:translateX(36px)}
.billing-save{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(42,209,138,.14);
  border:1px solid rgba(42,209,138,.16);
  color:var(--success-ink)!important;
}
.pricing-grid{margin-top:26px}
.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.plan-card .btn{width:100%}
.plan-card.featured{
  border-color:rgba(140,162,255,.24);
  background:
    radial-gradient(circle at top right,rgba(109,124,255,.2),transparent 34%),
    var(--card-grad-featured);
}
.plan-badge{
  position:absolute;
  top:18px;
  right:18px;
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  color:#fff;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 14px 28px rgba(82,103,255,.24);
}
.plan-label{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  color:var(--text);
  font-size:.96rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.plan-desc{
  margin:8px 0 0;
  color:var(--muted);
  line-height:1.72;
  min-height:5.16em;
}
@media(max-width:1180px){.plan-desc{min-height:0}}
.price-row{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}
.price-row > *{min-width:0}
.currency{
  padding-bottom:12px;
  font-family:"Space Grotesk","Segoe UI",sans-serif;
  font-size:2rem;
  font-weight:700;
  letter-spacing:-.05em;
  white-space:nowrap;
}
.price-number{
  font-family:"Space Grotesk","Segoe UI",sans-serif;
  font-size:clamp(3.6rem,5.6vw,5.4rem);
  line-height:.9;
  letter-spacing:-.08em;
}
@media (max-width:1280px){
  .currency{font-size:1.5rem;padding-bottom:8px}
}
.price-period{
  padding-bottom:12px;
  color:var(--dim);
  font-size:1.1rem;
  font-weight:800;
}
.price-note{
  min-height:24px;
  color:var(--muted);
  line-height:1.7;
}
.price-savings{
  margin:6px 0 0;
  font-size:.84rem;
  font-weight:700;
  color:var(--success-ink);
  letter-spacing:.01em;
}
.price-savings:empty{display:none}
.cta-subtitle{
  display:block;
  margin-top:8px;
  text-align:center;
  font-size:.78rem;
  color:var(--dim);
  line-height:1.4;
}
.cta-subtitle a{
  color:var(--link-violet);
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:700;
}
.cta-subtitle a:hover{color:var(--link-violet-hover)}
.plan-divider{
  height:1px;
  background:var(--hairline);
}
.plan-list{margin-top:0}
.plan-list li.feature-entry{
  display:block;
}
.plan-list li.feature-entry::before{
  display:none;
}
.feature-accordion{
  width:100%;
}
.feature-accordion summary{
  list-style:none;
  display:grid;
  grid-template-columns:20px 1fr;
  gap:12px;
  align-items:start;
  cursor:pointer;
}
.feature-accordion summary::-webkit-details-marker{display:none}
.feature-accordion summary::before{
  content:"+";
  width:20px;
  height:20px;
  margin-top:3px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(109,124,255,.12);
  border:1px solid rgba(140,162,255,.24);
  color:var(--accent-ink);
  font-size:.95rem;
  font-weight:900;
  line-height:1;
  transition:180ms ease;
}
.feature-accordion summary span{
  color:var(--text);
  font-weight:700;
  line-height:1.66;
  transition:180ms ease;
}
.feature-accordion:hover summary span,.feature-accordion:focus-within summary span{
  color:var(--text);
}
.feature-accordion[open] summary::before{
  content:"−";
  color:var(--accent-ink);
  background:rgba(109,124,255,.22);
  border-color:rgba(140,162,255,.34);
}
.feature-desc{
  margin:10px 0 0 32px;
  color:var(--dim);
  font-size:.92rem;
  line-height:1.68;
}
.plan-list li.off{color:var(--dim)}
.plan-list li.off::before{background:var(--off-dot)}
.plan-list li.off[title]{cursor:help;text-decoration:underline dotted var(--off-underline);text-underline-offset:3px}
.pricing-note{
  margin:18px 0 0;
  color:var(--muted);
  font-size:.96rem;
  line-height:1.8;
}
.compare-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  margin:32px 0 0;
  padding:20px 24px;
  background:var(--surface-3);
  border:1px solid var(--hairline);
  border-radius:16px;
}
.compare-banner > div{flex:1;min-width:280px}
.compare-banner strong{display:block;color:var(--text);font-weight:700;font-size:1.04rem;margin-bottom:4px}
.compare-banner p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6}
.compare-banner .btn{flex-shrink:0}
@media(max-width:640px){
  .compare-banner{flex-direction:column;align-items:stretch}
  .compare-banner .btn{width:100%}
}
.pricing-guarantees{
  margin:24px 0 0;
  text-align:center;
  color:var(--success-ink);
  font-size:.96rem;
  font-weight:700;
  letter-spacing:.01em;
}
.support-chips{
  list-style:none;
  margin:14px 0 26px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 10px;
}
.support-chips li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  background:var(--surface-3);
  border:1px solid var(--hairline);
  color:var(--muted);
  font-size:.86rem;
  font-weight:600;
}
.support-chips .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.support-chips .dot-on{background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.16)}
.support-chips .dot-urgent{background:#ff8a3d;box-shadow:0 0 0 4px rgba(255,138,61,.18)}
@media(max-width:560px){
  .support-chips{justify-content:flex-start}
  .support-chips li{font-size:.82rem}
}

/* Social proof block */
.section.social-proof{padding:64px 0 24px}
.proof-row{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-top:6px}
.proof-feature{display:flex;gap:22px;padding:28px;border-radius:24px;border:1px solid var(--hairline);background:var(--card-grad-2)}
.proof-logo{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,#1f2a4d 0%,#2d3970 100%);border:1px solid rgba(140,162,255,.22);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.4rem;flex-shrink:0}
.proof-text{display:flex;flex-direction:column;gap:8px}
.proof-meta{color:var(--accent-ink);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.proof-feature strong{display:block;color:var(--text);font-family:"Space Grotesk","Segoe UI",sans-serif;font-size:1.4rem;letter-spacing:-.02em;line-height:1.2}
.proof-text p{margin:6px 0 0;color:var(--muted);line-height:1.75;font-size:.98rem}
.proof-text a{color:var(--accent-ink-2);text-decoration:underline;text-decoration-color:rgba(140,162,255,.4);text-underline-offset:3px}
.proof-text a:hover{color:var(--text);text-decoration-color:var(--text)}
.proof-invite{padding:24px;border-radius:22px;border:1px dashed rgba(140,162,255,.32);background:rgba(140,162,255,.04);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.proof-invite strong{color:var(--text);font-family:"Space Grotesk","Segoe UI",sans-serif;font-size:1.18rem;line-height:1.25;letter-spacing:-.02em}
.proof-invite p{margin:0;color:var(--muted);line-height:1.65;font-size:.94rem}
.proof-invite .btn{margin-top:4px}
@media(max-width:960px){.proof-row{grid-template-columns:1fr}}
@media(max-width:560px){.proof-feature{flex-direction:column;gap:14px;padding:22px}}

/* Full Soporte section */
.section-support{padding:64px 0}
.support-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:18px;
  margin-top:32px;
}
.support-card{
  padding:28px;
  border-radius:22px;
  border:1px solid var(--hairline);
  background:var(--card-grad-2);
}
.support-eyebrow{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(140,162,255,.12);
  border:1px solid rgba(140,162,255,.22);
  color:var(--accent-ink-2);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.support-card h3{
  margin:14px 0 8px;
  font-family:"Space Grotesk","Segoe UI",sans-serif;
  font-size:clamp(1.6rem,2.4vw,2.1rem);
  line-height:1.15;
  letter-spacing:-.03em;
  color:var(--text);
}
.support-lead{
  margin:0 0 16px;
  color:var(--muted);
  line-height:1.7;
}
.support-points{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.support-points li{
  padding:14px 16px;
  border-radius:14px;
  background:var(--surface-2);
  border:1px solid var(--hairline);
  color:var(--muted);
  font-size:.94rem;
  line-height:1.55;
}
.support-points strong{color:var(--text);font-weight:700}
.support-table{
  width:100%;
  margin-top:14px;
  border-collapse:collapse;
  font-size:.94rem;
}
.support-table th,.support-table td{
  padding:12px 10px;
  text-align:left;
  border-bottom:1px solid var(--hairline);
  color:var(--muted);
}
.support-table thead th{
  color:var(--text);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-bottom-color:var(--hairline-3);
}
.support-table tbody th[scope=row]{color:var(--text);font-weight:700}
.support-table tbody tr:last-child th,.support-table tbody tr:last-child td{border-bottom:none}
.support-table tr.support-highlight th,
.support-table tr.support-highlight td{
  background:rgba(140,162,255,.06);
  color:var(--text);
}
.support-table tr.support-highlight th[scope=row]{color:var(--accent-ink-2)}
.support-note{
  margin:14px 0 0;
  color:var(--dim);
  font-size:.84rem;
  line-height:1.55;
}
@media(max-width:960px){
  .support-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .section-support{padding:48px 0}
  .support-card{padding:22px}
  .support-table{font-size:.88rem}
  .support-table th,.support-table td{padding:10px 8px}
}
.compare-wrap{
  padding:14px;
  overflow-x:auto;
}
.compare-table{
  width:100%;
  min-width:920px;
  border-collapse:collapse;
}
.compare-table th{
  padding:16px 14px;
  color:var(--text);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:left;
  border-bottom:1px solid var(--hairline);
  background:var(--surface-1);
}
.compare-table td{
  padding:16px 14px;
  color:var(--muted);
  line-height:1.68;
  border-bottom:1px solid var(--hairline);
}
.compare-table td:first-child{
  color:var(--text);
  font-weight:800;
}
.compare-table td:first-child strong{
  display:block;
  color:var(--text);
  font-weight:800;
}
.compare-table td:first-child small{
  display:block;
  margin-top:4px;
  color:var(--dim);
  font-size:.84rem;
  font-weight:600;
  line-height:1.55;
}
.compare-group td{
  padding:12px 14px;
  color:var(--accent-ink);
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:rgba(109,124,255,.07);
  border-bottom:1px solid var(--hairline);
}
.compare-highlight{background:rgba(109,124,255,.08)}
.check{color:var(--success-ink)!important;font-weight:800}
.dash{color:var(--dim)!important}
.faq-layout{
  display:grid;
  grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);
  gap:18px;
  align-items:start;
}
.faq-list{
  display:grid;
  gap:14px;
}
.faq-item{
  padding:22px 24px;
}
.faq-item summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  cursor:pointer;
  font-family:"Space Grotesk","Segoe UI",sans-serif;
  font-size:1.12rem;
  font-weight:700;
  letter-spacing:-.04em;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";
  color:var(--dim);
  font-size:1.4rem;
  line-height:1;
  transition:transform .2s ease,color .2s ease;
}
.faq-item[open] summary::after{
  transform:rotate(45deg);
  color:var(--accent-ink);
}
.faq-answer{
  margin-top:14px;
  color:var(--muted);
  line-height:1.84;
}
.contact-shell{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:18px;
  align-items:start;
}
.contact-form-card{padding:32px}
.contact-form-card h2{
  margin:16px 0 0;
  font-family:"Space Grotesk","Segoe UI",sans-serif;
  font-size:clamp(2rem,4vw,3rem);
  line-height:.98;
  letter-spacing:-.06em;
  max-width:10ch;
}
.contact-form-card > p{
  margin:14px 0 0;
  color:var(--muted);
  line-height:1.82;
}
.field-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:24px;
}
.form-row{
  display:grid;
  gap:8px;
}
.form-row.full{grid-column:1/-1}
.form-row label{
  color:var(--muted);
  font-size:.84rem;
  font-weight:800;
}
.form-row input,.form-row select,.form-row textarea{
  width:100%;
  min-height:54px;
  padding:0 16px;
  border-radius:16px;
  border:1px solid var(--hairline);
  background:var(--surface-2);
  color:var(--text);
  font:inherit;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.form-row textarea{
  min-height:148px;
  padding:16px;
  resize:vertical;
}
.form-row input::placeholder,.form-row textarea::placeholder{color:var(--placeholder)}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none;
  border-color:rgba(140,162,255,.34);
  background:var(--surface-3);
  transform:translateY(-1px);
}
.form-note{
  margin:14px 0 0;
  color:var(--dim);
  line-height:1.72;
}
.form-submit{
  width:100%;
  border:0;
  cursor:pointer;
}
.contact-side{
  display:grid;
  gap:18px;
}
.success-panel{
  display:none;
  padding:30px;
  border-radius:24px;
  border:1px solid rgba(42,209,138,.16);
  background:linear-gradient(180deg,rgba(42,209,138,.12) 0%,var(--surface-2) 100%);
}
.success-panel.is-visible{display:block}
.success-panel h3{
  margin:0;
  font-family:"Space Grotesk","Segoe UI",sans-serif;
  font-size:2rem;
  letter-spacing:-.06em;
}
.success-panel p{
  margin:12px 0 0;
  color:var(--muted);
  line-height:1.8;
}

.footer{padding:34px 0 56px}
.footer-wrap{
  padding:28px;
  border-radius:30px;
  background:var(--footer-grad);
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,.72fr));
  gap:22px;
}
.footer-brand p{
  margin:18px 0 0;
  max-width:36ch;
  color:var(--muted);
  line-height:1.8;
}
.footer-col h4{
  margin:0 0 12px;
  color:var(--dim);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.footer-col a,.footer-col span{
  display:block;
  color:var(--muted);
  line-height:1.95;
}
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px 22px;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--hairline);
  color:var(--dim);
  font-size:.92rem;
}
.footer-legal{display:inline-flex;flex-wrap:wrap;gap:6px 18px}
.footer-legal a{color:var(--dim);text-decoration:none;font-size:.88rem}
.footer-legal a:hover,.footer-legal a:focus-visible{color:var(--text)}
/* Footer CTA (`<a class="cta">` inside .footer) had no rule and rendered as
   grey plain text on every page. Give it the primary-button look (same brand
   gradient/white-text/padding/radius as .btn-primary). Scoped to .footer so
   it never disturbs .menu .cta, .cta-box or .cta-subtitle. */
.footer .cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 24px;
  border-radius:16px;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 100%);
  color:#fff;
  font-size:1rem;
  font-weight:800;
  box-shadow:0 18px 36px rgba(82,103,255,.28);
  transition:180ms ease;
}
.footer .cta:hover,.footer .cta:focus-visible{transform:translateY(-2px)}
.footer .cta:focus-visible{outline:2px solid rgba(140,162,255,.7);outline-offset:3px}
@media(max-width:560px){
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:10px}
  .footer-legal{order:3}
}

.feature-anchor{scroll-margin-top:110px}
.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .72s cubic-bezier(.22,1,.36,1),transform .72s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--reveal-delay,0ms);
}
.js .reveal.is-visible{
  opacity:1;
  transform:none;
}

@media (max-width:1180px){
  .page-hero-grid,.section-head,.cta-box,.grid-3,.grid-4,.grid-2,.proof-grid,.footer-grid,.mini-grid,.detail-grid,.faq-layout,.contact-shell{grid-template-columns:1fr}
  .headline,.section-head h2,.cta-box h2{max-width:none}
}
/* Mobile navbar breakpoint bumped 900→1024px when the CTA grew from
   "Prueba gratis" to "Prueba gratis 90 días" — the longer label
   pushed desktop nav items over their fit budget in the 900-960px
   band. 1024 is the standard Bootstrap/Tailwind tablet/desktop line
   and tablets in landscape actually prefer the hamburger UX anyway
   (touch targets, not hover). */
@media (max-width:1024px){
  .menu,.lang{display:none}
  .menu.open,.lang.open{
    display:grid;
    width:100%;
    gap:10px;
    padding:14px;
    border-radius:22px;
    background:var(--drawer-bg);
    border:1px solid var(--hairline);
  }
  .toggle{position:relative}
  body.menu-open{overflow:hidden}
  body.menu-open .nav{
    position:fixed;
    inset:0;
    background:var(--drawer-bg);
    -webkit-backdrop-filter:blur(20px);
    backdrop-filter:blur(20px);
    z-index:60;
    border-bottom:none;
  }
  body.menu-open .nav-inner{
    display:grid;
    grid-template-areas:"brand toggle" "menu menu" "lang lang";
    grid-template-columns:1fr auto;
    grid-template-rows:auto minmax(0,1fr) auto;
    height:100vh;
    height:100dvh;
    max-height:100dvh;
    align-items:center;
    padding:14px 0;
    gap:14px;
    flex-wrap:nowrap;
  }
  body.menu-open .brand{grid-area:brand}
  body.menu-open .toggle{grid-area:toggle;color:var(--text)}
  body.menu-open .toggle svg{opacity:0}
  body.menu-open .toggle::before,
  body.menu-open .toggle::after{
    content:"";
    position:absolute;
    top:50%;left:50%;
    width:22px;height:2px;
    background:currentColor;
    border-radius:2px;
  }
  body.menu-open .toggle::before{transform:translate(-50%,-50%) rotate(45deg)}
  body.menu-open .toggle::after{transform:translate(-50%,-50%) rotate(-45deg)}
  body.menu-open .menu.open{
    grid-area:menu;
    width:auto;
    align-self:stretch;
    min-height:0;
    max-height:none;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    margin:0;
    background:transparent;
    border:none;
    border-radius:0;
    padding:8px 4px 24px;
  }
  body.menu-open .lang.open{
    grid-area:lang;
    width:auto;
    justify-self:center;
    align-self:end;
    margin:4px 0 0;
    padding:4px;
    background:var(--surface-3);
    border:1px solid var(--hairline);
    border-radius:999px;
    grid-template-columns:repeat(2,minmax(64px,auto));
    gap:4px;
  }
  body.menu-open .lang.open a{
    min-height:34px;
    padding:0 12px;
    font-size:.78rem;
  }
  body.menu-open .menu.open,body.menu-open .lang.open{
    animation:meseroDrawerIn .26s ease;
  }
  @keyframes meseroDrawerIn{
    from{opacity:0;transform:translateY(6px)}
    to{opacity:1;transform:none}
  }
  .nav-inner{flex-wrap:wrap;min-height:74px}
  .toggle{display:inline-flex}
  .nav-group{display:grid;gap:6px}
  /* Mobile accordion: each section (Producto/Soluciones/Recursos) is a
     full-width row with a chevron; its submenu is COLLAPSED by default and
     expands on tap (.expanded toggled by JS). Clearer hierarchy + far less
     scroll than dumping every item open. Desktop hover menu is unaffected
     (these rules live only inside the mobile @media block). */
  .nav-group .nav-toggle{display:flex;align-items:center;justify-content:space-between;width:100%}
  .nav-toggle::after{display:block;margin-left:auto;opacity:.7;transition:transform .2s ease}
  .nav-group.expanded .nav-toggle::after{transform:rotate(-135deg) translateY(2px)}
  .nav-dropdown{
    position:static;
    width:auto;
    max-width:none;
    min-width:0;
    grid-template-columns:1fr;
    padding:0;
    background:none;
    border:none;
    box-shadow:none;
    transform:none;
    pointer-events:auto;
    opacity:1;
    visibility:visible;
    display:none;
    margin:2px 0 6px;
  }
  .nav-group.expanded .nav-dropdown{
    display:grid;
    margin-left:6px;
    padding-left:12px;
    border-left:2px solid rgba(140,162,255,.25);
  }
  .nav-dropdown .nav-meta{display:none}
  .nav-dropdown a{padding:10px 14px;background:var(--surface-2)}
  .nav-dropdown a::after{display:none}
  /* Hide the chat bubble when the mobile drawer is open — it was floating
     on top of the menu cards and competing for taps. The drawer covers
     the screen and provides its own contact link, so the chat is
     redundant in this context. */
  body.menu-open .mvc-root{display:none}
  /* Reorder mobile menu items so high-intent links (Empieza gratis / Iniciar
     sesión / Precios / Contacto) appear at the TOP of the drawer, ahead of
     the dropdown groups. Per Codex review — buyers landing on a hamburger
     drawer want quick action targets, not another long landing page.
     The drawer is a grid in mobile, so `order:` reorders visually without
     touching the HTML. */
  body.menu-open .menu>.cta{order:1}
  body.menu-open .menu>a[href$="/login"],
  body.menu-open .menu>a[href$="/en/login"]{order:2}
  body.menu-open .menu>a[href$="/precios"],
  body.menu-open .menu>a[href$="/en/pricing"],
  body.menu-open .menu>a[href$="/pricing"]{order:3}
  body.menu-open .menu>a[href$="/contacto"],
  body.menu-open .menu>a[href$="/en/contact"],
  body.menu-open .menu>a[href$="/contact"]{order:4}
  body.menu-open .menu>.nav-group:nth-of-type(1){order:5}
  body.menu-open .menu>.nav-group:nth-of-type(2){order:6}
  body.menu-open .menu>.nav-group:nth-of-type(3){order:7}
}
@media (max-width:560px){
  .container{width:min(1280px,calc(100vw - 24px))}
  .brand{font-size:1.42rem}
  .brand-mark{width:42px;height:42px;border-radius:14px;font-size:1.2rem}
  .headline{font-size:clamp(2.6rem,13vw,4rem)}
  .price-number{font-size:4.1rem}
  .btn{width:100%}
  .actions{flex-direction:column}
  .field-grid{grid-template-columns:1fr}
  .card,.feature-card,.solution-card,.suite-card,.hero-visual,.cta-box,.footer-wrap{padding:24px}
}
/* iOS Safari zooms the viewport on focus of any form control whose font-size
   is < 16px. The contact-form inputs use font:inherit, so pin them to 16px on
   touch-width screens to kill that zoom jump. Theme-agnostic (color stays var). */
@media (max-width:960px){
  .form-row input,.form-row select,.form-row textarea{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1!important;transform:none!important}
}
.app-card{display:flex;flex-direction:column}
.app-badge-row{display:flex;gap:10px;margin-top:auto;padding-top:18px;flex-wrap:wrap}
.app-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:12px;
  background:#0b0e1f;color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
  min-width:148px;flex:1 1 148px;
}
.app-badge:hover{background:#141830;border-color:rgba(107,124,255,.45);transform:translateY(-1px)}
.app-badge:focus-visible{outline:2px solid #6b7cff;outline-offset:2px}
.app-badge-icon{width:22px;height:22px;flex-shrink:0;color:#fff}
.app-badge-text{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.app-badge-text small{font-size:.66rem;font-weight:500;letter-spacing:.02em;opacity:.78;text-transform:none}
.app-badge-text strong{font-size:.98rem;font-weight:700;letter-spacing:-.01em;margin-top:2px}

/* ============================================================
   precios.html — page-scoped polish (do NOT generalise; .list and
   .section-head are shared across ~30 landing pages, so these rules
   are namespaced to precios-only modifier classes added in the HTML).
   ============================================================ */

/* COBERTURA FUNCIONAL: lock the bullet + "Término: descripción" into a
   2-col grid so the text start aligns across rows regardless of how the
   term wraps (was display:flex on the shared .list li, which let long
   terms like "Mesero Comandas" push the description to ragged x-positions). */
.cobertura .list li{
  display:grid;
  grid-template-columns:8px minmax(0,1fr);
  column-gap:10px;
  align-items:start;
}
.cobertura .list li::before{
  margin-top:9px;
}

/* COMPARATIVA: the shared .section-head's airy 11ch-heading split left a
   large empty quadrant before the comparison table that read as "is this
   broken?". Pull the table up a touch on this one section — scoped, so the
   editorial spacing elsewhere is untouched. */
.section-comparativa{padding-top:64px}
.section-comparativa .section-head{margin-bottom:18px}

/* Skip link — WCAG 2.4.1 bypass block. Visually hidden until focused, then
   pinned top-left above everything. Paired with <main id="contenido">. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;padding:12px 18px;border-radius:0 0 10px 0;
  background:#0b0e1f;color:#fff;font-weight:700;font-size:.95rem;text-decoration:none}
.skip-link:focus,.skip-link:focus-visible{left:0;outline:3px solid #6d7cff;outline-offset:2px}