/* Shared refresh: dark / aqua identity, with a restrained warm accent. */
:root {
  --orange: #ffad70;
  --orange-ink: #1e1007;
  --orange-soft: rgba(255, 173, 112, .1);
  --orange-line: rgba(255, 173, 112, .36);
  --muted: rgba(247, 251, 248, .66);
}

html { scroll-padding-top: 100px; }
.pilot-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem .9rem;
  max-width: 100%;
  margin: .6rem 0 1rem;
  padding: .7rem 1rem;
  border: 1px solid var(--orange-line);
  border-radius: 14px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;
}
.pilot-badge small { color: var(--soft); font-size: .75rem; font-weight: 500; letter-spacing: 0; }
.pilot-badge:hover { border-color: var(--orange); }
.hero h1 { font-size: clamp(2.5rem, 7.3vw, 6.25rem); line-height: 1; word-spacing: .05em; }
.hero .hero-lead { max-width: 58ch; line-height: 1.65; }
.hero .hero-actions { margin-top: 1.35rem; }
.primary-btn { background: var(--aqua); color: var(--bg); }
.nav-cta { background: var(--orange); color: var(--orange-ink); }
.secondary-btn:hover { border-color: var(--orange-line); background: var(--orange-soft); }
.pilot-label, .plan-sello, .trust-section .audit-question > span { color: var(--orange); }
.plan-sello { background: var(--orange-soft); border-color: var(--orange-line); }
.pilot-panel { border-color: var(--orange-line); background: linear-gradient(115deg, var(--orange-soft), var(--panel)); }
.plan { display: flex; flex-direction: column; min-width: 0; }
.plan--destacado { border-color: var(--orange-line); border-top: 3px solid var(--orange); }
.plan .plan-lista { flex: 1; }
.plan .plan-btn { min-height: 48px; }
.plan-extra { line-height: 1.6; color: var(--soft); }
.pricing-lead { max-width: 52ch; }
.planes-nota { line-height: 1.7; }
.legal-doc h2 { border-left: 2px solid var(--orange); padding-left: .8rem; }
.legal-doc p, .legal-doc li { line-height: 1.75; }
.legal-links a:hover, .legal-footer a:hover { color: var(--orange); }
.legal-nav { gap: 1.25rem; }
.legal-links a { display: inline-flex; align-items: center; min-height: 44px; }
/* Both the scripted and live chat use one fixed outer box. Flex children may
   shrink; message content is never allowed to determine the phone height. */
#flujo .story-phone, #flujo.demo-live .story-phone {
  width: clamp(280px, 26vw, 340px);
  height: clamp(574px, 53.3vw, 697px);
  min-height: 0;
  flex: none;
  transition: transform 700ms var(--ease);
}
#flujo .phone-screen { min-height: 0; height: 100%; isolation: isolate; }
#story-phone-chat { flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
#story-phone-chat > * { flex-shrink: 0; overflow-wrap: anywhere; }
#flujo .wa-header, #flujo .wa-statusbar, #flujo .wa-inputbar, #flujo .phone-home { flex-shrink: 0; }
#story-phone-chat .bubble { max-width: 90%; }
#flujo .wa-field-live { min-width: 0; }
@media (max-width: 760px) {
  #flujo .story-phone, #flujo.demo-live .story-phone { width: min(76vw, 288px); height: min(155.8vw, 590.4px); }
  .hero h1 { font-size: clamp(2.3rem, 9vw, 4.4rem); line-height: 1.06; }
  .pilot-badge { gap: .35rem .6rem; padding: .65rem .8rem; font-size: .7rem; }
  .pilot-badge small { font-size: .7rem; }
  .hero-fast-path { row-gap: .6rem; }
  .plan { padding: 1.5rem; }
  .legal-nav { align-items: flex-start; }
  .legal-links { gap: .25rem .75rem; }
  .os-tab { min-height: 44px; }
}
@media (max-width: 380px) {
  .pilot-badge small { flex-basis: 100%; order: 1; }
  .hero-actions > a { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html, #story-phone-chat { scroll-behavior: auto; }
  #flujo .story-phone, #flujo.demo-live .story-phone { transition: none; }
}

/* Legible metadata and text links; avoid continuous repainting on small screens. */
.mi-time, .mi-prev, .voice-topic-pill > span { color: var(--soft); }
.sistemas-lead a, .planes-nota a { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .site-nav, .liquid-glass, .story-note { backdrop-filter: none; -webkit-backdrop-filter: none; }
  #flujo .story-phone { transform: none; }
}

/* Contain decorative effects without creating a horizontal scroll area. */
html, body { overflow-x: clip; }

/* Mobile is a reading sequence, not a scaled desktop canvas. */
.hero-mobile-title, .mobile-overview { display: none; }
@media (max-width: 1040px) {
  html.mobile-menu-open, html.mobile-menu-open body { overflow: hidden; }
  .site-nav.menu-open::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.8); z-index: -1; }
  .site-nav .nav-links { max-height: calc(100dvh - 100px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 88px; }
  body { padding-bottom: env(safe-area-inset-bottom); }
  .site-nav { top: max(8px, env(safe-area-inset-top)); padding: 6px 10px; gap: 8px; min-height: 56px; }
  .site-nav .brand { font-size: 1.45rem; }
  .site-nav .nav-cta { padding: 0 12px; min-height: 44px; font-size: .8rem; }
  .nav-toggle { width: 44px; height: 44px; flex-shrink: 0; }
  .hero { min-height: 0; padding: 92px 0 32px; text-align: left; }
  .hero-copy { width: 100%; max-width: none; }
  .hero .eyebrow { font-size: .7rem; letter-spacing: .07em; margin: 0 0 10px; text-align: left; }
  .hero .pilot-badge { margin: 0 0 16px; justify-content: flex-start; border-radius: 10px; font-size: .72rem; padding: 9px 10px; gap: 4px 10px; }
  .hero .pilot-badge small { flex-basis: auto; order: 0; font-size: .7rem; }
  .hero .pilot-badge > [aria-hidden] { display: none; }
  .hero-desktop-title { display: none; }
  .hero-mobile-title { display: inline; }
  .hero h1 { margin: 0; font-size: clamp(2rem, 8.9vw, 2.65rem); line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
  .hero-title-wrap { margin: 0; }
  .hero .hero-lead { font-size: 1rem; line-height: 1.55; margin: 16px 0 0; max-width: none; }
  .hero-rotator, .hero-cue, .hero-spotlight { display: none; }
  .hero .hero-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 18px; }
  .hero-actions a { min-height: 48px; padding: 12px; width: 100%; font-size: .95rem; }
  .hero-fast-path { justify-content: flex-start; gap: 4px 12px; margin-top: 10px; }
  .hero-fast-path a { font-size: .8rem; min-height: 44px; padding: 4px 0; }
  .ambient-particles { display: none; }
  .ambient-bg { background: var(--bg); }
  .hero, main > section, .site-footer { width: calc(100% - 32px); max-width: 620px; margin-left: auto; margin-right: auto; }
  main > section:not(.hero) { padding-top: 40px; padding-bottom: 40px; }
  main > section h2 { font-size: clamp(1.75rem, 7.4vw, 2.2rem); line-height: 1.12; letter-spacing: -.035em; }
  main > section p { line-height: 1.6; }
  .section-copy, .story-intro, .voice-copy, .cta-copy { padding: 0; text-align: left; }
  .section-copy p, .story-intro > p, .voice-copy > p, .cta-copy > p { font-size: 1rem; }
  .mobile-overview { display: block; border-top: 1px solid var(--line); }
  .mobile-overview > p { color: var(--soft); font-size: 1rem; }
  .mobile-overview .eyebrow { color: var(--orange); font-size: .72rem; letter-spacing: .07em; }
  .mobile-overview h2 { margin: 12px 0 16px; }
  .mobile-benefits { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 20px; }
  .mobile-benefits li { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 12px; }
  .mobile-benefits li > span { color: var(--orange); font-weight: 800; padding-top: 3px; }
  .mobile-benefits h3, .mobile-included h3 { font-size: 1.05rem; margin: 0 0 6px; }
  .mobile-benefits p, .mobile-included p { font-size: .95rem; color: var(--soft); margin: 0; }
  .mobile-included { padding: 20px; border: 1px solid var(--orange-line); border-radius: 18px; background: var(--orange-soft); }
  .mobile-included a { color: var(--orange); display: inline-flex; align-items: center; min-height: 48px; line-height: 1.5; margin-top: 10px; font-weight: 700; }
  .os-tabs { flex-wrap: wrap; overflow: visible; }
  .os-tab { min-height: 44px; font-size: .8rem; white-space: normal; }
  .os-step { padding: 16px; }
  .os-step p, .os-caption, .os-note, .os-kpi small { font-size: .88rem; }
  .os-disclaimer { font-size: .85rem !important; }
  .mail-app { min-width: 0; }
  .mail-body { display: flex; flex-direction: column; }
  .message-list { max-height: 180px; overflow-y: auto; overscroll-behavior: contain; }
  .message-item { min-height: 64px; padding: 12px; }
  .message-item .mi-from, .message-item .mi-sub { font-size: .9rem; }
  .message-item .mi-prev, .mi-time { font-size: .8rem; }
  .reader-content { padding: 16px; font-size: .95rem; }
  .reader-toolbar { flex-wrap: wrap; }
  .reader-toolbar button, .reader-actions button { min-height: 44px; }
  .story-scrollcue, .desk-scene, .story-radar { display: none; }
  #flujo .story-phone-pin { position: static; min-height: 0; padding: 24px 0 0; gap: 24px; }
  #flujo .story-phone, #flujo.demo-live .story-phone { width: min(100%, 270px); height: 554px; transform: none; transition: none; }
  #flujo .story-notes, #flujo.demo-live .story-notes { display: grid; width: 100%; grid-template-columns: 1fr; gap: 12px; }
  #flujo .story-notes .story-note { opacity: 1; transform: none; padding: 16px; min-height: 0; }
  .story-note h3 { font-size: 1rem; }
  .story-note p { font-size: .9rem; }
  .story-note .note-ic { width: 36px; height: 36px; flex-shrink: 0; }
  #story-phone-chat .bubble { font-size: .85rem; line-height: 1.45; }
  .voice-redesign { gap: 24px; }
  .voice-agent-figure { max-height: 240px; }
  .voice-topic-pill > span { font-size: .85rem; }
  .sistemas { padding-left: 0; padding-right: 0; }
  .sistemas h2 { font-size: 1.85rem; }
  .sistemas-lead { font-size: 1rem; }
  .pricing-shell { padding: 0; border: 0; background: none; box-shadow: none; }
  .planes { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; }
  .plan { padding: 24px 20px; border-radius: 20px; }
  .plan-precio { font-size: 3rem; line-height: 1.1; }
  .plan-lista { font-size: 1rem; line-height: 1.65; }
  .plan-lista li { margin-bottom: 8px; }
  .plan-extra, .planes-nota { font-size: .88rem; }
  .plan-btn { width: 100%; min-height: 48px; font-size: 1rem; }
  .pilot-panel { padding: 20px; }
  .pilot-panel h3 { font-size: 1.5rem; }
  .pilot-panel p { font-size: 1rem; }
  .trust-faq summary { font-size: 1rem; min-height: 56px; padding: 16px 0; }
  .cta-section { gap: 24px; }
  .lead-form { padding: 20px 16px; }
  .lead-form input, .lead-form select { min-height: 48px; max-width: 100%; }
  .consent { font-size: .88rem; line-height: 1.5; }
  .site-footer { padding: 32px 0 max(24px,env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
  .site-footer > div { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px 16px; }
  .site-footer div a { min-height: 44px; font-size: .9rem; }
  .site-footer .footer-demo, .site-footer a[href^="mailto:"] { grid-column: 1/-1; }
  .site-footer .footer-demo { color: var(--orange); font-size: 1rem; }
  .demo-modal-card { max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; padding: 24px 16px; }
  .demo-modal-close { min-width: 44px; min-height: 44px; }
  .legal-shell { width: calc(100% - 32px); padding-top: max(16px,env(safe-area-inset-top)); }
  .legal-nav { margin-bottom: 24px; gap: 16px; }
  .legal-links { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 4px 12px; font-size: .88rem; }
  .legal-links a { min-height: 44px; }
  .legal-doc { border-radius: 20px; }
  .legal-head, .legal-body { padding: 20px 16px; }
  .legal-head h1 { font-size: clamp(2rem,9vw,2.6rem); line-height: 1.08; max-width: none; overflow-wrap: anywhere; }
  .legal-body p, .legal-body li { font-size: 1rem; overflow-wrap: anywhere; }
  .legal-kicker { font-size: .72rem; }
  .legal-table-wrap { overflow: visible; border: 0; }
  .legal-table-wrap table { display: block; min-width: 0; width: 100%; }
  .legal-table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal-table-wrap tbody { display: block; }
  .legal-table-wrap tr { display: block; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
  .legal-table-wrap td { display: block; padding: 10px 0; font-size: .95rem; overflow-wrap: anywhere; border-bottom: 1px solid var(--line); }
  .legal-table-wrap td:last-child { border-bottom: 0; }
  .legal-table-wrap td::before { content: attr(data-label); display: block; margin-bottom: 6px; color: var(--orange); font-weight: 700; font-size: .8rem; }
  .legal-footer { font-size: .9rem; gap: 16px; }
  .legal-footer a { display: inline-flex; min-height: 44px; align-items: center; }
}
@media (max-width: 360px) {
  .hero { padding-top: 84px; }
  .hero .eyebrow { font-size: .64rem; }
  .hero .pilot-badge small { display: block; flex-basis: 100%; }
  .hero .pilot-badge { margin-bottom: 12px; }
  .hero .hero-lead { font-size: .95rem; margin-top: 12px; }
  .hero .hero-actions { margin-top: 14px; }
  .site-nav .brand { font-size: 1.25rem; }
  .site-nav .nav-cta { font-size: .72rem; padding: 0 8px; }
}
@media (max-width: 980px) and (orientation: landscape) and (max-height: 500px) {
  .site-nav .nav-links { max-height: calc(100dvh - 84px); }
  .hero { padding-top: 88px; }
}
/* The original title styles target every span; wrappers keep normal typography. */
.hero h1 .hero-desktop-title, .hero h1 .hero-mobile-title { font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; }
.hero h1 .hero-mobile-title { display: none; }
@media (max-width: 760px) {
  .hero h1 { max-width: none; margin-inline: 0; text-align: left; }
  .hero h1 .hero-desktop-title { display: none; }
  .hero h1 .hero-mobile-title { display: inline; }
  .hero h1 .hero-mobile-title .shiny { display: inline; font-family: inherit; font-style: normal; font-weight: inherit; line-height: inherit; }
  .hero .hero-fast-path a { flex: none; width: auto; border: 0; border-radius: 0; background: none; text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width: 760px) {
  html { scroll-behavior: auto; }
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}
@media (max-width: 760px) {
  .voice-head h2 { max-width: none; }
  .voice-robot { height: 300px; transform: none; }
  .voice-robot .voice-3d-fallback { transform: scale(.8); }
  .voice-sub { font-size: 1rem; }
}
@media (max-width: 760px) {
  main > section[id] { scroll-margin-top: 0; }
}
.message-item .mi-time, .message-item .mi-prev { color: var(--soft); }
@media (max-width: 760px) {
  .message-item .mi-time { font-size: .8rem; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   Planes: card que se entiende en tres segundos.
   Arriba a la derecha, la pegatina de MES GRATIS. Debajo del nombre, el precio
   y los dos datos que deciden la compra (minutos y locales). La lista se queda
   en lo vendedor; el detalle completo vive plegado al final de la sección.
   ───────────────────────────────────────────────────────────────────────────── */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.planes { align-items: stretch; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.3rem, 2.6vw, 1.8rem);
  overflow: visible;
}
.plan--destacado { border-color: var(--orange-line); border-top: 3px solid var(--orange); }

/* La pegatina: sello dentado, doble aro y relieve, pegado al vértice superior
   derecho. Va rotada como si alguien la hubiera pegado a mano. */
.plan-pegatina {
  position: absolute;
  top: -12px;
  right: -10px;
  width: var(--sello-tam, 72px);
  height: var(--sello-tam, 72px);
  display: grid;
  place-items: center;
  transform: rotate(11deg);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55));
  pointer-events: none;
  z-index: 2;
}
.plan-pegatina-sello {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--orange);
}
/* Dos aros interiores: el fino marca el canto del sello y el punteado le da el
   aire de pegatina troquelada. */
.plan-pegatina::before,
.plan-pegatina::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.plan-pegatina::before {
  inset: 9%;
  border: 1.5px solid rgba(30, 16, 7, .22);
}
.plan-pegatina::after {
  inset: 13%;
  border: 1px dashed rgba(30, 16, 7, .45);
}
.plan-pegatina-txt {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1px;
  width: 80%;
  color: var(--orange-ink);
  text-align: center;
  line-height: .98;
  text-transform: uppercase;
}
.plan-pegatina-txt b {
  font-size: calc(var(--sello-tam, 72px) * .172);
  font-weight: 900;
  letter-spacing: -.015em;
}
/* Brillo diagonal: volumen de pegatina, sin gradiente de plantilla. */
.plan-pegatina-txt::before {
  content: "";
  position: absolute;
  inset: -40% -26%;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 54%);
  pointer-events: none;
}

.plan-cab {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding-right: calc(var(--sello-tam, 72px) * .62);
  margin-bottom: .9rem;
}
.plan-cab .plan-nombre, .plan-cab .plan-para { margin: 0; }
.plan-cab .plan-para { color: var(--soft); font-size: .94rem; line-height: 1.4; }
.plan--destacado .plan-cab .plan-para { color: var(--aqua); }
.plan-sello { background: var(--orange-soft); border-color: var(--orange-line); color: var(--orange); }
.plan .plan-precio { margin-bottom: 1.1rem; }

/* Los dos datos duros, sin caja pesada: dos filetes finos los enmarcan. */
.plan-datos {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
  margin: 0 0 1.2rem;
  padding: .9rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.plan-datos li { display: grid; gap: 2px; min-width: 0; }
.plan-datos span {
  color: var(--muted);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.plan-datos strong { color: var(--ink); font-size: 1rem; line-height: 1.25; }
.plan-datos small { color: var(--muted); font-size: .76rem; line-height: 1.35; }

.plan .plan-lista { flex: 1; margin: 0 0 1.3rem; }
.plan-lista li.plan-herencia {
  margin-bottom: .7rem;
  padding-left: 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.plan-lista li.plan-herencia::before { display: none; }
.plan .plan-btn { min-height: 48px; }
.plan .plan-extra {
  margin: .8rem 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
  text-align: center;
}
.planes-nota {
  max-width: 78ch;
  margin: clamp(1.1rem, 2.6vw, 1.5rem) 0 0;
  color: var(--soft);
  font-size: .88rem;
  line-height: 1.75;
}
.planes-nota a { color: var(--orange); text-decoration: underline; text-underline-offset: .2em; }

/* Todo el detalle, plegado: la sección respira y no se pierde nada. */
.planes-detalle {
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.planes-detalle > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem clamp(1.1rem, 2.4vw, 1.5rem);
  min-height: 56px;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.planes-detalle > summary::-webkit-details-marker { display: none; }
.planes-detalle > summary:hover { color: var(--orange); }
.planes-detalle > summary i {
  position: relative;
  width: 12px;
  height: 12px;
  flex: none;
}
.planes-detalle > summary i::before,
.planes-detalle > summary i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--orange);
  transition: transform 220ms var(--ease);
}
.planes-detalle > summary i::after { transform: rotate(90deg); }
.planes-detalle[open] > summary i::after { transform: rotate(0deg); }
.planes-detalle[open] > summary { border-bottom: 1px solid var(--line); }
.detalle-cuerpo {
  display: grid;
  gap: clamp(1.2rem, 2.6vw, 1.8rem);
  padding: clamp(1.2rem, 2.6vw, 1.7rem);
}
.detalle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
.detalle-grid h3 { margin: 0 0 .35rem; font-size: 1rem; letter-spacing: -.015em; }
.detalle-grid p { margin: 0; color: var(--soft); font-size: .92rem; line-height: 1.6; }
.detalle-grid strong { color: var(--ink); }

.saltos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(.8rem, 2vw, 1.1rem);
  padding-top: clamp(1rem, 2.4vw, 1.4rem);
  border-top: 1px solid var(--line);
}
.salto { min-width: 0; }
.salto-cab {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 .7rem;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.salto-cab em { color: var(--orange); font-size: .76rem; font-style: normal; letter-spacing: .04em; }
.salto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.salto li { position: relative; padding-left: 1.05rem; color: var(--soft); font-size: .92rem; line-height: 1.55; }
.salto li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}
.salto strong { color: var(--ink); }

/* Resumen de planes del bloque móvil de bienvenida. */
.mobile-planes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.mobile-planes li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mobile-planes b { color: var(--orange); font-size: 1rem; }
.mobile-planes span { color: var(--soft); font-size: .92rem; }

@media (max-width: 760px) {
  .plan { --sello-tam: 66px; padding: 24px 20px; border-radius: 20px; }
  .plan-pegatina { top: -14px; right: -6px; transform: rotate(9deg); }
  .plan-cab { padding-right: 62px; }
  .plan-datos { padding: 14px 0; margin-bottom: 18px; }
  .plan .plan-lista { margin-bottom: 20px; }
  .plan-lista li { margin-bottom: 8px; line-height: 1.6; }
  .plan-btn { width: 100%; font-size: 1rem; }
  .planes-detalle > summary { font-size: .78rem; padding: 16px; }
  .detalle-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .saltos { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 380px) {
  .plan { --sello-tam: 60px; }
  .plan-pegatina { top: -10px; right: -4px; }
  .plan-cab { padding-right: 54px; }
  .plan-datos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* El relato con el móvil ocupaba casi cuatro pantallas de scroll: con dos y
   media se sigue leyendo paso a paso y la mitad inferior deja de eternizarse.
   En móvil ya estaba sin fijar, así que no le afecta. */
@media (min-width: 761px) { .story-section { min-height: 260svh; } }
/* Official brand and a quieter, sharper reading surface. */
.hero h1 span, .hero h1 .shiny, .brand, .marca { font-family: Archivo, system-ui, sans-serif; font-style: normal; }
.ambient-poster { position: absolute; inset: 0; opacity: .22; }
@media (min-width: 761px) {
  /* Fondo decorativo: como imagen de CSS, el móvil no llega a pedirlo. */
  .ambient-poster { background: url(../features/landing/media/hero-poster.jpg) center / cover no-repeat; }
}
.ambient-particles, .hero-title-fx, .lamp-edge, .desk-scene, .story-radar, .cta-glow { display: none; }
.site-nav, .liquid-glass, .story-note, .nav-links, .demo-modal-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-nav { background: var(--bg); }
/* El robot de CSS es el suplente del Spline: tiene que estar vivo, porque en
   los equipos donde el 3D no entra es LO QUE SE VE. Solo el marquesina sigue
   quieto (se resuelve aparte). */
.voice-robot { filter: none; }
#flujo.story-section { min-height: 0; display: block; padding-block: 48px; }
#flujo .story-intro { padding-top: 0; }
#flujo .story-phone-pin { position: static; min-height: 0; display: flex; justify-content: center; padding: 20px 0 0; }
#flujo .story-phone, #flujo.demo-live .story-phone { transform: none; transition: none; }
#flujo .story-phone-pin::before, #flujo .story-phone-pin::after { display: none; }
.plan:not(.plan--destacado) .plan-cab { padding-right: 0; }
.plan--destacado { border: 2px solid var(--orange); background: linear-gradient(160deg,var(--orange-soft),rgba(8,22,19,.97) 45%); box-shadow: 0 12px 32px rgba(0,0,0,.24); }
.plan--destacado .plan-cab { padding-right: 62px; }
.plan--destacado .plan-nombre { font-size: 1.3rem; }
.plan--destacado .plan-sello { display: block; width: fit-content; margin-top: 8px; font-size: .73rem; }
.plan-pegatina { --sello-tam: 86px; top: -20px; right: -14px; transform: rotate(9deg); filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)) drop-shadow(0 1px 0 rgba(255,255,255,.14)); }
.plan-pegatina::before, .plan-pegatina::after { z-index: 1; }
.plan-pegatina-txt { z-index: 2; }
.plan-pegatina-txt b { font-size: 15px; }
.plan .plan-precio strong { font-size: clamp(2.7rem,4.2vw,3.5rem); }
.plan-datos strong { font-size: 1.15rem; }
.plan-datos span, .plan-datos small, .plan-lista li.plan-herencia { color: var(--soft); font-size: .88rem; letter-spacing: 0; }
.plan-lista { font-size: 1rem; }
.plan-extra { font-size: .9rem; }
.plan-btn { font-size: 1rem; min-height: 48px; }
.planes, .pricing-shell.planes-shell { overflow: visible; }
.trust-faq { gap: 8px; }
.trust-faq summary { font-size: 1rem; min-height: 52px; }
@media (min-width: 981px) { .plan--destacado { transform: translateY(-10px); } }
@media (max-width: 760px) {
  body { font-size: 17px; }
  .site-nav .brand { min-width: 0; flex-shrink: 1; }
  .site-nav .nav-cta { padding-inline: 9px; font-size: .8rem; white-space: nowrap; }
  .hero .hero-lead, .voice-sub, .story-intro > p, .section-copy > p { font-size: 1.06rem; }
  .hero .hero-actions a { font-size: 1rem; }
  .hero h1 { font-size: clamp(2.15rem,9vw,2.8rem); }
  .plan-cab .plan-para { font-size: 1rem; }
  .plan--destacado { margin-top: 10px; }
  .plan-pegatina { top: -24px; right: -6px; }
  .plan--destacado .plan-cab { padding-right: 66px; }
  #flujo .story-phone, #flujo.demo-live .story-phone { width: min(100%,290px); height: 594px; }
  #story-phone-chat .bubble { font-size: .95rem; line-height: 1.5; }
  #story-phone-chat .b-meta { font-size: .75rem; }
  .ambient-poster {
    display: block;
    inset: -5%;
    background: url(../features/landing/media/hero-poster.jpg) center / cover no-repeat;
    opacity: .3;
    /* Quieto (antes ambientMobileDrift infinito): capa fija de pantalla
       completa, animarla repintaba toda la pantalla en cada fotograma. */
    transform: scale(1.08);
  }
  .phone, .os-window, .mail-app, .legal-doc, .plan, .lead-form { box-shadow: none; }
  .phone-screen { transform: none; }
  .planes-detalle > summary { font-size: .9rem; letter-spacing: .03em; }
  .trust-faq summary { padding-block: 14px; }
}
@media (max-width: 380px) {
  /* En pantallas estrechas el sello encoge para no comerse el nombre del plan. */
  .plan-pegatina { --sello-tam: 72px; top: -16px; right: -10px; }
  .plan--destacado .plan-cab { padding-right: 58px; }
}
@media (max-width: 360px) {
  .site-nav .nav-cta { font-size: .76rem; }
  #flujo .story-phone, #flujo.demo-live .story-phone { width: 270px; height: 554px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
/* Animación: se corta lo que gira eternamente y se conserva lo que informa.
   Los bucles infinitos decorativos (anillos del 3D, marquesina, radar, el
   degradado del titular) mantenían la GPU despierta todo el rato; los puntos
   de «escribiendo» y las entradas de burbuja duran un instante y cuentan algo. */
.spline-ring, .spline-core, .story-radar span { animation: none !important; }
@media (max-width: 760px) {
  /* En el móvil hasta los pulsos pequeños cuestan: se quedan quietos. */
  .os-live i, .draft-label i, .voice-wave i, .lead-badge i, .wa-ping,
  .voice-live-strip i, .call-live i { animation: none !important; }
}
.brand picture { display: block; }

#flujo .story-phone { transform-style: flat; will-change: auto; }
#flujo .phone-backplate, #flujo .phone-side { display: none; }
#flujo .phone-screen { contain: paint; }

/* ─────────────────────────────────────────────────────────────────────────────
   Coste de estilo y layout: el cuello de botella real de esta página.
   El perfil de Lighthouse (móvil, simulado) daba ~1,0-1,3 s de styleLayout
   frente a 60 ms de ejecución de JS: no sobra script, sobra recálculo sobre un
   DOM grande (bandeja, ventana OS, móvil, planes) con una hoja de estilo de
   5.800 líneas. Con content-visibility el navegador se salta el layout y el
   pintado de las secciones que no se ven, y solo las calcula al acercarse.
   contain-intrinsic-size reserva su altura aproximada para que la barra de
   scroll no salte y el CLS siga en cero; «auto» hace que recuerde la real.
   ───────────────────────────────────────────────────────────────────────────── */
/* Alturas REALES, medidas recorriendo la pagina entera. Ojo: si se miden sin
   recorrerla, las secciones bajo content-visibility devuelven su ESTIMACION y
   no su alto, asi que el valor se confirma a si mismo. Con estimaciones que
   mienten, la barra de scroll pega tirones y el salto de las anclas cae
   corto: se percibe como lag aunque no lo sea. */
#proceso { content-visibility: auto; contain-intrinsic-size: auto 880px; }
#inbox { content-visibility: auto; contain-intrinsic-size: auto 1280px; }
#flujo { content-visibility: auto; contain-intrinsic-size: auto 2640px; }
#voz { content-visibility: auto; contain-intrinsic-size: auto 2150px; }
#programas, .sistemas { content-visibility: auto; contain-intrinsic-size: auto 1300px; }
#faq { content-visibility: auto; contain-intrinsic-size: auto 1410px; }
#contacto { content-visibility: auto; contain-intrinsic-size: auto 1670px; }
@media (max-width: 760px) {
  #proceso { contain-intrinsic-size: auto 1120px; }
  #inbox { contain-intrinsic-size: auto 1140px; }
  #flujo { contain-intrinsic-size: auto 1340px; }
  #voz { contain-intrinsic-size: auto 1150px; }
  #programas, .sistemas { contain-intrinsic-size: auto 560px; }
  #faq { contain-intrinsic-size: auto 800px; }
  #contacto { contain-intrinsic-size: auto 1270px; }
}
/* El bloque de precio se deja siempre calculado: es el destino de varios
   enlaces internos y de la pegatina, que sobresale de su caja. */

/* Sin will-change residual: reservaba capas de composición para siempre. */
.story-phone, .phone-screen, .os-window, .mail-app { will-change: auto; }

/* ═════════════════════════════════════════════════════════════════════════════
   Pulido final: marca bien compuesta, hero con aire, relato con protagonismo,
   planes con pieza física y menos letra pequeña por todas partes.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── Marca en la barra ──────────────────────────────────────────────────────
   El wordmark es una imagen, no texto: la línea base del texto ya no sirve
   para alinearlo. Se centra ópticamente y se mide por altura, que es lo que
   lo empareja con los enlaces del menú. */
.brand {
  display: inline-grid;
  place-items: center;
  height: var(--marca-h);
  flex: 0 0 auto;
  line-height: 0;
  overflow: visible;
}
/* Una sola medida manda: la ALTURA. El ancho sale de la proporción del SVG, así
   que no hay forma de aplastarlo desde ningún breakpoint. Y sin transform: el
   encuadre del viewBox ya deja la tinta centrada en el lienzo (el origen del
   viewBox se corrigió en el propio asset, no se compensa aquí). */
.brand .brand-wordmark {
  display: block;
  width: auto;
  height: var(--marca-h);
  max-width: none;
}
.site-nav { align-items: center; }

/* Los anchors dejaban la sección pegada a la barra y, con el scroll suave,
   aterrizaban corto: la animación calcula el destino al empezar y las
   secciones con content-visibility cambian de alto mientras baja. Salto
   directo y con el hueco de la barra reservado: cae siempre en su sitio. */
html { scroll-behavior: auto; scroll-padding-top: 116px; }
@media (max-width: 760px) { html { scroll-padding-top: 92px; } }
/* Cada sección lleva su propio aire arriba; si no se descuenta, al pulsar el
   menú el título aparece medio scroll más abajo. El margen negativo es justo
   ese relleno, así que el titular queda a un palmo de la barra. */
:root { --pad-seccion: clamp(4.5rem, 9vw, 7.5rem); --marca-h: 28px; }
/* Con id, porque landing.css ya fija scroll-margin-top por id y un
   selector de clase no lo desbanca. */
#inicio, #proceso, #inbox, #flujo, #voz, #precio, #faq, #contacto {
  scroll-margin-top: calc(-1 * var(--pad-seccion) - 1px);
}
@media (max-width: 760px) { :root { --pad-seccion: 56px; --marca-h: 26px; } }
@media (max-width: 400px) { :root { --marca-h: 24px; } }
@media (max-width: 360px) { :root { --marca-h: 22px; } }

/* ── Hero: fondo de vuelta y más aire ──────────────────────────────────────
   El haz de luz y la rejilla son capas estáticas: se pintan una vez y viven
   en la capa de fondo, así que no cuestan al hacer scroll. En móvil, solo un
   degradado radial (sin blur ni imagen). */
.ambient::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(90, 240, 216, .10), transparent 58%),
    radial-gradient(90% 60% at 82% 8%, rgba(57, 120, 255, .09), transparent 62%);
  pointer-events: none;
}
/* El degradado del titular vuelve también en móvil: quieto no cuesta nada. */
@media (max-width: 760px) {
}
.hero { padding-block: clamp(7rem, 14vh, 11rem) clamp(5rem, 10vh, 8rem); }
.hero-copy > * + * { margin-top: 0; }
.hero .eyebrow { margin-bottom: 1.5rem; }
.hero .pilot-badge {
  margin: 0 0 2.1rem;
  padding: .5rem .95rem;
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.hero-title-wrap { margin-bottom: 1.9rem; }
.hero .hero-lead { margin: 0 auto; max-width: 56ch; font-size: 1.12rem; line-height: 1.7; }
.hero .hero-actions { margin-top: 2.6rem; gap: .9rem; }
@media (max-width: 760px) {
  .hero { padding: 104px 0 56px; }
  .hero .pilot-badge { margin: 0 0 22px; }
  .hero-title-wrap { margin-bottom: 20px; }
  .hero .hero-lead { font-size: 1.05rem; margin-top: 0; }
  .hero .hero-actions { margin-top: 26px; }
}

/* ── Aire entre bloques ─────────────────────────────────────────────────────
   Las secciones venían pegadas unas a otras; se les da respiración sin
   alargar la página con scroll vacío. */
#proceso, #inbox, #flujo, #voz, #precio, #faq, #contacto, .sistemas {
  padding-block: var(--pad-seccion);
}
main > section.hero { padding-block: clamp(7rem, 14vh, 11rem) clamp(5rem, 10vh, 8rem); }
.section-copy { margin-bottom: clamp(2rem, 4vw, 3rem); }
@media (max-width: 760px) {
  #proceso, #inbox, #flujo, #voz, #precio, #faq, #contacto, .sistemas { padding-block: var(--pad-seccion); }
}
/* Las notas al pie de los bloques dejan de competir con el contenido. */
.os-disclaimer { font-size: .82rem; line-height: 1.55; color: var(--muted); max-width: 62ch; }
.sistemas-nota { font-size: .8rem; color: var(--muted); }

/* ── Relato: la pieza estrella ─────────────────────────────────────────────
   El teléfono crece, el selector de escena se coloca debajo del texto con
   aire y la escena elegida se lee como titular, no como pie de foto. */
#flujo.story-section { padding-block: clamp(5rem, 10vw, 8rem); }
#flujo .story-intro { max-width: 62ch; margin-inline: auto; text-align: center; }
/* ── Selector de escenas: seis celdas iguales, no una nube de píldoras ─────
   Seis etiquetas de longitudes muy distintas ("Pedir cita" frente a "Pasar a
   una persona"). Con flex cada botón medía lo que medía su texto y la fila se
   partía donde le tocaba. Con rejilla, las seis celdas miden lo mismo: el
   ancho lo fija la columna, la altura la fija la fila más alta y el texto que
   no cabe en una línea envuelve centrado, sin recortarse. Esquinas suaves en
   vez de píldora, porque una píldora de dos líneas no existe. */
.story-chooser { max-width: 760px; margin: clamp(2rem, 4vw, 3rem) auto 0; text-align: center; }
.story-scene-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.story-scene-buttons button {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--soft);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.005em;
  text-align: center;
  text-wrap: balance;
  hyphens: none;
  cursor: pointer;
  transition: border-color 200ms var(--ease), color 200ms var(--ease), background 200ms var(--ease);
}
.story-scene-buttons button:hover {
  border-color: rgba(90, 240, 216, .38);
  color: var(--ink);
  background: rgba(90, 240, 216, .05);
}
.story-scene-buttons button:focus-visible,
.story-pause:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}
.story-scene-buttons button[aria-pressed="true"] {
  border-color: var(--aqua);
  color: var(--bg);
  background: var(--aqua);
  box-shadow: 0 10px 28px -18px rgba(90, 240, 216, .9);
}
.story-scene-buttons button[aria-pressed="true"]:hover {
  color: var(--bg);
  background: var(--aqua);
}
.story-chooser p {
  margin: 1.4rem 0 .2rem;
  min-height: 0;
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.story-chooser small { display: none; }
.story-pause {
  margin-top: 1rem;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  font: inherit;
  font-size: .82rem;
  font-weight: 650;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.story-pause:hover { color: var(--orange); border-color: var(--orange-line); }
#flujo .story-phone-pin { padding-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 981px) {
  /* En escritorio el teléfono manda: más alto y con su halo detrás. */
  #flujo .story-phone, #flujo.demo-live .story-phone { width: 330px; height: 676px; }
  #flujo .story-phone-pin { position: relative; }
  #flujo .story-phone-pin::before {
    content: '';
    display: block;
    position: absolute;
    top: 8%;
    left: 50%;
    width: min(760px, 70vw);
    height: 560px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(90, 240, 216, .12), transparent 72%);
    pointer-events: none;
  }
}
@media (max-width: 760px) {
  #flujo.story-section { padding-inline: 16px; }
  #flujo .story-intro { max-width: 34ch; }
  #flujo .story-intro h2 { margin-bottom: 18px; }
  #flujo .story-intro > p:last-child { line-height: 1.7; }
  #flujo .story-phone, #flujo.demo-live .story-phone { width: min(100%, 316px); height: 646px; }
  .story-chooser {
    width: min(100%, 380px);
    margin-top: 32px;
    padding: 18px 14px 16px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 22px;
    background: rgba(255,255,255,.025);
  }
  .story-chooser p { font-size: 1.08rem; margin: 20px 0 0; }
  .story-scene-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .story-scene-buttons button { min-height: 60px; padding: 11px 10px; font-size: .88rem; }
  #flujo .story-phone-pin { padding-top: 34px; }
}

/* ── El robot vuelve a mirar al cursor ─────────────────────────────────────
   Sin 3D ni WebGL: el robot ya existía en CSS. El puntero solo actualiza dos
   variables y el navegador mueve tres capas pequeñas con transform, que es
   trabajo de compositor. Fuera del escritorio y con reduced-motion no se
   registra ni el listener (ver landing.js). */
/* El grupo entero se inclina hacia el puntero: una sola capa que mueve el
   compositor, en vez de tocar cada pieza (que además ya vienen centradas con
   transform propio). Da la misma lectura: el robot te mira. */
.voice-robot { transition: transform 520ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .voice-robot { transform: none !important; transition: none !important; }
}
@media (max-width: 760px) {
  .voice-robot { transform: none; }
}

/* ── Planes: pieza física, precio al mando y PRO sin gritar ────────────────── */
.plan {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 38%),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 1px 0 rgba(0, 0, 0, .5),
    0 18px 34px -28px rgba(0, 0, 0, .9);
}
.plan--destacado {
  border: 1px solid var(--orange-line);
  background:
    linear-gradient(180deg, rgba(255, 173, 112, .07), rgba(255, 255, 255, 0) 42%),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 173, 112, .22),
    0 1px 0 rgba(0, 0, 0, .5),
    0 22px 40px -28px rgba(0, 0, 0, .95);
}
@media (min-width: 981px) { .plan--destacado { transform: translateY(-6px); } }
.plan--destacado .plan-nombre { font-size: 1rem; }
.plan-sello { font-size: .62rem; letter-spacing: .12em; }
.plan--destacado .plan-sello { display: inline-block; width: auto; margin-top: 0; font-size: .62rem; }
.plan--destacado .plan-cab .plan-para { color: var(--soft); }

/* El precio es lo primero que se lee. */
.plan .plan-precio { align-items: baseline; margin: .2rem 0 1.2rem; }
.plan .plan-precio strong {
  font-size: clamp(3.1rem, 4.8vw, 3.9rem);
  letter-spacing: -.05em;
  line-height: .92;
}
.plan .plan-precio em { font-size: .95rem; color: var(--soft); }
.plan-datos strong { font-size: 1.05rem; }
.plan-lista li { line-height: 1.5; }
@media (max-width: 760px) {
  .plan .plan-precio strong { font-size: 3.2rem; }
  .plan--destacado { margin-top: 6px; }
}

/* ── FAQ: todas las preguntas iguales ──────────────────────────────────────
   El marcador circular +/− ya existía y funciona; lo que sobraba era un «+»
   suelto escrito a mano en la primera pregunta, que pintaba un punto blanco.
   Aquí solo se iguala el ritmo de la lista. */
.trust-faq { gap: 10px; }
.trust-faq.faq-list summary { min-height: 56px; font-size: .96rem; }
.trust-faq.faq-list details p { line-height: 1.6; font-size: .9rem; }

/* ── Pedir demo: mismo lenguaje que el resto de la web ─────────────────────── */
.cta-section { align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.cta-copy .eyebrow { margin-bottom: 1.1rem; }
.cta-points li { line-height: 1.6; }
.cta-trust p, .demo-modal-trust { font-size: .84rem; color: var(--muted); }
.lead-form {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 40%),
    var(--panel-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 50px -34px rgba(0, 0, 0, .95);
}
/* La tarjeta del modal va SÓLIDA: al quitar el backdrop-filter por
   rendimiento, un fondo translúcido dejaba ver el hero por debajo. */
.demo-modal-card {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 12% 0%, rgba(90, 240, 216, .12), transparent 46%),
    #0a100f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 90px -30px rgba(0, 0, 0, .9);
}
.demo-modal-backdrop { background: rgba(2, 6, 5, .88); }
.demo-modal { z-index: 500; }
.lead-form-head { align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.lead-form-head strong { font-size: 1.05rem; letter-spacing: -.01em; }
.lead-badge {
  border: 1px solid var(--orange-line);
  border-radius: 999px;
  padding: .28rem .62rem;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lead-form .field + .field { margin-top: .9rem; }
.lead-form .field label { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* El consentimiento es una frase, no una etiqueta de campo: casilla a la
   izquierda, texto en caja normal y toda la fila clicable. */
.lead-form .consent {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: 1.1rem;
  font-size: .86rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--soft);
  cursor: pointer;
}
.lead-form .consent input { width: 18px; height: 18px; min-height: 0; flex: none; margin-top: .15rem; accent-color: var(--aqua); }
.lead-form .consent a { color: var(--aqua); text-decoration: underline; text-underline-offset: .2em; }
.lead-form input, .lead-form select {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(0, 0, 0, .28);
  min-height: 48px;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}
.lead-form input:focus, .lead-form select:focus { border-color: var(--aqua); background: rgba(0, 0, 0, .42); }
.primary-btn-full { margin-top: 1.2rem; min-height: 52px; font-size: 1rem; }
.demo-modal-card { padding: clamp(1.6rem, 3vw, 2.4rem); gap: clamp(1.6rem, 3vw, 2.6rem); }
.demo-modal-marca {
  display: block;
  width: 132px;
  height: auto;
  aspect-ratio: 4574 / 808;
  object-fit: contain;
  object-position: center;
  margin-bottom: 1.4rem;
}
.demo-modal-aside h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.08; letter-spacing: -.035em; }
@media (max-width: 760px) {
  .demo-modal { padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
  .demo-modal-card {
    width: 100%;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-x: hidden;
    border-radius: 22px;
    background:
      radial-gradient(circle at 12% 0%, rgba(90, 240, 216, .11), transparent 38%),
      #0a100f;
  }
  .demo-modal-marca { width: 112px; margin-bottom: 1rem; }
  .demo-modal-aside .cta-points {
    display: grid;
    gap: 8px;
    margin-top: 16px;
  }
  .demo-modal-aside .cta-points li {
    min-height: 0;
    font-size: .88rem;
    line-height: 1.45;
  }
  .demo-modal-trust { margin-top: 14px; }
  .cta-section { gap: 28px; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   FASE 2 · Hero: fondo con cuerpo y «automatizada» con identidad propia.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── «automatizada»: identidad quieta + destello que la recorre ─────────────
   Dos capas de fondo recortadas al texto. La de abajo es el degradado de marca
   de siempre (aqua → blanco → cyan → azul) y NO se mueve. La de arriba es una
   franja de luz que cruza la palabra y sale por el otro lado; el resto del
   ciclo se queda fuera del encuadre, así que el bucle cierra sin salto y la
   animación no es un parpadeo continuo sino un destello cada pocos segundos.
   Solo se anima background-position de la capa del destello; el área es una
   palabra, y además se pausa en cuanto el hero sale de pantalla (clase
   .fx-quieto desde landing.js). */
.hero h1 .shiny {
  color: var(--aqua);
  -webkit-text-fill-color: var(--aqua);
  text-shadow: none; /* invariante: con background-clip:text, WebKit pinta el
                        degradado SIN recortar y tapa el hero con un bloque. */
  animation: none;
  transition: color 320ms ease, -webkit-text-fill-color 320ms ease;
}
/* El recorte solo entra cuando las fuentes ya están: la carrera entre
   background-clip:text y la carga de la fuente era la causa real del bloque
   blanco en WebKit, así que se espera a document.fonts.ready en vez de
   detectar el navegador por user-agent y dejar a todos los iPhone sin marca. */
html.fx-listo .hero h1 .shiny {
  background-image:
    linear-gradient(100deg, transparent 0 45.6%, rgba(255, 255, 255, .92) 50%, rgba(255, 255, 255, .34) 52%, transparent 54.4% 100%),
    linear-gradient(110deg, #0b1a24 0%, #5af0d8 20%, #f7fbf8 42%, #7be7ff 58%, #3978ff 74%, #5af0d8 100%);
  background-size: 300% 100%, 220% auto;
  background-position: 172% center, 62% center;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  html.fx-listo.fx-anima .hero h1 .shiny { animation: autoDestello 6.5s cubic-bezier(.35, .05, .25, 1) .3s infinite; }
}
@keyframes autoDestello {
  0%   { background-position: 172% center, 62% center; }
  52%  { background-position: -78% center, 62% center; }
  100% { background-position: -78% center, 62% center; }
}
/* Halo detrás de la línea, no text-shadow: el recorte de texto y la sombra no
   se llevan bien en WebKit. Da el contraste que tenía sin arriesgar nada. */
.hero-title-wrap { position: relative; }
.hero-title-wrap::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: min(760px, 78%);
  height: 46%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(90, 240, 216, .16), transparent 74%);
  pointer-events: none;
  z-index: -1;
}

/* El fondo recupera cuerpo: rejilla + haz + viñeta, todo estático. En móvil
   la rejilla es más suave y no hay imagen que descargar. */
.ambient-grid { opacity: .3; }
/* Sin filter: un saturate/contrast sobre un vídeo que se reproduce a pantalla
   completa se recalcula en cada fotograma del vídeo. Medido en scroll: 29 %
   de fotogramas perdidos con él, 6,5 % sin él. Al .42 de opacidad sobre casi
   negro la diferencia de color no se aprecia. */
.ambient-video {
  display: block;
  opacity: .42;
  transform: scale(1.025);
}
@media (max-width: 760px) {
  .ambient-grid { opacity: .16; background-size: 56px 56px; }
}
@keyframes ambientMobileDrift {
  from { transform: scale(1.04) translate3d(-1.5%, -1%, 0); }
  to { transform: scale(1.12) translate3d(1.5%, 1%, 0); }
}

/* ═════════════════════════════════════════════════════════════════════════════
   FASE 3 · Bloques superiores: que respiren.
   El texto de cabecera y el mockup iban casi pegados; se separan de forma
   proporcional (misma escala que el relleno de sección) y las piezas internas
   ganan aire sin cambiar su composición.
   ═════════════════════════════════════════════════════════════════════════════ */
#proceso .section-copy, #inbox .section-copy { margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem); }
#proceso .os-window { margin-top: 0; }
.os-window { padding-bottom: clamp(.6rem, 1.4vw, 1rem); }
.os-tabs { gap: .5rem; padding-block: .7rem; }
.os-body { gap: clamp(1rem, 2.4vw, 1.6rem); padding: clamp(1.1rem, 2.4vw, 1.7rem); }
.os-pipeline { gap: clamp(.7rem, 1.6vw, 1.1rem); }
.os-panel { gap: clamp(.8rem, 1.6vw, 1.1rem); }
.mail-app { margin-top: 0; }
.mail-body { min-height: 420px; }
.inbox-section .section-copy.center { max-width: 62ch; }
@media (max-width: 760px) {
  #proceso .section-copy, #inbox .section-copy { margin-bottom: 26px; }
  .os-body { padding: 16px; gap: 16px; }
  .mail-body { min-height: 0; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   FASE 4 · El relato vuelve a ser una pieza central.
   En escritorio, dos columnas: el texto y el selector a la izquierda, el
   teléfono a la derecha, ambos fijos mientras dura la sección. El recorrido
   es de 1,45 pantallas: suficiente para que el bloque se quede contigo
   mientras pasa una escena, lejos de las casi cuatro pantallas de antes.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 981px) {
  #flujo.story-section {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) auto;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
    min-height: 145svh;
    width: min(calc(100% - 2rem), 1240px);
  }
  #flujo .story-side { position: sticky; top: 132px; }
  #flujo .story-intro { max-width: 46ch; margin: 0; text-align: left; }
  #flujo .story-intro .eyebrow { justify-content: flex-start; }
  #flujo .story-chooser { margin: 2.2rem 0 0; max-width: none; text-align: left; }
  #flujo .story-scene-buttons, #flujo .story-avance { width: min(100%, 640px); }
  #flujo .story-chooser p { margin: 1.5rem 0 0; font-size: 1.25rem; }
  #flujo .story-pause { margin-top: 1.2rem; }
  #flujo .story-phone-pin { position: sticky; top: 104px; padding: 0; justify-content: flex-end; }
  #flujo .story-phone, #flujo.demo-live .story-phone { width: 348px; height: 712px; }
}
/* Entre tablet y escritorio pequeño se mantiene en una columna, pero el
   teléfono manda y el texto no se estira. */
@media (min-width: 761px) and (max-width: 980px) {
  #flujo .story-intro, #flujo .story-chooser { max-width: 60ch; margin-inline: auto; }
  #flujo .story-phone, #flujo.demo-live .story-phone { width: 330px; height: 676px; }
}
/* El viewport del móvil es fijo: los mensajes entran por abajo, los viejos
   suben y se van por arriba. Nada de crecer ni de mover el layout. */
.story-phone .wa-chat { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.story-phone .phone-screen { overflow: hidden; }

/* ═════════════════════════════════════════════════════════════════════════════
   FASE 7 · Planes.
   PRO sigue mandando, pero un escalón menos: menos elevación y un tinte más
   tenue. Las tres cards se leen como producto bueno; la lista pasa de puntos
   a checks, que es lo que se espera en un plan.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 981px) { .plan--destacado { transform: translateY(-4px); } }
.plan--destacado {
  background:
    linear-gradient(180deg, rgba(255, 173, 112, .045), rgba(255, 255, 255, 0) 40%),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 173, 112, .16),
    0 1px 0 rgba(0, 0, 0, .5),
    0 18px 34px -30px rgba(0, 0, 0, .9);
}
/* Checks en lugar de puntos: mismo espacio, lectura de plan. */
.plan-lista li { padding-left: 1.6rem; }
.plan-lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45em;
  width: 11px;
  height: 6px;
  border-left: 1.8px solid var(--aqua);
  border-bottom: 1.8px solid var(--aqua);
  border-radius: 1px;
  background: none;
  transform: rotate(-45deg);
}
.plan-lista li.plan-clave::before { border-color: var(--aqua); }
.plan--destacado .plan-lista li::before { border-color: var(--orange); }

/* ═════════════════════════════════════════════════════════════════════════════
   FASE 5 · Robot de llamadas.
   En escritorio sigue al puntero (landing.js escribe un único transform).
   En táctil no hay cursor: se queda con una respiración lenta de 4 px, solo
   transform, y únicamente mientras la sección está en pantalla.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .voice-robot .robot-local { animation: robotRespira 7.5s ease-in-out infinite alternate !important; }
}
/* Sin drop-shadow: una sombra difuminada de 70 px sobre un elemento que flota
   sin parar se recalcula en cada fotograma (en scroll por Voz: ~20 % de
   fotogramas perdidos con ella, ~5 % sin ella). Sobre fondo casi negro la
   sombra oscura no se ve; el suelo lo sigue marcando el brillo aqua fijo. */
.voice-robot .robot-local { filter: none; }
@keyframes robotRespira {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -4px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .voice-robot .robot-local { animation: none !important; transform: none !important; }
  .voice-robot { transform: none !important; transition: none !important; }
}

/* ── Pasada móvil: demos completas, compactas y manipulables ─────────────── */
.voice-mobile-copy { display: none; }
@media (max-width: 760px) {
  /* La primera pantalla se comporta como una portada real. */
  .hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-top: max(92px, calc(env(safe-area-inset-top) + 82px));
    padding-bottom: 54px;
  }
  .hero-copy { margin-block: auto; }
  .mobile-overview { display: none; }

  /* Los títulos separan con claridad cada capítulo. */
  main > section:not(.hero) { padding-top: 54px; padding-bottom: 54px; }
  main > section .eyebrow {
    margin-bottom: 12px;
    color: var(--orange);
    font-size: .7rem;
    letter-spacing: .11em;
  }
  main > section h2 { margin-top: 0; margin-bottom: 14px; }

  /* Sistema operativo: misma pieza interactiva, con densidad de aplicación. */
  #proceso .section-copy, #inbox .section-copy { margin-bottom: 18px; }
  .os-window { border-radius: 16px; }
  .os-bar { min-height: 36px; padding: 7px 9px; }
  .os-bar strong { font-size: .68rem; }
  .os-live { font-size: .62rem; }
  .os-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    padding: 7px;
  }
  .os-tab { min-height: 34px; padding: 5px 2px; font-size: .61rem; white-space: nowrap; }
  .os-caption { padding: 7px 10px; min-height: 0; font-size: .7rem; }
  .os-body { padding: 9px; gap: 8px; }
  .os-pipeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .os-step { min-height: 0; padding: 8px; border-radius: 10px; }
  .os-step-label { display: block; font-size: .56rem; line-height: 1.25; }
  .os-step-label i { display: block; margin: 0 0 3px; }
  .os-step p { margin-top: 6px; font-size: .66rem; line-height: 1.35; }
  .os-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 10px;
    padding: 9px;
    border-radius: 11px;
  }
  .os-panel-label { grid-column: 1 / -1; }
  .os-kpis { grid-column: 1; grid-row: 2 / 4; }
  .os-meter { grid-column: 2; grid-row: 2; align-self: center; }
  .os-note { grid-column: 2; grid-row: 3; margin: 0; }
  .os-panel-label { font-size: .6rem; }
  .os-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .os-kpi strong { font-size: 1.15rem; }
  .os-kpi small, .os-meter-top, .os-note { font-size: .62rem; line-height: 1.3; }

  /* Inbox: lista y correo conviven; ya no exige subir y bajar para probarlo. */
  .mail-app { height: 430px; border-radius: 16px; overflow: hidden; }
  .mail-titlebar { min-height: 34px; padding: 7px 9px; }
  .mail-titlebar strong { font-size: .68rem; }
  .mail-titlebar .mail-brand img { width: 62px; }
  .mail-body {
    display: grid;
    grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);
    height: calc(100% - 34px);
    min-height: 0;
  }
  .mail-sidebar { display: none; }
  .message-list { max-height: none; height: 100%; overflow-y: auto; border-right: 1px solid var(--line); }
  .message-item { min-height: 58px; padding: 8px; gap: 3px; }
  .message-item .mi-from, .message-item .mi-sub { font-size: .67rem; line-height: 1.2; }
  .message-item .mi-prev { display: none; }
  .mi-time { font-size: .58rem; }
  .reader { min-width: 0; height: 100%; overflow: hidden; }
  .reader-toolbar { min-height: 34px; padding: 3px 6px; gap: 3px; flex-wrap: nowrap; }
  .reader-toolbar button { width: 28px; min-height: 28px; height: 28px; }
  .reader-head { padding: 8px; gap: 6px; }
  .reader-head .avatar { width: 26px; height: 26px; font-size: .7rem; }
  .reader-head strong { font-size: .7rem; }
  .reader-head small, .reader-pill { font-size: .57rem; }
  .reader-content { height: calc(100% - 94px); padding: 9px; overflow-y: auto; font-size: .7rem; }
  .reader-subject { font-size: .82rem; margin-bottom: 7px; }
  .reader-body { margin-bottom: 7px; font-size: .68rem; line-height: 1.4; }
  .summary-card, .draft-card { padding: 7px; margin-top: 7px; border-radius: 9px; }
  .summary-card p, .draft-card p { font-size: .65rem; line-height: 1.35; }
  .summary-label, .draft-label { font-size: .55rem; }
  .reader-actions { display: grid; gap: 5px; margin-top: 8px; }
  .reader-actions button { min-height: 32px; padding: 5px; font-size: .63rem; }

  /* La voz conserva la demo; el texto previo va directo al beneficio. */
  .voice-desktop-copy { display: none; }
  .voice-mobile-copy { display: inline; }
  .voice-head h2 { max-width: 12ch; }
  .voice-sub { max-width: 31ch; }

  /* Comparativa visible: tres tarjetas-resumen en la misma pantalla. */
  .pricing-head { margin-bottom: 22px; }
  .planes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; align-items: stretch; }
  .plan, .plan--destacado {
    min-width: 0;
    margin: 0;
    padding: 14px 7px 10px;
    border-radius: 14px;
    transform: none;
  }
  .plan-cab, .plan--destacado .plan-cab { min-height: 52px; padding-right: 0; }
  .plan-nombre { font-size: .7rem; letter-spacing: .04em; }
  .plan-sello { display: block; width: fit-content; margin-top: 3px; padding: 2px 4px; font-size: .48rem; }
  .plan-para { font-size: .58rem; line-height: 1.25; }
  .plan-precio, .plan .plan-precio { margin: 8px 0; }
  .plan .plan-precio strong { font-size: clamp(1.25rem, 5.8vw, 1.7rem); letter-spacing: -.05em; }
  .plan-precio em { font-size: .52rem; }
  .plan-datos { display: block; margin: 0 0 8px; }
  .plan-datos li { padding: 7px 3px; text-align: center; }
  .plan-datos span { display: none; }
  .plan-datos strong { font-size: .68rem; }
  .plan-datos small { display: block; font-size: .5rem; line-height: 1.25; }
  .plan-lista, .plan-extra { display: none; }
  .plan-btn { min-height: 34px; padding: 6px 3px; font-size: .58rem; line-height: 1.15; }
  .plan-pegatina { --sello-tam: 46px; top: -15px; right: -5px; }
  .plan-pegatina-txt b { font-size: 8px; }
  .planes-nota { margin-top: 18px; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   Revisión móvil: portada, títulos legibles y planes completos.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Portada: la marca de scroll remata la primera pantalla sin añadir texto. */
  .hero { position: relative; }
  .hero::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: 22px;
    height: 22px;
    border-right: 2px solid rgba(247, 251, 248, .32);
    border-bottom: 2px solid rgba(247, 251, 248, .32);
    border-radius: 2px;
    transform: translateX(-50%) rotate(45deg);
    animation: heroBaja 2.4s ease-in-out infinite;
  }
  @keyframes heroBaja {
    0%, 100% { transform: translate(-50%, 0) rotate(45deg); opacity: .45; }
    50% { transform: translate(-50%, 6px) rotate(45deg); opacity: .9; }
  }

  /* Cada capítulo se anuncia más alto: el ojo distingue dónde empieza. */
  main > section .eyebrow {
    font-size: .78rem;
    letter-spacing: .12em;
    color: var(--orange);
    padding: 7px 12px;
    border: 1px solid var(--orange-line);
    border-radius: 999px;
    background: var(--orange-soft);
  }
  main > section h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); letter-spacing: -.035em; }
  main > section .section-copy > p, .voice-sub { font-size: 1rem; line-height: 1.6; }

  /* Lista del inbox: una linea por dato, recortada con puntos suspensivos.
     Nada de -webkit-line-clamp: estas piezas son items de una rejilla dentro
     de un <button> y Chrome blockifica su display, con lo que la fila se
     queda en 0 px y el texto desaparece. */
  .message-item { min-height: 54px; overflow: hidden; }
  .message-item .mi-from,
  .message-item .mi-sub,
  .message-item .mi-prev {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Los tres planes se comparan de un vistazo, pero sin perder lo que
     incluye cada uno: la lista vuelve, compacta. */
  .plan-lista { display: grid; gap: 5px; margin: 0 0 10px; }
  .plan-lista li { padding-left: 13px; font-size: .58rem; line-height: 1.3; }
  .plan-lista li::before { top: .35em; width: 7px; height: 4px; border-width: 1.4px; }
  .plan-lista li strong { font-weight: 700; }
  .plan-lista li.plan-clave { font-size: .58rem; }
  .plan .plan-extra { display: block; margin-top: 6px; font-size: .52rem; line-height: 1.3; }
  .plan { padding-bottom: 12px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   Pricing en móvil: carrusel con anclaje, no tres columnas encogidas.
   Tres cards de 109 px con texto a 0,58 rem cabían, pero no se leían. Ahora
   cada plan ocupa el 78 % del ancho, se lee con tipografía normal y se ve
   asomar el siguiente: se entiende que hay tres y se comparan deslizando.
   Todo es CSS (scroll-snap), sin JS ni coste por frame.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .planes {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    grid-template-columns: none;
    gap: 14px;
    /* Cada card mide lo que ocupa su contenido: igualarlas dejaba a BÁSICO
       con un palmo de hueco antes del botón. */
    align-items: start;
    /* El sello de PRO sobresale por arriba y a la derecha: el carrusel
       necesita ese colchón o lo recorta al activar overflow. */
    padding: 26px 16px 10px;
    margin-inline: -16px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .planes::-webkit-scrollbar { display: none; }

  .plan, .plan--destacado {
    scroll-snap-align: center;
    min-width: 0;
    margin: 0;
    padding: 22px 18px 18px;
    border-radius: 20px;
    transform: none;
  }

  /* Tipografía de lectura, no de tabla comprimida. */
  .plan-cab, .plan--destacado .plan-cab { min-height: 0; padding-right: 74px; margin-bottom: 14px; }
  .plan-nombre { font-size: .95rem; letter-spacing: .1em; }
  .plan-sello { display: inline-block; width: auto; margin: 0 0 0 .4rem; padding: .22rem .5rem; font-size: .58rem; }
  .plan-para { font-size: .92rem; line-height: 1.4; }
  .plan .plan-precio { margin: 0 0 16px; }
  .plan .plan-precio strong { font-size: 3.1rem; letter-spacing: -.05em; }
  .plan-precio em { font-size: .92rem; }

  .plan-datos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
    margin: 0 0 16px;
    padding: 12px 0;
    text-align: left;
  }
  .plan-datos li { padding: 0; text-align: left; }
  .plan-datos span { display: block; font-size: .66rem; letter-spacing: .1em; }
  .plan-datos strong { font-size: 1rem; }
  .plan-datos small { display: block; font-size: .76rem; line-height: 1.35; }

  .plan-lista { display: grid; gap: 9px; margin: 0 0 18px; }
  .plan-lista li { padding-left: 1.5rem; font-size: .92rem; line-height: 1.45; }
  .plan-lista li::before { top: .5em; width: 10px; height: 5px; border-width: 1.7px; }
  .plan-lista li.plan-clave { font-size: .92rem; }
  .plan .plan-btn { min-height: 50px; padding: 12px; font-size: 1rem; }
  .plan .plan-extra { display: block; margin-top: 10px; font-size: .8rem; text-align: center; }

  /* El sello vuelve a su tamaño legible: hay sitio en la card grande. */
  .plan-pegatina { --sello-tam: 64px; top: -14px; right: -8px; }
  .plan-pegatina-txt b { font-size: 11px; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   Tercio inferior: precio → dudas → demo → marca.
   Antes era una sucesión de cajas. Ahora cada paso tiene su peso: el precio
   cierra con aire, las dudas ocupan poco, la demo es el cierre comercial y el
   pie remata con la marca.
   ═════════════════════════════════════════════════════════════════════════════ */

/* Después del precio: respiro antes de entrar en objeciones. */
.planes-nota { max-width: 70ch; }
.planes-detalle { margin-bottom: 0; }
#precio { padding-bottom: calc(var(--pad-seccion) + 1rem); }

/* Dudas: filas compactas, títulos cómodos, respuestas con medida de lectura. */
#faq .section-copy { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.trust-faq { gap: 8px; }
.trust-faq.faq-list summary { min-height: 52px; padding: .7rem .95rem; font-size: .95rem; line-height: 1.35; }
.trust-faq.faq-list details p { max-width: 68ch; padding: 0 .95rem .9rem; font-size: .9rem; line-height: 1.6; }
.trust-faq.faq-list summary::after { width: 1.4rem; height: 1.4rem; font-size: .85rem; }

/* Pedir demo: el cierre de la página, no un formulario más.
   La luz y la rejilla del hero vuelven muy atenuadas: reconoces el sitio sin
   repetir la portada. */
#contacto {
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--line);
  padding-top: calc(var(--pad-seccion) + .5rem);
}
#contacto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 60% at 18% 0%, rgba(90, 240, 216, .10), transparent 62%),
    radial-gradient(70% 60% at 92% 12%, rgba(255, 173, 112, .07), transparent 60%);
  pointer-events: none;
}
/* La rejilla enmascarada de este bloque costaba ~190 ms de hilo principal
   (medido: TBT 320 → 125 ms al quitarla). El cierre se queda con las dos
   luces, que son degradados planos y no pintan máscara. */
.cta-copy h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.02; letter-spacing: -.04em; }
.cta-copy > p { max-width: 46ch; font-size: 1.05rem; line-height: 1.65; }
.cta-points { margin-top: 1.6rem; gap: .7rem; }
.cta-points li { font-size: 1rem; }
.lead-form .consent { margin-top: 1rem; }
.lead-form .lead-status { margin-top: .8rem; font-size: .86rem; }
/* La nota de datos es un <p class="lead-trust"> real dentro de cada
   formulario: con un ::after generado salian dos avisos casi identicos uno
   debajo del otro, y el generado ni se selecciona ni se traduce. */

/* El modal ya explica privacidad junto al formulario: repetirla una tercera
   vez al pie añadía ruido y alargaba innecesariamente la vista móvil. */
.demo-modal-card .lead-form::after { display: none; }

/* Modal de conversión: dos superficies claramente relacionadas, con el
   formulario como pieza principal y sin una columna izquierda vacía. */
.demo-modal-card .lead-form {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.demo-modal-aside { max-width: 29rem; }
.demo-modal-aside .cta-points li::before { box-shadow: 0 0 18px rgba(90,240,216,.18); }

@media (max-width: 760px) {
  .demo-modal { align-items: center; }
  .demo-modal-card {
    display: block;
    padding: 16px;
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .demo-modal-aside { max-width: none; }
  .demo-modal-marca { width: 104px; margin: 0 0 12px; }
  .demo-modal-aside .eyebrow { margin-bottom: 8px; }
  .demo-modal-aside h2 { max-width: 14ch; margin-bottom: 0; font-size: 1.55rem; }
  .demo-modal-aside .cta-points,
  .demo-modal-trust { display: none; }
  .demo-modal-card .lead-form { margin-top: 16px; padding: 16px; border-radius: 18px; }
  .demo-modal-card .lead-form-head { margin-bottom: 12px; }
  .demo-modal-card .lead-form-head strong { font-size: 1rem; }
  .demo-modal-card .lead-badge { font-size: .61rem; padding: .22rem .5rem; }
  .demo-modal-card .lead-form .field + .field { margin-top: 8px; }
  .demo-modal-card .lead-form .field label { margin-bottom: 4px; font-size: .68rem; }
  .demo-modal-card .lead-form input { min-height: 44px; }
  .demo-modal-card .lead-form .consent { margin-top: 10px; font-size: .78rem; }
  .demo-modal-card .primary-btn-full { min-height: 46px; margin-top: 12px; }
  .demo-modal-close { top: 12px; right: 12px; }
}

/* Pie: la marca cierra. */
.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
/* landing.css pone `display:flex; justify-content:flex-end` a cualquier div
   del pie: hay que desmontarlo para las dos columnas nuevas. */
.site-footer .footer-marca {
  display: grid;
  justify-items: start;
  justify-content: start;
  flex-wrap: nowrap;
  gap: 1rem;
}
.site-footer .footer-enlaces div { justify-content: flex-start; }
.footer-marca .brand-wordmark { height: 30px; width: auto; }
.footer-marca p { margin: 0; max-width: 32ch; color: var(--soft); font-size: .95rem; line-height: 1.6; }
.footer-marca .footer-demo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--orange-line);
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.footer-marca .footer-demo:hover { border-color: var(--orange); }
.footer-enlaces {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
}
.footer-enlaces div { display: grid; align-content: start; gap: .1rem; }
.footer-titulo {
  margin: 0 0 .5rem;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.footer-enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--soft);
  font-size: .95rem;
}
.footer-enlaces a:hover { color: var(--ink); }
.footer-legal {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .82rem;
}

@media (max-width: 760px) {
  #contacto { padding-top: calc(var(--pad-seccion) + 4px); }
  .cta-copy h2 { font-size: clamp(2rem, 8.4vw, 2.5rem); }
  .cta-copy > p { font-size: 1rem; }
  .site-footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-block: 40px 28px;
  }
  .footer-enlaces { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .footer-enlaces a { min-height: 44px; font-size: 1rem; }
  .footer-marca .brand-wordmark { height: 26px; width: auto; }
  .footer-legal { padding-top: 18px; }
  .trust-faq.faq-list summary { font-size: .95rem; padding: .8rem .9rem; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   Pantallas de 320-360 px: la ventana del sistema no cabía.
   `.discovery-section` reserva 360 px para su segunda columna y las pestañas
   iban en `nowrap`, así que el mínimo de contenido era 321 px y se salía por
   la derecha. Aquí se deja encoger y las piezas se reordenan.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  #proceso.discovery-section { grid-template-columns: minmax(0, 1fr); }
  .os-window, .os-bar, .os-tabs, .os-body, .os-pipeline, .os-panel { min-width: 0; }
  .os-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .os-tab { white-space: normal; font-size: .58rem; line-height: 1.2; }
  .os-pipeline { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .os-step p { font-size: .72rem; }
  .os-step-label { font-size: .6rem; }
  .os-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .os-panel > *, .os-kpis, .os-kpi, .os-meter, .os-meter-top, .os-note { min-width: 0; }
  .os-panel-label { max-width: 100%; }
  .mail-body { grid-template-columns: minmax(96px, 40%) minmax(0, 1fr); }
}

/* ═════════════════════════════════════════════════════════════════════════════
   FASE 2 · El hero vuelve a estar vivo (escritorio Y móvil).
   Antes: rejilla y degradados quietos, y en móvil ni vídeo ni haz. Ahora hay
   cuatro capas superpuestas; se mueven DOS (aurora y haz) y lo hacen con
   transform y opacity, nunca con propiedades que provoquen layout. Cero CLS:
   la capa es fixed e inset:0, no ocupa hueco en el flujo.
   El vídeo es el extra, no la base: si no llega —red lenta, ahorro de datos,
   poca memoria, fallo de carga— el fondo ya se mueve igual.
   ═════════════════════════════════════════════════════════════════════════════ */

/* 1 · Póster: el primer fotograma, ahí desde el primer pintado. */
.ambient-poster { position: absolute; inset: -6%; opacity: .26; }
@media (min-width: 761px) {
  .ambient-poster { background: url(../features/landing/media/hero-poster.jpg) center / cover no-repeat; }
}

/* 2 · Aurora: dos masas de color que se cruzan muy despacio. Es lo que da la
      sensación de "vivo" cuando no hay vídeo, y en móvil es la capa principal
      durante el primer segundo. Un solo elemento, un solo transform. */
.ambient-aurora {
  position: absolute;
  inset: -22%;
  background:
    radial-gradient(36% 32% at 24% 20%, rgba(90, 240, 216, .17), transparent 70%),
    radial-gradient(32% 30% at 76% 10%, rgba(57, 120, 255, .16), transparent 70%),
    radial-gradient(30% 26% at 56% 40%, rgba(255, 173, 112, .07), transparent 72%);
  pointer-events: none;
}
/* Segunda masa cruzándose en sentido contrario: con dos capas que se solapan a
   ritmos distintos el fondo deja de leerse como un degradado quieto. Sigue
   siendo un transform por capa, nada más. */
.ambient-aurora::after {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(30% 26% at 70% 32%, rgba(90, 240, 216, .13), transparent 70%),
    radial-gradient(26% 24% at 30% 8%, rgba(123, 231, 255, .11), transparent 70%);
}

/* 3 · Haz: la cuchilla de luz barre el hero de lado a lado. Vuelve también a
      móvil, donde antes estaba apagada; allí sin blur (rasterizar un desenfoque
      de 44rem en un teléfono no compensa) y algo más discreta. */
.ambient-beam { display: block; }

/* ── Cuándo se mueve el fondo ───────────────────────────────────────────────
   Dos condiciones, y las dos importan:

   · .fx-anima la pone landing.js DESPUÉS del evento load y con el hilo libre.
     Medido con Lighthouse (móvil, CPU x4): con las animaciones corriendo
     durante la carga el TBT sube de ~310 ms a ~1.000 ms. Son decoración; que
     empiecen cuando la página ya está lista no lo nota nadie y la carga deja
     de pagarlo.
   · .fx-quieto se pone en cuanto el hero sale de pantalla. La capa es fixed y
     cubre toda la web; seguir animándola durante el resto del scroll es gasto
     puro. */
/* steps(): la clave de que esto salga barato.
   Estas capas ocupan la pantalla entera y se mueven MUY despacio: 4,5 % de
   ancho en 24 segundos. A 60 fps eso son 1.440 rasterizaciones de pantalla
   completa para recorrer unos pocos píxeles. Con pasos discretos el navegador
   solo rehace la capa 2 veces por segundo, y cada salto mide menos de un
   píxel: a simple vista es idéntico, y el hilo principal deja de arder.
   Medido en Lighthouse móvil: TBT de ~1.100 ms a ~300 ms. */
/* Actualización: ni con steps() ni pausadas salían baratas. Una animación
   (aunque esté en pausa o dé 2 saltos por segundo) sobre estas capas fijas
   de pantalla completa hace que el compositor repinte TODA la pantalla en
   cada fotograma, en toda la web. Medido (1280x800): en reposo, 4,4 s de GPU
   de cada 5 s con ellas y 0,2 s sin ellas; en scroll, 7,4 % de fotogramas
   perdidos con ellas y 0,1 % sin ellas. La deriva era de un 4,5 % en 24 s:
   se congelan en el punto medio de su recorrido, que es como se veían. */
html.fx-anima .ambient-aurora { transform: translate3d(0, .3%, 0) scale(1.09); }
html.fx-anima .ambient-aurora::after { transform: translate3d(0, -.2%, 0) scale(1.06); }
html.fx-anima .ambient-beam { transform: translateX(-50%) rotate(23deg); opacity: .65; }
html.fx-quieto .ambient-aurora,
html.fx-quieto .ambient-aurora::after,
html.fx-quieto .ambient-beam,
html.fx-quieto .hero h1 .shiny { animation-play-state: paused; }

/* 4 · Rejilla: quieta. Lleva su propia mask-image, así que animarla obliga a
      rehacer la máscara en cada fotograma; y su aportación era mínima al lado
      de la aurora y el haz. */

.ambient-video {
  display: block;
  opacity: 0;
  transition: opacity 900ms ease;
}
.ambient-video.is-live { opacity: .42; }

@keyframes ambientAurora {
  from { transform: translate3d(-4.5%, -2.6%, 0) scale(1.02); }
  to   { transform: translate3d(4.5%, 3.2%, 0) scale(1.16); }
}
@keyframes ambientAuroraB {
  from { transform: translate3d(5%, 2.4%, 0) scale(1.12); }
  to   { transform: translate3d(-5%, -2.8%, 0) scale(1); }
}
/* El haz lleva su propia opacidad: atado a --glow (0,15) no se veía. El color
   ya es un aqua al 12 %, así que subir la capa no lo convierte en un foco. */
@keyframes ambientHaz {
  0%   { transform: translateX(-50%) rotate(8deg); opacity: .3; }
  50%  { transform: translateX(-50%) rotate(38deg); opacity: 1; }
  100% { transform: translateX(-50%) rotate(8deg); opacity: .3; }
}

@media (max-width: 760px) {
  /* Póster ligero: 1,6 KB en lugar de 46. Solo tapa el hueco hasta que entra
     el vídeo de 37 KB, así que no necesita detalle. */
  .ambient-poster {
    display: block;
    background: url(../features/landing/media/hero-poster-mobile.jpg) center / cover no-repeat;
    opacity: .3;
  }
  /* En móvil la viñeta de .ambient-tint se come el fondo: sobre un negro al
     42-86 % una aurora al 17 % no llega a verse. Se levanta la mitad superior
     de la viñeta y se sube el color de la aurora hasta que el movimiento se
     aprecia de verdad sin robarle contraste al texto. */
  .ambient-tint {
    background:
      radial-gradient(95% 62% at 54% -8%, rgba(5, 7, 6, .02), rgba(5, 7, 6, .5) 72%),
      linear-gradient(180deg, rgba(5, 7, 6, 0) 0%, rgba(5, 7, 6, .24) 38%, rgba(5, 7, 6, .74) 72%, rgba(5, 7, 6, .9) 100%);
  }
  .ambient-aurora {
    inset: -30%;
    background:
      radial-gradient(42% 30% at 24% 16%, rgba(90, 240, 216, .30), transparent 70%),
      radial-gradient(38% 28% at 78% 6%, rgba(57, 120, 255, .28), transparent 70%),
      radial-gradient(34% 26% at 56% 34%, rgba(255, 173, 112, .11), transparent 72%);
  }
  .ambient-aurora::after {
    background:
      radial-gradient(34% 24% at 70% 28%, rgba(90, 240, 216, .22), transparent 70%),
      radial-gradient(30% 22% at 28% 6%, rgba(123, 231, 255, .20), transparent 70%);
  }
  .ambient-beam {
    top: -26%;
    width: 30rem;
    height: 34rem;
    filter: none;
  }
  html.fx-anima .ambient-aurora { animation-duration: 20s; }
  html.fx-anima .ambient-beam { animation-duration: 26s; }
  .ambient-video.is-live { opacity: .34; }
}

/* Sin movimiento: fondo completamente quieto y sin vídeo que descargar. */
@media (prefers-reduced-motion: reduce) {
  .ambient-video { display: none; }
  .ambient-aurora,
  .ambient-aurora::after,
  .ambient-beam { animation: none; will-change: auto; }
}

/* Cuando el Spline real está en pantalla, el suplente deja de animarse: está
   a opacidad 0 y seguir girando solo gasta. */
.voice-robot.is-live .robot-local,
.voice-robot.is-live .v3d-ring { animation: none !important; }

/* ═════════════════════════════════════════════════════════════════════════════
   FASE 6 · El relato recupera protagonismo.
   No se vuelve a las 3,8 pantallas de scroll: se gana presencia por
   composición, no por longitud. En escritorio el teléfono es la pieza grande
   y queda fijo mientras el texto y el selector acompañan; el recorrido pasa
   de 1,45 a 1,9 pantallas, lo justo para que una escena entera ocurra sin que
   la sección se te vaya. En móvil el orden cambia de verdad: primero el
   titular, después EL TELÉFONO, y debajo el selector y el contexto.
   ═════════════════════════════════════════════════════════════════════════════ */

/* Raíl de avance: seis tramos, el activo se llena durante la escena. */
.story-avance {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  margin-top: 18px;
}
.story-avance > span {
  position: relative;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.story-avance > span.es-pasado { background: rgba(90, 240, 216, .34); }
.story-avance > span > i {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  background: var(--aqua);
  transform: scaleX(0);
  transform-origin: left center;
}
.story-avance > span.es-activo > i { transform: scaleX(1); }
@keyframes storyAvance {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .story-avance > span > i { animation: none !important; }
  .story-avance > span.es-activo > i { transform: scaleX(1); }
}

@media (min-width: 981px) {
  /* Un poco más de recorrido: la sección se queda contigo mientras pasa una
     escena completa, sin convertirse en un túnel. */
  #flujo.story-section { min-height: 190svh; }
  /* El titular iba a 46ch calculados sobre 16 px: 422 px en una columna de
     820, así que «Así transcurre una conversación» caía en cuatro líneas
     ridículas. Se mide en rem sobre el ancho real de la columna. */
  #flujo .story-intro { max-width: 34rem; }
  #flujo .story-intro h2 { font-size: clamp(2.8rem, 4vw, 4.2rem); line-height: .98; }
  #flujo .story-intro > p { max-width: 30rem; font-size: 1.08rem; }
  /* El teléfono es la pieza grande de la sección. */
  #flujo .story-phone, #flujo.demo-live .story-phone { width: 372px; height: 760px; }
  #flujo .story-phone-pin { top: 92px; }
  #flujo .story-phone-pin::before { width: min(820px, 64vw); height: 620px; }
}

@media (max-width: 760px) {
  /* Reordenado real, no compresión: el teléfono sube justo debajo del
     titular. .story-side deja de ser caja (display:contents) para que sus dos
     hijos puedan colocarse por separado en la columna. */
  #flujo.story-section { display: flex; flex-direction: column; }
  #flujo .story-side { display: contents; }
  #flujo .story-intro { order: 1; }
  #flujo .story-phone-pin { order: 2; margin-top: 26px; padding-top: 0; }
  #flujo .story-chooser { order: 3; margin-top: 26px; }
  /* El titular ya no compite con el teléfono por el alto de pantalla. */
  #flujo .story-intro h2 { font-size: clamp(1.9rem, 8vw, 2.3rem); }
  #flujo .story-intro > p { font-size: 1rem; line-height: 1.6; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   FASE 7 · Auditoría móvil: reordenar en vez de encoger.
   El móvil había ido ganando legibilidad a base de bajar cuerpos: el panel
   del sistema a 10,5 px, las pestañas a 9,8 px, el correo a 10,9 px y la
   vista previa de cada mensaje directamente oculta. Cabía todo, pero no se
   leía nada. Aquí no se quita contenido: se cambia la DISPOSICIÓN (columnas
   que pasan a filas, dos paneles que pasan a uno encima de otro) y se
   devuelven los cuerpos a tamaños de lectura.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* ── Ritmo: cada bloque es un capítulo, no un párrafo más ──────────────── */
  :root { --pad-seccion: 68px; }

  /* ── Sistema operativo ─────────────────────────────────────────────────
     Los tres pasos dejan de ser tres columnas de 100 px y se apilan: el
     recorrido entrada → criterio → salida se lee igual de bien en vertical,
     y el texto vuelve a 14 px. */
  .os-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .os-tab { font-size: .78rem; line-height: 1.25; padding: 9px 6px; min-height: 40px; white-space: normal; }
  .os-caption { font-size: .78rem; line-height: 1.45; padding: 9px 12px; }
  .os-body { padding: 14px; gap: 14px; }
  .os-pipeline { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .os-step { min-height: 0; padding: 12px 13px; border-radius: 12px; }
  .os-step p { font-size: .86rem; line-height: 1.45; }
  .os-step-label { font-size: .64rem; letter-spacing: .1em; }
  .os-panel { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .os-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .os-kpi strong { font-size: 1.5rem; }
  .os-kpi small { font-size: .72rem; line-height: 1.35; }
  .os-meter-top, .os-note { font-size: .74rem; line-height: 1.4; }
  .os-panel-label { max-width: none; font-size: .6rem; letter-spacing: .08em; }

  /* ── Inbox ─────────────────────────────────────────────────────────────
     Dos paneles de 140 px no son una bandeja: son dos recortes. Pasan a uno
     encima de otro, a ancho completo. La lista muestra el nombre entero y
     recupera la vista previa del mensaje —que es justo lo que explica de qué
     va la bandeja— y el correo abierto se lee sin cortarse a media frase. */
  .mail-app { height: auto; border-radius: 16px; overflow: hidden; }
  .mail-titlebar { min-height: 38px; padding: 9px 11px; }
  .mail-titlebar strong { font-size: .76rem; }
  .mail-body { display: grid; grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .message-list {
    height: auto;
    max-height: 288px;
    overflow-y: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overscroll-behavior: contain;
  }
  /* Fila a ancho completo: caben las tres lineas (remitente, asunto y vista
     previa) sin encoger la tipografia. */
  .message-item { min-height: 76px; padding: 11px 13px; gap: 2px; }
  /* Una linea por dato, cortada con puntos suspensivos. Nada de
     -webkit-line-clamp aqui: estos nodos son items de una rejilla y el
     navegador blockifica su display, con lo que el clamp los deja en 0 px de
     alto y desaparecen. El recorte clasico funciona siempre. */
  .message-item .mi-from, .message-item .mi-sub, .message-item .mi-prev {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* La fila es un <button> con display:grid. Chrome mide en 0 las filas
     automaticas de la caja de contenido de un boton, asi que el asunto y la
     vista previa desaparecian aunque tuvieran texto. Se le da altura propia a
     cada linea y se coloca el contenido desde arriba. */
  .message-item .mi-from,
  .message-item .mi-sub,
  .message-item .mi-prev {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .message-item .mi-from, .message-item .mi-sub { font-size: .84rem; line-height: 1.35; }
  .message-item .mi-prev { font-size: .78rem; line-height: 1.4; }
  .mi-time { font-size: .72rem; }
  .reader { min-width: 0; height: auto; overflow: visible; }
  .reader-toolbar { min-height: 40px; padding: 5px 9px; gap: 5px; }
  .reader-toolbar button { width: 32px; min-height: 32px; height: 32px; }
  .reader-head { padding: 12px 13px; gap: 9px; }
  .reader-head .avatar { width: 32px; height: 32px; font-size: .8rem; }
  .reader-head strong { font-size: .86rem; }
  .reader-head small, .reader-pill { font-size: .68rem; }
  .reader-content { height: auto; max-height: none; overflow: visible; padding: 13px; font-size: .86rem; }
  .reader-subject { font-size: 1rem; margin-bottom: 10px; }
  .reader-body { margin-bottom: 10px; font-size: .86rem; line-height: 1.55; }
  .summary-card, .draft-card { padding: 11px; margin-top: 10px; border-radius: 12px; }
  .summary-card p, .draft-card p { font-size: .8rem; line-height: 1.5; }
  .summary-label, .draft-label { font-size: .62rem; }
  .reader-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .reader-actions button { min-height: 42px; padding: 8px; font-size: .78rem; }

  /* ── Voz: el dato comercial vuelve ─────────────────────────────────────
     La copia corta de móvil se había comido los minutos incluidos, que es
     información de plan, no adorno. Cabe en una línea más. */
  .voice-sub { max-width: none; }

  /* ── Notas al pie: siguen ahí, pero sin gritar ─────────────────────────── */
  .sistemas-nota { font-size: .76rem; line-height: 1.5; }
}

/* Selector y conversación forman una sola demo en móvil: se elige el caso
   antes de entrar en el teléfono, sin tener que recorrerlo entero y volver. */
@media (max-width: 760px) {
  #flujo .story-intro { order: 1; }
  #flujo .story-chooser {
    order: 2;
    width: 100%;
    margin: 20px 0 0;
    padding: 12px;
    border-radius: 16px;
  }
  #flujo .story-scene-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #flujo .story-scene-buttons button { min-height: 44px; padding: 7px 4px; font-size: .72rem; }
  #flujo .story-chooser p { min-height: 0; margin: 12px 0 0; font-size: .9rem; }
  #flujo .story-pause { min-height: 40px; margin-top: 8px; padding: 7px 10px; font-size: .78rem; }
  #flujo .story-phone-pin { order: 3; margin-top: 22px; }
  #flujo .story-phone,
  #flujo.demo-live .story-phone { width: min(100%, 300px); height: 614px; }
}


/* Programas v2 · override final */
.sistemas{padding-block:clamp(4rem,7vw,6.5rem);display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);grid-template-areas:"copy rail" "note rail";align-items:center;column-gap:clamp(2rem,6vw,6rem);row-gap:1.15rem}
.sistemas-copy{grid-area:copy;margin:0;text-align:left}.sistemas-copy .eyebrow{justify-content:flex-start}.sistemas-copy h2{margin-bottom:.9rem;font-size:clamp(2.2rem,3.8vw,4rem);line-height:.98}.sistemas-lead{max-width:43ch;margin:0;font-size:.98rem;line-height:1.65}.marquesina{grid-area:rail;min-width:0;margin:0;padding-block:1.15rem;border-block:1px solid rgba(255,255,255,.07);background:linear-gradient(90deg,rgba(90,240,216,.035),rgba(255,255,255,.025),rgba(255,139,58,.035))}.marquesina::before{width:72px;background:linear-gradient(90deg,var(--bg),transparent)}.marquesina::after{width:72px;background:linear-gradient(270deg,var(--bg),transparent)}.marquesina-pista{gap:24px;animation-duration:26s}.marquesina-pista li{min-width:max-content}.sistemas-nota{grid-area:note;margin:0;max-width:47ch}.marquesina:hover .marquesina-pista{animation-play-state:running!important}
@media(max-width:760px){.sistemas{display:grid;grid-template-columns:1fr;grid-template-areas:"copy" "rail" "note";gap:18px;padding-block:64px}.sistemas-copy{padding-inline:4px}.sistemas-copy h2{font-size:clamp(2rem,10vw,2.7rem);max-width:10ch}.sistemas-lead{font-size:.92rem;line-height:1.55}.marquesina{width:calc(100% + 32px);margin-left:-16px;padding-block:.9rem}.marquesina-pista{gap:20px;animation-duration:22s}.marquesina::before,.marquesina::after{width:34px}.sistemas-nota{padding-inline:4px;margin:0}}

/* Modal Demo v2 · una sola escena, sin cajas anidadas. */
.demo-modal-backdrop{background:rgba(1,5,5,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.demo-modal-card{position:relative;width:min(1040px,calc(100vw - 48px));min-height:610px;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:0;padding:0;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:32px;background:radial-gradient(circle at 18% 12%,rgba(90,240,216,.16),transparent 35%),radial-gradient(circle at 82% 92%,rgba(255,150,78,.12),transparent 33%),#07100f;box-shadow:0 48px 140px rgba(0,0,0,.72),inset 0 1px rgba(255,255,255,.08)}
.demo-modal-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 46%,rgba(255,255,255,.045) 46.1%,transparent 46.3%)}
.demo-modal-aside{position:relative;max-width:none;padding:clamp(42px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
.demo-modal-aside::after{content:"";position:absolute;width:250px;height:250px;left:-80px;bottom:-110px;border:1px solid rgba(90,240,216,.18);border-radius:50%;box-shadow:0 0 0 36px rgba(90,240,216,.025),0 0 0 72px rgba(90,240,216,.018)}
.demo-modal-marca{width:148px;margin:0 0 44px}.demo-modal-aside .eyebrow{margin-bottom:16px}.demo-modal-aside h2{max-width:10ch;margin:0;font-size:clamp(2.55rem,4.2vw,4.45rem);line-height:.92;letter-spacing:-.055em}.demo-modal-lead{max-width:41ch;margin:22px 0 0;color:rgba(247,251,248,.7);font-size:1rem;line-height:1.6}
.demo-modal-aside .cta-points{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:34px 0 0}.demo-modal-aside .cta-points li{display:grid;grid-template-columns:auto 1fr;gap:9px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.035);font-size:.7rem;line-height:1.35}.demo-modal-aside .cta-points li::before,.demo-modal-aside .cta-points li::after{display:none}.demo-modal-aside .cta-points b{color:var(--orange);font-size:.65rem}.demo-modal-aside .cta-points strong{display:block;margin-bottom:3px;color:#fff;font-size:.72rem}.demo-modal-aside .cta-points span{color:rgba(247,251,248,.55)}.demo-modal-trust{margin-top:22px}
.demo-modal-card>.lead-form{position:relative;align-self:stretch;margin:0;padding:clamp(44px,5vw,70px);display:flex;flex-direction:column;justify-content:center;border:0;border-left:1px solid rgba(255,255,255,.08);border-radius:0;background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:none}.demo-modal-card>.lead-form .lead-form-head{margin-bottom:28px}.demo-modal-card>.lead-form .lead-form-head strong{font-size:1.22rem}.demo-modal-card>.lead-form .field{margin-bottom:15px}.demo-modal-card>.lead-form input[type="text"],.demo-modal-card>.lead-form input[type="tel"]{height:52px;border-radius:13px;background:rgba(0,0,0,.22);border-color:rgba(255,255,255,.12)}.demo-modal-card>.lead-form .primary-btn{min-height:56px;margin-top:7px;border-radius:14px;background:linear-gradient(100deg,var(--aqua),#b6fff2);box-shadow:0 14px 38px rgba(90,240,216,.16)}
@media(max-width:760px){.demo-modal{padding:8px}.demo-modal-card{width:min(100%,420px);min-height:0;max-height:calc(100dvh - 16px);display:block;border-radius:24px;overflow-y:auto}.demo-modal-card::before{background:linear-gradient(160deg,rgba(90,240,216,.08),transparent 38%)}.demo-modal-aside{padding:26px 22px 18px}.demo-modal-marca{width:110px;margin:0 0 18px}.demo-modal-aside .eyebrow{margin-bottom:9px}.demo-modal-aside h2{max-width:12ch;font-size:clamp(1.8rem,8.5vw,2.35rem);line-height:.96}.demo-modal-lead{margin-top:10px;font-size:.8rem;line-height:1.45}.demo-modal-aside .cta-points{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:15px}.demo-modal-aside .cta-points li{display:block;min-width:0;padding:8px 7px;font-size:.58rem}.demo-modal-aside .cta-points b{display:block;margin-bottom:5px}.demo-modal-aside .cta-points strong{font-size:.62rem}.demo-modal-aside .cta-points li span{font-size:0}.demo-modal-aside .cta-points li span strong{font-size:.62rem}.demo-modal-trust{display:none}.demo-modal-card>.lead-form{margin:0;padding:18px 22px 24px;border:0;border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}.demo-modal-card>.lead-form .lead-form-head{margin-bottom:12px}.demo-modal-card>.lead-form .field{margin-bottom:9px}.demo-modal-card>.lead-form input[type="text"],.demo-modal-card>.lead-form input[type="tel"]{height:44px}.demo-modal-card>.lead-form .consent{margin-block:9px;font-size:.68rem}.demo-modal-card>.lead-form .primary-btn{min-height:48px}.demo-modal-close{top:14px;right:14px}}

/* Cierre Demo v2 · superficie continua y composición editorial. */
#contacto.cta-section{position:relative;width:100%;max-width:none;min-height:760px;margin:0;padding:clamp(7rem,11vw,11rem) max(24px,calc((100vw - 1160px)/2));display:grid;grid-template-columns:minmax(0,.9fr) minmax(380px,.72fr);gap:clamp(5rem,10vw,10rem);align-items:center;overflow:hidden;border:0;border-radius:0;background:radial-gradient(ellipse at 12% 52%,rgba(90,240,216,.105),transparent 32%),radial-gradient(ellipse at 88% 42%,rgba(255,154,83,.085),transparent 29%),linear-gradient(180deg,rgba(4,10,9,0),#07100f 24%,#07100f 78%,rgba(4,10,9,.35));box-shadow:none}
#contacto.cta-section::before{content:"";position:absolute;left:50%;top:17%;bottom:17%;width:1px;background:linear-gradient(transparent,rgba(90,240,216,.28),rgba(255,173,112,.18),transparent)}
#contacto .cta-glow{display:block;position:absolute;inset:0;background:linear-gradient(110deg,transparent 0 48%,rgba(255,255,255,.025) 48.1%,transparent 48.3%);animation:none}
#contacto .cta-copy{position:relative;padding:0;max-width:570px}#contacto .cta-copy h2{max-width:9ch;margin:.7rem 0 1.6rem;font-size:clamp(3.4rem,5.8vw,6rem);line-height:.91;letter-spacing:-.06em}#contacto .cta-copy>p:not(.eyebrow){max-width:43ch;font-size:1.08rem;line-height:1.7}#contacto .cta-points{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}#contacto .cta-points li{padding:9px 12px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.025);font-size:.75rem}#contacto .cta-points li::before,#contacto .cta-points li::after{display:none}.cta-signal{display:flex;align-items:center;gap:10px;margin-top:42px;color:rgba(247,251,248,.42);font-size:.65rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.cta-signal i{width:34px;height:1px;background:linear-gradient(90deg,var(--aqua),var(--orange))}
#contacto>.lead-form{position:relative;margin:0;padding:8px 0 8px clamp(1rem,3vw,2.4rem);border:0;border-radius:0;background:transparent;box-shadow:none}#contacto>.lead-form .lead-form-head{padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid rgba(255,255,255,.1)}#contacto>.lead-form .field{margin-bottom:18px}#contacto>.lead-form input[type="text"],#contacto>.lead-form input[type="tel"]{height:58px;border:0;border-bottom:1px solid rgba(255,255,255,.18);border-radius:0;background:transparent;padding-inline:0;font-size:1rem}#contacto>.lead-form input:focus{border-bottom-color:var(--aqua);box-shadow:none}#contacto>.lead-form .primary-btn{min-height:58px;margin-top:12px;border-radius:14px}
@media(max-width:760px){#contacto.cta-section{min-height:0;padding:88px 20px 74px;grid-template-columns:1fr;gap:48px}#contacto.cta-section::before{left:20px;right:20px;top:auto;bottom:auto;height:1px;width:auto;background:linear-gradient(90deg,transparent,rgba(90,240,216,.25),transparent)}#contacto .cta-copy h2{font-size:clamp(2.8rem,14vw,4rem);max-width:8ch}#contacto .cta-copy>p:not(.eyebrow){font-size:.95rem;line-height:1.6}#contacto .cta-points{gap:6px;margin-top:22px}#contacto .cta-points li{font-size:.68rem;padding:8px 10px}.cta-signal{margin-top:28px;gap:7px;font-size:.55rem}.cta-signal i{width:18px}#contacto>.lead-form{padding:0;border:0;background:transparent}#contacto>.lead-form input[type="text"],#contacto>.lead-form input[type="tel"]{height:50px}}

/* Presupuesto de movimiento: capítulos fuera de vista no componen en bucle. */
#inicio.is-offscreen *,#proceso.is-offscreen *,#flujo.is-offscreen *,#voz.is-offscreen *{animation-play-state:paused!important}
.os-window,.mail-app,.story-phone,.voice-stage{contain:layout paint style}
.hero-video,.ambient-bg,.ambient-aurora,.ambient-beam{transform:translateZ(0)}

/* Automatizada v2 · el color viaja de forma continua, sin destello aislado. */
@keyframes automatizadaViva{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
html.fx-listo .hero h1 .shiny{color:transparent;background-image:linear-gradient(100deg,#5af0d8 0%,#f8fffd 19%,#73cfff 38%,#2de0e8 58%,#fff 76%,#5af0d8 100%);background-size:260% 100%;background-position:0% 50%;-webkit-background-clip:text;background-clip:text}
html.fx-listo.fx-anima:not(.fx-quieto) .hero h1 .shiny{animation:automatizadaViva 8s ease-in-out infinite!important}
html.fx-quieto .hero h1 .shiny{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){html.fx-listo .hero h1 .shiny{animation:none!important;background-position:38% 50%}}

/* Móvil v2 · los mockups son miniaturas fieles del producto de escritorio. */
@media(max-width:760px){
 #proceso,#inbox{overflow:hidden}
 #proceso .os-window{width:820px;max-width:none;zoom:.437;border-radius:24px;box-shadow:0 28px 80px rgba(0,0,0,.42)}
 #proceso .os-tabs{grid-template-columns:repeat(5,1fr);gap:8px}#proceso .os-tab{min-height:38px;padding:7px 10px;font-size:.72rem;white-space:nowrap}#proceso .os-body{grid-template-columns:minmax(0,1.5fr) minmax(260px,.72fr);padding:22px;gap:18px}#proceso .os-pipeline{grid-template-columns:repeat(3,1fr);gap:12px}#proceso .os-step{min-height:164px;padding:18px}#proceso .os-step p{font-size:.84rem;line-height:1.48}#proceso .os-panel{display:grid;grid-template-columns:1fr;padding:18px;border-top:0;border-left:1px solid rgba(255,255,255,.05)}#proceso .os-bar strong{font-size:.78rem}#proceso .os-caption{font-size:.82rem;padding:12px 20px}
 #inbox .mail-app{width:1120px;max-width:none;height:auto;zoom:.32;border-radius:26px;box-shadow:0 32px 90px rgba(0,0,0,.45)}
 #inbox .mail-titlebar{height:46px;padding:0 1rem}#inbox .mail-titlebar strong{font-size:.78rem}#inbox .mail-body{display:grid;grid-template-columns:220px 360px 540px;height:560px;min-height:560px}#inbox .mail-sidebar{display:block;padding:1rem}#inbox .message-list{height:560px;max-height:none;padding:.7rem;overflow:hidden;border-right:1px solid rgba(255,255,255,.04);border-bottom:0}#inbox .message-item{min-height:auto;padding:.68rem .8rem .68rem .72rem;gap:.18rem .6rem}#inbox .message-item .mi-from{font-size:.86rem}#inbox .message-item .mi-sub{font-size:.8rem}#inbox .message-item .mi-prev{display:block;font-size:.72rem}#inbox .reader{height:560px;overflow:hidden}#inbox .reader-content{height:calc(560px - 104px);overflow:hidden;padding:1.2rem;font-size:.88rem}#inbox .reader-toolbar{min-height:46px;padding:6px 12px}#inbox .reader-head{padding:12px 18px}#inbox .summary-card,#inbox .draft-card{padding:13px;margin-top:12px}
}




/* Story v2 · dos columnas editoriales y controles de producto. */
@media(min-width:981px){#flujo.story-section{min-height:0;display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:clamp(3rem,6vw,7rem);align-items:center;padding-block:clamp(7rem,11vw,10rem)}#flujo .story-side{position:relative;align-self:center}#flujo .story-intro{position:static;max-width:34rem;margin:0;text-align:left}#flujo .story-intro .eyebrow{justify-content:flex-start}#flujo .story-intro h2{font-size:clamp(3.1rem,4.4vw,4.8rem);line-height:.92}#flujo .story-chooser{margin:2rem 0 0;max-width:580px;text-align:left;padding:18px;border:1px solid rgba(255,255,255,.075);border-radius:22px;background:rgba(255,255,255,.025)}#flujo .story-phone-pin{position:relative;top:auto;min-height:690px;padding:0;display:grid;grid-template-columns:330px minmax(150px,1fr);gap:22px;align-items:center;justify-content:center}#flujo .story-phone,#flujo.demo-live .story-phone{width:310px;height:635px;justify-self:end}#flujo .story-phone-pin::before{width:620px;height:540px}.story-context{display:grid;gap:20px;padding:22px 0}.story-context>p{display:flex;align-items:center;gap:8px;margin:0;color:var(--orange);font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.story-context>p span{width:8px;height:8px;border-radius:50%;background:var(--aqua);box-shadow:0 0 14px var(--aqua)}.story-context>strong{font-size:1.2rem;line-height:1.35}.story-context dl{display:grid;gap:8px;margin:0}.story-context dl div{padding:12px;border-left:1px solid rgba(90,240,216,.28);background:linear-gradient(90deg,rgba(90,240,216,.055),transparent)}.story-context dt{color:rgba(247,251,248,.42);font-size:.6rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.story-context dd{margin:4px 0 0;color:#fff;font-size:.82rem;font-weight:700}}
.story-scene-buttons{gap:8px}.story-scene-buttons button{display:flex;align-items:center;justify-content:flex-start;gap:9px;min-height:50px;padding:9px 12px;border-radius:13px;text-align:left}.story-scene-buttons button i{display:grid;place-items:center;flex:0 0 27px;width:27px;height:27px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.035);color:rgba(247,251,248,.62);font-style:normal;font-size:.82rem}.story-scene-buttons button span{line-height:1.15}.story-scene-buttons button[aria-pressed="true"]{border-color:rgba(90,240,216,.42);background:linear-gradient(110deg,rgba(90,240,216,.16),rgba(90,240,216,.035));box-shadow:inset 3px 0 var(--aqua)}.story-scene-buttons button[aria-pressed="true"] i{border-color:rgba(90,240,216,.45);background:var(--aqua);color:#04100e}.story-scene-buttons button:active{transform:scale(.975)}
@media(max-width:980px){.story-context{display:none}}
@media(max-width:760px){#flujo.story-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);grid-template-areas:"intro intro" "chooser phone";column-gap:12px;row-gap:22px;padding-block:78px;align-items:start}#flujo .story-side{display:contents}#flujo .story-intro{grid-area:intro;max-width:none;text-align:left}#flujo .story-intro .eyebrow{justify-content:flex-start}#flujo .story-intro h2{max-width:11ch;margin-bottom:12px;font-size:2.25rem}#flujo .story-intro>p:last-child{max-width:35ch;font-size:.86rem;line-height:1.5}#flujo .story-chooser{grid-area:chooser;align-self:start;width:auto;margin:0;padding:8px;border-radius:14px;text-align:left}#flujo .story-scene-buttons{grid-template-columns:1fr;gap:5px}#flujo .story-scene-buttons button{min-height:39px;padding:5px 6px;gap:6px;font-size:.65rem;border-radius:9px}#flujo .story-scene-buttons button i{flex-basis:23px;width:23px;height:23px;border-radius:7px;font-size:.68rem}#flujo .story-avance{display:none}#flujo .story-chooser p{margin:8px 0 0;font-size:.68rem;line-height:1.25}#flujo .story-pause{min-height:32px;margin-top:6px;padding:5px 7px;font-size:.62rem}#flujo .story-phone-pin{grid-area:phone;align-self:start;margin:0;padding:0;min-height:0;display:block}#flujo .story-phone,#flujo.demo-live .story-phone{width:min(100%,210px);height:auto;aspect-ratio:300/614;margin:0 auto;border-radius:39px}#flujo .story-phone .phone-screen{border-radius:32px}#story-phone-chat .bubble{font-size:.64rem;line-height:1.33}.story-phone .wa-header{min-height:48px}.story-phone .wa-contact strong{font-size:.7rem}.story-phone .wa-contact small{font-size:.55rem}}

/* Pricing móvil v2 · control visible del carrusel y tarjetas más compactas. */
.pricing-mobile-nav{display:none}
@media(max-width:760px){.pricing-shell{position:relative}.planes{width:calc(100% + 16px);grid-template-columns:none;grid-auto-columns:min(82vw,304px);gap:12px;padding:10px 38px 16px 4px;scroll-padding-left:4px}.plan{min-height:0;padding:20px 18px;border-radius:20px}.plan-cab{margin-bottom:10px}.plan-para{font-size:.74rem}.plan-precio{margin-block:10px}.plan-precio strong{font-size:2.75rem}.plan-datos{gap:7px;margin-bottom:12px}.plan-datos li{padding:9px}.plan-datos li strong{font-size:.82rem}.plan-lista{gap:6px;margin-bottom:14px}.plan-lista li{font-size:.76rem;line-height:1.35}.plan-btn{min-height:42px}.plan-extra{margin-top:8px}.pricing-mobile-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin:6px auto 16px}.pricing-mobile-nav button{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:rgba(255,255,255,.035);color:#fff;font-size:1rem;cursor:pointer}.pricing-mobile-nav button:active{transform:scale(.92);background:rgba(90,240,216,.14)}.pricing-dots{display:flex;gap:7px}.pricing-dots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.22);transition:width .2s ease,background .2s ease}.pricing-dots i.active{width:22px;background:linear-gradient(90deg,var(--aqua),var(--orange))}.pricing-shell::after{content:"";position:absolute;right:-1px;top:160px;width:38px;height:390px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(4,10,9,.84))}}

/* Ritmo móvil v2 · capítulos separados, componentes compactos. */
@media(max-width:760px){main>section:not(#inicio){position:relative;padding-top:76px;padding-bottom:76px}main>section:not(#inicio)::before{content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:linear-gradient(90deg,transparent,rgba(90,240,216,.18),rgba(255,173,112,.1),transparent)}#proceso .section-copy,#inbox .section-copy{margin-bottom:26px}#proceso .section-copy p,#inbox .section-copy p{max-width:34ch;margin-inline:auto}.voice-head{margin-bottom:24px}.voice-sub{line-height:1.55}.sistemas{padding-block:68px}.pricing-section{padding-block:78px}.pricing-head{margin-bottom:20px}.pricing-lead{font-size:.9rem;line-height:1.55}}

/* ═════════════════════════════════════════════════════════════════════════════
   FASE 2 · «Pedir demo»: de formulario dentro de una caja a pieza de cierre.
   El problema no era el formulario, era el envoltorio: una tarjeta con borde y
   sombra metida dentro de otra tarjeta con borde y sombra, y el mismo mensaje
   («respuesta en 24 h») repetido tres veces en 600 px. Aquí el panel interior
   desaparece: las dos mitades viven sobre la MISMA superficie y solo las separa
   una línea de un píxel. La izquierda cuenta, la derecha ejecuta.
   ═════════════════════════════════════════════════════════════════════════════ */

.demo-modal-card {
  position: relative;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 28px;
  background:
    /* La luz de marca entra por la esquina del relato, no por el formulario. */
    radial-gradient(120% 90% at 0% 0%, rgba(90, 240, 216, .13), transparent 52%),
    radial-gradient(80% 70% at 12% 100%, rgba(57, 120, 255, .07), transparent 60%),
    #080d0c;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 50px 110px -40px rgba(0, 0, 0, .95);
}

/* Las dos mitades: mismo fondo, una línea entre ellas. Nada de cajas. */
.demo-modal-aside {
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 3.4vw, 3rem);
}
.demo-modal-card .lead-form {
  position: relative;
  display: block;
  padding: clamp(2rem, 3.4vw, 3rem);
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .08);
  border-radius: 0;
  /* Un velo apenas perceptible marca el lado de la acción sin dibujar caja. */
  background: linear-gradient(180deg, rgba(0, 0, 0, .26), rgba(0, 0, 0, .34));
  box-shadow: none;
}
/* La nota de datos ya va dentro del formulario, en su sitio. */
.demo-modal-card .lead-form::after { content: none; }

.demo-modal-marca { width: 118px; margin-bottom: 1.6rem; }
.demo-modal-aside .eyebrow { margin-bottom: 1rem; }
.demo-modal-aside h2 {
  margin: 0 0 1.6rem;
  font-size: clamp(1.8rem, 2.9vw, 2.5rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.demo-modal-aside .cta-points { display: grid; gap: .9rem; margin: 0; }
.demo-modal-aside .cta-points li { font-size: .97rem; line-height: 1.55; }
.demo-modal-firma {
  margin: auto 0 0;
  padding-top: 1.8rem;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.55;
  max-width: 34ch;
}

/* ── Formulario: campos con cuerpo, no rectángulos planos ─────────────────── */
.lead-form-label {
  margin: 0 0 1.3rem;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.demo-modal-card .lead-form .field + .field { margin-top: 1rem; }
.demo-modal-card .lead-form .field label {
  display: block;
  margin-bottom: .45rem;
  font-size: .7rem;
  letter-spacing: .1em;
}
.demo-modal-card .lead-form input[type="text"],
.demo-modal-card .lead-form input[type="tel"],
.demo-modal-card .lead-form input[type="email"],
.demo-modal-card .lead-form select {
  width: 100%;
  min-height: 54px;
  padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: rgba(0, 0, 0, .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}
.demo-modal-card .lead-form input:hover { border-color: rgba(255, 255, 255, .16); }
.demo-modal-card .lead-form input:focus,
.demo-modal-card .lead-form select:focus {
  outline: none;
  border-color: var(--aqua);
  background: rgba(0, 0, 0, .46);
  /* Anillo suave en vez de borde grueso: no mueve el layout. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 3px rgba(90, 240, 216, .18);
}

/* Casilla propia: la nativa no se deja dar tamaño ni radio de forma fiable. */
.demo-modal-card .lead-form .consent { margin-top: 1.3rem; gap: .7rem; align-items: flex-start; }
.demo-modal-card .lead-form .consent input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: .1rem 0 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 6px;
  background: rgba(0, 0, 0, .34);
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.demo-modal-card .lead-form .consent input:hover { border-color: rgba(90, 240, 216, .5); }
.demo-modal-card .lead-form .consent input:checked {
  border-color: var(--aqua);
  background:
    /* La marca de verificación, dibujada con dos degradados: sin SVG extra. */
    linear-gradient(45deg, transparent 44%, var(--bg) 44% 56%, transparent 56%) 6px 2px / 9px 12px no-repeat,
    linear-gradient(-45deg, transparent 44%, var(--bg) 44% 56%, transparent 56%) 2px 5px / 7px 8px no-repeat,
    var(--aqua);
}
.demo-modal-card .lead-form .consent input:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }

.demo-modal-card .primary-btn-full {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  margin-top: 1.5rem;
  min-height: 58px;
  border-radius: 16px;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.005em;
  box-shadow: 0 18px 40px -22px rgba(90, 240, 216, .85);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), filter 160ms var(--ease);
}
.demo-modal-card .primary-btn-full:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 46px -20px rgba(90, 240, 216, .95);
  filter: brightness(1.04);
}
.demo-modal-card .primary-btn-full:active { transform: translateY(0); }
.btn-flecha { font-size: 1.05em; line-height: 1; transition: transform 160ms var(--ease); }
.demo-modal-card .primary-btn-full:hover .btn-flecha { transform: translateX(3px); }

.demo-modal-card .demo-modal-trust {
  margin: 1.1rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--muted);
}
.demo-modal-card .lead-status:empty { display: none; }

/* Cerrar: pastilla en la esquina, por encima de las dos mitades. */
.demo-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(8, 13, 12, .72);
  color: var(--soft);
  cursor: pointer;
  transition: color 150ms var(--ease), border-color 150ms var(--ease), background 150ms var(--ease);
}
.demo-modal-close:hover { color: var(--ink); border-color: rgba(255, 255, 255, .26); background: rgba(8, 13, 12, .95); }
.demo-modal-close:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }

/* El paso 2 (calendario) hereda la misma superficie, sin caja añadida. */
.demo-modal-card .lead-cal {
  grid-column: 1 / -1;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

@media (max-width: 860px) {
  /* Una columna: la línea pasa a ser horizontal. */
  .demo-modal-card { grid-template-columns: minmax(0, 1fr); }
  .demo-modal-card .lead-form {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .demo-modal-firma { padding-top: 1.4rem; }
}

@media (max-width: 760px) {
  .demo-modal-card { border-radius: 24px; padding: 0; }
  .demo-modal-aside { padding: 26px 20px 22px; }
  .demo-modal-card .lead-form { padding: 22px 20px 26px; }
  .demo-modal-marca { width: 104px; margin-bottom: 1.1rem; }
  .demo-modal-aside h2 { font-size: clamp(1.55rem, 6.6vw, 1.95rem); margin-bottom: 1.2rem; }
  .demo-modal-aside .cta-points { gap: .7rem; }
  .demo-modal-aside .cta-points li { font-size: .92rem; }
  /* En móvil manda el espacio; la frase no se pierde, su contenido vive en el
     pie del formulario. */
  .demo-modal-firma { display: none; }
  .demo-modal-card .lead-form input[type="text"],
  .demo-modal-card .lead-form input[type="tel"],
  .demo-modal-card .lead-form select { min-height: 50px; }
  .demo-modal-card .primary-btn-full { min-height: 54px; }
  .demo-modal-close { top: 10px; right: 10px; width: 38px; height: 38px; }
}

/* ── Los tres pasos del aside: en columna, no en tres columnas ─────────────
   La idea de numerarlos es buena, pero puestos en tres columnas dentro de una
   mitad de 430 px cada tarjeta se quedaba en 130 px: «Agenda, llamadas y
   canales» caía en cuatro líneas de dos palabras. En vertical se leen de
   corrido, el número hace de guía y sobra aire. */
.demo-modal-aside .demo-modal-lead {
  margin: 0 0 1.6rem;
  max-width: 40ch;
  color: var(--soft);
  font-size: .98rem;
  line-height: 1.6;
}
.demo-modal-aside .cta-points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
}
.demo-modal-aside .cta-points li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  min-height: 0;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  background: rgba(255, 255, 255, .028);
  font-size: .9rem;
  line-height: 1.5;
}
.demo-modal-aside .cta-points b {
  display: block;
  padding-top: .1rem;
  color: var(--orange);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.demo-modal-aside .cta-points strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.005em;
}
.demo-modal-aside .cta-points span { display: block; color: var(--muted); font-size: .86rem; }

@media (max-width: 760px) {
  .demo-modal-aside .demo-modal-lead { margin-bottom: 1.1rem; font-size: .92rem; }
  .demo-modal-aside .cta-points { gap: 8px; }
  .demo-modal-aside .cta-points li {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 11px;
    padding: 11px 13px;
    font-size: .85rem;
  }
  .demo-modal-aside .cta-points strong { font-size: .88rem; }
  /* Codex lo dejaba en font-size:0 para esconder el detalle: se recupera. */
  .demo-modal-aside .cta-points li span { font-size: .8rem; }
  .demo-modal-aside .cta-points b { font-size: .68rem; }
}

/* Remates del modal: el titular respira en dos o tres líneas en vez de cuatro,
   el formulario se centra en su mitad (si no, todo el vacío se acumulaba
   abajo) y el chip de «Demo» deja de ocupar el ancho completo en móvil. */
.demo-modal-aside h2 { max-width: 16ch; }
.demo-modal-aside .eyebrow { width: fit-content; }
@media (min-width: 861px) {
  .demo-modal-card .lead-form { align-content: center; display: grid; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   FASE 3 · Sección Demo: un solo lenguaje de formulario en toda la web.
   El mismo formulario se estaba pintando de dos maneras: campos rellenos de
   54 px en el modal y campos de línea inferior al 18 % de opacidad en la
   sección. Sobre fondo oscuro, esa línea casi no se ve y en móvil desaparecía.
   Ahora los dos usan la misma pieza; lo que cambia entre sitios es la
   composición, no el componente.
   ═════════════════════════════════════════════════════════════════════════════ */

.lead-form .field + .field { margin-top: 1rem; }
.lead-form .field label {
  display: block;
  margin-bottom: .45rem;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lead-form input[type="text"],
.lead-form input[type="tel"],
.lead-form input[type="email"],
.lead-form select {
  width: 100%;
  height: auto;
  min-height: 54px;
  padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: rgba(0, 0, 0, .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}
.lead-form input:hover { border-color: rgba(255, 255, 255, .16); }
.lead-form input:focus,
.lead-form select:focus {
  outline: none;
  border-color: var(--aqua);
  background: rgba(0, 0, 0, .46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 3px rgba(90, 240, 216, .18);
}

/* Casilla propia también fuera del modal. */
.lead-form .consent { margin-top: 1.3rem; gap: .7rem; align-items: flex-start; }
.lead-form .consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: .1rem 0 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 6px;
  background: rgba(0, 0, 0, .34);
  box-shadow: none;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.lead-form .consent input[type="checkbox"]:hover { border-color: rgba(90, 240, 216, .5); }
.lead-form .consent input[type="checkbox"]:checked {
  border-color: var(--aqua);
  background:
    linear-gradient(45deg, transparent 44%, var(--bg) 44% 56%, transparent 56%) 6px 2px / 9px 12px no-repeat,
    linear-gradient(-45deg, transparent 44%, var(--bg) 44% 56%, transparent 56%) 2px 5px / 7px 8px no-repeat,
    var(--aqua);
}
.lead-form .consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }

/* El botón: la flecha necesita su hueco, y el realce es una elevación, no un
   foco de escenario. */
.lead-form .primary-btn-full {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  min-height: 58px;
  margin-top: 1.5rem;
  border-radius: 16px;
  font-size: 1.02rem;
  font-weight: 800;
  box-shadow: 0 18px 40px -24px rgba(90, 240, 216, .7);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), filter 160ms var(--ease);
}
.lead-form .primary-btn-full:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 46px -22px rgba(90, 240, 216, .8);
  filter: brightness(1.04);
}
.lead-form .primary-btn-full:active { transform: translateY(0); }
.lead-form .primary-btn-full:hover .btn-flecha { transform: translateX(3px); }

/* Cabecera del formulario: un solo título, sin chapa que repita el pie. */
.lead-form-head { display: block; margin-bottom: 1.6rem; }
.lead-form-head strong {
  display: block;
  color: var(--ink);
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.lead-trust {
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.5;
}
.lead-trust a { color: var(--aqua); text-decoration: underline; text-underline-offset: .2em; }
.lead-status:empty { display: none; }

/* ── La columna del formulario deja de flotar suelta ──────────────────────
   Estaba a la derecha sin nada que la sujetara. Una línea vertical de un
   píxel la separa del relato igual que en el modal: misma gramática en los
   dos sitios, y el bloque se lee como una pieza, no como dos. */
@media (min-width: 981px) {
  #contacto > .lead-form {
    padding: 4px 0 4px clamp(2rem, 4vw, 3.4rem);
    border-left: 1px solid rgba(255, 255, 255, .08);
  }
}

@media (max-width: 760px) {
  #contacto > .lead-form { padding: 0; }
  .lead-form-head { margin-bottom: 1.2rem; }
  .lead-form-head strong { font-size: 1.18rem; }
  .lead-form input[type="text"],
  .lead-form input[type="tel"],
  .lead-form select { min-height: 50px; }
  .lead-form .primary-btn-full { min-height: 54px; margin-top: 1.2rem; }
  /* La nota de datos NO se oculta en móvil: es información de privacidad. */
  .lead-trust { display: block; font-size: .76rem; }
}

/* Los campos de #contacto llevaban un override con id (mayor especificidad)
   que los devolvía al estilo de línea inferior. Se iguala el selector para
   que la pieza sea la misma en la sección y en el modal. */
#contacto > .lead-form input[type="text"],
#contacto > .lead-form input[type="tel"],
#contacto > .lead-form input[type="email"] {
  height: auto;
  min-height: 54px;
  padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: rgba(0, 0, 0, .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}
#contacto > .lead-form input:focus {
  border-color: var(--aqua);
  background: rgba(0, 0, 0, .46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 3px rgba(90, 240, 216, .18);
}
#contacto > .lead-form .field { margin-bottom: 0; }
#contacto > .lead-form .lead-form-head { padding-bottom: 0; border-bottom: 0; }
@media (max-width: 760px) {
  #contacto > .lead-form input[type="text"],
  #contacto > .lead-form input[type="tel"] { height: auto; min-height: 50px; }
}

/* Había dos separadores verticales en la misma sección: uno clavado al 50 %
   del ancho (flotando en medio del hueco) y el del propio formulario. Se
   queda el que toca la columna; el otro solo añadía ruido. */
@media (min-width: 981px) { #contacto.cta-section::before { display: none; } }

/* ═════════════════════════════════════════════════════════════════════════════
   FASE 4 · Rendimiento: quitar coste, no quitar web.
   Auditoría de capas caras sobre la página REAL (no sobre el CSS): se listan
   los elementos visibles con blur, backdrop-filter, máscara o will-change y su
   área en píxeles. Se retira lo que cuesta mucho y aporta poco; lo que aporta
   se queda y se paga mejor.
   ═════════════════════════════════════════════════════════════════════════════ */

/* 1 · El velo del modal difuminaba TODA la ventana mientras estaba abierto.
      Un backdrop-filter a pantalla completa es de lo más caro que hay, y la
      tarjeta ya es opaca: no hace falta desenfocar lo de detrás, basta con
      oscurecerlo más. */
.demo-modal-backdrop {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(1, 5, 5, .93);
}

/* 2 · .cta-glow era una veladura diagonal al 2,5 % de opacidad… con blur(8px)
      sobre 400.000 px². Ese es el bloque que brillaba de más en la sección de
      demo. El fondo ambiental de la página ya da esa luz. */
#contacto .cta-glow { display: none; }

/* 3 · El vídeo del hero llevaba una máscara elíptica. Una máscara sobre un
      elemento QUE SE ESTÁ REPRODUCIENDO obliga a rehacerla en cada fotograma
      de vídeo, y aquí cubría 1,7 millones de píxeles. El plano es una cinta
      azul sobre negro: sus bordes ya son negros, así que contra un fondo casi
      negro el corte no se ve. Fuera la máscara, y la viñeta la sigue haciendo
      .ambient-tint, que es estática. */
.ambient-video {
  mask-image: none;
  -webkit-mask-image: none;
}

/* 4 · text-shadow + background-clip:text es justo la combinación que en WebKit
      pinta el degradado SIN recortar y tapa el hero con un bloque blanco
      (está documentado en landing.css). El halo se hace con el pseudo-elemento
      de .hero-title-wrap, que no toca el recorte. */
.hero h1 .shiny { text-shadow: none; }

/* ═════════════════════════════════════════════════════════════════════════════
   FASE 6 · El sistema operativo en móvil: pequeño y nítido, no encogido.
   Estaba resuelto metiendo el layout de escritorio (1.120 px de ancho) dentro
   del móvil con zoom entre 0,35 y 0,49. Eso cumple «que parezca el de
   escritorio», pero deja el cuerpo de texto en 5-7 px y, entre 375 y 400 px de
   ancho, no había regla de zoom: el panel se salía por la derecha y quedaba
   cortado justo en los iPhone más comunes.
   Aquí la ventana conserva su cara de escritorio —semáforo, barra de título,
   pestañas, los tres pasos, el panel— pero se compone A TAMAÑO MÓVIL: nada se
   escala, así que nada se ve borroso ni estirado, todo entra en pantalla y el
   cuerpo más pequeño son 12 px.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  #proceso .os-window {
    zoom: 1;
    width: auto;
    max-width: 100%;
    border-radius: 16px;
  }

  /* Barra de título: la cara reconocible de la ventana, a escala real. */
  #proceso .os-bar { min-height: 36px; padding: 0 11px; gap: 7px; }
  #proceso .os-bar .traffic { width: 8px; height: 8px; }
  #proceso .os-bar strong { font-size: .68rem; letter-spacing: -.01em; }
  #proceso .os-live { font-size: .56rem; letter-spacing: .08em; }

  /* Pestañas: dos filas de tres, con área de toque real. */
  #proceso .os-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 9px 11px;
  }
  #proceso .os-tab {
    min-height: 36px;
    padding: 7px 6px;
    font-size: .72rem;
    line-height: 1.2;
    white-space: normal;
  }
  #proceso .os-caption { padding: 8px 11px; font-size: .74rem; line-height: 1.45; }

  #proceso .os-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 11px;
  }

  /* Los tres pasos, en fila vertical y COMPACTOS: una etiqueta, un titular y
     una línea de texto. Antes eran tres columnas de 100 px (ilegibles) y
     después tres tarjetas altas (el bloque se iba a 1.146 px). */
  #proceso .os-pipeline {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }
  #proceso .os-step {
    min-height: 0;
    padding: 10px 12px;
    border-radius: 11px;
  }
  #proceso .os-step-label { font-size: .58rem; letter-spacing: .1em; margin-bottom: 3px; }
  #proceso .os-step p { font-size: .78rem; line-height: 1.42; }

  /* Panel: los dos KPI en fila y el medidor debajo, sin columna lateral. */
  #proceso .os-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 11px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
  }
  #proceso .os-panel-label { max-width: none; font-size: .56rem; letter-spacing: .09em; }
  #proceso .os-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #proceso .os-kpi { padding: 9px 10px; }
  #proceso .os-kpi strong { font-size: 1.35rem; }
  #proceso .os-kpi small { font-size: .64rem; line-height: 1.3; }
  #proceso .os-meter-top { font-size: .66rem; }
  #proceso .os-note { font-size: .66rem; line-height: 1.4; }
}

/* La etiqueta del paso es una pastilla, no una barra: ocupaba todo el ancho
   de la tarjeta y parecía un campo de formulario vacío. */
@media (max-width: 760px) {
  #proceso .os-step-label { display: inline-flex; width: fit-content; padding: 3px 8px; }
}

/* El bloque entero, más corto: el capítulo se lee de una pasada en vez de
   pedir dos pantallas. Se recorta hueco muerto y relleno, no contenido. */
@media (max-width: 760px) {
  #proceso .section-copy { margin-bottom: 18px; }
  #proceso .section-copy p { margin-top: 8px; }
  #proceso .os-tabs { padding: 8px 10px; }
  #proceso .os-body { gap: 9px; padding: 10px; }
  #proceso .os-step { padding: 9px 11px; }
  #proceso .os-step p { line-height: 1.38; }
  #proceso .os-panel { gap: 9px; padding: 10px; }
  #proceso .os-kpi { padding: 8px 9px; }
  #proceso .os-kpi strong { font-size: 1.2rem; }
}

/* El panel se quedaba en dos columnas aunque su plantilla fuera de una: los
   hijos seguían colocados a mano (.os-meter en grid-column 2), y eso crea una
   segunda columna implícita que estrujaba los KPI hasta cortar «persona». */
@media (max-width: 760px) {
  #proceso .os-panel-label,
  #proceso .os-kpis,
  #proceso .os-meter,
  #proceso .os-note { grid-column: auto; grid-row: auto; align-self: auto; }
  #proceso .os-note { margin: 0; }
}

/* El hueco entre cabecera y ventana se contaba dos veces: margin-bottom de
   .section-copy MÁS el row-gap de la sección. */
@media (max-width: 760px) { #proceso .section-copy { margin-bottom: 0; } }

/* ═════════════════════════════════════════════════════════════════════════════
   FASE 7 · El inbox en móvil: compacto y legible, no una miniatura.
   Mismo caso que el sistema operativo: había un cliente de correo de 1.120 px
   metido en 358 con zoom 0,26-0,36. El resultado es una foto bonita de algo
   ilegible (cuerpo a 4 px), no una demo de producto.
   Aquí se compone a tamaño móvil y se conserva lo que hace reconocible al de
   escritorio: la ventana, las CARPETAS (que pasan de columna lateral a fila de
   pastillas), la lista y el correo abierto con su resumen y su respuesta.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  #inbox .mail-app {
    zoom: 1;
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: none;
  }
  #inbox .mail-titlebar { height: auto; min-height: 36px; padding: 0 11px; }
  #inbox .mail-titlebar strong { font-size: .68rem; }

  #inbox .mail-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }

  /* Las carpetas no desaparecen: dejan de ser columna y pasan a una fila que
     se desliza. Es la información del panel lateral del escritorio, cabiendo
     en 358 px. */
  #inbox .mail-sidebar {
    display: flex;
    gap: 6px;
    padding: 9px 11px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  #inbox .mail-sidebar::-webkit-scrollbar { display: none; }
  #inbox .compose-btn,
  #inbox .mail-labels { display: none; }
  #inbox .mail-nav-list { display: flex; gap: 6px; }
  #inbox .mail-nav {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    font-size: .68rem;
    white-space: nowrap;
  }
  #inbox .mail-nav.active { border-color: rgba(90, 240, 216, .42); background: rgba(90, 240, 216, .09); color: var(--ink); }
  #inbox .mail-nav em { font-style: normal; color: var(--muted); font-size: .62rem; }

  /* Lista: tres filas y media a la vista, con su desplazamiento. */
  #inbox .message-list {
    height: auto;
    max-height: 214px;
    padding: 6px;
    overflow-y: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    overscroll-behavior: contain;
  }
  #inbox .message-item { min-height: 0; padding: 9px 10px; gap: 1px; }
  #inbox .message-item .mi-from { font-size: .78rem; }
  #inbox .message-item .mi-sub { font-size: .76rem; }
  #inbox .message-item .mi-prev { display: block; font-size: .7rem; }
  #inbox .mi-time { font-size: .66rem; }

  /* Correo abierto: alto acotado y con desplazamiento propio, para que el
     bloque entero no se convierta en una torre. */
  #inbox .reader { height: auto; overflow: visible; }
  #inbox .reader-toolbar { min-height: 38px; padding: 5px 9px; gap: 5px; }
  #inbox .reader-toolbar button { width: 30px; height: 30px; min-height: 30px; }
  #inbox .reader-head { padding: 10px 11px; gap: 8px; }
  #inbox .reader-head .avatar { width: 28px; height: 28px; font-size: .74rem; }
  #inbox .reader-head strong { font-size: .8rem; }
  #inbox .reader-head small, #inbox .reader-pill { font-size: .64rem; }
  #inbox .reader-content {
    height: auto;
    max-height: 264px;
    padding: 11px;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: .8rem;
  }
  #inbox .reader-subject { font-size: .92rem; margin-bottom: 8px; }
  #inbox .reader-body { margin-bottom: 8px; font-size: .8rem; line-height: 1.5; }
  #inbox .summary-card, #inbox .draft-card { padding: 10px; margin-top: 9px; border-radius: 11px; }
  #inbox .summary-card p, #inbox .draft-card p { font-size: .75rem; line-height: 1.45; }
  #inbox .summary-label, #inbox .draft-label { font-size: .58rem; }
  #inbox .reader-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
  #inbox .reader-actions button { min-height: 38px; padding: 7px; font-size: .72rem; }

  #inbox .section-copy { margin-bottom: 0; }
}

/* Remates del inbox móvil.
   · La fila es un <button> con display:grid y Chrome mide en 0 sus filas
     automáticas, así que el asunto y la vista previa desaparecían. Con un
     min-height que dé para las tres líneas, el reparto las coloca.
   · Las pastillas de carpeta necesitan ganar a las reglas del panel lateral,
     que las hacía de ancho completo. */
@media (max-width: 760px) {
  #inbox .message-item { min-height: 62px; align-content: stretch; }
  #inbox .mail-sidebar .mail-nav-list { display: flex; flex: 0 0 auto; gap: 6px; }
  #inbox .mail-sidebar .mail-nav {
    display: inline-flex;
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-start;
  }
}

/* Tres líneas por fila sin que se corten los descendentes. */
@media (max-width: 760px) { #inbox .message-item { min-height: 66px; } }

/* ═════════════════════════════════════════════════════════════════════════════
   FASE 8 · Teléfono, conversación y tipos: composición editorial.
   Escritorio en tres columnas, como se pidió: a la izquierda el texto, en el
   centro el teléfono y A SU DERECHA los tipos de conversación, en lista
   vertical (seis filas idénticas: la simetría sale de la rejilla, no de
   afinar anchos a mano). El teléfono baja de 310 a 286 px.
   En móvil se vuelve a una sola columna —título, teléfono, tipos—: la versión
   de dos columnas dejaba el teléfono en 175 px con la cabecera del chat
   solapada sobre los iconos de llamada.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 981px) {
  #flujo.story-section {
    display: grid;
    grid-template-columns: minmax(0, 35fr) minmax(0, 34fr) minmax(0, 31fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
  }
  /* .story-side deja de ser caja para que sus dos hijos se coloquen por
     separado en la rejilla de la sección. */
  #flujo .story-side { display: contents; }
  /* Fila explicita en los tres: con colocacion automatica, al fijar la
     columna 3 al selector el cursor ya habia pasado de largo y el telefono
     caia a una segunda fila. */
  #flujo .story-intro { grid-column: 1; grid-row: 1; max-width: 30rem; }
  #flujo .story-intro h2 { font-size: clamp(2.7rem, 3.8vw, 4.1rem); }

  #flujo .story-phone-pin {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: center;
    gap: 20px;
    min-height: 0;
    padding: 0;
  }
  #flujo .story-phone, #flujo.demo-live .story-phone { width: 286px; height: 586px; justify-self: center; }
  #flujo .story-phone-pin::before { width: 520px; height: 460px; }
  #flujo .story-context { max-width: 300px; padding: 0; }

  /* Tipos de conversación: una fila por tipo, todas iguales. */
  #flujo .story-chooser {
    grid-column: 3;
    grid-row: 1;
    max-width: none;
    margin: 0;
    padding: 20px;
    text-align: left;
  }
  #flujo .story-scene-buttons {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    width: auto;
  }
  #flujo .story-scene-buttons button {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 10px;
    min-height: 46px;
    padding: 9px 12px;
    border-radius: 12px;
    text-align: left;
    font-size: .92rem;
  }
  #flujo .story-avance { width: auto; margin-top: 14px; }
  #flujo .story-chooser p { margin: 1rem 0 0; font-size: 1.02rem; }
  #flujo .story-pause { margin-top: .8rem; }
}

@media (max-width: 980px) {
  /* Tablet y móvil: una sola columna, con el teléfono debajo del titular. */
  #flujo.story-section { display: flex; flex-direction: column; }
  #flujo .story-side { display: contents; }
  #flujo .story-intro { order: 1; }
  #flujo .story-phone-pin {
    order: 2;
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    min-height: 0;
    margin-top: 26px;
    padding: 0;
  }
  #flujo .story-chooser { order: 3; margin-top: 26px; width: 100%; }
}

@media (max-width: 760px) {
  #flujo .story-phone, #flujo.demo-live .story-phone { width: min(100%, 268px); height: 550px; }
  #flujo .story-context { width: min(100%, 320px); }
  /* Seis botones en 2 × 3: mismo ancho, misma altura, icono alineado. */
  #flujo .story-scene-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #flujo .story-scene-buttons button {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 9px 10px;
    text-align: left;
    font-size: .82rem;
    line-height: 1.25;
  }
  #flujo .story-chooser { padding: 16px 14px; }
  #flujo .story-chooser p { font-size: 1rem; }
}

/* El resumen bajo el teléfono, como tira horizontal: tres datos en una línea
   ocupan 60 px en vez de 200 y dejan las tres columnas equilibradas. */
@media (min-width: 981px) {
  #flujo .story-context { display: grid; gap: 10px; max-width: 320px; text-align: center; }
  #flujo .story-context > p { justify-content: center; font-size: .6rem; }
  #flujo .story-context > strong { font-size: .95rem; line-height: 1.35; }
  #flujo .story-context dl { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
  #flujo .story-context dl div { padding: 8px 6px; border-left: 0; border-top: 1px solid rgba(90, 240, 216, .28); background: linear-gradient(180deg, rgba(90, 240, 216, .05), transparent); }
  #flujo .story-context dt { font-size: .54rem; }
  #flujo .story-context dd { font-size: .72rem; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   FASE 9 · Pricing en móvil: más fino, no más pequeño de letra.
   Se mantiene el carrusel (y los controles que ya lo hacen evidente), pero la
   tarjeta pasa de 514 a ~450 px de alto quitando relleno, no información: el
   precio sigue siendo lo más grande de la card, la lista de prestaciones sigue
   entera y la tarifa de minuto adicional sigue ahí.
   Y las tres tarjetas pasan a medir lo mismo: en un carrusel, tres alturas
   distintas se leen como un fallo, no como jerarquía.
   ═════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  .planes {
    /* Nada de align-items: stretch. Igualar alturas obliga a todas las
       tarjetas a medir lo que la de ULTRA, cuya lista es la mas larga: la card
       pasaba de 514 a 704 px, justo lo contrario de lo que se busca. */
    align-items: start;
    grid-auto-columns: 84%;
    gap: 12px;
    padding: 22px 16px 8px;
  }
  .plan, .plan--destacado {
    display: flex;
    flex-direction: column;
    padding: 18px 16px 16px;
    border-radius: 18px;
  }

  /* Cabecera: nombre y para quién, en dos líneas justas. */
  .plan-cab, .plan--destacado .plan-cab { margin-bottom: 10px; padding-right: 66px; }
  .plan-nombre { font-size: .88rem; letter-spacing: .1em; }
  .plan-para { font-size: .86rem; line-height: 1.35; }

  /* El precio manda: es lo único que crece. */
  .plan .plan-precio { margin: 0 0 12px; }
  .plan .plan-precio strong { font-size: 2.85rem; letter-spacing: -.045em; }
  .plan-precio em { font-size: .86rem; }

  .plan-datos { gap: 0 10px; margin: 0 0 12px; padding: 10px 0; }
  .plan-datos span { font-size: .58rem; }
  .plan-datos strong { font-size: .95rem; }
  .plan-datos small { font-size: .72rem; line-height: 1.3; }

  .plan-lista { gap: 7px; margin: 0 0 14px; }
  .plan-lista li { padding-left: 1.35rem; font-size: .85rem; line-height: 1.38; }
  .plan-lista li.plan-clave { font-size: .85rem; }

  /* El botón se pega al fondo de la tarjeta: con alturas iguales, los tres
     quedan alineados entre sí. */
  .plan .plan-btn { margin-top: auto; min-height: 46px; padding: 11px; font-size: .95rem; }
  .plan .plan-extra { margin-top: 8px; font-size: .76rem; }

  /* Sello de PRO: presente, no gritando. */
  .plan-pegatina { --sello-tam: 58px; top: -12px; right: -6px; }
  .plan-pegatina-txt b { font-size: 10px; }
  .plan--destacado { box-shadow: 0 10px 26px -18px rgba(255, 173, 112, .55); }

  /* Los controles, pegados al carrusel que gobiernan. */
  .planes-control, .planes-controles, .planes-nav { margin-top: 10px; }
  .planes-nota { margin-top: 16px; font-size: .84rem; line-height: 1.55; }
}

@media (max-width: 360px) {
  .planes { grid-auto-columns: 88%; }
  .plan .plan-precio strong { font-size: 2.6rem; }
  .plan-lista li { font-size: .82rem; }
}

/* ── FASE 10 · «Da igual qué programa uséis» ───────────────────────────────
   La sección se quedó sin medida: al pasar a dos columnas perdió el ancho y
   el margen que tenían sus piezas por separado, así que en escritorio el
   titular empezaba en el píxel 0 y la cinta moría contra el borde derecho.
   Se le da la misma medida que a las secciones vecinas. */
.sistemas {
  width: min(calc(100% - 2rem), 1130px);
  margin-inline: auto;
}
/* Dentro de la sección, la cinta ocupa su columna entera: la medida ya la
   pone la sección, y duplicarla la dejaba corta. */
.marquesina { width: 100%; margin-inline: 0; }

/* ── FASE 11 · Aire donde el capítulo lo pedía ─────────────────────────────
   Las secciones ya respiran parecido entre sí (120 px en escritorio, 76-80 en
   móvil). Lo que estaba apretado eran las costuras internas: la cabecera
   pegada a su mockup. Se separan lo justo para que cada bloque se lea como un
   capítulo, sin abrir huecos vacíos. */
@media (max-width: 760px) {
  :root { --pad-seccion: 80px; }
  #proceso { row-gap: 40px; }
  #inbox .section-copy { margin-bottom: 28px; }
  #flujo .story-phone-pin { margin-top: 34px; }
  #flujo .story-chooser { margin-top: 32px; }
  #voz .voice-head { margin-bottom: 26px; }
}
@media (min-width: 761px) {
  #inbox .section-copy { margin-bottom: clamp(2.4rem, 4vw, 3.4rem); }
}

/* Tablet (761-980): sin las reglas de móvil ni las de escritorio, el teléfono
   se quedaba a tamaño completo y ocupaba media pantalla él solo. */
@media (min-width: 761px) and (max-width: 980px) {
  #flujo .story-phone, #flujo.demo-live .story-phone { width: 300px; height: 615px; }
  #flujo .story-context { width: min(100%, 420px); }
  #flujo .story-chooser { max-width: 560px; margin-inline: auto; }
  #flujo .story-scene-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Mobile proportions · Fase 1: portada real. */
.hero-lead-mobile{display:none}
@media(max-width:760px){
 #inicio.hero{min-height:100svh;padding:clamp(7.2rem,18vh,9.4rem) 0 clamp(3.4rem,8vh,5rem);display:grid;place-items:center}
 #inicio .hero-copy{width:min(100%,390px);margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
 #inicio .hero-copy>.eyebrow{justify-content:center;max-width:31ch;margin:0 auto 18px;font-size:.66rem;line-height:1.45;text-align:center}
 #inicio .pilot-badge{order:2;margin:0 0 24px;padding:7px 12px;font-size:.65rem}
 #inicio .hero-title-wrap{order:3;width:100%;margin:0}
 #inicio h1{margin:0 auto;font-size:clamp(2.75rem,12.2vw,3.45rem);line-height:.94;letter-spacing:-.052em;text-align:center;text-wrap:balance}
 #inicio .hero-lead{order:4;max-width:32ch;margin:24px auto 0;font-size:.96rem;line-height:1.55;text-align:center}
 .hero-lead-desktop{display:none}.hero-lead-mobile{display:inline}
 #inicio .hero-actions{order:5;width:min(100%,330px);margin-top:26px;display:grid;gap:10px}
 #inicio .hero-actions a{width:100%;min-height:50px}
 #inicio .secondary-btn{min-height:46px;background:rgba(255,255,255,.025)}
 #inicio::after{content:"";position:absolute;left:50%;bottom:20px;width:11px;height:11px;border-right:1px solid rgba(247,251,248,.38);border-bottom:1px solid rgba(247,251,248,.38);transform:translateX(-50%) rotate(45deg);animation:heroScrollCue 2.2s ease-in-out infinite}
}
@keyframes heroScrollCue{0%,100%{opacity:.25;translate:0 -3px}50%{opacity:.8;translate:0 4px}}
#inicio.is-offscreen::after{animation-play-state:paused}
@media(max-width:340px){#inicio.hero{padding-top:6.4rem}#inicio .hero-copy>.eyebrow{margin-bottom:12px}#inicio .pilot-badge{margin-bottom:17px}#inicio h1{font-size:2.55rem}#inicio .hero-lead{margin-top:17px;font-size:.86rem}#inicio .hero-actions{margin-top:18px;gap:7px}#inicio .hero-actions a{min-height:45px}}

/* Fases 2–3: jerarquía de producto y Sistema proporcionado. */
@media(max-width:760px){
 #proceso .section-copy h2,#inbox .section-copy h2,#flujo .story-intro h2,#voz .voice-head h2,#precio .pricing-head h2{font-size:clamp(1.95rem,8.2vw,2.35rem);line-height:1.02;letter-spacing:-.04em}
 #proceso .section-copy>p:last-child,#inbox .section-copy>p:last-child,#flujo .story-intro>p:last-child,#voz .voice-sub,#precio .pricing-lead{font-size:.88rem;line-height:1.5}
 #proceso{row-gap:22px}
 #proceso .section-copy{text-align:left;max-width:34ch;margin-inline:0}
 #proceso .section-copy .eyebrow{justify-content:flex-start}
 #proceso .os-window{width:min(100%,350px);margin-inline:auto;box-shadow:0 18px 48px rgba(0,0,0,.24)}
}

/* Fase 4: Inbox completo y contenido dentro del viewport móvil. */
@media(max-width:760px){
 #inbox .section-copy{max-width:34ch;margin:0 0 22px;text-align:left}
 #inbox .section-copy .eyebrow{justify-content:flex-start}
 #inbox .mail-app{width:min(100%,350px);margin-inline:auto;box-shadow:0 18px 48px rgba(0,0,0,.2)}
}

/* Fase 5: conversación y selector como un único producto móvil. */
@media(max-width:760px){
 #flujo .story-intro{max-width:34ch;margin-inline:0;text-align:left}
 #flujo .story-intro .eyebrow{justify-content:flex-start}
 #flujo .story-intro>p:last-child{max-width:35ch}
 #flujo .story-phone-pin{margin-top:24px;gap:12px}
 #flujo .story-phone,#flujo.demo-live .story-phone{width:min(100%,258px);height:529px;border-radius:47px;padding:7px}
 #flujo .story-phone .phone-screen{border-radius:39px}
 #flujo .wa-statusbar{font-size:.66rem}
 #flujo .wa-header{min-height:56px;padding-inline:12px}
 #flujo .wa-avatar{width:34px;height:34px;font-size:.75rem}
 #flujo .wa-contact strong{font-size:.78rem}
 #flujo .wa-contact small{font-size:.62rem}
 #story-phone-chat .bubble{max-width:88%;padding:8px 10px 7px;font-size:.72rem;line-height:1.38}
 #story-phone-chat .b-meta{font-size:.57rem}
 #flujo .wa-inputbar{min-height:50px;padding:5px 8px}
 #flujo .wa-field{height:38px;padding-inline:13px;font-size:.78rem}
 #flujo .wa-send{width:38px;height:38px}
 #flujo .story-chooser{margin-top:14px;padding:12px;width:100%;border-radius:16px}
 #flujo .story-scene-buttons{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 #flujo .story-scene-buttons button{grid-template-columns:20px minmax(0,1fr);gap:5px;min-height:48px;padding:7px 6px;border-radius:10px;font-size:.7rem;line-height:1.16}
 #flujo .story-scene-buttons button i{width:20px;height:20px;flex-basis:20px;border-radius:6px;font-size:.62rem}
 #flujo .story-chooser p{margin-top:10px;font-size:.84rem}
 #flujo .story-pause{min-height:36px;margin-top:7px;font-size:.7rem}
}
@media(max-width:340px){#flujo .story-phone,#flujo.demo-live .story-phone{width:244px;height:500px}#flujo .story-scene-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Fase 6: Voz entrega el foco al robot y mantiene la interacción cerca. */
@media(max-width:760px){
 #voz .voice-head{max-width:34ch;margin:0 0 22px;text-align:left}
 #voz .voice-head .eyebrow{justify-content:flex-start}
 #voz .voice-stage{display:grid;grid-template-columns:1fr;gap:18px}
 #voz .voice-robot{width:min(100%,320px);height:280px;min-height:280px;margin-inline:auto}
 #voz .voice-transcript{margin-top:0;min-height:300px}
 #voz .voice-live-strip{min-height:42px}
 #voz .voice-chat-wrap{min-height:250px}
}

/* Fase 7: pricing ligero, íntegro y claramente deslizable. */
@media(max-width:760px){
 #precio .pricing-head{max-width:34ch;margin:0 0 18px;text-align:left}
 #precio .pricing-head .eyebrow{justify-content:flex-start}
 #precio .planes{grid-auto-columns:78%;gap:10px;padding:14px 52px 6px 2px}
 #precio .plan,#precio .plan--destacado{padding:15px 14px 13px;border-radius:17px}
 #precio .plan-cab,#precio .plan--destacado .plan-cab{margin-bottom:7px;padding-right:54px}
 #precio .plan-nombre{font-size:.82rem}
 #precio .plan-para{font-size:.77rem;line-height:1.25}
 #precio .plan .plan-precio{margin:0 0 8px}
 #precio .plan .plan-precio strong{font-size:2.7rem}
 #precio .plan-precio em{font-size:.76rem}
 #precio .plan-datos{gap:0 8px;margin-bottom:8px;padding:8px 0}
 #precio .plan-datos span{font-size:.54rem}
 #precio .plan-datos strong{font-size:.86rem}
 #precio .plan-datos small{font-size:.65rem;line-height:1.22}
 #precio .plan-lista{gap:5px;margin-bottom:10px}
 #precio .plan-lista li,#precio .plan-lista li.plan-clave{padding-left:1.15rem;font-size:.76rem;line-height:1.28}
 #precio .plan .plan-btn{min-height:41px;padding:9px;font-size:.84rem}
 #precio .plan .plan-extra{margin-top:6px;font-size:.68rem}
 #precio .plan-pegatina{--sello-tam:52px;top:-10px;right:-5px}
 #precio .pricing-mobile-nav{margin:8px auto 12px}
 #precio .planes-nota{margin-top:12px;font-size:.76rem;line-height:1.45}
}
@media(max-width:340px){#precio .planes{grid-auto-columns:82%}#precio .plan .plan-precio strong{font-size:2.5rem}#precio .plan-lista li,#precio .plan-lista li.plan-clave{font-size:.73rem}}

/* Mobile polish · segunda pasada: densidad y proporción de producto. */
@media(max-width:760px){
 /* Las dos señales comerciales abren el ancho de la portada sin competir
    con el titular. */
 #inicio .hero-copy>.eyebrow{width:min(100%,360px);max-width:none;padding:8px 16px;border-block:1px solid rgba(90,240,216,.12)}
 #inicio .pilot-badge{width:min(100%,300px);justify-content:space-between;padding:8px 14px}

 /* Titulares más editoriales: siguen mandando, pero dejan ver el producto. */
 #proceso .section-copy h2,#inbox .section-copy h2,#flujo .story-intro h2,#voz .voice-head h2,#precio .pricing-head h2,#faq .section-copy h2{font-size:clamp(1.72rem,7.2vw,2.08rem);line-height:1.04}

 /* Sistema compacto y horizontal: las tres decisiones se entienden en una
    sola mirada y el panel conserva métricas utilizables. */
 #proceso .os-window{width:min(100%,330px)}
 #proceso .os-tabs{grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:7px}
 #proceso .os-tab{min-height:34px;padding:5px 2px;font-size:.56rem;letter-spacing:-.02em}
 #proceso .os-caption{padding:7px 10px;font-size:.68rem}
 #proceso .os-body{padding:8px;gap:8px}
 #proceso .os-pipeline{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 #proceso .os-step{min-height:142px;padding:8px 7px}
 #proceso .os-step-label{display:grid;gap:4px;padding:0;font-size:.49rem;line-height:1.18}
 #proceso .os-step-label i{width:max-content;padding:3px 5px}
 #proceso .os-step p{font-size:.64rem;line-height:1.35}
 #proceso .os-panel{grid-template-columns:1fr 1fr;gap:7px;padding:8px}
 #proceso .os-panel-label,#proceso .os-kpis,#proceso .os-note{grid-column:1/-1}
 #proceso .os-meter{grid-column:1/-1}
 #proceso .os-kpi{padding:7px 8px}
 #proceso .os-kpi strong{font-size:1.05rem}
 #proceso .os-kpi small,#proceso .os-meter-top,#proceso .os-note{font-size:.58rem}

 /* Inbox algo más pequeño, sin perder carpetas, lista ni lectura. */
 #inbox .mail-app{width:min(100%,330px)}
 #inbox .message-list{max-height:174px}
 #inbox .reader-content{max-height:226px}

 /* En acción: el producto explica el flujo; el párrafo repetía lo mismo. */
 #flujo.story-section{display:grid;grid-template-columns:minmax(170px,1.5fr) minmax(100px,.75fr);grid-template-areas:"intro intro" "phone chooser";column-gap:9px;row-gap:18px;align-items:start}
 #flujo .story-side{display:contents}
 #flujo .story-intro{grid-area:intro}
 #flujo .story-intro>p:last-child{display:none}
 #flujo .story-phone-pin{grid-area:phone;margin:0;min-height:0}
 #flujo .story-phone,#flujo.demo-live .story-phone{width:min(100%,218px);height:auto;aspect-ratio:258/529;border-radius:40px;padding:6px}
 #flujo .story-phone .phone-screen{border-radius:33px}
 #flujo .story-chooser{grid-area:chooser;width:100%;margin:0;padding:7px 6px;border-radius:12px}
 #flujo .story-scene-buttons{grid-template-columns:1fr;gap:4px}
 #flujo .story-scene-buttons button{display:grid;grid-template-columns:18px minmax(0,1fr);min-height:35px;padding:4px;gap:4px;border-radius:8px;font-size:.58rem;line-height:1.1;transition:border-color .18s ease,background .18s ease,color .18s ease}
 #flujo .story-scene-buttons button i{width:18px;height:18px;flex-basis:18px;border-radius:6px;font-size:.55rem}
 #flujo .story-scene-buttons button[aria-pressed="true"]{border-color:rgba(90,240,216,.55);background:rgba(90,240,216,.12);box-shadow:inset 2px 0 var(--aqua)}
 #flujo .story-chooser p{margin-top:7px;font-size:.62rem;line-height:1.2}
 #flujo .story-pause{min-height:30px;margin-top:5px;padding:4px;font-size:.56rem}
 #flujo .voice-talk-btn.wa-live-pill{bottom:60px;padding:.32rem .58rem .32rem .38rem;gap:.35rem;max-width:calc(100% - .6rem)}
 #flujo .voice-talk-btn.wa-live-pill .vt-ic{width:23px;height:23px}
 #flujo .voice-talk-btn.wa-live-pill .vt-copy strong{font-size:.64rem}
 #flujo .voice-talk-btn.wa-live-pill .vt-copy small{font-size:.5rem}
 #story-phone-chat.con-cta{padding-bottom:58px}

 /* El robot local permanece como base del holograma hasta que el canvas ya
    ha pintado; la caja horizontal tiene altura estable desde el primer frame. */
 #voz .voice-stage{gap:12px}
 #voz .voice-robot{width:min(100%,350px);height:224px;min-height:224px;overflow:hidden}
 #voz .voice-robot spline-viewer{opacity:0;transition:opacity .32s ease}
 #voz .voice-robot.is-live spline-viewer{opacity:1}
 #voz .voice-robot .voice-3d-fallback{opacity:1;transition:opacity .45s ease .12s}
 #voz .voice-robot.is-live .voice-3d-fallback{opacity:.08}
 #voz .voice-transcript{min-height:276px}
 #voz .voice-chat-wrap{min-height:226px}

 /* Navegación encima y primer plan completamente dentro del raíl. */
 #precio .pricing-mobile-nav{margin:2px auto 8px}
 #precio .planes{width:calc(100% + 32px);margin-inline:-16px;grid-auto-columns:min(78%,278px);padding:8px 44px 8px 16px;scroll-padding-left:16px}
 #precio .pricing-shell::after{top:190px}

 /* FAQ y cierre más ligeros y táctiles. */
 #faq{padding-block:64px}
 #faq .section-copy{margin-bottom:14px}
 #faq .trust-faq{gap:6px}
 #faq .trust-faq.faq-list summary{min-height:46px;padding:.6rem .78rem;font-size:.84rem}
 #faq .trust-faq.faq-list details p{padding:0 .78rem .75rem;font-size:.8rem;line-height:1.5}
 #contacto.cta-section{padding:70px 20px 62px;gap:30px}
 #contacto .cta-copy h2{font-size:clamp(2.35rem,11.5vw,3.15rem);max-width:10ch;margin-bottom:1.1rem}
 #contacto .cta-copy>p:not(.eyebrow){font-size:.86rem;line-height:1.52}
 #contacto .cta-points{margin-top:16px}
 #contacto>.lead-form{padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));box-shadow:0 24px 70px rgba(0,0,0,.24)}
 #contacto>.lead-form input[type="text"],#contacto>.lead-form input[type="tel"]{height:46px}
 #contacto .lead-trust{font-size:.68rem}
}

@media(max-width:340px){
 #flujo.story-section{grid-template-columns:minmax(170px,1.5fr) minmax(100px,.75fr);column-gap:7px}
 #flujo .story-phone,#flujo.demo-live .story-phone{width:min(100%,184px)}
 #flujo .story-scene-buttons button{font-size:.54rem}
}

/* Mobile product widgets · tercera pasada. */
@media(max-width:760px){
 /* Cada decisión usa todo el ancho: tres bandas cortas en vez de tres torres. */
 #proceso .os-pipeline{grid-template-columns:1fr;gap:6px}
 #proceso .os-step{min-height:0;display:grid;grid-template-columns:minmax(84px,.42fr) minmax(0,1fr);align-items:center;gap:9px;padding:8px 9px}
 #proceso .os-step-label{display:grid;align-content:center;gap:3px;font-size:.52rem;line-height:1.15}
 #proceso .os-step p{margin:0;font-size:.66rem;line-height:1.32}

 /* Bandeja de escritorio remaquetada, no ampliada: carpetas, lista y lector
    conviven en tres columnas dentro del ancho real del teléfono. */
 #inbox .mail-app{width:min(100%,350px);height:360px;overflow:hidden}
 #inbox .mail-titlebar{min-height:30px;height:30px;padding-inline:8px}
 #inbox .mail-titlebar strong{font-size:.55rem}
 #inbox .mail-body{display:grid;grid-template-columns:70px 105px minmax(0,1fr);height:330px;min-height:330px;overflow:hidden}
 #inbox .mail-sidebar{display:block;overflow:hidden;padding:7px 5px;border:0;border-right:1px solid rgba(255,255,255,.06)}
 #inbox .compose-btn{display:flex;width:100%;min-height:26px;margin-bottom:7px;padding:4px;border-radius:7px;font-size:.45rem;line-height:1.1}
 #inbox .mail-nav-list{display:grid;gap:2px}
 #inbox .mail-sidebar .mail-nav{display:flex;width:100%;min-height:24px;padding:3px 4px;gap:2px;border:0;border-radius:6px;font-size:.48rem;justify-content:flex-start}
 #inbox .mail-nav em{margin-left:auto;font-size:.42rem}
 #inbox .mail-labels{display:none}
 #inbox .message-list{height:330px;max-height:none;padding:4px;overflow-y:auto;border-right:1px solid rgba(255,255,255,.06);border-bottom:0}
 #inbox .message-item{min-height:62px;padding:6px 5px;gap:1px}
 #inbox .message-item .mi-from{font-size:.61rem}
 #inbox .message-item .mi-sub{font-size:.56rem;line-height:1.18}
 #inbox .message-item .mi-prev{font-size:.5rem;line-height:1.18}
 #inbox .mi-time{font-size:.43rem}
 #inbox .reader{height:330px;overflow:hidden}
 #inbox .reader-toolbar{min-height:28px;height:28px;padding:2px 5px}
 #inbox .reader-toolbar button{width:23px;height:23px;min-height:23px}
 #inbox .reader-head{padding:6px;gap:4px}
 #inbox .reader-head .avatar{width:22px;height:22px;font-size:.55rem}
 #inbox .reader-head strong{font-size:.62rem}
 #inbox .reader-head small,#inbox .reader-pill{font-size:.45rem}
 #inbox .reader-content{height:252px;max-height:none;padding:7px;overflow-y:auto;font-size:.58rem}
 #inbox .reader-subject{font-size:.72rem;margin-bottom:5px}
 #inbox .reader-body{font-size:.58rem;line-height:1.38;margin-bottom:5px}
 #inbox .summary-card,#inbox .draft-card{padding:6px;margin-top:5px;border-radius:7px}
 #inbox .summary-card p,#inbox .draft-card p{font-size:.52rem;line-height:1.35}
 #inbox .summary-label,#inbox .draft-label{font-size:.42rem}
 #inbox .reader-actions{grid-template-columns:1fr;gap:4px;margin-top:6px}
 #inbox .reader-actions button{min-height:26px;padding:4px;font-size:.5rem}

 /* Cabecera del teléfono más discreta y conversación con más aire. */
 #flujo .wa-statusbar{font-size:.52rem}
 #flujo .wa-header{min-height:43px;padding-inline:7px;gap:4px}
 #flujo .wa-avatar{width:25px;height:25px;font-size:.55rem}
 #flujo .wa-contact strong{font-size:.62rem}
 #flujo .wa-contact small{font-size:.48rem}
 #flujo .wa-brand .brand-sep{display:none}
 #flujo .wa-brand img{display:block;width:54px;height:auto}
 #flujo .wa-ic{transform:scale(.72)}
 #story-phone-chat{gap:8px;padding:10px 8px}
 #story-phone-chat .bubble{width:fit-content;max-width:94%;padding:8px 9px;font-size:.68rem;line-height:1.38}
 #story-phone-chat .bubble.ai{margin-right:auto}
 #story-phone-chat .bubble.patient{margin-left:auto}
 #story-phone-chat .wa-system{width:92%;margin-inline:auto;padding:7px;font-size:.54rem}

 /* El fallback queda completamente visible debajo del visor: incluso si el
    canvas tarda o WebGL se reinicia, nunca aparece un hueco vacío. */
 #voz .voice-robot.is-live .voice-3d-fallback{opacity:.32}

 /* Cierre comercial aún más contenido. */
 #contacto.cta-section{padding:56px 20px 50px;gap:22px}
 #contacto .cta-copy h2{font-size:clamp(2rem,9.8vw,2.7rem);margin:.55rem 0 .85rem}
 #contacto .cta-copy>p:not(.eyebrow){font-size:.79rem;line-height:1.45}
 #contacto .cta-points{gap:5px;margin-top:12px}
 #contacto .cta-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 #contacto .cta-points li{padding:6px 5px;font-size:.56rem;line-height:1.25;text-align:center}
 #contacto .cta-signal{display:none}
 #contacto>.lead-form{padding:13px 14px;border-radius:17px}
 #contacto>.lead-form .lead-form-head{margin-bottom:9px}
 #contacto>.lead-form .lead-form-head strong{font-size:.92rem}
 #contacto>.lead-form .field{margin-bottom:7px}
 #contacto>.lead-form .field label{margin-bottom:3px;font-size:.63rem}
 #contacto>.lead-form input[type="text"],#contacto>.lead-form input[type="tel"]{height:41px;min-height:41px;border-radius:10px}
 #contacto>.lead-form .consent{margin-top:8px;font-size:.7rem}
 #contacto>.lead-form .primary-btn-full{min-height:44px;margin-top:9px}
 #contacto .lead-trust{display:none}
}

/* Legibilidad final de las dos demos móviles. */
@media(max-width:760px){
 /* Seis acciones grandes a la derecha, sin volver a agrandar el teléfono. */
 #flujo.story-section{grid-template-columns:minmax(0,1.08fr) minmax(125px,.92fr);column-gap:9px;padding-inline:16px}
 #flujo .story-phone,#flujo.demo-live .story-phone{width:min(100%,190px)}
 #flujo .story-chooser{padding:8px}
 #flujo .story-scene-buttons{gap:6px}
 #flujo .story-scene-buttons button{grid-template-columns:22px minmax(0,1fr);min-height:44px;padding:6px;gap:6px;font-size:.66rem;line-height:1.16}
 #flujo .story-scene-buttons button i{width:22px;height:22px;flex-basis:22px;font-size:.62rem}
 #flujo .story-chooser p{font-size:.68rem}
 #flujo .story-pause{min-height:34px;font-size:.61rem}

 /* Inbox adaptado al móvil: carpetas arriba; lista y correo debajo. Ningún
    texto se escala o se comprime dentro de columnas de 70 px. */
 #inbox .mail-app{height:430px}
 #inbox .mail-body{grid-template-columns:118px minmax(0,1fr);grid-template-rows:42px 358px;height:400px;min-height:400px}
 #inbox .mail-sidebar{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:5px;padding:5px 7px;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.06);scrollbar-width:none}
 #inbox .mail-sidebar::-webkit-scrollbar{display:none}
 #inbox .compose-btn,#inbox .mail-labels{display:none}
 #inbox .mail-nav-list{display:flex;flex:0 0 auto;gap:5px}
 #inbox .mail-sidebar .mail-nav{display:inline-flex;width:auto;min-height:29px;padding:5px 8px;gap:4px;flex:0 0 auto;border:1px solid rgba(255,255,255,.08);border-radius:999px;font-size:.61rem}
 #inbox .mail-nav em{margin-left:2px;font-size:.52rem}
 #inbox .message-list{grid-column:1;grid-row:2;height:358px;padding:5px}
 #inbox .message-item{min-height:70px;padding:7px 6px}
 #inbox .message-item .mi-from{font-size:.69rem}
 #inbox .message-item .mi-sub{font-size:.64rem;line-height:1.22}
 #inbox .message-item .mi-prev{font-size:.57rem;line-height:1.22}
 #inbox .mi-time{font-size:.5rem}
 #inbox .reader{grid-column:2;grid-row:2;height:358px}
 #inbox .reader-toolbar{height:32px;min-height:32px;padding:3px 6px}
 #inbox .reader-toolbar button{width:25px;height:25px;min-height:25px}
 #inbox .reader-head{padding:7px;gap:5px}
 #inbox .reader-head .avatar{width:25px;height:25px;font-size:.62rem}
 #inbox .reader-head strong{font-size:.7rem}
 #inbox .reader-head small,#inbox .reader-pill{font-size:.51rem}
 #inbox .reader-content{height:279px;padding:9px;font-size:.66rem}
 #inbox .reader-subject{font-size:.82rem;line-height:1.2}
 #inbox .reader-body{font-size:.66rem;line-height:1.45}
 #inbox .summary-card p,#inbox .draft-card p{font-size:.6rem;line-height:1.4}
 #inbox .summary-label,#inbox .draft-label{font-size:.48rem}
 #inbox .reader-actions button{font-size:.58rem}
}

@media(max-width:340px){
 #flujo.story-section{grid-template-columns:minmax(0,1fr) minmax(122px,.92fr);column-gap:7px}
 #flujo .story-phone,#flujo.demo-live .story-phone{width:min(100%,170px)}
 #flujo .story-scene-buttons button{font-size:.61rem;padding-inline:5px}
 #inbox .mail-body{grid-template-columns:108px minmax(0,1fr)}
}

/* Escala y señales de interacción. */
@media(max-width:760px){
 /* Inbox vuelve a ser una pieza protagonista y avisa de su scroll interno. */
 #inbox .mail-app{position:relative;width:min(calc(100% + 16px),382px);height:500px;margin-left:max(-8px,calc((100% - 382px)/2));overflow:hidden}
 #inbox .mail-body{grid-template-columns:135px minmax(0,1fr);grid-template-rows:44px 426px;height:470px;min-height:470px}
 #inbox .mail-sidebar{padding:6px 8px}
 #inbox .message-list{height:426px;padding:6px}
 #inbox .message-item{min-height:76px;padding:8px 7px}
 #inbox .message-item .mi-from{font-size:.73rem}
 #inbox .message-item .mi-sub{font-size:.68rem}
 #inbox .message-item .mi-prev{font-size:.61rem}
 #inbox .reader{position:relative;height:426px}
 #inbox .reader-content{height:345px;padding:10px 11px 52px;font-size:.7rem}
 #inbox .reader-subject{font-size:.88rem}
 #inbox .reader-body{font-size:.7rem}
 #inbox .summary-card p,#inbox .draft-card p{font-size:.64rem}
 #inbox .reader::after{content:"DESLIZA PARA LEER  ↓";position:absolute;right:9px;bottom:8px;z-index:12;padding:5px 8px;border:1px solid rgba(90,240,216,.34);border-radius:999px;background:rgba(4,14,12,.94);box-shadow:0 -14px 28px rgba(4,10,9,.9);color:var(--aqua);font-size:.48rem;font-weight:900;letter-spacing:.08em;pointer-events:none}

 /* Más superficie para producto: teléfono grande y acciones todavía amplias. */
 #flujo.story-section{grid-template-columns:minmax(0,1.18fr) minmax(125px,.82fr);padding-inline:8px}
 #flujo .story-phone,#flujo.demo-live .story-phone{width:min(100%,225px)}

 /* El CTA de voz acompaña al robot en vez de dominar la transcripción. */
 #voz .voice-live-cta{padding:10px}
 #voz .voice-talk-btn{width:min(100%,245px);min-height:44px;padding:7px 12px;gap:8px;border-radius:13px}
 #voz .voice-talk-btn .vt-ic{width:30px;height:30px}
 #voz .voice-talk-btn .vt-ic svg{width:16px;height:16px}
 #voz .voice-talk-btn .vt-copy strong{font-size:.78rem}
 #voz .voice-talk-btn .vt-copy small{font-size:.58rem}
 #voz .voice-note{font-size:.56rem}
}

@media(max-width:340px){
 #inbox .mail-app{width:calc(100% + 16px)}
 #inbox .mail-body{grid-template-columns:122px minmax(0,1fr)}
 #flujo.story-section{grid-template-columns:minmax(0,1.12fr) minmax(122px,.88fr)}
 #flujo .story-phone,#flujo.demo-live .story-phone{width:min(100%,180px)}
}

/* Jerarquía del relato móvil: primero el teléfono, después los controles. */
@media(max-width:760px){
 #flujo.story-section{grid-template-columns:minmax(0,1.62fr) minmax(104px,.68fr);column-gap:8px}
 #flujo .story-phone,#flujo.demo-live .story-phone{width:min(100%,235px);border-radius:43px;padding:6px}
 #flujo .story-phone .phone-screen{border-radius:36px}

 /* La interfaz interior baja un nivel para recuperar proporción de dispositivo. */
 #flujo .wa-statusbar{height:21px;padding:0 9px 0 16px;font-size:.45rem}
 #flujo .wa-header{min-height:39px;padding-inline:6px;gap:3px}
 #flujo .wa-avatar{width:22px;height:22px;font-size:.48rem}
 #flujo .wa-brand img{width:47px}
 #flujo .wa-contact small{font-size:.43rem}
 #flujo .wa-video{display:none}
 #flujo .wa-ic{transform:scale(.62)}
 #story-phone-chat{gap:6px;padding:8px 7px}
 #story-phone-chat .bubble{max-width:90%;padding:6px 8px;font-size:.61rem;line-height:1.34}
 #story-phone-chat .b-meta{font-size:.47rem}
 #story-phone-chat .wa-system{width:88%;padding:6px;font-size:.48rem}
 #flujo .wa-inputbar{min-height:42px;padding:4px 6px}
 #flujo .wa-field{height:32px;padding-inline:10px;font-size:.62rem}
 #flujo .wa-send{width:32px;height:32px}

 /* Selector deliberadamente secundario: más estrecho, plano y silencioso. */
 #flujo .story-chooser{padding:5px;border-color:rgba(255,255,255,.055);background:rgba(255,255,255,.012);box-shadow:none}
 #flujo .story-scene-buttons{gap:4px}
 #flujo .story-scene-buttons button{grid-template-columns:18px minmax(0,1fr);min-height:37px;padding:4px;gap:4px;border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.018);font-size:.57rem;color:rgba(247,251,248,.68)}
 #flujo .story-scene-buttons button i{width:18px;height:18px;flex-basis:18px;font-size:.52rem;opacity:.72}
 #flujo .story-scene-buttons button[aria-pressed="true"]{border-color:rgba(90,240,216,.28);background:rgba(90,240,216,.07);box-shadow:inset 2px 0 rgba(90,240,216,.72);color:var(--ink)}
 #flujo .story-chooser p{margin-top:6px;font-size:.58rem;color:rgba(247,251,248,.6)}
 #flujo .story-pause{min-height:29px;margin-top:4px;padding:3px;font-size:.52rem;border-color:rgba(255,255,255,.07);color:rgba(247,251,248,.5)}
}

@media(max-width:340px){
 #flujo.story-section{grid-template-columns:minmax(0,1.55fr) minmax(102px,.72fr);column-gap:6px}
 #flujo .story-phone,#flujo.demo-live .story-phone{width:min(100%,200px)}
 #flujo .story-scene-buttons button{font-size:.53rem}
}

/* El wordmark del teléfono también necesita medida fuera del breakpoint móvil.
   Sin ella el SVG conservaba su ancho intrínseco en escritorio. */
#flujo .wa-brand img{display:block;width:64px;max-width:100%;height:auto;object-fit:contain}

@media(max-width:760px){
 /* El selector acompaña al centro del teléfono y no queda colgado arriba. */
 #flujo .story-chooser{align-self:center}
 #flujo .story-scene-buttons button{justify-content:center}

 /* Proporciones tipográficas normales: nada de condensar o estirar texto. */
 #inbox .mail-app,#inbox .mail-app *{font-stretch:normal}
 #inbox .mail-titlebar strong,#inbox .mail-nav,#inbox .message-item,#inbox .reader{letter-spacing:normal}
 #inbox .mail-body{grid-template-columns:145px minmax(0,1fr)}
 #inbox .message-item .mi-from,#inbox .message-item .mi-sub,#inbox .message-item .mi-prev{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

@media(max-width:340px){
 #inbox .mail-body{grid-template-columns:126px minmax(0,1fr)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE REAL · La interfaz se recompone; no se escala la de escritorio.
   Cada demo usa una sola columna de lectura y controles táctiles legibles.
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:760px){
 html{scroll-padding-top:88px;overflow-x:hidden}
 body,main{width:100%;max-width:100%;overflow-x:hidden}
 main>section{scroll-margin-top:88px;box-sizing:border-box}

 /* Navegación compacta para que nunca tape el título de la sección. */
 .site-nav{top:8px;left:8px;right:8px;width:auto;min-height:68px;padding:8px 8px 8px 16px;border-radius:22px;transform:none}
 .site-nav .brand-wordmark{width:106px;height:auto}
 .site-nav .nav-cta{min-height:44px;padding:9px 12px;font-size:.76rem}
 .site-nav .nav-toggle{width:48px;height:48px}
 main>section:not(#inicio){width:100%;max-width:none;margin-inline:0;padding-inline:16px;padding-top:68px;padding-bottom:68px}

 /* El inicio reserva el navbar y presenta el titular antes que cualquier apoyo. */
 #inicio.hero{width:100%;min-height:100svh;margin:0;padding:104px 16px 56px;align-items:center;overflow:hidden}
 #inicio .hero-copy{width:100%;max-width:560px;margin-inline:auto;text-align:center}
 #inicio .hero-title-wrap{width:100%}
 #inicio h1{width:100%;max-width:90vw;margin:20px auto 0;font-size:clamp(38px,11vw,56px);line-height:.98;font-weight:800;text-align:center}
 #inicio .hero-lead{max-width:90%;margin:22px auto 0;font-size:clamp(17px,4.6vw,20px);line-height:1.5;text-align:center}
 #inicio .hero-actions{margin-top:28px}

 /* Jerarquía común: contexto breve y producto a continuación. */
 #proceso .section-copy,#inbox .section-copy,#flujo .story-intro,#voz .voice-head,#precio .pricing-head{width:100%;max-width:34ch;margin:0 0 20px;text-align:left}
 #proceso .section-copy h2,#inbox .section-copy h2,#flujo .story-intro h2,#voz .voice-head h2,#precio .pricing-head h2,#faq .section-copy h2{font-size:clamp(1.75rem,8vw,2.12rem);line-height:1.04}

 /* Sistema móvil nativo: sin zoom y con controles desplazables legibles. */
 #proceso{display:block}
 #proceso .os-window{width:calc(100% - 16px);max-width:414px;margin-inline:auto;zoom:1;border-radius:18px}
 #proceso .os-bar{min-height:40px;padding:8px 12px}
 #proceso .os-bar strong{font-size:.75rem}
 #proceso .os-tabs{display:flex;grid-template-columns:none;gap:7px;padding:9px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
 #proceso .os-tabs::-webkit-scrollbar{display:none}
 #proceso .os-tab{flex:0 0 auto;min-width:94px;min-height:44px;padding:9px 12px;font-size:.76rem;white-space:nowrap;scroll-snap-align:start}
 #proceso .os-caption{padding:10px 12px;font-size:.78rem;line-height:1.45}
 #proceso .os-body{display:grid;grid-template-columns:1fr;gap:10px;padding:10px}
 #proceso .os-pipeline{display:grid;grid-template-columns:1fr;gap:8px}
 #proceso .os-step{display:grid;grid-template-columns:105px minmax(0,1fr);min-height:0;padding:12px;gap:12px;align-items:center}
 #proceso .os-step-label{font-size:.72rem;line-height:1.25}
 #proceso .os-step p{font-size:.82rem;line-height:1.45}
 #proceso .os-panel{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:12px;border-left:0;border-top:1px solid rgba(255,255,255,.06)}
 #proceso .os-panel-label,#proceso .os-kpis,#proceso .os-meter,#proceso .os-note{grid-column:1/-1}
 #proceso .os-panel-label,#proceso .os-kpi small,#proceso .os-meter-top,#proceso .os-note{font-size:.72rem}

 /* Inbox móvil: navegación, lista y mensaje forman tres filas completas. */
 #inbox{padding-inline:12px}
 #inbox .section-copy{max-width:100%;margin:0 auto 32px;text-align:center}
 #inbox .section-copy .eyebrow{justify-content:center}
 #inbox .section-copy h2{max-width:90vw;margin-inline:auto;font-size:clamp(38px,10vw,48px);line-height:1}
 #inbox .section-copy>p:last-child{max-width:90%;margin:20px auto 0;font-size:clamp(17px,4.5vw,19px);line-height:1.5}
 #inbox .mail-app{position:relative;width:calc(100% - 8px);max-width:432px;height:auto;margin:0 auto;zoom:1;overflow:hidden;border-radius:20px}
 #inbox .mail-titlebar{height:auto;min-height:44px;padding:9px 12px}
 #inbox .mail-titlebar strong{font-size:.78rem}
 #inbox .mail-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;height:auto;min-height:0}
 #inbox .mail-sidebar{grid-column:1;grid-row:1;display:block;min-width:0;padding:8px 10px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);scrollbar-width:none}
 #inbox .mail-sidebar::-webkit-scrollbar{display:none}
 #inbox .compose-btn,#inbox .mail-labels{display:none}
 #inbox .mail-nav-list{display:flex;width:max-content;gap:7px}
 #inbox .mail-sidebar .mail-nav{display:inline-flex;flex:0 0 auto;width:auto;min-height:44px;padding:10px 13px;gap:6px;border:1px solid rgba(255,255,255,.09);border-radius:999px;font-size:.8rem}
 #inbox .mail-nav em{font-size:.72rem}
 #inbox .message-list{grid-column:1;grid-row:2;height:auto;max-height:none;padding:8px;overflow:visible;border-right:0;border-bottom:1px solid var(--line)}
 #inbox .message-item{min-height:78px;padding:11px 12px;gap:3px 10px}
 #inbox .message-item:nth-child(n+4){display:none}
 #inbox .message-item .mi-from{font-size:1.02rem}
 #inbox .message-item .mi-sub{font-size:.92rem;line-height:1.3}
 #inbox .message-item .mi-prev{display:block;font-size:.8rem;line-height:1.35}
 #inbox .mi-time{font-size:.72rem}
 #inbox .reader{grid-column:1;grid-row:3;height:auto;min-height:0;overflow:visible}
 #inbox .reader-toolbar{height:auto;min-height:52px;padding:5px 10px}
 #inbox .reader-toolbar button{width:44px;height:44px;min-height:44px}
 #inbox .reader-toolbar svg{width:21px;height:21px}
 #inbox .reader-head{padding:12px 14px;gap:10px}
 #inbox .reader-head .avatar{width:40px;height:40px;font-size:.9rem}
 #inbox .reader-head strong{font-size:1rem}
 #inbox .reader-head small,#inbox .reader-pill{font-size:.76rem}
 #inbox .reader-content{height:auto;max-height:none;padding:18px 14px 16px;overflow:visible;font-size:.95rem}
 #inbox .reader-subject{font-size:1.15rem;line-height:1.25}
 #inbox .reader-body{font-size:.95rem;line-height:1.55}
 #inbox .summary-card,#inbox .draft-card{padding:14px;margin-top:14px}
 #inbox .summary-card p,#inbox .draft-card p{font-size:.86rem;line-height:1.5}
 #inbox .summary-label,#inbox .draft-label{font-size:.72rem}
 #inbox .reader-actions{display:grid;grid-template-columns:1fr;gap:8px}
 #inbox .reader-actions button{min-height:44px;padding:10px 12px;font-size:.82rem}
 #inbox .reader-actions .ghost-btn{display:none}
 #inbox .reader::after{display:none;content:none}

 /* Conversación: teléfono protagonista; elección debajo, nunca a su lado. */
 #flujo.story-section{display:flex;flex-direction:column;padding-inline:16px}
 #flujo .story-side{display:contents}
 #flujo .story-intro{order:1}
 #flujo .story-phone-pin{order:2;width:100%;margin:0;padding:0;display:flex;justify-content:center}
 #flujo .story-phone,#flujo.demo-live .story-phone{width:min(78vw,294px);height:auto;aspect-ratio:258/529;margin:0 auto;border-radius:46px;padding:7px}
 #flujo .story-phone .phone-screen{border-radius:39px}
 #flujo .story-chooser{order:3;align-self:auto;width:100%;max-width:390px;margin:18px auto 0;padding:10px;border-radius:15px;background:rgba(255,255,255,.018)}
 #flujo .story-scene-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 #flujo .story-scene-buttons button{display:grid;grid-template-columns:22px minmax(0,1fr);min-height:46px;padding:7px 8px;gap:7px;font-size:.68rem;text-align:left}
 #flujo .story-scene-buttons button i{width:22px;height:22px;font-size:.62rem}
 #flujo .story-chooser p{text-align:center;font-size:.7rem}
 #flujo .story-pause{width:100%;min-height:34px;font-size:.62rem}
 #story-phone-chat .bubble{font-size:.78rem;line-height:1.4}
 #story-phone-chat .b-meta{font-size:.66rem}

 /* Barra superior proporcionada y siempre contenida dentro del teléfono. */
 #flujo .wa-statusbar{width:100%;height:26px;padding:0 13px 4px;font-size:.6rem;line-height:1;align-items:flex-end;box-sizing:border-box}
 #flujo .wa-clock{display:block;flex:0 0 auto}
 #flujo .wa-sys{display:flex;flex:0 0 auto;align-items:center;gap:4px;transform:none}
 #flujo .wa-net{width:12px;height:8px}
 #flujo .wa-wifi{width:12px;height:9px}
 #flujo .wa-batt{width:16px;height:8px;border-radius:2px}
 #flujo .wa-batt::after{right:-2px;top:2px;width:1px;height:4px}

 /* El carrusel ya tiene flechas y puntos: no necesita una máscara negra lateral. */
 #precio .pricing-shell::after{display:none}

 /* Voz: dos piezas consecutivas, sin huecos reservados por escritorio. */
 #voz .voice-stage{display:grid;grid-template-columns:1fr;gap:12px}
 #voz .voice-robot{width:calc(100% - 12px);max-width:374px;height:220px;min-height:220px;margin:0 auto}
 #voz .voice-transcript{width:calc(100% - 8px);max-width:414px;min-height:0;margin:0 auto}
 #voz .voice-chat-wrap{min-height:250px}
}

@media(max-width:340px){
 .site-nav .brand-wordmark{width:96px}
 .site-nav .nav-cta{padding-inline:8px;font-size:.65rem}
 #flujo .story-phone,#flujo.demo-live .story-phone{width:min(82vw,262px)}
 #flujo .story-scene-buttons button{font-size:.64rem;padding-inline:6px}
}

/* Solo los minutos están confirmados como criterio cuantitativo de cada plan. */
#precio .plan-datos{grid-template-columns:minmax(0,1fr)}

/* Integraciones · una sola cinta continua. Las dos listas viajan como un
   bloque y el -50% coincide exactamente con el inicio de la copia. */
#programas.sistemas{
  display:block;
  width:100%;
  max-width:none;
  margin-inline:0;
  content-visibility:visible;
  contain-intrinsic-size:none;
}
.sistemas-copy,.sistemas-nota{
  width:min(calc(100% - 2rem),1130px);
  margin-inline:auto;
}
.sistemas-copy{margin-bottom:clamp(1.5rem,3vw,2.2rem)}
.sistemas-nota{margin-top:clamp(1.2rem,2.4vw,1.8rem)}
.marquesina{
  display:block;
  width:100%;
  margin:0;
  overflow:hidden;
  contain:layout paint;
}
.marquesina-flujo{
  display:flex;
  width:max-content;
  transform:translate3d(0,0,0);
  animation:integracionesContinuas 32s linear infinite;
  will-change:transform;
  backface-visibility:hidden;
}
.marquesina .marquesina-pista{
  flex:0 0 auto;
  min-width:100vw;
  box-sizing:content-box;
  justify-content:space-around;
  gap:40px;
  margin:0;
  padding:0 40px 0 0;
  animation:none!important;
}
@keyframes integracionesContinuas{
  to{transform:translate3d(-50%,0,0)}
}
@media(max-width:760px){
  .sistemas-copy,.sistemas-nota{width:calc(100% - 32px)}
  .marquesina-flujo{animation-duration:24s}
  .marquesina .marquesina-pista{gap:28px;padding-right:28px}
}
@media(prefers-reduced-motion:reduce){
  .marquesina-flujo{width:100%;animation:none;justify-content:center}
  .marquesina .marquesina-pista{flex-wrap:wrap;justify-content:center;padding-right:0}
  .marquesina .marquesina-pista[aria-hidden="true"]{display:none}
}

/* El teléfono recupera algo de presencia en escritorio sin alterar móvil. */
#flujo.story-section{
  content-visibility:visible;
  contain-intrinsic-size:none;
}
@media(min-width:981px){
  #flujo.story-section{
    min-height:0;
    grid-template-columns:minmax(0,35fr) minmax(330px,34fr) minmax(280px,31fr);
    align-items:center;
  }
  #flujo .story-phone-pin{min-height:720px}
  #flujo .story-phone,#flujo.demo-live .story-phone{width:330px;height:676px}
}

/* La conversación activa conserva contraste sobre el fondo turquesa. */
#flujo .story-scene-buttons button[aria-pressed="true"],
#flujo .story-scene-buttons button[aria-pressed="true"] span{
  color:#fff;
}
#flujo .story-scene-buttons button[aria-pressed="true"]:hover{
  color:#fff;
  border-color:rgba(90,240,216,.42);
  background:linear-gradient(110deg,rgba(90,240,216,.17),rgba(90,240,216,.065));
  box-shadow:inset 2px 0 rgba(90,240,216,.75);
}
#flujo .story-scene-buttons button[aria-pressed="true"]:hover i{
  color:#fff;
  border-color:rgba(90,240,216,.4);
  background:rgba(90,240,216,.16);
}

/* HERO v2: su CSS va inline en index.html (<style id="hero-critical">) para
   que el hero no dependa de esta hoja asíncrona (sin ella, la mano salía a
   1040 px y saltaba al llegar la hoja: CLS ~1). */