/* ══════════════════════════════════════════════════════════════════════════
   SECCIONES SINGULARES — piezas grandes que solo existen una vez.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════ HÉROE ═══════════════════════════════════ */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 7vw, 7rem) clamp(4rem, 2rem + 8vw, 8rem);
  min-height: min(92svh, 940px);
  display: flex;
  align-items: center;
}

.hero-grid {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  align-items: center;
  width: 100%;
}
@media (min-width: 62rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); }
}

.hero h1 {
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.045em;
  margin-block: var(--sp-5) var(--sp-5);
}

.hero .lead { font-size: clamp(1.08rem, 1rem + 0.55vw, 1.4rem); margin-bottom: var(--sp-6); }

.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); }

/* Micro-prueba bajo el CTA: quita el miedo justo donde se decide el clic */
.hero-micro {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  font-size: var(--t-xs); color: var(--fg-subtle);
}
.hero-micro span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-micro .ic { width: 15px; height: 15px; color: var(--ok); flex: none; }

/* Indicador de «sigue bajando» */
.hero-scroll {
  position: absolute;
  bottom: var(--sp-5); left: 50%;
  transform: translateX(-50%);
  display: grid; place-items: center;
  width: 26px; height: 42px;
  border: 1px solid var(--glass-border-hi);
  border-radius: var(--r-pill);
}
.hero-scroll::after {
  content: ""; width: 3px; height: 7px; border-radius: var(--r-pill);
  background: var(--accent);
  animation: baja 2s var(--e-inout) infinite;
}
@media (max-width: 62rem) { .hero-scroll { display: none; } }

/* ── El «núcleo» del héroe: la visual protagonista ───────────────────────── */
.nucleo { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; }

.nucleo-orbita {
  position: absolute;
  inset: 0;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  animation: orbita 36s linear infinite;
}
.nucleo-orbita:nth-child(2) { inset: 12%; animation-duration: 26s; animation-direction: reverse; }
.nucleo-orbita:nth-child(3) { inset: 26%; animation-duration: 18s; }

/* Cada satélite = un agente del sistema girando alrededor del cerebro */
.satelite {
  position: absolute;
  top: -9px; left: 50%;
  width: 18px; height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: var(--glow-accent);
}
.nucleo-orbita:nth-child(2) .satelite { background: var(--accent); }
.nucleo-orbita:nth-child(3) .satelite { background: var(--primary-hi); }

/* Centro: el cerebro */
.nucleo-centro {
  position: relative;
  width: 44%; aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(129,140,248,.4), rgba(34,211,238,.16) 62%, transparent 76%);
  border: 1px solid var(--glass-border-hi);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nucleo-centro::after {
  content: ""; position: absolute; inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.32), transparent 68%);
  filter: blur(22px);
  animation: respira 5s var(--e-inout) infinite;
}
.nucleo-centro .ic { position: relative; width: 44%; height: 44%; color: var(--accent-hi); }

/* Tarjetas flotantes de telemetría sobre el núcleo */
.nucleo-chip {
  position: absolute;
  z-index: 3;
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--fg);
}
.nucleo-chip .ic { width: 14px; height: 14px; flex: none; }
.nucleo-chip b { color: var(--fg-strong); font-weight: 600; }
.chip-1 { top: 6%;  right: -4%; animation: flota 7s var(--e-inout) infinite; }
.chip-2 { bottom: 16%; left: -6%; animation: flota 8.5s var(--e-inout) 1.2s infinite; }
.chip-3 { bottom: -2%; right: 8%; animation: flota 9.5s var(--e-inout) .6s infinite; }
.chip-1 .ic { color: var(--ok); }
.chip-2 .ic { color: var(--accent); }
.chip-3 .ic { color: var(--wait); }

@media (max-width: 62rem) {
  .nucleo { max-width: 26rem; margin-inline: auto; }
  .nucleo-chip { font-size: 0.62rem; padding: 0.5rem 0.7rem; }
}
/* [14-sep-2026] En un móvil esas fichas se quedaban en 9.9 px: 12 px como mínimo. */
@media (max-width: 600px) {
  .nucleo-chip { font-size: .75rem; }
}

/* ═══════════════════════════ PANEL «EN VIVO» ═════════════════════════════ */
/* Simula la consola del producto. Vender software = enseñar el software. */

.consola { overflow: hidden; }

.consola-barra {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0.85rem var(--sp-4);
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-bg);
}
.consola-luces { display: flex; gap: 0.4rem; }
.consola-luces i { width: 10px; height: 10px; border-radius: 50%; background: var(--glass-border-hi); }
.consola-luces i:first-child { background: color-mix(in srgb, var(--danger) 70%, transparent); }
.consola-luces i:nth-child(2) { background: color-mix(in srgb, var(--wait) 70%, transparent); }
.consola-luces i:last-child  { background: color-mix(in srgb, var(--ok) 70%, transparent); }
.consola-ruta { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--fg-subtle); letter-spacing: .06em; }
.consola-estado { margin-left: auto; display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: var(--t-mono); color: var(--ok); letter-spacing: .08em; }

.consola-cuerpo { position: relative; padding: var(--sp-5); min-height: 19rem; }

/* Barrido de luz que recorre el panel: sensación de «procesando» */
.consola-cuerpo::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34%;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.055), transparent);
  animation: barrido 6s var(--e-inout) infinite;
  pointer-events: none;
}

/* Línea de registro del motor */
.log { display: flex; gap: var(--sp-3); align-items: flex-start; padding: 0.62rem 0;
  border-bottom: 1px dashed var(--glass-border); font-size: var(--t-sm); }
.log:last-child { border-bottom: 0; }
.log-hora { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--fg-subtle);
  flex: none; padding-top: 0.22em; letter-spacing: .04em; }
.log-txt { color: var(--fg-muted); }
.log-txt b { color: var(--fg-strong); font-weight: 600; }
.log-ic { width: 17px; height: 17px; flex: none; margin-top: 0.16em; }
.log-ok   .log-ic { color: var(--ok); }
.log-wait .log-ic { color: var(--wait); }
.log-info .log-ic { color: var(--accent); }

/* Cursor parpadeante al final del registro */
.log-cursor { display: inline-block; width: 8px; height: 1.05em; vertical-align: text-bottom;
  background: var(--accent); animation: cursor 1.1s step-end infinite; margin-left: 3px; }

/* ═══════════════════════════ PROBLEMA / SOLUCIÓN ════════════════════════ */
.contraste { display: grid; gap: var(--sp-5); }
@media (min-width: 54rem) { .contraste { grid-template-columns: 1fr 1fr; } }

.contraste-col { padding: var(--sp-6); }
.contraste-col h3 { display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--sp-5); }
.contraste-col h3 .ic { width: 22px; height: 22px; flex: none; }
.contraste-col ul { display: flex; flex-direction: column; gap: var(--sp-4); }
.contraste-col li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--t-sm); }
.contraste-col li .ic { width: 18px; height: 18px; flex: none; margin-top: 0.2em; }

/* Con el vídeo del antes/después delante, el contraste pasa a ser apoyo:
   mismo texto (el que lee el buscador), la mitad de aire. */
.contraste-compacto { gap: var(--sp-4); margin-top: var(--sp-5); }
.contraste-compacto .contraste-col { padding: var(--sp-5); }
.contraste-compacto .contraste-col h3 { margin-bottom: var(--sp-4); }
.contraste-compacto .contraste-col ul { gap: var(--sp-3); }
.contraste-compacto .contraste-col li { font-size: var(--t-xs); }

.col-antes { border-color: color-mix(in srgb, var(--danger) 26%, transparent); }
.col-antes h3, .col-antes li .ic { color: var(--danger); }
.col-antes li { color: var(--fg-muted); }

.col-despues { border-color: color-mix(in srgb, var(--ok) 30%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 12%, transparent), var(--glow-soft); }
.col-despues h3, .col-despues li .ic { color: var(--ok); }
.col-despues li { color: var(--fg); }

/* ═══════════════════════════ SERVICIOS (mosaico) ════════════════════════ */
.servicio { display: flex; flex-direction: column; padding: var(--sp-5); height: 100%; }
.servicio-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  margin-bottom: var(--sp-4); }
.servicio h3 { font-size: 1.1rem; margin-bottom: var(--sp-2); }
.servicio p { font-size: var(--t-sm); color: var(--fg-muted); flex: 1; }
.servicio-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--glass-border); }
.servicio-precio { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-subtle); }
.servicio-precio b { color: var(--accent); font-weight: 600; }

/* ═══════════════════════════ CALCULADORA ════════════════════════════════ */
.calc { display: grid; gap: var(--sp-6); }
@media (min-width: 60rem) { .calc { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; } }

.calc-panel { padding: var(--sp-6); }
.calc-lista { display: flex; flex-direction: column; gap: var(--sp-3); }

.calc-fila {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.calc-fila:has(input:checked) { border-color: var(--accent); background: var(--grad-brand-soft); }
.calc-fila input { width: 20px; height: 20px; flex: none; accent-color: var(--primary); }
.calc-fila label { flex: 1; font-size: var(--t-sm); font-weight: 500; }
.calc-fila label small { display: block; font-weight: 400; color: var(--fg-subtle); font-size: var(--t-xs); }
.calc-fila .precio { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted);
  text-align: right; flex: none;
  font-variant-numeric: tabular-nums; /* cifras de ancho fijo: la columna de precios no baila */ }
.calc-fila .precio b { display: block; color: var(--fg-strong); font-size: var(--t-sm); }
/* «sin alta» ocupa el mismo hueco que la cifra de alta para que las dos ramas
   de la fila se alineen, pero NO es un precio: se queda con el tono apagado
   de la etiqueta en vez de robar el énfasis de la cuota mensual. */
.calc-fila .precio b.sin-alta { color: var(--fg-muted); font-size: var(--t-xs); font-weight: 400; }

/* Resumen pegajoso: el total sigue al usuario mientras elige */
.calc-total { padding: var(--sp-6); position: sticky; top: calc(var(--nav-h) + var(--sp-4)); }
.calc-total-fila { display: flex; justify-content: space-between; align-items: baseline;
  padding-block: var(--sp-3); border-bottom: 1px solid var(--glass-border); font-size: var(--t-sm); }
.calc-total-fila:last-of-type { border-bottom: 0; }
.calc-total-fila span { color: var(--fg-muted); }
.calc-total-fila b { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.03em;
  color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.calc-total-fila.destacada b { font-size: 2.2rem; background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.calc-nota { font-size: var(--t-xs); color: var(--fg-subtle); margin-top: var(--sp-4); }

/* ═══════════════════════════ PESTAÑAS ═══════════════════════════════════ */
.tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.tab {
  padding: 0.62rem 1.15rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  color: var(--fg-muted);
  font-size: var(--t-sm); font-weight: 500;
  transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-out);
}
.tab:hover { color: var(--fg-strong); border-color: var(--glass-border-hi); }
.tab[aria-selected="true"] { background: var(--grad-cta); border-color: transparent;   /* [14-sep-2026] texto blanco ≥ 4.5:1 */
  color: var(--on-primary); font-weight: 600; }
.tab-panel[hidden] { display: none; }

/* ═══════════════════════════ COMPARATIVA ════════════════════════════════ */
.comparativa { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 40rem;
  /* Estándar §6: cifras tabulares en tablas de precios/comparativa — los
     números quedan alineados en vertical y no bailan al cambiar de periodo. */
  font-variant-numeric: tabular-nums; }
.comparativa th, .comparativa td { padding: var(--sp-4) var(--sp-3); text-align: left;
  border-bottom: 1px solid var(--glass-border); }
.comparativa thead th { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-subtle); font-weight: 600; }
.comparativa tbody th { font-weight: 500; color: var(--fg); }
.comparativa td { text-align: center; color: var(--fg-muted); }
.comparativa .col-dv { background: var(--grad-brand-soft); }
.comparativa .col-dv td, .comparativa thead .col-dv { color: var(--fg-strong); }
.comparativa .ic { width: 19px; height: 19px; display: inline-block; }
.comparativa .si { color: var(--ok); }
.comparativa .no { color: var(--fg-subtle); opacity: .5; }

/* ═══════════════════════════ VÍDEO DEL MENÚ (chatbots) ══════════════════
   La animación del comercial IA, arriba del todo. Mismo cristal que las
   tarjetas, con un bisel fino de padding. El vídeo es OSCURO a propósito
   —es la pantalla del producto—, así que en tema claro NO se invierte como
   la atmósfera de la portada: una captura con texto no sobrevive al filtro. */
.video-menu { margin: var(--sp-6) 0 0; padding: var(--sp-2); }
.video-menu video {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: calc(var(--r-xl) - var(--sp-2));
  background: #0B0F0C; /* el tono del primer fotograma: sin destello al cargar */
}
/* [14-sep-2026] En claro, el vídeo oscuro sobre cristal blanco parecía un agujero en
   la página. Se enmarca como lo que es, una pantalla del producto: bisel oscuro y
   sombra (mismo relleno, así que no se mueve nada). */
[data-theme="light"] .video-menu {
  background: var(--pantalla-bg);
  border-color: var(--pantalla-borde);
  box-shadow: var(--pantalla-sombra);
}