/* ==========================================================================
   Korvian Digital S.L. — Hoja de estilos principal
   Criterio: sobriedad. Fondo neutro, tipografía apretada, líneas de 1px,
   un único acento de marca usado con cuentagotas. Sin degradados de relleno,
   sin resplandores, sin movimiento decorativo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens de diseño
   -------------------------------------------------------------------------- */
:root {
  /* Marca — el acento se reserva para enlaces y detalles puntuales */
  --accent: #818cf8;
  --accent-soft: #a5b4fc;
  --accent-dim: rgba(129, 140, 248, 0.14);

  /* Fondos: gris muy oscuro con una pizca de azul, no negro puro.
     El negro absoluto endurece los bordes y hace que los degradados
     formen bandas; este escalón se lee más caro y cansa menos la vista. */
  --bg: #0e1014;
  --bg-2: #14161b;
  --surface: #191b21;
  --surface-2: #1f2229;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.17);

  /* Texto */
  --text: #f4f4f5;
  --text-soft: #a9adb6;
  --muted: #888c95;

  /* Tipografía */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Medidas */
  --wrap: 1080px;
  --wrap-narrow: 680px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Sombra: casi imperceptible, sólo para separar del fondo */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

  /* Movimiento */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --stagger: 70ms;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

/* El atributo `hidden` sólo vale `display: none` en la hoja del navegador, y
   cualquier `display` de aquí le gana. Pasaba con el bloque de WhatsApp: como
   `.contact-item` es `flex` y `.footer-col a` es `inline-block`, el enlace
   —que todavía no lleva número— se veía en el pie de todas las páginas y en
   la columna de contacto. main.js quita el atributo cuando hay número, así
   que este `!important` no estorba cuando se rellene CONFIG.whatsapp. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-soft);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg { max-width: 100%; height: auto; display: block; }

a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.15s var(--ease), opacity 0.15s var(--ease);
}
a:hover { color: #fff; }

h1, h2, h3, h4 {
  margin: 0 0 0.55em;
  color: var(--text);
  line-height: 1.12;
  font-weight: 600;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 4.6vw, 3.3rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -0.03em; }
h3 { font-size: 1.05rem; letter-spacing: -0.015em; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: 0.4em; }

strong { color: var(--text); font-weight: 600; }

::selection { background: rgba(129, 140, 248, 0.3); color: #fff; }

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

/* --------------------------------------------------------------------------
   3. Utilidades de layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

.narrow { max-width: var(--wrap-narrow); margin-inline: auto; }

.section { padding: clamp(64px, 8vw, 108px) 0; position: relative; }
.section--tight { padding: clamp(52px, 6vw, 76px) 0; }
.section--alt { background: var(--bg-2); border-block: 1px solid var(--border); }

.center { text-align: center; }

/* Frase destacada del titular: el degradado de marca, desplazándose muy despacio */
.grad-text {
  background: linear-gradient(100deg, #60a5fa 0%, #818cf8 42%, #c084fc 78%, #60a5fa 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 11s ease-in-out infinite;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--surface-2);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 0 0 var(--radius) 0;
  border: 1px solid var(--border-strong);
}
.skip-link:focus { left: 0; }

/* Cabecera de sección */
.sec-head { margin-bottom: clamp(36px, 4.5vw, 56px); }
.sec-head p { max-width: 60ch; }
.sec-head.center p { margin-inline: auto; }

/* Antetítulo: etiqueta discreta en monoespaciada, sin adornos */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 14px;
}

.lead { font-size: clamp(1.02rem, 1.3vw, 1.12rem); color: var(--text-soft); }

/* --------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease),
    color 0.15s var(--ease);
}

.btn--primary {
  background: #fafafa;
  color: #0a0a0b;
}
.btn--primary:hover { background: #fff; color: #0a0a0b; }

.btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }

.btn--sm { height: 34px; padding: 0 14px; font-size: 0.84rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.center .btn-row { justify-content: center; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-soft);
}
.arrow-link:hover { color: var(--text); }
.arrow-link svg { transition: transform 0.15s var(--ease); }
.arrow-link:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Cabecera / navegación
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
}

/* Capa de cristal.
   El desenfoque va en un pseudo-elemento y no en la cabecera por dos
   motivos: se puede prolongar 20px por debajo y deshilacharlo ahí con una
   máscara, en vez de cortarlo con un filo de 1px —que es lo que hacía que
   en el móvil pareciera una franja negra pegada encima del contenido—, y
   deja libre el borde inferior para la barra de progreso. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -20px 0;
  z-index: -1;
  /* Se prolonga por debajo de la cabecera: sin esto se tragaría las
     pulsaciones de los primeros 20px del contenido. */
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(14, 16, 20, 0.62), rgba(14, 16, 20, 0.34));
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  transition: background 0.35s var(--ease);
}
.site-header.is-scrolled::before {
  background: linear-gradient(to bottom, rgba(14, 16, 20, 0.8), rgba(14, 16, 20, 0.5));
}

/* En el móvil se ve más contenido a través: la pantalla es pequeña y una
   barra opaca se come una franja entera de la página. */
@media (max-width: 900px) {
  .site-header::before {
    inset: 0 0 -16px 0;
    background: linear-gradient(to bottom, rgba(14, 16, 20, 0.48), rgba(14, 16, 20, 0.24));
    backdrop-filter: blur(18px) saturate(165%);
    -webkit-backdrop-filter: blur(18px) saturate(165%);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
  }
  .site-header.is-scrolled::before {
    background: linear-gradient(to bottom, rgba(14, 16, 20, 0.66), rgba(14, 16, 20, 0.38));
  }
}

/* Con el menú desplegado sí se vuelve opaca: ahí lo que manda es leer */
.site-header:has(.nav-toggle[aria-expanded="true"])::before {
  inset: 0;
  background: rgba(14, 16, 20, 0.97);
  -webkit-mask-image: none;
  mask-image: none;
}

/* Sin desenfoque de fondo no hay cristal que valga: se pone opaca y punto */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before {
    background: rgba(14, 16, 20, 0.94);
  }
  .site-header.is-scrolled::before {
    background: rgba(14, 16, 20, 0.97);
  }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 62px;
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 30px; width: auto; }
.brand:hover { opacity: 0.8; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: block;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 450;
}
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--text); }

.nav-cta { display: flex; align-items: center; gap: 10px; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 7px;
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.05); }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-menu {
    position: fixed;
    inset: 62px 0 auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 22px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    max-height: calc(100vh - 62px);
    overflow-y: auto;
  }
  .nav-menu.is-open { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { padding: 14px 0; font-size: 0.98rem; border-bottom: 1px solid var(--border); }
  .nav-menu .nav-cta { margin-top: 18px; }
  .nav-menu .nav-cta .btn { width: 100%; height: 40px; font-size: 0.9rem; }
}
@media (min-width: 901px) {
  .nav-menu { display: flex !important; align-items: center; gap: 28px; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: clamp(64px, 9vw, 116px) 0 clamp(56px, 7vw, 92px);
  overflow: hidden;
}
.hero > .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  margin-bottom: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 0.78rem;
  font-weight: 450;
  color: var(--text-soft);
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
}

.hero h1 { margin-bottom: 20px; }
.hero .lead { max-width: 52ch; margin-bottom: 30px; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 0.86rem;
  color: var(--muted);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta svg { color: var(--muted); flex-shrink: 0; }

/* Tarjeta de código del hero */
.hero-visual { position: relative; }

.code-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.code-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.code-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.code-bar span {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
}
.code-body {
  padding: 18px;
  font-family: var(--font-mono);
  font-size: 0.79rem;
  line-height: 1.8;
  color: var(--text-soft);
  overflow-x: auto;
}
.code-body pre { margin: 0; }
.tok-key { color: var(--accent-soft); }
.tok-str { color: #93c4a5; }
.tok-fn { color: #d7dae0; }
.tok-com { color: #5b5f68; }
.tok-num { color: #c9b48a; }

/* --------------------------------------------------------------------------
   7. Tira de capacidades
   -------------------------------------------------------------------------- */
.strip {
  border-block: 1px solid var(--border);
  padding: 18px 0;
  overflow: hidden;
}
.strip-inner {
  display: flex;
  align-items: center;
  gap: 28px;
}
.strip-label {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
}
@media (max-width: 640px) { .strip-label { display: none; } }

/* Cinta continua: el contenido se duplica por JS y se desplaza sin costuras */
.marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.strip:hover .marquee-track { animation-play-state: paused; }
.marquee-track b {
  font-size: 0.86rem;
  font-weight: 450;
  color: var(--text-soft);
  white-space: nowrap;
}
.marquee-track b::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-left: 34px;
  border-radius: 50%;
  background: var(--border-strong);
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   8. Rejillas y tarjetas
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Tarjetas: sin elevación ni degradados. Sólo el filo de 1px las separa. */
.card {
  position: relative;
  padding: 26px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
  height: 100%;
}
.card:hover { border-color: var(--border-strong); background: var(--surface-2); }

.card h3 { margin-bottom: 8px; }
.card p { font-size: 0.92rem; margin-bottom: 0; }

.card-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-soft);
}
.card-icon svg { width: 20px; height: 20px; }

.card-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
}
.card-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
  color: var(--muted);
}
.card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 5px;
  height: 1px;
  background: var(--muted);
}

.card-foot { margin-top: 20px; }

/* Tarjeta destacada: se distingue por el borde, no por el color de fondo */
.card--feature {
  grid-column: span 2;
  background: var(--surface-2);
  border-color: var(--border-strong);
}
@media (max-width: 700px) { .card--feature { grid-column: span 1; } }

.tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 450;
}

/* --------------------------------------------------------------------------
   9. Proceso
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--border);
}

.step {
  padding: 26px 22px 26px 0;
  border-bottom: 1px solid var(--border);
}
.step-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.step h3 { font-size: 1rem; margin-bottom: 6px; }
.step p { font-size: 0.88rem; margin: 0; color: var(--muted); }

/* --------------------------------------------------------------------------
   10. Bloque de dos columnas (split)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}

.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li {
  padding: 18px 0;
  margin: 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--muted);
}
.check-list li:first-child { padding-top: 0; }
.check-list li:last-child { border-bottom: 0; }
.check-list strong { display: block; margin-bottom: 3px; color: var(--text); font-weight: 550; }

/* Panel de datos / stats */
.panel {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.panel h3 { font-size: 1rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 24px 20px; }
.stat b {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 4px;
}
.stat span { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--border); }

.faq details { border-bottom: 1px solid var(--border); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.97rem;
  color: var(--text);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: #fff; }
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq .faq-body { padding: 0 0 22px; max-width: 66ch; }
.faq .faq-body p { font-size: 0.92rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   12. CTA final
   -------------------------------------------------------------------------- */
.cta {
  padding: clamp(48px, 6vw, 72px) clamp(24px, 4vw, 48px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
}
.cta h2 { margin-bottom: 14px; }
.cta p { max-width: 52ch; margin-inline: auto; color: var(--muted); }
.cta .btn-row { margin-top: 28px; }

/* --------------------------------------------------------------------------
   13. Formulario
   -------------------------------------------------------------------------- */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; } }

.form-card {
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text);
}
.req { color: var(--muted); }
.hint { display: block; margin-top: 6px; font-size: 0.78rem; color: var(--muted); }

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888c95' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;
}
select option { background: #191b21; color: var(--text); }

input::placeholder,
textarea::placeholder { color: #5b5f68; }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] { border-color: #f87171; }
input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.16); }

.error-msg {
  display: none;
  margin-top: 6px;
  font-size: 0.8rem;
  color: #fca5a5;
}
.error-msg.is-visible { display: block; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 22px;
}
.consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent label {
  margin: 0;
  font-size: 0.83rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.55;
}
.consent label a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 2px; }

.form-note {
  margin-top: 16px;
  font-size: 0.79rem;
  color: var(--muted);
  text-align: center;
}

.form-status {
  display: none;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 22px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  font-size: 0.87rem;
  line-height: 1.55;
}
.form-status.is-visible { display: flex; }
.form-status--ok {
  border: 1px solid rgba(74, 222, 128, 0.3);
  background: rgba(74, 222, 128, 0.07);
  color: #bbf7d0;
}
.form-status--err {
  border: 1px solid rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.07);
  color: #fecaca;
}
.form-status svg { flex-shrink: 0; margin-top: 2px; }
.form-status a { color: inherit; text-decoration: underline; }

/* Datos de contacto */
.contact-item {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.contact-item:first-child { padding-top: 0; }
.contact-item:last-child { border-bottom: 0; }
.contact-item .ci-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-soft);
}
.contact-item .ci-icon svg { width: 17px; height: 17px; }
.contact-item h3 { font-size: 0.92rem; margin-bottom: 2px; }
.contact-item p { font-size: 0.88rem; margin: 0; color: var(--muted); }
.contact-item a { color: var(--text-soft); }
.contact-item a:hover { color: var(--text); }

/* --------------------------------------------------------------------------
   14. Contenido legal / texto largo
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  padding: clamp(56px, 7vw, 88px) 0 clamp(36px, 4vw, 52px);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.page-head > .wrap { position: relative; z-index: 1; }
.page-head h1 { margin-bottom: 14px; }
.page-head p { max-width: 60ch; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--muted);
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--text-soft); }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: #3f434a; }

.prose { max-width: 68ch; }
.prose h2 {
  font-size: 1.3rem;
  margin-top: 2.4em;
  padding-top: 1.4em;
  border-top: 1px solid var(--border);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 1rem; margin-top: 2em; }
.prose p, .prose li { font-size: 0.95rem; }
.prose ul { padding-left: 1.25em; }
.prose li { margin-bottom: 0.45em; }
.prose a { color: var(--accent-soft); }
.prose a:hover { color: var(--accent); }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 0.88rem;
}
.prose th,
.prose td {
  padding: 11px 13px;
  text-align: left;
  border: 1px solid var(--border);
  color: var(--text-soft);
}
.prose th { background: var(--surface); color: var(--text); font-weight: 550; }
.table-scroll { overflow-x: auto; }

.callout {
  padding: 16px 18px;
  margin: 1.8em 0;
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface);
  font-size: 0.9rem;
}
.callout p { margin-bottom: 0.6em; }
.callout p:last-child { margin-bottom: 0; }

.updated { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin-bottom: 2.4em; }

/* --------------------------------------------------------------------------
   15. Servicio en detalle
   -------------------------------------------------------------------------- */
.svc-block {
  padding: clamp(44px, 5vw, 68px) 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 90px;
}
.svc-block:last-of-type { border-bottom: 0; }

.svc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 880px) { .svc-grid { grid-template-columns: 1fr; } }

.svc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.svc-head h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.75rem); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip {
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-soft);
}
a.chip:hover { border-color: var(--border-strong); color: var(--text); }

.anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 24px 0 0;
}

/* --------------------------------------------------------------------------
   16. Pie
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: clamp(48px, 6vw, 68px) 0 28px;
  margin-top: auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: 40px 28px;
  padding-bottom: 40px;
}
/* `width: auto` no es opcional: sin él manda el atributo width="544" del
   propio SVG, `max-width: 100%` lo recorta al ancho de la columna y el logo
   acaba dibujado dentro de una caja de 342×30 con el dibujo centrado, que
   es justo lo que parecía un logo mal alineado. La cabecera ya lo hacía. */
.footer-brand img { height: 30px; width: auto; margin-bottom: 16px; }
.footer-brand p { font-size: 0.86rem; max-width: 34ch; color: var(--muted); }

/* Redes sociales: la etiqueta lleva el nombre de usuario a la vista, que es
   lo que la gente busca copiar. El color de Instagram sólo asoma al pasar
   por encima, para no meter una marca ajena en la paleta. */
.social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 0.83rem;
  color: var(--text-soft);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease),
    color 0.2s var(--ease), transform 0.25s var(--ease-out);
}
.social-link svg { flex-shrink: 0; transition: color 0.25s var(--ease); }
.social-link:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  transform: translateY(-2px);
}
.social-link:hover svg { color: #e1306c; }

.footer-col h4 {
  font-size: 0.84rem;
  color: var(--text);
  margin-bottom: 14px;
  font-weight: 550;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: var(--muted); font-size: 0.86rem; }
.footer-col a:hover { color: var(--text); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--muted);
}
.footer-bottom p { margin: 0; font-size: inherit; color: inherit; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-legal a { color: var(--muted); }
.footer-legal a:hover { color: var(--text); }

/* --------------------------------------------------------------------------
   17. Movimiento
   Todo se anima sobre opacidad, transform y filter: nada que obligue al
   navegador a recalcular la maquetación. El desplazamiento es corto (12-18px)
   y el desenfoque de entrada es lo que da la sensación de material, no el viaje.
   -------------------------------------------------------------------------- */

/* 17.1 · Luz ambiente: dos manchas de marca, enormes y muy diluidas, que
   derivan lentamente. Es el único sitio donde vuelve el color de fondo. */
.ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* La máscara difumina la propia capa: así el recorte contra el borde de
     la sección nunca deja un canto duro de luz. */
  -webkit-mask-image: radial-gradient(ellipse 85% 78% at 50% 26%, #000 0%, rgba(0, 0, 0, 0.85) 45%, transparent 85%);
  mask-image: radial-gradient(ellipse 85% 78% at 50% 26%, #000 0%, rgba(0, 0, 0, 0.85) 45%, transparent 85%);
}
.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  will-change: transform;
}
.ambient::before {
  width: 620px;
  height: 620px;
  top: -300px;
  left: -12%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.20), transparent 70%);
  animation: drift-a 26s ease-in-out infinite;
}
.ambient::after {
  width: 540px;
  height: 540px;
  top: -260px;
  right: -10%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.18), transparent 70%);
  animation: drift-b 34s ease-in-out infinite;
}

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(60px, 40px, 0) scale(1.12); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
  50%      { transform: translate3d(-50px, 30px, 0) scale(1); }
}
@keyframes sheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* 17.2 · Entrada al cargar. `both` mantiene el estado inicial durante el
   retardo, así que funciona aunque el JS no llegue a asignar el escalonado. */
[data-stagger] > *,
.anim-rise {
  animation: rise 0.85s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}

/* 17.3 · Entrada al hacer scroll (requiere JS; se oculta sólo si hay JS)
   Se mueve con la propiedad `translate`, no con `transform`: así la entrada
   y la inclinación 3D del apartado 20.4 pueden convivir en el mismo
   elemento sin pisarse. */
.js .reveal {
  opacity: 0;
  translate: 0 16px;
  filter: blur(5px);
  transition: opacity 0.75s var(--ease-out), translate 0.75s var(--ease-out),
    filter 0.75s var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js .reveal.is-visible { opacity: 1; translate: none; filter: none; }

/* 17.4 · Foco que sigue al puntero sobre las tarjetas.
   `::before` ilumina el interior; `::after` dibuja el filo del borde
   recortando el relleno con una máscara. */
[data-spot] { position: relative; isolation: isolate; }
[data-spot]::before,
[data-spot]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
[data-spot]::before {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
    rgba(129, 140, 248, 0.09), transparent 62%);
}
[data-spot].is-lit::before { opacity: 1; }

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  [data-spot]::after {
    padding: 1px;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%),
      rgba(165, 180, 252, 0.55), transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
  [data-spot].is-lit::after { opacity: 1; }
}

/* 17.5 · Barra de progreso de lectura, flotando en el filo de la cabecera.
   Ahora que la cabecera no tiene borde, es lo único que marca dónde acaba:
   por eso lleva algo de brillo y en el móvil se engorda un punto. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, #3b82f6, #6366f1 50%, #8b5cf6);
  box-shadow: 0 0 10px rgba(129, 140, 248, 0.45);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  transition: opacity 0.3s var(--ease);
  opacity: 0;
}
.site-header.is-scrolled::after { opacity: 1; }

@media (max-width: 900px) {
  .site-header::after { height: 2px; box-shadow: 0 0 12px rgba(129, 140, 248, 0.55); }
}

/* 17.6 · Subrayado de la navegación */
.nav-links a { position: relative; }
@media (min-width: 901px) {
  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.28s var(--ease-out);
  }
  .nav-links a:hover::after,
  .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
}

/* 17.7 · Micro-interacciones */
.btn { position: relative; overflow: hidden; }
.btn:active { transform: scale(0.985); }
.btn svg { transition: transform 0.25s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

/* Destello que cruza el botón principal al pasar por encima */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-110%);
  transition: transform 0.65s var(--ease-out);
  pointer-events: none;
}
.btn--primary:hover::after { transform: translateX(110%); }

.footer-col a,
.footer-legal a { display: inline-block; transition: color 0.15s var(--ease), transform 0.25s var(--ease-out); }
.footer-col a:hover { transform: translateX(3px); }

.contact-item .ci-icon,
.card-icon { transition: border-color 0.25s var(--ease), color 0.25s var(--ease); }
.card:hover .card-icon { border-color: var(--border-strong); color: var(--text); }

/* 17.8 · Terminal que se escribe sola */
.code-body .caret {
  display: inline-block;
  width: 7px;
  height: 0.95em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--accent-soft);
  animation: blink 1.05s steps(1) infinite;
}
.code-card { transition: border-color 0.3s var(--ease); }
.code-card.is-typing { border-color: var(--border-strong); }

/* 17.9 · Despliegue del FAQ (la altura la anima el JS con la Web Animations API) */
.faq .faq-body { overflow: hidden; }

/* 17.10 · Preferencia de movimiento reducido: se desactiva todo lo decorativo */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; translate: none; filter: none; }
  [data-stagger] > * { animation: none; opacity: 1; }
  .marquee-track { animation: none; transform: none; }
  .ambient::before,
  .ambient::after { animation: none; }
  .grad-text { animation: none; background-position: 0 50%; }
  .code-body .caret { display: none; }
}

/* --------------------------------------------------------------------------
   18. Layout de página completa
   -------------------------------------------------------------------------- */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

/* ==========================================================================
   20. CAPA VISUAL (FX)
   Todo lo de aquí es la primera impresión: lo que ve el cliente al que un
   comercial le acaba de pasar la tarjeta. Reglas que no se rompen:
     · sólo se anima opacity / transform / filter (nunca layout),
     · todo funciona igual con el dedo que con el ratón,
     · nada es imprescindible: si falla, la página se lee entera.
   ========================================================================== */

/* --------------------------------------------------------------------------
   20.1 · Grano
   Una textura mínima sobre todo el lienzo. No se ve, pero quita el aspecto
   plano del negro puro y hace que los degradados no formen bandas.
   -------------------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   20.2 · Barra de desplazamiento
   -------------------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: #32353d transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #2e3138;
  border: 3px solid var(--bg);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #3d414a; }

/* --------------------------------------------------------------------------
   20.3 · Campo de puntos interactivo
   Una retícula dibujada en canvas que se enciende bajo el puntero o el dedo
   y suelta una onda al pulsar. Es el efecto que hace levantar la ceja.
   -------------------------------------------------------------------------- */
.fx-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.fx-field.is-ready { opacity: 1; }

/* Pista para el visitante, sólo en el hero de portada */
.fx-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: rgba(25, 27, 33, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  pointer-events: none;
  animation: hint-in 1s var(--ease-out) 2.6s both;
}
.fx-hint i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(129, 140, 248, 0.55);
  animation: hint-pulse 2.4s ease-out infinite;
}
.fx-hint.is-gone { opacity: 0; transition: opacity 0.5s var(--ease); }
@media (max-width: 640px) { .fx-hint { display: none; } }

@keyframes hint-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes hint-pulse {
  0%        { box-shadow: 0 0 0 0 rgba(129, 140, 248, 0.5); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(129, 140, 248, 0); }
}

/* --------------------------------------------------------------------------
   20.4 · Inclinación 3D
   La tarjeta se gira unos grados hacia el puntero. El límite es bajo a
   propósito: tiene que parecer material sólido, no un truco.
   -------------------------------------------------------------------------- */
/* Una sola lista de transiciones para todo lo que se mueve en la tarjeta.
   Va junto a propósito: `transition` es una propiedad única, así que si la
   entrada al hacer scroll y la inclinación declararan la suya por separado,
   la última en ganar la cascada dejaría a la otra sin suavizado. */
.js .tilt {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    translate3d(0, var(--ty, 0px), 0);
  transition-property: opacity, translate, filter, transform, border-color,
    background-color, box-shadow;
  transition-duration: 0.75s, 0.75s, 0.75s, 0.55s, 0.18s, 0.18s, 0.4s;
  transition-timing-function: var(--ease-out);
  transition-delay:
    calc(var(--i, 0) * var(--stagger)),
    calc(var(--i, 0) * var(--stagger)),
    calc(var(--i, 0) * var(--stagger)),
    0s, 0s, 0s, 0s;
  will-change: transform;
}
/* Mientras el puntero está encima, el giro persigue casi sin retardo */
.js .tilt.is-tilting {
  transition-duration: 0.75s, 0.75s, 0.75s, 0.1s, 0.18s, 0.18s, 0.4s;
  transition-timing-function: var(--ease-out), var(--ease-out), var(--ease-out),
    linear, var(--ease), var(--ease), var(--ease);
}
.card.is-lit,
.panel.is-lit,
.form-card.is-lit { box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9); }

/* Al tocar con el dedo: respuesta inmediata, sin esperar al hover.
   Sólo en pantallas táctiles: con ratón esta escala pisaría la inclinación. */
@media (hover: none) {
  .card:active, .showcase-tab:active { transform: scale(0.995); }
}

/* --------------------------------------------------------------------------
   20.5 · Onda al pulsar (ratón y dedo)
   -------------------------------------------------------------------------- */
.ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  pointer-events: none;
  transform: scale(0);
  animation: ripple 0.62s var(--ease-out) forwards;
}
.btn--primary .ripple { background: rgba(10, 10, 11, 0.16); }

@keyframes ripple {
  to { transform: scale(16); opacity: 0; }
}

/* --------------------------------------------------------------------------
   20.6 · Filo vivo de la tarjeta destacada
   Un halo de marca girando por debajo del borde. Se recorta con máscara,
   así que sólo se ve el canto de 1px: brillo sin colorear el fondo.
   -------------------------------------------------------------------------- */
/* Va en un elemento propio, no en un pseudo-elemento de la tarjeta: así no
   se pisa con el foco del puntero, que ya ocupa ::before y ::after. */
.card--feature { isolation: isolate; }
.edge {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.edge::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 170%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(96, 165, 250, 0.9) 38deg,
    rgba(192, 132, 252, 0.9) 88deg, transparent 148deg, transparent 360deg);
  animation: orbit 7s linear infinite;
  opacity: 0.55;
  transition: opacity 0.4s var(--ease);
}
.edge::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--surface-2);
}
.card--feature:hover .edge::before { opacity: 1; }

@keyframes orbit { to { rotate: 360deg; } }

/* --------------------------------------------------------------------------
   20.7 · Titular palabra a palabra
   -------------------------------------------------------------------------- */
[data-stagger] > .has-words { animation: none; opacity: 1; }
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.word > span {
  display: inline-block;
  animation: word-up 0.95s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 55ms + 100ms);
}
@keyframes word-up {
  from { transform: translateY(105%) rotate(2deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   20.8 · Proceso: la línea se enciende al pasar
   -------------------------------------------------------------------------- */
.step { position: relative; }
.step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, #60a5fa, #818cf8 55%, #c084fc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.step.is-visible::before { transform: scaleX(1); }
.step .step-num { transition: color 0.3s var(--ease); }
.step:hover .step-num { color: var(--accent-soft); }

/* --------------------------------------------------------------------------
   20.9 · Cifras que suben
   -------------------------------------------------------------------------- */
.stat b { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   20.10 · ESCAPARATE
   Cuatro interfaces montadas a mano —web, CRM, asistente y tienda— que se
   animan solas. Es la prueba de que sabemos hacerlo, no la promesa.
   -------------------------------------------------------------------------- */
.showcase {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) { .showcase { grid-template-columns: 1fr; } }

.showcase-tabs { display: grid; gap: 8px; }
@media (max-width: 900px) {
  .showcase-tabs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

.showcase-tab {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease),
    transform 0.2s var(--ease-out);
}
.showcase-tab:hover { border-color: var(--border-strong); background: var(--surface-2); }
.showcase-tab[aria-selected="true"] {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.showcase-tab .t-head { display: flex; align-items: center; gap: 9px; }
.showcase-tab svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); transition: color 0.2s var(--ease); }
.showcase-tab b { font-size: 0.9rem; font-weight: 550; color: var(--text-soft); transition: color 0.2s var(--ease); }
.showcase-tab span {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}
.showcase-tab[aria-selected="true"] b,
.showcase-tab[aria-selected="true"] svg { color: var(--text); }

/* Barra de tiempo: marca cuánto queda para que salte al siguiente */
.showcase-tab .t-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #60a5fa, #818cf8 55%, #c084fc);
  transform: scaleX(0);
  transform-origin: left;
}
.showcase-tab[aria-selected="true"] .t-bar { animation: tab-fill 7s linear forwards; }
[data-showcase].is-paused .showcase-tab[aria-selected="true"] .t-bar { animation-play-state: paused; }
@keyframes tab-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.showcase-stage {
  position: relative;
  height: 452px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  overflow: hidden;
}
@media (max-width: 900px) { .showcase-stage { height: 420px; } }
@media (max-width: 640px) { .showcase-stage { height: 356px; } }

.showcase-note {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
  text-align: center;
}

/* --- Marco común de las cuatro maquetas ------------------------------- */
.demo-panel { display: none; height: 100%; }
.demo-panel.is-active { display: block; animation: demo-in 0.5s var(--ease-out) both; }
/* Sin JavaScript se queda la primera maqueta fija y se ocultan las pestañas,
   que sin script no llevarían a ninguna parte. */
html:not(.js) .demo-panel:first-child { display: block; }
html:not(.js) .showcase-tabs { display: none; }
html:not(.js) .showcase { grid-template-columns: 1fr; }

@keyframes demo-in {
  from { opacity: 0; transform: translateY(8px) scale(0.995); }
  to   { opacity: 1; transform: none; }
}

.demo { display: flex; flex-direction: column; height: 100%; font-size: 0.78rem; }

.demo-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 9px 13px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
}
.demo-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.13); }
.demo-bar .d-title { margin-left: 4px; }
.demo-bar .d-flag {
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.64rem;
  color: #6c7078;
}
.demo-bar .d-url {
  margin-left: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-soft);
}
.demo-bar .d-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #86efac; }
.demo-bar .d-live i { width: 6px; height: 6px; background: #4ade80; }
.demo-bar .d-cart { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; }
.demo-bar .d-cart svg { color: var(--text-soft); }

.demo-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 14px;
  padding: 14px;
}
@media (max-width: 640px) {
  .demo-body { grid-template-columns: minmax(0, 1fr); }
  .demo-side { display: none; }
}

.demo-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.demo-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.demo-kpi b {
  display: block;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
}
.demo-kpi span { font-size: 0.72rem; color: var(--muted); line-height: 1.4; }

/* --- 1 · Web ---------------------------------------------------------- */
.wf {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.wf-nav { display: flex; align-items: center; gap: 7px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.wf-nav b { width: 34px; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); }
.wf-nav u { width: 22px; height: 5px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.wf-nav em { width: 40px; height: 13px; margin-left: auto; border-radius: 3px; background: rgba(255, 255, 255, 0.75); }
.wf-hero { display: flex; flex-direction: column; gap: 7px; padding: 12px 0 6px; }
.wf-line { height: 9px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); transform-origin: left; }
.wf-line.is-accent { background: linear-gradient(90deg, #60a5fa, #c084fc); }
.wf-btn { width: 74px; height: 20px; margin-top: 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.8); }
.wf-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; }
.wf-cards i { height: 48px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); }

.is-active .wf-line,
.is-active .wf-btn,
.is-active .wf-cards i { animation: wf-in 0.6s var(--ease-out) both; }
.is-active .wf-line:nth-child(1) { animation-delay: 0.15s; }
.is-active .wf-line:nth-child(2) { animation-delay: 0.24s; }
.is-active .wf-line:nth-child(3) { animation-delay: 0.33s; }
.is-active .wf-btn { animation-delay: 0.46s; }
.is-active .wf-cards i:nth-child(1) { animation-delay: 0.6s; }
.is-active .wf-cards i:nth-child(2) { animation-delay: 0.7s; }
.is-active .wf-cards i:nth-child(3) { animation-delay: 0.8s; }
@keyframes wf-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.gauge { position: relative; width: 88px; margin: 2px auto 0; }
.gauge svg { width: 88px; height: 88px; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.gauge .g-track { stroke: rgba(255, 255, 255, 0.08); }
.gauge .g-arc {
  stroke: url(#gauge-grad);
  stroke-dasharray: 213.6;
  stroke-dashoffset: 213.6;
}
.is-active .gauge .g-arc { animation: gauge 1.5s var(--ease-out) 0.35s forwards; }
@keyframes gauge { to { stroke-dashoffset: 4.3; } }
.gauge b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
}

.meters { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; }
.meters li { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; font-size: 0.7rem; color: var(--muted); }
.meters span { grid-column: 1; }
.meters em { grid-column: 2; font-style: normal; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.meters i {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.meters i::after {
  content: "";
  display: block;
  height: 100%;
  width: var(--v, 100%);
  border-radius: 2px;
  background: linear-gradient(90deg, #60a5fa, #818cf8);
  transform: scaleX(0);
  transform-origin: left;
}
.is-active .meters i::after { animation: meter 1.1s var(--ease-out) forwards; }
.is-active .meters li:nth-child(1) i::after { animation-delay: 0.5s; }
.is-active .meters li:nth-child(2) i::after { animation-delay: 0.64s; }
.is-active .meters li:nth-child(3) i::after { animation-delay: 0.78s; }
@keyframes meter { to { transform: scaleX(1); } }

/* --- 2 · CRM ---------------------------------------------------------- */
.kanban {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}
.k-col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.k-col h5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0 0 3px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 400;
  color: var(--muted);
}
.k-col h5 b { color: var(--text-soft); }
.deal {
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-2);
  font-size: 0.7rem;
  color: var(--text-soft);
}
.deal u { display: block; margin-bottom: 5px; height: 5px; width: 60%; border-radius: 2px; background: rgba(255, 255, 255, 0.16); text-decoration: none; }
.deal span { display: block; font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); }
.deal--won { border-color: rgba(74, 222, 128, 0.35); }
.deal--won span { color: #86efac; }

/* La ficha que cruza el embudo sola: nuevo -> propuesta -> ganado */
.deal--fly {
  position: absolute;
  top: 34px;
  left: 10px;
  width: calc((100% - 20px) / 3 - 20px);
  border-color: var(--border-strong);
  box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.95);
  opacity: 0;
}
/* El salto entre columnas es el ancho de la ficha (100%) más los 10px de
   relleno de cada columna y los 10px de hueco entre ellas: 100% + 30px. */
.is-active .deal--fly { animation: deal-fly 6.6s var(--ease) 0.6s both; }
@keyframes deal-fly {
  0%       { opacity: 0; transform: translate(0, 6px) scale(0.97); }
  8%, 26%  { opacity: 1; transform: translate(0, 0) scale(1); }
  38%, 56% { opacity: 1; transform: translate(calc(100% + 30px), 0) scale(1); }
  68%, 92% { opacity: 1; transform: translate(calc(200% + 60px), 0) scale(1); }
  100%     { opacity: 0; transform: translate(calc(200% + 60px), -5px) scale(0.98); }
}

.bars { display: flex; align-items: flex-end; gap: 5px; height: 54px; margin-top: auto; }
.bars i {
  flex: 1;
  height: var(--h, 40%);
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #818cf8, rgba(129, 140, 248, 0.25));
  transform: scaleY(0);
  transform-origin: bottom;
}
.is-active .bars i { animation: bar-up 0.7s var(--ease-out) forwards; }
.is-active .bars i:nth-child(1) { animation-delay: 0.3s; }
.is-active .bars i:nth-child(2) { animation-delay: 0.38s; }
.is-active .bars i:nth-child(3) { animation-delay: 0.46s; }
.is-active .bars i:nth-child(4) { animation-delay: 0.54s; }
.is-active .bars i:nth-child(5) { animation-delay: 0.62s; }
.is-active .bars i:nth-child(6) { animation-delay: 0.7s; }
@keyframes bar-up { to { transform: scaleY(1); } }

/* --- 3 · Asistente de IA ---------------------------------------------- */
.demo--ia .demo-body { grid-template-columns: minmax(0, 1fr); }
.chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.msg {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.78rem;
  line-height: 1.5;
  opacity: 0;
}
.is-active .msg { animation: msg-in 0.45s var(--ease-out) var(--d, 0s) both; }
.msg--in {
  align-self: flex-end;
  background: #f4f4f5;
  color: #111214;
  border-bottom-right-radius: 4px;
}
.msg--bot {
  align-self: flex-start;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-soft);
  border-bottom-left-radius: 4px;
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(9px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Los tres puntos «está escribiendo…»: altura fija para que al recogerse
   la burbuja el resto de la conversación no dé un salto. */
.msg--typing {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 13px;
  overflow: hidden;
}
.msg--typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.is-active .msg--typing { animation: typing-box 1.35s var(--ease) var(--d, 0s) both; }
.is-active .msg--typing i { animation: typing-dot 1s ease-in-out infinite; }
.is-active .msg--typing i:nth-child(2) { animation-delay: 0.14s; }
.is-active .msg--typing i:nth-child(3) { animation-delay: 0.28s; }
@keyframes typing-box {
  0%       { opacity: 0; transform: translateY(8px); height: 30px; margin-bottom: 0; }
  16%, 78% { opacity: 1; transform: none; height: 30px; margin-bottom: 0; }
  100%     { opacity: 0; transform: translateY(-4px); height: 0; margin-bottom: -8px; }
}
@keyframes typing-dot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-3px); }
}

.msg-chips { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 100%; opacity: 0; }
.is-active .msg-chips { animation: msg-in 0.45s var(--ease-out) var(--d, 0s) both; }
.msg-chips b {
  padding: 5px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 450;
  color: var(--text-soft);
}
.msg-chips b:first-child { border-color: rgba(129, 140, 248, 0.5); color: var(--accent-soft); }

/* --- 4 · Tienda ------------------------------------------------------- */
.prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; align-content: start; }
.prod {
  display: flex;
  flex-direction: column;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.prod .ph {
  height: 62px;
  border-radius: 4px;
  background: linear-gradient(140deg, rgba(96, 165, 250, 0.16), rgba(192, 132, 252, 0.14));
  border: 1px solid var(--border);
}
.prod u { display: block; height: 5px; width: 76%; margin: 9px 0 5px; border-radius: 2px; background: rgba(255, 255, 255, 0.17); text-decoration: none; }
.prod b { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-soft); }
.prod .add {
  position: relative;
  margin-top: 8px;
  padding: 4px 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.66rem;
  text-align: center;
  color: var(--text-soft);
}
.prod .add em { display: block; font-style: normal; }
.prod .add em + em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
}
.is-active .prod { animation: wf-in 0.5s var(--ease-out) both; }
.is-active .prod:nth-child(1) { animation-delay: 0.1s; }
.is-active .prod:nth-child(2) { animation-delay: 0.2s; }
.is-active .prod:nth-child(3) { animation-delay: 0.3s; }

/* El producto del medio se añade solo al carrito */
.is-active .prod--pick .add { animation: add-cart 3.4s var(--ease) 1.1s both; }
.is-active .prod--pick .add em:first-child { animation: swap-out 3.4s var(--ease) 1.1s both; }
.is-active .prod--pick .add em + em { animation: swap-in 3.4s var(--ease) 1.1s both; }
@keyframes add-cart {
  0%       { background: rgba(255, 255, 255, 0.08); color: var(--text-soft); transform: scale(1); }
  9%       { transform: scale(0.93); }
  20%      { background: rgba(74, 222, 128, 0.16); color: #86efac; transform: scale(1); }
  100%     { background: rgba(74, 222, 128, 0.16); color: #86efac; transform: scale(1); }
}
@keyframes swap-out { 0%, 12% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes swap-in  { 0%, 12% { opacity: 0; } 20%, 100% { opacity: 1; } }
.cart-n {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #0a0a0b;
  font-size: 0.62rem;
  font-weight: 600;
}
.is-active .cart-n { animation: cart-pop 0.5s var(--ease-out) 1.5s both; }
@keyframes cart-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

.spark { width: 100%; height: 54px; overflow: visible; }
.spark .s-line {
  fill: none;
  stroke: url(#spark-grad);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}
.is-active .spark .s-line { animation: draw 1.6s var(--ease-out) 0.4s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.spark .s-fill { fill: url(#spark-fill); opacity: 0; }
.is-active .spark .s-fill { animation: fade-in 0.9s var(--ease-out) 1.3s forwards; }
@keyframes fade-in { to { opacity: 1; } }

/* --------------------------------------------------------------------------
   20.11 · Retoques sobre lo que ya había
   -------------------------------------------------------------------------- */
/* El hero gana profundidad: rejilla fina de fondo bajo el campo de puntos */
.hero::before,
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.036) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.036) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 35%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 65% at 50% 35%, #000, transparent 78%);
}

/* Filo superior de las secciones alternas */
.section--alt { position: relative; }
.section--alt::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  translate: -50% 0;
  width: min(680px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.5), transparent);
}

/* La tarjeta de código respira mejor con un halo por detrás */
.hero-visual::before {
  content: "";
  position: absolute;
  inset: -14% -8%;
  z-index: -1;
  background: radial-gradient(ellipse at 60% 40%, rgba(99, 102, 241, 0.16), transparent 68%);
  filter: blur(28px);
  pointer-events: none;
}

/* Los puntos del marquee se tiñen al pasar por encima */
.marquee-track b { transition: color 0.25s var(--ease); }
.marquee-track b:hover { color: var(--accent-soft); }

/* --------------------------------------------------------------------------
   20.12 · Movimiento reducido — se apaga toda la capa nueva
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fx-field, .fx-hint { display: none; }
  .js .tilt { transform: none !important; }
  .edge::before { animation: none; opacity: 0.4; }
  .word > span { animation: none; }
  .step::before { transform: scaleX(1); transition: none; }
  .showcase-tab[aria-selected="true"] .t-bar { animation: none; transform: scaleX(1); }
  .demo-panel.is-active { animation: none; }
  .is-active .wf-line,
  .is-active .wf-btn,
  .is-active .wf-cards i,
  .is-active .prod,
  .is-active .msg,
  .is-active .msg-chips,
  .is-active .bars i,
  .is-active .deal--fly { animation: none !important; opacity: 1; transform: none; }
  .is-active .msg--typing { display: none; }
  .is-active .meters i::after { animation: none; transform: scaleX(1); }
  .is-active .gauge .g-arc { animation: none; stroke-dashoffset: 4.3; }
  .is-active .spark .s-line { animation: none; stroke-dashoffset: 0; }
  .is-active .spark .s-fill { animation: none; opacity: 1; }
  .ripple { display: none; }
}

/* ==========================================================================
   20.13 · MITAD INFERIOR
   Debajo del proceso la página se quedaba en listas de texto. Estos bloques
   la convierten en algo que se toca: cuatro motivos con su propia escena
   dibujándose, las tecnologías explicándose solas y un cierre con el mismo
   campo de puntos del principio.
   ========================================================================== */

/* --- Motivos ---------------------------------------------------------- */
.reasons {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .reasons { grid-template-columns: 1fr; gap: 16px; }
  .reason-stage { order: -1; }
}

.reason-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 340px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  overflow: hidden;
  isolation: isolate;
}
/* Retícula de fondo, difuminada hacia los bordes */
.reason-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000, transparent 78%);
}
.stage-glow {
  position: absolute;
  z-index: -1;
  width: 300px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.24), transparent 66%);
  filter: blur(30px);
  animation: glow-float 9s ease-in-out infinite;
}
@keyframes glow-float {
  0%, 100% { transform: translate3d(-16px, -10px, 0) scale(1); }
  50%      { transform: translate3d(18px, 14px, 0) scale(1.14); }
}

/* Cada escena es un dibujo de línea que se traza solo al entrar */
.scene { display: none; text-align: center; }
.scene.is-active { display: block; animation: pane-in 0.5s var(--ease-out) both; }
.scene svg {
  width: min(226px, 60vw);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 0 16px rgba(129, 140, 248, 0.35));
}
.scene b {
  display: block;
  margin-top: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
.scene span { display: block; margin-top: 5px; font-size: 0.84rem; color: var(--muted); }

.scene .draw,
.scene .needle,
.scene .tick {
  fill: none;
  stroke: #a5b4fc;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scene .tick { stroke-width: 2; opacity: 0.45; }
.scene .hub { fill: #a5b4fc; }
.scene .ln { fill: rgba(255, 255, 255, 0.24); }

/* `pathLength="1"` normaliza cualquier trazo: un solo par de valores
   sirve para todos los dibujos, midan lo que midan. */
.scene .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.scene.is-active .draw { animation: draw-line 1.1s var(--ease-out) 0.1s forwards; }
.scene.is-active .d2 { animation-delay: 0.8s; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }

.scene .ln { opacity: 0; transform-box: fill-box; transform-origin: left center; }
.scene.is-active .ln { animation: ln-in 0.42s var(--ease-out) both; }
.scene.is-active .ln:nth-of-type(1) { animation-delay: 0.95s; }
.scene.is-active .ln:nth-of-type(2) { animation-delay: 1.06s; }
.scene.is-active .ln:nth-of-type(3) { animation-delay: 1.17s; }
@keyframes ln-in {
  from { opacity: 0; transform: translateX(-8px) scaleX(0.6); }
  to   { opacity: 1; transform: none; }
}

/* La aguja del velocímetro sube de golpe y rebota al asentarse */
.scene .needle { opacity: 0; transform: rotate(-6deg); transform-origin: 80px 96px; }
.scene.is-active .needle { animation: needle 1.7s cubic-bezier(0.22, 1.2, 0.3, 1) 0.55s both; }
@keyframes needle {
  0%   { opacity: 0; transform: rotate(-6deg); }
  12%  { opacity: 1; }
  62%  { transform: rotate(120deg); }
  78%  { transform: rotate(103deg); }
  100% { opacity: 1; transform: rotate(111deg); }
}

/* El candado se dibuja y después se abre */
.scene .shackle {
  fill: none;
  stroke: #a5b4fc;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transform-origin: 96px 60px;
}
.scene.is-active .shackle {
  animation: draw-line 0.9s var(--ease-out) 0.1s forwards,
    shackle-open 0.9s var(--ease-out) 1.15s forwards;
}
@keyframes shackle-open { to { transform: rotate(-28deg) translateY(-2px); } }

/* --- Lista de motivos -------------------------------------------------- */
.reason-list { display: flex; flex-direction: column; }

.reason {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  width: 100%;
  padding: 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.reason:last-child { border-bottom: 0; }
.reason:hover { background: rgba(255, 255, 255, 0.03); }
.reason[aria-selected="true"] {
  border-bottom-color: transparent;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 2px 0 0 0 #818cf8;
}
.reason b {
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.25s var(--ease);
}
.reason[aria-selected="true"] b { color: var(--accent-soft); }
.reason strong {
  display: block;
  font-size: 0.97rem;
  font-weight: 550;
  color: var(--text-soft);
  transition: color 0.25s var(--ease);
}
.reason[aria-selected="true"] strong { color: var(--text); }
.reason em {
  display: none;
  margin-top: 7px;
  font-style: normal;
  font-size: 0.89rem;
  line-height: 1.55;
  color: var(--muted);
}
.reason[aria-selected="true"] em { display: block; animation: pane-in 0.35s var(--ease-out) both; }

/* --- Tira de compromisos ---------------------------------------------- */
.promise {
  margin-top: 26px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.promise .stat-grid { gap: 0; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
.promise .stat { padding: 2px 22px; border-left: 1px solid var(--border); }
.promise .stat:first-child { border-left: 0; padding-left: 0; }

/* --- Empujón al contacto ----------------------------------------------- */
.nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 16px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, rgba(96, 165, 250, 0.08), rgba(192, 132, 252, 0.08));
  color: var(--text-soft);
  font-size: 0.92rem;
  transition: border-color 0.25s var(--ease), transform 0.3s var(--ease-out),
    color 0.25s var(--ease);
}
.nudge strong { display: block; margin-bottom: 2px; color: var(--text); }
.nudge svg { flex-shrink: 0; transition: transform 0.3s var(--ease-out); }
.nudge:hover { border-color: var(--border-strong); transform: translateY(-2px); color: var(--text); }
.nudge:hover svg { transform: translateX(4px); }

/* --- Tecnologías que se explican solas --------------------------------- */
button.chip {
  background: transparent;
  cursor: pointer;
  line-height: 1.4;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease),
    color 0.2s var(--ease), transform 0.2s var(--ease-out);
}
button.chip:hover,
button.chip[aria-current="true"] {
  border-color: rgba(129, 140, 248, 0.55);
  background: rgba(129, 140, 248, 0.1);
  color: var(--text);
  transform: translateY(-2px);
}
.tech-note {
  max-width: 58ch;
  min-height: 3.1em;
  margin: 24px auto 0;
  font-size: 0.93rem;
  color: var(--text-soft);
  transition: opacity 0.18s var(--ease);
}
.tech-note.is-swap { opacity: 0; }

/* --- Preguntas numeradas ----------------------------------------------- */
.faq { counter-reset: faq; }
.faq details { counter-increment: faq; transition: background-color 0.3s var(--ease); }
.faq summary::before {
  content: counter(faq, decimal-leading-zero);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
  margin-right: 15px;
  transition: color 0.3s var(--ease);
}
.faq details[open] summary::before { color: var(--accent-soft); }
.faq details[open] { background: linear-gradient(90deg, rgba(129, 140, 248, 0.055), transparent 55%); }
.faq .faq-body { padding-left: 41px; }

/* --- Cierre ------------------------------------------------------------ */
.cta { position: relative; overflow: hidden; }
.cta > :not(.fx-field) { position: relative; z-index: 1; }
.cta h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }

@media (prefers-reduced-motion: reduce) {
  .stage-glow,
  .scene.is-active .draw,
  .scene.is-active .shackle,
  .scene.is-active .needle,
  .scene.is-active .ln,
  .scene.is-active,
  .reason[aria-selected="true"] em { animation: none; }
  .scene .draw, .scene .shackle { stroke-dashoffset: 0; }
  .scene .needle { opacity: 1; transform: rotate(111deg); }
  .scene .ln { opacity: 1; }
}

/* ==========================================================================
   21. MÓVIL: la misma información, menos scroll
   En el escritorio estas secciones se abarcan de un vistazo; en el móvil la
   misma retícula se convierte en una columna interminable. Aquí las rejillas
   pasan a carriles que se deslizan con el dedo, los pasos a pestañas y las
   listas largas a desplegables. **Nada de esto se aplica en el escritorio**:
   todo vive dentro de la consulta de 760px.
   ========================================================================== */

/* Estilos base de las piezas que crea el JS, para que si el visitante gira
   el móvil o agranda la ventana no se queden con una pinta rara. */
.rail-dots { display: none; }
.step-tabs { display: none; }
.cl-head {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 3px;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 550;
  color: var(--text);
  text-align: left;
}
.cl-head::after { display: none; }
.cl-body { display: block; }

@keyframes pane-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 760px) {

  /* 21.1 · Carril deslizante ------------------------------------------
     Las tarjetas se ponen en fila y se recorren con el dedo. El carril
     sangra hasta los bordes de la pantalla —de ahí los márgenes
     negativos— para que la siguiente tarjeta asome y se entienda sola
     que aquello se desliza. */
  [data-rail] {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -24px;
    padding: 8px 24px 6px;
  }
  [data-rail]::-webkit-scrollbar { display: none; }

  [data-rail] {
    /* Sin `stretch` las tarjetas no se estiran a la más alta: cada una
       mide lo que le decimos, y al desplegar una las demás no crecen. */
    align-items: flex-start;
  }
  [data-rail] > * {
    flex: 0 0 85%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  [data-rail] > .card--feature { flex-basis: 89%; }

  /* Todas exactamente igual de altas. El texto que no cabe no se borra:
     se recorta a cuatro líneas y se recupera entero con «Ver más». */
  [data-rail] > .card {
    height: 384px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  [data-rail] > .card > p {
    flex: 1 1 auto;
    min-height: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  [data-rail] > .card .card-list { display: none; }
  [data-rail] > .card .card-more,
  [data-rail] > .card .card-foot { flex: 0 0 auto; }

  [data-rail] > .card.is-open {
    height: auto;
    box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.95),
      0 0 0 1px rgba(129, 140, 248, 0.45);
  }
  [data-rail] > .card.is-open > p {
    display: block;
    -webkit-line-clamp: unset;
    flex: 0 0 auto;
  }
  [data-rail] > .card.is-open .card-list { display: block; animation: pane-in 0.35s var(--ease-out) both; }

  [data-rail] .card-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    margin-top: 16px;
    padding: 7px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-soft);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
      border-color 0.2s var(--ease);
  }
  [data-rail] .card-more::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-1px, -2px);
    transition: transform 0.3s var(--ease);
  }
  [data-rail] .card.is-open .card-more::after { transform: rotate(-135deg) translate(-2px, -1px); }
  [data-rail] .card-more:active { background: rgba(255, 255, 255, 0.06); color: var(--text); }

  /* La tarjeta centrada manda: las de al lado se encogen y se apagan.
     `--near` va de 0 (fuera) a 1 (centrada) y lo calcula el JS. */
  [data-rail] > .card {
    transform: scale(calc(0.93 + 0.07 * var(--near, 1)));
    opacity: calc(0.42 + 0.58 * var(--near, 1));
    border-color: rgba(255, 255, 255, calc(0.09 + 0.11 * var(--near, 1)));
    box-shadow: 0 24px 44px -34px rgba(0, 0, 0, 0.95),
      0 0 0 1px rgba(129, 140, 248, calc(0.38 * var(--near, 1)));
    transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out),
      border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  [data-rail] > .card .card-icon {
    border-color: rgba(255, 255, 255, calc(0.09 + 0.2 * var(--near, 1)));
    transition: border-color 0.3s var(--ease);
  }

  .rail-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
  }
  .rail-dots i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    transition: width 0.35s var(--ease-out), background 0.35s var(--ease);
  }
  .rail-dots i.is-on {
    width: 22px;
    background: linear-gradient(90deg, #60a5fa, #c084fc);
  }

  /* 21.2 · El proceso, paso a paso ------------------------------------
     Cinco bloques apilados eran cinco pantallas de scroll. Ahora es una
     fila de números: se toca el que interesa o se desliza el contenido. */
  .steps.is-tabbed { display: block; border-top: 0; }
  .steps.is-tabbed .step { display: none; padding: 6px 0 0; border-bottom: 0; }
  .steps.is-tabbed .step::before { display: none; }
  .steps.is-tabbed .step.is-current { display: block; animation: pane-in 0.45s var(--ease-out) both; }
  /* El paso activo va centrado bajo su número, no alineado a la izquierda */
  .steps.is-tabbed .step { text-align: center; }
  .steps.is-tabbed .step h3 { font-size: 1.2rem; margin-bottom: 8px; }
  .steps.is-tabbed .step p { font-size: 0.95rem; max-width: 34ch; margin-inline: auto; }

  /* «PASO 03» tiene que cantar: es lo que dice dónde estás */
  .steps.is-tabbed .step-num {
    display: inline-block;
    padding: 5px 13px;
    margin-bottom: 15px;
    border: 1px solid rgba(129, 140, 248, 0.4);
    border-radius: var(--radius-pill);
    background: rgba(129, 140, 248, 0.11);
    color: var(--accent-soft);
    font-size: 0.72rem;
    letter-spacing: 0.09em;
  }

  .step-tabs {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    isolation: isolate;
    padding-top: 6px;
    margin-bottom: 14px;
  }
  /* Los dos filos horizontales van de centro a centro de los extremos:
     el gris es el recorrido completo y el de color, lo ya recorrido. */
  .step-tabs::before,
  .step-tabs::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 30px;
    left: 10%;
    right: 10%;
    height: 1px;
  }
  .step-tabs::before { background: var(--border); }
  .step-tabs::after {
    background: linear-gradient(90deg, #60a5fa, #c084fc);
    transform: scaleX(var(--p, 0));
    transform-origin: left;
    transition: transform 0.45s var(--ease-out);
  }

  /* El botón ocupa toda su columna y 54px de alto: el dedo acierta
     aunque toque al lado del círculo. Es el mínimo cómodo en táctil. */
  .step-tab {
    display: grid;
    place-items: center;
    min-height: 54px;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: var(--muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .step-tab b {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 0.88rem;
    font-weight: 500;
    transition: transform 0.35s var(--ease-out), background 0.3s var(--ease),
      color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  }
  .step-tab:active b { transform: scale(0.93); }
  .step-tab[aria-selected="true"] b {
    border-color: transparent;
    background: linear-gradient(120deg, #60a5fa, #818cf8 55%, #c084fc);
    color: #0a0a0b;
    transform: scale(1.12);
    box-shadow: 0 0 20px rgba(129, 140, 248, 0.5);
  }
  .step-tab:active[aria-selected="true"] b { transform: scale(1.04); }

  /* 21.3 · Listas largas, plegadas ------------------------------------ */
  .check-list.is-accordion li { padding: 0; }
  .check-list.is-accordion .cl-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 0;
    margin: 0;
    cursor: pointer;
  }
  .check-list.is-accordion .cl-head::after {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.3s var(--ease);
  }
  .check-list.is-accordion li.is-open .cl-head::after { transform: rotate(-135deg) translateY(-2px); }
  .check-list.is-accordion .cl-body { display: none; padding-bottom: 17px; }
  .check-list.is-accordion li.is-open .cl-body { display: block; animation: pane-in 0.35s var(--ease-out) both; }

  /* 21.4 · Aire: las secciones respiran menos en una pantalla de 6"
     Es el ajuste que más scroll quita de toda la página, y no cuesta
     ni una palabra de texto. */
  .section { padding: 54px 0; }
  .section--tight { padding: 42px 0; }
  .sec-head { margin-bottom: 26px; }
  .split { gap: 30px; }

  /* 21.4b · El pie, que se salía de la pantalla
     `.footer-grid` pide una primera columna de 220px como mínimo más otras
     de 140: en un móvil de 390px sólo hay 342 útiles, así que la segunda
     columna se iba fuera y se comía media dirección de correo. Aquí pasa a
     marca a todo lo ancho y los enlaces en dos columnas.
     Afecta a las ocho páginas: el fallo estaba en todas. */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }
  .footer-brand { grid-column: 1 / -1; }
  /* El correo es una sola «palabra» de 24 caracteres: sin esto no hay
     columna estrecha que lo aguante. */
  .footer-col a { overflow-wrap: anywhere; }

  /* 21.5 · «Lo que puedes esperar»: cuadrícula 2×2 con filos
     Cuatro datos en dos filas ocupan menos de la mitad que apilados, y
     leídos en rejilla se comparan mejor. */
  .panel { padding: 6px 20px; }
  .panel > h3 { margin-top: 20px; }
  /* Los selectores van repetidos con `.promise` delante a propósito: ese
     bloque define sus propios filos y márgenes, y sin subir aquí la
     especificidad ganaría él y la rejilla 2×2 no llegaría a aplicarse. */
  .stat-grid,
  .promise .stat-grid { grid-template-columns: 1fr 1fr; gap: 0; margin-top: 16px !important; }
  .stat,
  .promise .stat {
    padding: 15px 12px;
    border-left: 0;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transition: background-color 0.25s var(--ease);
  }
  .stat:nth-child(2n),
  .promise .stat:nth-child(2n) { border-right: 0; padding-right: 0; }
  .stat:nth-child(2n + 1),
  .promise .stat:nth-child(2n + 1) { padding-left: 0; }
  .stat:nth-last-child(-n + 2),
  .promise .stat:nth-last-child(-n + 2) { border-bottom: 0; }
  .promise { padding: 18px 20px; margin-top: 18px; }
  .reason-stage { min-height: 300px; padding: 20px; }
  .nudge { padding: 16px 18px; font-size: 0.88rem; }
  .stat:active { background: rgba(129, 140, 248, 0.07); }
  .stat b { font-size: 1.5rem; }
  .stat span { font-size: 0.77rem; }
  .panel .callout { margin: 18px 0 20px; padding: 14px 15px; font-size: 0.87rem; }

  /* 21.6 · Tecnologías: una sola fila que se desliza
     Doce etiquetas envueltas eran cuatro renglones; en fila son uno. */
  .chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    justify-content: flex-start !important;
    margin-inline: -24px;
    padding: 2px 24px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }

  /* 21.7 · Preguntas y cierre, más apretados */
  .faq summary { padding: 16px 0; font-size: 0.94rem; }
  .faq .faq-body { padding-bottom: 18px; }
  .cta { padding: 38px 22px; }
  .cta .btn-row { margin-top: 22px; }
  .cta .btn-row .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .steps.is-tabbed .step.is-current,
  .check-list.is-accordion li.is-open .cl-body { animation: none; }
  [data-rail] > .card { transition: none; }
}

/* --------------------------------------------------------------------------
   22. Impresión
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  body::after { display: none; }
  .site-header, .site-footer, .cta, .nav-toggle,
  .fx-field, .fx-hint, .showcase, .showcase-note { display: none !important; }
  a { color: #000; text-decoration: underline; }
  p, li, td, th, h1, h2, h3 { color: #000; }
  .js .tilt { transform: none !important; }
}