/* ============================================================
   DatosX.com — sitio.css (v2 del sitio, 2026-10)
   Sobrio y legible: texto SÓLIDO (sin grises translúcidos), contraste AA o
   mejor, sin animaciones que retengan el desplazamiento.
   ============================================================ */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../assets/fonts/space-grotesk.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url('../assets/fonts/inter.woff2') format('woff2'); }

:root {
  --fondo: #0A1628;
  --fondo-2: #0E1D33;
  --tarjeta: #12243D;
  --borde: #22385A;
  --texto: #EEF2FA;
  --texto-2: #B9C6DA;      /* sobre --fondo: ~10:1 */
  --texto-3: #8FA0BA;      /* solo rótulos pequeños: ~6:1 */
  --azul: #1E6FD9;
  --azul-claro: #4A90F0;
  --cian: #00B4D8;
  --ok: #34D399;
  --radio: 12px;
  --ancho: 1160px;
  --titulos: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --cuerpo: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 17px/1.6 var(--cuerpo);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video { max-width: 100%; display: block; }
a { color: var(--azul-claro); }
h1, h2, h3 { font-family: var(--titulos); line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 650; margin-bottom: 14px; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--azul); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.saltar:focus { left: 16px; }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }

.ancho { width: 100%; max-width: var(--ancho); margin: 0 auto; padding-inline: 20px; }
.etiqueta { font: 600 0.78rem/1.45 var(--cuerpo); letter-spacing: .12em; text-transform: uppercase; color: var(--cian); margin-bottom: 14px; }
.seccion { padding-block: clamp(64px, 9vw, 104px); }
.seccion--alterna { background: var(--fondo-2); border-block: 1px solid var(--borde); }
.seccion__sub { color: var(--texto-2); max-width: 62ch; margin-bottom: 36px; }
.centro { text-align: center; margin-top: 36px; }

/* ── Botones ── */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px;
  border-radius: 10px; font: 600 0.98rem/1.2 var(--cuerpo); text-decoration: none; border: 1px solid transparent;
  cursor: pointer; transition: background-color .15s, border-color .15s; }
.boton--primario { background: var(--azul); color: #fff; }
.boton--primario:hover { background: #185DBA; }
.boton--secundario { background: transparent; color: var(--texto); border-color: #3A5478; }
.boton--secundario:hover { border-color: var(--azul-claro); }
.boton--chico { min-height: 40px; padding: 8px 16px; font-size: .9rem; }

/* ── Navegación ── */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(10, 22, 40, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav--fija { border-bottom-color: var(--borde); }
.nav__fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.nav__marca img { height: 34px; width: auto; }
.nav__enlaces { display: flex; gap: 28px; }
.nav__enlaces a { color: var(--texto-2); text-decoration: none; font-size: .95rem; }
.nav__enlaces a:hover { color: var(--texto); }
.nav__acciones { display: flex; align-items: center; gap: 12px; }
.idioma { display: inline-flex; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; }
.idioma button { background: none; border: 0; color: var(--texto-3); font: 600 .78rem var(--cuerpo); padding: 7px 10px; cursor: pointer; }
.idioma button[aria-pressed="true"] { background: var(--tarjeta); color: var(--texto); }
.nav__menu { display: none; background: none; border: 1px solid var(--borde); border-radius: 8px; width: 42px; height: 40px; cursor: pointer; padding: 10px; }
.nav__menu span { display: block; height: 2px; background: var(--texto); margin: 4px 0; border-radius: 2px; }
@media (max-width: 900px) {
  .nav__menu { display: block; }
  .nav__acciones .boton { display: none; }
  .nav__enlaces { position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; gap: 0; background: var(--fondo);
    border-bottom: 1px solid var(--borde); display: none; padding: 8px 20px 16px; }
  .nav__enlaces.abierto { display: flex; }
  .nav__enlaces a { padding: 12px 0; border-bottom: 1px solid var(--borde); }
}

/* ── Portada ── */
.portada { padding-block: clamp(48px, 8vw, 96px) clamp(56px, 8vw, 96px);
  background: radial-gradient(1000px 520px at 85% 10%, rgba(30, 111, 217, .18), transparent 60%), var(--fondo); }
.portada__grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
@media (min-width: 980px) { .portada__grilla { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); } }
.portada__sub { color: var(--texto-2); font-size: 1.12rem; margin: 20px 0 30px; max-width: 56ch; }
.portada__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hechos { list-style: none; padding: 0; margin: 38px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
  border-top: 1px solid var(--borde); padding-top: 22px; }
.hechos li { color: var(--texto-2); font-size: .88rem; line-height: 1.4; }
.hechos strong { display: block; color: var(--texto); font: 650 1.25rem/1.2 var(--titulos); margin-bottom: 4px; }
@media (max-width: 560px) { .hechos { grid-template-columns: minmax(0, 1fr); } }
.portada__medio { margin: 0; }
.portada__medio figcaption, .demo__sector, .caso__sector { color: var(--texto-3); font-size: .85rem; margin-top: 10px; }

/* La «pantalla»: un marco sobrio de monitor para los vídeos de la sala */
.pantalla { border-radius: var(--radio); overflow: hidden; background: #050C18; border: 1px solid var(--borde);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35); aspect-ratio: 16 / 9; }
.pantalla video { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pantalla--chica { box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }

/* ── El problema ── */
.dolores { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.dolores li { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px 20px 18px 50px;
  position: relative; color: var(--texto); }
.dolores li::before { content: ''; position: absolute; left: 20px; top: 24px; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--cian); }

/* ── Pasos ── */
.pasos { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; counter-reset: p; }
.pasos li { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; }
.pasos__n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--azul);
  color: #fff; font: 700 1rem var(--titulos); margin-bottom: 14px; }
.pasos h3 { margin-bottom: 8px; }
.pasos p { color: var(--texto-2); }

/* ── Demostraciones ── */
.demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.demo h3 { margin: 4px 0 6px; }
.demo p:not(.demo__sector) { color: var(--texto-2); font-size: .97rem; }
.demo__sector { margin-top: 14px; text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; font-weight: 600; color: var(--cian); }

/* ── Casos ── */
.casos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.caso { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; }
.caso__sector { margin: 0 0 4px; color: var(--texto); font: 650 1.1rem var(--titulos); }
.caso { display: flex; flex-direction: column; }
.caso__t { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-3); font-weight: 600; margin-top: 14px; }
.caso p:not(.caso__sector):not(.caso__t):not(.caso__resultado) { color: var(--texto-2); font-size: .97rem; margin-top: 4px; }
.caso p.caso__dolor { color: var(--texto); }
.caso p.caso__resultado { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--borde); color: var(--ok);
  font: 650 1.2rem/1.35 var(--titulos); }
.caso p:nth-last-child(2) { margin-bottom: 18px; }
.caso dl { margin: 0; }
.caso dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto-3); font-weight: 600; margin-top: 14px; }
.caso dd { margin: 4px 0 0; color: var(--texto-2); font-size: .97rem; }
.caso dt:last-of-type + dd { color: var(--texto); }

/* ── Por qué ── */
.razones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px; margin-top: 18px; }
.razones h3 { margin-bottom: 8px; }
.razones p { color: var(--texto-2); }
.sectores { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--borde); }
.sectores__t { color: var(--texto-3); font-size: .85rem; margin-bottom: 12px; }
.sectores ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sectores li { border: 1px solid var(--borde); border-radius: 999px; padding: 8px 16px; color: var(--texto); font-size: .92rem; }

/* ── Contacto y formulario ── */
.contacto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 900px) { .contacto { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.contacto__texto p { color: var(--texto-2); margin: 8px 0 24px; max-width: 48ch; }
.contacto__nota { font-size: .92rem; margin-top: 18px !important; }
.formulario { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 24px; display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.field { display: grid; gap: 6px; }
.field__label { font-size: .9rem; color: var(--texto); }
.field__input, .field__textarea { width: 100%; background: var(--fondo); color: var(--texto); border: 1px solid #2E486E; border-radius: 8px;
  padding: 11px 12px; font: 400 1rem var(--cuerpo); }
.field__textarea { resize: vertical; min-height: 110px; }
.field__input::placeholder, .field__textarea::placeholder { color: #7186A3; }
.field__input:focus, .field__textarea:focus { border-color: var(--azul-claro); outline: none; box-shadow: 0 0 0 3px rgba(74, 144, 240, .2); }
.field__error-msg { display: none; color: #FCA5A5; font-size: .85rem; }
.field--error .field__error-msg { display: block; }
.field--error .field__input, .field--error .field__textarea { border-color: #EF4444; }
.field--success .field__input, .field--success .field__textarea { border-color: rgba(52, 211, 153, .5); }
.form__status:empty { display: none; }
.form__status { border-radius: 8px; padding: 10px 12px; font-size: .92rem; }
.form__status--success { background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .35); color: #6EE7B7; }
.form__status--error { background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .35); color: #FCA5A5; }
.btn-submit { width: 100%; }
.btn-submit__spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
  animation: giro .8s linear infinite; }
.btn-submit.is-loading .btn-submit__text { display: none; }
.btn-submit.is-loading .btn-submit__spinner { display: block; }
@keyframes giro { to { transform: rotate(360deg); } }

/* ── Pie ── */
.pie { padding-block: 36px; border-top: 1px solid var(--borde); }
.pie__fila { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.pie p { color: var(--texto-3); font-size: .9rem; margin-top: 10px; }
.pie__redes { display: flex; gap: 18px; }
.pie__redes a { color: var(--texto-2); text-decoration: none; font-size: .92rem; }
.pie__legal { margin: 0 !important; }

/* ── WhatsApp ── */
[hidden] { display: none !important; }
.wa-widget { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.wa-fab { width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.wa-card { width: min(300px, calc(100vw - 36px)); background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; }
.wa-card__title { font-weight: 600; margin-bottom: 10px; }
.wa-card form { display: grid; gap: 8px; }
.wa-input { background: var(--fondo); color: var(--texto); border: 1px solid #2E486E; border-radius: 8px; padding: 10px; font: 400 .95rem var(--cuerpo); }
.wa-hp { display: none; }
.wa-submit { background: #25D366; color: #06210F; border: 0; border-radius: 8px; padding: 10px; font-weight: 600; cursor: pointer; }
.wa-error { color: #FCA5A5; font-size: .85rem; margin: 0; }

/* ══════════════════ MOVIMIENTO (v2.1) ══════════════════
   Cuenta la historia sin retener el desplazamiento: cada animación se dispara
   al llegar a su sección (IntersectionObserver) y dura menos de 2 s.
   ⛔ Sin JavaScript, o con «reducir movimiento», TODO queda visible en reposo:
      el estado oculto solo existe bajo `.js` y fuera de `reduce`. */
@media (prefers-reduced-motion: no-preference) {
  .js .titulo-entra { animation: entra .9s cubic-bezier(.2, .7, .2, 1) both; }
  .js .portada__sub { animation: entra .9s .15s cubic-bezier(.2, .7, .2, 1) both; }
  .js .portada__ctas, .js .hechos { animation: entra .9s .3s cubic-bezier(.2, .7, .2, 1) both; }
  .js .portada__medio { animation: entra-der 1.1s .2s cubic-bezier(.2, .7, .2, 1) both; }
  .js .revelar:not(.visto) > * { opacity: 0; transform: translateY(22px); }
  .js .revelar.visto > * { animation: entra .7s cubic-bezier(.2, .7, .2, 1) both; }
  .js .revelar.visto > *:nth-child(2) { animation-delay: .1s; }
  .js .revelar.visto > *:nth-child(3) { animation-delay: .2s; }
  .js .revelar.visto > *:nth-child(4) { animation-delay: .3s; }
  .js .revelar.visto > *:nth-child(5) { animation-delay: .4s; }
  .js .revelar.visto > *:nth-child(6) { animation-delay: .5s; }
}
@keyframes entra { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes entra-der { from { opacity: 0; transform: translateX(30px) scale(.98); } to { opacity: 1; transform: none; } }

/* Hitos sobre el vídeo de la portada: aparecen en secuencia y vuelven a empezar */
.pantalla { position: relative; }
.hitos { list-style: none; margin: 0; padding: 0; position: absolute; right: 14px; top: 14px; display: grid; gap: 8px; justify-items: end; }
.hitos li { background: rgba(10, 22, 40, .9); border: 1px solid var(--borde); border-left: 3px solid var(--cian); color: var(--texto);
  font-size: .82rem; font-weight: 500; padding: 7px 12px; border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.hitos .hitos--alerta { border-left-color: #F59E0B; }
.hitos .hitos--ok { border-left-color: var(--ok); }
@media (prefers-reduced-motion: no-preference) {
  .js .hitos li { opacity: 0; animation: hito 12s infinite; }
  .js .hitos li:nth-child(2) { animation-delay: 2s; }
  .js .hitos li:nth-child(3) { animation-delay: 4s; }
  .js .hitos li:nth-child(4) { animation-delay: 6s; }
}
@keyframes hito { 0% { opacity: 0; transform: translateX(16px); } 4%, 70% { opacity: 1; transform: none; } 78%, 100% { opacity: 0; } }
@media (max-width: 560px) { .hitos { right: 8px; top: 8px; gap: 5px; } .hitos li { font-size: .72rem; padding: 5px 9px; } }

/* Antes y después */
.historia__grilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 28px; }
@media (min-width: 860px) { .historia__grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.carril { border-radius: var(--radio); padding: 24px; border: 1px solid var(--borde); background: var(--tarjeta); }
.carril--despues { border-color: rgba(52, 211, 153, .35); background: linear-gradient(180deg, rgba(52, 211, 153, .07), var(--tarjeta) 60%); }
.carril__t { font: 650 1.15rem var(--titulos); margin-bottom: 16px; }
.carril--antes .carril__t { color: #FCA5A5; }
.carril--despues .carril__t { color: var(--ok); }
.carril__pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: c; }
.carril__pasos li { counter-increment: c; position: relative; padding: 10px 12px 10px 44px; border-radius: 8px; background: rgba(255, 255, 255, .03); color: var(--texto-2); }
.carril__pasos li::before { content: counter(c); position: absolute; left: 12px; top: 10px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font: 700 .78rem var(--titulos); background: #2A3F60; color: var(--texto); }
.carril--despues .carril__pasos li::before { background: var(--ok); color: #05261A; }
.carril--antes .carril__pasos li:last-child { color: #FCA5A5; }
.carril__pie { margin-top: 16px; color: var(--texto); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .js .historia__grilla:not(.visto) .carril__pasos li { opacity: 0; transform: translateX(-12px); }
  .js .historia__grilla.visto .carril__pasos li { animation: paso .5s ease-out both; }
  .js .historia__grilla.visto .carril--antes li:nth-child(1) { animation-delay: .2s; }
  .js .historia__grilla.visto .carril--antes li:nth-child(2) { animation-delay: .5s; }
  .js .historia__grilla.visto .carril--antes li:nth-child(3) { animation-delay: .8s; }
  .js .historia__grilla.visto .carril--antes li:nth-child(4) { animation-delay: 1.1s; }
  .js .historia__grilla.visto .carril--antes li:nth-child(5) { animation-delay: 1.4s; }
  .js .historia__grilla.visto .carril--despues li:nth-child(1) { animation-delay: 1.9s; }
  .js .historia__grilla.visto .carril--despues li:nth-child(2) { animation-delay: 2.1s; }
  .js .historia__grilla.visto .carril--despues li:nth-child(3) { animation-delay: 2.3s; }
  .js .historia__grilla.visto .carril--despues li:nth-child(4) { animation-delay: 2.5s; }
  .js .historia__grilla.visto .carril--despues li:nth-child(5) { animation-delay: 2.7s; }
  .js .historia__grilla.visto .carril--despues { animation: brillo 1.2s 2.9s ease-out both; }
}
@keyframes paso { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes brillo { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } 40% { box-shadow: 0 0 0 6px rgba(52, 211, 153, .18); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }

/* Cómo trabajamos: una línea une los tres pasos */
@media (min-width: 900px) {
  .pasos { position: relative; }
  .pasos::before { content: ''; position: absolute; left: 41px; right: 41px; top: 41px; height: 2px; background: var(--azul);
    transform-origin: left; z-index: 0; }
  .pasos li { position: relative; z-index: 1; }
  @media (prefers-reduced-motion: no-preference) {
    .js .pasos:not(.visto)::before { transform: scaleX(0); }
    .js .pasos.visto::before { transition: transform 1.4s .3s cubic-bezier(.2, .7, .2, 1); transform: scaleX(1); }
  }
}
.cuenta { font-variant-numeric: tabular-nums; }

/* Pieza destacada: la plataforma comercial */
.destacado { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 44px;
  padding: 24px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--tarjeta); }
@media (min-width: 980px) { .destacado { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.destacado h3 { font-size: 1.5rem; margin: 6px 0 10px; }
.destacado__texto > p:not(.demo__sector) { color: var(--texto-2); }
.destacado__lista { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.destacado__lista li { color: var(--texto); font-size: .95rem; padding-left: 18px; position: relative; }
.destacado__lista li::before { content: ''; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--cian); }

/* ══════════════ v2.3 — el lenguaje visual de la sala de demostración ══════════════ */
.portada__lema { font: 600 clamp(1.05rem, 2vw, 1.3rem)/1.35 var(--titulos); color: var(--cian); margin: 16px 0 0; letter-spacing: .01em; }
.portada__sub { margin-top: 14px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* El camino: cuatro fases que se encienden una tras otra, con su color en un tinte tenue */
.ruta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.fase { position: relative; border-radius: var(--radio); border: 1px solid var(--borde);
  background: linear-gradient(155deg, var(--tinte) 0%, transparent 62%), var(--tarjeta); padding: 24px 22px 22px; }
.fase::before { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 100%; border-top-left-radius: var(--radio);
  background: linear-gradient(90deg, var(--linea-color), transparent); }
.fase .n { display: block; font: 600 12px var(--cuerpo); letter-spacing: .16em; color: var(--nota-color); margin-bottom: 10px; }
.fase h3 { font-size: 1.12rem; margin-bottom: 8px; }
.fase p { color: var(--texto-2); font-size: .95rem; }
.fase-dolor     { --tinte: rgba(248,113,113,.10); --linea-color: rgba(248,113,113,.6);  --nota-color: rgba(248,113,113,.9); --turno: 0s; }
.fase-asis      { --tinte: rgba(251,191,36,.09);  --linea-color: rgba(251,191,36,.6);   --nota-color: rgba(251,191,36,.9);  --turno: .55s; }
.fase-tobe      { --tinte: rgba(74,222,128,.09);  --linea-color: rgba(74,222,128,.6);   --nota-color: rgba(74,222,128,.9);  --turno: 1.1s; }
.fase-nurturing { --tinte: rgba(167,139,250,.11); --linea-color: rgba(167,139,250,.65); --nota-color: rgba(167,139,250,.95); --turno: 1.65s; }
@media (min-width: 980px) {
  .fase + .fase::after { content: '›'; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
    color: rgba(185,198,218,.6); font-size: 24px; line-height: 1; }
}
.base { position: relative; overflow: hidden; margin-top: 14px; border-radius: var(--radio); border: 1px solid var(--borde);
  background: rgba(238,242,255,.03); padding: 14px; text-align: center; }
.base-txt { position: relative; z-index: 1; color: rgba(255,255,255,.8); font: 600 .9rem var(--cuerpo); letter-spacing: .06em; }
.base::before { content: ''; position: absolute; top: 0; bottom: 0; width: 34%; left: -34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); }
.e2e-cinta { margin: 18px 0 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.e2e-pista { display: flex; gap: 8px; width: max-content; }
.e2e-pista span { font-size: .8rem; letter-spacing: .06em; color: rgba(185,198,218,.8); border: 1px solid rgba(238,242,255,.10);
  border-radius: 999px; padding: 5px 12px; white-space: nowrap; }
.metodologia { margin-top: 16px; color: var(--texto-2); font-size: .95rem; }
.metodologia b { color: var(--cian); }
/* .camino es «revelar»: no se ocultan sus hijos de golpe, se animan las fases */
.js .camino.revelar:not(.visto) > * { opacity: 1; transform: none; }
.js .camino.revelar.visto > * { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .camino:not(.visto) .fase { opacity: 0; }
  .js .camino:not(.visto) .fase::before { width: 0; }
  .js .camino.visto .fase { animation: fase-entra .9s ease-out both; animation-delay: var(--turno, 0s); }
  .js .camino.visto .fase::before { animation: fase-traza 1.4s ease-out both; animation-delay: var(--turno, 0s); }
  .base::before { animation: vaiven 11s ease-in-out infinite alternate; }
  .e2e-pista { animation: desfilar 120s linear infinite; }
  .e2e-cinta:hover .e2e-pista { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .e2e-cinta { overflow-x: auto; mask-image: none; } }
@keyframes fase-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fase-traza { from { width: 0; } to { width: 100%; } }
@keyframes vaiven { to { left: 100%; } }
@keyframes desfilar { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Tarjetas de demostración: el formato de la sala (flujo, proceso, dolor, lo que cambia) */
.dim-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 10px; }
.flujo { display: flex; align-items: center; gap: 6px; }
.flujo-ico { width: 24px; height: 24px; flex: 0 0 auto; color: var(--cian); fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.flujo-flecha { color: var(--texto-3); font-size: 13px; line-height: 1; }
.etq-e2e { margin-left: auto; font: 600 11px var(--cuerpo); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3);
  border: 1px solid var(--borde); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.demo { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 14px 20px;
  transition: border-color .2s, transform .2s; }
.demo:hover { border-color: rgba(30, 111, 217, .55); transform: translateY(-2px); }
.demo h3 { margin: 0 0 8px; padding-inline: 4px; }
.demo .dim-cab { padding-inline: 4px; }
.demo .dolor { color: var(--texto-2); font-size: .93rem; margin: 0 4px 8px; }
.demo .cambia { color: var(--texto); font-size: .93rem; margin: 0 4px; padding-left: 12px; border-left: 2px solid var(--ok); }
.destacado .dim-cab { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .revelar.visto .flujo-ico { animation: icono .6s ease-out both; }
  .js .revelar.visto .flujo-ico:nth-of-type(2) { animation-delay: .25s; }
  .js .revelar.visto .flujo-ico:nth-of-type(3) { animation-delay: .5s; }
}
@keyframes icono { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

/* ══════════════ v2.4 — portada como la sala de demostración ══════════════ */
.portada { padding-block: clamp(36px, 6vw, 64px) clamp(48px, 7vw, 80px); }
.portada__marco { border: 1px solid var(--borde); border-radius: 16px; padding: clamp(24px, 4vw, 44px);
  background: radial-gradient(800px 360px at 90% 0%, rgba(30, 111, 217, .20), transparent 60%), var(--fondo-2); }
.portada__marco h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); }
.portada__marco .portada__sub { max-width: 64ch; margin: 16px 0 26px; }
.camino__t { margin: clamp(36px, 5vw, 52px) 0 6px; font-size: clamp(1.5rem, 3vw, 2rem); }
.camino__sub { color: var(--texto-2); margin: 0 0 18px; }
.camino { scroll-margin-top: 90px; }
/* En fila SIEMPRE: en una pantalla estrecha las fases se deslizan de lado, no se apilan */
@media (max-width: 979px) {
  .ruta { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(240px, 78%);
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
  .fase { scroll-snap-align: start; }
}
@media (min-width: 980px) { .ruta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* La portada entra al cargar: el camino no espera al desplazamiento */
@media (prefers-reduced-motion: no-preference) {
  .js .camino.visto .fase { animation-delay: calc(var(--turno, 0s) + .5s); }
  .js .camino.visto .fase::before { animation-delay: calc(var(--turno, 0s) + .5s); }
}

/* v2.5 — el vídeo vuelve a la portada, dentro del marco */
.portada__marco { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
@media (min-width: 980px) { .portada__marco { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); } }
.portada__marco h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
.portada__marco .portada__sub { margin: 16px 0 26px; }
.portada__medio figcaption { margin-top: 10px; }

/* ══════════════ v2.6 — Impacto y Mapa de valor E2E ══════════════ */
.impacto { padding-block: clamp(40px, 6vw, 64px); background: linear-gradient(90deg, rgba(30,111,217,.12), rgba(0,180,216,.06)), var(--fondo-2);
  border-block: 1px solid var(--borde); }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0; }
.cifra { padding: 8px 26px; border-left: 1px solid var(--borde); }
.cifra:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 960px) { .cifra { border-left: 0; padding: 14px 0; border-top: 1px solid var(--borde); } .cifra:first-child { border-top: 0; } }
.cifra__n { font: 700 clamp(2.4rem, 4.6vw, 3.4rem)/1 var(--titulos); color: var(--texto); font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, #EEF2FA, #7FD8EA); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cifra__n small { font-size: .45em; font-weight: 600; }
.cifra__t { color: var(--texto); font-size: .98rem; margin-top: 10px; max-width: 26ch; }
.cifra__s { color: var(--cian); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; }

.mapa { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 980px) { .mapa { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: start; } }
.mapa__procesos { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
@media (min-width: 980px) { .mapa__procesos { flex-direction: column; overflow: visible; } }
.mapa__procesos button { flex: 0 0 auto; text-align: left; background: transparent; border: 1px solid var(--borde); color: var(--texto-2);
  border-radius: 10px; padding: 12px 14px; font: 600 .92rem var(--cuerpo); cursor: pointer; position: relative; overflow: hidden; }
.mapa__procesos button small { display: block; font-weight: 400; font-size: .78rem; color: var(--texto-3); margin-top: 2px; }
.mapa__procesos button[aria-selected="true"] { border-color: var(--cian); color: var(--texto); background: rgba(0,180,216,.08); }
.mapa__procesos button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--cian); transform-origin: left; animation: avance var(--ciclo, 7s) linear both; }
.mapa__procesos.quieto button::after { animation: none !important; width: 0; }
@keyframes avance { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mapa__panel { border: 1px solid var(--borde); border-radius: 14px; padding: clamp(18px, 3vw, 30px); background:
  radial-gradient(600px 260px at 100% 0%, rgba(0,180,216,.10), transparent 60%), var(--tarjeta); min-height: 300px; }
.mapa__flujo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; align-items: start; position: relative; }
@media (max-width: 700px) { .mapa__flujo { grid-template-columns: none; grid-auto-flow: row; gap: 10px; } }
.nodo { position: relative; text-align: center; padding: 0 6px; }
.nodo__ico { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #2E486E;
  background: var(--fondo); color: var(--texto-3); position: relative; z-index: 1; }
.nodo__ico svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nodo--auto .nodo__ico { border-color: var(--cian); color: var(--cian); box-shadow: 0 0 0 6px rgba(0,180,216,.10), 0 0 24px rgba(0,180,216,.35); }
.nodo--aprueba .nodo__ico { border-color: #F59E0B; color: #F59E0B; box-shadow: 0 0 0 6px rgba(245,158,11,.10); }
.nodo__t { font: 600 .92rem/1.3 var(--titulos); color: var(--texto); }
.nodo__d { font-size: .8rem; color: var(--texto-2); margin-top: 4px; line-height: 1.35; }
/* El conector: una línea con un trazo que corre hacia el siguiente paso */
@media (min-width: 701px) {
  .nodo + .nodo::before { content: ''; position: absolute; top: 32px; right: 50%; width: 100%; height: 2px; z-index: 0;
    background: repeating-linear-gradient(90deg, rgba(0,180,216,.7) 0 8px, transparent 8px 14px); background-size: 28px 2px; }
}
@media (max-width: 700px) { .nodo { display: grid; grid-template-columns: 56px minmax(0, 1fr); text-align: left; gap: 12px; align-items: center; }
  .nodo__ico { width: 52px; height: 52px; margin: 0; } }
.mapa__leyenda { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 24px; font-size: .82rem; color: var(--texto-2); }
.ley::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.ley--auto::before { background: var(--cian); } .ley--aprueba::before { background: #F59E0B; }
.mapa__valor { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--borde); font: 600 clamp(1.1rem, 2vw, 1.35rem)/1.4 var(--titulos); color: var(--texto); }
@media (prefers-reduced-motion: no-preference) {
  .nodo + .nodo::before { animation: corre 1.2s linear infinite; }
  .mapa__flujo.entra .nodo { animation: nodo .55s ease-out both; }
  .mapa__flujo.entra .nodo:nth-child(2) { animation-delay: .12s; } .mapa__flujo.entra .nodo:nth-child(3) { animation-delay: .24s; }
  .mapa__flujo.entra .nodo:nth-child(4) { animation-delay: .36s; } .mapa__flujo.entra .nodo:nth-child(5) { animation-delay: .48s; }
  .mapa__flujo.entra ~ .mapa__valor { animation: entra .6s .5s ease-out both; }
  .nodo--auto .nodo__ico { animation: late 2.4s ease-in-out infinite; }
}
@keyframes corre { from { background-position: 0 0; } to { background-position: 28px 0; } }
@keyframes nodo { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes late { 0%, 100% { box-shadow: 0 0 0 6px rgba(0,180,216,.10), 0 0 18px rgba(0,180,216,.25); } 50% { box-shadow: 0 0 0 9px rgba(0,180,216,.06), 0 0 30px rgba(0,180,216,.45); } }

/* ══════════════ v2.7 — Casos en cintas continuas ══════════════ */
.testimonios { display: grid; gap: 18px; margin-top: 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.testimonios__cinta { overflow: hidden; }
.testimonios__pista { display: flex; gap: 18px; width: max-content; padding-block: 4px; }
.testimonio { flex: 0 0 auto; width: min(340px, 78vw); display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--borde); border-radius: 14px; padding: 22px 22px 18px; background: var(--tarjeta); position: relative; }
.testimonio::before { content: '\201C'; position: absolute; top: 4px; right: 18px; font: 700 64px/1 var(--titulos); color: rgba(0,180,216,.18); }
.testimonio__dolor { font: 500 1.02rem/1.45 var(--titulos); color: var(--texto); padding-right: 28px; }
.testimonio__resultado { display: flex; gap: 10px; align-items: flex-start; color: var(--texto-2); font-size: .92rem; line-height: 1.45;
  padding-top: 14px; border-top: 1px solid var(--borde); margin-top: auto; }
.testimonio__resultado svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--cian); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.testimonio__pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .74rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cian); }
.testimonio__pie .etq-e2e { text-transform: none; letter-spacing: 0; }
@media (prefers-reduced-motion: no-preference) {
  .testimonios.corre .testimonios__pista { animation: cinta var(--dur, 80s) linear infinite; }
  .testimonios.corre .testimonios__cinta--inversa .testimonios__pista { animation-direction: reverse; }
  .testimonios__cinta:hover .testimonios__pista, .testimonios__cinta:focus-within .testimonios__pista { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .testimonios__cinta { overflow-x: auto; } }
@keyframes cinta { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }

/* ══════════════ v2.8 — Cierre con QR (como la sala) ══════════════ */
.cierre { padding-block: clamp(48px, 7vw, 80px); }
.cierre__marco { text-align: center; border: 1px solid var(--borde); border-radius: 16px; padding: clamp(32px, 5vw, 56px) 16px;
  background: radial-gradient(700px 320px at 50% 0%, rgba(0,180,216,.14), transparent 65%), var(--fondo-2); }
.cierre__marca { color: var(--cian); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cierre__frase { font-size: clamp(2rem, 5.6vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; margin-top: 14px; text-wrap: balance; }
.cierre__sub { color: #F5B544; font: 600 clamp(1.15rem, 2.4vw, 1.5rem)/1.3 var(--titulos); max-width: 26ch; margin: 18px auto 0; text-wrap: balance; }
.cierre__gratis { width: fit-content; margin: 14px auto 0; padding: 6px 16px; border: 1px solid var(--borde); border-radius: 999px;
  color: var(--texto); font-weight: 600; font-size: .95rem; }
.cierre__boton { margin-top: 28px; font-size: 1.05rem; padding: 14px 30px; }
.cierre__qr { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 26px; }
.cierre__qr-txt { color: var(--texto-2); font-size: .92rem; }
.cierre__qr a:not(.boton) { display: inline-block; background: #fff; padding: 12px; border-radius: 14px; line-height: 0; }
.cierre__qr img { width: 160px; height: 160px; }
/* En el teléfono no hay a quién enseñarle el código */
@media (max-width: 700px) { .cierre__qr { display: none; } }

/* ══════════════ v2.9 — Pie con lema y servicios ══════════════ */
.pie__fila { align-items: flex-start; }
.pie .pie__lema { color: var(--texto); font: 600 1rem var(--titulos); }
.pie .pie__t { margin: 0 0 8px; color: var(--cian); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pie__servicios ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--texto-2); font-size: .92rem; }
.pie__redes, .pie__legal { align-self: center; }

/* ══════════════ v2.10 — Titular como el del sitio anterior («Automatizamos empresas desde adentro») ══════════════ */
.portada__marco h1.titular { display: flex; flex-direction: column; font-size: clamp(2.8rem, 5.6vw, 4.8rem);
  font-weight: 700; letter-spacing: -.04em; line-height: 1.06; }
.titular__l { display: block; }
.titular__l--2 { font-size: 1.08em; }
.titular__grad { background: linear-gradient(135deg, #3D8EF5 0%, #00B4D8 100%); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text; padding-bottom: .04em; }
@media (prefers-reduced-motion: no-preference) {
  .js .titular__l { animation: lineaTitular .7s cubic-bezier(.16, 1, .3, 1) both; }
  .js .titular__l--1 { animation-delay: .35s; } .js .titular__l--2 { animation-delay: .5s; } .js .titular__l--3 { animation-delay: .65s; }
}
@keyframes lineaTitular { from { opacity: 0; transform: translateY(28px) skewY(2deg); } to { opacity: 1; transform: none; } }

/* Sin subtítulo, el título de la sección necesita su propio aire sobre lo que sigue */
.seccion h2 + .destacado, .seccion h2 + .demos { margin-top: 30px; }