/* HOJA DE ESTILO DEL SITIO — una sola, para todas las páginas de marketing.
   Hasta el 4 sep 2026 esto vivía dentro de un <style> en index.html Y otra vez
   dentro de en.html: 43 KB duplicados que había que editar dos veces, y que
   volvían impensable abrir una página por servicio. Ahora se escribe una vez y
   el navegador se la guarda para todas.
   No la usan agenda.html, chat.html ni panel.html: esas tienen su propio
   sistema, con nombres de variable en español (--cian, --texto-dim). */

/* SISTEMA VISUAL — el estándar de la categoría al nivel de Linear/Vercel.
   Oscuro, cian de marca, serif solo como acento. Decidido por Paul el 21 ago 2026. */
:root {
  --bg: #08090b;
  --bg-elev: #0d0f12;
  --bg-card: rgba(255, 255, 255, 0.02);
  --bg-card-hover: rgba(255, 255, 255, 0.045);
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.15);

  --text: #f7f8f8;
  --text-dim: #a6adb0;
  --text-muted: #737d81;

  --accent: #22d3ee;
  --accent-bright: #67e8f9;
  --accent-deep: #0891b2;
  --accent-glow: rgba(34, 211, 238, 0.22);
  --accent-tint-bg: rgba(34, 211, 238, 0.08);
  --accent-tint-border: rgba(34, 211, 238, 0.24);

  /* Lo que necesita a una persona: el mismo coral de los errores de los
     formularios (#f3a6a3), en token desde el piloto de automatización. */
  --attention: #f3a6a3;
  --attention-tint-bg: rgba(243, 166, 163, 0.07);
  --attention-tint-border: rgba(243, 166, 163, 0.32);

  --whatsapp: #25d366;
  --facebook: #1877f2;

  --font-display: "Fraunces", "Times New Roman", serif;
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --max-w: 1200px;
  --pad-x: clamp(20px, 4vw, 44px);
  --sec-y: clamp(84px, 11vw, 132px);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;

  /* Curvas con carácter: las nativas de CSS son demasiado tibias. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* La barra superior es fija y mide 63 px: sin esto, cualquier enlace del menú
   deja el título de la sección escondido detrás de ella. */
section[id], main[id] { scroll-margin-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  caret-color: var(--accent);
  accent-color: var(--accent);
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
input, textarea { font: inherit; color: inherit; }

/* Las superficies del navegador también llevan el diseño. */
::selection { background: var(--accent); color: #06141a; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }

/* Atmósfera: un solo halo cian arriba + grain sutil */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(34, 211, 238, 0.09), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(34, 211, 238, 0.05), transparent 60%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* LAYOUT */
.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  position: relative;
  z-index: 1;
}
section { position: relative; z-index: 1; }

/* TIPOGRAFÍA */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  color: var(--text);
  text-wrap: balance;
}
.serif-italic {
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}
.section-title {
  font-size: clamp(34px, 5vw, 60px);
  margin-bottom: 18px;
}
.section-lead {
  max-width: 62ch;
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--text-dim);
  line-height: 1.65;
  text-wrap: pretty;
}

/* BOTONES — responden al tacto: se hunden al presionar. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: transform 160ms var(--ease-out), background 200ms var(--ease-out),
              color 200ms var(--ease-out), border-color 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--accent);
  color: #06141a;
  font-weight: 600;
}
.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-whatsapp {
  background: var(--whatsapp);
  color: #fff;
}
.btn .arrow {
  width: 14px; height: 14px;
  transition: transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: scale(0.97); }
  .btn-primary:hover {
    background: var(--accent-bright);
    box-shadow: 0 8px 28px var(--accent-glow);
  }
  .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--text-dim);
  }
  .btn-whatsapp:hover {
    background: #1fb858;
    box-shadow: 0 8px 28px rgba(37, 211, 102, 0.25);
  }
  .btn:hover .arrow { transform: translateX(3px); }
}

/* El archivo es solo el cerebro, sin la placa de circuito que el logotipo
   original le pone debajo, así que los 34px son cerebro entero: es el alto que
   tenía la marca antes y el que deja aire dentro de una barra que mide 40. */
.brand-logo { height: 34px; width: auto; }

/* NAV */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 11px 0;
  transition: background 250ms var(--ease-out), border-color 250ms var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(8, 9, 11, 0.75);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.brand-text { line-height: 1; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font-size: 14px;
  color: var(--text-dim);
  transition: color 150ms var(--ease-out);
  position: relative;
}
.nav-links a:hover { color: var(--text); }
.nav-ia { display: inline-flex; align-items: center; gap: 7px; }
.ia-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: iaLatido 2.4s infinite;
}
@keyframes iaLatido { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.mobile-ia { display: inline-flex; align-items: center; gap: 9px; }
.nav-lang {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color 150ms var(--ease-out);
}
.nav-lang:hover { border-color: var(--border-strong); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .btn { padding: 9px 17px; font-size: 14px; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  align-items: center;
  justify-content: center;
  transition: transform 160ms var(--ease-out), border-color 150ms var(--ease-out);
}
.nav-toggle:active { transform: scale(0.94); }
.nav-toggle svg { width: 18px; height: 18px; }

/* El menú entero mide 1.030px: marca 155, ocho enlaces 652, los dos botones
   175 y los dos huecos de 24. Con los 44px de margen a cada lado, por debajo
   de 1.120px de ventana el nombre queda a menos de los 24 de separación que
   pide el diseño, y un poco más abajo se monta directamente sobre el primer
   enlace: se veía en cualquier portátil con la ventana a media pantalla,
   "Intellectum" pisando "Pruébalo". El límite estaba en 880px, donde ya hacía
   rato que no cabía; a 1.120 el menú o está entero o es el botón. Medido en
   el navegador, no calculado: si cambia el logotipo o un enlace, se vuelve a
   medir. */
@media (max-width: 1119px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* Menú móvil */
.mobile-menu {
  position: fixed;
  inset: 60px 0 0 0;
  z-index: 40;
  background: rgba(8, 9, 11, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 28px var(--pad-x);
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.mobile-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-menu a {
  display: block;
  padding: 17px 0;
  font-family: var(--font-display);
  font-size: 27px;
  border-bottom: 1px solid var(--border);
}
.mobile-menu .btn { margin-top: 24px; width: 100%; }

/* HERO */
.hero {
  padding: 150px 0 96px;
  position: relative;
  overflow: hidden;
}
/* En móvil el hero apila texto, demo y hechos: con 150 px de aire arriba el
   panel de la demo quedaba justo en el borde del primer pantallazo. */
@media (max-width: 767px) {
  .hero { padding-top: 112px; }
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  /* Arriba y no al centro: el panel de la demo tiene que entrar en el primer
     pantallazo aunque la columna de texto sea más alta. */
  align-items: start;
}
/* Tres hijos, no dos: texto, demo y hechos. En escritorio los hechos van
   debajo del texto y la demo ocupa las dos filas de la derecha; en móvil el
   orden natural es texto → demo → hechos, para que el panel asome en el
   primer pantallazo y no quede detrás de tres líneas más. */
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 64px; }
  .hero-demo { grid-column: 2; grid-row: 1 / 3; padding-top: 6px; }
  .hero-hechos { grid-column: 1; grid-row: 2; }
}

/* El chip vivo: IntelliA de verdad está en línea; es un control, no una etiqueta. */
.chip-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--accent-tint-border);
  background: var(--accent-tint-bg);
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.01em;
  transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.chip-live strong { color: var(--text); font-weight: 500; }
.chip-live:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .chip-live:hover { border-color: var(--accent); color: var(--text); }
}

.hero h1 {
  font-size: clamp(38px, 6.8vw, 84px);
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.hero h1 .line { display: block; }
.hero-sub {
  margin-top: 26px;
  max-width: 54ch;
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--text-dim);
  line-height: 1.6;
  text-wrap: pretty;
}
.hero-ctas {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* Tres hechos en lugar de tres cifras. Lo que dice cada línea se comprueba
   en el panel de al lado o en el propio servicio; no hay estimación con
   asterisco que defender. */
.hero-hechos {
  list-style: none;
  margin: 44px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--border);
  max-width: 520px;
  display: grid;
  gap: 12px;
}
.hero-hechos li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-dim);
  text-wrap: pretty;
}
.hero-hechos li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint-bg);
}
.hero-hechos strong { color: var(--text); font-weight: 500; }

/* La demo vive en el hero: el primer pantallazo es el producto funcionando,
   no un logo dando vueltas. La lista de negocios se vuelve una fila de
   píldoras sobre el panel; el panel es el mismo de siempre (más abajo). */
.hero-demo { position: relative; min-width: 0; scroll-margin-top: 84px; }

/* El cerebro que piensa. Es el logo completo (cerebro, pistas y el nombre) como
   máscara: dibujado tenue en reposo, con un barrido de luz muy lento, y luz
   corriendo rápido por los circuitos más un halo cian mientras IntelliA redacta
   una respuesta en la demo (clase .pensando, la pone demo-negocios.js). Solo en
   escritorio: en móvil no hay hueco bajo el chat y la demo tiene que seguir
   entrando en el primer pantallazo. En reposo tiene que ser casi nada: la
   mirada debe seguir en el chat. */
.hero-cerebro { display: none; }
@media (min-width: 1024px) {
  .hero-demo { display: flex; flex-direction: column; align-self: stretch; }
  .hero-demo > * { flex: none; }
  .hero-cerebro {
    --cerebro-mascara: url("/cerebro-mascara.webp");
    display: grid;
    place-items: end center;
    flex: 1 1 auto;
    min-height: 204px;
    padding-top: 24px;
  }
  .hero-cerebro-caja { position: relative; width: min(100%, 236px); aspect-ratio: 541 / 430; }
  .hero-cerebro-caja > * { position: absolute; inset: 0; }
  .hero-cerebro-base, .hero-cerebro-luz, .hero-cerebro-brillo > i {
    -webkit-mask: var(--cerebro-mascara) center / contain no-repeat;
    mask: var(--cerebro-mascara) center / contain no-repeat;
  }
  .hero-cerebro-base { background: var(--text-dim); opacity: 0.4; }
  .hero-cerebro-luz { overflow: hidden; opacity: 0.32; transition: opacity 400ms var(--ease-out); }
  .hero-cerebro-luz::before, .hero-cerebro-luz::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -100%; width: 300%;
    background: linear-gradient(100deg, transparent 38%, var(--accent) 50%, transparent 62%);
    animation: cerebro-barrido 9s linear infinite;
    will-change: transform;
  }
  /* El barrido rápido ya existe en reposo, pero apagado y en pausa: al pensar
     solo sube su opacidad y arranca, sin saltos de fase. */
  .hero-cerebro-luz::after { opacity: 0; animation-duration: 1.3s; animation-play-state: paused; transition: opacity 300ms var(--ease-out); }
  .hero-cerebro-brillo { opacity: 0; filter: blur(10px); transition: opacity 500ms var(--ease-out); }
  .hero-cerebro-brillo > i { display: block; position: absolute; inset: 0; background: var(--accent); }
  .hero-cerebro.pensando .hero-cerebro-luz { opacity: 1; }
  .hero-cerebro.pensando .hero-cerebro-luz::after { opacity: 1; animation-play-state: running; }
  .hero-cerebro.pensando .hero-cerebro-brillo { opacity: 0.45; animation: cerebro-latido 1.3s ease-in-out infinite; }
}
@keyframes cerebro-barrido { from { transform: translateX(-33.4%); } to { transform: translateX(33.4%); } }
@keyframes cerebro-latido { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .hero-cerebro-luz::before, .hero-cerebro-luz::after { animation: none; background: var(--accent); }
  .hero-cerebro-luz { opacity: 0.18; }
  .hero-cerebro.pensando .hero-cerebro-luz { opacity: 0.85; }
  .hero-cerebro.pensando .hero-cerebro-brillo { animation: none; opacity: 0.4; }
}
.hero-demo-rotulo {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--text-dim);
}
.hero-demo .demo-lista { flex-direction: row; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.hero-demo .demo-neg {
  width: auto;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 7px;
  border-radius: 999px;
}
.hero-demo .demo-neg-ico { width: 24px; height: 24px; border-radius: 50%; }
.hero-demo .demo-neg-ico svg { width: 13px; height: 13px; }
.hero-demo .demo-neg-que { display: none; }
.hero-demo .demo-neg-nombre { font-size: 13px; white-space: nowrap; }
.hero-demo .demo-panel {
  min-height: 460px;
  max-height: 520px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}
.hero-demo .demo-nota { margin-top: 12px; font-size: 12px; max-width: none; }

/* El cielo: un lienzo por zona [data-cosmos] (hoy solo el logo del pie),
   desbordado para que las chispas tengan a dónde irse, con los bordes
   desvanecidos para que no se note el recorte. Lo dibuja el script del final
   (estrellas con paralaje + chispas). */
.cosmos {
  position: absolute;
  left: -20%;
  top: -24%;
  width: 140%;
  height: 148%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 48%, #000 45%, transparent 100%);
}

/* El isotipo en tres capas: .isotipo-giro la mueven el cursor y el scroll
   (JS), .isotipo-cuerpo levita sola (CSS) y .isotipo-luz es la luz que barre
   las pistas: una banda que se desplaza con transform (el compositor la mueve
   sin repintar) dentro de una ventana recortada con la propia imagen como
   máscara. Cada capa lleva su perspective() para no depender del apilamiento
   3D del padre. */
.isotipo { position: relative; z-index: 1; }
.isotipo-giro { will-change: transform; }
.isotipo-cuerpo {
  position: relative;
  animation: levitar 11s ease-in-out infinite;
}
.isotipo-cuerpo img { display: block; }
.isotipo-luz {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: url(/logo-completo.webp) center / 100% 100% no-repeat;
  mask: url(/logo-completo.webp) center / 100% 100% no-repeat;
}
.isotipo-luz::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 34%;
  background: linear-gradient(100deg, transparent 0%, rgba(34, 211, 238, 0.42) 35%, rgba(247, 248, 248, 0.5) 50%, rgba(34, 211, 238, 0.42) 65%, transparent 100%);
  transform: translateX(-110%) skewX(-8deg);
  will-change: transform;
  animation: barrido 9s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes levitar {
  0%, 100% { transform: perspective(1100px) translate3d(0, 0, 0) rotateY(-4deg) rotateX(1.5deg); }
  50% { transform: perspective(1100px) translate3d(0, -10px, 0) rotateY(4deg) rotateX(-1.5deg); }
}
@keyframes barrido {
  0% { transform: translateX(-110%) skewX(-8deg); }
  38%, 100% { transform: translateX(410%) skewX(-8deg); }
}

/* ─────────────────────────────────────────────────────────────────────
   LA DEMO: ELIGE UN NEGOCIO COMO EL TUYO Y HAZLE LA PRUEBA.

   Vive dentro del hero (.hero-demo). En vez de contar que el agente atiende,
   deja que el visitante lo pruebe con un negocio que se parece al suyo. Los
   cinco negocios y sus fichas están en lib/demos.js; el agente es el mismo
   cerebro de producción, sin herramientas.
   ───────────────────────────────────────────────────────────────────── */
/* La lista de negocios. Botones de verdad: se llega con Tab y con flechas. */
.demo-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.demo-neg {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text-dim);
  transition:
    background 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    color 180ms var(--ease-out),
    transform 140ms var(--ease-out);
}
.demo-neg:hover { background: var(--bg-card-hover); border-color: var(--border-strong); color: var(--text); }
.demo-neg:active { transform: scale(0.985); }
.demo-neg[aria-pressed="true"] {
  background: var(--accent-tint-bg);
  border-color: var(--accent-tint-border);
  color: var(--text);
}
.demo-neg-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.demo-neg-ico svg { width: 17px; height: 17px; stroke-width: 1.6; fill: none; stroke: currentColor; }
.demo-neg[aria-pressed="true"] .demo-neg-ico { color: var(--accent); border-color: var(--accent-tint-border); }
.demo-neg-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.demo-neg-nombre { font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.demo-neg-que { font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
.demo-neg[aria-pressed="true"] .demo-neg-que { color: var(--text-dim); }

/* El panel de conversación. Alto fijo para que la página no salte cuando
   entran mensajes: el hilo scrollea por dentro. */
.demo-panel {
  display: flex;
  flex-direction: column;
  min-height: 416px;
  max-height: 560px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  overflow: hidden;
}
.demo-panel-cab {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.015);
}
.demo-panel-quien { font-size: 13.5px; color: var(--text-dim); min-width: 0; }
.demo-panel-quien strong { color: var(--text); font-weight: 500; }
.demo-panel-estado {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.demo-hilo {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px 6px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
/* Los mensajes se apilan contra el fondo, como en cualquier chat: con una
   sola burbuja arriba y 400 px de vacío debajo, el panel parece roto.
   margin-top:auto en vez de justify-content:flex-end porque lo segundo
   recorta el principio del hilo cuando hay scroll. */
.demo-hilo > :first-child { margin-top: auto; }
.demo-burbuja {
  border-radius: 13px;
  padding: 9px 13px;
  font-size: 14px;
  line-height: 1.55;
  max-width: 86%;
  width: fit-content;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  /* Entran con una transición, no con keyframes: si llegan dos seguidas la
     segunda no reinicia a la primera. */
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.demo-burbuja.entrando { opacity: 0; transform: translateY(7px); }
.demo-burbuja.ia {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  color: var(--text);
}
.demo-burbuja.visitante {
  background: var(--accent-tint-bg);
  border: 1px solid var(--accent-tint-border);
  border-bottom-right-radius: 4px;
  margin-left: auto;
  color: var(--text);
}
.demo-burbuja.aviso {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
  font-size: 13px;
  max-width: 100%;
}

/* Los tres puntos mientras piensa. */
.demo-puntos { display: inline-flex; gap: 4px; align-items: center; height: 10px; }
.demo-puntos i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-muted);
  animation: demoLatir 1.1s var(--ease-in-out) infinite;
}
.demo-puntos i:nth-child(2) { animation-delay: 0.16s; }
.demo-puntos i:nth-child(3) { animation-delay: 0.32s; }
@keyframes demoLatir {
  0%, 60%, 100% { opacity: 0.32; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Preguntas sugeridas: quitan el miedo a la hoja en blanco. */
.demo-sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 16px 0;
}
.demo-sugerencias:empty { display: none; }
.demo-sugerencias { transition: opacity 240ms var(--ease-out); }
.demo-sugerencias.esperando { opacity: 0; visibility: hidden; }
.demo-chip {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.4;
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 130ms var(--ease-out);
}
.demo-chip:hover { border-color: var(--accent-tint-border); color: var(--accent); }
.demo-chip:active { transform: scale(0.97); }

.demo-form {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 13px 16px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
}
.demo-entrada {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 14px;
  transition: border-color 160ms var(--ease-out);
}
.demo-entrada::placeholder { color: var(--text-muted); }
.demo-entrada:focus { outline: none; border-color: var(--accent-tint-border); }
.demo-enviar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #06141a;
  transition: background 160ms var(--ease-out), transform 130ms var(--ease-out), opacity 160ms var(--ease-out);
}
.demo-enviar svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2.2; }
.demo-enviar:hover { background: var(--accent-bright); }
.demo-enviar:active { transform: scale(0.94); }
.demo-enviar[disabled] { opacity: 0.42; cursor: not-allowed; transform: none; }

/* «Así queda en tu panel»: la tarjeta que el panel de producción arma con la
   conversación de la demo. Calca la tarjeta real (nombre, cuándo, canal,
   estado, lo que preguntó) para que el visitante vea el otro lado del
   producto sin salir del hilo. Entra una vez, tras la primera respuesta, y
   entra como los mensajes: desde algo ya visible, sin salir de la nada. */
.demo-ficha {
  width: 100%;
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.05), transparent 60%),
    var(--bg-card);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.7);
  font-size: 13px;
  line-height: 1.45;
  transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out), filter 360ms var(--ease-out);
}
.demo-ficha.entrando { opacity: 0; transform: translateY(10px); filter: blur(4px); }
.demo-ficha-cab {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.demo-ficha-cab svg { width: 13px; height: 13px; fill: currentColor; flex: 0 0 auto; }
.demo-ficha-fila { display: flex; align-items: baseline; gap: 8px; }
.demo-ficha-fila strong { color: var(--text); font-weight: 500; font-size: 14px; }
.demo-ficha-cuando { margin-left: auto; color: var(--text-muted); font-size: 12px; }
.demo-ficha-pastillas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.demo-ficha-pastilla {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.03em;
}
.demo-ficha-pastilla.canal { border-color: var(--accent-tint-border); color: var(--accent); }
.demo-ficha-detalle { margin: 10px 0 0; color: var(--text-dim); overflow-wrap: anywhere; }
.demo-ficha-detalle b { color: var(--text-muted); font-weight: 500; }
.demo-ficha-pie {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
}

/* La letra pequeña dicha en voz alta: qué es esto y qué no es. */
.demo-nota {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 760px;
}
.demo-nota a { color: var(--text-dim); border-bottom: 1px solid var(--border-strong); }
.demo-nota a:hover { color: var(--accent); }

@media (max-width: 900px) {
  /* En móvil la lista se vuelve una fila que se desliza: ocupar cinco filas
     de alto antes de llegar al chat sería empujar la prueba fuera de la
     pantalla, que es justo lo contrario de lo que hace esta sección. */
  .demo-lista {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    margin: 0 calc(var(--pad-x) * -1);
    padding-inline: var(--pad-x);
    scrollbar-width: none;
  }
  .demo-lista::-webkit-scrollbar { display: none; }
  .demo-neg { width: auto; flex: 0 0 auto; scroll-snap-align: start; padding: 9px 13px; }
  .demo-neg-ico { width: 26px; height: 26px; border-radius: 7px; }
  .demo-neg-ico svg { width: 14px; height: 14px; }
  .demo-neg-que { display: none; }
  .demo-neg-nombre { font-size: 13.5px; white-space: nowrap; }
  .demo-panel { min-height: 420px; max-height: 68vh; }
  .hero-demo .demo-lista { flex-wrap: nowrap; }
  .hero-demo .demo-panel { min-height: 400px; max-height: 62vh; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-burbuja, .demo-neg, .demo-chip, .demo-enviar { transition: none; }
  .demo-burbuja.entrando, .demo-ficha.entrando { opacity: 1; transform: none; filter: none; }
  .demo-puntos i { animation: none; opacity: 0.6; }
}
/* Entrada del hero: sube y enfoca, en cascada corta */
.hero h1 .line, .chip-live, .hero-sub, .hero-ctas, .hero-hechos, .hero-demo {
  animation: rise 0.9s var(--ease-out) both;
}
.chip-live { animation-delay: 0s; }
.hero h1 .line:nth-child(1) { animation-delay: 0.06s; }
.hero h1 .line:nth-child(2) { animation-delay: 0.14s; }
.hero h1 .line:nth-child(3) { animation-delay: 0.22s; }
.hero-sub { animation-delay: 0.34s; }
.hero-ctas { animation-delay: 0.44s; }
.hero-hechos { animation-delay: 0.54s; }
.hero-demo { animation-delay: 0.22s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* SE CONECTA CON LO QUE YA USAS: el recorrido de un mensaje. Tres columnas en
   escritorio (entradas · IntelliA · salidas) y tres filas en móvil, donde las
   cuatro entradas y las cuatro salidas van en cuadrícula de dos por dos. Las
   líneas las dibuja pagina.js en el SVG de encima, sobre las posiciones reales
   de los nodos, así el mapa sirve en las dos orientaciones sin duplicar nada. */
.conexion { padding: 0 0 var(--sec-y); }
.conexion-intro { margin-bottom: clamp(36px, 5vw, 56px); }
.conexion-mapa {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0 clamp(40px, 7vw, 112px);
}
.conexion-entradas, .conexion-salidas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  min-width: 0;
}
.conexion-entradas { justify-items: end; }
.conexion-salidas { justify-items: start; }
.conexion-entradas li { width: 100%; display: grid; justify-items: end; }
.conexion-nodo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(100%, 300px);
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  text-align: left;
  font: inherit;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 360ms var(--ease-out), transform 160ms var(--ease-out);
}
button.conexion-nodo { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.conexion-nodo:hover { border-color: var(--border-strong); background: var(--bg-card-hover); }
button.conexion-nodo:active { transform: scale(0.97); }
button.conexion-nodo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.conexion-nodo.activo, .conexion-nodo.listo {
  border-color: var(--accent-tint-border);
  background: var(--accent-tint-bg);
  box-shadow: 0 10px 30px -14px var(--accent-glow);
}
.conexion-icono {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-dim);
  transition: color 200ms ease, border-color 200ms ease;
}
.conexion-icono svg { width: 20px; height: 20px; }
.conexion-icono-wa { color: var(--whatsapp); }
/* Las dos redes caben en el mismo cuadro de 40 px, una junto a la otra:
   se leen como un solo nodo, no como dos. */
.conexion-icono-redes { grid-template-columns: repeat(2, 15px); gap: 4px; place-content: center; }
.conexion-icono-redes svg { width: 15px; height: 15px; }
/* Cada red con su color de marca, igual que WhatsApp: Instagram con su
   degradado (definido dentro del propio SVG) y Facebook azul. Los colores van
   sobre el glifo, así que se mantienen cuando el nodo se activa. */
.conexion-icono-redes .ico-fb { color: var(--facebook); }
.conexion-nodo.activo .conexion-icono, .conexion-nodo.listo .conexion-icono { color: var(--accent); border-color: var(--accent-tint-border); }
.conexion-nodo.activo .conexion-icono-wa { color: var(--whatsapp); }
.conexion-texto { display: grid; gap: 2px; min-width: 0; }
.conexion-texto strong { font-weight: 500; font-size: 15px; letter-spacing: -0.01em; line-height: 1.3; }
.conexion-texto small { font-size: 13px; line-height: 1.4; color: var(--text-dim); text-wrap: pretty; }

/* La etiqueta que aparece cuando el pulso llega: cita reservada, confirmación
   enviada, ficha creada, aviso enviado. Entra desde un poco más abajo y un 4 % más pequeña. */
.conexion-listo {
  position: absolute;
  top: -11px; right: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.3;
  color: #062228;
  background: var(--accent);
  box-shadow: 0 6px 18px -8px var(--accent-glow);
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
  pointer-events: none;
}
.conexion-listo svg { width: 11px; height: 11px; }
.conexion-nodo.listo .conexion-listo { opacity: 1; transform: none; }

/* IntelliA en el centro: un disco con un anillo que gira despacio mientras el
   mapa está en pantalla; cuando llega un mensaje, un segundo anillo da una
   vuelta rápida y una onda sale del borde. */
.conexion-centro { position: relative; display: grid; place-items: center; }
.conexion-centro::before {
  content: "";
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 62%);
  opacity: 0.55;
  pointer-events: none;
}
.conexion-ia {
  position: relative;
  width: 150px; height: 150px;
  border-radius: 50%;
  display: grid; place-content: center; justify-items: center; gap: 7px;
  text-align: center;
  background: radial-gradient(circle at 50% 38%, rgba(34, 211, 238, 0.12), var(--bg-elev) 72%);
  border: 1px solid var(--accent-tint-border);
  box-shadow: 0 22px 60px -24px var(--accent-glow), inset 0 0 44px -22px var(--accent-glow);
}
.conexion-ia::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.conexion-ia.procesa::after { animation: conexionOnda 700ms var(--ease-out); }
@keyframes conexionOnda { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.conexion-anillo, .conexion-anillo-luz {
  position: absolute; inset: -8px;
  border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  pointer-events: none;
}
.conexion-anillo {
  background: conic-gradient(from 0deg, transparent 0 58%, var(--accent) 86%, transparent 100%);
  opacity: 0.5;
  animation: conexionGiro 9s linear infinite;
  animation-play-state: paused;
}
.conexion-mapa.en-vista .conexion-anillo { animation-play-state: running; }
.conexion-anillo-luz {
  background: conic-gradient(from 0deg, transparent 0 40%, var(--accent-bright) 85%, transparent 100%);
  opacity: 0;
}
.conexion-ia.procesa .conexion-anillo-luz { animation: conexionGiroLuz 700ms var(--ease-in-out); }
@keyframes conexionGiro { to { transform: rotate(360deg); } }
@keyframes conexionGiroLuz { 0% { opacity: 1; transform: rotate(0deg); } 100% { opacity: 0; transform: rotate(360deg); } }
.conexion-ia-nombre { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.02em; line-height: 1; color: var(--text); }
.conexion-ia-estado { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-dim); white-space: nowrap; }

/* Las líneas: base fija, luz que recorre el trazo y pulso al frente. */
.conexion-lineas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.conexion-lineas .base { fill: none; stroke: var(--border-strong); stroke-width: 1.25; stroke-linejoin: round; }
.conexion-lineas .luz { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 420ms ease; }
.conexion-lineas .pulso { fill: var(--accent-bright); filter: drop-shadow(0 0 6px var(--accent)); opacity: 0; }

@media (max-width: 767px) {
  .conexion-mapa { grid-template-columns: minmax(0, 1fr); gap: 40px 0; justify-items: stretch; }
  /* Dos por dos, con 12 px de calle: por esa calle bajan las líneas de la fila
     de arriba sin cruzar la tarjeta de abajo (ver pagina.js). */
  .conexion-entradas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; justify-items: stretch; }
  .conexion-entradas li { justify-items: stretch; }
  .conexion-salidas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; justify-items: stretch; }
  .conexion-nodo { width: auto; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; }
  .conexion-icono { width: 36px; height: 36px; }
  .conexion-icono-redes { grid-template-columns: repeat(2, 13px); gap: 4px; }
  .conexion-icono-redes svg { width: 13px; height: 13px; }
  .conexion-texto strong { font-size: 14px; }
  .conexion-texto small { font-size: 12px; }
  .conexion-listo { right: auto; left: 8px; top: -10px; font-size: 11px; }
  .conexion-centro::before { width: 240px; height: 240px; }
  .conexion-ia { width: 128px; height: 128px; }
  .conexion-ia-nombre { font-size: 23px; }
}

/* UN MARTES CUALQUIERA — la comparación, sin un solo porcentaje inventado.
   Dos columnas de hechos. La de la izquierda va desnuda —ni marco ni fondo— y
   la de la derecha dentro de un panel con borde cian: el ojo cae solo donde
   queremos, y no hace falta pintar cruces rojas sobre lo que el visitante hace
   hoy, que sería insultarlo. En pantalla angosta el panel no cabe (serían dos
   columnas de 160 px), así que se cambia por un riel cian a la izquierda de
   cada respuesta y un rótulo pequeño en cada celda: sin los encabezados de
   columna, "hoy" y "con IntelliA" se confundirían. */
.cambio { padding: clamp(56px, 7vw, 88px) 0 var(--sec-y); }
.cambio-intro { margin-bottom: clamp(32px, 5vw, 52px); }
.cambio-tabla {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}
/* Las celdas se posicionan para pintarse ENCIMA del panel: un pseudo-elemento
   absoluto se dibuja sobre los hermanos estáticos, no debajo. */
.cambio-celda, .cambio-rotulo { position: relative; }
.cambio-rotulo { display: none; }
.cambio-celda {
  font-size: 15px;
  line-height: 1.62;
  text-wrap: pretty;
}
.cambio-celda.antes { color: var(--text-muted); }
.cambio-celda.despues {
  color: var(--text);
  border-left: 2px solid var(--accent-tint-border);
  padding: 10px 0 0 16px;
  margin-bottom: 24px;
}
/* Todas menos la primera: la que tiene otra "antes" por delante. */
.cambio-celda.antes ~ .cambio-celda.antes {
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
.cambio-mini {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.cambio-celda.despues .cambio-mini { color: var(--accent); }

/* LA LÍNEA QUE ENCIENDE INTELLIA. --p va de 0 (hoy) a 1 (con IntelliA) y
   enciende las cinco respuestas de arriba abajo: cada celda calcula su propio
   encendido (--li) a partir de --p y de su orden (--i), así que un solo valor
   mueve todo y no hay que tocar el DOM celda por celda. El mando es un input
   de rango de verdad: el arrastre, el teclado y el lector de pantalla vienen
   gratis. Sin JavaScript --p vale 1 y el mando no aparece: la tabla se ve
   encendida, como siempre. */
.cambio-tabla { --p: 1; }
.cambio-mando {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.cambio-mando[hidden] { display: none; }
.cambio-mando-rotulo {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cambio-mando-rotulo.despues { color: var(--accent); }
.cambio-rango {
  --p: 0;
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: grab;
  touch-action: pan-y;
}
.cambio-rango:active { cursor: grabbing; }
.cambio-rango:focus { outline: none; }
.cambio-rango::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) calc(var(--p) * 100%), var(--border-strong) 0);
}
.cambio-rango::-moz-range-track { height: 2px; border-radius: 2px; background: var(--border-strong); }
.cambio-rango::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--accent); }
.cambio-rango::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent-tint-border), 0 6px 16px -4px rgba(34, 211, 238, 0.55);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.cambio-rango::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 1px var(--accent-tint-border), 0 6px 16px -4px rgba(34, 211, 238, 0.55);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.cambio-rango:hover::-webkit-slider-thumb { transform: scale(1.08); }
.cambio-rango:active::-webkit-slider-thumb { transform: scale(0.95); }
.cambio-rango:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-tint-bg), 0 0 0 6px var(--accent-tint-border); }
.cambio-rango:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--accent-tint-bg), 0 0 0 6px var(--accent-tint-border); }
/* Las respuestas van en los hijos 4, 6, 8, 10 y 12 (los dos rótulos van primero). */
.cambio-tabla > .cambio-celda.despues:nth-child(4) { --i: 0; }
.cambio-tabla > .cambio-celda.despues:nth-child(6) { --i: 1; }
.cambio-tabla > .cambio-celda.despues:nth-child(8) { --i: 2; }
.cambio-tabla > .cambio-celda.despues:nth-child(10) { --i: 3; }
.cambio-tabla > .cambio-celda.despues:nth-child(12) { --i: 4; }
.cambio-celda.despues {
  --li: clamp(0, calc(var(--p) * 5 - var(--i, 0)), 1);
  opacity: calc(0.28 + 0.72 * var(--li));
  filter: blur(calc((1 - var(--li)) * 3px));
  transform: translateX(calc((1 - var(--li)) * -8px));
}
.cambio-nota {
  margin: 30px 0 0;
  max-width: 76ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.cambio-nota a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; }
.cambio-nota a:hover { color: var(--accent); }

@media (min-width: 860px) {
  .cambio-tabla { grid-template-columns: 1fr 1fr; }
  .cambio-tabla::before {
    content: "";
    position: absolute;
    inset: 0 0 0 50%;
    border: 1px solid var(--accent-tint-border);
    border-radius: var(--radius-lg);
    background:
      radial-gradient(70% 55% at 50% 0%, rgba(34, 211, 238, 0.07), transparent 72%),
      var(--bg-card);
    pointer-events: none;
    /* El panel se descubre de arriba abajo con --p, con un borde suave de
       56 px en vez de un corte: a 0 no se ve nada, a 1 se ve entero. */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--p) * 110% - 56px), transparent calc(var(--p) * 110%));
    mask-image: linear-gradient(to bottom, #000 calc(var(--p) * 110% - 56px), transparent calc(var(--p) * 110%));
  }
  .cambio-mando-rotulo { display: none; }
  .cambio-mando { margin-bottom: 4px; }
  .cambio-rotulo {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 24px 0 20px;
  }
  .cambio-rotulo.despues { color: var(--accent); }
  .cambio-mini { display: none; }
  .cambio-celda.antes,
  .cambio-celda.antes ~ .cambio-celda.antes { padding: 22px clamp(24px, 3.4vw, 46px) 22px 0; }
  .cambio-celda.despues {
    padding: 22px clamp(24px, 3vw, 36px);
    margin: 0;
    border-left: 0;
  }
  .cambio-rotulo.antes { padding-right: clamp(24px, 3.4vw, 46px); }
  .cambio-rotulo.despues { padding-left: clamp(24px, 3vw, 36px); padding-right: clamp(24px, 3vw, 36px); }
  .cambio-celda.despues ~ .cambio-celda.despues { border-top: 1px solid rgba(34, 211, 238, 0.13); }
}

/* El teléfono con la conversación real, al lado de la tabla. En escritorio se
   queda pegado mientras bajas: la tabla es más alta que el teléfono y así el
   video acompaña las cinco filas. En móvil va encima, centrado. */
.cambio-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 44px);
  align-items: start;
}
.cambio-columna { min-width: 0; }
.cambio-telefono { margin: 0; justify-self: center; width: min(100%, 272px); }
.telefono {
  position: relative;
  padding: 9px;
  border-radius: 34px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}
.telefono-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: 26px;
  background: #06080a;
  object-fit: cover;
}
.telefono-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #06141a;
  box-shadow: 0 14px 30px -8px var(--accent-glow);
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out);
}
.telefono-play[hidden] { display: none; }
.telefono-play svg { width: 26px; height: 26px; margin-left: 3px; }
.telefono-play:hover { background: var(--accent-bright); }
.telefono-play:active { transform: scale(0.95); }
.cambio-video-nota {
  margin: 14px 4px 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim);
  text-align: center;
  text-wrap: pretty;
}
@media (min-width: 1024px) {
  .cambio-cuerpo { grid-template-columns: 272px minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); }
  .cambio-telefono { position: sticky; top: 92px; justify-self: start; }
  .cambio-video-nota { text-align: left; }
}

/* LA LLAMADA. El mismo video que sale en redes: vertical, con sonido y a
   pedido. Es lo único que suena en todo el sitio, así que no arranca solo ni
   se descarga hasta que alguien le da al play (preload="none" + poster). El
   marco no es el teléfono de la sección de arriba a propósito: esta pieza ya
   viene rotulada y con su marca, y meterla en un bisel sería enmarcar dos
   veces. */
.llamada {
  padding: clamp(56px, 7vw, 88px) 0;
  border-top: 1px solid var(--border);
}
.llamada-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 4vw, 46px);
  align-items: center;
}
.llamada-texto { min-width: 0; }
.llamada-sonido {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--accent-tint-border);
  background: var(--accent-tint-bg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.llamada-sonido svg { width: 14px; height: 14px; stroke-width: 1.8; }
.llamada-texto .section-lead { margin-bottom: 26px; }
.llamada-mas {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 200ms var(--ease-out), gap 200ms var(--ease-out);
}
.llamada-mas svg { width: 16px; height: 16px; stroke-width: 2; }
.llamada-mas:hover { color: var(--accent); gap: 12px; }
.llamada-mas:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.llamada-figura { margin: 0; justify-self: center; width: min(100%, 320px); }
.llamada-marco {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  background: #06080a;
  overflow: hidden;
  box-shadow: 0 40px 80px -34px rgba(0, 0, 0, 0.85);
}
.llamada-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  background: #06080a;
}
.llamada-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.llamada-play[hidden] { display: none; }
.llamada-play span {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #06141a;
  box-shadow: 0 14px 34px -8px var(--accent-glow);
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out);
}
.llamada-play svg { width: 28px; height: 28px; margin-left: 4px; }
.llamada-play:hover span { background: var(--accent-bright); transform: scale(1.04); }
.llamada-play:active span { transform: scale(0.96); }
.llamada-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 20px; }
@media (min-width: 900px) {
  .llamada-cuerpo { grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(44px, 6vw, 76px); }
  .llamada-figura { justify-self: end; }
}

/* El video de la llamada dentro de una página de servicio (/llamadas-con-ia).
   La pieza es la misma que la de la portada y usa su mismo CSS; lo único que
   cambia es la nota, que aquí cuelga de la rejilla entera y no de una columna,
   y necesita separarse de ella. */
.sv-llamada .demo-nota { margin-top: clamp(22px, 3vw, 34px); }

/* MARQUEE */
.marquee {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 64px;
  white-space: nowrap;
  animation: marquee 42s linear infinite;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--text-dim);
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { display: inline-flex; align-items: center; gap: 64px; }
.marquee-track span::after {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L14.2 9.8 L22 12 L14.2 14.2 L12 22 L9.8 14.2 L2 12 L9.8 9.8 Z' fill='%2322d3ee'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* SERVICIOS */
.services { padding: var(--sec-y) 0 calc(var(--sec-y) * 0.6); }
.services-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 56px;
}
@media (min-width: 900px) {
  .services-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 72px; }
}
.service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 760px) {
  .service-grid { grid-template-columns: 1fr 1fr; }
}
.service-card {
  position: relative;
  padding: 36px 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  transition: background 300ms var(--ease-out), border-color 300ms var(--ease-out), transform 300ms var(--ease-out);
  overflow: hidden;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* Luz que sigue al cursor: el reflector clásico de Linear/Vercel. */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(34, 211, 238, 0.07), transparent 65%);
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
  pointer-events: none;
}
.service-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(34, 211, 238, 0.5), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-strong);
    transform: translateY(-3px);
  }
  .service-card:hover::before, .service-card:hover::after { opacity: 1; }
}
.service-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--accent-tint-bg);
  border: 1px solid var(--accent-tint-border);
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: 26px;
}
.service-icon svg { width: 21px; height: 21px; stroke-width: 1.6; }
.service-card h3 {
  font-size: clamp(22px, 2.2vw, 27px);
  font-weight: 400;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.service-card p {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
.service-card .tag {
  display: inline-block;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 10px;
  border: 1px solid var(--accent-tint-border);
  border-radius: 999px;
}
.service-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}

/* PROCESO */
.process { padding: calc(var(--sec-y) * 0.6) 0 var(--sec-y); }
.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-top: 52px;
}
@media (min-width: 760px) {
  .process-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}
.step {
  position: relative;
  padding: 30px 0 0;
  border-top: 1px solid var(--border);
}
.step::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 44px; height: 1px;
  background: var(--accent);
}
.step-num {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 300;
  font-style: italic;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: 22px; margin-bottom: 10px; }
.step p {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* EL PROCESO COMO RIEL. pagina.js pone .riel y mueve --avance (0 a 1) al
   ritmo del scroll: una línea recorre las cuatro fases (por arriba en
   escritorio, por la izquierda en el teléfono) y el punto de cada fase se
   enciende cuando la línea lo pasa. Ligado al scroll, sin easing. Sin
   JavaScript o con movimiento reducido no hay .riel y las cuatro fases se
   ven encendidas, como hasta ahora. */
.process-grid.riel {
  --avance: 0;
  position: relative;
  padding-left: 28px;
}
.process-grid.riel::before,
.process-grid.riel::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  pointer-events: none;
}
.process-grid.riel::before { background: var(--border); }
.process-grid.riel::after {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transform: scaleY(var(--avance));
  transform-origin: left top;
}
.process-grid.riel .step { border-top: 0; padding-top: 0; }
.process-grid.riel .step::before {
  top: 22px; left: -31px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  transition: background 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.process-grid.riel .step.encendido::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint-bg), 0 0 16px var(--accent-glow);
}
.process-grid.riel .step-num { color: var(--text-muted); transition: color 320ms var(--ease-out); }
.process-grid.riel .step h3 { color: var(--text-dim); transition: color 320ms var(--ease-out); }
.process-grid.riel .step.encendido .step-num { color: var(--accent); }
.process-grid.riel .step.encendido h3 { color: var(--text); }
@media (min-width: 760px) {
  .process-grid.riel { padding-left: 0; }
  .process-grid.riel::before,
  .process-grid.riel::after { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 1px; }
  .process-grid.riel::after { transform: scaleX(var(--avance)); }
  .process-grid.riel .step { border-top: 1px solid transparent; padding-top: 30px; }
  .process-grid.riel .step::before { top: -4px; left: 0; }
}

/* NOSOTROS */
.about {
  padding: var(--sec-y) 0;
  border-top: 1px solid var(--border);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1fr 1.2fr; gap: 72px; }
}
.about-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
.about-quote em { color: var(--accent); font-weight: 400; }
.about-body p {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 16px;
  max-width: 70ch;
}
.about-body p strong { color: var(--text); font-weight: 500; }

/* POR QUÉ */
.why { padding: var(--sec-y) 0; border-top: 1px solid var(--border); }
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 52px;
}
@media (min-width: 760px) {
  .why-grid { grid-template-columns: repeat(3, 1fr); }
}
.why-card {
  position: relative;
  padding: 34px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
  transition: border-color 300ms var(--ease-out), background 300ms var(--ease-out);
}
.why-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(34, 211, 238, 0.06), transparent 65%);
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .why-card:hover { border-color: var(--border-strong); background: var(--bg-card-hover); }
  .why-card:hover::before { opacity: 1; }
}
.why-card .icon {
  width: 36px; height: 36px;
  color: var(--accent);
  margin-bottom: 22px;
}
.why-card .icon svg { width: 100%; height: 100%; stroke-width: 1.4; }
.why-card h3 { font-size: 23px; margin-bottom: 10px; }
.why-card p {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* FAQ */
.faq { padding: var(--sec-y) 0; border-top: 1px solid var(--border); }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
@media (min-width: 900px) {
  .faq-grid { grid-template-columns: 1fr 1.4fr; gap: 72px; }
}
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%;
  text-align: left;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color 150ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .faq-q:hover { color: var(--accent-bright); }
}
.faq-q .plus {
  width: 22px; height: 22px;
  flex-shrink: 0;
  position: relative;
  transition: transform 300ms var(--ease-out);
}
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-q .plus::before, .faq-q .plus::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--accent);
}
.faq-q .plus::before { width: 100%; height: 1.5px; }
.faq-q .plus::after { width: 1.5px; height: 100%; }
/* Despliegue interrumpible: grid-rows en vez de max-height adivinado. */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease-out);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner {
  overflow: hidden;
  min-height: 0;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.65;
  max-width: 70ch;
}
/* El aire de abajo vive DENTRO del contenido medido: así crece y se recorta
   con la propia fila del grid, sin animar padding. */
.faq-a-inner::after { content: ""; display: block; height: 24px; }

/* CTA */
.cta {
  padding: var(--sec-y) 0;
  border-top: 1px solid var(--border);
  position: relative;
}
.cta-inner {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.cta h2 {
  font-size: clamp(38px, 6.5vw, 84px);
  letter-spacing: -0.035em;
  line-height: 1;
  margin-bottom: 24px;
}
.cta-sub {
  color: var(--text-dim);
  font-size: clamp(16px, 1.5vw, 18px);
  max-width: 52ch;
  margin: 0 auto 38px;
  line-height: 1.6;
  text-wrap: pretty;
}
.cta-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.cta-agenda {
  /* La agenda dejó de ser un botón que manda a otra página: es la agenda, aquí
     mismo. El marco es un iframe de /agenda?incrustado=1 —mismo origen, misma
     paleta— para no tener dos copias del mismo formulario que se desincronicen
     el día que cambie un campo. */
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 30px);
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.02);
  text-align: left;
}
.cta-agenda iframe {
  display: block;
  width: 100%;
  border: 0;
  /* Alto de arranque: lo que ocupa la lista de horas ya cargada. El propio
     marco lo corrige por postMessage en cuanto sabe cuánto mide de verdad, y
     el que no tenga JS se queda con una altura razonable en vez de con nada. */
  height: 400px;
}
/* La transición llega DESPUÉS de la primera medida, no antes: al cargar, el
   marco pasa del alto de arranque al real, y animar esa corrección se ve como
   un tirón. Animar los cambios siguientes —de la lista de horas al
   formulario— sí sirve: evita que el contenido de abajo salte de golpe. */
.cta-agenda iframe.ajustado {
  transition: height 280ms var(--ease-out);
}
.cta-o {
  margin: clamp(26px, 4vw, 36px) 0 16px;
  font-size: 14px;
  color: var(--text-dim);
}
@media (prefers-reduced-motion: reduce) {
  .cta-agenda iframe.ajustado { transition: none; }
}
.cta-channels {
  margin-top: 52px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  font-size: 14px;
  color: var(--text-dim);
}
.cta-channels a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 150ms var(--ease-out);
}
.cta-channels a:hover { color: var(--text); }
.cta-channels svg { width: 16px; height: 16px; color: var(--accent); }

/* FOOTER */
.footer {
  border-top: 1px solid var(--border);
  padding: 60px 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
/* El logo del pie lleva el mismo cielo del hero, en pequeño (ver .cosmos).
   El pie recorta el desborde del lienzo para no abrir scroll horizontal. */
.footer { overflow: hidden; }
/* Redes. Cada icono es un enlace con su propio nombre accesible: un lector de
   pantalla no puede leer un SVG, y "enlace, gráfico" no le sirve a nadie. */
.footer-redes { display: flex; gap: 10px; margin-top: 16px; }
.footer-redes a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--border-strong); color: var(--text-dim);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.footer-redes a:hover { color: var(--accent); border-color: var(--accent-tint-border); background: var(--accent-tint-bg); }
.footer-redes a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.footer-redes svg { width: 18px; height: 18px; fill: currentColor; }
.footer-brand .cosmos-zona {
  position: relative;
  width: 100%;
  max-width: 240px;
  margin-bottom: 18px;
}
.footer-brand .cosmos-zona a { display: block; }
.footer-brand img {
  width: 100%;
  max-width: 240px;
  height: auto;
}
.footer-brand p {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 16px;
}
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  font-size: 14px;
  color: var(--text-dim);
  transition: color 150ms var(--ease-out);
}
.footer-col a:hover { color: var(--text); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* Identidad legal. Va en la portada, no solo en el aviso de privacidad:
   quien verifica el negocio (Meta, Google, un cliente) la busca en el pie y
   si no la encuentra ahí, asume que no existe. */
.footer-legal {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.8;
  color: var(--text-muted);
  /* Los dos botones flotantes viven abajo (56px + 20px de margen). Sin este
     colchón se comen justo la línea que identifica a la empresa. */
  padding-bottom: 76px;
}
.footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.2); }
.footer-legal a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* WhatsApp flotante — a la izquierda para no montarse con el chat de IntelliA */
.fab-whatsapp {
  position: fixed;
  bottom: 20px; left: 20px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 30;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.35);
  transition: transform 160ms var(--ease-out);
}
.fab-whatsapp:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .fab-whatsapp:hover { transform: scale(1.06); }
}
.fab-whatsapp svg { width: 26px; height: 26px; }

/* Aparición al hacer scroll, con cascada corta dentro de cada grilla */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.service-grid .reveal:nth-child(2), .why-grid .reveal:nth-child(2), .process-grid .reveal:nth-child(2) { transition-delay: 60ms; }
.service-grid .reveal:nth-child(3), .why-grid .reveal:nth-child(3), .process-grid .reveal:nth-child(3) { transition-delay: 120ms; }
.service-grid .reveal:nth-child(4), .process-grid .reveal:nth-child(4) { transition-delay: 180ms; }
.service-grid .reveal:nth-child(5) { transition-delay: 60ms; }
.service-grid .reveal:nth-child(6) { transition-delay: 120ms; }

/* Movimiento reducido: quedan los fundidos, se va el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero h1 .line, .chip-live, .hero-sub, .hero-ctas, .hero-hechos, .hero-demo { animation: none; }
  .isotipo-cuerpo { animation: none; }
  .isotipo-luz { display: none; }
}

/* ══ PÁGINAS DE SERVICIO ════════════════════════════════════════════════════
   Una por cada cosa que se vende. Reutilizan casi todo lo de arriba —.wrap,
   .section-title, .btn, .faq-*, .service-card— y solo añaden lo que la portada
   no tiene: una cabecera más baja que la del hero (aquí nadie hay que
   convencer de que entre: ya entró buscando esto), la miga de pan, y las tres
   listas que dan el cuerpo de la página. */
.sv-hero { padding: clamp(84px, 11vw, 120px) 0 clamp(40px, 6vw, 64px); }
.miga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: 13px;
  color: var(--text-muted);
}
.miga a { color: var(--text-muted); text-decoration: none; }
.miga a:hover { color: var(--accent); }
.miga span[aria-hidden] { opacity: 0.5; }
.sv-hero h1 {
  font-size: clamp(38px, 6vw, 68px);
  margin-bottom: 20px;
  max-width: 18ch;
}
.sv-hero .section-lead { max-width: 64ch; font-size: clamp(16px, 1.6vw, 19px); }
.sv-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.sv-bloque { padding: 0 0 clamp(52px, 7vw, 76px); }
.sv-bloque > .wrap > h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  margin-bottom: 26px;
}
.sv-bloque .sv-entrada { max-width: 68ch; margin: 0 0 30px; color: var(--text-dim); line-height: 1.65; }

/* Las tres listas. Comparten rejilla y se distinguen por la marca de la
   izquierda: chispa cian para lo que sí hace, número para los pasos, raya
   apagada para lo que no. La marca ES la información; sin ella habría que
   repetir "sí" y "no" en cada línea. */
.sv-lista { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 820px) { .sv-lista { grid-template-columns: 1fr 1fr; gap: 2px 40px; } }
.sv-lista li {
  position: relative;
  padding: 15px 0 15px 30px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
  text-wrap: pretty;
}
.sv-lista li strong { color: var(--text); font-weight: 500; }
.sv-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L14.2 9.8 L22 12 L14.2 14.2 L12 22 L9.8 14.2 L2 12 L9.8 9.8 Z' fill='%2322d3ee'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sv-lista.limites li::before {
  background: none;
  top: 25px;
  height: 1px;
  width: 14px;
  background-color: var(--text-muted);
}
.sv-lista.limites li { color: var(--text-muted); }

.sv-pasos { counter-reset: paso; display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 820px) { .sv-pasos { grid-template-columns: 1fr 1fr; gap: 2px 40px; } }
.sv-pasos li {
  position: relative;
  counter-increment: paso;
  padding: 16px 0 16px 44px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
  text-wrap: pretty;
}
.sv-pasos li strong { color: var(--text); font-weight: 500; }
.sv-pasos li::before {
  content: "0" counter(paso);
  position: absolute;
  left: 0;
  top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* Las otras páginas, al final. El enlace interno es medio punto del asunto:
   sin él cada página queda sola y el buscador no ve que son un conjunto. */
.sv-otras { padding: 0 0 var(--sec-y); }
.sv-otras h2 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 24px; }
.sv-otras-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .sv-otras-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .sv-otras-grid { grid-template-columns: repeat(3, 1fr); } }
.sv-otra {
  display: block;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  text-decoration: none;
  transition: border-color 260ms var(--ease-out), background 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.sv-otra h3 { font-size: 20px; margin-bottom: 8px; }
.sv-otra p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
@media (hover: hover) and (pointer: fine) {
  .sv-otra:hover { border-color: var(--accent-tint-border); background: var(--bg-card-hover); transform: translateY(-2px); }
}
.sv-otra:active { transform: scale(0.99); }

/* El pie de cada tarjeta de servicio: la etiqueta a la izquierda y el enlace a
   su página a la derecha. La tarjeta entera SÍ se puede pulsar desde el 14 de
   septiembre de 2026, pero el <article> sigue sin envolverse en <a> a
   propósito: así el lector de pantalla anuncia «Cómo funciona» y no el párrafo
   entero, y el texto se puede seguir seleccionando. Lo que hace grande el
   blanco es pagina.js, que marca la tarjeta con data-clicable y reenvía el clic
   a este mismo enlace cuando no se está seleccionando texto. */
.service-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
}
.service-pie .tag { margin-top: 0; }
.service-mas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 200ms var(--ease-out), gap 200ms var(--ease-out);
}
.service-mas svg { width: 15px; height: 15px; stroke-width: 2; }
.service-mas:hover { color: var(--accent); gap: 10px; }
.service-mas:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Toda la tarjeta como zona de clic: el cursor lo anuncia, y al pulsar se hunde
   un pelo igual que un botón. El :active de dentro del media query repite el
   translateY del hover porque transform no se suma: sin él, apretar la tarjeta
   la haría caer de golpe a su sitio. */
.service-card[data-clicable] { cursor: pointer; }
.service-card[data-clicable]:active { transform: scale(0.994); }
@media (hover: hover) and (pointer: fine) {
  .service-card[data-clicable]:hover .service-mas { color: var(--accent); gap: 10px; }
  .service-card[data-clicable]:active { transform: translateY(-3px) scale(0.994); }
}


/* ─────────────────────────────────────────────────────────────────────
   PAQUETES CERRADOS Y COMPARATIVO — arriba de los planes, 12 sep 2026.

   Un paquete con rango no es un paquete: si el montaje dice "entre 790 y
   1.380", el cliente sigue teniendo que preguntar, que es justo lo que la
   página existe para evitar. Por eso arriba van cuatro precios exactos y
   abajo se quedan las piezas sueltas con su rango, para quien sí quiere
   armarse la suya.

   La diferencia se ve antes de leer: las tarjetas de paquete se apoyan en
   una superficie sólida (--bg-elev) y las de plan siguen siendo el vidrio
   translúcido de siempre. Sin insignias ni "el más popular": no hay todavía
   un solo cliente que respalde esa frase. */
.pr-paquetes { padding: 0 0 clamp(52px, 7vw, 76px); }
.pr-paquetes > .wrap > h2,
.pr-comp > .wrap > h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  margin-bottom: 26px;
}

.pq-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
}
@media (min-width: 720px) { .pq-rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .pq-rejilla { grid-template-columns: repeat(4, 1fr); gap: 12px; } }

.pr-paquete {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 26px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  transition: border-color 300ms var(--ease-out), transform 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pr-paquete:hover { border-color: var(--accent-tint-border); transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .pr-paquete { transition: border-color 300ms var(--ease-out); }
  .pr-paquete:hover { transform: none; }
}

/* El nombre y el oficio en la misma línea, y el oficio cae debajo cuando no
   cabe —"Concesionarias y distribuidoras" no entra en una columna de 270px—.
   Envolver es mejor que recortar: el oficio es lo que hace que el cliente se
   reconozca en la tarjeta. */
.pr-paquete h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 9px;
  font-size: 21px;
  line-height: 1.2;
  margin: 0 0 10px;
}
.pq-oficio {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
}
.pr-paquete .pr-para {
  margin-bottom: 20px;
  color: var(--text-dim);
}

/* "$6.769" y "montaje, una vez" no caben en la misma línea en una columna de
   270px, y dejar que se parta el rótulo descuadra las cuatro tarjetas. El
   rótulo va siempre debajo de la cifra: igual en las cuatro, quepa o no. */
.pr-paquete .pr-cifra { flex-wrap: wrap; gap: 2px 8px; }
.pr-paquete .pr-periodo { flex: 1 0 100%; }

/* Cuatro tarjetas en fila: los precios tienen que quedar a la misma altura
   aunque un nombre parta en dos líneas y otro no, y la composición de
   "Operación completa" ocupe cuatro renglones donde la de "Recepción" ocupa
   dos. Las tarjetas de plan de más abajo lo resuelven reservando alturas a
   ojo; aquí no alcanza, porque la lista de piezas crece cada vez que se añade
   algo a un paquete. Con subgrid cada tarjeta usa las MISMAS ocho filas de la
   rejilla: el renglón del precio mide lo que mida el caso más largo, y las
   cuatro quedan a nivel solas. Si el navegador no lo entiende, las tarjetas se
   ven bien igual, solo que sin alinear entre ellas. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 720px) {
    .pq-rejilla { grid-template-rows: repeat(8, auto); }
    .pr-paquete {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 8;
      row-gap: 0;
    }
  }
}

.pq-luego {
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--text-dim);
}
.pq-grande {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 0 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.pq-grande b {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pq-grande span { font-size: 12.5px; color: var(--text-muted); }
.pr-paquete .pr-detalle { margin-bottom: 20px; }
/* Los botones abajo del todo. Con subgrid caen solos en la misma fila; sin
   subgrid, el margen automático los empuja al pie de su propia tarjeta. */
.pr-paquete .pr-hace { margin-bottom: 24px; }
.pr-paquete .btn { width: 100%; justify-content: center; margin-top: auto; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 720px) { .pr-paquete .btn { margin-top: 0; align-self: end; } }
}
.pr-paquete .btn-secondary { border-color: var(--border-strong); }

.pq-nota {
  max-width: 74ch;
  margin: 24px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
}


/* ── «O ARMA EL TUYO A LA MEDIDA» ──
   El quinto objeto de la sección, y a propósito NO es una quinta tarjeta: las
   cuatro de arriba son productos cerrados y esto es la herramienta. Se
   distingue por dos cosas, y solo dos, para no competir con ellas: un marco de
   luz que gira despacio —lo único que se mueve en toda la página— y una
   maqueta de los tres controles del cotizador, para que se vea qué hay al otro
   lado del botón antes de pulsarlo. La maqueta no hace nada: está en
   aria-hidden y no muestra ninguna cifra de dinero, precisamente para que
   nadie la lea como un precio. */
@property --pq-giro {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.pq-medida {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  margin-top: 36px;
  padding: 32px 28px;
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
}

/* El marco: un cónico girando, recortado a 1px con dos máscaras que se restan,
   así que solo brilla el borde y el relleno se queda oscuro. Donde no haya
   @property (navegadores viejos) el ángulo no anima y queda un marco fijo con
   un realce cian: sigue leyéndose bien, solo que quieto. */
.pq-medida-luz {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--pq-giro),
    var(--border-strong) 0deg 186deg,
    var(--accent-deep) 262deg,
    var(--accent-bright) 292deg,
    var(--accent-deep) 318deg,
    var(--border-strong) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: pqGiro 8s linear infinite;
  pointer-events: none;
}
@keyframes pqGiro { to { --pq-giro: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .pq-medida-luz { animation: none; }
}

/* Todo lo que se lee, por encima del marco. */
.pq-medida-dicho,
.pq-medida-maqueta { position: relative; z-index: 1; }

.pq-medida-dicho h3 {
  margin: 0 0 12px;
  font-size: clamp(25px, 3.1vw, 33px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.pq-medida-dicho > p {
  max-width: 58ch;
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-dim);
}
.pq-medida-pie {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* La maqueta: los tres controles del cotizador, sin números de dinero. */
.pq-medida-maqueta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 22px 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.pqm-fila { display: flex; align-items: center; gap: 8px; }
.pqm-pastillas i {
  flex: 1;
  height: 24px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}
.pqm-pastillas i.viva {
  border-color: var(--accent-tint-border);
  background: var(--accent-tint-bg);
}
.pqm-riel { position: relative; height: 24px; }
.pqm-riel::before,
.pqm-riel::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
}
.pqm-riel::before { left: 0; right: 0; background: var(--border-strong); }
.pqm-riel::after { left: 0; width: 62%; background: var(--accent-deep); }
.pqm-riel i {
  position: absolute;
  left: 62%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.pqm-cuenta {
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}
.pqm-cuenta i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-style: normal;
  line-height: 1;
}
.pqm-cuenta b {
  min-width: 14px;
  font-weight: 400;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

@media (min-width: 820px) {
  .pq-medida {
    grid-template-columns: minmax(0, 1.25fr) minmax(230px, 0.75fr);
    align-items: center;
    gap: 44px;
    padding: 38px 36px;
  }
}

/* EL COMPARATIVO.

   Cuatro filas de números y la fecha en que se leyeron. Sin nombrar a nadie
   y sin un solo adjetivo sobre ellos: la única marca es una Z en la tipografía
   de esta casa, que es una inicial para no repetir "la otra empresa" cuatro
   veces, no una imitación de su logotipo.

   En pantalla ancha son cuatro columnas con una cabecera. En el teléfono la
   cabecera desaparece y cada celda se rotula sola, porque una tabla de cuatro
   columnas en 360px no se lee. */
.pr-comp { padding: 0 0 clamp(52px, 7vw, 76px); }

.cmp {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
}
.cmp-fila { border-top: 1px solid var(--border); }
.cmp-fila:first-child { border-top: 0; }

.cmp-que {
  margin: 0;
  font-size: 14px;
  color: var(--text-dim);
}
.cmp-celda { display: grid; }
.cmp-rot {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cmp-cifra {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cmp-ellos .cmp-cifra { color: var(--text-muted); }
.cmp-mio .cmp-cifra { color: var(--text); }
.cmp-celda small {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.cmp-ahorro {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* La inicial, pintada con SUS colores: el azul #233dff con el que se marcan,
   muestreado de su propia página el 12 de septiembre de 2026. Sigue siendo una
   letra en la tipografía de Intellectum dentro de un cuadro —no su logotipo—,
   así que se reconoce de quién hablamos sin nombrarlos y sin copiar su marca.
   De paso el azul separa de un vistazo su columna de la nuestra, que va en
   cian: dos colores que no se confunden ni en el teléfono. */
.cmp-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  flex: none;
  margin-right: 7px;
  /* un punto más claro que el relleno, para que el cuadro no se funda con el
     fondo oscuro de la fila */
  border: 1px solid #4055ff;
  border-radius: 3px;
  background: #233dff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}

/* ── Teléfono: cada celda se rotula sola, en columna ──
   Probado a 375px: con el rótulo al costado, "EN LA OTRA EMPRESA" parte en dos
   líneas y la nota de abajo se queda con 160px. En columna cabe todo y se lee
   de arriba abajo, que es como se lee un teléfono. */
@media (max-width: 819px) {
  .cmp-fila.cmp-cab { display: none; }
  .cmp-fila { padding: 20px 18px 22px; }
  .cmp-que { margin-bottom: 14px; font-size: 15px; color: var(--text); }
  .cmp-celda { gap: 4px; }
  .cmp-celda + .cmp-celda { margin-top: 18px; }
  .cmp-ahorro { margin-top: 14px; }
}

/* ── Escritorio: cuatro columnas alineadas con la cabecera ──

   Las columnas se miden UNA vez, en la tabla entera, y cada fila las toma
   prestadas con subgrid. Hasta el 12 de septiembre de 2026 cada fila era una
   rejilla independiente con la cuarta columna en `auto`: la fila del primer
   año lleva "$1.293 · 29 % menos" y las otras tres solo "21 % menos", así que
   esa fila se medía sola y ensanchaba su última columna 32px. El resultado
   era una tabla con una fila corrida frente a las demás, que es exactamente
   lo que se ve cuando dos cifras que deberían estar una debajo de otra no lo
   están. Con subgrid la columna del ahorro se mide con el texto más largo de
   todas y las cuatro filas caen en las mismas líneas. */
@media (min-width: 820px) {
  .cmp {
    display: grid;
    grid-template-columns: minmax(150px, 1.05fr) 1.4fr 1.4fr minmax(110px, auto);
    column-gap: 24px;
    row-gap: 0;
  }
  .cmp-fila {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    padding: 20px 26px;
  }
  /* Sin subgrid (Safari anterior al 16) no hay forma de que una fila se entere
     de lo que mide otra, así que la cuarta columna deja de medirse sola y se
     fija: 150px caben "$1.293 · 29 % menos" y todas las filas vuelven a
     coincidir, a costa de un hueco algo mayor en las tres cortas. */
  @supports not (grid-template-columns: subgrid) {
    .cmp { display: block; }
    .cmp-fila {
      grid-column: auto;
      grid-template-columns: minmax(150px, 1.05fr) 1.4fr 1.4fr 150px;
      column-gap: 24px;
    }
  }
  .cmp-fila.cmp-cab {
    padding: 13px 26px;
    background: rgba(255, 255, 255, 0.02);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .cmp-cab span { display: flex; align-items: center; }
  .cmp-cab .cmp-mio { color: var(--accent); }
  .cmp-celda { align-content: start; gap: 5px; }
  /* El rótulo de cada celda desaparece de la vista porque la cabecera ya lo
     dice, pero no del árbol: con display:none, un lector de pantalla oiría
     "$1.500, $1.179" sin saber de quién es cada cifra. */
  .cmp-rot {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .cmp-ahorro { text-align: right; }
}

/* ─────────────────────────────────────────────────────────────────────
   PRECIOS — /precios, publicada el 7 sep 2026.

   Hasta ese día no había una sola cifra en el sitio: quien quería saber
   cuánto costaba tenía que escribir y esperar respuesta. La página existe
   para que la comparación se haga aquí y no en la pestaña del competidor.

   La jerarquía de cada tarjeta es deliberada: primero para quién es, luego
   la mensualidad (que es lo que la gente vino a ver), después el tope, y al
   final la implementación en letra chica. Al revés — implementación primero
   — el precio de entrada parece cuatro veces más alto de lo que es. */
.pr-planes { padding: 0 0 clamp(52px, 7vw, 76px); }
.pr-planes > .wrap > h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  margin-bottom: 26px;
}

.pr-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
}
@media (min-width: 720px) { .pr-rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .pr-rejilla { grid-template-columns: repeat(4, 1fr); gap: 12px; } }

.pr-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  transition: background 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pr-plan:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }
}
/* El plan con WhatsApp es el que casi todo el mundo termina necesitando, y
   la insignia lo dice con un hecho, no con un "el más popular" inventado. */
.pr-plan.destacado {
  border-color: var(--accent-tint-border);
  background: linear-gradient(180deg, var(--accent-tint-bg), transparent 42%), var(--bg-card);
}
.pr-insignia {
  position: absolute;
  top: -10px;
  left: 26px;
  padding: 4px 11px;
  border: 1px solid var(--accent-tint-border);
  border-radius: 999px;
  background: var(--bg-elev);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.pr-plan h3 { font-size: 21px; line-height: 1.2; margin: 0 0 10px; }
.pr-para {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
/* Con las tarjetas en fila, los cuatro precios tienen que quedar a la misma
   altura: si un título parte en dos líneas y otro no, la fila se lee torcida
   aunque las cajas midan igual. Se reserva el sitio del caso más largo —dos
   líneas de título, cuatro de descripción— y nada se recorta si crece. */
@media (min-width: 720px) {
  .pr-plan h3 { min-height: 2.4em; }
  .pr-plan .pr-para { min-height: 6.2em; }
  /* Y el tope, por lo mismo: "1.400 conversaciones incluidas" parte en dos
     líneas y dejaría la raya de abajo a distinta altura que en las otras. */
  .pr-plan .pr-tope { min-height: 2.8em; }
}

.pr-cifra {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
}
.pr-monto {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 42px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pr-cifra.chica .pr-monto { font-size: clamp(24px, 2.6vw, 30px); }
.pr-periodo { font-size: 13px; color: var(--text-muted); }
.pr-tope {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.pr-datos { margin: 0 0 20px; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pr-datos > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pr-datos > div + div { margin-top: 9px; }
.pr-datos dt { font-size: 12.5px; color: var(--text-muted); flex: none; }
.pr-datos dd {
  margin: 0;
  text-align: right;
  font-size: 13px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.pr-datos dd span { display: block; font-size: 11px; color: var(--text-muted); }

.pr-hace { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 9px; }
.pr-hace li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-dim);
}
.pr-hace li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.75;
}
/* El botón se pega abajo: con listas de distinto largo, cuatro botones a
   distinta altura hacen que la fila parezca desalineada aunque no lo esté. */
/* El borde transparente iguala el alto con .btn-secondary, que sí lo lleva:
   sin esto el botón del plan destacado queda 2 px más alto que los otros tres
   y la fila entera se ve descuadrada. */
.pr-plan .btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  border: 1px solid transparent;
}
.pr-plan .btn-secondary { border-color: var(--border-strong); }

.pr-siempre {
  margin-top: 22px;
  padding: 28px 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
}
.pr-siempre h3 { font-size: 17px; margin: 0 0 16px; }
.pr-siempre ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
@media (min-width: 820px) { .pr-siempre ul { grid-template-columns: 1fr 1fr; gap: 11px 40px; } }
.pr-siempre li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
}
.pr-siempre li strong { color: var(--text); font-weight: 500; }
.pr-siempre li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Los proyectos web. Pago único: por eso no llevan tope ni lista de tareas,
   solo la cifra y para quién es. */
.pr-obras { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .pr-obras { grid-template-columns: repeat(3, 1fr); } }
.pr-obra {
  padding: 28px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  transition: background 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pr-obra:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }
}
.pr-obra h3 { font-size: 19px; margin: 0 0 8px; }
.pr-obra .pr-para { margin-bottom: 18px; }
.pr-obra .pr-cifra { margin-bottom: 16px; }
.pr-detalle { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }

/* LOS CRÉDITOS DE UN NIVEL DE VOZ. Es la cifra que se luce en estas tres
   tarjetas: la línea con la que se mide una central telefónica, y la única de
   esta página que se cuenta por millones. Va en el cian de la casa y con
   tabular-nums para que las tres queden alineadas en columna aunque una tenga
   siete dígitos y otra seis. Debajo del precio y no encima: esta sigue siendo
   una página de precios, y todas las demás tarjetas empiezan por el dinero. */
.pr-nivel .pr-cifra { margin-bottom: 10px; }
.pr-creditos {
  /* La etiqueta va SIEMPRE debajo y no al lado: "1.500.000" es más ancho que
     "100.000" y, en una sola línea, la tercera tarjeta rompía el renglón y
     desalineaba las tres. En columna, las tres caen igual. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pr-creditos span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Lo que toda web lleva además de su precio: dominio a nombre del cliente y
   alojamiento. Una línea debajo de las tres tarjetas, no una cuarta tarjeta. */
.pr-pie { margin: 18px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); max-width: 72ch; }

/* La voz. Va aparte y sin cifra a propósito: la ficha le prohíbe al agente
   dar tarifa por minuto, y la web no puede decir lo que el chat no confirma. */
.pr-voz {
  display: grid;
  gap: 24px;
  align-items: center;
  padding: 34px 32px;
  border: 1px solid var(--accent-tint-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-tint-bg), transparent 60%), var(--bg-elev);
}
@media (min-width: 900px) { .pr-voz { grid-template-columns: 1fr auto; gap: 40px; } }
.pr-voz h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 14px; }
.pr-voz p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: var(--text-dim); max-width: 62ch; }
.pr-voz p:last-of-type { margin-bottom: 0; }
.pr-nota { font-size: 13.5px; color: var(--text-muted); }
.pr-nota strong { color: var(--accent); font-weight: 500; }
.pr-voz .btn { flex: none; }

/* Lo que se cobra aparte. Filas, no tarjetas: son tres líneas de una factura
   y leerlas en columna es leer una lista de precios, que es el punto. */
.pr-tabla {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
}
.pr-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 22px 26px;
}
.pr-linea + .pr-linea { border-top: 1px solid var(--border); }
.pr-linea h3 { font-size: 16px; margin: 0 0 6px; }
.pr-linea > div { flex: 1 1 320px; }
.pr-linea > div p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); max-width: 62ch; }
.pr-precio {
  flex: none;
  margin: 0;
  text-align: right;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pr-precio span {
  display: block;
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0;
  color: var(--text-muted);
}

/* En móvil la cifra cae debajo del texto: alineada a la derecha quedaría
   colgando sola en el borde, lejos de lo que nombra. */
@media (max-width: 640px) {
  .pr-precio { text-align: left; }
  .pr-linea { padding: 20px 22px; }
}

.pr-condiciones {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px 40px;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
}
@media (min-width: 700px) { .pr-condiciones { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .pr-condiciones { grid-template-columns: repeat(4, 1fr); } }
.pr-condiciones h3 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.pr-condiciones p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }

/* ═══════════════════════════════════════════════════════════════════════════
   COTIZADOR — /cotizador, 7 sep 2026. Cinco preguntas a la izquierda, el
   precio a la derecha y pegado mientras se baja. Los controles son los del
   sistema pintados con la paleta: radios que parecen opciones, interruptores,
   un deslizador con la pista rellena hasta el pulgar, un contador. Ninguna
   cifra vive aquí: las escribe cotizador.js con lib/precios.js adentro.
   ═══════════════════════════════════════════════════════════════════════════ */

.co-hero { padding-bottom: clamp(28px, 4vw, 44px); }
.co { padding: 0 0 clamp(64px, 8vw, 104px); }
.co-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
@media (min-width: 980px) {
  .co-rejilla { grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(40px, 5vw, 72px); }
  .co-panel { position: sticky; top: 92px; }
}

/* Las preguntas: sin cajas, separadas por una raya fina. */
.co-form { min-width: 0; }
.co-paso {
  min-inline-size: 0;
  margin: 0;
  padding: 30px 0;
  border: 0;
  border-top: 1px solid var(--border);
}
.co-paso:first-child { border-top: 0; padding-top: 4px; }
.co-pregunta {
  padding: 0;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 27px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
.co-ayuda {
  margin: 0 0 20px;
  max-width: 60ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
  text-wrap: pretty;
}
.co-pregunta + .co-opciones,
.co-pregunta + .co-canales,
.co-pregunta + .co-deslizador { margin-top: 18px; }

/* Opciones: un radio vestido de tarjeta chica. El input sigue ahí, para el
   teclado y el lector de pantalla; solo se saca de la vista. */
.co-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.co-opcion {
  position: relative;
  display: block;
  padding: 14px 40px 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.co-opcion input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  opacity: 0;
  pointer-events: none;
}
.co-opcion::after {
  content: "";
  position: absolute;
  top: 16px; right: 16px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.co-opcion:active { transform: scale(0.985); }
.co-opcion:has(:checked) {
  border-color: var(--accent-tint-border);
  background: var(--accent-tint-bg);
}
.co-opcion:has(:checked)::after {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3.5px var(--bg-card);
}
.co-opcion:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .co-opcion:hover { border-color: var(--border-strong); background: var(--bg-card-hover); }
  .co-opcion:has(:checked):hover { border-color: var(--accent-tint-border); background: var(--accent-tint-bg); }
}
.co-opcion-titulo {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.co-opcion-precio {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.co-opcion-nota {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-dim);
}

/* Canales: filas con interruptor. */
.co-canales { margin-top: 18px; border-top: 1px solid var(--border); }
.co-canal { border-bottom: 1px solid var(--border); }
.co-canal,
.co-canal label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.co-canal { padding: 0; }
.co-canal > .co-canal-texto,
.co-canal label { padding: 14px 0; }
.co-canal label { width: 100%; cursor: pointer; }
.co-canal-texto { min-width: 0; }
.co-canal-texto strong { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.co-canal-texto span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.co-incluido {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--accent-tint-border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.co-interruptor {
  position: relative;
  flex: none;
  width: 46px; height: 27px;
}
.co-interruptor input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.co-pista {
  display: block;
  width: 100%; height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-strong);
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.co-pista::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out);
}
.co-interruptor input:checked + .co-pista { background: var(--accent); border-color: var(--accent); }
.co-interruptor input:checked + .co-pista::after { transform: translateX(19px); background: #06141a; }
.co-interruptor input:active + .co-pista::after { transform: scaleX(1.12); transform-origin: left; }
.co-interruptor input:checked:active + .co-pista::after { transform: translateX(19px) scaleX(1.12); transform-origin: right; }
.co-interruptor input:focus-visible + .co-pista { outline: 2px solid var(--accent); outline-offset: 3px; }

/* El deslizador: la pista se rellena hasta donde está el pulgar (--p la pone
   cotizador.js). Las marcas de abajo son los topes de cada plan. */
.co-deslizador { margin-top: 18px; }
.co-lectura {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
}
.co-lectura output {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 48px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
}
.co-lectura span { font-size: 14px; color: var(--text-dim); }
.co-rango {
  --p: 50%;
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.co-rango:focus { outline: none; }
.co-rango::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) var(--p), rgba(255, 255, 255, 0.12) var(--p));
}
.co-rango::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--border-strong), 0 3px 10px rgba(0, 0, 0, 0.45);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.co-rango:active::-webkit-slider-thumb { transform: scale(1.18); }
.co-rango:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--border-strong), 0 0 0 5px var(--accent-glow); }
.co-rango::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.co-rango::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--accent); }
.co-rango::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--border-strong), 0 3px 10px rgba(0, 0, 0, 0.45);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.co-rango:active::-moz-range-thumb { transform: scale(1.18); }
.co-rango:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--border-strong), 0 0 0 5px var(--accent-glow); }
.co-marcas {
  position: relative;
  height: 18px;
  margin: 4px 11px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.co-marcas span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.co-marcas span::before {
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  width: 1px; height: 5px;
  background: var(--border-strong);
}

/* El contador de sistemas. */
.co-contador {
  display: flex;
  align-items: center;
  gap: 12px;
}
.co-contador button {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text);
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out), border-color 160ms var(--ease-out), opacity 160ms var(--ease-out);
}
.co-contador button svg { width: 16px; height: 16px; }
.co-contador button:active { transform: scale(0.92); }
.co-contador button:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .co-contador button:not(:disabled):hover { background: var(--bg-card-hover); border-color: var(--text-dim); }
}
.co-contador output {
  min-width: 2ch;
  text-align: center;
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.co-contador-nota { margin-left: 4px; font-size: 14px; color: var(--text-dim); }

/* El panel del precio. */
.co-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 28px 26px 26px;
}
.co-plan {
  margin: 0 0 6px;
  font-size: clamp(28px, 3vw, 34px);
  line-height: 1.1;
  text-wrap: balance;
}
.co-concepto {
  min-height: 1.5em;
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dim);
}
.co-cifras { display: grid; gap: 18px; margin: 0 0 20px; }
.co-cifra { display: grid; }
.co-monto {
  font-family: var(--font-display);
  font-size: clamp(42px, 4.6vw, 54px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.co-cifra.chica .co-monto { font-size: clamp(24px, 2.6vw, 30px); }
.co-periodo { margin-top: 6px; font-size: 13px; color: var(--text-dim); }
.co-desglose { margin-top: 2px; font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.co-incluye { margin: 0 0 16px; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.co-incluye > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.co-incluye > div + div { margin-top: 9px; }
.co-incluye dt { font-size: 12.5px; color: var(--text-dim); flex: none; }
.co-incluye dd {
  margin: 0;
  text-align: right;
  font-size: 13px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}
.co-aviso {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--accent-tint-border);
  border-radius: var(--radius-sm);
  background: var(--accent-tint-bg);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
}
.co-nota { margin: 0 0 20px; font-size: 12.5px; line-height: 1.55; color: var(--text-dim); text-wrap: pretty; }
.co-acciones { display: grid; gap: 10px; }
.co-acciones .btn { width: 100%; white-space: normal; text-align: center; }
.co-acciones .btn svg { width: 18px; height: 18px; flex: none; }

/* El formulario corto para recibir el PDF. */
.co-pedido { display: grid; gap: 12px; padding: 6px 0 4px; }
.co-campo label { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--text-dim); }
.co-campo label span { color: var(--text-dim); opacity: 0.8; }
.co-campo input {
  width: 100%;
  padding: 11px 13px;
  font-size: 15.5px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.co-campo input::placeholder { color: var(--text-muted); }
.co-campo input:focus { outline: none; border-color: var(--accent-tint-border); background: rgba(255, 255, 255, 0.05); }
.co-campo input[aria-invalid="true"] { border-color: #e8807d; }
.co-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.co-pedido .btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.co-estado { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.co-estado:empty { display: none; }
.co-estado.error { color: #f3a6a3; }
.co-estado.espera { color: var(--text-dim); }
.co-legal { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-dim); }
.co-legal a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
.co-legal a:hover { color: var(--accent); text-decoration-color: currentColor; }
.co-listo {
  padding: 14px 16px;
  border: 1px solid var(--accent-tint-border);
  border-radius: var(--radius);
  background: var(--accent-tint-bg);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
}
.co-listo strong { color: var(--text); font-weight: 500; }
.co-listo a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.co-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* En el celular el panel queda abajo de las preguntas; esta barra lleva la
   cifra encima del pulgar mientras el panel no esté a la vista. */
.co-barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: rgba(8, 9, 11, 0.86);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  transition: transform 280ms var(--ease-out), opacity 220ms var(--ease-out);
}
.co-barra.oculta { transform: translateY(110%); opacity: 0; pointer-events: none; }
.co-barra-cifras { min-width: 0; }
.co-barra-cifras strong {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.co-barra-cifras strong small { font-family: var(--font-sans); font-size: 12px; color: var(--text-dim); letter-spacing: 0; }
.co-barra-cifras > small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.co-barra .btn { flex: none; padding: 11px 20px; font-size: 14px; }
@media (min-width: 980px) { .co-barra { display: none; } }
body.co-pagina:has(.co-barra:not(.oculta)) .fab-whatsapp { bottom: calc(86px + env(safe-area-inset-bottom)); }
@media (min-width: 980px) { body.co-pagina .fab-whatsapp { bottom: 20px; } }

@media (max-width: 640px) {
  .co-opciones { grid-template-columns: 1fr; }
  .co-panel { padding: 24px 20px 22px; }
  .co-paso { padding: 26px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .co-opcion, .co-pista, .co-pista::after, .co-rango::-webkit-slider-thumb, .co-rango::-moz-range-thumb,
  .co-contador button, .co-barra { transition: none; }
}

/* /precios manda al cotizador desde abajo de los cuatro planes. */
.pr-al-cotizador { margin: 22px 0 0; font-size: 14.5px; color: var(--text-dim); text-align: center; }
.pr-al-cotizador a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-tint-border); }
.pr-al-cotizador a:hover { text-decoration-color: currentColor; }

/* ══════════════════════════════════════════════════════════════════════════
   /propuesta y /alta — las dos páginas privadas del cierre.
   Se llega con un enlace firmado; no llevan la navegación del sitio porque
   nadie "navega" hasta aquí: se lee un documento y se firma, o se llena un
   formulario. Misma piel que el cotizador (co-*), con lo que un documento
   necesita: cabecera con referencia, texto legible en columna, panel fijo
   con la cifra y la firma.
   ══════════════════════════════════════════════════════════════════════════ */
/* Varios bloques de estas páginas llevan display propio (grid, inline-flex); el
   atributo hidden tiene que ganarles, porque los estados se alternan con él. */
.pp-pagina [hidden] { display: none !important; }
.pp-barra {
  position: sticky; top: 0; z-index: 30;
  background: rgba(8, 9, 11, 0.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.pp-barra-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.pp-barra-acciones { display: flex; align-items: center; gap: 14px; }
.pp-idioma { font-size: 13.5px; color: var(--text-dim); text-decoration: none; padding: 6px 2px; }
.pp-idioma:hover { color: var(--accent); }
.pp-pdf { padding: 9px 16px; font-size: 13.5px; }
.pp-pdf svg { width: 16px; height: 16px; }
@media (max-width: 520px) { .pp-pdf span { display: none; } .pp-pdf { padding: 9px 12px; } }

.pp-estado { padding: clamp(72px, 12vw, 140px) 0; }
.pp-espera { margin: 0; color: var(--text-dim); font-size: 15px; }
.pp-nada { max-width: 560px; }
.pp-nada-titulo {
  margin: 0 0 14px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 44px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance;
}
.pp-nada .section-lead { margin: 0 0 24px; }
.pp-nada-acciones { display: flex; gap: 12px; flex-wrap: wrap; }

/* La cabecera del documento */
.pp-cab { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3.5vw, 40px); border-bottom: 1px solid var(--border); }
.pp-ref { margin: 0 0 14px; font-size: 12.5px; letter-spacing: 0.02em; color: var(--text-dim); }
.pp-mono { font-family: var(--font-mono); color: var(--accent); font-size: 12.5px; }
.pp-titulo {
  margin: 0 0 12px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4.8vw, 52px); line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance;
}
.pp-meta { margin: 0; font-size: 14.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.pp-sello {
  display: inline-block; margin-top: 16px; padding: 7px 12px;
  border: 1px solid var(--accent-tint-border); border-radius: 999px; background: var(--accent-tint-bg);
  font-size: 13px; color: var(--accent);
}

/* La rejilla: texto a la izquierda, panel a la derecha (y abajo en el celular). */
.pp-rejilla, .al-rejilla {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px);
  padding: clamp(28px, 4vw, 48px) var(--pad-x) clamp(96px, 12vw, 140px);
}
@media (min-width: 980px) {
  .pp-rejilla, .al-rejilla { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
  .pp-lado, .al-lado { position: sticky; top: 84px; }
}
.pp-cuerpo { max-width: 66ch; min-width: 0; }
.pp-seccion { padding: 26px 0; border-bottom: 1px solid var(--border); }
.pp-seccion:first-child { padding-top: 4px; }
.pp-seccion:last-child { border-bottom: 0; }
.pp-h2 {
  margin: 0 0 14px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 2.6vw, 27px); line-height: 1.15; letter-spacing: -0.015em;
}
.pp-concepto { margin: 0 0 12px; font-size: 17.5px; line-height: 1.45; color: var(--text); font-weight: 500; text-wrap: pretty; }
.pp-alcance p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.65; color: var(--text-dim); text-wrap: pretty; }
.pp-alcance p:last-child { margin-bottom: 0; }
.pp-lista, .pp-condiciones { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.pp-lista li {
  position: relative; padding-left: 22px; font-size: 15px; line-height: 1.55; color: var(--text-dim); text-wrap: pretty;
}
.pp-lista li::before {
  content: ""; position: absolute; left: 3px; top: 0.62em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-bg);
}
.pp-plazo { margin: 0 0 14px; font-size: 15.5px; color: var(--text); font-weight: 500; }
.pp-fases { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: fase; }
.pp-fases li {
  position: relative; padding-left: 38px; font-size: 14.5px; line-height: 1.55; color: var(--text-dim); text-wrap: pretty;
  counter-increment: fase;
}
.pp-fases li::before {
  content: counter(fase); position: absolute; left: 0; top: 0.1em;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--accent-tint-border); background: var(--accent-tint-bg);
  font-family: var(--font-mono); font-size: 12px; color: var(--accent);
}
.pp-fases strong { color: var(--text); font-weight: 500; }
.pp-condiciones li { padding-left: 14px; border-left: 2px solid var(--border-strong); font-size: 13.5px; line-height: 1.55; color: var(--text-dim); text-wrap: pretty; }
.pp-seccion .co-legal { margin-top: 16px; }

/* El panel: cifras fijas y la firma. */
.pp-panel { display: grid; gap: 20px; }
.pp-cifras { display: grid; gap: 16px; }
.pp-cifra { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255, 255, 255, 0.02); }
.pp-cifra-rotulo { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.pp-monto {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.2vw, 36px); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums;
}
.pp-cifra-nota { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.pp-alojamiento { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.pp-iva { margin: 0; font-size: 12px; color: var(--text-muted); }
.pp-form { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.pp-form-intro { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); text-wrap: pretty; }
.pp-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); cursor: pointer; }
.pp-check input { flex: none; margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); }
.pp-vencida, .pp-aceptada { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.pp-alta-hecha { margin: 0; font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.pp-dudas { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.pp-panel .btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.pp-cifra-fuerte { border-color: var(--accent-tint-border); background: var(--accent-tint-bg); }
.pp-ahorro { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--accent); }
.pp-modalidad .al-opciones { grid-template-columns: 1fr 1fr; }
.pp-ir, .pp-vencida .co-acciones { margin: 0; }

/* La aceptación en línea: el contrato a la vista y el formulario que lo firma.
   No es una barra lateral: ocupa el ancho entero porque aquí se lee, no se
   ojea. */
.pp-aceptacion { padding: clamp(40px, 6vw, 72px) 0 clamp(72px, 9vw, 110px); border-top: 1px solid var(--border); }
.pp-ac-cab { max-width: 66ch; margin-bottom: clamp(24px, 3.5vw, 36px); }
.pp-ac-paso { margin: 0 0 10px; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.pp-ac-titulo {
  margin: 0 0 10px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance;
}
.pp-ac-bajada { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-dim); text-wrap: pretty; }

/* Información previa: cuatro bloques cortos, cada uno con su numeral dentro. */
/* Dos columnas como mucho: en tres, cada línea se parte a los 38 caracteres y
   la información previa se vuelve justo lo que no debe ser, un muro. */
.pp-previo { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); margin-bottom: clamp(24px, 3.5vw, 36px); }
.pp-previo-bloque { display: grid; gap: 10px; align-content: start; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.pp-previo-titulo { margin: 0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.pp-previo-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pp-previo-lista li { position: relative; padding-left: 15px; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); text-wrap: pretty; }
.pp-previo-lista li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* El contrato entero. Cuerpo de lectura de verdad: si hay que entrecerrar los
   ojos para leer lo que se firma, la letra chica la pusimos nosotros. */
.pp-contrato { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elev); overflow: hidden; }
.pp-contrato-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, 0.015);
}
.pp-contrato-rotulo { margin: 0; font-size: 14.5px; font-weight: 500; color: var(--text); }
.pp-contrato-sello { margin: 3px 0 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.pp-contrato-texto { max-height: min(62vh, 620px); overflow-y: auto; overscroll-behavior: contain; padding: clamp(20px, 3vw, 32px); }
.pp-contrato-texto:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pp-c-titulo { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; color: var(--text); text-wrap: balance; }
.pp-c-bajada { margin: 0 0 20px; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
.pp-c-parrafo, .pp-c-numeral { margin: 0 0 12px; font-size: 14px; line-height: 1.68; color: var(--text-dim); text-wrap: pretty; max-width: 76ch; }
.pp-c-tenue { color: var(--text-muted); font-size: 13.5px; }
.pp-c-clausula { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }
.pp-c-ordinal { margin: 0 0 4px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.pp-c-h { margin: 0 0 12px; font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); }
.pp-c-sub { margin: 16px 0 10px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.pp-c-numeral { display: grid; grid-template-columns: 3.6em 1fr; gap: 0 10px; }
.pp-c-n { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); padding-top: 0.22em; font-variant-numeric: tabular-nums; }
.pp-c-incisos { margin: 0 0 14px; padding-left: 4.4em; display: grid; gap: 8px; list-style: none; counter-reset: inciso; }
.pp-c-incisos li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.62; color: var(--text-dim); text-wrap: pretty; max-width: 72ch; counter-increment: inciso; }
.pp-c-incisos li::before { content: counter(inciso, lower-alpha) ")"; position: absolute; left: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: 12px; }
.pp-c-tabla { margin: 0 0 14px; display: grid; grid-template-columns: minmax(140px, 15em) 1fr; gap: 1px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.pp-c-tabla dt, .pp-c-tabla dd { margin: 0; padding: 9px 13px; font-size: 13.5px; line-height: 1.5; background: rgba(255, 255, 255, 0.015); }
.pp-c-tabla dt { color: var(--text-muted); }
.pp-c-tabla dd { color: var(--text-dim); }
.pp-c-clausula strong, .pp-c-parrafo strong, .pp-c-numeral strong { color: var(--text); font-weight: 500; }
/* La casilla de papel del contrato («[ ]»): en pantalla no se marca, se lee. */
.pp-casilla-papel { display: inline-block; width: 11px; height: 11px; margin-right: 4px; vertical-align: -1px; border: 1px solid var(--border-strong); border-radius: 2px; }
@media (max-width: 620px) {
  .pp-c-numeral { grid-template-columns: 1fr; gap: 2px; }
  .pp-c-n { padding-top: 0; }
  .pp-c-incisos { padding-left: 0; }
  .pp-c-tabla { grid-template-columns: 1fr; }
  .pp-c-tabla dt { padding-bottom: 0; background: none; }
  .pp-c-tabla dd { padding-top: 2px; }
}

/* El formulario que firma: grupos con leyenda, nada de un muro de campos. */
.pp-ac-form { display: grid; gap: clamp(20px, 3vw, 30px); max-width: 780px; margin-top: clamp(28px, 4vw, 40px); }
.pp-ac-form .pp-form-intro { margin: 0; max-width: 66ch; }
.pp-grupo { margin: 0; padding: 0; border: 0; display: grid; gap: 12px; }
.pp-grupo-titulo { padding: 0; margin: 0 0 2px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.pp-campos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pp-campo-ancho { grid-column: 1 / -1; }
.pp-opcion-apagada { opacity: 0.55; cursor: not-allowed; }
.pp-opcion-apagada:hover { border-color: var(--border); background: var(--bg-card); }
.pp-casillas { display: grid; gap: 14px; }
.pp-grupo-casillas { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.pp-opcional { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }
/* El mismo número, otra vez, pegado a las casillas: nadie marca «acepto» sin
   tener a la vista lo que se le va a cobrar. */
.pp-resumen { display: grid; gap: 8px; padding: 16px 20px; border: 1px solid var(--accent-tint-border); border-radius: var(--radius); background: var(--accent-tint-bg); }
.pp-resumen-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--text-dim); }
.pp-resumen-fila strong { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.pp-resumen-nota { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.pp-enviar { display: grid; gap: 12px; justify-items: start; }
.pp-enviar .btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.pp-enviar .co-legal { margin: 0; max-width: 62ch; }
/* El código que llega al correo. Es parte del formulario, no una ventana
   encima: quien lo escribe no se ha ido a ningún lado, solo le falta esto.
   Las cifras van en mono y separadas, como se leen en el correo. */
.pp-codigo {
  display: grid; gap: 14px; padding: 18px 20px;
  border: 1px solid var(--accent-tint-border); border-radius: var(--radius); background: var(--accent-tint-bg);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
@starting-style { .pp-codigo { opacity: 0; transform: translateY(6px); } }
.pp-codigo-intro { margin: 0; max-width: 62ch; font-size: 14px; line-height: 1.55; color: var(--text-dim); text-wrap: pretty; }
.pp-codigo-intro strong { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.pp-codigo-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 20px; }
.pp-codigo-campo { flex: 0 1 230px; }
.pp-codigo-campo input {
  font-family: var(--font-mono); font-size: 22px; letter-spacing: 0.3em; font-variant-numeric: tabular-nums;
  padding: 9px 14px;
}
.pp-codigo-otro {
  padding: 10px 0; font: inherit; font-size: 13.5px; color: var(--accent); cursor: pointer;
  background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-tint-border);
  transition: text-decoration-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.pp-codigo-otro:hover { text-decoration-color: currentColor; }
.pp-codigo-otro:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.pp-codigo-otro:disabled { color: var(--text-muted); cursor: progress; text-decoration-color: transparent; }
@media (prefers-reduced-motion: reduce) { .pp-codigo { transition: none; } }
.pp-aceptacion .pp-aceptada { max-width: 780px; margin-top: clamp(20px, 3vw, 28px); }

/* La barra del celular: la cifra y el botón encima del pulgar. */
.pp-movil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: rgba(8, 9, 11, 0.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  transition: transform 280ms var(--ease-out), opacity 220ms var(--ease-out);
}
.pp-movil.oculta { transform: translateY(110%); opacity: 0; pointer-events: none; }
.pp-movil-cifra strong {
  display: block; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.05;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.pp-movil-cifra small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-dim); }
.pp-movil .btn { flex: none; padding: 11px 20px; font-size: 14px; }
@media (min-width: 980px) { .pp-movil { display: none; } }
body.pp-pagina:has(.pp-movil:not(.oculta)) .fab-whatsapp { bottom: calc(86px + env(safe-area-inset-bottom)); }
@media (min-width: 980px) { body.pp-pagina .fab-whatsapp { bottom: 20px; } }

/* /alta: el formulario largo, por grupos. */
.al-form { min-width: 0; max-width: 640px; }
.al-paso { display: grid; gap: 18px; }
.al-paso .co-pregunta { margin-bottom: 2px; }
.al-campo textarea {
  width: 100%; padding: 11px 13px; font-size: 15.5px; line-height: 1.5; color: var(--text); resize: vertical; min-height: 80px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 10px;
  transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.al-campo textarea:focus { outline: none; border-color: var(--accent-tint-border); background: rgba(255, 255, 255, 0.05); }
.al-campo textarea[aria-invalid="true"] { border-color: #e8807d; }
.al-rotulo { display: block; margin-bottom: 8px; font-size: 12.5px; color: var(--text-dim); }
.al-opciones { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.al-opcion { padding: 12px 14px; }
.al-opcion .co-opcion-titulo { font-size: 14.5px; }
.al-ayuda { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.al-campo.al-mal label, .al-campo.al-mal .al-rotulo { color: #f3a6a3; }
.al-panel { display: grid; gap: 14px; }
.al-panel-titulo { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: -0.015em; }
.al-panel-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.al-panel-lista li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.al-panel-lista li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.al-guardado { margin: 0; min-height: 1.2em; font-size: 12.5px; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) { .pp-movil { transition: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   /conectar — donde un negocio conecta SU página de Facebook y su Instagram.
   Es una pantalla de TAREA, no un folleto: lo que manda es saber en qué paso
   estás, qué te van a pedir y qué quedó activo. La marca vive en los detalles
   —el cian de los pasos, la tipografía de los títulos—, no en efectos.
   Comparte la piel de /propuesta y /alta (pp-*, co-*) y añade lo suyo.
   ══════════════════════════════════════════════════════════════════════════ */
.cx-vista [hidden] { display: none !important; }
.cx-main { padding: clamp(28px, 5vw, 56px) 0 clamp(96px, 12vw, 140px); }

/* El riel de pasos. Encode el estado de verdad: hecho, actual, pendiente. */
.cx-pasos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin: 0 0 clamp(28px, 4vw, 44px); padding: 0; list-style: none;
  font-size: 13.5px; color: var(--text-muted);
}
.cx-paso { display: flex; align-items: center; gap: 9px; }
.cx-paso + .cx-paso::before {
  content: ""; width: 22px; height: 1px; margin-right: 13px; background: var(--border-strong);
}
.cx-paso-n {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border-strong); font-size: 11.5px; font-variant-numeric: tabular-nums;
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.cx-paso.es-actual { color: var(--text); }
.cx-paso.es-actual .cx-paso-n { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-bg); }
.cx-paso.es-hecho { color: var(--text-dim); }
.cx-paso.es-hecho .cx-paso-n { background: var(--accent); border-color: var(--accent); color: #06141a; }
@media (max-width: 620px) {
  .cx-paso { display: none; }
  .cx-paso.es-actual { display: flex; }
  .cx-paso + .cx-paso::before { display: none; }
}

/* Dos columnas: la decisión a la izquierda, lo que hay que saber a la derecha. */
.cx-bloque { display: grid; gap: clamp(30px, 5vw, 64px); align-items: start; }
@media (min-width: 940px) { .cx-bloque { grid-template-columns: minmax(0, 1fr) 380px; } }
.cx-bloque-solo { display: block; }
.cx-columna { min-width: 0; max-width: 680px; }

.cx-titulo {
  margin: 0 0 14px; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1.07; letter-spacing: -0.025em; text-wrap: balance;
}
.cx-lead { margin: 0 0 30px; max-width: 58ch; }
.cx-accion { display: grid; gap: 12px; justify-items: start; }
.cx-nota { margin: 26px 0 0; max-width: 54ch; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }

/* El botón de Facebook lleva el azul de Facebook. Es el único sitio del sitio
   donde una marca ajena manda: un botón cian de "entrar con Facebook" hace
   dudar de si es el de verdad, y dudar aquí es no pulsar. */
.cx-btn-fb { background: var(--facebook); color: #fff; font-weight: 600; padding: 14px 24px; }
.cx-btn-fb svg { width: 19px; height: 19px; }
.cx-btn-fb:disabled { opacity: 0.55; cursor: default; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .cx-btn-fb:hover:not(:disabled) { background: #3b8bf5; box-shadow: 0 8px 28px rgba(24, 119, 242, 0.28); }
  .cx-btn-fb:disabled:hover { transform: none; box-shadow: none; background: var(--facebook); }
}

/* La columna de la derecha: qué te van a pedir y qué no hacemos. */
.cx-lado { display: grid; gap: 22px; min-width: 0; }
.cx-lado-titulo { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 21px; letter-spacing: -0.015em; }
.cx-permisos { display: grid; gap: 16px; }
.cx-permiso { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; align-items: start; }
.cx-permiso-icono {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent-tint-bg); border: 1px solid var(--accent-tint-border); color: var(--accent);
}
.cx-permiso-icono svg { width: 17px; height: 17px; }
.cx-permiso-que { margin: 2px 0 3px; font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.cx-permiso-por { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-dim); text-wrap: pretty; }

.cx-limites {
  padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card);
}
.cx-limites-titulo { margin: 0 0 10px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.cx-limites-lista { display: grid; gap: 7px; }
.cx-limites-lista li { position: relative; padding-left: 17px; font-size: 13px; line-height: 1.5; color: var(--text-dim); text-wrap: pretty; }
.cx-limites-lista li::before {
  content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 1px; background: var(--text-muted);
}

/* Paso 2: las páginas. Filas, no tarjetas: se comparan de un vistazo. */
.cx-paginas { display: grid; gap: 10px; margin: 0 0 18px; }
.cx-pagina {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 15px; align-items: center;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card);
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cx-pagina:not(.es-bloqueada):hover { border-color: var(--border-strong); background: var(--bg-card-hover); }
}
.cx-pagina.es-bloqueada { opacity: 0.62; }
.cx-pagina-foto {
  display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden;
  border-radius: 11px; background: rgba(255, 255, 255, 0.06); color: var(--text-dim);
  font-family: var(--font-display); font-size: 19px;
}
.cx-pagina-foto img { width: 44px; height: 44px; object-fit: cover; }
.cx-pagina-texto { min-width: 0; }
.cx-pagina-nombre { margin: 0 0 3px; font-size: 15.5px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.cx-pagina-meta { margin: 0; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cx-pagina-aviso { margin: 5px 0 0; font-size: 12.5px; color: #f3a6a3; }
.cx-pagina-btn { padding: 9px 18px; font-size: 14px; }
.cx-pagina-btn:disabled { opacity: 0.6; cursor: default; }
.cx-chip {
  display: inline-block; margin-top: 7px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--accent-tint-border); background: var(--accent-tint-bg);
  font-size: 11.5px; color: var(--accent);
}
@media (max-width: 560px) {
  .cx-pagina { grid-template-columns: 44px minmax(0, 1fr); }
  .cx-pagina-btn { grid-column: 1 / -1; justify-self: stretch; }
}

/* El botón callado: cambiar de cuenta, desconectar. */
.cx-volver {
  padding: 8px 0; font-size: 13.5px; color: var(--text-dim);
  border-bottom: 1px solid transparent; transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.cx-volver:hover { color: var(--text); border-bottom-color: var(--border-strong); }
.cx-volver.es-confirmando { color: #f3a6a3; border-bottom-color: rgba(243, 166, 163, 0.5); }
.cx-volver:disabled { opacity: 0.5; cursor: default; }

/* Paso 3: la ficha de lo conectado. */
.cx-ficha {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 18px 20px; margin: 0 0 16px;
  border: 1px solid var(--accent-tint-border); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--accent-tint-bg), rgba(255, 255, 255, 0.015));
}
.cx-ficha-foto {
  display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden;
  border-radius: 14px; background: rgba(255, 255, 255, 0.06); color: var(--text-dim);
  font-family: var(--font-display); font-size: 23px;
}
.cx-ficha-foto img { width: 56px; height: 56px; object-fit: cover; }
.cx-ficha-nombre { margin: 0 0 4px; font-size: 18px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.cx-ficha-meta { margin: 0; font-size: 13px; color: var(--text-dim); font-variant-numeric: tabular-nums; text-wrap: pretty; }

.cx-activo { padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); }
.cx-activo-titulo { margin: 0 0 12px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.cx-activo-lista { display: grid; gap: 9px; }
.cx-activo-lista li { display: flex; align-items: baseline; gap: 11px; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.cx-tic {
  flex: none; width: 13px; height: 7px; margin-top: 1px;
  border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent);
  transform: rotate(-45deg); transform-origin: center;
}
.cx-activo-nota { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }
.cx-cierre { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 26px; }

/* ── LOS SITIOS DE MUESTRA ────────────────────────────────────────────────────
   Cada tarjeta es la portada del sitio al que lleva: su foto, su marca y su
   titular con su tipografía, bajo un velo del color del sitio. El botón es
   blanco en todas, con el texto del color del velo. Es la única parte de estas páginas que no habla con la voz de
   Intellectum, y a propósito: la muestra tiene que verse como lo que es, otro
   sitio. El pie de la tarjeta sí vuelve a la casa y dice qué es, qué trae y que
   es una demostración. Las variables --ms-* las pone generar-servicios.mjs en
   cada tarjeta. */
.ms-rejilla { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .ms-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }

.ms-tarj > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 200ms ease, transform 160ms var(--ease-out);
}
.ms-tarj > a:active { transform: scale(0.985); }
.ms-tarj > a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ms-portada {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  aspect-ratio: 4 / 3;
  padding: clamp(18px, 2.4vw, 26px);
  overflow: hidden;
  background: var(--ms-velo);
  color: #fff;
}
@media (min-width: 720px) { .ms-portada { aspect-ratio: 16 / 11; } }
/* El velo: oscurece arriba lo justo para la marca y abajo lo suficiente para
   el titular, sin apagar la foto en el medio. */
.ms-portada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ms-velo) 70%, transparent) 0%, transparent 32%),
    linear-gradient(0deg, color-mix(in srgb, var(--ms-velo) 96%, transparent) 0%, color-mix(in srgb, var(--ms-velo) 72%, transparent) 40%, transparent 74%);
}
.ms-foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ms-encuadre);
  transition: transform 700ms var(--ease-out);
}
.ms-marca {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ms-display);
  font-size: 15px;
  font-weight: var(--ms-peso);
  line-height: 1.2;
}
.ms-marca svg { flex: none; width: 24px; height: 24px; }
.ms-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ms-titular {
  max-width: 16ch;
  font-family: var(--ms-display);
  font-size: calc(clamp(27px, 3.1vw, 38px) * var(--ms-escala, 1));
  font-weight: var(--ms-peso);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.ms-mayus .ms-titular, .ms-mayus .ms-marca { text-transform: uppercase; letter-spacing: 0.005em; }
/* Transparente, con borde y texto blancos: el borde de 1,5 px descuenta del
   relleno para que el botón mida lo mismo que cuando era blanco. */
.ms-boton {
  display: inline-flex;
  padding: 7.5px 13.5px;
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  border-radius: var(--ms-radio);
  background: transparent;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 200ms ease;
}

.ms-pie { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 18px 22px 20px; }
.ms-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.ms-sector { color: var(--text); font-size: 17px; font-weight: 500; line-height: 1.3; }
.ms-chip {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.4;
}
.ms-nota { color: var(--text-dim); font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.ms-ir {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 12px;
  color: var(--accent-bright);
  font-size: 14px;
  font-weight: 500;
}
.ms-ir svg { width: 15px; height: 15px; transition: transform 200ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .ms-tarj > a:hover { border-color: var(--accent-tint-border); }
  .ms-tarj > a:hover .ms-foto { transform: scale(1.045); }
  .ms-tarj > a:hover .ms-boton { background: rgba(255, 255, 255, 0.12); }
  .ms-tarj > a:hover .ms-ir svg { transform: translateX(3px); }
}

/* ── EL PILOTO DE SEGUIMIENTO ─────────────────────────────────────────────────
   Lo que hay que enseñar aquí no es un mensaje bonito: es el silencio. Una
   captura no puede mostrar que pasaron tres horas y nadie contestó, así que la
   conversación viene entera y el visitante adelanta el reloj.

   Sin JavaScript se lee de corrido, como una transcripción, y la ficha muestra
   el estado final. Con JavaScript aparece el botón, los actos se esconden y el
   panel va soltando uno por uno. Las burbujas son las mismas de las demos
   (.demo-burbuja); aquí solo se añaden el reloj, el corte de silencio, la línea
   del sistema y el riel de estados. */
.pil {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 960px) {
  .pil {
    /* Tope de ancho: en una pantalla grande el panel se estiraba a 800 px y las
       burbujas salían con renglones de periódico. Un chat se lee angosto. */
    max-width: 1000px;
    grid-template-columns: minmax(0, 1fr) 290px;
    column-gap: 22px;
    grid-template-areas:
      "panel ficha"
      "mando ficha"
      "nota  nota";
  }
  .pil-panel { grid-area: panel; }
  .pil-ficha { grid-area: ficha; }
  .pil-mando { grid-area: mando; }
  .pil-nota { grid-area: nota; }
}

.pil-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  overflow: hidden;
}
.pil-rotulo {
  margin: 0;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Alto tope, no alto fijo: con el guion completo (sin JS) el hilo scrollea por
   dentro, y con JS el panel crece con los actos sin dar saltos de página. */
.pil-hilo {
  margin: 0;
  padding: 16px 16px 18px;
  list-style: none;
  max-height: 60vh;
  min-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pil-acto {
  display: grid;
  gap: 9px;
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.pil-acto.pil-entrando { opacity: 0; transform: translateY(10px); }
/* Un `display` de autor le gana al display:none que trae [hidden] del
   navegador: sin esta línea el botón esconde los actos y no se esconden. */
.pil-acto[hidden] { display: none; }
/* Con un solo acto a la vista el hilo se apila contra el fondo, como cualquier
   chat que acaba de empezar; igual que en .demo-hilo. */
.pil-hilo > .pil-acto:first-child { margin-top: auto; }
.pil-mensajes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }

/* El reloj: una hora con dos hilos a los lados, como el separador de día de
   cualquier chat. Es lo que convierte una lista de mensajes en una historia. */
.pil-reloj {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pil-reloj::before,
.pil-reloj::after { content: ""; height: 1px; background: var(--border); flex: 1 1 auto; }
.pil-reloj span { flex: 0 0 auto; }

/* El silencio. No es una burbuja porque nadie lo escribió: es el hueco entre
   dos mensajes, dicho con una línea de puntos y la cuenta del tiempo. */
.pil-corte {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border-left: 1px dashed var(--border-strong);
  margin-left: 16px;
  padding: 6px 0 6px 16px;
}
.pil-corte span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  font-style: italic;
  text-wrap: pretty;
}
/* La voz del producto explicándose, no la del agente ni la de la persona. */
.pil-sistema {
  border: 1px dashed var(--accent-tint-border);
  border-radius: 12px;
  background: var(--accent-tint-bg);
  padding: 9px 13px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim);
  text-wrap: pretty;
}

/* EL PILOTO DE AUTOMATIZACIÓN. Ahí no se mira una conversación sino un flujo
   trabajando, así que el hilo suma tres piezas que no son burbujas. El correo
   que entra es una tarjeta, porque es un documento y no un mensaje. Cada paso
   del flujo es una fila con su verbo en mono, como una línea de bitácora. Y la
   alerta es el mismo paso teñido de coral: el único momento en que el flujo
   no hace nada, que es justo lo que hay que ver. */
.pil-correo {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 86%;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--bg-card);
  font-size: 13px;
  line-height: 1.45;
}
.pil-correo svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.pil-correo > span { display: grid; gap: 1px; min-width: 0; }
.pil-correo strong { color: var(--text); font-weight: 500; }
.pil-correo > span > span { color: var(--text-dim); overflow-wrap: anywhere; }

.pil-flujo {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 8px 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  text-wrap: pretty;
}
.pil-flujo b {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.pil-alerta {
  border: 1px dashed var(--attention-tint-border);
  background: var(--attention-tint-bg);
  color: var(--text);
}
.pil-alerta b { color: var(--attention); }
/* En un teléfono la columna del verbo le robaba al texto un tercio del ancho:
   ahí el verbo va encima, como el rótulo de una línea de bitácora. */
@media (max-width: 560px) {
  .pil-flujo { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* La ficha: la misma tarjeta de las demos, más el riel de estados. */
.pil-ficha {
  padding: 13px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.05), transparent 60%),
    var(--bg-card);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.7);
  font-size: 13px;
  line-height: 1.45;
}
.pil-ficha-rotulo {
  margin: 14px 0 7px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pil-pasos { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.pil-paso {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text-muted);
  transition: color 240ms var(--ease-out);
}
.pil-paso::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  transition: background 240ms var(--ease-out), border-color 240ms var(--ease-out),
              box-shadow 240ms var(--ease-out);
}
.pil-paso-hecho { color: var(--text-dim); }
.pil-paso-hecho::before { background: var(--text-muted); border-color: var(--text-muted); }
.pil-paso-ahora { color: var(--text); }
.pil-paso-ahora::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint-bg);
}
.pil-agente {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
}
.pil-ficha .demo-ficha-pastillas:empty { display: none; }
.pil-ficha .demo-ficha-detalle:empty { display: none; }
/* Con el reloj corriendo, la ficha cambia sola: el aviso de que aquí está el
   otro lado del producto. Sin JS no hay nada que avisar. */
.pil-vivo .pil-ficha-cambia {
  animation: pilLatido 520ms var(--ease-out);
}
@keyframes pilLatido {
  from { border-color: var(--accent-tint-border); }
  to { border-color: var(--border-strong); }
}

/* El mando. Un solo botón que dice lo que va a hacer —pausar, seguir, volver a
   verlo— y una barra con una casilla por acto: la del acto en pantalla se llena
   en el tiempo que dura, así se ve cuánto falta sin poner un cronómetro. */
.pil-mando { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Un `display` de autor le gana al display:none que trae [hidden], y .btn viene
   con display:inline-flex: sin esta línea, una página sin JavaScript enseñaría
   un botón muerto y una barra vacía. Es el mismo caso que .pil-acto[hidden]. */
.pil-boton[hidden], .pil-barra[hidden] { display: none; }
.pil-barra {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 130px;
  max-width: 250px;
}
.pil-barra li {
  flex: 1 1 0;
  height: 3px;
  border-radius: 999px;
  background: var(--border-strong);
  overflow: hidden;
}
.pil-barra i { display: block; height: 100%; width: 0; background: var(--accent); }

.pil-nota { margin: 0; max-width: 780px; }

/* Con «menos movimiento» el guion ni siquiera arranca: la página se queda con
   la conversación entera a la vista, que es lo que ya trae el HTML. Aquí solo
   se apaga lo que igual podría moverse. */
@media (prefers-reduced-motion: reduce) {
  .pil-paso, .pil-paso::before { transition: none; }
  .pil-vivo .pil-ficha-cambia { animation: none; }
  .pil-barra i { transition: none !important; }
  .pil-acto { transition: none; }
}