/* ============================================================
   SAINEXP — Landing pública (sainexp.com)
   Concepto: "la página como conversación". Navegación en un dock
   flotante estilo barra de chat (scrollspy), cabecera mínima,
   secciones numeradas con hairline editorial, display Unbounded
   en cuerpos contenidos. La firma cian→magenta se dosifica.
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  /* lo que el navegador muestre sin pintar durante un fling, que al menos
     sea del color del lienzo */
  background: #07090f;
  /* La base tipográfica escala con el ancho: todo el layout (en rem)
     crece proporcionalmente. 1920 ≈ 17px; tope 20px para que en ultrawide
     el texto no se sienta desmesurado. Expresada en rem para RESPETAR el
     tamaño de letra configurado por el usuario. */
  font-size: clamp(0.9375rem, 0.6vw + 0.325rem, 1.25rem);
  /* Scrollbar acorde al tema (Firefox) */
  scrollbar-color: #232b3b var(--bg);
  scrollbar-width: thin;
}

/* Scrollbar acorde al tema (WebKit): delgado, oscuro, degradado al agarrar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: #232b3b;
  border-radius: 8px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--cyan-deep), var(--magenta-deep)); }

body {
  margin: 0;
  position: relative; /* ancla del .backdrop absoluto */
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* Solo las páginas con dock flotante (landing) reservan aire abajo para que
   no tape el footer; las legales/404 no tienen dock y no deben dejar ese hueco. */
body.has-dock { padding-bottom: 96px; }

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

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

/* Foco visible consistente en todo el sitio (teclado) */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Los destinos de navegación interna reciben foco programático (para SR/teclado)
   pero NO deben pintar anillo: el usuario de mouse solo quiso scrollear */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

/* Saltar al contenido: SOLO aparece navegando con teclado (focus-visible);
   un clic de mouse jamás lo muestra */
.skip-link {
  position: fixed; top: -120px; left: 12px; z-index: 100;
  padding: 10px 18px;
  background: var(--bg-raised-2);
  color: var(--text);
  border: 1px solid var(--cyan);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 0.9rem;
}
.skip-link:focus-visible { top: 12px; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: 64rem; }

/* ---------- Fondo atmosférico ----------
   ABSOLUTO, no fixed: un fondo fixed obliga al móvil a recomponerlo en cada
   frame de scroll y agrava los huecos sin pintar en flings rápidos. Absoluto
   se pinta una vez dentro de la capa que scrollea. */
.backdrop {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(255, 61, 207, 0.07), transparent 60%),
    radial-gradient(1000px 700px at 0% 10%, rgba(46, 230, 255, 0.08), transparent 55%),
    radial-gradient(800px 800px at 50% 110%, rgba(122, 122, 255, 0.06), transparent 60%),
    var(--bg);
}
.backdrop::after {
  /* grano sutil para quitar el "plástico" del degradado */
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  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.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Hilo de progreso de lectura ---------- */
.progress-line {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--gradient-brand);
  z-index: 80;
}

/* ---------- Tipografía base ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.18;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.35; }
p { margin: 0 0 1em; }

.lead { font-size: clamp(1rem, 1.2vw, 1.12rem); color: var(--text-soft); max-width: 58ch; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 16px;
}

.grad-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Cabecera de sección numerada ---------- */
.sec-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.sec-num {
  font-family: var(--font-display);
  font-weight: 800; font-size: 0.95rem;
}
.sec-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.sec-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }

/* ---------- Wordmark ---------- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--text);
  display: inline-flex;
}
.wordmark .wm-ai {
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wordmark-sm { font-size: 1rem; }
.wm-inline { font-family: var(--font-display); font-weight: 800; }
.wm-inline em {
  font-style: normal;
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Cabecera mínima ---------- */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 92px; }
.header-status {
  font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.08em;
  color: var(--text-soft); margin: 0;
  display: inline-flex; align-items: center; gap: 9px;
}
.header-status .dot-online { width: 9px; height: 9px; }
.dot-online { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; }
.header-status .dot-online { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------- Dock de navegación (la "barra de chat" del sitio) ---------- */
.dock {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 70;
  display: flex; align-items: center; gap: 4px;
  padding: 7px;
  border-radius: var(--radius-pill);
  background: rgba(12, 16, 24, 0.82);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border-strong);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.chip {
  padding: 13px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.86rem; font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  border: 1px solid transparent;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.chip:hover { color: var(--text); background: rgba(151, 168, 200, 0.08); }
.chip.active {
  color: var(--text);
  background: var(--gradient-brand-soft);
  border-color: rgba(46, 230, 255, 0.3);
}
.dock-send {
  width: 44px; height: 44px; margin-left: 4px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gradient-brand);
  color: #06070c;
  box-shadow: var(--glow-cta);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.dock-send:hover { transform: translateY(-2px) rotate(-8deg); box-shadow: 0 10px 34px rgba(46, 230, 255, 0.3), 0 4px 12px rgba(255, 61, 207, 0.24); }
/* El estado "sección actual" usa box-shadow, NO outline: el outline queda
   reservado para el foco de teclado (:focus-visible) y no deben confundirse */
.dock-send.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(46, 230, 255, 0.55), var(--glow-cta); }

/* ---------- Volver al inicio (flotante, fuera del dock) ---------- */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 70;
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-soft);
  border: 1px solid var(--border-strong);
  background: rgba(12, 16, 24, 0.82);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity var(--t-med), transform var(--t-med), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--text); border-color: var(--cyan); box-shadow: var(--glow-cyan); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: 0.94rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.btn-primary {
  background: var(--gradient-brand);
  color: #06070c;
  box-shadow: var(--glow-cta);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 38px rgba(46, 230, 255, 0.3), 0 4px 14px rgba(255, 61, 207, 0.24); }
.btn-ghost {
  color: var(--text);
  border-color: var(--border-strong);
  background: rgba(151, 168, 200, 0.04);
}
.btn-ghost:hover { border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.btn-lg { padding: 15px 34px; font-size: 1.02rem; }

/* ---------- Hero ---------- */
/* El padding inferior reserva la franja del dock: nada del hero debe tocarlo */
.hero { padding: clamp(110px, 9vw, 170px) 0 clamp(96px, 8vw, 130px); overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(56px, 7vw, 150px); align-items: center;
}
.hero-copy h1 { max-width: 14ch; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin: 30px 0 48px; }

.hero-stats { display: flex; gap: clamp(36px, 3.5vw, 64px); margin: 0; flex-wrap: wrap; }
.hero-stats > div { display: flex; flex-direction: column; }
.stat-num {
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 800;
}
.hero-stats dd { margin: 4px 0 0; color: var(--text-muted); font-size: var(--fs-small); }

/* ---------- Chat mockup ---------- */
.hero-chat { position: relative; }
.hero-chat::before {
  content: ""; position: absolute; inset: -8% -6%;
  background: var(--gradient-brand-soft);
  filter: blur(46px);
  border-radius: 50%;
  z-index: -1;
}
.chat-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  /* El ancho sigue a la ALTURA disponible para mantener una proporción de
     teléfono (~1.3-1.4) en cualquier pantalla — en monitores anchos y BAJOS
     (2560x1080) un ancho fijo dejaba la tarjeta cuadrada, y un factor muy
     bajo la dejaba flaca con los mensajes partidos en 3 líneas */
  max-width: min(28vw, 30rem, calc((100vh - 19rem) * 0.72));
  margin-inline: auto;
}
.chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised-2);
}
.chat-head strong { display: block; font-size: 0.92rem; }
.chat-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gradient-brand);
  color: #06070c; font-weight: 800; font-family: var(--font-display);
}
.chat-status { font-size: 0.76rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
/* Pausa/reanudar de la animación (lo inyecta el JS; WCAG 2.2.2) */
.chat-pause {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(151, 168, 200, 0.07);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.chat-pause:hover { color: var(--text); border-color: var(--border-strong); }
.chat-pause .ico-play { display: none; }
.chat-pause.paused .ico-pause { display: none; }
.chat-pause.paused .ico-play { display: block; }

.chat-badge {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em;
  color: var(--cyan);
  border: 1px solid rgba(46, 230, 255, 0.35);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  white-space: nowrap;
}

.chat-body {
  padding: 20px 18px 18px;
  display: flex; flex-direction: column; gap: 10px;
  /* altura fija con scroll interno: la conversación larga "corre" dentro
     de la tarjeta como un chat real (el JS la reproduce y auto-scrollea).
     Proporción VERTICAL como un teléfono, pero acotada a la altura REAL del
     viewport (100vh menos header del hero, cabecera del chat y franja del
     dock) para que la tarjeta nunca colisione con el dock. */
  height: clamp(22rem, calc(100vh - 26rem), 36rem);
  overflow-y: auto;
  scrollbar-width: none;
}
.chat-body::-webkit-scrollbar { display: none; }
.msg {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.9rem; line-height: 1.5;
  margin: 0;
  flex-shrink: 0;
}
.msg-in { background: var(--bg-raised-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg-out {
  background: linear-gradient(135deg, rgba(46, 230, 255, 0.13), rgba(255, 61, 207, 0.10));
  border: 1px solid rgba(46, 230, 255, 0.22);
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}
.msg-product {
  display: block; margin-top: 8px; padding: 9px 12px;
  background: rgba(7, 9, 15, 0.55);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.84rem;
}
.chat-event {
  align-self: center; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em;
  color: var(--ok);
  border: 1px dashed rgba(61, 220, 151, 0.4);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  margin: 6px 0 0;
}

/* Entrada de cada mensaje cuando el reproductor lo añade */
.appear { animation: msg-pop 300ms var(--ease-out); }
@keyframes msg-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* Burbuja "escribiendo…" (tres puntos) */
.typing { display: inline-flex; gap: 5px; padding: 13px 15px; }
.tdot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-muted);
  animation: tdot 1.1s ease-in-out infinite;
}
.tdot:nth-child(2) { animation-delay: 0.15s; }
.tdot:nth-child(3) { animation-delay: 0.3s; }
@keyframes tdot {
  0%, 60%, 100% { opacity: 0.35; transform: none; }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ---------- Secciones ---------- */
.section { padding: clamp(84px, 7vw, 120px) 0; scroll-margin-top: 12px; }
.section h2 { max-width: 26ch; }

.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 1.8vw, 36px); margin-top: clamp(40px, 3.5vw, 64px); }
.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(28px, 2.4vw, 40px) clamp(26px, 2.2vw, 38px);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.card p { color: var(--text-soft); font-size: 0.95rem; margin: 0; }

/* ---------- Pasos ---------- */
.steps {
  list-style: none; margin: clamp(48px, 4vw, 72px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 1.8vw, 36px);
}
.step {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(26px, 2.4vw, 40px) clamp(24px, 2.2vw, 36px);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.step:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.step-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.4rem; display: block; margin-bottom: 12px;
}
.step p { color: var(--text-soft); font-size: 0.93rem; margin: 0; }

/* ---------- Features ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 1.8vw, 36px); margin-top: clamp(44px, 3.5vw, 68px); }
/* En ultrawide las 6 funciones caben en una sola fila balanceada */
@media (min-width: 2400px) { .feature-grid { grid-template-columns: repeat(6, 1fr); } }

/* Ultrawide (≥2200px): sobra espacio horizontal y la altura suele ser la de
   un monitor 1080 — la tarjeta del chat gana ancho y alto para que la
   cabecera quepa en una línea y el hilo tenga presencia */
@media (min-width: 2200px) {
  .chat-body { height: clamp(22rem, calc(100vh - 21rem), 38rem); }
  .chat-card { max-width: min(30rem, calc((100vh - 15rem) * 0.85)); }
  .chat-head strong { white-space: nowrap; }
}
.feature {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(26px, 2.4vw, 40px) clamp(24px, 2.2vw, 36px);
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.feature:hover { border-color: rgba(46, 230, 255, 0.35); transform: translateY(-3px); box-shadow: var(--glow-cyan); }
.feature h3 { display: flex; align-items: center; gap: 10px; font-size: 0.98rem; }
.f-ico { font-size: 1.1rem; }
.feature p { color: var(--text-soft); font-size: 0.93rem; margin: 0; }

/* ---------- Marca / EXP ---------- */
.marca-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(64px, 7vw, 150px); align-items: center; }
.exp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.exp-list li {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 24px;
  overflow: hidden;
}
/* Acento degradado SOLO a la izquierda (border-image pintaría los 4 lados
   y mataría el border-radius; el pseudo-elemento no tiene ese conflicto) */
.exp-list li::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gradient-brand);
}
.exp-tag {
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  display: block; margin-bottom: 8px; letter-spacing: 0.02em;
}
.exp-list p { color: var(--text-soft); font-size: 0.95rem; margin: 0; }

/* ---------- FAQ ---------- */
.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  margin-top: 14px;
  overflow: hidden;
  transition: border-color var(--t-fast);
}
.faq-item:first-of-type { margin-top: 40px; }
.faq-item[open] { border-color: var(--border-strong); }
.faq-item summary {
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 600;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+" / "";
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 400;
  color: var(--cyan);
  transition: transform var(--t-fast);
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 22px 20px; color: var(--text-soft); margin: 0; }

/* ---------- CTA final ---------- */
.cta-final { padding-bottom: clamp(80px, 7vw, 120px); }
.cta-card {
  text-align: center;
  background:
    linear-gradient(var(--bg-raised), var(--bg-raised)) padding-box,
    var(--gradient-brand) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: clamp(56px, 5vw, 80px) 40px clamp(44px, 4vw, 60px);
  position: relative;
  overflow: hidden;
}
.cta-card::before {
  /* el halo se aleja de los lados para no lavar el borde degradado */
  content: ""; position: absolute; inset: -40% 12% auto;
  height: 70%;
  background: var(--gradient-brand-soft);
  filter: blur(50px);
  pointer-events: none;
}
.cta-card .lead { margin-inline: auto; }
.cta-card .btn { margin-top: 18px; }
.cta-note { margin: 22px 0 0; color: var(--text-muted); font-size: var(--fs-small); }

/* ---------- Footer (único para TODAS las páginas) ---------- */
.site-footer { border-top: 1px solid var(--border); padding: clamp(56px, 5vw, 84px) 0 28px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(36px, 4vw, 90px);
  align-items: start;
}
.footer-tag { color: var(--text-muted); font-size: var(--fs-small); margin: 12px 0 0; max-width: 32ch; }

.f-social { display: flex; gap: 10px; margin-top: 22px; }
.soc {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--border-strong);
  background: rgba(151, 168, 200, 0.04);
  color: var(--text-soft);
  transition: color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
/* con href (perfil publicado) cobra vida; sin href es un anuncio de marca */
.soc[href]:hover { color: var(--text); border-color: var(--cyan); box-shadow: var(--glow-cyan); transform: translateY(-2px); }
.soc:not([href]) { opacity: 0.55; }

.f-head {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.f-col ul { list-style: none; margin: 0; padding: 0; }
.f-col a {
  color: var(--text-soft); text-decoration: none;
  font-size: var(--fs-small);
  display: inline-block; padding-block: 8px;
  transition: color var(--t-fast);
}
.f-col a:hover { color: var(--cyan); }
.f-col li > span { color: var(--text-muted); font-size: var(--fs-small); display: inline-block; padding-block: 8px; }

.footer-base {
  margin-top: clamp(44px, 4vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  color: var(--text-muted); font-size: 0.8rem;
}
.footer-base p { margin: 0; }
.f-spark { font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.06em; }

@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } .f-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Páginas legales ---------- */
/* Mismo alto y wordmark que la cabecera de la landing, para que el logo no
   "cambie de tamaño" al navegar entre la landing y las páginas legales */
.legal-header {
  display: flex; align-items: center; justify-content: space-between;
  height: 92px;
}
.legal-back {
  font-size: 0.9rem; color: var(--text-soft); text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.legal-back:hover { color: var(--cyan); }
.legal {
  max-width: 72ch; margin-inline: auto;
  padding: clamp(36px, 5vw, 64px) var(--gutter) clamp(72px, 7vw, 110px);
}
/* En pantallas grandes el documento deja de ser una columna centrada:
   título+fecha fijos a la izquierda, contenido a la derecha (editorial) */
@media (min-width: 1200px) {
  .legal {
    max-width: var(--container);
    display: grid;
    grid-template-columns: minmax(16rem, 24rem) minmax(0, 72ch);
    gap: clamp(48px, 7vw, 150px);
    align-items: start;
    justify-content: center;
  }
  /* Columna izquierda sticky: el título + TOC acompañan la lectura pegados
     arriba, y se sueltan de forma natural cuando termina el contenido y
     aparece el footer (que ya no es parte de la política). */
  .legal-head {
    position: sticky;
    top: 96px;
    align-self: start;
  }
  .legal-head h1 { max-width: 14ch; }
}
.legal h1 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin-bottom: 0.3em; }
.legal-body h2 { scroll-margin-top: 2rem; }

/* Tabla de contenidos (la inyecta el JS en la columna sticky) */
.legal-toc { margin-top: 30px; }
.legal-toc ul { list-style: none; margin: 0; padding: 0; }
.legal-toc a {
  display: block;
  padding: 7px 0 7px 14px;
  border-left: 2px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--fs-small);
  line-height: 1.35;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.legal-toc a:hover { color: var(--text-soft); border-left-color: var(--border-strong); }
.legal-toc a.active { color: var(--cyan); border-left-color: var(--cyan); }
/* Solo aporta en el layout editorial de 2 columnas; en móvil el doc fluye */
@media (max-width: 1199px) { .legal-toc { display: none; } }
.legal h2 { font-size: clamp(1.05rem, 1.6vw, 1.3rem); margin-top: 2em; }
.legal-updated { color: var(--text-muted); font-size: var(--fs-small); font-family: var(--font-mono); }
.legal p, .legal li { color: var(--text-soft); }
.legal ul, .legal ol { padding-left: 1.4em; }
.legal li { margin-bottom: 0.5em; }
.legal a { color: var(--cyan); }
.legal strong { color: var(--text); }

/* ---------- Reveal on scroll (solo escritorio; ver main.js) ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out); }
.reveal.visible { opacity: 1; transform: none; }
/* Red de seguridad sin JS y en táctiles: contenido siempre visible */
@media (hover: none), (pointer: coarse) {
  .reveal { opacity: 1; transform: none; transition: none; }

  /* backdrop-filter es caro de componer en GPU móvil durante el scroll:
     en táctiles el dock y la flecha usan fondo casi-sólido sin blur */
  .dock, .to-top { backdrop-filter: none; background: rgba(10, 13, 20, 0.96); }
}
.d-1 { transition-delay: 90ms; }
.d-2 { transition-delay: 180ms; }
.d-3 { transition-delay: 270ms; }
.d-4 { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .appear { animation: none; }
  .header-status .dot-online { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero { padding-top: 120px; }
  /* En columna única la tarjeta scrollea con la página (no compite con el
     dock como en escritorio): vertical como un teléfono, pero dejando que
     la tarjeta COMPLETA (hilo + cabecera) quepa holgada en el viewport sin
     exigir una posición de scroll milimétrica */
  .chat-body { height: clamp(24rem, 58vh, 36rem); }
  .chat-card { max-width: 28rem; } /* en flujo: no aplica la fórmula por altura */
  .cards-3, .feature-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .marca-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 640px) {
  .cards-3, .feature-grid, .steps { grid-template-columns: 1fr; }
  .hero-stats { gap: 28px; }
  .header-status { display: none; }

  .dock { left: 12px; right: 12px; transform: none; justify-content: space-between; }
  .chip { padding: 9px 10px; font-size: 0.78rem; }
  .hide-sm { display: none; }
  /* en móvil el dock ocupa todo el ancho abajo: la flecha flota encima de él */
  .to-top { right: 14px; bottom: 84px; }

  /* la tarjeta del CTA respira a los lados: que el borde degradado SE VEA */
  .cta-final .container { padding-inline: 26px; }
  .cta-card { padding: 48px 22px 40px; }
}