/* ==========================================================================
   Top Web Digital — main.css
   Concepto: claro, editorial y en movimiento. Fondos blancos y tintes azules
   muy suaves; sin sombras ni tarjetas apiladas: la jerarquía la dan la
   tipografía, el espacio y líneas finas. Motivo de marca: el corte inclinado
   de la "T" del logo (≈14°) y la flecha que sube.
   ========================================================================== */

:root {
  --bg: #ffffff;
  --tint: #f5f8ff;
  --tint-2: #eaf0ff;
  --ink: #06121f;
  --ink-2: #1d2c43;
  --muted: #56637b;
  --line: #e3e9f4;
  --blue: #003efd;
  --blue-deep: #0030c9;
  --blue-soft: #e8eeff;
  --up: #08915f;
  --up-soft: #e4f6ee;
  --warn: #c2410c;
  --wa: #12a150;

  --f-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-base: 1.0625rem;
  --t-md: 1.25rem;
  --t-lg: 1.5rem;
  --t-xl: clamp(1.75rem, 1.25rem + 1.6vw, 2.4rem);
  --t-2xl: clamp(2.1rem, 1.4rem + 2.8vw, 3.4rem);
  --t-3xl: clamp(2.5rem, 1.5rem + 4.2vw, 4.6rem);

  --slant: 14deg;
  --wrap: 1200px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --header-h: 76px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: var(--t-base); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-deep); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; margin: 0 0 .5em; text-wrap: balance; color: var(--ink); }
h1 { font-size: var(--t-3xl); letter-spacing: -.04em; line-height: 1.03; }
h2 { font-size: var(--t-2xl); letter-spacing: -.035em; }
h3 { font-size: var(--t-lg); font-weight: 750; }
h4 { font-size: var(--t-md); font-weight: 750; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--blue); color: #fff; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; color: #fff; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 40px); margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.section { position: relative; padding-block: clamp(72px, 9vw, 128px); }
.section--tight { padding-block: clamp(44px, 6vw, 80px); }
.section--white { background: var(--bg); }
.section--tint { background: linear-gradient(180deg, var(--tint) 0%, var(--bg) 100%); }
.section--blue { background: var(--blue-soft); }

.head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .lead { margin-inline: auto; }
.head--split { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.head--split > div { max-width: 700px; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 18px; }
.kicker::before { content: ""; width: 16px; height: 9px; background: currentColor; transform: skewX(calc(var(--slant) * -1)); border-radius: 1.5px; }
.lead { font-size: var(--t-md); color: var(--muted); line-height: 1.6; max-width: 62ch; }
.sample { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--warn); vertical-align: middle; text-transform: none; }
.sample::before { content: "● "; font-size: 8px; vertical-align: 2px; }

/* ---------- Botones ---------- */
.btn { --bg: var(--blue); --fg: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border: 0; border-radius: 12px; cursor: pointer; background: var(--bg); color: var(--fg); font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm); text-decoration: none; letter-spacing: -.005em; transition: transform .4s var(--ease-spring), background-color .25s, color .25s, box-shadow .25s; isolation: isolate; overflow: hidden; white-space: nowrap; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn:hover { color: var(--fg); background: var(--blue-deep); transform: translateY(-2px); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.btn:hover svg:last-child:not(:first-child) { transform: translateX(4px); }
.btn--slant { border-radius: 10px; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); padding: 0 34px; }
.btn--ink { --bg: var(--ink); }
.btn--ink:hover { background: var(--ink-2); }
.btn--ghost { --bg: transparent; --fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { background: var(--bg); color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }
.btn--ghost::after { display: none; }
.btn--wa { --bg: var(--wa); }
.btn--wa:hover { background: #0e8a44; }
.btn--sm { min-height: 42px; padding: 0 18px; }
.btn--lg { min-height: 58px; padding: 0 32px; font-size: var(--t-base); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm); text-decoration: none; color: var(--blue); }
.link-arrow svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.link-arrow:hover svg, a:hover .link-arrow svg { transform: translateX(5px); }

/* ---------- Barra superior (lead magnet) ---------- */
.topbar { position: relative; z-index: 60; background: var(--blue-soft); color: var(--ink); font-size: var(--t-xs); }
.topbar .wrap { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 42px; padding-block: 6px; text-align: center; }
.topbar a { color: var(--blue); font-weight: 700; }
.topbar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); animation: ping 2s infinite; flex: none; }
.topbar__spots { display: inline-flex; gap: 3px; vertical-align: middle; margin-inline: 4px; }
.topbar__spots i { width: 10px; height: 6px; transform: skewX(-14deg); background: #c3d0f5; border-radius: 1px; }
.topbar__spots i.on { background: var(--blue); }
.topbar__close { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px; margin-left: 6px; line-height: 0; }
.topbar__close svg { width: 16px; height: 16px; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(8,145,95,.5); } 80%, 100% { box-shadow: 0 0 0 9px rgba(8,145,95,0); } }

/* ---------- Header / navegación ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 70; background: var(--bg); }
.progress-top { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 2.5px; background: var(--blue); transform-origin: left; transform: scaleX(0); z-index: 80; }
.header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(255,255,255,.82); backdrop-filter: saturate(1.8) blur(16px); -webkit-backdrop-filter: saturate(1.8) blur(16px); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; view-transition-name: site-header; }
.header.is-scrolled { border-bottom-color: var(--line); background: rgba(255,255,255,.92); }
.header__in { display: flex; align-items: center; gap: 20px; height: var(--header-h); transition: height .4s var(--ease); }
.header.is-scrolled .header__in { height: 64px; }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 32px; width: auto; transition: height .4s var(--ease); }
.header.is-scrolled .brand img { height: 28px; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav__item { position: relative; }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border: 0; background: none; cursor: pointer; color: var(--ink); font-family: var(--f-display); font-weight: 650; font-size: var(--t-sm); text-decoration: none; transition: color .2s; }
.nav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav__link:hover, .nav__item.is-open > .nav__link, .nav__link[aria-current="page"] { color: var(--blue); }
.nav__link:hover::after, .nav__item.is-open > .nav__link::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.nav__item.is-open > .nav__link svg { transform: rotate(180deg); }
.header__actions { display: flex; align-items: center; gap: 14px; margin-left: 8px; }
.lang { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 4px; color: var(--ink); font-family: var(--f-display); font-weight: 700; font-size: var(--t-xs); text-decoration: none; }
.lang:hover { color: var(--blue); }
.lang svg { width: 16px; height: 16px; }
.header__phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm); color: var(--ink); text-decoration: none; }
.header__phone:hover { color: var(--blue); }
.header__phone svg { width: 17px; height: 17px; color: var(--up); }

/* Mega menú */
.mega { position: absolute; top: calc(100% + 12px); left: 50%; z-index: 40; width: min(780px, 92vw); padding: 26px; border-radius: 20px; background: var(--bg); border: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity .25s var(--ease), transform .45s var(--ease-out), visibility 0s .45s; }
.mega::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.nav__item.is-open > .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s var(--ease), transform .45s var(--ease-out), visibility 0s; }
.nav__item.is-open > .mega .mega__a { animation: megaIn .5s var(--ease-out) both; }
.mega__a:nth-child(2) { animation-delay: .03s !important; } .mega__a:nth-child(3) { animation-delay: .06s !important; } .mega__a:nth-child(4) { animation-delay: .09s !important; }
.mega__a:nth-child(5) { animation-delay: .12s !important; } .mega__a:nth-child(6) { animation-delay: .15s !important; } .mega__a:nth-child(7) { animation-delay: .18s !important; }
.mega__a:nth-child(8) { animation-delay: .21s !important; } .mega__a:nth-child(9) { animation-delay: .24s !important; }
@keyframes megaIn { from { opacity: 0; transform: translateY(8px); } }
.mega--services { width: min(660px, 92vw); display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
.mega__list { display: grid; gap: 2px; }
.mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 8px; }
.mega__a { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 12px; color: var(--ink); text-decoration: none; transition: background-color .2s; }
.mega__a:hover { background: var(--tint); color: var(--ink); }
.mega__a strong { display: block; font-family: var(--f-display); font-size: var(--t-sm); line-height: 1.3; }
.mega__a span { display: block; font-size: var(--t-xs); color: var(--muted); line-height: 1.4; margin-top: 2px; }
.ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); transition: background-color .3s, color .3s, transform .45s var(--ease-spring); }
.ico svg { width: 20px; height: 20px; display: block; margin: auto; flex: none; }
.mega__a .ico { align-self: center; }
.mega__a span.ico, .drawer__sub span.ico, .opt label span.ico { display: flex; align-items: center; justify-content: center; margin: 0; line-height: 0; font-size: 0; }
.mega__a:hover .ico { background: var(--blue); color: #fff; transform: rotate(-8deg) scale(1.06); }
.mega__promo { border-radius: 16px; padding: 22px; background: linear-gradient(160deg, var(--blue-soft), var(--tint)); display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; align-items: flex-start; }
.mega__promo h4 { font-size: var(--t-md); margin: 0; }
.mega__promo p { font-size: var(--t-xs); color: var(--muted); margin: 0 0 4px; }
.mega__promo::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 110px; height: 140px; background: var(--blue); transform: skewX(-14deg); opacity: .1; }
.mega__promo > * { position: relative; z-index: 1; }
.mega__foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--muted); }
.burger { display: none; width: 46px; height: 46px; border-radius: 12px; border: 0; background: var(--tint); cursor: pointer; position: relative; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .4s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 16px; } .burger span:nth-child(2) { top: 22px; } .burger span:nth-child(3) { top: 28px; }
.is-menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.is-menu-open .burger span:nth-child(2) { opacity: 0; }
.is-menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.drawer { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.drawer__panel { position: absolute; inset: 0 0 0 auto; width: min(440px, 100%); background: var(--bg); overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--header-h) + 72px + env(safe-area-inset-top, 0px)) max(22px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) 22px; transform: translateX(100%); transition: transform .55s var(--ease-out); }
.drawer__scrim { position: absolute; inset: 0; background: rgba(6,18,31,.28); opacity: 0; transition: opacity .4s; }
.is-menu-open .drawer { pointer-events: auto; }
.is-menu-open .drawer__panel { transform: none; }
.is-menu-open .drawer__scrim { opacity: 1; }
.drawer details { border-bottom: 1px solid var(--line); }
.drawer summary, .drawer__a { display: flex; justify-content: space-between; align-items: center; padding: 16px 2px; font-family: var(--f-display); font-weight: 750; font-size: var(--t-md); color: var(--ink); text-decoration: none; cursor: pointer; list-style: none; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary svg { width: 18px; transition: transform .3s; }
.drawer details[open] summary svg { transform: rotate(180deg); }
.drawer__a { border-bottom: 1px solid var(--line); }
.drawer__sub { display: grid; gap: 2px; padding-bottom: 12px; }
.drawer__sub a { display: flex; align-items: center; gap: 12px; padding: 8px 2px; color: var(--ink); text-decoration: none; font-weight: 600; }
.drawer__sub .ico { width: 34px; height: 34px; }
.drawer__cta { display: grid; gap: 10px; margin-top: 26px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(40px, 6vw, 88px) clamp(64px, 8vw, 112px); overflow: hidden; background: var(--bg); }
.hero::before { content: ""; position: absolute; z-index: 0; top: -12%; bottom: -12%; right: -10%; width: 50%; background: linear-gradient(180deg, var(--blue-soft), var(--tint) 70%, rgba(245,248,255,0)); transform: skewX(calc(var(--slant) * -1)); transform-origin: bottom; }
.hero::after { content: ""; position: absolute; z-index: 0; top: 18%; right: 46%; width: 10px; height: 60%; background: var(--blue); opacity: .08; transform: skewX(calc(var(--slant) * -1)); }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.hero h1 { margin-bottom: 24px; }
.hero h1 .rank, .phero h1 .rank { display: inline-block; position: relative; color: #fff; padding: 0 .2em; margin-right: .05em; isolation: isolate; }
.hero h1 .rank::before, .phero h1 .rank::before { content: ""; position: absolute; inset: .1em -.02em .04em; background: var(--blue); transform: skewX(calc(var(--slant) * -1)); border-radius: 6px; z-index: -1; animation: rankIn 1s var(--ease-out) .5s both; }
@keyframes rankIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero__lead { font-size: clamp(1.1rem, 1rem + .4vw, 1.28rem); color: var(--muted); max-width: 52ch; margin-bottom: 26px; }
.hero__proof { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 30px; font-size: var(--t-sm); color: var(--muted); line-height: 1.4; }
.hero__proof b { color: var(--ink); }
.stars { display: inline-flex; gap: 2px; color: #f5a524; vertical-align: middle; }
.stars svg { width: 17px; height: 17px; }
.avatars { display: flex; }
.avatars span { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--bg); margin-left: -9px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; }
.avatars span:first-child { margin-left: 0; }
.hero__checks { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 0 0 32px; list-style: none; font-weight: 600; font-size: var(--t-sm); }
.hero__checks li { display: flex; align-items: center; gap: 8px; }
.hero__checks svg { width: 18px; height: 18px; color: var(--up); flex: none; }

/* ---------- Widget: simulación de Google ---------- */
.hero__demo { position: relative; min-width: 0; }
.serp { position: relative; border-radius: 20px; background: var(--bg); overflow: hidden; font-family: Arial, Helvetica, sans-serif; border: 1px solid var(--line); }
.serp__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--tint); }
.serp__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.serp__bar i:nth-child(2) { background: #febc2e; } .serp__bar i:nth-child(3) { background: #28c840; }
.serp__url { flex: 1; margin-left: 8px; height: 26px; border-radius: 13px; background: var(--bg); font-size: 12px; color: var(--muted); display: flex; align-items: center; padding: 0 12px; overflow: hidden; white-space: nowrap; }
.serp__body { padding: 18px 20px 22px; }
.serp__search { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 18px; border-radius: 23px; border: 1px solid var(--line); margin-bottom: 14px; font-size: 15px; color: var(--ink); }
.serp__search svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.serp__q::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; background: var(--blue); vertical-align: -3px; margin-left: 2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.serp__tabs { display: flex; gap: 18px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 12px; }
.serp__tabs b { color: var(--blue); border-bottom: 3px solid var(--blue); padding-bottom: 6px; margin-bottom: -9px; font-weight: 400; }
.serp__meta { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.serp__list { position: relative; list-style: none; margin: 0; padding: 0; overflow: hidden; }
.serp__item { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--bg); transition: transform .9s var(--ease-out), background-color .5s, opacity .5s; }
.serp__pos { font-family: var(--f-display); font-weight: 800; font-size: 12px; color: var(--muted); display: grid; place-items: center; height: 24px; border-radius: 6px; background: var(--tint); transform: skewX(-10deg); }
.serp__cite { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.serp__fav { width: 16px; height: 16px; border-radius: 50%; background: var(--line); flex: none; }
.serp__t { font-size: 16px; color: #1a0dab; line-height: 1.3; margin: 2px 0; }
.serp__d { font-size: 12.5px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.serp__rating { font-size: 12px; color: var(--muted); }
.serp__rating b { color: #f5a524; letter-spacing: 1px; font-weight: 400; }
.serp__item.is-you { background: var(--blue-soft); z-index: 2; }
.serp__item.is-you .serp__fav { background: var(--blue); }
.serp__item.is-you .serp__pos { background: var(--blue); color: #fff; }
.serp__item.is-you .serp__t { font-weight: 700; color: var(--blue); }
.serp__item.is-top { background: var(--up-soft); }
.serp__item.is-top .serp__pos { background: var(--up); color: #fff; }
.serp__item.is-top .serp__t { color: var(--ink); }
.serp__badge { position: absolute; right: 14px; top: 10px; font-family: var(--f-display); font-size: 11px; font-weight: 800; color: #fff; background: var(--up); padding: 3px 9px; border-radius: 6px; opacity: 0; transform: translateY(6px) scale(.8); transition: all .55s var(--ease-spring); }
.serp__item.is-top .serp__badge { opacity: 1; transform: none; }
.serp__chips { display: flex; gap: 4px 18px; flex-wrap: wrap; margin-top: 16px; padding-left: 4px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 2px; border: 0; background: none; color: var(--muted); font-family: var(--f-display); font-weight: 650; font-size: var(--t-sm); cursor: pointer; transition: color .25s; }
.chip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] { color: var(--blue); }
.chip[aria-pressed="true"]::after { transform: scaleX(1); }
.hero__float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); font-family: var(--f-display); font-size: var(--t-xs); font-weight: 750; line-height: 1.3; animation: bob 6s ease-in-out infinite; }
.hero__float .ico { width: 34px; height: 34px; }
.hero__float small { display: block; font-family: var(--f-body); font-weight: 500; color: var(--muted); }
.hero__float--a { left: -34px; bottom: 74px; }
.hero__float--b { right: -22px; top: 70px; animation-delay: -3s; }
.hero__float--b .ico { background: var(--up-soft); color: var(--up); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---------- Marquesina de clientes ---------- */
.logos { padding-block: 38px; background: var(--bg); overflow: hidden; border-block: 1px solid var(--line); }
.logos__label { text-align: center; font-size: var(--t-sm); color: var(--muted); margin-bottom: 20px; }
.marquee { position: relative; display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; gap: 64px; padding-right: 64px; flex: none; animation: marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
.clogo { display: inline-flex; align-items: center; gap: 10px; color: #8b97ad; font-family: var(--f-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; white-space: nowrap; transition: color .3s; }
.clogo:hover { color: var(--ink); }
.clogo svg { width: 26px; height: 26px; }

/* ---------- Contadores ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stat { padding: 8px 28px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat__n { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 1.8rem + 2.6vw, 4rem); letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.stat__n em { font-style: normal; color: var(--blue); }
.stat p { margin: 12px 0 0; color: var(--muted); font-size: var(--t-sm); }

/* ---------- Servicios ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.svc { position: relative; display: flex; flex-direction: column; padding: 34px 30px 34px 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.svc:not(:nth-child(3n+1)) { padding-left: 30px; border-left: 1px solid var(--line); }
.svc::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.svc:hover { color: var(--ink); }
.svc:hover::before { transform: scaleX(1); }
.svc h3 { margin: 22px 0 10px; font-size: 1.35rem; transition: color .3s; }
.svc:hover h3 { color: var(--blue); }
.svc p { color: var(--muted); font-size: var(--t-sm); margin-bottom: 22px; }
.svc .link-arrow { margin-top: auto; }
.svc .ico { width: 50px; height: 50px; border-radius: 14px; }
.svc .ico svg { width: 24px; height: 24px; }
.svc:hover .ico { background: var(--blue); color: #fff; transform: rotate(-8deg); }
.svc__tags { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -8px 0 22px; }
.svc__tags span { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.svc__tags span::before { content: "✓ "; color: var(--up); font-weight: 800; }
.svc--feature h3 { font-size: 1.55rem; }

/* ---------- Resultados por objetivo (tabs) ---------- */
.goals { display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.goals__tabs { display: grid; gap: 0; border-left: 1px solid var(--line); }
.goal-tab { position: relative; display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; border: 0; background: transparent; cursor: pointer; transition: background-color .3s; color: var(--muted); border-radius: 0 12px 12px 0; }
.goal-tab::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--blue); transform: scaleY(0); transition: transform .45s var(--ease-out); }
.goal-tab strong { display: block; color: var(--ink); font-family: var(--f-display); font-size: var(--t-base); }
.goal-tab small { font-size: var(--t-xs); }
.goal-tab:hover { background: var(--tint); }
.goal-tab[aria-selected="true"]::before { transform: scaleY(1); }
.goal-tab[aria-selected="true"] strong { color: var(--blue); }
.goal-tab[aria-selected="true"] .ico { background: var(--blue); color: #fff; }
.goal-panel { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.goal-panel[hidden] { display: none !important; }
.goal-panel.is-in { animation: panelIn .6s var(--ease-out); }
@keyframes panelIn { from { opacity: 0; transform: translateY(16px); } }
.goal-panel h3 { font-size: var(--t-xl); letter-spacing: -.03em; }
.goal-panel ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 12px; color: var(--ink-2); }
.goal-panel li { display: flex; gap: 10px; }
.goal-panel li svg { width: 19px; height: 19px; color: var(--up); flex: none; margin-top: 4px; }
.metric-card { padding: 4px 0; }
.metric-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--muted); font-size: var(--t-xs); flex-wrap: wrap; }
.metric-card__n { font-family: var(--f-display); font-size: clamp(3rem, 2.4rem + 2vw, 4.4rem); font-weight: 800; color: var(--ink); letter-spacing: -.05em; line-height: 1; margin: 12px 0 6px; font-variant-numeric: tabular-nums; }
.metric-card__d { display: inline-flex; align-items: center; gap: 4px; color: var(--up); font-weight: 800; font-size: var(--t-sm); }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; margin-top: 20px; border-bottom: 1px solid var(--line); }
.bars span { flex: 1; border-radius: 6px 6px 0 0; background: var(--blue-soft); height: 0; transition: height 1.1s var(--ease-out); }
.bars span:nth-child(2) { transition-delay: .05s; } .bars span:nth-child(3) { transition-delay: .1s; } .bars span:nth-child(4) { transition-delay: .15s; }
.bars span:nth-child(5) { transition-delay: .2s; } .bars span:nth-child(6) { transition-delay: .25s; } .bars span:nth-child(7) { transition-delay: .3s; } .bars span:nth-child(8) { transition-delay: .35s; }
.bars span:last-child, .bars span:nth-last-child(2) { background: var(--blue); }
.goal-panel.is-in .bars span { height: var(--h); }
.bars-x { display: flex; gap: 8px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.bars-x span { flex: 1; text-align: center; }

/* ---------- Industrias ---------- */
.ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.ind { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 28px 24px 26px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); transition: background-color .35s; overflow: hidden; }
.ind:nth-child(4n) { border-right: 0; }
.ind::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 90px; height: 130px; background: var(--blue); opacity: 0; transform: skewX(-14deg) translateX(30px); transition: transform .6s var(--ease-out), opacity .4s; }
.ind:hover { color: var(--ink); background: var(--tint); }
.ind:hover::after { opacity: .08; transform: skewX(-14deg) translateX(0); }
.ind h3 { font-size: 1.12rem; margin: 10px 0 0; }
.ind p { font-size: var(--t-xs); color: var(--muted); margin: 0; }
.ind__goal { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--t-xs); font-weight: 700; color: var(--up); }
.ind__demo { background: none; border: 0; padding: 0; color: var(--blue); font-weight: 700; font-size: var(--t-xs); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; position: relative; z-index: 2; white-space: nowrap; }
.ind:hover .ico { background: var(--blue); color: #fff; transform: rotate(-8deg); }
.ind--all { background: var(--blue-soft); justify-content: center; }
.ind--all:hover { background: var(--tint-2); }
.ind--all h3 { color: var(--blue); }

/* ---------- Mockups de sitios (ilustraciones sin marco) ---------- */
.mock { --m1: #0f766e; --m2: #ecfdf5; --m3: #134e4a; position: relative; border-radius: 14px; overflow: hidden; background: #fff; font-family: var(--f-body); color: #0f172a; aspect-ratio: 16 / 11; max-width: 100%; }
.mock__bar { display: flex; gap: 5px; align-items: center; padding: 8px 10px; background: #eef2f8; }
.mock__bar i { width: 7px; height: 7px; border-radius: 50%; background: #cdd5e3; }
.mock__bar b { flex: 1; height: 14px; margin-left: 8px; border-radius: 7px; background: #fff; font-size: 8px; font-weight: 500; color: #8a94a8; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; }
.mock__nav { display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; font-size: 9px; font-weight: 700; }
.mock__nav em { font-style: normal; color: var(--m1); font-size: 11px; font-family: var(--f-display); font-weight: 800; }
.mock__nav span { display: flex; gap: 10px; color: #64748b; font-weight: 500; }
.mock__nav u { text-decoration: none; background: var(--m1); color: #fff; padding: 4px 8px; border-radius: 5px; }
.mock__hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; padding: 12px 14px; background: var(--m2); }
.mock__hero h5 { margin: 0 0 6px; font-family: var(--f-display); font-weight: 800; font-size: clamp(11px, 1.3vw, 15px); line-height: 1.15; color: var(--m3); letter-spacing: -.02em; }
.mock__hero p { margin: 0 0 8px; font-size: 8px; color: #475569; line-height: 1.4; }
.mock__btns { display: flex; gap: 5px; }
.mock__btns span { font-size: 7.5px; font-weight: 700; padding: 5px 8px; border-radius: 5px; background: var(--m1); color: #fff; }
.mock__btns span + span { background: #fff; color: var(--m1); box-shadow: inset 0 0 0 1px var(--m1); }
.mock__img { border-radius: 8px; background: linear-gradient(135deg, var(--m1), var(--m3)); position: relative; overflow: hidden; min-height: 70px; display: grid; place-items: center; color: #fff; }
.mock__img::before { content: ""; position: absolute; width: 60%; height: 60%; right: -10%; bottom: -10%; border-radius: 50%; background: rgba(255,255,255,.18); }
.mock__img svg { position: relative; width: 34%; max-width: 46px; height: auto; }
.mock__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 10px 14px; }
.mock__cards div { border-radius: 6px; background: #f6f8fc; padding: 7px; font-size: 7.5px; font-weight: 700; color: #334155; }
.mock__cards div::before { content: ""; display: block; width: 14px; height: 14px; border-radius: 4px; background: var(--m2); margin-bottom: 5px; }
.mock__widget { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px; background: #fff; border: 1px solid #e6ebf3; font-size: 8px; font-weight: 700; animation: bob 5s ease-in-out infinite; }
.mock__widget i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.mock--old { background: #e9e4d8; font-family: "Times New Roman", serif; color: #222; }
.mock--old .old__head { background: linear-gradient(#3a5f8f, #1e3a63); color: #fff; padding: 10px 12px; font-size: 13px; font-weight: 700; text-align: center; font-family: "Comic Sans MS", "Times New Roman", serif; text-shadow: 1px 1px 0 #000; }
.mock--old .old__nav { display: flex; justify-content: center; gap: 4px; background: #c9c0aa; padding: 4px; font-size: 8px; }
.mock--old .old__nav span { background: #ddd5c0; border: 1px outset #fff; padding: 2px 6px; color: #00e; text-decoration: underline; }
.mock--old .old__body { display: grid; grid-template-columns: 1fr 2.2fr; gap: 6px; padding: 8px; font-size: 8px; }
.mock--old .old__side { background: #f6f1e3; border: 1px solid #aaa; padding: 5px; color: #00e; text-decoration: underline; line-height: 1.8; }
.mock--old .old__main { background: #fff; border: 1px solid #aaa; padding: 6px; line-height: 1.4; }
.mock--old .old__main b { color: #c00; display: block; font-size: 10px; margin-bottom: 3px; }
.mock--old .old__marq { background: #ff0; color: #c00; font-size: 8px; font-weight: 700; padding: 2px 6px; white-space: nowrap; overflow: hidden; }
.mock--old .old__counter { display: inline-block; margin-top: 6px; background: #000; color: #0f0; font-family: monospace; padding: 1px 4px; font-size: 8px; }

/* ---------- Antes / después ---------- */
.ba { position: relative; border-radius: 18px; overflow: hidden; user-select: none; touch-action: pan-y; --pos: 50%; background: #fff; }
.ba .mock { border-radius: 0; }
.ba__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ba__after .mock { height: 100%; }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.ba__knob { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; border: 3px solid #fff; transition: transform .35s var(--ease-spring); }
.ba__knob svg { width: 22px; height: 22px; }
.ba:hover .ba__knob { transform: scale(1.08); }
.ba:active .ba__knob { transform: scale(1.16); }
.ba { cursor: ew-resize; }
.ba input.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 3; pointer-events: none; background: none; }
.ba.is-drag .ba__knob { transform: scale(1.16); }
.ba__range:focus-visible + .ba__handle .ba__knob { outline: 3px solid var(--blue); outline-offset: 3px; }
.ba__tag { position: absolute; top: 14px; padding: 4px 10px; border-radius: 6px; font-family: var(--f-display); font-size: 12px; font-weight: 800; z-index: 2; pointer-events: none; }
.ba__tag--before { left: 14px; background: rgba(6,18,31,.7); color: #fff; }
.ba__tag--after { right: 14px; background: var(--blue); color: #fff; }
.ba-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.delta-list { display: grid; gap: 0; margin: 26px 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.delta-list li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); font-weight: 600; }
.delta-list s { color: var(--muted); font-weight: 500; text-decoration-thickness: 1px; }
.delta-list b { color: var(--up); font-family: var(--f-display); font-size: 1.2rem; font-variant-numeric: tabular-nums; min-width: 3.5ch; text-align: right; }

/* ---------- Casos de éxito ---------- */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 44px); }
.case { display: flex; flex-direction: column; min-width: 0; }
.case__media { position: relative; border-radius: 16px; overflow: hidden; background: var(--tint); padding: 22px 22px 0; }
.case__media .mock { border-bottom-left-radius: 0; border-bottom-right-radius: 0; transition: transform .7s var(--ease-out); }
.case:hover .case__media .mock { transform: translateY(-8px) scale(1.015); }
.case__body { padding: 22px 0 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.case__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.case h3 { font-size: 1.35rem; margin: 0; }
.case__story { display: grid; gap: 8px; font-size: var(--t-sm); color: var(--muted); margin: 0; }
.case__story div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; }
.case__story dt { font-weight: 700; color: var(--ink); }
.case__story dd { margin: 0; }
.case__result { margin-top: auto; display: flex; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.case__result strong { font-family: var(--f-display); font-size: 2.3rem; font-weight: 800; color: var(--up); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.case__result span { font-size: var(--t-xs); font-weight: 600; color: var(--ink); line-height: 1.4; }
.filter { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.filter .chip { height: 44px; }
.filter .chip::after { bottom: -1px; }
.case.is-hidden { display: none; }
.case.is-showing { animation: panelIn .55s var(--ease-out); }

/* ---------- Proceso ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; list-style: none; padding: 0; margin: 0; }
.steps::before { content: ""; position: absolute; top: 27px; left: 28px; right: 28px; height: 2px; background: var(--line); }
.steps__fill { position: absolute; top: 27px; left: 28px; height: 2px; width: 0; max-width: calc(100% - 56px); background: var(--blue); transition: width 1.8s var(--ease-out); }
.steps.is-in .steps__fill { width: calc(100% - 56px); }
.step { position: relative; }
.step__n { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--bg); border: 2px solid var(--line); font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; color: var(--muted); transition: all .55s var(--ease); transform: skewX(-8deg); }
.step__n span { transform: skewX(8deg); }
.steps.is-in .step__n { background: var(--blue); border-color: var(--blue); color: #fff; transition-delay: calc(var(--i) * .3s); }
.step h3 { font-size: 1.12rem; margin: 20px 0 6px; }
.step p { font-size: var(--t-sm); color: var(--muted); margin: 0; }
.step__day { display: inline-block; margin-top: 10px; font-family: var(--f-display); font-size: 12px; font-weight: 750; color: var(--blue); }
.steps--v { grid-template-columns: 1fr; gap: 26px; }
.steps--v::before { display: none; }
.steps--v .step { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.steps--v .step h3 { margin-top: 4px; }
.steps--v .step__n { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---------- Precios ---------- */
.toggle { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--tint); position: relative; }
.toggle button { position: relative; z-index: 1; border: 0; background: none; padding: 9px 18px; border-radius: 9px; font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm); cursor: pointer; color: var(--muted); transition: color .3s; }
.toggle button[aria-pressed="true"] { color: var(--blue); }
.toggle__pill { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 9px; background: var(--bg); transition: transform .5s var(--ease-out), width .5s var(--ease-out); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 36px 32px; border-left: 1px solid var(--line); }
.plan:first-child { border-left: 0; }
.plan--pop { background: linear-gradient(180deg, var(--blue-soft), var(--tint) 60%, rgba(245,248,255,.4)); border-radius: 20px; border-left-color: transparent; }
.plan--pop + .plan { border-left-color: transparent; }
.plan__flag { position: absolute; top: -13px; left: 32px; padding: 5px 12px; background: var(--blue); color: #fff; font-family: var(--f-display); font-size: 12px; font-weight: 800; transform: skewX(-14deg); border-radius: 5px; }
.plan__flag span { display: inline-block; transform: skewX(14deg); }
.plan h3 { font-size: 1.4rem; margin-bottom: 6px; }
.plan--pop h3 { color: var(--blue); }
.plan__desc { color: var(--muted); font-size: var(--t-sm); min-height: 3em; }
.plan__price { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.4rem, 2rem + 1.4vw, 3.2rem); letter-spacing: -.05em; line-height: 1; margin: 16px 0 6px; font-variant-numeric: tabular-nums; color: var(--ink); }
.plan__price small { font-family: var(--f-body); font-size: var(--t-sm); font-weight: 600; color: var(--muted); letter-spacing: 0; }
.plan__from { font-size: var(--t-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 8px; }
.plan__note { font-size: var(--t-xs); color: var(--muted); margin-bottom: 24px; }
.plan__list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 11px; font-size: var(--t-sm); }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; }
.plan__list svg { width: 18px; height: 18px; flex: none; color: var(--up); margin-top: 3px; }
.plan__list li.off { color: #9aa5b8; }
.plan__list li.off svg { color: #c7cfdc; }
.plan .btn { margin-top: auto; width: 100%; }
.care { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.care__item { padding: 30px 30px 6px 0; display: flex; flex-direction: column; }
.care__item + .care__item { padding-left: 30px; border-left: 1px solid var(--line); }
.care__item h4 { margin-bottom: 4px; }
.care__item .plan__price { font-size: 2.2rem; margin: 10px 0 16px; }
.care__item .btn { margin-top: auto; }
.compare { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 640px; }
.compare th, .compare td { padding: 15px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th { font-family: var(--f-display); font-size: var(--t-md); background: var(--bg); }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; }
.compare tbody tr { transition: background-color .2s; }
.compare tbody tr:hover { background: var(--tint); }
.compare .yes { color: var(--up); font-weight: 800; }
.compare .no { color: #a6b0c2; }
.table-scroll { overflow-x: auto; }

/* ---------- Garantía ---------- */
.guarantee { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(24px, 4vw, 48px); align-items: center; padding-block: 8px; }
.guarantee h2 { font-size: var(--t-xl); }
.seal { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.seal svg.seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 26s linear infinite; color: var(--blue); }
.seal__core { width: 78px; height: 78px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 1.45rem; }
.seal__core svg { width: 34px; height: 34px; }
@keyframes spin { to { transform: rotate(360deg); } }
.g-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 18px; }
.g-list div { font-size: var(--t-sm); color: var(--muted); }
.g-list strong { display: block; color: var(--ink); font-family: var(--f-display); font-size: var(--t-base); margin-bottom: 2px; }

/* ---------- Herramientas (cotizador, calculadora, auditoría) ---------- */
.tool { border-radius: 22px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; min-width: 0; }
.tool__head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 22px 28px 20px; }
.tool__head h3 { margin: 0; font-size: var(--t-md); }
.tool__body { padding: 4px 28px 28px; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.progress span { display: block; height: 100%; width: 0; background: var(--blue); transition: width .6s var(--ease-out); }
.wiz-step { display: none; padding-top: 22px; }
.wiz-step.is-active { display: block; animation: wizIn .5s var(--ease-out); }
.wiz-step.is-active.is-back { animation-name: wizBack; }
@keyframes wizIn { from { opacity: 0; transform: translateX(26px); } }
@keyframes wizBack { from { opacity: 0; transform: translateX(-26px); } }
.wiz-q { font-family: var(--f-display); font-weight: 800; font-size: var(--t-lg); letter-spacing: -.02em; margin: 0 0 4px; }
.wiz-hint { color: var(--muted); font-size: var(--t-sm); margin-bottom: 18px; }
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt label { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 62px; height: 100%; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); cursor: pointer; font-family: var(--f-display); font-weight: 700; font-size: var(--t-sm); line-height: 1.3; transition: border-color .25s, background-color .25s, transform .35s var(--ease-spring); }
.opt label small { flex-basis: 100%; margin-top: -6px; font-family: var(--f-body); font-weight: 500; color: var(--muted); font-size: var(--t-xs); }
.opt label .ico ~ small { padding-left: 48px; }
.opt label .ico { width: 36px; height: 36px; }
.opt label:hover { border-color: #b9c7ea; }
.opt input:checked + label { border-color: var(--blue); background: var(--blue-soft); transform: scale(1.015); }
.opt input:checked + label .ico { background: var(--blue); color: #fff; }
.opt input:focus-visible + label { outline: 2.5px solid var(--blue); outline-offset: 2px; }
.wiz-nav { display: flex; gap: 10px; margin-top: 24px; }
.estimate { text-align: center; padding: 10px 0; }
.estimate__range { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); letter-spacing: -.04em; color: var(--blue); margin: 8px 0 14px; font-variant-numeric: tabular-nums; }
.estimate__sum { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-bottom: 22px; font-size: var(--t-xs); color: var(--muted); }
.estimate__sum span::before { content: "✓ "; color: var(--up); font-weight: 800; }
.calc { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; }
.calc__in { display: grid; gap: 26px; padding: 34px; min-width: 0; }
.calc__out { position: relative; padding: 36px; background: linear-gradient(160deg, var(--blue-soft), var(--tint)); display: flex; flex-direction: column; justify-content: center; overflow: hidden; min-width: 0; }
.calc__out::after { content: ""; position: absolute; right: -50px; top: -40px; width: 140px; height: 260px; background: var(--blue); opacity: .07; transform: skewX(-14deg); }
.calc__out > * { position: relative; z-index: 1; }
.calc__loss { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 1.8rem + 3vw, 4.2rem); letter-spacing: -.05em; line-height: 1; color: var(--warn); margin: 4px 0 16px; }
.calc__out p { color: var(--ink-2); margin-bottom: 8px; }
.calc__year { font-weight: 800; color: var(--ink); }
.js-leads { color: var(--ink); }
.field { display: grid; gap: 8px; }
.field__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 600; font-size: var(--t-sm); }
.field__top output { font-family: var(--f-display); font-weight: 800; color: var(--blue); font-size: var(--t-md); font-variant-numeric: tabular-nums; white-space: nowrap; }
.field small { color: var(--muted); font-size: var(--t-xs); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--blue) var(--fill, 50%), var(--line) var(--fill, 50%)); outline-offset: 6px; cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); transition: transform .25s var(--ease-spring); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.25); }
.audit-form { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 10px; }
.audit-form input { flex: 1 1 260px; }
.gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; }
.gauge { position: relative; text-align: center; }
.gauge svg { width: 110px; height: 110px; margin: 0 auto; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 8; }
.gauge .g-bg { stroke: var(--line); }
.gauge .g-fg { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; transition: stroke-dashoffset 1.4s var(--ease-out), stroke .3s; }
.gauge__n { position: absolute; top: 55px; left: 50%; transform: translate(-50%, -50%); font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; }
.gauge p { margin: 8px 0 0; font-size: var(--t-xs); font-weight: 700; color: var(--muted); }
.scan { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; font-size: var(--t-sm); color: var(--muted); }
.scan li { display: flex; align-items: center; gap: 10px; transition: color .3s; }
.scan li.is-done { color: var(--ink); }
.scan li .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--blue); animation: spin .8s linear infinite; flex: none; }
.scan li.is-done .spin { animation: none; border-color: var(--up); background: var(--up); box-shadow: inset 0 0 0 3px #fff; }

/* ---------- Formularios ---------- */
.form { display: grid; gap: 16px; position: relative; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.input, select.input, textarea.input { width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font-size: var(--t-base); transition: border-color .2s, background-color .2s; }
textarea.input { min-height: 130px; resize: vertical; }
.input:hover { border-color: #c7d2ea; }
.input:focus { outline: none; border-color: var(--blue); background: #fbfcff; }
.label { display: block; font-family: var(--f-display); font-weight: 700; font-size: var(--t-xs); margin-bottom: 6px; }
.form__note { font-size: var(--t-xs); color: var(--muted); margin: 0; }
.form__ok { display: none; padding: 18px 0 0; color: var(--up); font-weight: 700; }
.form.is-sent .form__ok { display: block; animation: panelIn .5s var(--ease-out); }

/* ---------- Testimonios ---------- */
.reviews-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 24px; margin-bottom: 36px; border-bottom: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.4; }
.g-logo { font-family: Arial, sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; }
.g-logo span:nth-child(1), .g-logo span:nth-child(4) { color: #4285f4; } .g-logo span:nth-child(2), .g-logo span:nth-child(6) { color: #ea4335; }
.g-logo span:nth-child(3) { color: #fbbc05; } .g-logo span:nth-child(5) { color: #34a853; }
.reviews-top__score { font-family: var(--f-display); font-weight: 800; font-size: 2.6rem; letter-spacing: -.04em; line-height: 1; }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 48px); }
.review { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.review blockquote { margin: 0; font-family: var(--f-display); font-size: 1.12rem; font-weight: 600; line-height: 1.5; letter-spacing: -.01em; color: var(--ink); }
.review footer { display: flex; align-items: center; gap: 12px; margin-top: auto; font-size: var(--t-xs); }
.review footer b { display: block; font-size: var(--t-sm); }
.review footer span span { color: var(--muted); }
.av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; flex: none; }
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); margin-top: 56px; }
.video { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 2px; aspect-ratio: 4 / 5; padding: 22px; border: 0; border-radius: 18px; cursor: pointer; text-align: left; overflow: hidden; color: var(--ink); background: radial-gradient(120% 80% at 70% 20%, #dfe7ff 0%, #f1f5ff 55%, #f8faff 100%); }
.video::before { content: ""; position: absolute; left: 50%; top: 34%; width: 44%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: linear-gradient(180deg, #c9d6fb, #b3c4f5); transition: transform .7s var(--ease-out); }
.video::after { content: ""; position: absolute; left: 50%; top: 78%; width: 78%; height: 44%; border-radius: 50% 50% 0 0; transform: translate(-50%, -50%); background: linear-gradient(180deg, #c9d6fb, #e4ebff); }
.video:hover::before { transform: translate(-50%, -52%) scale(1.04); }
.video__play { position: absolute; z-index: 2; left: 50%; top: 46%; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; transition: transform .45s var(--ease-spring); }
.video__play::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--blue); opacity: .5; animation: ring 2.2s var(--ease) infinite; }
@keyframes ring { from { transform: scale(.85); opacity: .7; } to { transform: scale(1.35); opacity: 0; } }
.video:hover .video__play { transform: scale(1.1); }
.video__play svg { width: 24px; height: 24px; margin-left: 3px; }
.video b, .video span { position: relative; z-index: 2; }
.video b { font-family: var(--f-display); font-size: var(--t-base); }
.video span { font-size: var(--t-xs); color: var(--muted); }
.video .video__play, .video .video__dur { position: absolute; }
.video__dur { top: 16px; right: 16px; z-index: 2; font-family: var(--f-display); font-weight: 700; font-size: 12px; color: var(--ink) !important; }

/* ---------- Sellos / herramientas ---------- */
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; }
.badge { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 750; font-size: var(--t-sm); color: var(--ink-2); transition: color .3s, transform .4s var(--ease-spring); }
.badge:hover { color: var(--blue); transform: translateY(-2px); }
.badge svg { width: 22px; height: 22px; color: var(--blue); }

/* ---------- Complementos ---------- */
.addons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.addon { display: flex; gap: 16px; align-items: flex-start; padding: 26px 26px 26px 0; border-bottom: 1px solid var(--line); }
.addon:not(:nth-child(3n+1)) { padding-left: 26px; border-left: 1px solid var(--line); }
.addon h3 { font-size: 1.05rem; margin: 2px 0 4px; }
.addon p { font-size: var(--t-sm); color: var(--muted); margin: 0; }
.addon:hover .ico { background: var(--blue); color: #fff; transform: rotate(-8deg); }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; border-top: 1px solid var(--line); }
.faq--center { margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 2px; cursor: pointer; list-style: none; font-family: var(--f-display); font-weight: 750; font-size: 1.12rem; letter-spacing: -.01em; transition: color .2s; }
.faq summary:hover { color: var(--blue); }
.faq summary::-webkit-details-marker { display: none; }
.faq__icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--tint); transition: background-color .3s, transform .45s var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--ink); border-radius: 2px; transition: transform .4s var(--ease), background-color .3s; }
.faq__icon::after { transform: rotate(90deg); }
.faq details[open] .faq__icon { background: var(--blue); transform: rotate(180deg); }
.faq details[open] .faq__icon::before, .faq details[open] .faq__icon::after { background: #fff; }
.faq details[open] .faq__icon::after { transform: rotate(0); }
.faq__a { overflow: hidden; color: var(--muted); padding: 0 50px 22px 2px; }
.faq__a p:last-child { margin: 0; }

/* ---------- Blog ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 44px); }
.post { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; min-width: 0; }
.post:hover { color: var(--ink); }
.post__cover { border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--tint); }
.post__cover svg { width: 100%; height: 100%; transition: transform .8s var(--ease-out); }
.post:hover .post__cover svg { transform: scale(1.05); }
.post__body { padding-top: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post__meta { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: var(--t-xs); color: var(--muted); }
.post__cat { font-weight: 700; color: var(--blue); }
.post h3 { font-size: 1.28rem; margin: 0; transition: color .3s; }
.post:hover h3 { color: var(--blue); }
.post p { font-size: var(--t-sm); color: var(--muted); margin: 0; }
.post .link-arrow { margin-top: auto; padding-top: 6px; }
.post--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.post--wide h3 { font-size: var(--t-xl); }
.article { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.prose { font-size: 1.12rem; line-height: 1.8; color: var(--ink-2); max-width: 70ch; min-width: 0; }
.prose h2 { font-size: var(--t-xl); margin: 2em 0 .6em; color: var(--ink); }
.prose h3 { font-size: var(--t-md); margin: 1.6em 0 .5em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--blue); font-weight: 800; }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--blue); font-family: var(--f-display); font-size: 1.25rem; font-weight: 650; color: var(--ink); }
.prose .callout { margin: 1.8em 0; padding: 22px 24px; border-radius: 16px; background: var(--tint); }
.prose .callout strong { display: block; color: var(--blue); font-family: var(--f-display); margin-bottom: 4px; }
.prose .callout p { margin: 0; }
.toc { position: sticky; top: calc(var(--header-h) + 24px); font-size: var(--t-sm); }
.toc h2 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 12px; }
.toc ol { list-style: none; padding: 0; margin: 0 0 28px; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; line-height: 1.4; transition: color .2s, border-color .3s; }
.toc a:hover, .toc a.is-active { color: var(--blue); border-left-color: var(--blue); }
.author { display: flex; align-items: center; gap: 12px; font-size: var(--t-sm); color: var(--muted); }
.author img { width: 44px; height: 44px; border-radius: 50%; }
.reading-bar { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; z-index: 81; }

/* ---------- Encabezado de páginas internas ---------- */
.phero { position: relative; padding-block: clamp(36px, 5vw, 72px) clamp(56px, 7vw, 96px); overflow: hidden; background: linear-gradient(180deg, var(--tint) 0%, var(--bg) 100%); }
.phero::before { content: ""; position: absolute; top: -20%; bottom: -20%; right: -6%; width: 34%; background: var(--blue-soft); opacity: .6; transform: skewX(calc(var(--slant) * -1)); }
.phero .wrap { position: relative; z-index: 1; }
.phero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.phero h1 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4rem); margin-bottom: 20px; }
.phero .lead { margin-bottom: 28px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 22px; font-size: var(--t-xs); color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--blue); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: #b5bfd1; }

/* ---------- Bloques de páginas de giro / servicio ---------- */
.pain { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
.pain__item { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 2px solid var(--ink); }
.pain__item b { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.3; }
.pain__item p { color: var(--muted); font-size: var(--t-sm); margin: 0; }
.pain__x { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fdece4; color: var(--warn); }
.pain__x svg { width: 16px; height: 16px; }
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.feat { padding: 30px 28px 30px 0; border-bottom: 1px solid var(--line); }
.feat:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--line); }
.feat:hover .ico { background: var(--blue); color: #fff; transform: rotate(-8deg); }
.feat h3 { font-size: 1.12rem; margin: 18px 0 6px; }
.feat p { font-size: var(--t-sm); color: var(--muted); margin: 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.split > * { min-width: 0; }
.checks { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks svg { width: 20px; height: 20px; color: var(--up); flex: none; margin-top: 3px; }

/* ---------- Nosotros ---------- */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 36px); }
.member { display: flex; flex-direction: column; gap: 4px; }
.member__ph { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 3rem; color: #fff; margin-bottom: 14px; }
.member__ph::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 90px; height: 160px; background: #fff; opacity: .14; transform: skewX(-14deg); transition: transform .7s var(--ease-out); }
.member:hover .member__ph::after { transform: skewX(-14deg) translateX(-40px); }
.member h3 { font-size: 1.1rem; margin: 0; }
.member p { color: var(--muted); font-size: var(--t-sm); margin: 0; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px); }
.values > div { padding-top: 22px; border-top: 2px solid var(--blue); }
.map-card { display: grid; gap: 14px; }
.map-card__art { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background-color: #eef3ff; background-image: linear-gradient(#dfe7fb 2px, transparent 2px), linear-gradient(90deg, #dfe7fb 2px, transparent 2px); background-size: 48px 48px, 48px 48px; }
.map-card__art::before { content: ""; position: absolute; left: -10%; right: -10%; top: 58%; height: 16px; background: #fff; transform: rotate(-8deg); }
.map-card__pin { position: absolute; left: 50%; top: 46%; width: 34px; height: 34px; margin: -34px 0 0 -17px; border-radius: 50% 50% 50% 0; background: var(--blue); transform: rotate(-45deg); animation: pin 2.4s var(--ease) infinite; }
.map-card__pin::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
@keyframes pin { 0%, 100% { transform: rotate(-45deg) translate(0, 0); } 50% { transform: rotate(-45deg) translate(4px, -4px); } }
.map-card__body { display: grid; font-size: var(--t-sm); color: var(--muted); }
.map-card__body b { color: var(--ink); font-family: var(--f-display); }

/* ---------- Contacto ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact > * { min-width: 0; }
.cinfo { display: grid; gap: 0; border-top: 1px solid var(--line); }
.cinfo a, .cinfo div { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: color .2s; }
.cinfo a:hover { color: var(--blue); }
.cinfo a:hover .ico { background: var(--blue); color: #fff; }
.cinfo b { display: block; font-family: var(--f-display); }
.cinfo span { display: block; font-size: var(--t-sm); color: var(--muted); }

/* ---------- CTA final ---------- */
.cta { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(36px, 5vw, 72px); border-radius: 28px; background: linear-gradient(135deg, var(--blue-soft) 0%, var(--tint) 55%, #ffffff 100%); overflow: hidden; }
.cta::before { content: ""; position: absolute; right: 30%; top: -30%; bottom: -30%; width: 120px; background: var(--blue); opacity: .07; transform: skewX(-14deg); }
.cta::after { content: ""; position: absolute; right: 22%; top: -30%; bottom: -30%; width: 22px; background: var(--blue); opacity: .1; transform: skewX(-14deg); }
.cta > * { position: relative; z-index: 1; min-width: 0; }
.cta h2 { font-size: var(--t-2xl); }
.cta p { color: var(--muted); font-size: var(--t-md); max-width: 46ch; margin: 0; }
.cta .btn-row { margin-top: 24px; }
.cta__card { display: grid; gap: 10px; }
.cta__card b { font-size: var(--t-sm); color: var(--up); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cta__card b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--up); animation: ping 2s infinite; flex: none; }
.cta__card .btn { width: 100%; }

/* ---------- Footer ---------- */
.footer { background: var(--tint); color: var(--ink-2); padding-block: clamp(56px, 7vw, 88px) calc(28px + env(safe-area-inset-bottom, 0px)); font-size: var(--t-sm); margin-top: clamp(40px, 6vw, 80px); }
.footer a { color: var(--ink-2); text-decoration: none; transition: color .2s; }
.footer a:hover { color: var(--blue); }
.footer__grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; }
.footer__grid > * { min-width: 0; }
.footer h3 { font-family: var(--f-display); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer__brand img { height: 32px; width: auto; margin-bottom: 18px; }
.footer__brand p { color: var(--muted); max-width: 36ch; }
.social { display: flex; gap: 8px; margin-top: 18px; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bg); color: var(--ink); transition: background-color .25s, color .25s, transform .4s var(--ease-spring); }
.social a:hover { background: var(--blue); color: #fff; transform: translateY(-3px); }
.social svg { width: 18px; height: 18px; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-xs); }
.speed { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-2); }
.speed i { width: 8px; height: 8px; border-radius: 50%; background: var(--up); animation: ping 2s infinite; }

/* ---------- Flotantes ---------- */
.wa-float { position: fixed; right: max(20px, calc(env(safe-area-inset-right, 0px) + 16px)); bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 16px)); z-index: 40; display: flex; align-items: center; gap: 12px; }
.wa-float__btn { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--wa); color: #fff; transition: transform .45s var(--ease-spring); }
.wa-float__btn:hover { color: #fff; transform: scale(1.08) rotate(-6deg); }
.wa-float__btn svg { width: 30px; height: 30px; }
.wa-float__btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa); animation: ring 2.4s var(--ease) infinite; }
.wa-float__bubble { padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--bg); border: 1px solid var(--line); font-size: var(--t-xs); font-weight: 600; max-width: 220px; opacity: 0; transform: translateX(10px) scale(.95); transform-origin: right; transition: all .45s var(--ease-out); pointer-events: none; }
.wa-float.is-hint .wa-float__bubble, .wa-float:hover .wa-float__bubble { opacity: 1; transform: none; }
.to-top { position: fixed; left: max(20px, calc(env(safe-area-inset-left, 0px) + 16px)); bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 16px)); z-index: 40; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(14px); pointer-events: none; transition: all .45s var(--ease-out); }
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--blue); border-color: var(--blue); }
.to-top svg { width: 20px; height: 20px; }
.mobile-cta { display: none; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); pointer-events: none; }
.modal__scrim { position: absolute; inset: 0; background: rgba(240,244,255,.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s; }
.modal__box { position: relative; width: min(760px, 100%); max-height: 90vh; overflow-y: auto; padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: var(--bg); border: 1px solid var(--line); opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .35s var(--ease), transform .55s var(--ease-out); }
.modal.is-open { pointer-events: auto; }
.modal.is-open .modal__scrim { opacity: 1; }
.modal.is-open .modal__box { opacity: 1; transform: none; }
.modal__close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--tint); cursor: pointer; display: grid; place-items: center; transition: background-color .2s, transform .4s var(--ease-spring); z-index: 2; }
.modal__close:hover { background: var(--blue-soft); transform: rotate(90deg); }
.modal__close svg { width: 18px; height: 18px; }
.toast { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); z-index: 95; padding: 12px 18px; border-radius: 12px; background: var(--ink); color: #fff; font-size: var(--t-sm); font-weight: 600; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: all .45s var(--ease-out); max-width: calc(100% - 32px); }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* ---------- 404 ---------- */
.nf { text-align: center; padding-block: clamp(60px, 10vw, 140px); }
.nf__n { font-family: var(--f-display); font-weight: 800; font-size: clamp(6rem, 4rem + 10vw, 12rem); letter-spacing: -.07em; line-height: .9; color: var(--blue); }

/* ---------- Animaciones de entrada ---------- */
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
.js .rv.is-in { opacity: 1; transform: none; }
.js .rv--l { transform: translateX(-36px); }
.js .rv--r { transform: translateX(36px); }
.js .rv--s { transform: scale(.96) translateY(18px); }
.hero-in > * { animation: heroIn .9s var(--ease-out) both; }
.hero-in > *:nth-child(2) { animation-delay: .08s; } .hero-in > *:nth-child(3) { animation-delay: .16s; } .hero-in > *:nth-child(4) { animation-delay: .24s; }
.hero-in > *:nth-child(5) { animation-delay: .32s; } .hero-in > *:nth-child(6) { animation-delay: .4s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(24px); } }
.hero .hero__demo, .phero .hero__demo { animation: demoIn 1.1s var(--ease-out) .25s both; }
@keyframes demoIn { from { opacity: 0; transform: translateY(30px) scale(.97); } }

/* Transiciones entre páginas */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .28s var(--ease) both; }
::view-transition-new(root) { animation: vtIn .5s var(--ease-out) both; }
::view-transition-group(site-header) { animation-duration: 0s; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px); } }
main { transition: opacity .18s var(--ease), transform .18s var(--ease); }
body.is-leaving main { opacity: 0; transform: translateY(-8px); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav, .header__phone { display: none; }
  .burger { display: inline-block; }
  .header__actions { margin-left: auto; }
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
  .ind-grid { grid-template-columns: repeat(3, 1fr); }
  .ind:nth-child(4n) { border-right: 1px solid var(--line); }
  .ind:nth-child(3n) { border-right: 0; }
  .article { grid-template-columns: 1fr; }
  .toc { position: static; order: -1; }
}
@media (max-width: 900px) {
  .hero__grid, .phero__grid, .split, .ba-wrap, .contact, .goals, .goal-panel, .calc, .cta, .post--wide { grid-template-columns: 1fr; }
  .hero::before { width: 90%; right: -40%; top: 40%; }
  .hero::after { display: none; }
  .hero__float--a { left: -6px; }
  .hero__float--b { right: -6px; }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .svc-grid, .feats, .addons { grid-template-columns: repeat(2, 1fr); }
  .svc:not(:nth-child(3n+1)), .feat:not(:nth-child(3n+1)), .addon:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .svc:nth-child(2n), .feat:nth-child(2n), .addon:nth-child(2n) { padding-left: 26px; border-left: 1px solid var(--line); }
  .cases, .posts, .reviews, .videos, .pain, .values { grid-template-columns: repeat(2, 1fr); }
  .plans, .care { grid-template-columns: 1fr; }
  .plan { border-left: 0; border-top: 1px solid var(--line); padding-inline: 24px; }
  .plan:first-child { border-top: 0; }
  .plan--pop, .plan--pop + .plan { border-top-color: transparent; }
  .care__item, .care__item + .care__item { padding: 26px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .steps::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; }
  .steps__fill { top: 28px; left: 27px; width: 2px !important; height: 0; max-width: none; transition: height 1.8s var(--ease-out); }
  .steps.is-in .steps__fill { height: calc(100% - 56px); }
  .step { display: grid; grid-template-columns: 56px 1fr; gap: 18px; }
  .step h3 { margin-top: 4px; }
  .goals__tabs { grid-template-columns: repeat(2, 1fr); border-left: 0; border-bottom: 1px solid var(--line); }
  .goal-tab { border-radius: 12px 12px 0 0; }
  .goal-tab::before { left: 0; right: 0; top: auto; bottom: -1px; width: auto; height: 2px; transform: scaleX(0); }
  .goal-tab[aria-selected="true"]::before { transform: scaleX(1); }
  .guarantee { grid-template-columns: 1fr; }
  .team { grid-template-columns: repeat(2, 1fr); }
  .gauges { grid-template-columns: repeat(2, 1fr); }
  .cta::before { right: 6%; }
}
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .brand img { height: 26px; }
  .header .btn--quote { min-height: 40px; padding: 0 14px; font-size: var(--t-xs); }
  .lang span { display: none; }
  .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .header__in { gap: 10px; }
  .header__actions { gap: 8px; }
  .burger { width: 42px; height: 42px; }
  .burger span { left: 11px; right: 11px; } .burger span:nth-child(1) { top: 14px; } .burger span:nth-child(2) { top: 20px; } .burger span:nth-child(3) { top: 26px; }
  .js .rv--l, .js .rv--r { transform: translateY(24px); }
  .cases, .posts, .reviews, .videos, .pain, .values, .ind-grid, .form__row, .g-list, .opts, .svc-grid, .feats, .addons { grid-template-columns: 1fr; }
  .ind { border-right: 0 !important; padding-inline: 0; }
  .ind:hover { padding-inline: 12px; }
  .svc, .feat, .addon, .svc:nth-child(2n), .feat:nth-child(2n), .addon:nth-child(2n) { padding-left: 0; padding-right: 0; border-left: 0; }
  .goal-tab { padding: 12px 10px; gap: 10px; }
  .goal-tab small { display: none; }
  .stat { padding-inline: 16px; }
  .stat:nth-child(odd) { padding-left: 0; }
  .mega__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .delta-list li { gap: 12px; }
  .topbar .wrap { font-size: 12px; gap: 8px; }
  .topbar__spots { display: none; }
  .hero__float { display: none; }
  .serp__body { padding: 14px; }
  .serp__d { display: none; }
  .wa-float__bubble { display: none; }
  .calc__in, .calc__out { padding: 24px; }
  .tool__head, .tool__body { padding-left: 20px; padding-right: 20px; }
  .opt label .ico ~ small { padding-left: 0; }
  .cta { padding: 28px 22px; border-radius: 22px; }
  .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .5s var(--ease-out); }
  .mobile-cta.is-on { transform: none; }
  .mobile-cta .btn { min-height: 48px; padding: 0 12px; }
  .wa-float, .to-top { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .wa-float__btn { width: 54px; height: 54px; }
  .footer { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 420px) {
  .brand img, .header.is-scrolled .brand img { height: 23px; }
  .lang svg { display: none; }
  .header .btn--quote { padding: 0 11px; font-size: 12px; min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  @view-transition { navigation: none; }
}

.case__body .link-arrow { margin-top: 12px; padding-top: 0; }