/* GestaProp — estilos del sitio.
   Recrea "GestaProp Website v2" (Claude Design) sobre los tokens del Getabed Design System.
   Orden: tema · base · layout · componentes (DS) · shell (barra, header, mega menú, footer) · secciones. */

/* ── Tema claro / oscuro ─────────────────────────────────────────── */
:root {
  --surface: #fff;
  --surface-2: var(--slate-50);
  --surface-3: var(--slate-100);
  --fg-1: var(--slate-800);
  --fg-2: var(--slate-600);
  --fg-3: var(--slate-700);
  --ink-section: var(--slate-900);
  --header-bg: rgba(255, 255, 255, 0.94);
  --mega-shadow: 0 24px 60px rgba(46, 49, 66, 0.18);
  --gutter: clamp(20px, 4vw, 40px);
  --container: 1240px;
  --header-h: 76px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #191c28;
  --surface-2: #12141d;
  --surface-3: #262a3a;
  --fg-1: #e4e6ef;
  --fg-2: #b3b7c8;
  --fg-3: #c8cbd8;
  --text-strong: #f4f5f9;
  --text-body: #c8cbd8;
  --text-muted: #9aa0b5;
  --text-subtle: #7d8399;
  --border-subtle: #272b3b;
  --border-default: #343a4e;
  --border-strong: #4a5068;
  --ink-section: #0b0d14;
  --header-bg: rgba(18, 20, 29, 0.92);
  --grad-brand-soft: linear-gradient(105deg, #2b2444 0%, #1b2945 100%);
  --blue-50: #1f2b47;
  --blue-700: #a9c0ec;
  --blue-600: #8fabe2;
  --success-50: #16302a;
  --success-100: #1f4a3d;
  --success-700: #7fd6b0;
  --mega-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* ── Base ────────────────────────────────────────────────────────── */
html, body { margin: 0; background: var(--surface); }
body { font-family: var(--font-body); color: var(--text-body); }
a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--blue-700); text-decoration: underline; }
img { max-width: 100%; }
button { font: inherit; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--surface); color: var(--text-strong); padding: 8px 14px; border-radius: var(--radius-md); }
.skip-link:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.page { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface); }
.page > main { flex: 1; }

/* ── Layout ──────────────────────────────────────────────────────── */
.wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.stack { display: flex; flex-direction: column; }
.grid-fit { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 300px)), 1fr)); }
.band-alt { background: var(--surface-2); border-top: 1px solid var(--border-subtle); }
.band-alt--both { border-bottom: 1px solid var(--border-subtle); }
.band-ink { background: var(--ink-section); }
.band-soft { background: var(--grad-brand-soft); }
.bt { border-top: 1px solid var(--border-subtle); }
.bb { border-bottom: 1px solid var(--border-subtle); }

/* Ritmo vertical de secciones */
.sec-lg { padding-top: clamp(64px, 9vw, 112px); padding-bottom: clamp(64px, 9vw, 112px); }
.sec-md { padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); }
.sec-96 { padding-top: clamp(64px, 8vw, 96px); padding-bottom: clamp(64px, 8vw, 96px); }
.sec-88 { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); }
.sec-docs { padding-top: clamp(56px, 8vw, 88px); padding-bottom: clamp(56px, 8vw, 88px); }
.pb-0 { padding-bottom: 0 !important; }

/* ── Tipografía de sección ───────────────────────────────────────── */
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-600); }
.eyebrow--lav { color: var(--lavender-300); }
.eyebrow--muted { color: var(--text-muted); }
.eyebrow--ink { color: var(--blue-700); }
.mono-label { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--blue-600); }
.mono-label--lav { color: var(--lavender-300); }
.h1 { margin: 0; font-family: var(--font-display); font-size: clamp(36px, 4.6vw, 58px); line-height: 1.04; font-weight: 800; letter-spacing: -0.035em; color: var(--text-strong); text-wrap: balance; }
.h1--hero { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; }
.h1--xl { font-size: clamp(38px, 5vw, 64px); line-height: 1.02; }
.h1--sub { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.05; }
.h2 { margin: 0; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; color: var(--text-strong); text-wrap: balance; }
.h2--md { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; }
.h2--sm { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; }
.h2--xs { font-size: clamp(26px, 3vw, 36px); line-height: 1.12; }
.h2--rel { font-size: clamp(24px, 2.6vw, 32px); }
.on-ink { color: #fff; }
.lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--fg-2); text-wrap: pretty; }
.lead--hero { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; }
.body-17 { margin: 0; font-size: 17px; line-height: 1.6; color: var(--fg-2); text-wrap: pretty; }
.body-16 { margin: 0; font-size: 16px; line-height: 1.6; color: var(--fg-2); }
.fineprint { margin: 0; font-size: 13px; color: var(--text-muted); }
.head { display: flex; flex-direction: column; gap: 14px; }
.head--760 { max-width: 760px; }
.head--720 { max-width: 720px; }
.head--680 { max-width: 680px; }
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }

.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb--fg2, .breadcrumb--fg2 a { color: var(--fg-2); }

/* ── Componentes del design system ───────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn--lg { height: 48px; padding: 0 24px; font-size: 15px; }
.btn--full { width: 100%; }
.btn--primary { background: var(--blue-500); color: #fff; border-color: var(--blue-500); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--blue-600); color: #fff; }
.btn--primary:active { background: var(--blue-700); }
.btn--secondary { background: var(--white); color: var(--slate-800); border-color: var(--border-default); box-shadow: var(--shadow-xs); }
.btn--secondary:hover { background: var(--slate-50); color: var(--slate-800); }
.btn--secondary:active { background: var(--slate-100); }
.btn--warm { background: var(--peach-300); color: var(--slate-900); border-color: var(--peach-300); box-shadow: var(--shadow-sm); }
.btn--warm:hover { background: var(--peach-400); color: var(--slate-900); }
.btn--warm:active { background: var(--peach-500); }
.btn--ink { background: var(--slate-900); border-color: var(--slate-900); }
.btn--ink:hover { background: var(--slate-800); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }
.btns { display: flex; gap: 12px; flex-wrap: wrap; }

.badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; color: var(--slate-600); background: var(--slate-100); }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--slate-600); }
.badge--blue { color: var(--blue-700); background: var(--blue-50); }
.badge--blue .badge__dot { background: var(--blue-500); }
.badge--lavender { color: var(--lavender-700); background: var(--lavender-100); }
.badge--lavender .badge__dot { background: var(--lavender-500); }
.badge--success { color: var(--success-700); background: var(--success-50); }
.badge--success .badge__dot { background: var(--success-500); }
.badge--warning { color: var(--peach-700); background: var(--warning-50); }
.badge--warning .badge__dot { background: var(--warning-500); }
.badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--text-strong); }
.field__control { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--white); box-shadow: var(--shadow-xs); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.field__control:focus-within { border-color: var(--blue-500); box-shadow: var(--focus-ring); }
.field__control input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-body); font-size: 14px; color: var(--slate-900); }
.field textarea { font-family: var(--font-body); font-size: 14px; color: var(--text-strong); background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px 12px; resize: vertical; outline: none; box-shadow: var(--shadow-xs); }
.field textarea:focus { border-color: var(--blue-500); box-shadow: var(--focus-ring); }
.field__error { font-size: 12px; color: var(--danger-600); font-weight: 500; }
.field.has-error .field__control { border-color: var(--danger-500); }
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--font-body); font-size: 14px; color: var(--text-body); }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box { width: 20px; height: 20px; flex: none; border-radius: var(--radius-xs); border: 1.5px solid var(--border-strong); background: var(--white); display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.check__box svg { opacity: 0; }
.check input:checked + .check__box { background: var(--blue-500); border-color: var(--blue-500); }
.check input:checked + .check__box svg { opacity: 1; }
.check input:focus-visible + .check__box { box-shadow: var(--focus-ring); }

/* ── Barra de utilidades ─────────────────────────────────────────── */
.util { background: var(--ink-section); }
.util__in { height: 40px; display: flex; align-items: center; gap: 20px; font-size: 13px; }
.util__promo { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--slate-200); white-space: nowrap; overflow: hidden; }
.util__promo:hover { color: #fff; text-decoration: none; }
.util__tag { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--slate-900); background: var(--lavender-300); border-radius: var(--radius-pill); padding: 2px 8px; }
.util__text { overflow: hidden; text-overflow: ellipsis; }
.util__cta { flex: none; color: var(--lavender-300); font-weight: 600; }
.util__spacer { flex: 1; }
.util__links { display: flex; align-items: center; gap: 20px; flex: none; }
.util__links a { color: var(--slate-200); }
.util__links a:hover { color: #fff; text-decoration: none; }
.util__links a.util__console { color: #fff; font-weight: 600; }
.util__links a.util__console:hover { color: var(--lavender-300); }

/* ── Header ──────────────────────────────────────────────────────── */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
.hdr__in { height: var(--header-h); display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand:hover { text-decoration: none; }
.brand img { height: 36px; width: 36px; display: block; }
.brand__word { font-family: var(--font-display); font-size: 23px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-strong); }
.nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.nav__item { border: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 9px 10px; border-radius: var(--radius-md); background: transparent; font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--fg-2); white-space: nowrap; text-decoration: none; }
.nav__item:hover { color: var(--text-strong); background: var(--surface-2); text-decoration: none; }
.nav__item svg { transition: transform var(--dur-fast) var(--ease-out); }
.nav__item[aria-expanded="true"] { background: var(--surface-3); font-weight: 600; color: var(--text-strong); }
.nav__item[aria-expanded="true"] svg { transform: rotate(180deg); }
.hdr__spacer { flex: 1; display: none; }
.hdr__tools { display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn { width: 42px; height: 42px; flex: none; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface); color: var(--text-strong); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: var(--surface-2); }
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
.lang { position: relative; flex: none; }
.lang__btn { height: 42px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface); color: var(--text-strong); cursor: pointer; display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; }
.lang__btn:hover { background: var(--surface-2); }
.lang__menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px; background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--mega-shadow); padding: 6px; display: flex; flex-direction: column; z-index: 60; }
.lang__menu[hidden] { display: none; }
.lang__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--text-strong); }
.lang__opt:hover { background: var(--surface-2); color: var(--text-strong); text-decoration: none; }
.lang__opt[aria-current="true"] { background: var(--surface-2); }
.lang__code { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.burger { display: none; flex-direction: column; gap: 4px; }
.burger span { width: 16px; height: 2px; background: var(--text-strong); border-radius: 2px; }

/* Mega menú */
.mega { position: absolute; left: 0; right: 0; top: 100%; padding: 12px var(--gutter) 0; }
.mega[hidden] { display: none; }
.mega__card { max-width: 1160px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); box-shadow: var(--mega-shadow); overflow: hidden; }
.mega__groups { padding: 36px 44px 28px; display: flex; flex-wrap: wrap; gap: 32px 64px; }
.mega__group { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.mega__title { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 10px; }
.mega__links { display: flex; flex-direction: column; gap: 2px; }
.mega__links--two { display: grid; grid-template-columns: repeat(2, minmax(200px, auto)); gap: 2px 40px; }
.mega__link { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 16px; font-weight: 500; color: var(--text-strong); white-space: nowrap; }
.mega__link:hover { color: var(--blue-600); text-decoration: none; }
.mega__sq { width: 9px; height: 9px; border-radius: 2px; flex: none; background: #cbacf8; }
.mega__links--two .mega__sq { background: #648bce; }
.mega__foot { border-top: 1px solid var(--border-subtle); padding: 20px 44px; }
.mega__all { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-600); }

/* Menú móvil */
.mnav { border-top: 1px solid var(--border-subtle); padding: 8px var(--gutter) 24px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.mnav[hidden] { display: none; }
.mnav__group { display: flex; flex-direction: column; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); }
.mnav__title { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 6px; }
.mnav__link { padding: 10px 0; font-size: 16px; font-weight: 600; color: var(--text-strong); }
.mnav__cta { padding-top: 14px; display: flex; }

@media (max-width: 1099px) { .hdr__talk { display: none; } }
@media (max-width: 759px) {
  .nav, .util__links { display: none; }
  .hdr__spacer { display: block; }
  .burger { display: flex; }
  .mega { display: none !important; }
}
@media (min-width: 760px) { .mnav { display: none !important; } }

/* ── Footer ──────────────────────────────────────────────────────── */
.ftr { border-top: 1px solid var(--border-subtle); background: var(--surface-2); }
.ftr__in { padding-top: 56px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 48px; }
.ftr__brand { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid var(--border-default); }
.ftr__logo { display: flex; align-items: center; gap: 10px; }
.ftr__logo img { height: 34px; width: 34px; display: block; }
.ftr__logo .logo-dark { display: none; }
:root[data-theme="dark"] .ftr__logo .logo-light { display: none; }
:root[data-theme="dark"] .ftr__logo .logo-dark { display: block; }
.ftr__word { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-strong); }
.ftr__tagline { font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.ftr__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 40px; }
.ftr__col { display: flex; flex-direction: column; gap: 12px; }
.ftr__title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-strong); }
.ftr__col a { font-size: 14px; color: var(--fg-2); }
.ftr__col a:hover { color: var(--blue-700); text-decoration: underline; }
.ftr__legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--border-default); font-size: 13px; color: var(--text-muted); }
.ftr__family { display: flex; gap: 16px; align-items: center; }
.ftr__family img { height: 18px; }
.ftr__legal-links { display: flex; gap: 18px; flex-wrap: wrap; }
.ftr__legal-links a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }
.ftr__legal-links a:hover { color: var(--blue-700); }

/* ── Páginas legales (/privacy, /terms) ──────────────────────────── */
.legal-page__head { padding-top: 48px; display: flex; flex-direction: column; gap: 16px; }
.legal-page__title { max-width: 820px; }
.legal-page__notice { margin: 0; max-width: 820px; padding: 14px 18px; border: 1px solid var(--border-default); border-left: 3px solid var(--blue-700); border-radius: var(--radius-md); background: var(--surface-2); color: var(--fg-2); font-size: 14px; line-height: 1.55; }
.legal-page { padding-top: 8px; padding-bottom: 96px; }
.legal-body { max-width: 820px; color: var(--fg-2); font-size: 16px; line-height: 1.7; overflow-wrap: break-word; }
.legal-body > :first-child { margin-top: 0; }
.legal-body h2 { margin: 44px 0 14px; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: var(--text-strong); }
.legal-body h3 { margin: 32px 0 10px; font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--text-strong); }
.legal-body p { margin: 0 0 14px; }
.legal-body ul, .legal-body ol { margin: 0 0 16px; padding-left: 22px; }
.legal-body li { margin: 0 0 8px; }
.legal-body strong { color: var(--text-strong); }
.legal-body a { color: var(--blue-700); text-decoration: underline; text-underline-offset: 2px; }
.legal-body blockquote { margin: 0 0 16px; padding: 12px 18px; border-left: 3px solid var(--border-default); background: var(--surface-2); border-radius: var(--radius-md); }
.legal-body hr { margin: 36px 0; border: 0; border-top: 1px solid var(--border-subtle); }
.legal-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.legal-body th, .legal-body td { padding: 10px 12px; border: 1px solid var(--border-subtle); text-align: left; vertical-align: top; }
.legal-body thead th { background: var(--surface-2); color: var(--text-strong); font-weight: 700; }
.legal-body tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
@media (max-width: 700px) { .legal-body table { display: block; overflow-x: auto; } }

/* ── Utilidades de espaciado ─────────────────────────────────────── */
.gap-2 { gap: 2px; } .gap-16 { gap: 16px; } .gap-18 { gap: 18px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.gap-28 { gap: 28px; } .gap-32 { gap: 32px; } .gap-40 { gap: 40px; } .gap-48 { gap: 48px; } .gap-56 { gap: 56px; }
.note-14 { font-size: 14px; color: var(--fg-2); }

/* ── Tarjetas ────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; gap: 12px; color: inherit; }
.card--link { text-decoration: none; transition: box-shadow 200ms, border-color 200ms; }
.card--link:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); text-decoration: none; color: inherit; }
.card--site { padding: 26px; }
.card--sol { gap: 14px; }
.card--mini { padding: 24px; gap: 8px; }
.card--mini:hover { border-color: var(--border-subtle); }
.card__title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-strong); }
.card__title--18 { font-size: 18px; letter-spacing: 0; }
.card__body { font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.card__body--14 { font-size: 14px; }
.card__more { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; color: var(--blue-600); }
.card__more--6 { padding-top: 6px; }
.card__more--mini { margin-top: 6px; padding-top: 0; }
.code-chip { align-self: flex-start; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--blue-700); background: var(--blue-50); border-radius: var(--radius-sm); padding: 4px 8px; }
.tile { background: var(--surface-2); border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.tile__k { font-size: 19px; font-weight: 700; color: var(--text-strong); }
.tile__d { font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.statement { margin: 0; font-size: 18px; line-height: 1.55; font-weight: 600; color: var(--text-strong); max-width: 820px; text-wrap: pretty; }

/* Pasos numerados con línea superior */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 260px)), 1fr)); gap: 0; border-top: 1px solid var(--slate-900); }
.step { padding: 28px 28px 8px 0; display: flex; flex-direction: column; gap: 12px; }
.step--24 { padding: 24px 24px 8px 0; gap: 10px; }
.step__k { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-strong); }
.step__k--22 { font-size: 22px; }
.step__k--19 { font-size: 19px; letter-spacing: -0.01em; }
.step__d { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg-2); text-wrap: pretty; }
.step__d--16 { font-size: 16px; }
.steps--ink { border-top-color: var(--slate-600); }
.steps--ink .step { padding: 26px 28px 0 0; }
.step__k--ink { font-size: 20px; font-weight: 700; color: #fff; }
.step__d--ink { font-size: 16px; line-height: 1.6; color: var(--slate-200); }

/* Lista con palomitas sobre fondo oscuro */
.ink-check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--slate-700); font-size: 15px; line-height: 1.5; color: #fff; }
.ink-check svg { margin-top: 1px; }
.ink-check--lg { grid-template-columns: 28px 1fr; gap: 14px; padding: 22px 0; border-top: none; border-bottom: 1px solid var(--slate-700); font-size: 17px; align-items: start; }
.ink-check--md { grid-template-columns: 28px 1fr; gap: 14px; padding: 18px 0; border-top: none; border-bottom: 1px solid var(--slate-700); font-size: 17px; }

/* Capturas */
.shot { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.shot--12 { gap: 12px; }
.shot__frame { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); background: var(--surface-2); }
.shot__frame--lg { border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); }
.shot__frame img { display: block; width: 100%; height: auto; }
.shot__cap { font-size: 15px; color: var(--fg-2); }
.shot__cap--row { display: flex; gap: 8px 16px; align-items: baseline; flex-wrap: wrap; }
.shot__cap--row strong { font-size: 17px; font-weight: 700; color: var(--text-strong); }

/* ── Inicio ──────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; }
.hero__wash { position: absolute; inset: 0 0 auto auto; width: 60%; height: 100%; background: var(--grad-brand-soft); clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); opacity: 0.7; }
.hero__in { position: relative; padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(40px, 6vw, 80px); align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 28px; }
.hero__sub { max-width: 560px; }
.free-pill { display: flex; align-items: center; gap: 10px; align-self: flex-start; padding: 10px 16px 10px 12px; background: var(--success-50); border: 1px solid var(--success-100); border-radius: var(--radius-pill); }
.free-pill span { font-size: 16px; font-weight: 600; color: var(--success-700); }
.phases { background: var(--surface); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); border: 1px solid var(--border-subtle); overflow: hidden; }
.phases__head { padding: 18px 22px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.phases__title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-600); }
.phases__row { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border-subtle); }
.phases__n { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--blue-600); }
.phases__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.phases__k { font-size: 16px; font-weight: 700; color: var(--text-strong); }
.phases__d { font-size: 14px; color: var(--text-muted); }
.phases__foot { padding: 16px 22px; background: var(--surface-2); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.phases__plans { font-size: 12px; color: var(--text-muted); margin-right: 4px; }

.logos { padding-top: 36px; padding-bottom: 36px; display: flex; flex-direction: column; gap: 20px; }
.logos__title { font-size: 13px; font-weight: 600; color: var(--text-muted); text-align: center; }
.logos__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.logos__slot { height: 56px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); }

.split-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 32px 64px; align-items: end; margin-bottom: 56px; }

.brand-card { background: var(--surface); border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.brand-card > img { height: 40px; width: 40px; }
.brand-card__name { display: flex; flex-direction: column; gap: 4px; }
.brand-card__name h3 { margin: 0; font-size: 22px; font-weight: 700; color: var(--text-strong); letter-spacing: normal; line-height: normal; }
.brand-card__tag { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.brand-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.brand-card--ink { background: var(--ink-section); border: none; }
.brand-card--ink .brand-card__tag { color: var(--slate-300); }
.brand-card--ink h3 { color: #fff; }
.brand-card--ink p { color: var(--slate-200); }
.brand-card__www { height: 40px; width: 40px; border-radius: var(--radius-md); background: var(--grad-brand); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: #fff; }

.sol-plan { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 2px; }
.sol-plan__k { font-size: 12px; color: var(--text-muted); }
.sol-plan__v { font-size: 14px; font-weight: 700; color: var(--blue-700); }

.dev-box { background: var(--ink-section); border-radius: var(--radius-2xl); padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 40px 64px; align-items: center; }
.dev-box__title { font-size: clamp(28px, 3.2vw, 40px); }
.dev-box__body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--slate-200); }
.dev-box__cta { display: flex; margin-top: 8px; }
.dev-link { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--slate-700); }
.dev-link:hover { text-decoration: none; }
.dev-link__k { font-size: 16px; font-weight: 700; color: #fff; }
.dev-link__d { font-size: 13px; color: var(--slate-300); }
.dev-link__arrow { color: var(--lavender-300); font-size: 18px; }

/* Precios (ambos ciclos en el HTML; html.billing-annual muestra el anual) */
.price { display: flex; align-items: baseline; gap: 4px; }
.price__amount { font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.02em; color: var(--text-strong); }
.price__period { font-size: 14px; color: var(--text-muted); }
.price__contact { font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: 0; color: var(--blue-700); }
.price--28 { margin-top: 6px; } .price--28 .price__amount { font-size: 28px; }
.price--32 { gap: 6px; } .price--32 .price__amount { font-size: 32px; letter-spacing: -0.03em; }
.price--36 { gap: 6px; } .price--36 .price__amount { font-size: 36px; letter-spacing: -0.03em; }
.bill-y { display: none; }
:root.billing-annual .bill-m { display: none; }
:root.billing-annual .bill-y { display: inline; }

.plan-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1px; background: var(--border-default); border: 1px solid var(--border-default); border-radius: var(--radius-xl); overflow: hidden; }
.plan-strip__cell { background: var(--surface); padding: 28px; display: flex; flex-direction: column; gap: 10px; color: inherit; }
.plan-strip__cell:hover { background: var(--surface-2); text-decoration: none; color: inherit; }
.plan-strip__for { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.plan-strip__name { font-size: 20px; font-weight: 700; color: var(--text-strong); }
.plan-strip__desc { font-size: 14px; line-height: 1.5; color: var(--fg-2); }

.renew { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px 80px; align-items: start; color: #fff; }
.renew__body { margin: 0; font-size: 17px; line-height: 1.6; color: var(--slate-200); text-wrap: pretty; }

/* CTA final */
.final-cta { position: relative; overflow: hidden; background: var(--grad-brand); border-radius: var(--radius-2xl); padding: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px; align-items: center; }
.final-cta__text { display: flex; flex-direction: column; gap: 12px; }
.final-cta__title { line-height: 1.06; color: var(--slate-900); }
.final-cta__sub { margin: 0; font-size: 17px; line-height: 1.55; color: var(--slate-900); max-width: 520px; }
.final-cta__btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* ── Encabezados de página ───────────────────────────────────────── */
.page-head { padding-top: clamp(56px, 8vw, 96px); padding-bottom: 40px; display: flex; flex-direction: column; gap: 20px; }
.page-head--56 { padding-bottom: 56px; }
.page-head--split { padding-bottom: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 40px 72px; align-items: end; }
.page-head__title { max-width: 860px; }
.page-head__title--900 { max-width: 900px; }
.page-head__sub { font-size: 18px; line-height: 1.55; max-width: 680px; }
.page-head__sub--720 { line-height: 1.6; max-width: 720px; }
.pb-72 { padding-bottom: 72px; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px 72px; align-items: start; }
.head-row--16 { gap: 16px; }
.h3-18, .h3-20 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-strong); letter-spacing: normal; line-height: normal; }
.h3-20 { font-size: 20px; }
.gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-14 { gap: 14px; }

/* ── Planes ──────────────────────────────────────────────────────── */
.seg { display: flex; padding: 4px; gap: 4px; background: var(--surface-3); border-radius: var(--radius-pill); align-self: flex-start; margin-top: 12px; }
.seg__opt { border: none; cursor: pointer; font-family: var(--font-body); font-size: 14px; font-weight: 600; padding: 9px 18px; border-radius: var(--radius-pill); background: transparent; color: var(--fg-2); }
.seg__opt[aria-pressed="true"] { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-sm); }
.plans-cards { padding-bottom: 64px; }
.plans-cards > .grid-fit { align-items: stretch; }
.plan { background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; gap: 20px; box-shadow: var(--shadow-xs); }
.plan__top { display: flex; flex-direction: column; gap: 6px; min-height: 64px; }
.plan__name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan__name { font-size: 20px; font-weight: 700; color: var(--text-strong); }
.plan__for { font-size: 14px; color: var(--text-muted); }
.plan__price { display: flex; flex-direction: column; gap: 4px; padding-bottom: 20px; border-bottom: 1px solid var(--border-subtle); }
.plan__alt { font-size: 13px; color: var(--text-muted); min-height: 18px; }
.plan__desc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-strong); font-weight: 600; }
.plan__feats { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan__feat { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--fg-3); }
.plan__feat svg { margin-top: 2px; }
.plan__feat--limit { color: var(--text-muted); }
.plan__extra { font-size: 13px; line-height: 1.5; color: var(--fg-3); background: var(--surface-2); border-radius: var(--radius-md); padding: 12px 14px; }
.rules { margin-top: 20px; }
.rule { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 16px 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); font-size: 14px; line-height: 1.5; color: var(--fg-3); }
.examples { padding-top: 24px; padding-bottom: clamp(64px, 8vw, 96px); }

.table { border: 1px solid var(--border-default); border-radius: var(--radius-xl); overflow: hidden; }
.table--card { background: var(--surface); border-color: var(--border-subtle); }
.table__row { display: grid; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--border-subtle); align-items: center; }
.table__row--hover:hover { background: var(--surface-2); }
.table__row--head { padding-top: 14px; padding-bottom: 14px; background: var(--surface-2); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.table__note { padding: 14px 24px; font-size: 14px; color: var(--fg-2); }
.table__note--alt { background: var(--surface-2); font-size: 13px; color: var(--text-muted); padding: 14px 28px; }
.table__note--fg3 { font-size: 14px; line-height: 1.5; color: var(--fg-3); padding: 14px 22px; }
.ta-r { text-align: right; }
.ex-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(90px, 0.6fr); }
.ex__op { font-size: 15px; color: var(--text-strong); }
.ex__cfg { font-size: 14px; font-weight: 600; color: var(--blue-700); }
.ex__p { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--text-strong); text-align: right; }
.impl { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.impl__k { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.impl__p { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--blue-700); }
.impl__d { font-size: 14px; line-height: 1.5; color: var(--fg-2); }

.card--plain { gap: 10px; }
.opt__name { font-size: 16px; font-weight: 700; color: var(--text-strong); }
.opt__price { font-family: var(--font-mono); font-size: 24px; font-weight: 600; color: var(--blue-700); letter-spacing: -0.02em; }
.opt__body { font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.opt__body--16 { line-height: 1.6; }
.opt__body--15 { font-size: 15px; line-height: 1.6; }
.addon { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px 24px; padding: 22px 28px; border-bottom: 1px solid var(--border-subtle); align-items: center; }
.addon__name { font-size: 16px; font-weight: 700; color: var(--text-strong); }
.addon__price { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--text-strong); }
.addon__body { font-size: 14px; line-height: 1.5; color: var(--fg-2); }

/* FAQ */
.faq-sec { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 40px 72px; align-items: start; }
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--border-default); }
.faq--wide { grid-column: span 2; }
@media (max-width: 860px) { .faq--wide { grid-column: auto; } }
.faq__item { border-bottom: 1px solid var(--border-default); }
.faq--wide .faq__item { padding: 4px 0; }
.faq__item summary { cursor: pointer; padding: 18px 0; font-size: 17px; font-weight: 700; color: var(--text-strong); }
.faq__item p { margin: 0 0 20px; font-size: 16px; line-height: 1.65; color: var(--fg-2); max-width: 760px; }

/* ── Getabed ─────────────────────────────────────────────────────── */
.flow-card { background: var(--grad-brand-soft); border-radius: var(--radius-xl); padding: 32px 28px; display: flex; flex-direction: column; gap: 40px; min-height: 220px; justify-content: space-between; }
.flow-card__n { color: var(--blue-700); }
.flow-card__k { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-strong); }
.flow-card__d { font-size: 15px; line-height: 1.55; color: var(--fg-3); }
.points { margin-top: 24px; }
.point { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--fg-3); }
.point svg { margin-top: 1px; }
.example { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; }
.example__urls { padding: 14px 18px; background: var(--ink-section); display: flex; flex-direction: column; gap: 8px; }
.example__url { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 13px; color: #fff; overflow-wrap: anywhere; }
.example__dir { color: var(--lavender-300); width: 16px; flex: none; }
.example__body { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.ink-card { background: var(--ink-section); border-radius: var(--radius-xl); padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.ink-card__tag { font-size: 13px; font-weight: 600; color: var(--slate-300); }
.ink-card__price { font-family: var(--font-mono); font-size: 30px; font-weight: 600; color: #fff; letter-spacing: -0.02em; }
.ink-card__price span { font-size: 15px; color: var(--slate-300); }
.ink-card__body { font-size: 15px; line-height: 1.6; color: var(--slate-200); }
.ink-card__cta { display: flex; margin-top: 8px; }
.kv { display: grid; grid-template-columns: minmax(110px, 0.4fr) 1fr; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--border-subtle); }
.kv__k { font-size: 14px; font-weight: 700; color: var(--text-strong); }
.kv__v { font-size: 14px; line-height: 1.55; color: var(--fg-2); }

/* ── Pagos e integraciones ───────────────────────────────────────── */
.big-card { background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: 36px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-sm); }
.big-card__tag { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.big-card__name { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-strong); }
.big-card__price { font-family: var(--font-mono); font-size: 30px; font-weight: 600; color: var(--blue-700); letter-spacing: -0.02em; }
.big-card__body { font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.big-card__code { font-family: var(--font-mono); font-size: 13px; color: var(--fg-3); background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 12px; align-self: flex-start; }
.pay-ex { padding-bottom: clamp(64px, 8vw, 96px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px 72px; align-items: center; }
.receipt { background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-2xl); box-shadow: var(--shadow-md); overflow: hidden; }
.receipt__row { display: flex; justify-content: space-between; gap: 16px; padding: 20px 28px; border-bottom: 1px solid var(--border-subtle); font-size: 15px; color: var(--fg-2); }
.receipt__amt { font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--text-strong); }
.receipt__amt--muted { color: var(--fg-2); }
.receipt__row--total { padding: 22px 28px; background: var(--success-50); border-bottom: none; font-size: 16px; font-weight: 700; color: var(--success-700); }
.receipt__row--total .receipt__amt { font-size: 22px; font-weight: 700; color: var(--success-700); }
.step--flow { padding: 24px 24px 0 0; gap: 12px; }
.step__flow { font-size: 17px; line-height: 1.5; color: #fff; }
.prov-grid { grid-template-columns: 1.2fr 1fr auto; }
.prov-row { padding-top: 18px; padding-bottom: 18px; }
.prov__name { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.prov__scope { font-size: 14px; color: var(--fg-2); }

/* ── Docs ────────────────────────────────────────────────────────── */
.docs-hero { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px 72px; align-items: center; }
.docs-hero__path { font-family: var(--font-mono); font-size: 13px; color: var(--lavender-300); }
.docs-hero__sub { color: var(--slate-200); }
.pill-outline { font-family: var(--font-mono); font-size: 12px; color: #fff; border: 1px solid var(--slate-600); border-radius: var(--radius-pill); padding: 5px 10px; }
.code { background: var(--black); border: 1px solid var(--slate-700); border-radius: var(--radius-xl); overflow: hidden; min-width: 0; }
.code__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--slate-700); }
.code__ep { font-family: var(--font-mono); font-size: 12px; color: var(--slate-300); }
.code__flag { font-family: var(--font-mono); font-size: 11px; color: var(--peach-300); }
.code__body { margin: 0; padding: 20px 18px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; color: var(--slate-200); white-space: pre-wrap; overflow-wrap: anywhere; }
.code__note { margin: 0; padding: 0 18px 20px; font-size: 13px; line-height: 1.55; color: var(--slate-300); }
.c-lav { color: var(--lavender-300); } .c-peach { color: var(--peach-300); } .c-mute { color: var(--slate-400); } .c-green { color: #9ee6c0; }
.card--doc { border-radius: var(--radius-lg); padding: 24px; }
.card--doc__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 22px; }
.card--doc__n { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.card--doc__title { font-size: 17px; font-weight: 700; color: var(--text-strong); }
.card--doc__code { font-family: var(--font-mono); font-size: 12px; color: var(--blue-700); }
.key-row { display: flex; flex-direction: column; gap: 4px; padding: 18px 24px; border-bottom: 1px solid var(--border-subtle); }
.key-row__k { font-size: 15px; font-weight: 700; color: var(--text-strong); }
.key-row__d { font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.scopes { padding: 18px 24px; display: flex; gap: 8px; flex-wrap: wrap; }
.scope { font-family: var(--font-mono); font-size: 12px; color: var(--blue-700); background: var(--blue-50); border-radius: var(--radius-pill); padding: 5px 10px; }
.scope--off { color: var(--fg-2); background: var(--surface-3); }

/* ── Pestañas (módulos, perfiles, subsecciones) ──────────────────── */
.tabs { border-bottom: 1px solid var(--border-subtle); background: var(--surface); }
.tabs--sub { background: var(--surface-2); }
.tabs--sticky { position: sticky; top: calc(var(--header-h) + 56px); z-index: 39; }
.tabs__in { display: flex; gap: 4px; overflow-x: auto; }
.tab { position: relative; flex: none; padding: 16px 14px; font-size: 14px; font-weight: 600; color: var(--fg-3); white-space: nowrap; }
.tabs--sub .tab { padding: 14px; }
.tab:hover { color: var(--blue-700); text-decoration: none; }
.tab[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--blue-500); }

/* ── Producto / soluciones / micrositios ─────────────────────────── */
.head--860 { max-width: 860px; }
.prod-index { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(64px, 8vw, 96px); }
.feat-index { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(64px, 8vw, 96px); }
.mod-hero { position: relative; overflow: hidden; }
.mod-hero__wash { position: absolute; inset: 0; background: var(--grad-brand-soft); opacity: 0.55; }
.mod-hero__wash--60 { opacity: 0.6; }
.mod-hero__in { position: relative; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(56px, 7vw, 88px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px 72px; align-items: center; }
.mod-hero__body { color: var(--fg-3); }
.included { background: var(--surface); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.included__list { display: flex; flex-direction: column; border-top: 1px solid var(--border-subtle); }
.included__row { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); font-size: 15px; font-weight: 600; color: var(--text-strong); }
.included__row svg { margin-top: 1px; }
.sub-head { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); display: flex; flex-direction: column; gap: 14px; }
.sub-head--16 { gap: 16px; }
.sub-head__lead { margin: 0; font-size: 18px; line-height: 1.55; color: var(--fg-3); max-width: 720px; }

.plan-mini { background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-xs); }
.plan-mini__for { font-size: 14px; color: var(--text-muted); }
.plan-mini__name { font-size: 22px; font-weight: 700; color: var(--text-strong); }
.plan-mini__desc { font-size: 15px; line-height: 1.5; color: var(--fg-3); }
.plan-mini__cta { margin-top: auto; padding-top: 8px; display: flex; }
.no-plans { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.no-plans > span { font-size: 18px; font-weight: 600; color: var(--text-strong); }

.sol-hero { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(56px, 7vw, 80px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 48px 72px; align-items: start; }
.ink-panel { background: var(--ink-section); border-radius: var(--radius-2xl); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.ink-panel__plan { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }

.site-bar { position: sticky; top: var(--header-h); z-index: 40; background: var(--ink-section); }
.site-bar__in { height: 56px; display: flex; align-items: center; gap: 20px; }
.site-bar__brand { flex: none; display: flex; align-items: center; gap: 10px; }
.site-bar__brand:hover { text-decoration: none; }
.site-bar__code { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--slate-900); background: var(--lavender-300); border-radius: var(--radius-sm); padding: 4px 8px; }
.site-bar__name { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; color: #fff; white-space: nowrap; }
.site-bar__nav { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; justify-content: flex-end; }
.site-bar__link { flex: none; padding: 6px 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; color: var(--slate-200); white-space: nowrap; }
.site-bar__link:hover { color: #fff; background: var(--slate-700); text-decoration: none; }
.site-bar__link[aria-current="page"] { color: var(--slate-900); background: #fff; }
@media (max-width: 759px) { .site-bar__nav { justify-content: flex-start; } }
.site-hero__in { position: relative; padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 48px 72px; align-items: center; }
.gap-22 { gap: 22px; }
.site-hero__sub { color: var(--fg-3); max-width: 600px; }
.facts { background: var(--ink-section); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); overflow: hidden; }
.facts__head { padding: 22px 28px; border-bottom: 1px solid var(--slate-700); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.facts__row { display: flex; flex-direction: column; gap: 4px; padding: 20px 28px; border-bottom: 1px solid var(--slate-700); }
.facts__k { font-size: 13px; color: var(--slate-300); }
.facts__v { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.35; }
.facts__plans { padding: 18px 28px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.facts__label { font-size: 13px; color: var(--slate-300); margin-right: 4px; }
.facts__plan { font-size: 12px; font-weight: 600; color: #fff; border: 1px solid var(--slate-600); border-radius: var(--radius-pill); padding: 4px 10px; }
.site-shot { padding-top: clamp(64px, 8vw, 96px); }
.feat-n { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--grad-brand-soft); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--blue-700); }
.card__title--19 { font-size: 19px; }
.card__body--16 { line-height: 1.6; }
.avail-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px 72px; align-items: start; }
.avail-text { margin: 0; font-size: 22px; line-height: 1.45; font-weight: 700; letter-spacing: -0.01em; color: var(--text-strong); text-wrap: pretty; }
.avail-btns { margin-top: 8px; }

/* ── Empresa ─────────────────────────────────────────────────────── */
.co-head { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 80px); display: flex; flex-direction: column; gap: 20px; }
.co-head__title { max-width: 960px; }
.co-head__sub { max-width: 760px; }
.evo { border: 1px solid var(--slate-700); border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.evo__tag { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lavender-300); }
.evo__k { font-size: 22px; font-weight: 700; color: #fff; }
.evo__d { font-size: 15px; line-height: 1.6; color: var(--slate-200); }
.card--avail { padding: 24px; gap: 12px; }
.card--avail .badge { align-self: flex-start; }
.avail__d { font-size: 15px; line-height: 1.55; color: var(--text-strong); font-weight: 600; }
.avail__h { font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.legal-line { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid var(--border-subtle); flex-wrap: wrap; font-size: 15px; font-weight: 600; color: var(--text-strong); }

/* ── Contacto ────────────────────────────────────────────────────── */
.contact-paths { padding-top: clamp(48px, 7vw, 80px); display: flex; flex-direction: column; gap: 28px; }
.path-card { background: var(--grad-brand-soft); border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.path-card__tag { font-size: 13px; font-weight: 600; color: var(--blue-700); }
.contact { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px 72px; align-items: start; }
.ink-card--wa { margin-top: 12px; gap: 14px; }
.ink-card__phone { font-family: var(--font-mono); font-size: 24px; font-weight: 600; color: #fff; }
.ink-card--wa .ink-card__body { line-height: 1.55; }
.ink-card--wa .ink-card__cta { margin-top: 6px; }
.contact__alt { font-size: 14px; color: var(--text-muted); }
.form-card { background: var(--surface); border: 1px solid var(--border-default); border-radius: var(--radius-2xl); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow-md); }
.cform { display: flex; flex-direction: column; gap: 18px; }
.cform__title { font-size: 20px; font-weight: 700; color: var(--text-strong); }
.cform__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 18px; }
.cform__fine { font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.cform__consent { display: flex; flex-direction: column; gap: 6px; }
.cform__privacy { align-self: flex-start; font-size: 13px; color: var(--blue-700); text-decoration: underline; text-underline-offset: 2px; }
.cform-sent { display: flex; flex-direction: column; gap: 16px; padding: 24px 0; }
.cform-sent__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--success-50); display: flex; align-items: center; justify-content: center; }
.cform-sent__title { font-size: 22px; font-weight: 700; color: var(--text-strong); }
.cform-sent__body { font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.cform .yoyo-request .btn[type="submit"], .cform.htmx-request .btn[type="submit"] { opacity: 0.5; }
.cform__sending { display: none; }
.cform.yoyo-request .cform__label, .cform.htmx-request .cform__label { display: none; }
.cform.yoyo-request .cform__sending, .cform.htmx-request .cform__sending { display: inline; }
.table--subtle { border-color: var(--border-subtle); }