/* Estilos del sitio público (renta.ar). Mismos colores y tipografías que la aplicación (styles.css),
   pero solo lo que el sitio usa. El tema oscuro cambia los tokens de :root; ninguna regla lleva un
   color fijo que no venga de un token. */
:root {
  --ink: #182230;
  --muted: #667085;
  --line: #e8ecf2;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --canvas: #f5f7fb;
  --primary: #2769e8;
  --primary-dark: #1854c7;
  --primary-soft: #edf4ff;
  --primary-line: #c9d6ec;
  --green: #149766;
  --green-soft: #eaf8f2;
  --red: #df4c56;
  --red-soft: #fff0f1;
  --orange: #b96a16;
  --orange-soft: #fff5e8;
  --chat-bg: #eef1f5;
  --chat-in: #ffffff;
  --chat-out: #dcf5e3;
  --shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .04);
  --shadow-lg: 0 36px 80px rgba(32, 66, 118, .18), 0 4px 12px rgba(16, 24, 40, .05);
  --glow: rgba(77, 137, 243, .13);
}
:root[data-theme="dark"] {
  --ink: #e8eff9;
  --muted: #afb4bd;
  --line: #353a43;
  --surface: #21242a;
  --surface-2: #272b32;
  --canvas: #1c1f25;
  --primary-soft: #16233a;
  --primary-line: #35508a;
  --green: #4ec08c;
  --green-soft: #0f2a1f;
  --red: #ff7075;
  --red-soft: #2c1618;
  --orange: #e39147;
  --orange-soft: #2b1b03;
  --chat-bg: #15181d;
  --chat-in: #2a2f37;
  --chat-out: #1f3b2a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35);
  --shadow-lg: 0 36px 80px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .3);
  --glow: rgba(77, 137, 243, .18);
}

* { box-sizing: border-box; }
html { font-family: "DM Sans", sans-serif; color: var(--ink); background: var(--canvas); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; background: var(--surface); color: var(--ink); }
button, input, select { font: inherit; color: inherit; }
a { color: var(--primary); }
h1, h2, h3 { font-family: Manrope, sans-serif; letter-spacing: -.02em; }
.logo-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
/* Los enlaces del menú (#precios, #preguntas…) no quedan tapados por la cabecera pegada. */
[id] { scroll-margin-top: 88px; }
/* El resplandor del hero y el teléfono inclinado se salen un poco del ancho: se recortan sin crear un
   contenedor de desplazamiento (clip), así la cabecera pegada sigue funcionando. */
.marketing-site { overflow-x: clip; }
.marketing-hero > *, .auto-item > *, .system-layout > *, .demo-section > *, .calculator-layout > *, .faq-section > *, .marketing-trust > * { min-width: 0; }
.icon-svg { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- Botones --- */
.marketing-primary { height: 42px; border: 0; border-radius: 9px; padding: 0 18px; background: var(--primary); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; transition: background .15s, transform .15s; }
.marketing-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.marketing-primary.large { height: 50px; padding: 0 24px; font-size: 18px; }
.marketing-secondary { height: 42px; border: 1.5px solid var(--primary-line); border-radius: 9px; padding: 0 18px; background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 800; cursor: pointer; transition: border-color .15s, color .15s, transform .15s; }
.marketing-secondary:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.marketing-secondary.large { height: 50px; padding: 0 24px; font-size: 18px; }
.marketing-login { border: 0; background: transparent; color: var(--ink); font-size: 16px; font-weight: 700; cursor: pointer; padding: 8px 10px; }
.marketing-login:hover { color: var(--primary); }

/* --- Cabecera --- */
.marketing-header { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; height: 72px; padding: 0 max(16px, calc((100vw - 1180px) / 2)); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.marketing-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.marketing-brand-mark { width: 36px; height: 36px; display: block; flex: none; }
.marketing-brand-mark svg { width: 100%; height: 100%; display: block; }
.marketing-brand > span { display: flex; flex-direction: column; line-height: 1.1; }
.logo-nombre { width: 106px; height: 21px; display: block; }
.marketing-brand small { color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .2px; margin-top: 3px; }
.marketing-nav { justify-self: center; display: flex; align-items: center; gap: 28px; }
.marketing-nav a { color: var(--muted); text-decoration: none; font-size: 15.5px; font-weight: 700; }
.marketing-nav a:hover { color: var(--ink); }
.marketing-header-actions { display: flex; align-items: center; gap: 8px; }
.theme-toggle { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); margin-right: 4px; }
.theme-toggle button { display: grid; place-items: center; width: 32px; height: 26px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.theme-toggle button.active { background: var(--surface); color: var(--primary); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle button[data-theme-choice="dark"].active svg { fill: currentColor; }

/* --- Secciones --- */
.marketing-section { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 84px 0; }
.marketing-section.tight { padding-top: 56px; padding-bottom: 56px; }
.marketing-eyebrow, .marketing-section-heading > span { display: block; color: var(--primary); font-size: 14px; font-weight: 800; letter-spacing: 1.4px; }
.marketing-section-heading { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.marketing-section-heading.align-left { margin-left: 0; text-align: left; }
.marketing-section-heading h2 { margin: 12px 0 14px; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; font-weight: 800; }
.marketing-section-heading p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.6; }
.band { background: var(--canvas); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band > .marketing-section { padding: 72px 0; }

/* --- Hero --- */
.marketing-hero { position: relative; width: min(1180px, calc(100% - 32px)); display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(32px, 5vw, 72px); margin: 0 auto; padding: 72px 0 80px; }
.marketing-hero::before { content: ""; position: absolute; z-index: 0; width: 560px; height: 560px; right: -240px; top: -200px; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 70%); pointer-events: none; }
.marketing-hero-copy, .marketing-hero-visual { position: relative; z-index: 1; }
.marketing-hero h1 { margin: 16px 0 20px; font-size: clamp(40px, 5.2vw, 66px); line-height: 1.02; font-weight: 800; letter-spacing: -.035em; }
.marketing-hero h1 em { font-style: normal; color: var(--primary); }
.marketing-hero-copy > p { max-width: 560px; margin: 0; color: var(--muted); font-size: 19px; line-height: 1.65; }
.marketing-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.marketing-hero-copy > .marketing-hero-note { margin: 26px 0 0; color: var(--muted); font-size: 14.5px; font-weight: 600; letter-spacing: .1px; }

/* --- iPhone 18 Pro con WhatsApp ---
   Marco: public/sitio/iphone-18-pro.png (getscreeny.app/frames, 1350×2760, libre para uso propio y
   comercial sin atribución; no redistribuir como pack). La pantalla transparente del marco mide 1206×2622
   (la resolución real del equipo) y arranca en 72,69; la isla dinámica ya viene dibujada en el marco.
   Todo lo de adentro se mide en puntos de iOS (393 pt de ancho de pantalla) con unidades de contenedor,
   así las proporciones se mantienen a cualquier tamaño. */
.iphone { --pt: calc(0.8933cqw * 100 / 393); position: relative; width: min(360px, 100%); aspect-ratio: 1350 / 2760; margin: 0 auto; container-type: inline-size; font-family: -apple-system, "SF Pro Text", "DM Sans", sans-serif;
  --wa-bg: #efeae2; --wa-bar: #f6f6f6; --wa-field: #fff; --wa-in: #fff; --wa-out: #d9fdd3; --wa-text: #111b21; --wa-time: #667781; --wa-tick: #53bdeb; --wa-link: #027eb5; --wa-line: #d1d7db; --wa-pill: #fff; --wa-icon: #8696a0; }
:root[data-theme="dark"] .iphone { --wa-bg: #0b141a; --wa-bar: #1f2c34; --wa-field: #2a3942; --wa-in: #202c33; --wa-out: #005c4b; --wa-text: #e9edef; --wa-time: #8696a0; --wa-link: #53bdeb; --wa-line: #2a3942; --wa-pill: #182229; --wa-icon: #8696a0; }
.iphone-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 2; }
.iphone-screen { position: absolute; left: 5.333%; top: 2.5%; width: 89.333%; height: 95%; display: flex; flex-direction: column; border-radius: calc(var(--pt) * 55); background: var(--wa-bg); color: var(--wa-text); overflow: hidden; font-size: calc(var(--pt) * 15.5); line-height: 1.28; }
/* La hora y los íconos quedan centrados con la isla dinámica (que va de 14 a 49 pt). */
.ios-status { display: flex; align-items: center; justify-content: space-between; height: calc(var(--pt) * 54); padding: calc(var(--pt) * 7) calc(var(--pt) * 30) 0; background: var(--wa-bar); }
.ios-time { font-size: calc(var(--pt) * 17); font-weight: 600; letter-spacing: -.3px; }
.ios-icons { display: inline-flex; align-items: center; gap: calc(var(--pt) * 6); }
.ios-icons svg { height: calc(var(--pt) * 12.5); width: auto; fill: currentColor; display: block; }
.ios-icons .wifi path { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.ios-icons .battery .shell { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .4; }
.ios-icons .battery .nub { opacity: .4; }
/* Cabecera de la conversación: volver (con la cantidad de chats sin leer), foto, nombre y estado, video y llamada. */
.wa-header { display: flex; align-items: center; gap: calc(var(--pt) * 8); padding: calc(var(--pt) * 4) calc(var(--pt) * 14) calc(var(--pt) * 8) calc(var(--pt) * 8); background: var(--wa-bar); border-bottom: 1px solid var(--wa-line); }
.wa-back { display: inline-flex; align-items: center; gap: calc(var(--pt) * 2); color: var(--wa-link); font-size: calc(var(--pt) * 17); }
.wa-back::before { content: ""; width: calc(var(--pt) * 10); height: calc(var(--pt) * 10); border-left: calc(var(--pt) * 2.5) solid currentColor; border-bottom: calc(var(--pt) * 2.5) solid currentColor; transform: rotate(45deg); margin-right: calc(var(--pt) * 2); }
.wa-header .avatar { width: calc(var(--pt) * 37); height: calc(var(--pt) * 37); border-radius: 50%; display: grid; place-items: center; background: var(--primary); flex: none; }
.wa-header .avatar svg { width: 66%; height: 66%; }
.wa-header strong { display: block; font-size: calc(var(--pt) * 16); font-weight: 600; line-height: 1.15; }
.wa-header small { display: block; color: var(--wa-time); font-size: calc(var(--pt) * 12); }
.wa-tools { display: flex; gap: calc(var(--pt) * 22); margin-left: auto; color: var(--wa-link); }
.wa-tools svg { width: calc(var(--pt) * 24); height: calc(var(--pt) * 24); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Fondo de chat con el dibujo tenue de WhatsApp (un patrón abstracto, no la ilustración original). */
.wa-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(var(--pt) * 3); padding: calc(var(--pt) * 8) calc(var(--pt) * 10) calc(var(--pt) * 8); overflow: hidden; background-color: var(--wa-bg); background-image: radial-gradient(circle at 20% 30%, rgba(0, 0, 0, .025) 0 calc(var(--pt) * 6), transparent calc(var(--pt) * 7)), radial-gradient(circle at 70% 60%, rgba(0, 0, 0, .025) 0 calc(var(--pt) * 4), transparent calc(var(--pt) * 5)), radial-gradient(circle at 45% 85%, rgba(0, 0, 0, .02) 0 calc(var(--pt) * 8), transparent calc(var(--pt) * 9)); background-size: calc(var(--pt) * 90) calc(var(--pt) * 90); }
:root[data-theme="dark"] .wa-chat { background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .03) 0 calc(var(--pt) * 6), transparent calc(var(--pt) * 7)), radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .03) 0 calc(var(--pt) * 4), transparent calc(var(--pt) * 5)); }
.wa-date { align-self: center; margin: calc(var(--pt) * 4) 0 calc(var(--pt) * 6); padding: calc(var(--pt) * 4) calc(var(--pt) * 10); border-radius: calc(var(--pt) * 8); background: var(--wa-pill); color: var(--wa-time); font-size: calc(var(--pt) * 12); font-weight: 500; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-msg { position: relative; max-width: 78%; padding: calc(var(--pt) * 6) calc(var(--pt) * 8) calc(var(--pt) * 5) calc(var(--pt) * 9); border-radius: calc(var(--pt) * 8); box-shadow: 0 1px .5px rgba(11, 20, 26, .13); word-wrap: break-word; }
.wa-msg.in { align-self: flex-start; background: var(--wa-in); border-top-left-radius: 0; }
.wa-msg.out { align-self: flex-end; background: var(--wa-out); border-top-right-radius: 0; }
.wa-msg.in::before, .wa-msg.out::before { content: ""; position: absolute; top: 0; width: 0; height: 0; border-top: calc(var(--pt) * 9) solid var(--wa-in); }
.wa-msg.in::before { left: calc(var(--pt) * -8); border-left: calc(var(--pt) * 8) solid transparent; }
.wa-msg.out::before { right: calc(var(--pt) * -8); border-top-color: var(--wa-out); border-right: calc(var(--pt) * 8) solid transparent; }
.wa-msg.in + .wa-msg.in, .wa-msg.out + .wa-msg.out { border-radius: calc(var(--pt) * 8); }
.wa-msg.in + .wa-msg.in::before, .wa-msg.out + .wa-msg.out::before { display: none; }
.wa-msg b { font-weight: 600; }
.wa-msg q { font-style: italic; quotes: "«" "»"; }
.wa-msg time { float: right; margin: calc(var(--pt) * 6) 0 0 calc(var(--pt) * 8); color: var(--wa-time); font-size: calc(var(--pt) * 11); line-height: 1; white-space: nowrap; }
.wa-msg time i { font-style: normal; color: var(--wa-tick); letter-spacing: -2px; }
.wa-msg .ok { color: var(--green); font-weight: 700; }
/* Documento adjunto, como lo muestra WhatsApp. */
.wa-doc { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--pt) * 8); align-items: center; margin: calc(var(--pt) * -2) calc(var(--pt) * -3) calc(var(--pt) * 4) calc(var(--pt) * -4); padding: calc(var(--pt) * 8); border-radius: calc(var(--pt) * 6); background: rgba(0, 0, 0, .06); }
:root[data-theme="dark"] .wa-doc { background: rgba(255, 255, 255, .06); }
.wa-doc i { display: grid; place-items: center; width: calc(var(--pt) * 30); height: calc(var(--pt) * 36); border-radius: calc(var(--pt) * 3); background: var(--red); color: #fff; font: 700 calc(var(--pt) * 8) "DM Sans", sans-serif; font-style: normal; }
.wa-doc strong { display: block; font-size: calc(var(--pt) * 14); font-weight: 500; }
.wa-doc small { display: block; color: var(--wa-time); font-size: calc(var(--pt) * 11.5); }
/* Botones de respuesta: WhatsApp los muestra como filas aparte debajo del mensaje, en celeste. */
.wa-buttons { align-self: flex-start; width: 78%; display: grid; gap: calc(var(--pt) * 3); margin-top: calc(var(--pt) * -1); }
.wa-buttons span { display: flex; align-items: center; justify-content: center; gap: calc(var(--pt) * 6); height: calc(var(--pt) * 38); border-radius: calc(var(--pt) * 8); background: var(--wa-in); color: var(--wa-link); font-size: calc(var(--pt) * 15); font-weight: 500; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-buttons span::before { content: "↩"; font-size: calc(var(--pt) * 14); opacity: .8; }
/* Nota de voz: foto de quien la manda, play, onda y duración. */
.wa-msg.voice { display: grid; grid-template-columns: auto auto 1fr; grid-template-areas: "avatar play wave" "avatar play meta"; align-items: center; column-gap: calc(var(--pt) * 8); min-width: 70%; padding: calc(var(--pt) * 7) calc(var(--pt) * 8) calc(var(--pt) * 6) calc(var(--pt) * 7); }
.wa-msg.voice .avatar { grid-area: avatar; position: relative; display: grid; place-items: center; width: calc(var(--pt) * 42); height: calc(var(--pt) * 42); border-radius: 50%; background: #dfe5ea; color: #a7b2bd; }
:root[data-theme="dark"] .wa-msg.voice .avatar { background: #3b4a54; color: #8696a0; }
.wa-msg.voice .avatar svg { width: 70%; height: 70%; fill: currentColor; }
.wa-msg.voice .avatar::after { content: ""; position: absolute; right: calc(var(--pt) * -3); bottom: calc(var(--pt) * -2); width: calc(var(--pt) * 15); height: calc(var(--pt) * 15); border-radius: 50%; background: var(--wa-tick) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272.2%27 stroke-linecap=%27round%27%3E%3Crect x=%279%27 y=%273%27 width=%276%27 height=%2711%27 rx=%273%27/%3E%3Cpath d=%27M6 11a6 6 0 0 0 12 0M12 17v4%27/%3E%3C/svg%3E") center / 70% no-repeat; box-shadow: 0 0 0 2px var(--wa-out); }
.wa-msg.voice .play { grid-area: play; width: 0; height: 0; border-left: calc(var(--pt) * 14) solid var(--wa-icon); border-top: calc(var(--pt) * 9) solid transparent; border-bottom: calc(var(--pt) * 9) solid transparent; }
.wa-msg.voice .wave { grid-area: wave; height: calc(var(--pt) * 22); background: repeating-linear-gradient(to right, var(--wa-icon) 0 calc(var(--pt) * 2.2), transparent calc(var(--pt) * 2.2) calc(var(--pt) * 4.4)); clip-path: polygon(0 45%, 4% 25%, 8% 65%, 12% 15%, 16% 80%, 20% 35%, 24% 60%, 28% 10%, 32% 70%, 36% 30%, 40% 90%, 44% 40%, 48% 55%, 52% 5%, 56% 75%, 60% 35%, 64% 60%, 68% 20%, 72% 85%, 76% 45%, 80% 65%, 84% 25%, 88% 70%, 92% 40%, 96% 60%, 100% 50%, 100% 100%, 0 100%); opacity: .9; }
.wa-msg.voice .meta { grid-area: meta; display: flex; justify-content: space-between; color: var(--wa-time); font-size: calc(var(--pt) * 11); }
.wa-msg.voice .meta time { float: none; margin: 0; }
/* Barra de escritura de iOS: +, campo con sticker, cámara y micrófono. */
.wa-input { display: flex; align-items: center; gap: calc(var(--pt) * 10); padding: calc(var(--pt) * 6) calc(var(--pt) * 12) calc(var(--pt) * 6); background: var(--wa-bar); border-top: 1px solid var(--wa-line); color: var(--wa-link); }
.wa-input .plus { font-size: calc(var(--pt) * 26); font-weight: 300; line-height: 1; }
.wa-input .field { flex: 1; display: flex; align-items: center; justify-content: space-between; height: calc(var(--pt) * 34); border: 1px solid var(--wa-line); border-radius: calc(var(--pt) * 17); padding: 0 calc(var(--pt) * 10) 0 calc(var(--pt) * 12); background: var(--wa-field); color: var(--wa-time); font-size: calc(var(--pt) * 15.5); }
.wa-input svg { width: calc(var(--pt) * 24); height: calc(var(--pt) * 24); flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wa-input .field svg { width: calc(var(--pt) * 22); height: calc(var(--pt) * 22); color: var(--wa-icon); }
.ios-home { height: calc(var(--pt) * 28); background: var(--wa-bar); position: relative; }
.ios-home::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--pt) * 8); width: calc(var(--pt) * 134); height: calc(var(--pt) * 5); margin-left: calc(var(--pt) * -67); border-radius: calc(var(--pt) * 3); background: var(--wa-text); }

/* --- Confianza y cifras --- */
.marketing-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 0 0 56px; }
.marketing-trust article { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.marketing-trust .feature-icon { margin-top: 2px; }
.marketing-trust strong { display: block; font-size: 15px; }
.marketing-trust p { margin: 3px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.marketing-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px clamp(24px, 5vw, 72px); width: min(1180px, calc(100% - 32px)); margin: -24px auto 56px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.marketing-stats > div { text-align: center; }
.marketing-stats strong { display: block; font: 800 32px Manrope, sans-serif; color: var(--primary); }
.marketing-stats span { color: var(--muted); font-size: 14px; }

.feature-icon { width: 44px; height: 44px; display: grid; place-items: center; flex: none; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.feature-icon svg { width: 22px; height: 22px; stroke-width: 1.9; }

/* --- El problema --- */
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.problem-grid article { padding: 26px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.problem-grid span { display: inline-block; color: var(--primary); font: 800 14px Manrope, sans-serif; letter-spacing: 1px; }
.problem-grid h3 { margin: 12px 0 8px; font-size: 20px; }
.problem-grid p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }

/* --- Tres automatizaciones --- */
.auto-list { display: grid; gap: 28px; }
.auto-item { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; padding: 36px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.auto-item:nth-child(even) .auto-copy { order: 2; }
.auto-copy > span { display: block; color: var(--primary); font-size: 13.5px; font-weight: 800; letter-spacing: 1.3px; }
.auto-copy h3 { margin: 10px 0 12px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; }
.auto-copy p { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.auto-copy ul { margin: 14px 0 0; padding: 0; list-style: none; }
.auto-copy li { position: relative; margin: 8px 0; padding-left: 24px; color: var(--ink); font-size: 16px; line-height: 1.45; }
.auto-copy li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.auto-copy .chip { display: inline-block; margin-top: 16px; padding: 7px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 13.5px; font-weight: 700; }
.auto-copy .chip.beta { background: var(--orange-soft); color: var(--orange); }
.auto-visual { min-width: 0; }
.auto-visual .iphone { width: min(330px, 100%); }
.marketing-hero-visual .iphone { width: min(370px, 100%); transform: rotate(-2deg); }

/* Lectura de un contrato con IA: archivos que entran, datos que salen. */
.reader { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-2); box-shadow: var(--shadow); }
.reader-files { display: flex; flex-wrap: wrap; gap: 8px; }
.reader-files span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.reader-arrow { margin: 14px 0 10px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .6px; }
.reader-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; }
.reader-fields div { padding: 9px 11px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); }
.reader-fields small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .4px; }
.reader-fields strong { display: block; font-size: 14px; margin-top: 2px; }
.reader-fields div.missing { border-style: dashed; }
.reader-fields div.missing strong { color: var(--orange); }
.reader-confirm { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.reader-confirm small { color: var(--muted); font-size: 12.5px; }
.reader-confirm span { padding: 8px 14px; border-radius: 8px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 800; }

/* Un mes de avisos, como un calendario vertical. */
.timeline { padding: 20px 22px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-2); box-shadow: var(--shadow); }
.timeline-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.timeline-head strong { font: 800 17px Manrope, sans-serif; }
.timeline-head span { color: var(--muted); font-size: 13px; font-weight: 600; }
.timeline-list { margin: 0; padding: 0; list-style: none; }
.timeline-list li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 8px 0; }
/* El hilo va de un círculo al siguiente y termina en el último. */
.timeline-list li:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 48px; bottom: -8px; width: 2px; background: var(--line); }
.timeline-list .day { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary-line); color: var(--primary); font: 800 14px Manrope, sans-serif; }
.timeline-list strong { display: block; padding-top: 9px; font-size: 15px; }
.timeline-list p { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }

/* --- El resto del sistema --- */
.system-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.system-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.system-grid article { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.system-grid h3 { margin: 10px 0 6px; font-size: 17px; }
.system-grid p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
/* Lo que viene: se muestra, pero se nota que todavía no está. */
.system-grid article.soon { border-style: dashed; background: var(--surface-2); }
.system-grid article.soon .feature-icon { background: var(--orange-soft); color: var(--orange); }
.soon-tag { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 3px 7px; border-radius: 999px; background: var(--orange-soft); color: var(--orange); font: 800 10.5px "DM Sans", sans-serif; letter-spacing: .8px; }

/* El Inicio de la aplicación, en CSS: mismas partes y mismo orden que index.html (período, cobrado,
   honorarios, los cuatro estados y los pendientes del mes). */
.product-preview { width: min(640px, 100%); margin: 0 auto; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; font-size: 10px; line-height: 1.35; }
.preview-window-bar { height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.preview-window-bar > span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.preview-window-bar > span:first-child { background: #f18c8c; }
.preview-window-bar > span:nth-child(2) { background: #f5c765; }
.preview-window-bar > span:nth-child(3) { background: #68c994; }
.preview-window-bar p { margin: 0 auto; padding: 2px 10px; border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 9px; }
.preview-shell { display: grid; grid-template-columns: 128px 1fr; background: var(--canvas); }
.preview-shell aside { display: flex; flex-direction: column; gap: 3px; padding: 14px 10px; border-right: 1px solid var(--line); background: var(--surface); }
.preview-brand { display: flex; align-items: center; gap: 7px; margin: 0 4px 12px; }
.preview-brand svg { width: 22px; height: 22px; }
.preview-brand b { font: 800 12px Manrope, sans-serif; }
.preview-shell aside i { display: block; padding: 6px 9px; border-radius: 7px; color: var(--muted); font-style: normal; font-weight: 600; }
.preview-shell aside i.active { background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.preview-profile { display: flex; align-items: center; gap: 7px; margin: auto 2px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.preview-profile > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 8px; font-weight: 800; }
.preview-profile b { display: block; font-size: 9.5px; }
.preview-profile small { display: block; color: var(--muted); font-size: 8px; }
.preview-content { padding: 16px; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.preview-heading strong { display: block; font: 800 16px Manrope, sans-serif; }
.preview-heading small { display: block; margin-top: 2px; color: var(--muted); font-size: 9.5px; }
.preview-heading button { height: 26px; border: 0; border-radius: 7px; padding: 0 10px; background: var(--primary); color: #fff; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.preview-month { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin: 14px 0 10px; }
.preview-month small { display: block; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .6px; }
.preview-month > div > strong { display: block; margin-top: 3px; font: 800 13px Manrope, sans-serif; }
.preview-money { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.preview-money > div { padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.preview-money span { display: block; color: var(--muted); font-size: 8.5px; }
.preview-money strong { display: block; margin: 2px 0 1px; font: 800 14px Manrope, sans-serif; }
.preview-money small { display: block; color: var(--muted); font-size: 8.5px; }
.preview-money i { display: block; height: 4px; margin-top: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.preview-money i b { display: block; height: 100%; background: var(--green); }
.preview-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.preview-status article { padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); border-left-width: 3px; }
.preview-status article.neutral { border-left-color: var(--muted); }
.preview-status article.info { border-left-color: var(--primary); }
.preview-status article.success { border-left-color: var(--green); }
.preview-status article.danger { border-left-color: var(--red); }
.preview-status small { display: block; color: var(--muted); font-size: 8.5px; }
.preview-status strong { display: block; margin: 2px 0; font: 800 16px Manrope, sans-serif; }
.preview-status em { display: block; color: var(--muted); font-size: 8px; font-style: normal; }
.preview-list { margin-top: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.preview-list-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; background: var(--surface-2); }
.preview-list-head strong { font-size: 10.5px; }
.preview-list-head span { padding: 2px 7px; border-radius: 99px; background: var(--primary-soft); color: var(--primary); font-size: 8.5px; font-weight: 700; }
.preview-list > div:not(.preview-list-head) { display: grid; grid-template-columns: 62px 1fr 1.3fr auto; align-items: center; gap: 8px; padding: 8px 11px; border-top: 1px solid var(--line); }
.preview-list > div > span { color: var(--muted); }
.preview-list > div > b { font-size: 10.5px; }
.preview-list em { width: max-content; padding: 3px 7px; border-radius: 99px; font-size: 8.5px; font-style: normal; font-weight: 800; }
.preview-list em.paid { color: var(--green); background: var(--green-soft); }
.preview-list em.pending { color: var(--primary); background: var(--primary-soft); }
.preview-list em.late { color: var(--red); background: var(--red-soft); }

/* --- Cómo funciona --- */
.steps-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps-list article { padding: 26px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.steps-list article > strong { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; font: 800 15px Manrope, sans-serif; }
.steps-list h3 { margin: 14px 0 8px; font-size: 20px; }
.steps-list p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }

/* --- Calculadora --- */
.calculator-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: start; }
.calculator-form { display: grid; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.calculator-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
.calculator-form input, .calculator-form select { height: 44px; border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 500; }
.calculator-form input:focus, .calculator-form select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.calculator-form input[aria-invalid="true"] { border-color: var(--red); }
/* Mensajes de validación en vivo (validaciones.js): mismos nombres que en la app. */
.field-message { display: block; margin-top: 4px; color: var(--red); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.field-message.warning { color: var(--orange); }
.calculator-money { display: grid; grid-template-columns: auto 1fr; align-items: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.calculator-money span { padding: 0 0 0 12px; color: var(--muted); font-weight: 700; }
.calculator-money input { border: 0; background: transparent; }
.calculator-money input:focus { box-shadow: none; }
.calculator-error { margin: 0; color: var(--red); font-size: 14px; font-weight: 600; }
.calculator-result { min-height: 100%; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.calculator-empty { display: grid; justify-items: center; gap: 12px; padding: 36px 12px; text-align: center; color: var(--muted); }
.calculator-empty svg { width: 36px; height: 36px; fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.calculator-empty p { margin: 0; font-size: 15px; line-height: 1.5; }
.calculator-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calculator-summary > div { padding: 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.calculator-summary > div.next { background: var(--primary-soft); border-color: var(--primary-line); }
.calculator-summary small { display: block; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.calculator-summary strong { display: block; margin: 6px 0 4px; font: 800 28px Manrope, sans-serif; }
.calculator-summary span { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.calculator-steps { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.calculator-step { display: grid; grid-template-columns: .8fr 1.6fr .8fr; gap: 10px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 14px; }
.calculator-step.head { border-top: 0; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .4px; }
.calculator-step small { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; }
.calculator-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--primary-soft); }
.calculator-cta p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.calculator-source { margin: 16px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

/* --- Planes: cuatro tarjetas cortas (precio, para quién, límites, botón), una línea con lo que tienen
   todos y un cuadro solo con lo que cambia entre planes. --- */
.plan-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.plan-card.recommended { border: 2px solid var(--primary); box-shadow: 0 20px 50px rgba(39, 105, 232, .12); }
.plan-badge { position: absolute; top: -13px; left: 22px; padding: 6px 11px; border-radius: 99px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .6px; white-space: nowrap; }
.plan-card > span { color: var(--primary); font-size: 13px; font-weight: 800; letter-spacing: 1.1px; }
.plan-card > strong { display: block; margin: 10px 0 6px; font: 800 30px Manrope, sans-serif; line-height: 1.05; }
.plan-card > strong small { color: var(--muted); font: 500 15px "DM Sans", sans-serif; }
.plan-card > p { min-height: 44px; margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.plan-card ul { flex: 1; margin: 18px 0 20px; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; }
.plan-card li { margin: 0 0 9px; color: var(--muted); font-size: 14.5px; line-height: 1.35; }
.plan-card li b { color: var(--ink); font-weight: 700; }
.plan-card button { width: 100%; height: 44px; border: 1px solid var(--primary-line); border-radius: 9px; background: var(--primary-soft); color: var(--primary); font-size: 15.5px; font-weight: 800; cursor: pointer; }
.plan-card.recommended button { border-color: var(--primary); background: var(--primary); color: #fff; }
.plan-base { margin: 22px 0 0; padding: 14px 18px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.plan-base b { color: var(--ink); font-weight: 700; }
.plan-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 18px -16px 0; padding: 0 16px 4px; }
.plan-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.plan-table th, .plan-table td { padding: 11px 14px; border-top: 1px solid var(--line); text-align: center; vertical-align: middle; font-size: 14px; }
.plan-table thead th { border-top: 0; padding: 14px; color: var(--muted); font-size: 12.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; background: var(--surface-2); }
.plan-table thead th.rec { color: var(--primary); background: var(--primary-soft); }
.plan-table th[scope="row"], .plan-table .feature-col { text-align: left; }
.plan-table th[scope="row"] { position: sticky; left: 0; z-index: 1; min-width: 220px; width: 40%; background: var(--surface); color: var(--ink); font-weight: 600; }
.plan-table td.rec { background: var(--primary-soft); }
.plan-table td.yes span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-weight: 800; }
.plan-table td.no span { color: var(--muted); opacity: .55; font-weight: 700; }

/* --- Preguntas --- */
.faq-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; }
.faq-list { display: grid; gap: 10px; }
.faq-list details { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 0 20px; }
.faq-list summary { cursor: pointer; list-style: none; padding: 18px 0; font-size: 17px; font-weight: 800; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list p { margin: 0; padding: 0 0 18px; color: var(--muted); font-size: 16px; line-height: 1.6; }

/* --- Demo --- */
.demo-section { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.demo-section h2 { margin: 12px 0 14px; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; }
.demo-section > div > p { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.6; }
.demo-alternative { margin-top: 24px; color: var(--muted); font-size: 16px; }
.demo-alternative button { border: 0; border-bottom: 1px solid var(--primary); padding: 0 1px; background: transparent; color: var(--primary); font-size: 16px; font-weight: 800; cursor: pointer; }
.whatsapp-contact { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 11px 16px; border-radius: 10px; background: var(--green-soft); color: var(--green); text-decoration: none; font-size: 16px; font-weight: 800; }
.whatsapp-contact svg { width: 20px; height: 20px; fill: currentColor; }
.whatsapp-contact.footer { margin: 0; padding: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 15px; }
.whatsapp-contact.footer svg { width: 16px; height: 16px; }
#demoForm { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
#demoForm label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; }
#demoForm label small { font-weight: 500; color: var(--muted); }
#demoForm input, #demoForm select { height: 44px; border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; background: var(--surface); color: var(--ink); font-size: 16px; }
#demoForm input:focus, #demoForm select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
#demoForm input[aria-invalid="true"] { border-color: var(--red); }
#demoForm button { grid-column: 1 / -1; height: 48px; border: 0; border-radius: 9px; background: var(--primary); color: #fff; font-size: 17px; font-weight: 800; cursor: pointer; }
#demoForm button:disabled { opacity: .7; cursor: default; }
#demoFormStatus { grid-column: 1 / -1; }
.demo-status { margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.demo-status.success { background: var(--green-soft); color: var(--green); }
.demo-status.error { background: var(--red-soft); color: var(--red); }

/* --- Pie --- */
.marketing-footer { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 40px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.marketing-footer .marketing-brand { align-self: start; }
.marketing-footer > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 320px; }
.footer-col strong { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 800; letter-spacing: 1px; color: var(--muted); }
.footer-col a, .footer-col button { display: block; margin: 0 0 10px; padding: 0; border: 0; background: transparent; color: var(--ink); text-decoration: none; font-size: 15.5px; font-weight: 600; cursor: pointer; text-align: left; }
.footer-col a:hover, .footer-col button:hover { color: var(--primary); }
.footer-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }

/* --- Pantallas chicas --- */
@media (max-width: 1050px) {
  .marketing-nav { display: none; }
  .marketing-header { grid-template-columns: 1fr auto; }
  .marketing-hero { grid-template-columns: 1fr; padding-top: 48px; }
  .marketing-hero-visual { order: 2; }
  .auto-item, .auto-item:nth-child(even) .auto-copy { grid-template-columns: 1fr; order: 0; }
  .system-layout, .faq-section, .demo-section, .calculator-layout { grid-template-columns: 1fr; }
  .plan-cards { grid-template-columns: 1fr 1fr; }
  .marketing-footer { grid-template-columns: 1fr 1fr; }
  .marketing-trust, .problem-grid, .steps-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .marketing-header { gap: 10px; }
  .marketing-header-actions { gap: 6px; }
  .marketing-header-actions .marketing-primary { padding: 0 12px; font-size: 14.5px; white-space: nowrap; }
  .marketing-brand .logo-nombre { width: 92px; height: 18px; }
  .preview-month { grid-template-columns: 1fr; gap: 8px; }
  .preview-month > div > strong { white-space: nowrap; }
  .marketing-header { height: 64px; }
  .marketing-brand small { display: none; }
  .marketing-login { display: none; }
  .marketing-section { padding: 60px 0; }
  .marketing-hero h1 { font-size: clamp(34px, 9.5vw, 44px); }
  .marketing-hero-copy > p { font-size: 17px; }
  .marketing-hero-actions .marketing-primary, .marketing-hero-actions .marketing-secondary { width: 100%; }
  .marketing-hero-visual .iphone { transform: none; }
  .auto-item { padding: 22px; }
  .system-grid, .reader-fields, .calculator-summary { grid-template-columns: 1fr; }
  .plan-cards { grid-template-columns: 1fr; }
  .plan-card > p { min-height: 0; }
  .preview-shell { grid-template-columns: 1fr; }
  .preview-shell aside { display: none; }
  .preview-status { grid-template-columns: 1fr 1fr; }
  .preview-list > div:not(.preview-list-head) > span { display: none; }
  #demoForm { grid-template-columns: 1fr; padding: 20px; }
  .marketing-footer { grid-template-columns: 1fr; }
  .calculator-cta { flex-direction: column; align-items: flex-start; }
}

/* --- Páginas interiores: calculadora, guías, nosotros, legales --- */
.page-hero { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 44px 0 36px; }
.page-hero h1 { max-width: 820px; margin: 12px 0 14px; font-size: clamp(32px, 4.2vw, 50px); line-height: 1.06; font-weight: 800; letter-spacing: -.03em; }
.page-hero > p { max-width: 720px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.6; }
.page-hero .page-meta { margin-top: 14px; font-size: 14px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--muted); font-size: 14px; font-weight: 600; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs > span:last-child { color: var(--ink); }
/* El artículo ocupa el mismo ancho que el encabezado de la página; el texto se limita a 780 px, alineado a la izquierda. */
.article { padding-top: 36px; padding-bottom: 72px; font-size: 17px; line-height: 1.7; }
.article > * { max-width: 780px; }
.article h2 { margin: 44px 0 12px; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; }
.article h3 { margin: 28px 0 8px; font-size: 20px; }
.article p { margin: 0 0 16px; }
.article ul, .article ol { margin: 0 0 18px; padding-left: 22px; }
.article li { margin: 0 0 8px; }
.article li::marker { color: var(--primary); }
.article a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
.article .faq-list { margin-top: 8px; }
.article .faq-list summary { font-size: 16px; }
.article .faq-list p { font-size: 15.5px; padding-bottom: 16px; }
.article.legal h1 { margin: 0 0 6px; font-size: clamp(30px, 4vw, 42px); line-height: 1.12; }
.article.legal .updated { margin: 0 0 24px; color: var(--muted); font-size: 14px; }
.article.legal .note { margin-top: 32px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 14px; }
.tldr { margin: 0 0 28px; padding: 18px 22px; border-radius: 16px; border: 1px solid var(--primary-line); background: var(--primary-soft); }
.tldr > strong { display: block; margin-bottom: 8px; color: var(--primary); font-size: 13px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.tldr ul { margin: 0; padding-left: 20px; }
.tldr li { margin: 0 0 6px; font-size: 16px; line-height: 1.5; }
.toc { margin: 0 0 8px; padding: 16px 20px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.toc > strong { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; letter-spacing: 1px; color: var(--muted); }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 24px; }
.toc li { margin: 0 0 4px; font-size: 15px; break-inside: avoid; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--primary); }
.formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 20px; padding: 14px 18px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.formula > span:nth-child(odd) { padding: 6px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.formula > span:first-child { background: var(--primary); border-color: var(--primary); color: #fff; }
.steps { counter-reset: paso; list-style: none; padding-left: 0; }
.steps li { position: relative; padding-left: 44px; margin-bottom: 12px; }
.steps li::before { counter-increment: paso; content: counter(paso); position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--primary); color: #fff; font: 800 14px Manrope, sans-serif; }
.article-table { width: 100%; margin: 12px 0 22px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 15px; line-height: 1.45; }
.article-table th, .article-table td { padding: 10px 14px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-table thead th { border-top: 0; background: var(--surface-2); color: var(--muted); font-size: 12.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.article-table td.yes { color: var(--green); font-weight: 700; }
.article-table.numbers td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.article-table tr.total td { font-weight: 800; background: var(--primary-soft); }
.article-table.compare td:nth-child(n + 2) { text-align: center; }
.article-cta { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; margin: 32px 0; padding: 22px 24px; border-radius: 16px; border: 1px solid var(--primary-line); background: var(--primary-soft); }
.article-cta strong { display: block; font-size: 18px; margin-bottom: 4px; }
.article-cta p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.sources { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.5; }
.guide-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.guide-card { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.guide-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.guide-card > span { color: var(--primary); font-size: 12.5px; font-weight: 800; letter-spacing: 1.2px; }
.guide-card h2 { margin: 10px 0 8px; font-size: 22px; line-height: 1.2; }
.guide-card p { flex: 1; margin: 0 0 14px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.guide-card small { color: var(--primary); font-size: 14px; font-weight: 700; }
.guide-card.tool { border-color: var(--primary-line); background: var(--primary-soft); }
@media (max-width: 760px) {
  .toc ol { columns: 1; }
  .article-cta { grid-template-columns: 1fr; }
  .guide-cards { grid-template-columns: 1fr; }
  .article-table { display: block; overflow-x: auto; }
}
.footer-meta a { color: var(--muted); text-decoration: none; font-weight: 600; }
.footer-meta a:hover { color: var(--primary); }