/* ============================================================
   Axis Control Suite — Landing CSS V6 (Premium, WP-style, claro)
   ✅ Más aire + quiebres visuales + alternancia de fondos
   ✅ Mockups/SVG responsive (tamaño controlado) + captions ocultos
   ✅ Sin dark mode (solo claro)
   ✅ Compatible con las clases existentes (no regresiones)
   ============================================================ */

/* ----------------------------
   1) Tokens (Light only)
---------------------------- */
:root{
  --bg:#ffffff;
  --bg2:#f6f8fc;
  --bg3:#eef3ff;

  --surface: rgba(255,255,255,.92);
  --surface2: rgba(255,255,255,.78);
  --surface3: rgba(248,250,255,.92);

  --text:#0b1220;
  --muted:#4b5a70;
  --muted2:#6b7b92;

  --line: rgba(11,18,32,.10);
  --line2: rgba(11,18,32,.14);

  --accent:#2b6cff;
  --accent2:#00b8a9;
  --accent3:#1e40af;
  --accent4:#7c3aed;

  --ok:#16a34a;
  --warn:#f59e0b;
  --bad:#ef4444;

  --r1: 28px;
  --r2: 18px;
  --r3: 14px;

  --shadow: 0 28px 90px rgba(12,18,32,.12);
  --shadow2: 0 16px 54px rgba(12,18,32,.10);
  --shadow3: 0 10px 26px rgba(12,18,32,.08);

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;

  --t: 160ms;
  --t2: 280ms;

  --max: 1320px;

  /* NEW: espaciado maestro */
  --sectionY: 118px;
  --sectionY-md: 84px;
  --gapLg: 34px;
  --gapMd: 18px;
}

*{ box-sizing:border-box }
html,body{ margin:0; }
body{
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1100px 680px at 12% -10%, rgba(43,108,255,.16), transparent 60%),
    radial-gradient(900px 520px at 92% 0%, rgba(0,184,169,.14), transparent 58%),
    radial-gradient(800px 520px at 40% 110%, rgba(124,58,237,.10), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}

a{ color:inherit }
b,strong{ font-weight: 700 }

/* Subtle premium texture (CSS only) */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* Better default typography rhythm */
p{ margin:0; }
h1,h2,h3{ margin:0; }

/* ----------------------------
   2) Layout helpers
---------------------------- */
.container{ max-width: var(--max); margin: 0 auto; padding: 0 18px; }

.skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip:focus{
  left:14px; top:14px; width:auto; height:auto;
  padding:10px 12px;
  background: var(--surface);
  border:1px solid var(--line2);
  border-radius: 12px;
  box-shadow: var(--shadow2);
  z-index:9999;
}

/* Accessible helper */
.srOnly{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* NEW: caption oculto por defecto (no se ve, pero existe para accesibilidad/SEO) */
.figcapHidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* NEW: bloque de medios (SVG / screenshots) controlado */
.mediaFrame{
  border:1px solid rgba(10,18,32,.10);
  border-radius: 26px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.mediaFrame--soft{
  background: rgba(255,255,255,.82);
}
.mediaFrame__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 14px;
  border-bottom:1px solid rgba(10,18,32,.08);
  background: rgba(246,248,252,.78);
}
.mediaFrame__dots{ display:flex; gap:6px; }
.mediaFrame__dots i{ width:10px;height:10px;border-radius:99px;background: rgba(10,18,32,.12); }
.mediaFrame__title{
  font-size: 12px;
  color: rgba(10,18,32,.72);
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mediaFrame__chip{
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(47,107,255,.18);
  background: rgba(47,107,255,.06);
  color: rgba(10,18,32,.70);
  font-weight:650;
}
.mediaFrame__body{
  padding: 14px;
}

/* NEW: SVG sizing (evita “demasiado grande”) */
.mockSvg,
.mediaSvg{
  display:block;
  width:100%;
  height:auto;
  max-width: 1440px;          /* controla el tamaño en desktop */
  margin: 0 auto;            /* centra dentro de contenedor */
}
@media (max-width: 1440px){
  .mockSvg,
  .mediaSvg{ max-width: 100%; }
}

/* Si usas <img src="...svg"> */
.mockImg{
  display:block;
  width:100%;
  height:auto;
  max-width: 1440px;
  margin: 0 auto;
}
@media (max-width: 1440px){
  .mockImg{ max-width:100%; }
}

/* ----------------------------
   3) Topbar / Nav
---------------------------- */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  border-bottom: 1px solid var(--line);
}

.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 18px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  min-width: 220px;
}

.brand__mark{
  position:relative;
  width:38px; height:38px;
  border-radius: 16px;
  border: 1px solid var(--line2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 75%, transparent), transparent);
  box-shadow: var(--shadow3);
  overflow:hidden;
}

.brand__ring{
  position:absolute; inset:-12px;
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
    radial-gradient(circle at 60% 65%, color-mix(in srgb, var(--accent2) 28%, transparent), transparent 60%);
  transform: rotate(12deg);
}
.brand__core{
  position:absolute; inset:10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--line2) 65%, transparent);
  background: color-mix(in srgb, var(--surface2) 75%, transparent);
}

.brand__text strong{ display:block; font-size:13px; letter-spacing:.2px; }
.brand__text span{ display:block; font-size:12px; color: var(--muted); margin-top:2px; }
.brand--mini .brand__mark{ width:32px;height:32px;border-radius:14px; }
.brand--mini .brand__core{ inset:9px;border-radius:10px; }

.nav{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.nav a{
  text-decoration:none;
  color: var(--muted);
  font-size:13px;
  padding:8px 8px;
  border-radius: 10px;
  transition: background var(--t), color var(--t);
}
.nav a:hover{ color: var(--accent); background: rgba(43,108,255,.08); }

.nav__toggle{
  display:none;
  width:44px;height:44px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow3);
}
.nav__toggle span{
  display:block; height:2px;
  background: color-mix(in srgb, var(--text) 55%, transparent);
  margin:6px 12px;
  border-radius:2px;
}

.nav__mobile{ display:none; padding: 10px 0 18px; }
.nav__mobileLinks{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nav__mobile a{
  text-decoration:none;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow3);
}
.nav__mobileRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

@media (max-width: 1040px){
  .nav{ display:none; }
  .nav__toggle{ display:block; }
}

/* ----------------------------
   4) Buttons / Links
---------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:11px 16px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: var(--surface);
  text-decoration:none;
  font-size:13px;
  transition: transform var(--t), box-shadow var(--t), filter var(--t), background var(--t), border-color var(--t);
  white-space:nowrap;
}

.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow3); filter: brightness(1.02); }

.btn--primary{
  color:#fff;
  border-color: rgba(43,108,255,.30);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent3) 62%, rgba(0,184,169,.92) 120%);
  box-shadow: 0 18px 52px rgba(43,108,255,.22);
}

.btn--soft{ background: rgba(255,255,255,.92); }

.btn--ghost{
  background: transparent;
  border-color: rgba(47,107,255,.22);
  color: rgba(10,18,32,.78);
}
.btn--ghost:hover{ border-color: rgba(47,107,255,.35); }

.w100{ width:100% }
.link{
  color: var(--accent);
  text-decoration:none;
  font-weight: 650;
}
.link:hover{ text-decoration: underline; }

/* ----------------------------
   5) Announcement bar
---------------------------- */
.announce{
  background: linear-gradient(90deg, rgba(43,108,255,.10), rgba(0,184,169,.10), rgba(124,58,237,.08));
  border-bottom: 1px solid var(--line);
}
.announce__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 13px;
  color: var(--muted);
}
.announce__left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.announce__pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(43,108,255,.14);
  color: var(--accent3);
  border: 1px solid rgba(43,108,255,.20);
  font-weight: 650;
}
.announce__link{
  color: var(--accent);
  text-decoration:none;
  font-weight: 650;
  padding: 6px 10px;
  border-radius: 12px;
}
.announce__link:hover{ background: rgba(43,108,255,.10); }

/* ----------------------------
   6) Hero (más aire + WP feel)
---------------------------- */

/* Solo aire entre h1 y el texto siguiente */
.pageHero h1{ margin-bottom: 20px; }
.pageHero .lead{ margin-top: 0; }


.hero{ padding: 108px 0 72px; }
.hero__grid{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: var(--gapLg);
  align-items: center;
}
@media (max-width: 1040px){
  .hero{ padding: 78px 0 52px; }
  .hero__grid{ grid-template-columns: 1fr; }
}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  color: var(--muted);
  font-size: 12px;
  box-shadow: var(--shadow3);
}
.pill__dot{
  width:8px;height:8px;border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

.heroTabs{
  display:inline-flex;
  gap:8px;
  margin-top: 18px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.75);
  box-shadow: var(--shadow3);
}
.heroTab{
  border:0;
  cursor:pointer;
  font-size:12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: transparent;
  color: rgba(10,18,32,.70);
}
.heroTab.is-active{
  background: linear-gradient(180deg, var(--accent), #1f55ff);
  color:#fff;
  box-shadow: 0 10px 30px rgba(47,107,255,.20);
}

.hero h1{
  margin: 22px 0 12px;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.02;
  letter-spacing: -0.8px;
}
.lead{
  margin:0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  max-width: 80ch;
}
.micro{
  margin: 14px 0 0;
  color: var(--muted2);
  font-size: 13px;
  line-height: 1.6;
  max-width: 86ch;
}

.ctaRibbon{
  margin-top: 30px;
  padding: 18px 18px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.80);
  box-shadow: var(--shadow2);
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}

/* NEW: separador de aire dentro del hero (si lo necesitas en HTML) */
.heroSpacer{ height: 18px; }

/* Visual stack */
.hero__visual{ position:relative; min-height: 520px; }
@media (max-width: 1040px){ .hero__visual{ min-height: 0; } }

.visual__stack{ position:relative; z-index:1; display:grid; gap: 12px; }

.hero__orb{
  position:absolute;
  width: 300px; height: 300px;
  border-radius: 999px;
  filter: blur(2px);
  opacity:.9;
  pointer-events:none;
}
.hero__orb--a{
  top:-50px; right:-50px;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent2) 30%, transparent), transparent 62%);
}
.hero__orb--b{
  bottom:-50px; left:-60px;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%);
}
.hero__gridlines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(closest-side, rgba(0,0,0,.55), transparent 80%);
  opacity:.25;
  pointer-events:none;
}

/* Glass card mock */
.glassCard{
  border: 1px solid var(--line2);
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.glassCard__top{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}
.dots{ display:flex; gap: 6px; }
.dots i{ width:10px;height:10px;border-radius:99px;background: color-mix(in srgb, var(--text) 12%, transparent); }
.title{ font-size: 12px; color: color-mix(in srgb, var(--muted) 95%, transparent); }
.chip{
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ok) 25%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  color: color-mix(in srgb, var(--ok) 55%, var(--text));
}

.mock{ display:grid; grid-template-columns: 170px 1fr; min-height: 380px; }
@media (max-width: 1040px){ .mock{ grid-template-columns: 150px 1fr; } }

.mock__sidebar{
  padding: 14px;
  background: color-mix(in srgb, var(--bg2) 70%, transparent);
  border-right: 1px solid var(--line);
}
.mock__sItem{
  font-size: 12px;
  color: color-mix(in srgb, var(--muted) 95%, transparent);
  padding: 10px 10px;
  border-radius: 12px;
  margin-top: 8px;
  border:1px solid transparent;
}
.mock__sItem.active{
  color: color-mix(in srgb, var(--text) 90%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}
.mock__main{ padding: 14px; }
.mock__kpis{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 1040px){ .mock__kpis{ grid-template-columns: 1fr; } }
.kpi{
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border-radius: var(--r2);
  padding: 12px;
  box-shadow: var(--shadow3);
}
.kpi b{ display:block; font-size: 12px; color: var(--muted); }
.kpi span{ display:block; font-family: var(--mono); font-size: 18px; margin-top: 8px; }

.mock__table{
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  overflow:hidden;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: var(--shadow3);
}
.row{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr .7fr 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}
.row.head{
  border-top:none;
  background: color-mix(in srgb, var(--bg2) 70%, transparent);
  font-weight: 650;
  color: color-mix(in srgb, var(--muted) 96%, transparent);
}
.st{
  font-style: normal;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface3) 70%, transparent);
}
.st--ok{ border-color: color-mix(in srgb, var(--ok) 28%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); color: color-mix(in srgb, var(--ok) 60%, var(--text)); }
.st--warn{ border-color: color-mix(in srgb, var(--warn) 28%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); color: color-mix(in srgb, var(--warn) 60%, var(--text)); }
.st--bad{ border-color: color-mix(in srgb, var(--bad) 28%, transparent); background: color-mix(in srgb, var(--bad) 10%, transparent); color: color-mix(in srgb, var(--bad) 60%, var(--text)); }
.mock__note{ margin-top: 10px; color: var(--muted2); font-size: 12px; }

/* ----------------------------
   7) Dividers (WP style)
---------------------------- */
.divider{ width:100%; line-height:0; }
.divider svg{ width:100%; height: 120px; display:block; }
.divider path{ fill: rgba(248,250,255,.95); }
.divider--tilt svg{ height: 140px; }
.divider--tilt path{ fill: rgba(248,250,255,.92); }
.divider--wave2 path{ fill: rgba(255,255,255,.72); }

/* ----------------------------
   8) Sections (más aire + alternancia)
---------------------------- */
.section{ padding: var(--sectionY) 0; }
@media (max-width: 1040px){ .section{ padding: var(--sectionY-md) 0; } }

.section--soft{
  background: linear-gradient(180deg, rgba(248,250,255,.92), rgba(246,248,252,.72));
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.section--contrast{
  background:
    radial-gradient(900px 420px at 12% 10%, rgba(43,108,255,.10), transparent 55%),
    radial-gradient(760px 360px at 92% 30%, rgba(0,184,169,.08), transparent 55%),
    rgba(255,255,255,.74);
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

/* NEW: fondo “institucional suave” (no oscuro, pero más serio) */
.section--institutional{
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(30,64,175,.10), transparent 55%),
    linear-gradient(180deg, rgba(238,243,255,.92), rgba(246,248,252,.60));
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.section__head{ max-width: 92ch; }
.section__head h2{
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -0.35px;
  line-height: 1.12;
}
.section__head p{
  margin-top: 14px;
  color: var(--muted);
  line-height: 1.75;
}

/* ----------------------------
   9) Cards / Grids
---------------------------- */
.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gapMd);
  margin-top: 40px;
}
@media (max-width: 1040px){ .grid3{ grid-template-columns: 1fr; } }

.card{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r1);
  padding: 18px;
  box-shadow: var(--shadow2);
}
.card--soft{ background: rgba(255,255,255,.82); }
.card--accent{
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  background:
    radial-gradient(80% 140% at 10% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%),
    var(--surface);
}

.card__icon{
  width: 46px; height: 46px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface2) 85%, transparent);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow3);
  margin-bottom: 12px;
}
.card__icon svg{ width: 22px; height: 22px; fill: color-mix(in srgb, var(--text) 78%, transparent); }

.card h3{ margin: 0 0 8px; font-size: 16px; line-height: 1.2; }
.muted{ color: var(--muted); }
.small{ font-size:12px; line-height:1.55; }
.list{ margin: 12px 0 0; padding-left: 18px; color: var(--muted); }
.list li{ margin: 8px 0; }

.callout{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: color-mix(in srgb, var(--text) 86%, transparent);
  font-size: 12px;
  line-height: 1.65;
}

/* Steps */
.steps{
  margin-top: 38px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1040px){ .steps{ grid-template-columns: 1fr; } }
.step{
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
  box-shadow: var(--shadow3);
  padding: 14px;
}
.steps--wp .step{ background: rgba(255,255,255,.86); }
.step .num{
  display:inline-flex;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted2);
}
.step strong{ display:block; margin-top: 10px; }
.step span{ display:block; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* ----------------------------
   10) Valor (escenarios)
---------------------------- */
.scenarioGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gapMd);
  margin-top: 38px;
}
@media (max-width: 1040px){ .scenarioGrid{ grid-template-columns: 1fr; } }
.scenario{
  border:1px solid var(--line);
  border-radius: var(--r1);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  padding: 18px;
}
.scenario__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.scenario__tag{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(47,107,255,.18);
  background: rgba(47,107,255,.06);
  color: rgba(10,18,32,.72);
  font-weight: 650;
}
.scenario__icon{ font-size: 18px; }
.scenario h3{ margin: 10px 0 8px; font-size: 16px; }
.scenario__foot{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(10,18,32,.08);
  color: rgba(10,18,32,.72);
  font-size: 12px;
}

.bullets{
  margin-top: 30px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 720px){ .bullets{ grid-template-columns: 1fr; } }
.bullet{
  border:1px solid rgba(10,18,32,.10);
  background: rgba(255,255,255,.78);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow3);
  color: rgba(10,18,32,.75);
  font-size: 13px;
  line-height: 1.55;
}

/* ----------------------------
   11) Storyboard (Cómo funciona)
---------------------------- */
.storyboard{
  margin-top: 40px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1040px){ .storyboard{ grid-template-columns: 1fr; } }

.shot{
  border:1px solid rgba(10,18,32,.10);
  border-radius: 22px;
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.shot__bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 12px 14px;
  border-bottom:1px solid rgba(10,18,32,.08);
  background: rgba(246,248,252,.78);
}
.shot__dot{
  width:10px;height:10px;border-radius:99px;
  background: rgba(10,18,32,.12);
}
.shot__title{
  margin-left:6px;
  font-size: 12px;
  color: rgba(10,18,32,.72);
  flex:1;
}
.shot__chip{
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(47,107,255,.18);
  background: rgba(47,107,255,.06);
  color: rgba(10,18,32,.70);
  font-weight:650;
}
.shot__body{ padding: 14px; color: rgba(10,18,32,.76); font-size: 12px; line-height: 1.65; }
.shot__cap{
  padding: 12px 14px;
  border-top:1px solid rgba(10,18,32,.08);
  background: rgba(255,255,255,.78);
  color: rgba(10,18,32,.78);
  font-size: 12px;
}
.shot__line{ margin: 8px 0; }
.pillMini{
  display:inline-flex;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(10,18,32,.10);
  background: rgba(10,18,32,.03);
  color: rgba(10,18,32,.72);
  margin-left: 6px;
}
.kv{
  display:flex; justify-content:space-between; gap:10px;
  padding: 8px 10px;
  border:1px solid rgba(10,18,32,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.84);
  margin-top: 10px;
}
.kv span{ color: rgba(10,18,32,.62); }
.kv b{ font-family: var(--mono); font-size: 12px; }
.rule{
  border:1px solid rgba(10,18,32,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.84);
  padding: 10px 12px;
  margin-top: 10px;
}
.time{
  border-left: 2px solid rgba(47,107,255,.35);
  padding-left: 10px;
  margin-top: 10px;
}
.noteWide{
  margin-top: 30px;
  border:1px solid rgba(10,18,32,.10);
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow3);
  padding: 16px;
  color: rgba(10,18,32,.72);
  font-size: 13px;
  line-height: 1.7;
}

/* ----------------------------
   12) Arquitectura diagram
---------------------------- */
.archWrap{ margin-top: 40px; }
.arch{
  border:1px solid rgba(10,18,32,.10);
  border-radius: 28px;
  background: rgba(255,255,255,.84);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.arch__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 18px;
  border-bottom: 1px solid rgba(10,18,32,.08);
}
.arch__row--channels{ background: rgba(246,248,252,.78); }
.arch__row--systems{ background: rgba(246,248,252,.70); border-bottom:0; }
.arch__label{
  font-weight: 750;
  font-size: 12px;
  color: rgba(10,18,32,.70);
  min-width: 90px;
}
.arch__chips{ display:flex; gap: 10px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width: 1040px){ .arch__row{ flex-direction:column; align-items:flex-start; } .arch__chips{ justify-content:flex-start; } }

.chip3{
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10,18,32,.10);
  background: rgba(255,255,255,.86);
  color: rgba(10,18,32,.70);
}

.arch__core{
  padding: 22px 18px;
  display:grid;
  grid-template-columns: 1fr 240px;
  gap: 16px;
  border-bottom: 1px solid rgba(10,18,32,.08);
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(43,108,255,.10), transparent 55%),
    rgba(255,255,255,.80);
}
@media (max-width: 1040px){ .arch__core{ grid-template-columns: 1fr; } }

.coreCard{
  border:1px solid rgba(10,18,32,.10);
  border-radius: 24px;
  background: rgba(255,255,255,.90);
  box-shadow: var(--shadow3);
  padding: 18px;
}
.coreCard__top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.coreCard__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 720px){ .coreCard__grid{ grid-template-columns: 1fr; } }

.coreTile{
  border:1px solid rgba(10,18,32,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  padding: 14px;
}
.coreTile b{ display:block; font-size: 13px; }
.coreTile span{ display:block; margin-top: 6px; color: rgba(10,18,32,.62); font-size: 12px; }

.assistCard{
  border:1px dashed rgba(47,107,255,.28);
  border-radius: 24px;
  background: rgba(47,107,255,.06);
  padding: 18px;
  box-shadow: var(--shadow3);
}
.assistCard b{ display:block; }
.assistCard span{ display:block; margin-top: 6px; }

.arch__row--modules{ background: rgba(255,255,255,.86); }
.arch__mods{
  width:100%;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1040px){ .arch__mods{ grid-template-columns: 1fr; } }

.module{
  border: 1px solid rgba(10,18,32,.10);
  background: rgba(255,255,255,.88);
  border-radius: var(--r1);
  padding: 14px;
  box-shadow: var(--shadow3);
}
.tag{
  display:inline-flex;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(47,107,255,.18);
  background: rgba(47,107,255,.06);
  color: rgba(10,18,32,.72);
  font-weight: 650;
}
.module h3{ margin: 10px 0 6px; font-size: 14px; }
.module p{ margin: 0; font-size: 12px; line-height: 1.65; color: var(--muted); }

/* ----------------------------
   13) Integraciones
---------------------------- */
.integrations3{
  margin-top: 40px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gapMd);
}
@media (max-width: 1040px){ .integrations3{ grid-template-columns: 1fr; } }

.pillRow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.pill2{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(10,18,32,.10);
  background: rgba(10,18,32,.03);
  color: rgba(10,18,32,.72);
}
.logoGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
@media (max-width:720px){ .logoGrid{ grid-template-columns:repeat(2,1fr); } }
.logoTile{
  text-align:center;
  font-size:12px;
  padding:12px 10px;
  border-radius:14px;
  border:1px solid rgba(10,18,32,.10);
  background: rgba(255,255,255,.86);
  color: rgba(10,18,32,.70);
}
.miniCallout{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(47,107,255,.18);
  background: rgba(47,107,255,.06);
  color: rgba(10,18,32,.76);
  font-size: 12px;
  line-height: 1.6;
}

/* NEW: layout “texto + mockup” alternado (si lo estás usando) */
.altRow{
  margin-top: 42px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--gapLg);
  align-items:center;
}
.altRow--rev{ grid-template-columns: .95fr 1.05fr; }
@media (max-width: 1040px){
  .altRow,
  .altRow--rev{ grid-template-columns: 1fr; }
}
.altCopy p{ margin-top: 14px; color: var(--muted); line-height: 1.75; }
.altCopy .bullets{ margin-top: 18px; }
.altMedia{ display:flex; align-items:center; justify-content:center; }
.altMedia .mockImg,
.altMedia .mediaSvg{ max-width: 520px; }
@media (max-width: 1040px){
  .altMedia .mockImg,
  .altMedia .mediaSvg{ max-width: 100%; }
}

/* ----------------------------
   14) Quote
---------------------------- */
.quote{
  margin-top: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r1);
  background:
    radial-gradient(90% 140% at 10% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 65%),
    rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  padding: 18px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.quote__mark{
  font-size: 40px;
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 35%, transparent);
  margin-top: -6px;
}
.quote__text{ color: var(--muted); line-height: 1.7; }
.quote__text strong{ color: var(--text); }

/* ----------------------------
   15) Pricing + compare
---------------------------- */
.pricingTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 30px;
}
.toggle{
  display:inline-flex;
  gap:6px;
  padding:6px;
  border-radius:999px;
  border:1px solid rgba(10,18,32,.10);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow2);
}
.toggle__btn{
  border:0;
  cursor:pointer;
  font-size:12px;
  padding:8px 12px;
  border-radius:999px;
  background: transparent;
  color: rgba(10,18,32,.65);
}
.toggle__btn.is-active{
  background: linear-gradient(180deg, var(--accent), #1f55ff);
  color:#fff;
  box-shadow: 0 10px 30px rgba(47,107,255,.20);
}
.save{
  margin-left:6px;
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
}
.pricingNote{ font-size:12px; max-width:56ch; color: var(--muted); line-height:1.6; }

.pricing{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gapMd);
  margin-top: 26px;
}
@media (max-width: 1040px){ .pricing{ grid-template-columns: 1fr; } }

.price{
  border: 1px solid rgba(10,18,32,.10);
  background: rgba(255,255,255,.90);
  border-radius: 26px;
  padding: 18px;
  box-shadow: var(--shadow2);
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.price--featured{
  border-color: rgba(47,107,255,.22);
  box-shadow: 0 30px 82px rgba(47,107,255,.16);
  transform: translateY(-6px);
}
@media (max-width: 1040px){
  .price--featured{ transform:none; }
}
.price__top h3{ margin: 10px 0 4px; font-size: 16px; }
.badge{
  display:inline-flex;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10,18,32,.10);
  background: rgba(10,18,32,.03);
  color: rgba(10,18,32,.70);
}
.badge--strong{
  border-color: rgba(47,107,255,.22);
  background: rgba(47,107,255,.06);
  color: rgba(10,18,32,.78);
}
.amt{ font-family: var(--mono); color: var(--muted); font-size: 13px; }

.compareWrap{
  margin-top: 34px;
  border:1px solid rgba(10,18,32,.10);
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.compareHead{
  padding:16px 18px;
  border-bottom:1px solid rgba(10,18,32,.08);
  background: rgba(242,245,251,.74);
}
.compareHead h3{ margin:0; }
.compareHead p{ margin: 10px 0 0; color: var(--muted); line-height: 1.6; }

.compareScroll{ overflow:auto; }
.compare{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width: 820px;
}
.compare th, .compare td{
  padding:12px 14px;
  border-bottom:1px solid rgba(10,18,32,.08);
  font-size:12px;
  color: rgba(10,18,32,.72);
  text-align:left;
  background: rgba(255,255,255,.90);
}
.compare thead th{
  position:sticky; top:0; z-index:2;
  background: rgba(255,255,255,.96);
  font-weight: 750;
  color: rgba(10,18,32,.62);
}
.compare .stickyCol{
  position:sticky; left:0; z-index:3;
  background: rgba(255,255,255,.96);
  font-weight: 650;
}
.compare .hi{ background: rgba(47,107,255,.06) !important; }
.compare tbody tr:last-child td{ border-bottom:0; }

.addons{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  padding: 16px 18px 18px;
  border-top:1px solid rgba(10,18,32,.08);
  background: rgba(255,255,255,.78);
}
@media (max-width: 1040px){ .addons{ grid-template-columns: 1fr; } }
.addon{
  border:1px solid rgba(10,18,32,.10);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,.88);
}
.addon b{ display:block; }
.addon span{ display:block; margin-top: 8px; font-size: 12px; color: var(--muted); line-height:1.6; }

/* ----------------------------
   16) Split (Contact + FAQ)
---------------------------- */
.split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--gapLg);
  align-items:start;
}
@media (max-width: 1040px){ .split{ grid-template-columns: 1fr; } }

.form{
  border: 1px solid rgba(10,18,32,.10);
  border-radius: var(--r1);
  background: rgba(255,255,255,.90);
  padding: 18px;
  box-shadow: var(--shadow2);
}
.form__row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px){ .form__row{ grid-template-columns: 1fr; } }

.field label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 8px;
}
.field input, .field textarea{
  width:100%;
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid rgba(10,18,32,.12);
  background: rgba(255,255,255,.86);
  color: var(--text);
  outline: none;
  transition: box-shadow var(--t), border-color var(--t), filter var(--t);
  font-size: 13px;
}
.field input:focus, .field textarea:focus{
  border-color: rgba(47,107,255,.34);
  box-shadow: 0 0 0 4px rgba(47,107,255,.12);
  filter: brightness(1.01);
}

.form__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 14px; }

.ok, .err{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  font-size: 12px;
}
.ok{
  display:none;
  border: 1px solid rgba(22,163,74,.25);
  background: rgba(22,163,74,.10);
  color: rgba(10,18,32,.78);
}
.err{
  border: 1px solid rgba(239,68,68,.25);
  background: rgba(239,68,68,.10);
  color: rgba(10,18,32,.78);
}
.fineprint{ margin: 12px 0 0; color: var(--muted2); font-size: 12px; line-height: 1.65; }
.mono{ font-family: var(--mono); }

.variantHint{
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(10,18,32,.10);
  background: rgba(255,255,255,.78);
  box-shadow: var(--shadow3);
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

/* FAQ */
.faqGroup{ margin-top: 24px; }
.faqGroup__title{
  margin: 0 0 10px;
  font-size: 13px;
  color: rgba(10,18,32,.72);
  letter-spacing: .2px;
  text-transform: uppercase;
}
.faq{
  border: 1px solid rgba(10,18,32,.10);
  border-radius: var(--r1);
  background: rgba(255,255,255,.90);
  padding: 12px 14px;
  box-shadow: var(--shadow2);
  margin-top: 12px;
}
.faq summary{ cursor:pointer; font-weight: 750; }
.faq summary:hover{ color: rgba(47,107,255,.95); }
.faq summary:focus{
  outline: 2px solid rgba(47,107,255,.26);
  outline-offset: 4px;
  border-radius: 12px;
}
.faq p{ margin-top: 10px; color: var(--muted); line-height: 1.75; }

.ctaCard{
  margin-top: 24px;
  border: 1px solid rgba(10,18,32,.10);
  border-radius: var(--r1);
  background:
    radial-gradient(90% 140% at 10% 0%, rgba(47,107,255,.10), transparent 65%),
    rgba(255,255,255,.88);
  box-shadow: var(--shadow2);
  padding: 18px;
}
.ctaCard h3{ margin:0 0 10px; font-size: 16px; }
.ctaCard__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }

/* ----------------------------
   17) Seals (seguridad)
---------------------------- */
.seals{
  margin-top: 34px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1040px){ .seals{ grid-template-columns: 1fr; } }
.seal{
  border:1px solid rgba(10,18,32,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.84);
  box-shadow: var(--shadow3);
  padding: 14px;
}
.seal b{ display:block; }
.seal span{ display:block; margin-top: 6px; color: rgba(10,18,32,.62); font-size: 12px; line-height:1.6; }

/* ----------------------------
   18) Footer
---------------------------- */
.footer{
  padding: 34px 0 50px;
  border-top: 1px solid rgba(10,18,32,.08);
  background: rgba(248,250,255,.74);
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.footer__left{ display:flex; align-items:center; gap:12px; }
.footer__right{ display:flex; gap:10px; flex-wrap:wrap; }

.footerLink{
  color: var(--muted);
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.footerLink:hover{
  color: var(--accent);
  background: rgba(43,108,255,.08);
  border-color: rgba(43,108,255,.14);
}

/* ----------------------------
   19) Motion polish (respects reduced motion)
---------------------------- */
@media (prefers-reduced-motion: no-preference){
  .card, .module, .price, .glassCard, .trust__item, .scenario, .shot, .seal, .mediaFrame{
    transition: transform var(--t2), box-shadow var(--t2), border-color var(--t2), filter var(--t2);
  }
  .card:hover, .module:hover, .price:hover, .trust__item:hover,
  .scenario:hover, .shot:hover, .seal:hover, .mediaFrame:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: rgba(43,108,255,.18);
  }
}

/* ----------------------------
   20) Safety: images default
---------------------------- */
img{ max-width:100%; height:auto; display:block; }
figure{ margin:0; }




/* ============================================================
   Axis — Login (auth) styles
   (Pegarlo al final de landing.css)
   ============================================================ */

.authBody{
  min-height: 100vh;
}

.authMain{
  padding: 44px 0 78px;
}

.authWrap{
  padding-top: 6px;
}

.authHead{
  max-width: 82ch;
  padding: 26px 0 22px;
}

.authTitle{
  margin-top: 18px;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.55px;
}

.authLead{
  margin-top: 14px;
  color: var(--muted);
  line-height: 1.75;
  font-size: 14px;
}

.authCard{
  margin-top: 10px;
}

.authGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--gapLg);
  align-items:start;
}
@media (max-width: 1040px){
  .authGrid{ grid-template-columns: 1fr; }
}

.authCol{ min-width: 0; }

.authForm{
  padding: 22px;
}

.authActions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 16px;
}

.authMsg{
  margin-top: 10px;
  color: var(--muted2);
  font-size: 12px;
  min-height: 18px;
}

.authErr, .authOk{
  display:none;
}

.authMeta{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 1040px){
  .authMeta{ grid-template-columns: 1fr; }
}

.authMeta__item{
  border:1px solid rgba(10,18,32,.10);
  background: rgba(255,255,255,.82);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow3);
}
.authMeta__item b{ display:block; font-size: 12px; }
.authMeta__item span{
  display:block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.authDev{
  border:1px solid rgba(47,107,255,.16);
  background:
    radial-gradient(90% 120% at 10% 0%, rgba(47,107,255,.10), transparent 65%),
    rgba(255,255,255,.86);
  border-radius: 26px;
  box-shadow: var(--shadow2);
  padding: 18px;
}

.authDev__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.authDev__top b{
  font-size: 14px;
}

.authHelp{
  margin-top: 14px;
  border:1px solid rgba(10,18,32,.10);
  background: rgba(255,255,255,.82);
  border-radius: 22px;
  box-shadow: var(--shadow3);
  padding: 16px;
}
.authHelp b{ display:block; font-size: 13px; }
.authHelp p{ margin: 0; }

.authFoot{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(10,18,32,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.authFoot__right{ display:flex; gap:10px; flex-wrap:wrap; }


/* =========================
   Planes page hero (pageHero)
   ========================= */

.pageHero{
  padding: clamp(72px, 8vw, 112px) 0 clamp(34px, 4vw, 56px);
}

.pageHero__inner{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--gapLg);
  align-items: start;
}

.pageHero__copy{
  display:flex;
  flex-direction:column;
  gap: 18px; /* aire real entre h1, lead, micro */
  max-width: 74ch;
}

.pageHero__copy h1{
  margin: 8px 0 0;
  line-height: 1.04;
}

.pageHero__copy .lead{ margin: 0; }
.pageHero__copy .micro{ margin: 0; }

.pageHero__side{ display:flex; flex-direction:column; }

@media (max-width: 1040px){
  .pageHero__inner{ grid-template-columns: 1fr; }
  .pageHero{ padding: 64px 0 34px; }
}


/* =========================
   Dolor → Solución (planes)
   ========================= */
.painGrid{
  margin-top: 48px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gapLg);
  align-items: start;
}
@media (max-width: 1040px){
  .painGrid{ grid-template-columns: 1fr; }
}

.painCol{
  border: 1px solid rgba(10,18,32,.10);
  border-radius: var(--r1);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  padding: 18px;
}

.painCol--solution{
  border-color: rgba(47,107,255,.16);
  background:
    radial-gradient(90% 140% at 10% 0%, rgba(47,107,255,.10), transparent 60%),
    rgba(255,255,255,.88);
}

.painTitle{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(10,18,32,.08);
  margin-bottom: 14px;
}
.painPill{
  display:inline-flex;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10,18,32,.10);
  background: rgba(10,18,32,.03);
  color: rgba(10,18,32,.70);
  font-weight: 750;
}
.painPill--good{
  border-color: rgba(47,107,255,.20);
  background: rgba(47,107,255,.06);
}

.painCard{
  border: 1px solid rgba(10,18,32,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow3);
  padding: 14px;
  margin-top: 12px;
}
.painCard b{ display:block; }
.painCard p{ margin-top: 8px; }

.solCard{
  display:grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  border: 1px solid rgba(10,18,32,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.90);
  box-shadow: var(--shadow3);
  padding: 14px;
  margin-top: 12px;
}
.solIcon{
  width: 46px; height: 46px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(47,107,255,.18);
  background: rgba(47,107,255,.06);
  color: rgba(10,18,32,.72);
  font-family: var(--mono);
  font-weight: 750;
}
.solCard b{ display:block; }
.solCard p{ margin-top: 8px; }

/* =========================
   Antes / Después (planes)
   ========================= */
.beforeAfter{
  margin-top: 33px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gapLg);
}
@media (max-width: 1040px){
  .beforeAfter{ grid-template-columns: 1fr; }
}

.baCard{
  border: 1px solid rgba(10,18,32,.10);
  border-radius: var(--r1);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  padding: 18px;
  position:relative;
  overflow:hidden;
}

.baCard--after{
  border-color: rgba(47,107,255,.18);
  background:
    radial-gradient(90% 140% at 10% 0%, rgba(47,107,255,.10), transparent 62%),
    rgba(255,255,255,.90);
}

.baTop{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(10,18,32,.08);
  margin-bottom: 12px;
}

.baPill{
  display:inline-flex;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10,18,32,.10);
  background: rgba(10,18,32,.03);
  color: rgba(10,18,32,.70);
  font-weight: 800;
  letter-spacing: .3px;
}

.baPill--after{
  border-color: rgba(47,107,255,.22);
  background: rgba(47,107,255,.06);
}

.baList{
  margin: 0;
  padding-left: 18px;
  color: rgba(11,18,32,.72);
  line-height: 1.7;
}
.baList li{
  margin: 10px 0;
}


/* --- Fix visual: Mini FAQ + Contacto (PRO) --- */
.split{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items:start;
}
.split--tight{ gap: 18px; }

@media (max-width: 980px){
  .split{ grid-template-columns: 1fr; }
}

#mini-faq .ctaCard p{ margin-top: 10px; line-height: 1.75; }
#mini-faq .miniCallout{ margin-top: 14px; }

.contactSplit{ margin-top: 8px; }
.contactAside{
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.mediaFigure{
  margin: 0;
  padding: 0;
}
.contactSvg{
  width: 100%;
  max-width: 560px;   /* controla tamaño en desktop */
  margin-left: auto;  /* lo pega prolijo a la derecha */
  display:block;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
@media (max-width: 980px){
  .contactSvg{
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Evita “quiebre feo” por márgenes raros */
#mini-faq.section,
#contacto.section{
  scroll-margin-top: 90px;
}
#contacto .section__head p{ margin-top: 12px; }


/* ============================================================
   PRO polish — Cards grid3 (tipografía + jerarquía + elegancia)
   (No rompe otras secciones)
   ============================================================ */

.grid3{ align-items: stretch; }
.grid3 .card{
  padding: 20px;
  border-radius: 28px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

/* Icono más “premium” */
.grid3 .card__icon{
  width: 50px;
  height: 50px;
  border-radius: 18px;
  margin-bottom: 2px;
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(43,108,255,.10), transparent 55%),
    rgba(255,255,255,.86);
  border: 1px solid rgba(10,18,32,.10);
  box-shadow: var(--shadow3);
}
.grid3 .card__icon svg{
  width: 22px;
  height: 22px;
  fill: rgba(10,18,32,.76);
}

/* Título: más jerarquía y menos “apretado” */
.grid3 .card h3{
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.15px;
  font-weight: 780;
}

/* Descripción: mejor legibilidad */
.grid3 .card p.muted{
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 46ch;
}

/* Lista: más limpia, compacta, pro */
.grid3 .card .list{
  margin: 8px 0 0;
  padding-left: 0;
  list-style: none;
  display:grid;
  gap: 8px;
}
.grid3 .card .list li{
  position: relative;
  padding-left: 18px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.grid3 .card .list li::before{
  content:"";
  position:absolute;
  left:0;
  top: .58em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(43,108,255,.35);
  box-shadow: 0 0 0 4px rgba(43,108,255,.10);
}

/* Callout dentro de card: más sobrio */
.grid3 .card .callout{
  margin-top: auto;          /* empuja al fondo, alinea alturas */
  padding: 12px 14px;
  border-radius: 18px;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(10,18,32,.78);
  border: 1px solid rgba(47,107,255,.18);
  background: rgba(47,107,255,.06);
}

/* Card destacada (accent): sutil y elegante, sin “gritar” */
.grid3 .card--accent{
  border-color: rgba(47,107,255,.22);
  background:
    radial-gradient(90% 140% at 10% 0%, rgba(47,107,255,.14), transparent 65%),
    rgba(255,255,255,.92);
}
.grid3 .card--accent .card__icon{
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(47,107,255,.16), transparent 60%),
    rgba(255,255,255,.88);
  border-color: rgba(47,107,255,.18);
}
.grid3 .card--accent .callout{
  border-color: rgba(47,107,255,.22);
  background: rgba(47,107,255,.08);
}


/* FAQ en 2 columnas (pro, responsive) */
.faqWrap{ margin-top: 10px; }
.faqGrid2{
  margin-top: 34px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 1040px){
  .faqGrid2{ grid-template-columns: 1fr; }
}

/* Evita quiebres feos dentro de cada grupo */
.faqGroup{ margin-top: 0; }
.faqGroup + .faqGroup{ margin-top: 18px; }

/* Split contacto más coherente */
.contactSplit{ margin-top: 34px; }


/* =========================
   VALOR (PRO+) — premium rhythm
========================= */

.valueKpis{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 1040px){
  .valueKpis{ grid-template-columns: 1fr; }
}
.kpiMini{
  border:1px solid rgba(10,18,32,.10);
  background: rgba(255,255,255,.78);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: var(--shadow3);
}
.kpiMini b{
  display:block;
  font-size: 13px;
  letter-spacing: .1px;
}
.kpiMini span{
  display:block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.scenarioGrid--pro{ margin-top: 34px; }

.scenario--pro h3{
  margin-top: 10px;
  font-size: 16px;
  letter-spacing: -0.2px;
}
.scenario--pro p{ line-height: 1.7; }

.impactLine{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(10,18,32,.08);
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.impactPill{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(47,107,255,.18);
  background: rgba(47,107,255,.06);
  color: rgba(10,18,32,.74);
  font-weight: 750;
}

.valueBullets{
  margin-top: 28px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 720px){
  .valueBullets{ grid-template-columns: 1fr; }
}
.valueBullets .bullet{
  border:1px solid rgba(10,18,32,.10);
  background: rgba(255,255,255,.78);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow3);
  font-size: 13px;
  line-height: 1.6;
}
.valueBullets .bullet b{
  font-weight: 750;
  color: rgba(10,18,32,.92);
}

.valueCta{
  margin-top: 26px;
  border:1px solid rgba(10,18,32,.10);
  background: rgba(255,255,255,.84);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--shadow2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.valueCta__copy{
  color: rgba(10,18,32,.78);
  line-height: 1.7;
  max-width: 70ch;
}
.valueCta__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* =========================
   FOOTER PRO+ (Gobernante/Sabio)
========================= */

.footer--pro{
  position: relative;
  padding: 46px 0 22px;
  background: linear-gradient(180deg,
    rgba(10,18,32,.02),
    rgba(10,18,32,.04)
  );
  border-top: 1px solid rgba(10,18,32,.10);
}

.footer__topline{
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(47,107,255,.25),
    transparent
  );
  opacity: .9;
  margin-bottom: 22px;
}

.footer__grid{
  display: grid;
  grid-template-columns: 1.25fr .85fr .85fr 1.05fr;
  gap: 22px;
  align-items: start;
}

@media (max-width: 980px){
  .footer__grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.footerBrand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.footer__tagline{
  margin: 12px 0 12px;
  max-width: 60ch;
  line-height: 1.75;
  color: rgba(10,18,32,.80);
}

.footerBadges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}

.fBadge{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(10,18,32,.10);
  background: rgba(255,255,255,.75);
  color: rgba(10,18,32,.72);
  letter-spacing: .1px;
}

.footer__meta{
  margin-top: 10px;
  font-size: 12px;
}

.footer__title{
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 12px;
  margin-bottom: 10px;
  color: rgba(10,18,32,.85);
}

.footer__navCol{
  display: grid;
  gap: 8px;
}

.footerLink{
  text-decoration: none;
  color: rgba(10,18,32,.72);
  font-size: 13px;
  line-height: 1.4;
  padding: 6px 8px;
  border-radius: 10px;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}

.footerLink:hover{
  background: rgba(47,107,255,.06);
  color: rgba(10,18,32,.92);
  transform: translateY(-1px);
}

.footer__ctaCol{ align-self: stretch; }

.footerCtaCard{
  border: 1px solid rgba(10,18,32,.10);
  background: rgba(255,255,255,.82);
  border-radius: 22px;
  padding: 14px;
  box-shadow: var(--shadow3);
}

.footerCtaCard__top{
  display: grid;
  gap: 4px;
}
.footerCtaCard__top b{
  font-size: 14px;
  letter-spacing: -0.1px;
  color: rgba(10,18,32,.92);
}

.footerMiniList{
  margin: 12px 0 12px;
  padding-left: 16px;
  color: rgba(10,18,32,.74);
  line-height: 1.7;
  font-size: 13px;
}
.footerMiniList li{ margin: 4px 0; }

.footerCtaCard__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.footer__bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(10,18,32,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.footerFine{
  color: rgba(10,18,32,.70);
  text-decoration: none;
}
.footerFine:hover{ color: rgba(10,18,32,.92); }

.dotSep{ opacity: .55; margin: 0 6px; }

.backTop{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  text-decoration: none;
  color: rgba(10,18,32,.75);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(10,18,32,.10);
  background: rgba(255,255,255,.72);
  transition: transform .12s ease, background .12s ease;
}
.backTop:hover{
  background: rgba(47,107,255,.06);
  transform: translateY(-1px);
}

/* =========================
   FOOTER PRO+ — REFINADO
========================= */

.footer--pro{
  padding: 34px 0 18px;              /* ↓ altura total */
}

.footer__topline{
  margin-bottom: 16px;               /* ↓ separación */
  opacity: .6;
}

.footer__grid{
  gap: 18px;                          /* ↓ espacio entre columnas */
}

/* -------- Marca -------- */
.footer__tagline{
  margin: 8px 0 10px;                /* ↓ vertical */
  font-size: 13px;                   /* ↓ tamaño */
  line-height: 1.65;
  max-width: 56ch;
}

.footerBadges{
  margin: 6px 0 8px;
  gap: 6px;
}

.fBadge{
  font-size: 10.5px;                 /* ↓ badges */
  padding: 4px 8px;
}

/* -------- Navegación -------- */
.footer__title{
  font-size: 11px;                   /* ↓ títulos */
  margin-bottom: 8px;
  letter-spacing: .25px;
}

.footerLink{
  font-size: 12.5px;                 /* ↓ links */
  padding: 4px 6px;
}

/* -------- CTA refinado -------- */
.footerCtaCard{
  padding: 12px;                     /* ↓ card */
  border-radius: 18px;
  box-shadow: var(--shadow3);
}

.footerCtaCard__top b{
  font-size: 13px;                   /* ↓ titular */
}

.footerCtaCard__top span{
  font-size: 12px;
}

.footerMiniList{
  font-size: 12px;                   /* ↓ lista */
  margin: 10px 0;
}

.footerMiniList li{
  margin: 3px 0;
}

/* Botones más discretos */
.footerCtaCard__actions .btn{
  padding: 9px 12px;
  font-size: 12.5px;
}

/* -------- Bottom bar -------- */
.footer__bottom{
  margin-top: 14px;                  /* ↓ separación */
  padding-top: 10px;
}

.footer__legal{
  font-size: 12px;
}

.backTop{
  padding: 6px 8px;                  /* ↓ botón */
  font-size: 12px;
}