/* =====================================================================
   SOFMIGRACIÓN — página comercial
   Fase 1: base visual, header y hero.
   ===================================================================== */

/* ---------- Tipografía oficial: Manrope (servida desde aquí, no desde Google) ----------
   Una sola familia, variable 200–800. Pesos de la marca:
   títulos 700–800 · subtítulos 600 · botones 600 · texto 400–500 · números 600–700 */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fuentes/manrope-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fuentes/manrope-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ----------
   La paleta oficial y, aparte, los neutros que hacen falta para leer.
   Contraste medido: blanco sobre índigo 5,15:1 · blanco sobre azul 17,9:1 ·
   lavanda sobre azul 8,2:1 · --texto-suave sobre azul 12,0:1 ·
   --texto-tenue sobre azul 7,0:1. El índigo NO se usa para escribir sobre
   el azul (3,5:1).                                                        */
:root {
  --azul: #0F172A;
  --indigo: #5B5CE2;
  --lavanda: #A7A8FF;
  --menta: #35D0A2;
  --gris-claro: #F7F8FC;
  --blanco: #FFFFFF;

  --indigo-hover: #6D6EEA;
  /* El fondo del hero: #0F172A aclarado con índigo, no un azul nuevo.
     #1B2352 = 85 % azul profundo + 15 % índigo · #151E44 = 92 % + 8 %.  */
  --azul-luz: #1B2352;
  --azul-medio: #151E44;
  --texto-suave: #CBD5E1;
  --texto-tenue: #94A3B8;
  --linea: rgba(255, 255, 255, 0.10);
  --linea-fuerte: rgba(255, 255, 255, 0.18);

  --ancho: 1200px;
  --margen: 24px;
  --alto-header: 84px;
  --radio: 10px;
  --radio-grande: 16px;
  --suave: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1023px) {
  :root { --alto-header: 76px; }
}
@media (max-width: 767px) {
  :root { --margen: 16px; --alto-header: 68px; }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--alto-header);
}

body {
  margin: 0;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--azul);
  font-variant-numeric: lining-nums;
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html.menu-abierto { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--lavanda);
  outline-offset: 3px;
  border-radius: 6px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--margen);
}

.saltar {
  position: absolute;
  left: var(--margen);
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--azul);
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { top: 12px; }

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radio);
  border: 1px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease,
              box-shadow 0.25s ease, transform 0.25s var(--suave);
}

.boton-primario {
  background: var(--indigo);
  color: var(--blanco);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 24px -12px rgba(91, 92, 226, 0.9);
}
.boton-primario:hover {
  background: var(--indigo-hover);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 14px 32px -12px rgba(91, 92, 226, 0.95);
}

.boton-secundario {
  background: transparent;
  color: var(--blanco);
  border-color: var(--linea-fuerte);
}
.boton-secundario:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.32);
}

.boton-grande { min-height: 56px; padding: 0 28px; font-size: 16px; }
.boton-compacto { min-height: 40px; padding: 0 16px; font-size: 14px; }

.boton:active { transform: translateY(0); }

/* ---------- «Probar gratis»: el llamado a la acción (FASE 17, 2026-10-20) ----------
   El botón que lleva al registro de la prueba de 14 días. Es EL MISMO VERDE del
   botón de Soporte (--menta) en sólido, con letra azul noche en negrita: tan
   visible como «Agendar demo» y de otra familia de color, para que no compitan.
   Un halo que late (el de Soporte) y un brillo que lo cruza cada pocos
   segundos. Con «reducir movimiento» no se anima nada. */
.boton-prueba {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--menta);
  color: var(--azul);
  font-weight: 800;
  border: 0;
  box-shadow: 0 10px 28px rgba(53, 208, 162, 0.45), 0 2px 6px rgba(15, 23, 42, 0.35);
  animation: prueba-halo 2.8s ease-in-out infinite;
}
.boton-prueba::after {
  content: "";
  position: absolute;
  inset: -2px auto -2px -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  animation: prueba-brillo 4s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}
.boton-prueba:hover {
  background: #4DE0B4;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(53, 208, 162, 0.6), 0 2px 6px rgba(15, 23, 42, 0.35);
}
.boton-prueba:focus-visible { outline: 3px solid var(--blanco); outline-offset: 3px; }
@keyframes prueba-halo {
  0%, 100% { box-shadow: 0 10px 28px rgba(53, 208, 162, 0.45), 0 0 0 0 rgba(53, 208, 162, 0.55), 0 2px 6px rgba(15, 23, 42, 0.35); }
  50%      { box-shadow: 0 10px 28px rgba(53, 208, 162, 0.45), 0 0 0 12px rgba(53, 208, 162, 0), 0 2px 6px rgba(15, 23, 42, 0.35); }
}
@keyframes prueba-brillo {
  0%, 60% { left: -60%; }
  90%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .boton-prueba, .boton-prueba::after { animation: none; }
  .boton-prueba:hover { transform: none; }
}
/* En el bloque final de planes, sobre el fondo índigo: el mismo verde. */
.planes .planes-prueba .boton-prueba { background: var(--menta); color: var(--azul); }
.planes .planes-prueba .boton-prueba:hover { background: #4DE0B4; }

/* Un enlace todavía sin destino se ve igual: sólo no navega. */
[aria-disabled="true"] { cursor: default; }

/* ---------- Header ---------- */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--alto-header);
  color: var(--blanco);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
.header.es-fijo,
html.menu-abierto .header {
  background: rgba(27, 35, 82, 0.86);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--linea);
}

.header-barra {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex-shrink: 0;
  overflow: visible;
  text-decoration: none;
}
/* marca/logo-header@*.png: el logo oficial para fondo oscuro, con su fondo
   vuelto transparente y sin margen vacío. Sin lema (negocio, 2026-09-27):
   sólo el logo, grande. Tamaño por alto; el ancho sale de su proporción, así
   que nunca se recorta ni se deforma.                                     */
.logo-img {
  display: block;
  height: 64px;
  width: auto;
  max-width: none;
  max-height: calc(var(--alto-header) - 12px);
  object-fit: contain;
  aspect-ratio: 1814 / 599;
}
@media (max-width: 1023px) {
  .logo-img { height: 56px; }
}
@media (max-width: 767px) {
  .logo-img { height: 48px; }
}

.nav-principal { flex: 1; display: none; justify-content: center; }
.nav-lista {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-lista a {
  display: inline-block;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--texto-suave);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-lista a:hover { color: var(--blanco); background: rgba(255, 255, 255, 0.05); }

.header-acciones {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.idiomas {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--linea);
  border-radius: 999px;
}
.idiomas button {
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-tenue);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.idiomas button:hover { color: var(--blanco); }
.idiomas button[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.1);
  color: var(--blanco);
}

.enlace-login {
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--texto-suave);
  text-decoration: none;
  transition: color 0.2s ease;
}
.enlace-login:hover { color: var(--blanco); }

.boton-menu {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.boton-menu span {
  display: block;
  width: 20px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--blanco);
  transition: transform 0.3s var(--suave), opacity 0.2s ease;
}
.boton-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.boton-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.boton-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Qué se ve en la barra según el ancho:
   móvil y tablet → logo · Agendar demo · menú
   escritorio (≥ 1200) → logo · navegación · ES|EN · Iniciar sesión · Agendar una demo */
.solo-escritorio { display: none; }
.header-demo { display: inline-flex; }
@media (min-width: 1200px) {
  .nav-principal { display: flex; }
  .solo-escritorio { display: inline-flex; }
  .boton-menu { display: none; }
}

/* ---------- Menú móvil ---------- */

.menu-movil {
  position: fixed;
  inset: var(--alto-header) 0 0 0;
  z-index: 49;
  overflow-y: auto;
  background: var(--azul);
  color: var(--blanco);
  border-top: 1px solid var(--linea);
  animation: menu-entra 0.25s var(--suave);
}
.menu-movil[hidden] { display: none; }

.menu-movil .contenedor {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-top: 16px;
  padding-bottom: 32px;
}
.menu-movil .nav-lista {
  flex-direction: column;
  gap: 0;
}
.menu-movil .nav-lista a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 4px;
  border-bottom: 1px solid var(--linea);
  border-radius: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--blanco);
}
.menu-movil .nav-lista a:hover { background: transparent; color: var(--lavanda); }

.menu-movil-pie {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.menu-movil-pie .boton { width: 100%; }
.menu-movil-soporte {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px;
  font-size: 15px; font-weight: 600;
  color: var(--texto-suave); text-decoration: none;
}
.menu-movil-soporte:hover { color: var(--blanco); }
.menu-movil-idioma {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  font-size: 14px;
  color: var(--texto-tenue);
}

@keyframes menu-entra {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(170deg, var(--azul-luz) 0%, var(--azul-medio) 45%, var(--azul) 100%);
  color: var(--blanco);
  padding: calc(var(--alto-header) + 56px) 0 104px;
}

/* Profundidad: dos luces muy tenues y una retícula que se desvanece.
   Todo decorativo, detrás del contenido. */
.hero-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero-fondo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 78% 40%, rgba(91, 92, 226, 0.32), transparent 70%),
    radial-gradient(45% 50% at 15% 0%, rgba(167, 168, 255, 0.14), transparent 70%),
    radial-gradient(50% 40% at 50% 100%, rgba(91, 92, 226, 0.10), transparent 70%);
}
.hero-fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 60% at 60% 30%, #000 20%, transparent 75%);
  mask-image: radial-gradient(70% 60% at 60% 30%, #000 20%, transparent 75%);
}

.hero-rejilla {
  display: grid;
  gap: 48px;
}

.hero-mensaje { max-width: 640px; }

.hero-titulo {
  margin: 0;
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}
.hero-titulo-linea,
.hero-titulo-acento {
  display: block;
}
.hero-titulo-acento {
  color: var(--lavanda);
}

.hero-subtitulo {
  margin: 24px 0 0;
  max-width: 34rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  font-weight: 600;
  color: var(--texto-suave);
  text-wrap: pretty;
}

/* «Probar gratis»: el segundo nivel, un enlace de texto. Lavanda sobre el
   azul (8,2:1); la flecha se desplaza un poco al pasar por encima. */
.enlace-planes {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--lavanda);
  text-decoration: none;
  white-space: nowrap;
}
.enlace-planes::after {
  content: '→';
  transition: transform 0.25s var(--suave);
}
.enlace-planes:hover { color: var(--blanco); }
.enlace-planes:hover::after { transform: translateX(3px); }

/* ---------- El producto ---------- */

.hero-producto { position: relative; }

/* Halo detrás de la ventana: profundidad, no decoración. */
.hero-producto::before {
  content: '';
  position: absolute;
  inset: 8% 6% -4% 6%;
  z-index: -1;
  border-radius: 32px;
  background: radial-gradient(closest-side, rgba(91, 92, 226, 0.45), transparent);
  filter: blur(40px);
}

.ventana {
  margin: 0;
  border-radius: var(--radio-grande);
  border: 1px solid var(--linea-fuerte);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  padding: 6px;
  box-shadow: 0 30px 60px -30px rgba(2, 6, 23, 0.8);
}

.ventana-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
}
.ventana-barra i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.ventana-barra b {
  flex: 0 1 220px;
  height: 18px;
  margin: 0 auto;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

/* La pantalla: aquí va la captura real del panel.
   Cuando exista, dentro de .ventana-pantalla:
   <img src="/marca/panel.webp" alt="" width="1600" height="1000">
   y se retira .ventana-pendiente.                                          */
.ventana-pantalla {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: #111B34;
}
/* <picture> no ocupa caja: la imagen sigue llenando la pantalla. En móvil
   sirve un encuadre de la misma captura (la zona de trabajo, sin el menú). */
.ventana-pantalla picture { display: contents; }
.ventana-pantalla img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.ventana-pendiente {
  position: absolute;
  inset: 14px;
  display: grid;
  place-items: center;
  padding: 16px;
  border: 1px dashed rgba(167, 168, 255, 0.28);
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  color: var(--texto-tenue);
}

/* La composición del inicio por ancho vive en «Inicio con la agenda» (2026-10-01). */

/* =====================================================================
   FASE 2 — Problema · Transición · Plataforma · Video · Cierre
   Ritmo: hero oscuro → blanco → gris claro → blanco (+ escenario oscuro)
          → oscuro → gris claro.
   ===================================================================== */

:root {
  /* Neutros de lectura sobre claro. --texto-claro-suave sobre blanco 7,6:1;
     sobre #F7F8FC 7,2:1. --linea-clara, sólo para separar.                */
  --texto-claro-suave: #475569;
  --linea-clara: #E2E8F0;
  --radio-escenario: 28px;
}

.seccion {
  position: relative;
  padding: clamp(80px, 6vw + 40px, 136px) 0;
  background: var(--blanco);
  color: var(--azul);
}
.seccion-gris { background: var(--gris-claro); }

/* La primera sección clara sube sobre el hero con las esquinas redondeadas:
   la transición del fondo premium al claro, sin degradados turbios. */
.seccion-hoja {
  margin-top: -32px;
  border-radius: 32px 32px 0 0;
  z-index: 1;
}

/* ---------- Encabezado de sección ---------- */

.encabezado { max-width: 760px; }
.encabezado-centrado { margin: 0 auto; text-align: center; }

.ceja {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indigo);
}
/* La menta, otra vez sólo como detalle. */
.ceja::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--menta);
}
.ceja-clara { color: var(--lavanda); }

.titulo-seccion {
  margin: 0;
  font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.entrada {
  margin: 24px 0 0;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.65;
  font-weight: 500;
  color: var(--texto-claro-suave);
  text-wrap: pretty;
}
.encabezado-centrado .entrada { margin-left: auto; margin-right: auto; max-width: 640px; }

/* ---------- El problema: tres conceptos, sin cajas ---------- */

.conceptos {
  list-style: none;
  margin: clamp(56px, 5vw, 88px) 0 0;
  padding: 0;
  display: grid;
  gap: 40px;
  counter-reset: concepto;
}
.concepto {
  counter-increment: concepto;
  padding-top: 24px;
  border-top: 1px solid var(--linea-clara);
}
.concepto::before {
  content: counter(concepto, decimal-leading-zero);
  display: block;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
}
.concepto h3,
.area h3 {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.concepto p,
.area p {
  margin: 10px 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texto-claro-suave);
}

@media (min-width: 768px) {
  .conceptos { grid-template-columns: repeat(3, 1fr); gap: 48px; }
}

/* ---------- Transición: una frase grande con aire ---------- */

.transicion { padding: clamp(96px, 9vw + 40px, 176px) 0; text-align: center; }

.transicion-frase {
  margin: 0;
  font-size: clamp(2.25rem, 1.3rem + 4vw, 4.5rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.transicion-frase span { display: block; }
.transicion-acento { color: var(--indigo); }

.transicion-texto {
  margin: 32px auto 0;
  max-width: 620px;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  font-weight: 600;
  color: var(--texto-claro-suave);
  text-wrap: pretty;
}

/* ---------- Plataforma: seis áreas en rejilla abierta ---------- */

.areas {
  list-style: none;
  margin: clamp(56px, 5vw, 80px) 0 0;
  padding: 0;
  display: grid;
  gap: 8px 48px;
}
.area {
  padding: 24px 0;
  border-top: 1px solid var(--linea-clara);
}
.area h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.area h3::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--indigo);
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .areas { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .areas { grid-template-columns: repeat(3, 1fr); gap: 16px 56px; }
}

/* ---------- El escenario del producto ----------
   Un panel oscuro amplio con la captura principal y dos acercamientos.
   Todo son huecos para capturas REALES: no se dibuja ninguna interfaz.   */

.escenario {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(56px, 5vw, 88px);
  padding: clamp(24px, 4vw, 64px) clamp(16px, 4vw, 64px) 0;
  border-radius: var(--radio-escenario);
  background: linear-gradient(170deg, var(--azul-luz) 0%, var(--azul-medio) 50%, var(--azul) 100%);
}
.escenario-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 60% at 50% 100%, rgba(91, 92, 226, 0.35), transparent 70%),
    radial-gradient(40% 40% at 85% 0%, rgba(167, 168, 255, 0.14), transparent 70%);
}
.escenario-principal {
  max-width: 1040px;
  margin: 0 auto;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}
.escenario-principal .ventana-pantalla { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.escenario-detalle {
  padding: 5px;
  box-shadow: 0 24px 48px -20px rgba(2, 6, 23, 0.9);
  backdrop-filter: blur(8px);
}
.escenario-detalle .ventana-pantalla { aspect-ratio: 4 / 3; }

/* Móvil y tablet: los acercamientos van debajo, lado a lado. */
@media (max-width: 1023px) {
  .escenario { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 24px; }
  .escenario-principal { grid-column: 1 / -1; width: 100%; margin: 0; border-radius: var(--radio-grande); border-bottom: 1px solid var(--linea-fuerte); }
  .escenario-detalle { margin: 0; min-width: 0; }
  .escenario-principal .ventana-pantalla { border-radius: 10px; }
}
/* Escritorio: flotan sobre las esquinas de la captura principal. */
@media (min-width: 1024px) {
  .escenario-detalle { position: absolute; width: 26%; max-width: 300px; }
  .escenario-detalle-a { left: 3%; bottom: 10%; }
  .escenario-detalle-b { right: 3%; top: 18%; }
}

.ventana-pendiente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ventana-pendiente small {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lavanda);
}

/* ---------- Video ---------- */

.seccion-oscura {
  isolation: isolate;
  overflow: hidden;
  background: var(--azul);
  color: var(--blanco);
}
.seccion-oscura-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 45% at 50% 70%, rgba(91, 92, 226, 0.30), transparent 70%),
    linear-gradient(180deg, var(--azul-medio), var(--azul));
}
.seccion-oscura .entrada { color: var(--texto-suave); }

.reproductor {
  position: relative;
  max-width: 1040px;
  margin: clamp(48px, 5vw, 72px) auto 0;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border-radius: 24px;
  border: 1px solid var(--linea-fuerte);
  background:
    radial-gradient(60% 70% at 50% 50%, rgba(91, 92, 226, 0.22), transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: 0 40px 80px -40px rgba(2, 6, 23, 0.9);
  overflow: hidden;
}
.reproductor video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--azul);
}
.reproductor-boton {
  display: grid;
  place-items: center;
  width: clamp(64px, 8vw, 88px);
  height: clamp(64px, 8vw, 88px);
  border: 0;
  border-radius: 50%;
  background: var(--indigo);
  color: var(--blanco);
  box-shadow: 0 0 0 10px rgba(91, 92, 226, 0.18), 0 20px 40px -12px rgba(91, 92, 226, 0.9);
  cursor: pointer;
  transition: transform 0.3s var(--suave), box-shadow 0.3s ease, background-color 0.2s ease;
}
.reproductor-boton svg { width: 42%; height: 42%; margin-left: 6%; fill: currentColor; }
.reproductor-boton:hover {
  background: var(--indigo-hover);
  transform: scale(1.04);
  box-shadow: 0 0 0 14px rgba(91, 92, 226, 0.2), 0 24px 48px -12px rgba(91, 92, 226, 0.95);
}
.reproductor-boton[aria-disabled="true"] { cursor: default; }
.reproductor-nota {
  position: absolute;
  left: 0; right: 0; bottom: clamp(16px, 3vw, 28px);
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-tenue);
}

/* Desde que Planes va antes (2026-09-27), el video va sobre gris claro para
   no juntar dos secciones oscuras; el reproductor sigue oscuro, que es donde
   se verá el producto. Video y su llamada a la acción forman un solo bloque. */
.seccion-video .reproductor {
  background:
    radial-gradient(60% 70% at 50% 50%, rgba(91, 92, 226, 0.35), transparent 70%),
    linear-gradient(160deg, var(--azul-luz), var(--azul));
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow: 0 40px 80px -40px rgba(15, 23, 42, 0.55);
}
.seccion-video + .cierre { padding-top: 0; }

/* ---------- Cierre: la llamada a la acción ---------- */

.cierre { text-align: center; }
.cierre .titulo-seccion { max-width: 760px; margin: 0 auto; }
.cierre-acciones {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.cierre-garantia {
  margin: 20px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--texto-claro-suave);
}

/* Botón secundario sobre fondo claro. */
.boton-claro {
  background: var(--blanco);
  color: var(--azul);
  border-color: #CBD5E1;
}
.boton-claro:hover { border-color: var(--azul); }

@media (max-width: 767px) {
  .cierre-acciones { flex-direction: column; }
  .cierre-acciones .boton { width: 100%; white-space: normal; text-align: center; }
  .seccion-hoja { margin-top: -24px; border-radius: 24px 24px 0 0; }
  .escenario { border-radius: 20px; }
}

/* =====================================================================
   FASE 3 — Funcionalidades
   Un recorrido, no una cuadrícula: filas amplias que alternan texto y
   captura, dos bandas destacadas (Ficha 360 y Automatizaciones), la
   escalera de Finanzas y grupos compactos para lo demás.
   ===================================================================== */

.funcionalidades { padding-bottom: clamp(64px, 5vw, 96px); }

/* ---------- Etiqueta de módulo: «01  Del prospecto al cliente» ---------- */

.modulo-etiqueta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--indigo);
}
.modulo-num {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(91, 92, 226, 0.1);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.modulo-titulo {
  margin: 0;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.modulo-titulo-chico {
  font-size: clamp(1.3125rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.modulo-texto {
  margin: 18px 0 0;
  max-width: 540px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--texto-claro-suave);
  text-wrap: pretty;
}
.modulo-nota {
  margin: 24px 0 0;
  max-width: 520px;
  padding-left: 14px;
  border-left: 2px solid var(--linea-clara);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--texto-claro-suave);
}

/* ---------- Listas: un trazo índigo, sin iconos ---------- */

.lista-func {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.lista-func li {
  position: relative;
  padding-left: 26px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}
.lista-func li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--indigo);
}
.lista-chica { gap: 10px; margin-top: 20px; }
.lista-chica li { font-size: 0.9375rem; font-weight: 500; color: var(--texto-claro-suave); }

.etiqueta-plan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(91, 92, 226, 0.28);
  background: rgba(91, 92, 226, 0.06);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--indigo);
  white-space: nowrap;
}

/* ---------- Fila amplia: texto y captura ---------- */

.modulo {
  display: grid;
  gap: 40px;
  align-items: center;
  padding: clamp(64px, 6vw, 112px) 0 0;
}
@media (min-width: 1024px) {
  .modulo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 5vw, 88px); }
  .modulo-invertido { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .modulo-invertido > .modulo-cuerpo { order: 2; }
}

/* El lienzo: una superficie lavanda muy tenue donde flota la captura. */
.lienzo {
  position: relative;
  isolation: isolate;
  padding: clamp(20px, 3.5vw, 48px);
  border-radius: 28px;
  background: linear-gradient(145deg, #EEF0FF 0%, var(--gris-claro) 55%, #F1F2FF 100%);
  border: 1px solid #E6E8F5;
  overflow: hidden;
}
.lienzo-luz {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 60% at 90% 10%, rgba(167, 168, 255, 0.45), transparent 70%),
    radial-gradient(50% 50% at 0% 100%, rgba(91, 92, 226, 0.14), transparent 70%);
}
.lienzo-ventana {
  background: linear-gradient(180deg, #1E2656, var(--azul));
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 30px 60px -28px rgba(15, 23, 42, 0.45), 0 12px 24px -16px rgba(91, 92, 226, 0.35);
  transition: transform 0.6s var(--suave), box-shadow 0.6s var(--suave);
}
.lienzo:hover .lienzo-ventana {
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 40px 70px -28px rgba(15, 23, 42, 0.5), 0 16px 28px -16px rgba(91, 92, 226, 0.4);
}

/* ---------- Bandas destacadas ---------- */

.banda {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(72px, 7vw, 128px);
  padding: clamp(32px, 5vw, 80px);
  border-radius: 32px;
}
.banda-cabeza { max-width: 640px; }
.banda-cabeza-centrada { margin: 0 auto; text-align: center; }
.banda-cabeza-centrada .modulo-etiqueta { justify-content: center; }
.banda-cabeza-centrada .modulo-texto { margin-left: auto; margin-right: auto; }

.banda-oscura {
  background: linear-gradient(160deg, var(--azul-luz) 0%, var(--azul-medio) 45%, var(--azul) 100%);
  color: var(--blanco);
}
.banda-oscura .modulo-etiqueta { color: var(--lavanda); }
.banda-oscura .modulo-num { background: rgba(167, 168, 255, 0.14); }
.banda-oscura .modulo-texto { color: var(--texto-suave); }
.banda-luz {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 50% at 100% 0%, rgba(167, 168, 255, 0.18), transparent 70%),
    radial-gradient(60% 55% at 50% 100%, rgba(91, 92, 226, 0.38), transparent 70%);
}

/* Lo que centraliza la Ficha 360: ocho piezas, sin cajas. */
.ficha-rejilla {
  list-style: none;
  margin: clamp(36px, 4vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 32px;
  counter-reset: none;
}
.ficha-rejilla li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--linea);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
}
.ficha-num {
  font-size: 12px;
  font-weight: 700;
  color: var(--lavanda);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
@media (min-width: 640px) { .ficha-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .ficha-rejilla { grid-template-columns: repeat(4, 1fr); } }

.banda-ventana {
  margin-top: clamp(32px, 4vw, 56px);
  box-shadow: 0 40px 80px -40px rgba(2, 6, 23, 0.95), 0 0 0 1px rgba(167, 168, 255, 0.08);
}
.banda-ventana .ventana-pantalla { aspect-ratio: 16 / 8; }
@media (max-width: 767px) { .banda-ventana .ventana-pantalla { aspect-ratio: 4 / 3; } }

/* Automatizaciones: banda clara con el flujo de cuatro. */
.banda-clara {
  background: linear-gradient(180deg, var(--gris-claro), #EEF0FF);
  border: 1px solid #E6E8F5;
}

.flujo {
  position: relative;
  list-style: none;
  margin: clamp(40px, 4vw, 64px) 0 0;
  padding: 0;
  display: grid;
  gap: 32px;
}
/* La línea que une los pasos: vertical en móvil, horizontal en escritorio. */
.flujo::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--indigo), var(--lavanda));
  border-radius: 2px;
  opacity: 0.5;
}
.flujo-paso { position: relative; padding-left: 40px; }
.flujo-nodo {
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blanco);
  border: 4px solid var(--indigo);
  box-shadow: 0 0 0 5px rgba(91, 92, 226, 0.12);
}
.flujo-paso h4 {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 700;
}
.flujo-plan { margin-top: 10px !important; }
.flujo-paso p {
  margin: 8px 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--texto-claro-suave);
}
@media (min-width: 1024px) {
  .flujo { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .flujo::before { left: 8px; right: 8px; top: 7px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--indigo), var(--lavanda)); }
  .flujo-paso { padding: 40px 0 0; }
}

/* ---------- Trío y par: grupos compactos, separados por filetes ---------- */

.trio,
.par {
  display: grid;
  gap: 40px;
  margin-top: clamp(72px, 7vw, 128px);
}
.trio-item,
.par-item {
  padding-top: 28px;
  border-top: 1px solid var(--linea-clara);
}
.trio-clave {
  margin: 16px 0 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.55;
}
.par-item .modulo-texto { font-size: 1rem; }
@media (min-width: 768px) {
  .par { grid-template-columns: repeat(2, 1fr); gap: 56px; }
}
@media (min-width: 1024px) {
  .trio { grid-template-columns: repeat(3, 1fr); gap: 48px; }
}

/* ---------- Casos: el hilo de trazabilidad ---------- */

.hilo {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  position: relative;
}
.hilo::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--indigo), rgba(167, 168, 255, 0.4));
  border-radius: 2px;
}
.hilo li {
  position: relative;
  padding: 7px 0 7px 32px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}
.hilo li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--blanco);
  border: 3px solid var(--indigo);
}
/* El último hito, en menta: la gestión completa y trazada. */
.hilo li:last-child::before { border-color: var(--menta); background: var(--menta); }

/* ---------- Finanzas: la escalera por plan ---------- */

.escalera {
  display: grid;
  gap: 12px;
}
.peldano {
  display: flex;
  flex-direction: column;
  padding: 24px 22px 26px;
  border-radius: 20px;
  border: 1px solid var(--linea-clara);
  background: var(--blanco);
  transition: transform 0.4s var(--suave), box-shadow 0.4s var(--suave);
}
.peldano:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(15, 23, 42, 0.25); }
.peldano-plan {
  margin: 0 0 14px;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.peldano ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.peldano li {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}
.peldano li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.55;
}
.peldano .peldano-hereda { font-weight: 500; font-size: 0.875rem; }

/* Cada peldaño sube de intensidad: lavanda → índigo → azul profundo. */
.peldano-1 { background: #F4F5FF; }
.peldano-1 .peldano-plan { color: var(--indigo); }
.peldano-2 { background: var(--indigo); border-color: var(--indigo); color: var(--blanco); }
.peldano-3 {
  background: linear-gradient(160deg, var(--azul-luz), var(--azul));
  border-color: var(--azul);
  color: var(--blanco);
  box-shadow: 0 30px 60px -30px rgba(15, 23, 42, 0.6);
}
.peldano-3 .peldano-plan { color: var(--lavanda); }

@media (min-width: 768px) {
  .escalera { grid-template-columns: repeat(3, 1fr); align-items: end; }
  /* Los peldaños suben: cada plan, un escalón más alto. */
  .peldano-1 { min-height: 250px; }
  .peldano-2 { min-height: 300px; }
  .peldano-3 { min-height: 350px; }
}

/* =====================================================================
   FASE 4 — Planes y precios
   Fondo oscuro premium, tres tarjetas blancas lado a lado; Estándar
   sobresale con borde índigo, elevación y «Más popular».
   ===================================================================== */

.solo-lector {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.planes-fondo {
  background:
    radial-gradient(55% 45% at 50% 38%, rgba(91, 92, 226, 0.34), transparent 70%),
    radial-gradient(40% 40% at 90% 0%, rgba(167, 168, 255, 0.14), transparent 70%),
    linear-gradient(180deg, var(--azul-luz) 0%, var(--azul-medio) 40%, var(--azul) 100%);
}

/* ---------- Selector Mensual | Anual -20% ---------- */

.ciclo {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 40px auto 0;
  padding: 5px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}
.ciclo-opcion {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--texto-suave);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.ciclo-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.ciclo-opcion:hover { color: var(--blanco); }
.ciclo-opcion:has(input:checked) { background: var(--blanco); color: var(--azul); }
.ciclo-opcion:has(input:focus-visible) { outline: 2px solid var(--lavanda); outline-offset: 3px; }
.ciclo-ahorro {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--menta);
  color: var(--azul);
  font-size: 12px;
  font-weight: 800;
}

/* ---------- Las tres tarjetas ---------- */

.planes-rejilla {
  display: grid;
  gap: 20px;
  margin-top: clamp(40px, 4vw, 56px);
  align-items: stretch;
}
@media (min-width: 1024px) {
  .planes-rejilla { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet: las tres una debajo de otra, a ancho cómodo de lectura. */
  .planes-rejilla { max-width: 560px; margin-left: auto; margin-right: auto; }
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 34px;
  border-radius: 24px;
  background: var(--blanco);
  color: var(--azul);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 30px 60px -36px rgba(2, 6, 23, 0.8);
  transition: transform 0.4s var(--suave), box-shadow 0.4s var(--suave);
}
.plan:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -36px rgba(2, 6, 23, 0.9); }

/* Estándar: el protagonista, sin exagerar. */
.plan-destacado {
  border: 2px solid var(--indigo);
  box-shadow: 0 0 0 6px rgba(91, 92, 226, 0.18), 0 40px 80px -30px rgba(91, 92, 226, 0.65);
}
@media (min-width: 1024px) {
  .plan-destacado { transform: translateY(-12px); }
  .plan-destacado:hover { transform: translateY(-16px); }
}
.plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--indigo);
  color: var(--blanco);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(91, 92, 226, 0.9);
}

.plan-nombre {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--indigo);
}
.plan-desc {
  margin: 10px 0 0;
  min-height: 3em;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--texto-claro-suave);
}

.plan-precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
}
.plan-monto {
  font-size: clamp(2.75rem, 2.2rem + 1.4vw, 3.5rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.plan-periodo { font-size: 0.9375rem; font-weight: 600; color: var(--texto-claro-suave); }
.plan-factura {
  margin: 8px 0 0;
  min-height: 1.5em;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto-claro-suave);
  font-variant-numeric: tabular-nums;
}
#planes[data-ciclo="anual"] .plan-factura { color: var(--indigo); }

.plan-cta { width: 100%; margin-top: 24px; }

/* Botón de contorno sobre blanco. */
.boton-contorno {
  background: var(--blanco);
  color: var(--azul);
  border-color: var(--azul);
}
.boton-contorno:hover { background: var(--azul); color: var(--blanco); }

.plan-usuarios {
  margin-top: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--linea-clara);
  border-bottom: 1px solid var(--linea-clara);
}
.plan-usuarios p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--texto-claro-suave); }
.plan-usuarios .plan-incluido { margin-bottom: 4px; font-size: 0.9375rem; font-weight: 700; color: var(--azul); }

.plan-hereda {
  margin: 22px 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--azul);
}

/* Beneficios con un check discreto. */
.plan-funciones {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.plan-funciones li {
  position: relative;
  padding-left: 26px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
}
.plan-funciones li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.3em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--indigo);
  border-bottom: 2px solid var(--indigo);
  transform: rotate(-45deg);
}

/* ---------- Prueba gratuita y demo ---------- */

.planes-salidas {
  display: grid;
  gap: 16px;
  margin-top: clamp(48px, 5vw, 72px);
}
@media (min-width: 900px) {
  .planes-salidas { grid-template-columns: 1.3fr 1fr; }
}
.planes-prueba,
.planes-demo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 24px;
  border: 1px solid var(--linea-fuerte);
  background: rgba(255, 255, 255, 0.04);
}
.planes-prueba {
  border-color: rgba(167, 168, 255, 0.35);
  background: linear-gradient(135deg, rgba(91, 92, 226, 0.22), rgba(91, 92, 226, 0.06));
}
.planes-prueba-titulo {
  margin: 0;
  line-height: 1.25;
  text-wrap: balance;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--blanco);
}
.planes-prueba-texto { margin: 0 0 12px; font-size: 1rem; font-weight: 500; color: var(--texto-suave); }

@media (max-width: 767px) {
  .plan { padding: 28px 22px 30px; }
  .plan-desc { min-height: 0; }
  .planes-prueba .boton, .planes-demo .boton { width: 100%; }
  .ciclo-opcion { padding: 0 16px; }
}

/* =====================================================================
   Planes justo después del hero (negocio, 2026-09-27): sección clara que
   sube sobre el hero como una hoja. Lo de abajo adapta a fondo claro lo que
   la Fase 4 dibujó para fondo oscuro.
   ===================================================================== */
.planes.seccion-hoja { padding-top: clamp(56px, 5vw, 88px); }

.planes .ciclo { border-color: #CBD5E1; background: var(--blanco); }
.planes .ciclo-opcion { color: var(--texto-claro-suave); }
.planes .ciclo-opcion:hover { color: var(--azul); }
.planes .ciclo-opcion:has(input:checked) { background: var(--azul); color: var(--blanco); }
.planes .ciclo-opcion:has(input:focus-visible) { outline-color: var(--indigo); }

.planes .plan {
  border: 1px solid var(--linea-clara);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 24px 48px -32px rgba(15, 23, 42, 0.28);
}
.planes .plan:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 32px 60px -30px rgba(15, 23, 42, 0.34); }
.planes .plan-destacado {
  border: 2px solid var(--indigo);
  box-shadow: 0 0 0 6px rgba(91, 92, 226, 0.12), 0 36px 70px -30px rgba(91, 92, 226, 0.5);
}

/* La prueba: el bloque índigo que llama; la demo: tarjeta blanca tranquila. */
.planes .planes-prueba {
  border: 0;
  background: linear-gradient(135deg, var(--indigo), #4344C7);
  box-shadow: 0 30px 60px -32px rgba(91, 92, 226, 0.8);
}
.planes .planes-prueba .planes-prueba-titulo { color: var(--blanco); }
.planes .planes-prueba .planes-prueba-texto { color: var(--blanco); }
.planes .planes-prueba .boton-primario {
  background: var(--blanco);
  color: var(--azul);
  box-shadow: none;
}
.planes .planes-prueba .boton-primario:hover { background: var(--gris-claro); }
.planes .planes-demo { border-color: var(--linea-clara); background: var(--blanco); }
.planes .planes-demo .planes-prueba-titulo { color: var(--azul); }
.planes .planes-demo .planes-prueba-texto { color: var(--texto-claro-suave); }

/* Producto y Funcionalidades van seguidos en blanco: un filete los separa. */
#producto + .funcionalidades { border-top: 1px solid var(--linea-clara); }

/* =====================================================================
   REDISEÑO A (negocio, 2026-09-27) + la calculadora de la propuesta C.
   Confianza · calculadora · comparativa · pestañas · bento · FAQ · pie
   ===================================================================== */

/* ---------- Calculadora por equipo ---------- */
.calculadora {
  display: grid;
  gap: 28px;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 4vw, 44px);
  border-radius: 28px;
  background: var(--blanco);
  border: 1px solid var(--linea-clara);
  box-shadow: 0 24px 48px -36px rgba(15, 23, 42, 0.3);
}
.calc-titulo {
  margin: 0;
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.calc-texto { margin: 8px 0 0; font-size: 1rem; font-weight: 500; color: var(--texto-claro-suave); }
.calc-control { display: flex; align-items: center; gap: 20px; }
.calc-control input[type="range"] {
  --avance: 20%;
  flex: 1;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.calc-control input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--indigo) var(--avance), #E2E8F0 var(--avance));
}
.calc-control input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: #E2E8F0; }
.calc-control input[type="range"]::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--indigo); }
.calc-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px; height: 28px; margin-top: -10px;
  border-radius: 50%;
  background: var(--blanco);
  border: 3px solid var(--indigo);
  box-shadow: 0 4px 12px -4px rgba(91, 92, 226, 0.8);
}
.calc-control input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blanco);
  border: 3px solid var(--indigo);
}
.calc-control input[type="range"]:focus-visible { outline: 2px solid var(--indigo); outline-offset: 6px; border-radius: 8px; }
.calc-personas {
  min-width: 118px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--gris-claro);
  font-size: 1.0625rem;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.calc-resultados { display: grid; gap: 12px; }
@media (min-width: 768px) { .calc-resultados { grid-template-columns: repeat(3, 1fr); } }
.calc-plan {
  padding: 20px 22px;
  border-radius: 18px;
  border: 1px solid var(--linea-clara);
  background: var(--gris-claro);
  transition: opacity 0.3s ease;
}
.calc-plan-destacado { border: 2px solid var(--indigo); background: #F4F5FF; }
.calc-nombre { margin: 0; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--indigo); }
.calc-total { margin: 8px 0 0; font-size: 0.875rem; font-weight: 600; color: var(--texto-claro-suave); }
.calc-total [data-calc-total] {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}
.calc-detalle { margin: 6px 0 0; min-height: 1.5em; font-size: 0.875rem; font-weight: 500; color: var(--texto-claro-suave); }
.calc-no-cabe { border-style: dashed; background: var(--blanco); }
.calc-no-cabe .calc-total [data-calc-total] { color: var(--texto-claro-suave); }
.calc-nota { margin: 0; font-size: 0.8125rem; color: var(--texto-claro-suave); }

/* ---------- Tabla comparativa ---------- */
.comparativa { margin-top: clamp(48px, 5vw, 72px); }
.comp-marco {
  margin-top: 20px;
  border-radius: 20px;
  border: 1px solid var(--linea-clara);
  background: var(--blanco);
  overflow-x: auto;
}
.comp-tabla { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.9375rem; }
.comp-tabla th, .comp-tabla td { padding: 12px 16px; border-bottom: 1px solid var(--linea-clara); }
.comp-tabla thead th {
  position: sticky; top: 0;
  background: var(--blanco);
  font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--indigo);
  text-align: center;
}
.comp-tabla thead th:first-child { text-align: left; color: var(--texto-claro-suave); }
.comp-tabla .comp-destacada { background: #F4F5FF; }
.comp-tabla tbody th { text-align: left; font-weight: 500; }
.comp-tabla td { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; width: 16%; }
.comp-tabla td:nth-child(3) { background: rgba(91, 92, 226, 0.04); }
.comp-grupo th {
  background: var(--gris-claro);
  font-size: 0.8125rem !important; font-weight: 800 !important; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--azul);
}
.comp-tabla tbody tr:last-child th, .comp-tabla tbody tr:last-child td { border-bottom: 0; }
.si {
  display: inline-block;
  width: 12px; height: 7px;
  border-left: 2px solid var(--indigo);
  border-bottom: 2px solid var(--indigo);
  transform: rotate(-45deg) translateY(-2px);
}
.no { color: #CBD5E1; }
.comparativa, .comp-marco { min-width: 0; max-width: 100%; }
/* Móvil: la tabla cabe entera, sin desplazamiento lateral. */
@media (max-width: 640px) {
  .comp-tabla { min-width: 0; table-layout: fixed; font-size: 0.8125rem; }
  .comp-tabla th, .comp-tabla td { padding: 10px 6px; }
  .comp-tabla thead th { font-size: 10px; letter-spacing: 0.02em; }
  .comp-tabla thead th:first-child, .comp-tabla tbody th { width: 44%; padding-left: 12px; }
  .comp-tabla td { width: auto; }
  .comp-grupo th { font-size: 0.6875rem !important; }
}

/* ---------- Producto en pestañas ---------- */
.pestanas { margin-top: clamp(40px, 5vw, 64px); }
.pestanas-lista {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--gris-claro);
  border: 1px solid var(--linea-clara);
  overflow-x: auto;
  scrollbar-width: none;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}
.pestanas-lista::-webkit-scrollbar { display: none; }
.pestanas-lista [role="tab"] {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--texto-claro-suave);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.pestanas-lista [role="tab"]:hover { color: var(--azul); }
.pestanas-lista [role="tab"][aria-selected="true"] { background: var(--azul); color: var(--blanco); }
.pestanas-lista [role="tab"]:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.pestana-panel {
  display: grid;
  gap: 32px;
  align-items: center;
  margin-top: clamp(28px, 3vw, 44px);
  padding: clamp(24px, 4vw, 56px);
  border-radius: 28px;
  background: linear-gradient(160deg, var(--azul-luz) 0%, var(--azul-medio) 50%, var(--azul) 100%);
  color: var(--blanco);
  animation: panel-entra 0.45s var(--suave);
}
.pestana-panel[hidden] { display: none; }
.pestana-panel:focus-visible { outline: 2px solid var(--indigo); outline-offset: 4px; }
.pestana-texto h3 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 800; letter-spacing: -0.02em; }
.pestana-texto p { margin: 14px 0 0; font-size: 1.0625rem; line-height: 1.6; color: var(--texto-suave); }
@media (min-width: 1024px) { .pestana-panel { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; } }
@keyframes panel-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Funcionalidades en rejilla (bento) ---------- */
.bento {
  display: grid;
  gap: 16px;
  margin-top: clamp(40px, 5vw, 64px);
}
.bento-celda {
  padding: clamp(22px, 2.5vw, 32px);
  border-radius: 24px;
  border: 1px solid var(--linea-clara);
  background: var(--gris-claro);
  transition: transform 0.4s var(--suave), box-shadow 0.4s var(--suave);
}
.bento-celda:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -32px rgba(15, 23, 42, 0.3); }
.bento-celda .modulo-etiqueta { margin-bottom: 12px; font-size: 12px; }
.bento-titulo { margin: 0; font-size: 1.25rem; line-height: 1.25; font-weight: 800; letter-spacing: -0.015em; }
.bento-texto { margin: 10px 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--texto-claro-suave); }
.bento-nota { margin: 14px 0 0; font-size: 0.8125rem; line-height: 1.55; color: var(--texto-claro-suave); }
.bento-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.bento-lista li { position: relative; padding-left: 20px; font-size: 0.9375rem; line-height: 1.45; }
.bento-lista li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 10px; height: 2px; border-radius: 2px; background: var(--indigo); }
.bento-lista .etiqueta-plan { margin-left: 4px; }

/* La Ficha 360: la pieza grande y oscura. */
.bento-oscura {
  background: linear-gradient(160deg, var(--azul-luz) 0%, var(--azul-medio) 50%, var(--azul) 100%);
  border-color: transparent;
  color: var(--blanco);
}
.bento-oscura .modulo-etiqueta { color: var(--lavanda); }
.bento-oscura .modulo-num { background: rgba(167, 168, 255, 0.14); }
.bento-oscura .bento-texto { color: var(--texto-suave); }
.bento-titulo + .bento-texto { max-width: 520px; }
.bento-oscura .bento-titulo { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.bento-ficha { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.bento-ficha li { padding: 11px 0; border-top: 1px solid var(--linea); font-size: 0.9375rem; font-weight: 600; }
.bento-enlace {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; min-height: 44px;
  font-size: 0.9375rem; font-weight: 700; color: var(--indigo); text-decoration: none;
}
.bento-enlace::after { content: '→'; transition: transform 0.25s var(--suave); }
.bento-enlace:hover::after { transform: translateX(3px); }
.bento-intake { background: linear-gradient(160deg, #F1F2FF, var(--gris-claro)); }
.hilo-chico { margin-top: 18px; }
.hilo-chico li { padding: 5px 0 5px 30px; font-size: 0.9375rem; }
.hilo-chico li::before { top: 10px; }

@media (min-width: 768px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-ficha360 { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento-ficha360 { grid-column: span 4; grid-row: span 2; }
  .bento-intake { grid-column: span 2; grid-row: span 2; }
  .bento-casos, .bento-auto, .bento-fin { grid-column: span 2; }
  .bento-chica { grid-column: span 2; }
  .bento-ficha { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Preguntas frecuentes ---------- */
.faq { background: var(--gris-claro); }
.faq-rejilla { display: grid; gap: 40px; }
@media (min-width: 1024px) { .faq-rejilla { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; } }
.faq-lista { display: grid; gap: 10px; }
.faq-item {
  border-radius: 16px;
  border: 1px solid var(--linea-clara);
  background: var(--blanco);
  transition: box-shadow 0.3s ease;
}
.faq-item[open] { box-shadow: 0 16px 32px -24px rgba(15, 23, 42, 0.3); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 16px 22px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gris-claro);
  font-size: 18px; font-weight: 600;
  color: var(--indigo);
  transition: transform 0.3s var(--suave);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 16px; }
.faq-item p { margin: 0; padding: 0 22px 20px; font-size: 0.9375rem; line-height: 1.65; color: var(--texto-claro-suave); }
.faq + .cierre { background: var(--blanco); }

/* ---------- Pie ---------- */
.pie {
  background: var(--azul);
  color: var(--texto-suave);
  padding: clamp(56px, 6vw, 88px) 0 32px;
}
.pie-rejilla { display: grid; gap: 40px; }
@media (min-width: 768px) { .pie-rejilla { grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr; } }
.pie-marca img { height: 48px; width: auto; }
.pie-marca p { margin: 14px 0 0; max-width: 320px; font-size: 0.9375rem; line-height: 1.6; }
.pie-col { display: flex; flex-direction: column; gap: 10px; }
.pie-titulo { margin: 0 0 4px; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blanco); }
.pie-col a { font-size: 0.9375rem; font-weight: 500; color: var(--texto-suave); text-decoration: none; transition: color 0.2s ease; }
.pie-col a:hover { color: var(--blanco); }
.pie-col a[href^="mailto:"] { overflow-wrap: anywhere; }
.pie-dato { margin: 0; font-size: 0.9375rem; font-weight: 500; }
.pie-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--linea);
  font-size: 0.8125rem; color: var(--texto-tenue);
}
.pie-base p { margin: 0; }
.pie :focus-visible { outline-color: var(--lavanda); }

/* =====================================================================
   NOSOTROS (2026-09-27): storytelling sobre fondo oscuro. Historia a dos
   columnas, la evolución como una línea que se ordena, el propósito y el
   manifiesto. Sin fotos: sólo recursos abstractos muy discretos.
   ===================================================================== */
.nosotros { padding: clamp(96px, 8vw + 40px, 168px) 0; }
.nosotros-fondo {
  background:
    radial-gradient(45% 40% at 90% 8%, rgba(167, 168, 255, 0.16), transparent 70%),
    radial-gradient(50% 45% at 5% 60%, rgba(91, 92, 226, 0.22), transparent 70%),
    linear-gradient(180deg, var(--azul) 0%, var(--azul-medio) 55%, var(--azul) 100%);
}
/* Retícula de puntos, apenas visible: el «sistema» de fondo. */
.nosotros-fondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
}

/* ---------- La historia ---------- */
.nos-historia { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .nos-historia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
  .nos-cabeza { position: sticky; top: calc(var(--alto-header) + 40px); }
}
.nos-cabeza .titulo-seccion { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.1; }
.nos-relato p {
  margin: 0 0 22px;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.75;
  color: var(--texto-suave);
}
.nos-relato .nos-inicio {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.5;
  font-weight: 600;
  color: var(--blanco);
}
.nos-cita {
  position: relative;
  margin: 40px 0;
  padding: 4px 0 4px 28px;
}
.nos-cita::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--lavanda), var(--indigo));
}
.nos-relato .nos-cita p {
  margin: 0;
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--blanco);
}

/* ---------- El impacto: la evolución ---------- */
.nos-impacto { margin-top: clamp(96px, 9vw, 160px); text-align: center; }
.nos-impacto-titulo {
  margin: 0 auto;
  max-width: 900px;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.evolucion {
  position: relative;
  list-style: none;
  margin: clamp(48px, 5vw, 80px) 0 0;
  padding: 0;
  display: grid;
  gap: 28px;
  text-align: left;
}
/* La línea: punteada al principio (lo disperso), sólida después (el sistema). */
.evolucion::before {
  content: '';
  position: absolute;
  left: 13px; top: 14px; bottom: 14px;
  width: 2px;
  background:
    repeating-linear-gradient(180deg, rgba(167, 168, 255, 0.5) 0 4px, transparent 4px 10px) top / 100% 22% no-repeat,
    linear-gradient(180deg, rgba(167, 168, 255, 0.5), var(--indigo) 60%, var(--menta)) bottom / 100% 78% no-repeat;
}
.evolucion-paso { position: relative; display: flex; align-items: center; gap: 18px; min-height: 28px; }
.evolucion-nodo { position: relative; flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; }
.evolucion-nombre { font-size: 1.0625rem; font-weight: 700; color: var(--texto-suave); }
.evolucion-paso-5 .evolucion-nombre { color: var(--blanco); }
/* Cada nodo, un poco más ordenado que el anterior. */
.evolucion-paso-1 .evolucion-nodo::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--lavanda);
  box-shadow: -9px -7px 0 rgba(167, 168, 255, 0.6), 8px -9px 0 rgba(167, 168, 255, 0.45), 10px 6px 0 rgba(167, 168, 255, 0.6), -7px 9px 0 rgba(167, 168, 255, 0.45), 1px 11px 0 rgba(167, 168, 255, 0.3);
}
.evolucion-paso-2 .evolucion-nodo::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px dashed var(--lavanda); background: var(--azul); }
.evolucion-paso-3 .evolucion-nodo::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--lavanda); background: var(--azul); box-shadow: inset 0 0 0 4px var(--azul), inset 0 0 0 9px var(--indigo); }
.evolucion-paso-4 .evolucion-nodo::before { content: ''; width: 20px; height: 20px; border-radius: 50%; background: var(--indigo); box-shadow: 0 0 0 5px rgba(91, 92, 226, 0.25); }
.evolucion-paso-5 .evolucion-nodo::before { content: ''; width: 24px; height: 24px; border-radius: 50%; background: var(--menta); box-shadow: 0 0 0 6px rgba(53, 208, 162, 0.18), 0 0 28px rgba(53, 208, 162, 0.55); }
@media (min-width: 900px) {
  .evolucion { grid-template-columns: repeat(5, 1fr); gap: 16px; text-align: center; }
  .evolucion::before {
    left: 10%; right: 10%; top: 13px; bottom: auto; width: auto; height: 2px;
    background:
      repeating-linear-gradient(90deg, rgba(167, 168, 255, 0.5) 0 4px, transparent 4px 10px) left / 22% 100% no-repeat,
      linear-gradient(90deg, rgba(167, 168, 255, 0.5), var(--indigo) 60%, var(--menta)) right / 78% 100% no-repeat;
  }
  .evolucion-paso { flex-direction: column; gap: 16px; }
}

/* ---------- Propósito ---------- */
.nos-proposito {
  margin: clamp(96px, 9vw, 160px) auto 0;
  max-width: 900px;
  text-align: center;
}
.nos-proposito-titulo {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lavanda);
}
.nos-proposito-texto {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blanco);
  text-wrap: balance;
}

/* ---------- Manifiesto ---------- */
.nos-manifiesto {
  margin: clamp(80px, 8vw, 128px) 0 0;
  padding-top: clamp(48px, 5vw, 72px);
  border-top: 1px solid var(--linea);
  display: grid;
  gap: 6px;
  text-align: center;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.nos-manifiesto span:nth-child(1) { color: var(--blanco); }
.nos-manifiesto span:nth-child(2) { color: var(--lavanda); }
.nos-manifiesto span:nth-child(3) { color: var(--blanco); }

/* =====================================================================
   BRILLO EN «Agendar una demo» y «Probar gratis» (negocio, 2026-09-27)
   Un destello que cruza el botón cada pocos segundos y un halo que respira.
   Sólo en los botones de demo y prueba; con «reducir movimiento», quieto.
   ===================================================================== */
.boton[data-enlace="demo"],
.boton[data-enlace="prueba"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.boton[data-enlace="demo"]::after,
.boton[data-enlace="prueba"]::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 45%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  animation: destello 4.2s ease-in-out infinite;
  pointer-events: none;
}
/* Sobre botones blancos, el destello es índigo (el blanco no se vería). */
.boton-claro[data-enlace]::after,
.boton-contorno[data-enlace]::after,
.planes .planes-prueba .boton-primario::after {
  background: linear-gradient(100deg, transparent, rgba(91, 92, 226, 0.22), transparent);
}
/* Los primarios respiran: el halo índigo crece y vuelve. */
.boton-primario[data-enlace="demo"],
.boton-primario[data-enlace="prueba"] { animation: halo 3.2s ease-in-out infinite; }
/* Los de contorno: el borde se enciende en lavanda al mismo ritmo. */
.boton-secundario[data-enlace],
.boton-claro[data-enlace],
.boton-contorno[data-enlace] { animation: borde-vivo 3.2s ease-in-out infinite; }
/* Para que no destellen todos a la vez: la prueba va medio compás detrás. */
.boton[data-enlace="prueba"]::after { animation-delay: 2.1s; }
.boton[data-enlace="prueba"] { animation-delay: 1.6s; }

@keyframes destello {
  0%, 55% { left: -60%; }
  85%, 100% { left: 130%; }
}
@keyframes halo {
  0%, 100% { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 24px -12px rgba(91, 92, 226, 0.9), 0 0 0 0 rgba(91, 92, 226, 0); }
  50% { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 14px 34px -10px rgba(91, 92, 226, 1), 0 0 0 6px rgba(91, 92, 226, 0.16); }
}
@keyframes borde-vivo {
  0%, 100% { border-color: var(--linea-fuerte); }
  50% { border-color: var(--lavanda); }
}
.boton-claro[data-enlace], .boton-contorno[data-enlace] { --borde-base: #CBD5E1; }
.boton-claro[data-enlace], .boton-contorno[data-enlace] { animation-name: borde-vivo-claro; }
@keyframes borde-vivo-claro {
  0%, 100% { border-color: #CBD5E1; }
  50% { border-color: var(--indigo); }
}
.planes .planes-prueba .boton-primario { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .boton[data-enlace]::after { animation: none; display: none; }
  .boton[data-enlace] { animation: none !important; }
}

/* Foco de teclado: lavanda sobre oscuro, índigo sobre claro (la lavanda
   sobre blanco no llega al 3:1 que pide un indicador de foco). */
.seccion:not(.seccion-oscura) :focus-visible { outline-color: var(--indigo); }
.banda-oscura :focus-visible { outline-color: var(--lavanda); }
.plan :focus-visible { outline-color: var(--indigo); }
.pestana-panel :focus-visible, .bento-oscura :focus-visible { outline-color: var(--lavanda); }

/* ---------- Aparición al hacer scroll ---------- */
.js .revela {
  opacity: 0;
  transform: translateY(18px);
}
.js .revela.visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--suave), transform 0.8s var(--suave);
  transition-delay: var(--retraso, 0s);
}

/* ---------- Entrada suave ----------
   Sólo con JavaScript (clase .js en <html>): sin él, todo se ve desde el
   primer momento.                                                          */
.js .aparece {
  opacity: 0;
  transform: translateY(14px);
}
.js.listo .aparece {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--suave), transform 0.8s var(--suave);
  transition-delay: var(--retraso, 0s);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js .aparece, .js .revela { opacity: 1; transform: none; }
  .boton-primario:hover { transform: none; }
}

/* ---------- Soporte flotante (2026-09-27) ----------
   Fijo abajo a la derecha, en menta con letra azul (11:1) para que se encuentre
   de un vistazo. El halo pulsa despacio y se apaga con prefers-reduced-motion. */
.soporte-flotante {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 13px;
  border-radius: 999px;
  background: var(--menta);
  color: var(--azul);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(53, 208, 162, 0.45), 0 2px 6px rgba(15, 23, 42, 0.35);
  transition: transform .2s var(--suave), background .2s;
}
.soporte-flotante:hover { transform: translateY(-2px); background: #4DE0B4; }
/* Compacto (2026-10-01): sólo el icono, para no tapar la agenda ni las
   capturas; el rótulo se despliega al pasar el ratón o con el teclado. */
.soporte-flotante span {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.3s var(--suave), opacity 0.2s ease, margin 0.3s var(--suave);
}
.soporte-flotante:hover span,
.soporte-flotante:focus-visible span { max-width: 120px; opacity: 1; margin: 0 4px 0 8px; }
.soporte-flotante:focus-visible { outline: 3px solid var(--blanco); outline-offset: 3px; }
@keyframes soporte-halo {
  0%, 100% { box-shadow: 0 10px 28px rgba(53, 208, 162, 0.45), 0 0 0 0 rgba(53, 208, 162, 0.55), 0 2px 6px rgba(15, 23, 42, 0.35); }
  50%      { box-shadow: 0 10px 28px rgba(53, 208, 162, 0.45), 0 0 0 12px rgba(53, 208, 162, 0), 0 2px 6px rgba(15, 23, 42, 0.35); }
}
@media (max-width: 640px) {
  .soporte-flotante { right: 14px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .soporte-flotante { animation: none; transition: none; }
}

/* ---------- Formulario de soporte (diálogo) ----------
   Diálogo nativo (<dialog>): el navegador pone el fondo, atrapa el foco y
   cierra con Escape. Fondo claro y letra azul noche: se lee sin esfuerzo. */
.soporte-dialogo {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--radio-grande);
  background: var(--blanco);
  color: var(--azul);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  overflow: auto;
}
.soporte-dialogo::backdrop { background: rgba(15, 23, 42, 0.72); backdrop-filter: blur(3px); }
.soporte-form { position: relative; padding: 32px; }
.soporte-form h2 { margin: 0 0 8px; font-size: 26px; line-height: 1.2; color: var(--azul); }
.soporte-intro { margin: 0 0 22px; color: #475569; font-size: 15px; line-height: 1.55; }
.soporte-cerrar {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: var(--gris-claro); color: var(--azul); font-size: 24px; line-height: 1; cursor: pointer;
}
.soporte-cerrar:hover { background: #E2E8F0; }
.soporte-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.soporte-ancho { grid-column: 1 / -1; }
.soporte-campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; }
.soporte-campo em { font-style: normal; font-weight: 500; color: #64748B; }
.soporte-campo input,
.soporte-campo select,
.soporte-campo textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1.5px solid #CBD5E1;
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--azul);
  font: inherit;
  font-weight: 500;
  font-size: 15px;
}
.soporte-campo textarea { resize: vertical; min-height: 110px; }
.soporte-campo input:focus,
.soporte-campo select:focus,
.soporte-campo textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(91, 92, 226, 0.18); }
.soporte-campo.con-error input,
.soporte-campo.con-error textarea { border-color: #B91C1C; }
.soporte-error { min-height: 0; color: #B91C1C; font-size: 13px; font-weight: 600; }
.soporte-error:empty { display: none; }
/* El campo trampa: fuera de la vista, pero no `display:none` (algunos robots lo saltan). */
.soporte-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.soporte-aviso { margin: 14px 0 0; color: #B91C1C; font-size: 14px; font-weight: 600; }
.soporte-aviso:empty { display: none; }
.soporte-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.soporte-pie small { color: #64748B; font-size: 13px; max-width: 280px; }
.soporte-pie .boton[disabled] { opacity: .6; cursor: wait; }
[data-soporte-paso="hecho"] { text-align: center; padding: 12px 0 4px; }
[data-soporte-paso="hecho"] .boton { margin-top: 8px; }
.soporte-hecho-icono {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--menta); color: var(--azul); font-size: 32px; font-weight: 800;
}
@media (max-width: 640px) {
  .soporte-form { padding: 24px 18px; }
  .soporte-rejilla { grid-template-columns: 1fr; }
  .soporte-pie { flex-direction: column-reverse; align-items: stretch; }
  .soporte-pie .boton { width: 100%; }
}

/* =====================================================================
   Inicio con la agenda (2026-10-01, visión «5 segundos»)
   En el primer pantallazo: a quién, qué vendemos, qué resuelve y la
   agenda. Un solo color de acción: el índigo de «agendar».
   ===================================================================== */
.hero-para {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--blanco);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
}
.hero-para::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--menta);
  box-shadow: 0 0 0 4px rgba(53, 208, 162, 0.18);
}

/* El título fluye en una frase; el acento lleva el degradado de la marca. */
.hero .hero-titulo { font-size: clamp(2.25rem, 1.1rem + 3.2vw, 3.6rem); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.hero-titulo-acento {
  background: linear-gradient(90deg, #C7C8FF 0%, var(--lavanda) 45%, #7FE8C8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .hero-subtitulo {
  margin: 22px 0 0;
  max-width: 36rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
  line-height: 1.6;
  font-weight: 500;
  color: var(--texto-suave);
  letter-spacing: 0;
}
.hero-subtitulo strong { color: var(--blanco); font-weight: 700; }

.hero-sellos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 28px 0 0;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: #E2E8F0;
}
.hero-sellos li { display: inline-flex; align-items: center; gap: 10px; }
.hero-sellos li::before {
  content: '';
  width: 13px;
  height: 7px;
  border-left: 2.5px solid var(--menta);
  border-bottom: 2.5px solid var(--menta);
  transform: rotate(-45deg) translateY(-2px);
  flex-shrink: 0;
}

/* «Probar gratis» en la portada (FASE 17): la pregunta encima y el botón
   grande debajo, a la vista y no como un enlace al final de una frase. */
.hero-probar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 26px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--texto-suave);
}
.hero-probar .boton-prueba { min-width: 260px; }

/* La agenda manda en la columna de la derecha. */
.hero-agenda { position: relative; scroll-margin-top: calc(var(--alto-header) + 12px); }
.hero-agenda::before {
  content: '';
  position: absolute;
  inset: 4% 2% -2% 2%;
  z-index: -1;
  border-radius: 40px;
  background: radial-gradient(closest-side, rgba(91, 92, 226, 0.55), transparent);
  filter: blur(46px);
}

/* La captura real asoma bajo el pantallazo. */
.hero-vistazo { position: relative; margin-top: clamp(48px, 6vw, 88px); }
.hero-vistazo .hero-producto { max-width: 1080px; margin: 0 auto; }
/* Las capturas se ven enteras en todos los anchos (2026-10-02): los recortes
   de móvil (*-movil.webp) cortaban textos a la derecha y ya no se usan. Y el
   inicio deja aire abajo para que la sección siguiente no tape su ventana. */
.ventana-pantalla img { object-fit: contain; object-position: center; }
.hero-vistazo-etiqueta {
  position: relative;
  z-index: 1;
  width: max-content;
  margin: 0 auto -16px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--menta);
  color: var(--azul);
  font-size: 13px;
  font-weight: 800;
}
.hero-vistazo-etiqueta::after { content: ' ↓'; }

@media (min-width: 1024px) {
  .hero { padding: calc(var(--alto-header) + 40px) 0 72px; }
  .hero-rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    align-items: start;
    gap: 56px;
  }
  .hero-mensaje { padding-top: 16px; }
  .hero-para { white-space: nowrap; }
}
@media (max-width: 1023px) {
  .hero { padding: calc(var(--alto-header) + 28px) 0 56px; }
  .hero-rejilla { gap: 28px; }
  /* En el móvil los sellos van debajo de la agenda: primero la acción. */
  .hero-mensaje { display: contents; }
  .hero-para { order: 1; justify-self: start; }
  .hero .hero-titulo { order: 2; }
  .hero .hero-subtitulo { order: 3; margin-top: 0; }
  /* FASE 17: «Probar gratis» sube antes de la agenda, para que se vea al entrar. */
  .hero-probar { order: 4; margin: 0; }
  .hero-agenda { order: 5; }
  .hero-sellos { order: 6; margin: 4px 0 0; font-size: 14px; }
}
@media (max-width: 767px) {
  .hero-para { font-size: 10.5px; letter-spacing: 0.04em; padding: 7px 12px 7px 10px; }
  .hero-vistazo { margin-top: 40px; }
}

/* ---------- La tarjeta de la agenda ---------- */
.agenda-tarjeta {
  position: relative;
  padding: clamp(20px, 1.5vw + 14px, 30px);
  border-radius: 26px;
  background: var(--blanco);
  color: var(--azul);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 90px -30px rgba(2, 6, 23, 0.7);
}
/* El borde con brillo de la marca. */
.agenda-tarjeta::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 27px;
  padding: 1.5px;
  background: linear-gradient(135deg, #8B8CFF, rgba(91, 92, 226, 0.12) 40%, rgba(53, 208, 162, 0.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.agenda-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.agenda-vivo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #0B8A66;
}
.agenda-vivo::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--menta);
  animation: agenda-latido 2s ease-out infinite;
}
@keyframes agenda-latido {
  0%   { box-shadow: 0 0 0 0 rgba(53, 208, 162, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(53, 208, 162, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 208, 162, 0); }
}

/* Día · Hora · Sus datos */
.agenda-pasos { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; font-weight: 700; color: #94A3B8; }
.agenda-pasos li { display: inline-flex; align-items: center; gap: 6px; }
.agenda-pasos li + li::before { content: ''; width: 14px; height: 1px; margin-right: 2px; background: #CBD5E1; }
.agenda-pasos i {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #EEF0F6;
  font-style: normal;
  font-size: 11px;
}
/* en curso */
[data-agenda-estado-paso="dia"] [data-p="dia"],
[data-agenda-estado-paso="hora"] [data-p="hora"],
[data-agenda-estado-paso="datos"] [data-p="datos"] { color: var(--azul); }
[data-agenda-estado-paso="dia"] [data-p="dia"] i,
[data-agenda-estado-paso="hora"] [data-p="hora"] i,
[data-agenda-estado-paso="datos"] [data-p="datos"] i { background: var(--indigo); color: var(--blanco); }
/* hechos */
[data-agenda-estado-paso="hora"] [data-p="dia"] i,
[data-agenda-estado-paso="datos"] [data-p="dia"] i,
[data-agenda-estado-paso="datos"] [data-p="hora"] i,
[data-agenda-estado-paso="hecho"] .agenda-pasos i { background: var(--menta); color: transparent; position: relative; }
[data-agenda-estado-paso="hora"] [data-p="dia"] i::after,
[data-agenda-estado-paso="datos"] [data-p="dia"] i::after,
[data-agenda-estado-paso="datos"] [data-p="hora"] i::after,
[data-agenda-estado-paso="hecho"] .agenda-pasos i::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--azul);
  border-bottom: 2px solid var(--azul);
  transform: rotate(-45deg) translate(1px, -1px);
}

.agenda-titulo { margin: 16px 0 0; font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.65rem); line-height: 1.18; font-weight: 800; letter-spacing: -0.02em; }
.agenda-guia { margin: 6px 0 0; font-size: 15px; font-weight: 500; color: #475569; }
.agenda-estado { margin: 16px 0; color: #475569; font-weight: 600; }
.agenda-estado:empty { display: none; }

.agenda-mes { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 12px; font-size: 14px; font-weight: 800; }
.agenda-flechas { display: flex; gap: 6px; }
.agenda-flecha {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  background: var(--blanco);
  color: #475569;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.agenda-flecha:hover:not([disabled]) { border-color: var(--indigo); color: var(--indigo); }
.agenda-flecha[disabled] { opacity: 0.35; cursor: default; }

.agenda-dias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.agenda-dia {
  position: relative;
  display: grid;
  gap: 4px;
  justify-items: start;
  padding: 13px 14px 12px;
  border: 1.5px solid #E2E8F0;
  border-radius: 16px;
  background: var(--blanco);
  color: var(--azul);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.2s var(--suave), box-shadow 0.2s ease;
}
.agenda-dia small { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #64748B; }
.agenda-dia-fecha { display: flex; align-items: baseline; gap: 6px; }
.agenda-dia strong { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.agenda-dia-fecha span { font-size: 14px; font-weight: 700; color: #475569; }
.agenda-dia em { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-style: normal; font-size: 12.5px; font-weight: 700; color: #0B8A66; }
.agenda-dia em::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--menta); }
.agenda-dia:hover { border-color: var(--indigo); transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(91, 92, 226, 0.7); }
.agenda-dia-pronto { background: linear-gradient(180deg, #F5F5FF, var(--blanco)); border-color: #C9CAFB; }
/* El día más próximo: su marca y un brillo lento que lo señala. */
.agenda-dia-pronto::after {
  content: attr(data-pronto);
  position: absolute;
  top: -9px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--indigo);
  color: var(--blanco);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.agenda-dia-pronto[aria-selected="false"] { animation: agenda-brillo 2.8s ease-in-out infinite; }
@keyframes agenda-brillo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91, 92, 226, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(91, 92, 226, 0.14); }
}
.agenda-dia[aria-selected="true"] { border-color: var(--azul); background: var(--azul); color: var(--blanco); box-shadow: 0 14px 30px -14px rgba(15, 23, 42, 0.7); }
.agenda-dia[aria-selected="true"] small,
.agenda-dia[aria-selected="true"] .agenda-dia-fecha span { color: var(--texto-suave); }
.agenda-dia[aria-selected="true"] em { color: #7FE8C8; }

/* Los horarios del día elegido se abren debajo. */
.agenda-horas-caja { margin-top: 18px; padding-top: 18px; border-top: 1px dashed #CBD5E1; animation: panel-entra 0.35s var(--suave); scroll-margin-bottom: 96px; }
.agenda-subtitulo { margin: 0 0 12px; font-size: 14px; font-weight: 800; color: var(--azul); }
.agenda-subtitulo::first-letter { text-transform: uppercase; }
.agenda-horas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.agenda-hora {
  min-height: 46px;
  border: 1.5px solid #C9CAFB;
  border-radius: 12px;
  background: #F7F7FF;
  color: #3F40C9;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.2s var(--suave), box-shadow 0.2s ease;
}
.agenda-hora:hover { border-color: var(--indigo); transform: translateY(-1px); }
.agenda-hora[aria-selected="true"] {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--blanco);
  box-shadow: 0 10px 22px -10px rgba(91, 92, 226, 0.9);
}
.agenda-hora:focus-visible, .agenda-dia:focus-visible, .agenda-continuar:focus-visible { outline: 3px solid rgba(91, 92, 226, 0.45); outline-offset: 2px; }

/* El botón dice qué falta o qué va a pasar. */
.agenda-continuar {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 15px 16px;
  border: 0;
  border-radius: 14px;
  background: var(--indigo);
  color: var(--blanco);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 14px 30px -12px rgba(91, 92, 226, 0.9);
  transition: background-color 0.15s ease, transform 0.2s var(--suave);
}
.agenda-continuar::first-letter { text-transform: uppercase; }
.agenda-continuar:hover { background: var(--indigo-hover); transform: translateY(-1px); }
.agenda-continuar[aria-disabled="true"] { background: #EEF0F6; color: #64748B; box-shadow: none; cursor: default; transform: none; }

.agenda-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 16px; font-size: 12.5px; font-weight: 600; color: #64748B; }
.agenda-zona { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: #475569; }
.agenda-zona select {
  max-width: 260px;
  padding: 6px 8px;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  background: var(--blanco);
  color: var(--indigo);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
}
.agenda-zona select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(91, 92, 226, 0.18); }
.agenda-respaldo { margin: 20px 0 0; }
.agenda-respaldo[hidden] { display: none; }

/* Paso 3: sus datos */
.agenda-form { margin-top: 18px; }
.agenda-cambiar {
  flex: none;
  border: 0;
  background: none;
  color: #3F40C9;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.agenda-elegido {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: var(--radio);
  background: rgba(53, 208, 162, 0.12);
  border: 1px solid rgba(53, 208, 162, 0.45);
  font-size: 15px;
}
.agenda-elegido strong { display: inline-block; }
.agenda-elegido strong::first-letter { text-transform: uppercase; }
.agenda-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
@media (max-width: 559px) { .agenda-campos { grid-template-columns: 1fr; } }
.agenda-campos .soporte-campo textarea { min-height: 70px; }
.agenda-campos .soporte-campo.con-error select { border-color: #B91C1C; }
.agenda-confirmar { width: 100%; margin-top: 18px; }
.agenda-confirmar[disabled] { opacity: 0.6; cursor: wait; }
.agenda-privacidad { margin: 10px 0 0; text-align: center; font-size: 13px; color: #64748B; }

/* Hecho */
.agenda-hecho { text-align: center; padding: 24px 0 8px; outline: none; }
.agenda-hecho h3 { margin: 0 0 10px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.agenda-hecho p { margin: 0 auto 22px; max-width: 30rem; color: #334155; }
.agenda-hecho-icono {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--menta);
}
.agenda-hecho-icono::before { content: '✓'; color: var(--azul); font-size: 34px; font-weight: 800; }

@media (max-width: 479px) {
  .agenda-pasos { display: none; }
  .agenda-dias { gap: 8px; }
  .agenda-dia { padding: 11px 10px 10px; border-radius: 14px; }
  .agenda-dia strong { font-size: 24px; }
  .agenda-dia-fecha span { font-size: 12.5px; }
  .agenda-dia em { font-size: 11px; }
  .agenda-dia-pronto::after { right: 6px; font-size: 9px; }
  .agenda-hora { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .agenda-vivo::before, .agenda-dia-pronto[aria-selected="false"] { animation: none; }
  .agenda-horas-caja { animation: none; }
}
.agenda-tarjeta [hidden] { display: none !important; }

/* ---------- Barra fija del móvil ---------- */
.barra-agendar { display: none; }
@media (max-width: 767px) {
  .barra-agendar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 16px;
    background: var(--indigo);
    color: var(--blanco);
    text-decoration: none;
    box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.6), 0 8px 24px -10px rgba(91, 92, 226, 0.9);
    transform: translateY(140%);
    transition: transform 0.35s var(--suave);
  }
  .barra-agendar.visible { transform: none; }
  .barra-agendar strong { font-size: 16px; font-weight: 800; white-space: nowrap; }
  .barra-agendar strong::after { content: ' →'; }
  .barra-agendar span { font-size: 12.5px; font-weight: 600; white-space: nowrap; color: rgba(255, 255, 255, 0.82); }
  /* Soporte no tapa la agenda del inicio (está también en el menú): aparece
     cuando la agenda quedó atrás, encima de la barra. */
  .soporte-flotante { display: none; }
  .con-barra .soporte-flotante { display: inline-flex; bottom: 88px; }
}

/* Un solo movimiento en el primer pantallazo: el brillo del día más cercano
   de la agenda. El botón del menú no pulsa. */
.header-demo { animation: none; }

/* =====================================================================
   Fase 2 (2026-10-02): la página en el orden de la decisión
   problema → recorrido → funcionalidades → seguridad → planes →
   nosotros → cómo empezar → preguntas → cierre con la agenda
   ===================================================================== */

/* ---------- El problema: antes y con SOFMIGRACIÓN ---------- */
.dolores { display: grid; gap: 16px; margin-top: clamp(36px, 4vw, 56px); }
@media (min-width: 900px) { .dolores { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.dolor {
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: 24px;
  border: 1px solid var(--linea-clara);
  background: var(--blanco);
  overflow: hidden;
  box-shadow: 0 24px 48px -36px rgba(15, 23, 42, 0.35);
}
.dolor p { margin: 0; padding: 22px 24px; }
.dolor-marca {
  display: block;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dolor-antes { background: #F1F3F8; color: #475569; font-size: 15.5px; line-height: 1.5; font-weight: 600; }
.dolor-antes .dolor-marca { color: #94A3B8; }
.dolor-antes > span:last-child { text-decoration: line-through; text-decoration-color: rgba(185, 28, 28, 0.45); text-decoration-thickness: 1.5px; }
.dolor-ahora { position: relative; font-size: 15px; line-height: 1.6; color: var(--texto-claro-suave); }
.dolor-ahora::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 24px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--indigo);
  box-shadow: 0 0 0 4px var(--blanco);
}
.dolor-ahora::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 33px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--blanco);
  border-bottom: 2px solid var(--blanco);
  transform: rotate(-45deg);
}
.dolor-ahora .dolor-marca { margin-top: 6px; color: var(--indigo); }
.dolor-ahora strong { display: block; margin-bottom: 6px; color: var(--azul); font-size: 1.15rem; line-height: 1.3; font-weight: 800; letter-spacing: -0.01em; }

/* ---------- El recorrido: las pestañas son pasos numerados ---------- */
.pestana-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.07);
  font-size: 12px;
  font-weight: 800;
}
.pestanas-lista [role="tab"] { display: inline-flex; align-items: center; }
.pestanas-lista [role="tab"][aria-selected="true"] .pestana-num { background: var(--menta); color: var(--azul); }

/* ---------- Funcionalidades: cinco a la vista y «Ver todas» ---------- */
.js .bento:not(.abierto) .bento-extra { display: none; }
.bento-mas { margin: 28px 0 0; text-align: center; }
.no-js .bento-mas, html:not(.js) .bento-mas { display: none; }

/* ---------- Seguridad y control ---------- */
.seg-rejilla { list-style: none; display: grid; gap: 14px; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; }
@media (min-width: 640px) { .seg-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .seg-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.seg-item {
  position: relative;
  padding: 24px 24px 24px 64px;
  border-radius: 20px;
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, 0.04);
}
.seg-item::before {
  content: '';
  position: absolute;
  top: 24px;
  left: 22px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(53, 208, 162, 0.16);
  box-shadow: inset 0 0 0 1px rgba(53, 208, 162, 0.5);
}
.seg-item::after {
  content: '';
  position: absolute;
  top: 32px;
  left: 30px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--menta);
  border-bottom: 2px solid var(--menta);
  transform: rotate(-45deg);
}
.seg-item h3 { margin: 0; font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.01em; }
.seg-item p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--texto-suave); }

/* ---------- Cómo empezar ---------- */
.empezar-pasos { list-style: none; position: relative; display: grid; gap: 16px; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; counter-reset: none; }
@media (min-width: 900px) {
  .empezar-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  /* La línea que une los tres pasos. */
  .empezar-pasos::before {
    content: '';
    position: absolute;
    top: 27px;
    left: 16.6%;
    right: 16.6%;
    height: 2px;
    background: linear-gradient(90deg, var(--indigo), var(--lavanda), var(--menta));
    opacity: 0.5;
  }
}
.empezar-paso { position: relative; text-align: center; padding: 0 12px; }
.empezar-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--azul);
  color: var(--blanco);
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 0 0 8px var(--blanco), 0 14px 30px -14px rgba(15, 23, 42, 0.7);
}
.empezar-paso:last-child .empezar-num { background: var(--indigo); }
.empezar-paso h3 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.015em; }
.empezar-paso p { margin: 8px auto 0; max-width: 20rem; font-size: 15.5px; line-height: 1.6; color: var(--texto-claro-suave); }
.empezar-accion { margin: 40px 0 0; text-align: center; }

/* ---------- Cierre oscuro con los próximos días ---------- */
.cierre-agenda .ceja { justify-content: center; }
.cierre-agenda .cierre-garantia { color: var(--texto-tenue); }
.cierre-dias-texto { margin: 28px 0 12px; font-size: 14px; font-weight: 700; color: var(--texto-suave); }
.cierre-dias { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cierre-dias:empty { display: none; }
.cierre-dia {
  display: grid;
  gap: 2px;
  min-width: 132px;
  padding: 12px 16px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--blanco);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--suave);
}
.cierre-dia strong { font-size: 16px; font-weight: 800; }
.cierre-dia span { font-size: 12.5px; font-weight: 700; color: #7FE8C8; }
.cierre-dia:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--lavanda); transform: translateY(-2px); }
.cierre-dia:focus-visible { outline: 3px solid var(--lavanda); outline-offset: 2px; }
.cierre-agenda .cierre-acciones { margin-top: 28px; }
@media (max-width: 767px) {
  .cierre-dias { display: grid; grid-template-columns: 1fr 1fr; }
  .cierre-dia { min-width: 0; }
}

/* ---------- Fase 3: la lupa sobre cada captura (2026-10-02) ----------
   Un recorte en grande de lo importante de cada pantalla. En escritorio va
   encima de la esquina de la captura; en el móvil, debajo y a todo el ancho,
   porque ahí la captura completa se ve pequeña y la lupa es lo que se lee.
   Los recortes salen de las mismas capturas (capturas/lupa-*.webp).        */
.pestana-visual { position: relative; }
.lupa {
  margin: 14px 0 0;
  padding: 0;
  border-radius: 16px;
  background: var(--blanco);
  border: 3px solid var(--blanco);
  box-shadow: 0 30px 60px -24px rgba(2, 6, 23, 0.85), 0 0 0 1px rgba(91, 92, 226, 0.25);
  overflow: hidden;
}
.lupa img { display: block; width: 100%; height: auto; }
.lupa figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--azul);
  color: var(--blanco);
  font-size: 13px;
  font-weight: 700;
}
.lupa figcaption::before {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid var(--menta);
  border-radius: 50%;
  box-shadow: 4px 4px 0 -2.5px var(--menta);
}
@media (min-width: 1024px) {
  .lupa {
    position: absolute;
    right: -28px;
    bottom: -36px;
    width: 64%;
    margin: 0;
    animation: lupa-entra 0.5s 0.15s var(--suave) both;
  }
  /* Las tiras anchas (agenda, casos) se leen mejor un poco más grandes. */
  .lupa-agenda, .lupa-casos { width: 78%; }
  .pestana-panel { padding-bottom: clamp(48px, 5vw, 72px); }
}
@keyframes lupa-entra { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lupa { animation: none; } }

/* ---------- El video del inicio (fase 3) ----------
   Se pone encima de la captura y sólo se ve cuando ya está reproduciendo:
   hasta entonces queda la imagen fija, sin un cuadro negro intermedio.   */
.ventana-pantalla .vistazo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.ventana-pantalla.con-video .vistazo-video { opacity: 1; }
.vistazo-pausa {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.72);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.vistazo-pausa:hover, .vistazo-pausa:focus-visible { opacity: 1; outline: 2px solid var(--lavanda); outline-offset: 2px; }
/* Pausa: dos barras · en pausa: un triángulo. */
.vistazo-pausa::before, .vistazo-pausa::after {
  content: '';
  position: absolute;
  top: 13px;
  width: 4px;
  height: 14px;
  border-radius: 1px;
  background: var(--blanco);
}
.vistazo-pausa::before { left: 14px; }
.vistazo-pausa::after { left: 22px; }
.vistazo-pausa.en-pausa::before {
  left: 16px;
  width: 0;
  height: 0;
  border-radius: 0;
  background: none;
  border-left: 12px solid var(--blanco);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.vistazo-pausa.en-pausa::after { display: none; }

/* Planes va justo después del inicio (negocio, 2026-10-02): el problema queda
   en blanco, separado del recorrido —también blanco— por un filete. */
.dolor-sec { border-bottom: 1px solid var(--linea-clara); }

/* ---------- Páginas legales: /privacidad y /terminos (2026-10-09) ---------- */
/* Fondo claro y una columna de lectura: es texto para leer de corrido. */
.legal-cuerpo { background: var(--gris-claro); color: var(--azul); }
.legal-header { background: var(--azul); }
.legal-barra { display: flex; align-items: center; justify-content: space-between; min-height: var(--alto-header); }
.legal-header .logo-img { height: 48px; width: auto; }
.legal-idioma { color: var(--texto-suave); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.legal-idioma:hover { color: var(--blanco); }
.legal { max-width: 760px; padding-top: 40px; padding-bottom: 64px; }
.legal h1 { margin: 8px 0 4px; font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.2; font-weight: 800; }
.legal h2 { margin: 36px 0 8px; font-size: 1.1875rem; font-weight: 800; }
.legal p, .legal li { font-size: 1rem; line-height: 1.7; color: #334155; }
.legal ul, .legal ol { padding-left: 1.25rem; }
.legal li { margin: 4px 0; }
.legal a { color: #4338CA; text-underline-offset: 2px; }
.legal-fecha { margin: 0 0 24px; font-size: 0.875rem; color: #64748B; }
.legal-volver { margin: 0; font-size: 0.9375rem; }
.legal-volver a { text-decoration: none; font-weight: 600; }
.legal-pie { background: var(--azul); color: var(--texto-tenue); padding: 28px 0; font-size: 0.875rem; }
.legal-pie p { margin: 4px 0; }
.legal-pie a { color: var(--texto-suave); }
.pie-legal a { color: var(--texto-tenue); text-decoration: none; }
.pie-legal a:hover { color: var(--blanco); }
/* Un dato legal por completar: se ve a propósito, no se puede publicar así. */
.legal-pendiente { background: #FEF3C7; color: #92400E; padding: 0 4px; border-radius: 4px; font-weight: 700; }