/* ============================================================
   IntelliSight — componentes de la propuesta de reestructuración
   Se carga DESPUÉS de base.css. No redefine ningún color:
   todo sale de los tokens --* que base.css ya declara.
   ============================================================ */

/* Los marcadores PENDIENTE / notas internas se eliminaron: lo que falta por
   definir vive en comentarios de build.py y en REVISION.md, nunca en el HTML
   que ve un cliente. No volver a introducir una clase para esto.          */

/* ---------------------------------------------- marca y ambiente */
:root {
  --nav-h: 96px;              /* el logo creció otra vez y pide aire */
}

/* El botón principal brillaba demasiado: la sombra cian bajaba el contraste
   del texto que tiene alrededor. −25 % de intensidad y menos difusión.   */
.btn-primary {
  box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset,
              0 8px 20px -12px rgba(0,205,255,0.65);
}
.btn-primary:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,0.24) inset,
              0 12px 26px -12px rgba(0,205,255,0.75);
}

/* La cuadrícula de fondo se mantiene, pero baja de saturación: competía con
   el texto secundario. También se separa la retícula para que pese menos.  */
body::before {
  background:
    radial-gradient(1200px 700px at 82% -10%, rgba(0,205,255,0.07), transparent 60%),
    radial-gradient(900px 600px at 2% 8%, rgba(167,139,250,0.045), transparent 58%),
    linear-gradient(90deg, rgba(0,205,255,0.010) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(0,205,255,0.010) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
}

/* Contraste del texto secundario. gray-500 (#7a8194) sobre el fondo profundo
   quedaba por debajo de lo legible en párrafos largos; se sube a gray-300
   donde el texto es contenido, no una etiqueta.                            */
.section-desc, .microcopy, .hero-support, .flow-s, .benefit p,
.card p, .step p, .plan-for, .cmp td, .footer-tagline, .footer-links-col a,
.detect-col li, .versus-col li, .support-card p, .split-cta-fine {
  color: var(--gray-300);
}
.demo-scene figcaption, .hero-closer, .cmp-note { color: var(--gray-300); opacity: 0.85; }

/* ---------------------------------------------- logotipo
   El logotipo YA CONTIENE el slogan, así que es la marca y el mensaje a la
   vez: por eso crece de nuevo (+17% escritorio, +12% móvil) y por eso el
   slogan no se repite ni en el hero ni en el pie.                        */
.nav-logo-img { height: 56px; }
.footer-brand-img { height: 58px; }
.nav { gap: var(--s-6); }
.nav-links { align-items: center; }
.nav-cta { height: 42px; }

/* ---------------------------------------------- corrección del nav
   base.css oculta .nav-cta-mobile, pero .btn-primary viene después y
   reinstala display:inline-flex, así que el CTA salía DOS VECES en
   escritorio. Se gana con especificidad, no reordenando base.css.      */
.nav-links .nav-cta-mobile { display: none; }

/* ---------------------------------------------- nav de anclas (sticky) */
.anchornav {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: rgba(4,8,17,0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-faint);
}
.anchornav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-6);
  display: flex; gap: var(--s-1); align-items: center;
  overflow-x: auto; scrollbar-width: none;
  height: 46px;
}
.anchornav-inner::-webkit-scrollbar { display: none; }
.anchornav a {
  flex-shrink: 0;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-xs); font-weight: 600;
  color: var(--gray-300); text-decoration: none;
  border-radius: var(--r-sm);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.anchornav a:hover { color: var(--white); background: rgba(255,255,255,0.05); }
.anchornav a.active { color: var(--cyan-primary); background: rgba(0,205,255,0.10); }

/* ---------------------------------------------- hero de producto
   Una sola idea en el primer pantallazo. Jerarquía deliberada:
   título > subtítulo > línea de apoyo > botones > garantía en una línea.
   Cada nivel pesa visiblemente menos que el anterior.                   */
/* el titular son DOS frases; se dimensiona para que la primera quepa
   en un renglón y el salto caiga donde debe, no a media frase. */
.hero--is .hero-title { font-size: clamp(1.95rem, 3.2vw, 2.75rem); }
/* el hero de producto no lleva visual pesada a la derecha, así que el
   texto puede tomar más ancho y el titular cabe sin partirse. */
.hero--is .hero-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
.hero--is .hero-sub { font-size: var(--t-lg); max-width: 48ch; }
.hero-support {
  margin-top: var(--s-4); max-width: 52ch;
  font-size: var(--t-sm); color: var(--gray-500); line-height: 1.65;
}
.hero-guarantee {
  margin-top: var(--s-5);
  display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: var(--s-2) var(--s-4);
  border: 1px solid rgba(0,232,157,0.28); border-radius: var(--r-pill);
  background: rgba(0,232,157,0.06);
  font-size: var(--t-xs); color: var(--gray-100);
}
.hero-guarantee::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-green); box-shadow: 0 0 8px var(--accent-green);
}
.hero-guarantee a { color: var(--accent-green); text-decoration: none; border-bottom: 1px solid rgba(0,232,157,0.4); }
.hero-guarantee a:hover { color: var(--white); border-bottom-color: var(--white); }

.hero-flow { align-self: center; }
.hero-closer {
  margin-top: var(--s-5); text-align: center;
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--gray-500); letter-spacing: 0.02em;
}

/* ---------------------------------------------- hero de BML Tech
   El titular es largo; se reduce ~18% en escritorio y ~22% en móvil, y se
   limita el ancho para que no se abra en siete u ocho renglones.         */
.hero--bml .hero-title {
  font-size: clamp(1.7rem, 2.7vw, 2.45rem);
  max-width: 21ch;
  /* reparte los renglones para que ninguna palabra quede sola al final */
  text-wrap: balance;
}
.hero--bml .hero-sub { font-size: var(--t-md); max-width: 46ch; }
.hero--bml .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
/* sin etiqueta arriba, el título y la tarjeta arrancan a la misma altura */
.hero--bml .hero-title { margin-top: 0; }

/* los heroes de esta propuesta llevan menos texto: 92vh dejaba un hueco
   muerto debajo de los botones. El padding superior se ajusta al header
   más alto sin abrir un vacío.                                          */
.hero--bml, .hero--is {
  min-height: 0;
  padding: calc(var(--nav-h) + var(--s-8)) 0 var(--s-10);
}
/* el hero ya respira por dentro: la sección siguiente no necesita otros 112px */
.hero + .section, .hero + .benefits { padding-top: var(--s-16); }
.hero--is .hero-title { text-wrap: balance; }

/* ---------------------------------------------- tarjeta de producto
   Una sola columna, alineada a la izquierda, sin logotipo suelto en una
   esquina: etiqueta, nombre, titular, texto, beneficios y botones juntos. */
.product-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--s-6) var(--s-8) var(--s-8);
  border: 1px solid rgba(0,205,255,0.28);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  box-shadow: var(--shadow-3);
}
.product-card-label {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan-primary);
}
.product-card-label::before {
  content: ''; width: 18px; height: 1px;
  background: var(--cyan-primary); box-shadow: 0 0 8px var(--cyan-primary);
}
.product-card-name {
  margin-top: var(--s-3);
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 900;
  color: var(--white); line-height: 1;
}
.product-card-name span { color: var(--cyan-primary); }
.product-card h3 {
  margin-top: var(--s-3);
  font-family: var(--font-display); font-size: var(--t-md); font-weight: 700;
  color: var(--white); line-height: 1.35;
}
.product-card > p {
  margin-top: var(--s-3);
  font-size: var(--t-sm); color: var(--gray-300); line-height: 1.65;
}
.product-card .check-list { margin-top: var(--s-4); width: 100%; gap: var(--s-2); }
.product-card-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-6); width: 100%; }

/* ---------------------------------------------- adaptación al espacio
   Diagrama esquemático, deliberadamente NO una captura de la consola:
   representa el concepto sin inventar una interfaz que no he visto.    */
.adapt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-10); align-items: center; }
.adapt-diagram {
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  background: var(--surface-sunken); overflow: hidden;
}
.adapt-diagram svg { display: block; width: 100%; height: auto; }
.adapt-diagram figcaption {
  padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line-faint);
  font-family: var(--font-mono); font-size: var(--t-micro); color: var(--gray-300);
}
.adapt-legend { display: flex; flex-direction: column; gap: var(--s-5); }
.adapt-item { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.adapt-swatch { width: 14px; height: 14px; border-radius: 3px; margin-top: 5px; }
.adapt-swatch--alert { background: rgba(211,53,79,0.35); border: 1px solid var(--red-alert); }
.adapt-swatch--safe  { background: rgba(0,232,157,0.25); border: 1px solid var(--accent-green); }
.adapt-swatch--line  { background: none; border: 0; border-top: 2px dashed var(--cyan-primary); height: 0; margin-top: 11px; }
.adapt-item h3 { font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700; color: var(--white); }
.adapt-item p { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--gray-300); line-height: 1.65; }
.adapt-example {
  margin-top: var(--s-8); padding: var(--s-5) var(--s-6);
  border-left: 2px solid var(--accent-amber);
  background: rgba(240,160,48,0.05);
  font-size: var(--t-sm); color: var(--gray-100); line-height: 1.75;
}
.adapt-example strong { color: var(--white); }

/* ---------------------------------------------- sección de identidad */
.identity {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: var(--s-12); align-items: center;
}
.identity h2 {
  font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 900;
  color: var(--white); line-height: 1.14;
}
.identity h2 em { font-style: normal; color: var(--cyan-primary); }
.identity p { margin-top: var(--s-5); font-size: var(--t-md); color: var(--gray-300); line-height: 1.75; max-width: 54ch; }

/* ---------------------------------------------- franja de beneficios
   Tres mensajes completos, no cuatro datos sueltos.                     */
.benefits { position: relative; z-index: 1; padding: var(--s-10) 0 var(--s-4); }
.benefits-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  padding-top: var(--s-8);
  border-top: 1px solid var(--line-faint);
}
.benefit h3 {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700;
  color: var(--white); line-height: 1.35;
}
.benefit p { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--gray-500); line-height: 1.6; }

/* ---------------------------------------------- tarjetas parejas
   Igualar alturas y alinear títulos y textos: las tarjetas con menos texto
   dejaban un hueco inferior que rompía la retícula.                      */
.grid { align-items: stretch; }
.grid .card { display: flex; flex-direction: column; }
.grid .card h3 { min-height: 2.6em; display: flex; align-items: flex-end; }
.grid .card p { flex: 1; }
.grid .card .check-list { margin-top: auto; padding-top: var(--s-4); }
.grid--4 .card h3 { min-height: 0; }

/* numeración de las tarjetas del flujo de cuatro pasos */
.card-n {
  width: 26px; height: 26px; margin-bottom: var(--s-4);
  display: grid; place-items: center;
  border: 1px solid rgba(0,205,255,0.35); border-radius: 50%;
  background: rgba(0,205,255,0.08);
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--cyan-primary);
}

/* introducción única encima de las tarjetas de plan */
.plans-lede {
  margin-bottom: var(--s-6);
  font-size: var(--t-sm); color: var(--gray-300);
}

/* ---------------------------------------------- flujo cámara→enlace→IA→WhatsApp */
.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  align-items: stretch;
}
/* dentro del hero el flujo vive en media columna: 2x2 respira mejor */
.hero .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.hero .flow .flow-step + .flow-step::before { display: none; }
.flow-step {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface-1);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-lg);
}
.flow-step + .flow-step::before {
  content: '';
  position: absolute; left: calc(var(--s-3) * -1 - 1px); top: 50%;
  width: var(--s-3); height: 1px;
  background: linear-gradient(90deg, rgba(0,205,255,0.15), rgba(0,205,255,0.6));
}
.flow-step--accent { border-color: rgba(0,205,255,0.32); background: var(--surface-2); }
.flow-step--alert  { border-color: rgba(0,232,157,0.30); }
.flow-ico {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: rgba(255,255,255,0.03);
  color: var(--cyan-primary);
}
.flow-step--alert .flow-ico { color: var(--accent-green); border-color: rgba(0,232,157,0.32); }
.flow-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.flow-n { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--gray-500); letter-spacing: 0.14em; }
.flow-t { font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700; color: var(--white); line-height: 1.3; }
.flow-s { font-size: var(--t-xs); color: var(--gray-500); line-height: 1.55; }

/* ---------------------------------------------- demo visual: escena + WhatsApp */
.demo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--s-10);
  align-items: center;
}
.demo-scene {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-sunken);
}
.demo-scene img { display: block; width: 100%; height: auto; }
.demo-scene figcaption {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line-faint);
  font-family: var(--font-mono); font-size: var(--t-micro);
  color: var(--gray-500); letter-spacing: 0.05em;
}

/* ---------------------------------------------- maqueta de WhatsApp */
.wa {
  width: 100%; max-width: 340px; margin: 0 auto;
  border: 10px solid #10151f;
  border-radius: 34px;
  background: #0b141a;
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.wa-top {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: #1f2c34;
}
.wa-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--cyan-dark);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 11px; font-weight: 700; color: var(--white);
}
.wa-who { font-size: 13px; font-weight: 600; color: #e9edef; line-height: 1.2; }
.wa-sub { font-size: 10px; color: #8696a0; }
.wa-body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); min-height: 300px; }
.wa-day {
  align-self: center;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.06);
  font-size: 10px; color: #8696a0;
}
.wa-msg {
  align-self: flex-start; max-width: 92%;
  background: #202c33; color: #e9edef;
  border-radius: 10px 10px 10px 2px;
  padding: var(--s-3);
  font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.wa-msg strong { color: #fff; }
.wa-media {
  display: block; width: 100%; height: auto;
  border-radius: 6px; margin-bottom: var(--s-2);
}
.wa-tag {
  display: inline-block; margin-bottom: var(--s-2);
  padding: 2px 8px; border-radius: 4px;
  background: rgba(211,53,79,0.22); color: #ff8fa0;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.wa-time { display: block; margin-top: 4px; text-align: right; font-size: 10px; color: #8696a0; }
.wa-note { margin-top: var(--s-4); text-align: center; font-size: var(--t-xs); color: var(--gray-500); }

/* ---------------------------------------------- diagrama simple */
.diagram {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: var(--s-8) var(--s-5);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
}
.diagram-node {
  width: 100%; max-width: 320px; text-align: center;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface-1);
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700; color: var(--white);
}
.diagram-node small { display: block; margin-top: 3px; font-family: var(--font-body); font-size: var(--t-xs); font-weight: 400; color: var(--gray-500); }
.diagram-node--accent { border-color: rgba(0,205,255,0.42); color: var(--cyan-primary); }
.diagram-node--end { border-color: rgba(0,232,157,0.42); color: var(--accent-green); }
.diagram-arrow { width: 1px; height: 26px; background: linear-gradient(180deg, rgba(0,205,255,0.15), rgba(0,205,255,0.55)); position: relative; }
.diagram-arrow::after {
  content: ''; position: absolute; bottom: 0; left: 50%;
  width: 6px; height: 6px; border-right: 1px solid rgba(0,205,255,0.75); border-bottom: 1px solid rgba(0,205,255,0.75);
  transform: translate(-50%, 2px) rotate(45deg);
}

/* diagrama de capacidad (3 columnas) */
.capacity { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.capacity-col {
  padding: var(--s-6);
  border: 1px solid var(--line-faint); border-radius: var(--r-lg);
  background: var(--surface-1); text-align: center;
}
.capacity-col h4 { font-family: var(--font-display); font-size: var(--t-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); }
.capacity-big { margin-top: var(--s-3); font-family: var(--font-display); font-size: var(--t-xl); font-weight: 900; color: var(--white); line-height: 1.1; }
.capacity-col p { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--gray-500); line-height: 1.6; }
.capacity-col--pro { border-color: rgba(0,205,255,0.32); }
.capacity-col--pro .capacity-big { color: var(--cyan-primary); }

/* ---------------------------------------------- detecciones por categoría */
.detect-heading {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-300);
  margin: var(--s-10) 0 var(--s-5);
}
.detect-heading:first-of-type { margin-top: 0; }
/* los reconocimientos base son una lista, no categorías: dos columnas sin título */
.detect--base { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detect--base .detect-col { padding: var(--s-5) var(--s-6); }
.detect { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--s-5); }
.detect-col {
  padding: var(--s-6);
  border: 1px solid var(--line-faint); border-radius: var(--r-lg);
  background: var(--surface-1);
}
.detect-col h3 {
  font-family: var(--font-display); font-size: var(--t-md); font-weight: 700; color: var(--white);
  padding-bottom: var(--s-3); margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-faint);
}
.detect-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.detect-col li { display: flex; gap: var(--s-3); font-size: var(--t-sm); color: var(--gray-300); line-height: 1.5; }
.detect-col li::before { content: '›'; color: var(--cyan-primary); font-weight: 700; flex-shrink: 0; }
.detect-col--green li::before { color: var(--accent-green); }
.detect-col--purple li::before { color: var(--accent-purple); }

/* ---------------------------------------------- comparador de planes */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--line-faint); border-radius: var(--r-lg); background: var(--surface-1); }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--t-sm); }
.cmp th, .cmp td { padding: var(--s-4) var(--s-5); text-align: left; border-bottom: 1px solid var(--line-faint); }
.cmp thead th {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500);
  background: rgba(3,7,16,0.5); position: sticky; top: 0;
}
.cmp thead th.is-pro { color: var(--cyan-primary); }
.cmp tbody th { font-weight: 600; color: var(--gray-100); }
.cmp td { color: var(--gray-300); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody tr:hover { background: rgba(255,255,255,0.02); }
.yes { color: var(--accent-green); font-weight: 700; }
.no  { color: var(--gray-500); }
.cmp-note { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--gray-500); }

/* ---------------------------------------------- garantía */
.guarantee {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8);
  align-items: center;
  padding: var(--s-10);
  border: 1px solid rgba(0,232,157,0.30);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, rgba(0,232,157,0.07), rgba(8,14,28,0.9));
}
.guarantee h2 { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 900; color: var(--white); line-height: 1.2; }
.guarantee h2 em { font-style: normal; color: var(--accent-green); }
.guarantee p { margin-top: var(--s-4); color: var(--gray-300); font-size: var(--t-md); line-height: 1.7; max-width: 62ch; }
.guarantee-seal {
  width: 116px; height: 116px; flex-shrink: 0;
  display: grid; place-items: center; text-align: center;
  border: 1px solid rgba(0,232,157,0.45); border-radius: 50%;
  color: var(--accent-green);
  font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.1em; line-height: 1.5;
  box-shadow: 0 0 44px -14px rgba(0,232,157,0.8) inset;
}

/* ---------------------------------------------- comparación 2 columnas */
.versus { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-5); }
.versus-col { padding: var(--s-8); border: 1px solid var(--line-faint); border-radius: var(--r-lg); background: var(--surface-1); }
.versus-col--now { border-color: rgba(0,205,255,0.32); background: var(--surface-2); }
.versus-col h3 { font-family: var(--font-display); font-size: var(--t-lg); color: var(--white); }
.versus-col > p { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--gray-500); letter-spacing: 0.04em; }
.versus-col ul { list-style: none; margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.versus-col li { display: flex; gap: var(--s-3); font-size: var(--t-sm); color: var(--gray-300); line-height: 1.6; }
.versus-col li::before { content: '—'; color: var(--gray-500); flex-shrink: 0; }
.versus-col--now li::before { content: '+'; color: var(--cyan-primary); font-weight: 700; }

/* ---------------------------------------------- soporte */
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-4); }
.support-card {
  padding: var(--s-6);
  border: 1px solid var(--line-faint); border-radius: var(--r-lg); background: var(--surface-1);
}
.support-card h4 { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); }
.support-card p { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--gray-100); line-height: 1.6; }
.support-card a { color: var(--cyan-primary); text-decoration: none; }
.support-card a:hover { text-decoration: underline; }

/* ---------------------------------------------- industrias */
.industries { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-5); }

/* ---------------------------------------------- CTA final dividido */
.split-cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-5); }
.split-cta-col {
  padding: var(--s-10);
  border: 1px solid var(--line-faint); border-radius: var(--r-xl);
  background: var(--surface-1);
  display: flex; flex-direction: column;
}
.split-cta-col--primary { border-color: rgba(0,205,255,0.34); background: var(--surface-2); }
.split-cta-col h3 { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 900; color: var(--white); line-height: 1.18; }
.split-cta-col p { margin-top: var(--s-4); color: var(--gray-300); font-size: var(--t-sm); line-height: 1.7; flex: 1; }
.split-cta-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-8); }
.split-cta-fine { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--gray-500); line-height: 1.6; }

/* ---------------------------------------------- pie de página */
.footer-slogan {
  margin-top: var(--s-3);
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700;
  color: var(--cyan-primary); letter-spacing: 0.01em;
}
.footer-brand-sub { color: var(--gray-300); }
.footer-links-col h4 { color: var(--gray-300); }
.footer-bottom { color: var(--gray-300); }

/* ---------------------------------------------- barra fija móvil */
.mobile-bar { display: none; }

/* cuatro columnas: los cuatro actores del sistema (cámaras · Enlace ·
   IntelliSight · WhatsApp) deben leerse en la misma fila que el flujo del
   hero. auto-fit los rompía en 3 + 1.                                    */
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .grid--4 { grid-template-columns: 1fr; } }

/* ---------------------------------------------- utilidades */
.lede { max-width: 66ch; font-size: var(--t-md); color: var(--gray-300); line-height: 1.75; }
.lede + .lede { margin-top: var(--s-4); }
.callout {
  margin-top: var(--s-8); padding: var(--s-5) var(--s-6);
  border-left: 2px solid var(--cyan-primary);
  background: rgba(0,205,255,0.05);
  font-size: var(--t-sm); color: var(--gray-100); line-height: 1.7;
}
.microcopy { margin-top: var(--s-4); font-size: var(--t-xs); color: var(--gray-500); line-height: 1.65; max-width: 62ch; }
.stack-lg > * + * { margin-top: var(--s-12); }
.plan-cap {
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-faint); border-radius: var(--r-sm);
  background: rgba(3,7,16,0.45);
  font-size: var(--t-xs); color: var(--gray-300); line-height: 1.6;
}
.plan-setup { margin-top: var(--s-5); font-size: var(--t-xs); color: var(--gray-500); line-height: 1.6; }

/* ---------------------------------------------- responsive */
@media (max-width: 1000px) {
  .demo { grid-template-columns: 1fr; gap: var(--s-8); }
  .adapt { grid-template-columns: 1fr; gap: var(--s-8); }
  .guarantee { grid-template-columns: 1fr; text-align: left; }
  .guarantee-seal { margin-top: var(--s-4); }
  .identity { grid-template-columns: 1fr; gap: var(--s-8); }
  .hero--bml .hero-grid { grid-template-columns: 1fr; }
  .hero--bml .hero-title { max-width: none; }
  .hero--bml .product-card { margin-top: 0; }
}
@media (max-width: 900px) {
  .benefits-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 860px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-step + .flow-step::before { display: none; }
}
@media (max-width: 760px) {
  /* el logo crece ~24% en móvil y el header con él */
  :root { --nav-h: 82px; }
  .nav-logo-img { height: 47px; }
  .footer-brand-img { height: 52px; }

  .hero--bml .hero-title { font-size: clamp(1.55rem, 7.2vw, 2rem); }
  .hero--is .hero-title { font-size: clamp(1.6rem, 7.4vw, 2.1rem); }
  .product-card { padding: var(--s-6); }
  .product-card-actions .btn-primary,
  .product-card-actions .btn-ghost { width: 100%; }
  .grid .card h3 { min-height: 0; }

  .nav-links .nav-cta-mobile { display: inline-flex; }

  /* El menú cerrado sólo estaba a opacity:0 + pointer-events:none, así que
     sus enlaces seguían en el orden de tabulación y los leía un lector de
     pantalla. visibility los saca del árbol de accesibilidad.            */
  .nav-links { visibility: hidden; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2); }
  .nav-links.open { visibility: visible; }
  .anchornav { display: none; }
  .flow, .hero .flow { grid-template-columns: 1fr; }
  .guarantee { padding: var(--s-8) var(--s-6); }
  .split-cta-col { padding: var(--s-8) var(--s-6); }

  /* barra fija inferior: "Ver planes" */
  .mobile-bar {
    display: flex; gap: var(--s-3);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
    background: rgba(4,8,17,0.94);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-soft);
  }
  .mobile-bar .btn-primary, .mobile-bar .btn-ghost { flex: 1; height: 44px; }
  body { padding-bottom: 84px; }
  .footer-bottom { padding-bottom: var(--s-6); }
}

/* ============================================================
   ITERACIÓN 5
   ============================================================ */

/* ---------------------------------------------- hero corporativo
   Dos o tres renglones en escritorio, más aire entre líneas, y un solo
   fragmento en cian ("tecnología que funciona").                        */
.hero--bml .hero-title {
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  line-height: 1.24;
  max-width: 20ch;
}
.hero--bml .hero-actions { margin-top: var(--s-6); }
/* La columna de texto pesa un poco más para que la tarjeta no la aplaste.
   Va dentro de min-width porque este bloque se carga DESPUÉS del media query
   de 1000px y si no, ganaba en móvil y dejaba dos columnas estrujadas. */
@media (min-width: 1001px) {
  .hero--bml .hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
}
/* la tarjeta baja de peso visual: misma información, menos sombra */
.hero--bml .product-card { box-shadow: var(--shadow-2); }

/* ---------------------------------------------- contraste y tipografía
   La fuente display (Orbitron) queda para títulos y botones. Los párrafos
   y las listas usan la de lectura, que es lo que se lee de corrido.     */
.check-list li, .detect-col li, .versus-col li, .faq .faq-body,
.adapt-item p, .plan-cap, .plan-setup, .microcopy, .cmp td, .cmp tbody th {
  font-family: var(--font-body);
}
.nav-links a { color: var(--gray-100); }
.nav-links a:hover { color: var(--white); }
.check-list li, .plan-cap, .plan-setup { color: var(--gray-300); }
.hero-support, .hero-closer, .flow-s { color: var(--gray-300); }
/* el texto pequeño de las cuatro tarjetas del hero era demasiado tenue */
.flow-s { font-size: var(--t-sm); line-height: 1.5; }

/* ---------------------------------------------- detecciones en acordeón */
.detect-acc { border: 0; background: none; }
.detect-acc > summary {
  list-style: none; cursor: default;
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--s-3); margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-faint);
}
.detect-acc > summary::-webkit-details-marker { display: none; }
.detect-acc > summary h3 { border: 0; padding: 0; margin: 0; }
.detect-acc > summary::after { content: none; }
.detect-col .detect-acc > summary h3 {
  font-family: var(--font-display); font-size: var(--t-md);
  font-weight: 700; color: var(--white);
}

@media (max-width: 760px) {
  /* en móvil sí se pliegan, con su indicador */
  .detect-acc > summary { cursor: pointer; margin-bottom: 0; }
  .detect-acc[open] > summary { margin-bottom: var(--s-4); }
  .detect-acc > summary::after {
    content: ''; width: 8px; height: 8px; flex-shrink: 0;
    border-right: 2px solid var(--cyan-primary);
    border-bottom: 2px solid var(--cyan-primary);
    rotate: 45deg; transition: rotate var(--dur-2) var(--ease);
  }
  .detect-acc[open] > summary::after { rotate: -135deg; }
  .detect--base { grid-template-columns: 1fr; }

  /* el comparador dejaba de leerse comprimido: pasa a fichas apiladas */
  .cmp-wrap { border: 0; background: none; overflow: visible; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp { min-width: 0; }
  .cmp thead { display: none; }
  .cmp tbody tr {
    margin-bottom: var(--s-4); padding: var(--s-4) var(--s-5);
    border: 1px solid var(--line-faint); border-radius: var(--r-md);
    background: var(--surface-1);
  }
  .cmp tbody th {
    padding: 0 0 var(--s-3); border: 0;
    font-family: var(--font-display); font-size: var(--t-sm); color: var(--white);
  }
  .cmp tbody td {
    display: flex; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-2) 0; border: 0;
    border-top: 1px solid var(--line-faint);
    font-size: var(--t-sm);
  }
  .cmp tbody td::before {
    content: attr(data-plan);
    color: var(--gray-500); font-family: var(--font-mono);
    font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase;
  }
}

/* ---------------------------------------------- barra fija móvil
   Aparece sólo después de salir del hero (la clase la pone main.js).   */
@media (max-width: 760px) {
  .mobile-bar {
    transform: translateY(120%);
    transition: transform var(--dur-2) var(--ease);
  }
  .mobile-bar.visible { transform: none; }
  body { padding-bottom: 0; }
  body.has-bar { padding-bottom: 84px; }
}

/* ============================================================
   VERSIÓN FINAL
   ============================================================ */

/* ---------------------------------------------- tipografía
   La tipografía tecnológica (Orbitron) se reserva para títulos, botones,
   etiquetas, nombres de producto y cifras. El cuerpo pasa a una sans neutral:
   Rajdhani es condensada y en textos largos costaba leerla.               */
:root {
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --t-sm: 0.9375rem;   /* 15px  -> sube a 16 en móvil, ver abajo */
  --t-md: 1.0625rem;   /* 17px  párrafos de escritorio */
  --t-lg: 1.1875rem;   /* 19px  párrafos destacados */
}
body { font-size: var(--t-md); line-height: 1.65; }
p, li, dd, .faq-body, .cmp td, .cmp tbody th, .microcopy, .plan-cap,
.plan-setup, .plan-first-pay, .detect-desc { font-family: var(--font-body); }
.lede, .section-desc, .card p, .step p, .adapt-item p, .versus-col li,
.detect-col li, .check-list li, .faq-body { line-height: 1.7; }

/* ---------------------------------------------- contraste
   Los textos secundarios deben verse secundarios, no deshabilitados.     */
.section-desc, .microcopy, .hero-support, .flow-s, .benefit p, .card p,
.step p, .plan-for, .plan-cap, .plan-setup, .cmp td, .footer-tagline,
.footer-links-col a, .detect-col li, .detect-desc, .versus-col li,
.support-card p, .split-cta-fine, .check-list li, .faq .faq-body,
.demo-scene figcaption, .adapt-diagram figcaption, .hero-closer, .cmp-note,
.footer-bottom, .footer-brand-sub {
  color: var(--gray-300);
}
.demo-scene figcaption, .adapt-diagram figcaption, .hero-closer, .cmp-note { opacity: 1; }
.nav-links a { color: var(--gray-100); }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--white); }
.footer-links-col a:hover { color: var(--cyan-primary); }
.footer-bottom a { color: var(--cyan-primary); }

/* estados de foco visibles en todo lo interactivo */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cyan-primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------------------------------------------- botón principal
   −20 % adicional de resplandor: el brillo restaba contraste alrededor.  */
.btn-primary {
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset,
              0 6px 16px -12px rgba(0,205,255,0.52);
}
.btn-primary:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset,
              0 10px 22px -12px rgba(0,205,255,0.60);
}

/* ---------------------------------------------- nav de secciones
   En escritorio es una fila; en móvil, un desplegable. No se comprime.   */
.secnav { position: sticky; top: var(--nav-h); z-index: 40;
  background: rgba(4,8,17,0.94); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-faint); }
.secnav-box { border: 0; background: none; }
.secnav-toggle { display: none; }
.secnav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-6);
  display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center;
  min-height: 48px;
}
.secnav-inner a {
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-body); font-size: var(--t-sm); font-weight: 600;
  color: var(--gray-300); text-decoration: none; border-radius: var(--r-sm);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.secnav-inner a:hover { color: var(--white); background: rgba(255,255,255,0.06); }
.secnav-inner a.active { color: var(--cyan-primary); background: rgba(0,205,255,0.10); }

/* ---------------------------------------------- planes */
.plans-lede { margin-bottom: var(--s-3); font-size: var(--t-md); color: var(--gray-100); }
.plans-lede--sm { font-size: var(--t-sm); color: var(--gray-300); }
.plans-lede--sm:last-of-type { margin-bottom: var(--s-8); }
.plan-price small { color: var(--gray-300); font-size: var(--t-sm); font-weight: 600; }
.plan-price--quote { font-size: var(--t-lg); line-height: 1.3; }
.plan-title-com {
  margin-top: var(--s-2);
  font-family: var(--font-display); font-size: var(--t-md); font-weight: 700;
  color: var(--white);
}
/* el costo inicial es visible ANTES del botón, no en una nota al pie */
.plan-first-pay {
  margin-top: var(--s-5); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: rgba(0,205,255,0.06);
  font-size: var(--t-sm); color: var(--gray-100);
}
.plan-first-pay strong { color: var(--white); }
.plan-first-pay span { display: block; margin-top: 2px; font-size: var(--t-xs); color: var(--gray-300); }
.plan-cap { margin-top: var(--s-3); }
.plan .btn-primary, .plan .btn-ghost { margin-top: var(--s-5); }

/* ---------------------------------------------- detecciones */
.detect-acc > summary {
  display: flex; align-items: center; gap: var(--s-3);
  list-style: none; padding: 0 0 var(--s-3); margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-faint);
}
.detect-acc > summary::-webkit-details-marker { display: none; }
.detect-ico { flex-shrink: 0; width: 26px; height: 26px; color: var(--cyan-primary); }
.detect-col--green .detect-ico { color: var(--accent-green); }
.detect-col--purple .detect-ico { color: var(--accent-purple); }
.detect-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.detect-desc { margin-bottom: var(--s-4); font-size: var(--t-sm); }

/* ---------------------------------------------- tarjetas compactas */
.card--tight { padding: var(--s-5) var(--s-6); }
.card--tight h3 { min-height: 0; }
.grid .card--tight p { flex: 0 1 auto; }

/* ---------------------------------------------- pie de página */
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.footer-tagline { margin-top: 0; max-width: 40ch; }
.footer-brand-sub { margin-top: 0; }

@media (max-width: 760px) {
  /* nada de cuerpo por debajo de 16px */
  :root { --t-sm: 1rem; --t-md: 1rem; --t-lg: 1.0625rem; }
  .container, .hero-inner { padding-left: 22px; padding-right: 22px; }

  /* el nav de secciones se vuelve desplegable */
  .secnav-toggle {
    display: flex; align-items: center; justify-content: space-between;
    list-style: none; cursor: pointer;
    max-width: var(--maxw); margin: 0 auto; padding: var(--s-4) 22px;
    font-family: var(--font-display); font-size: var(--t-sm); font-weight: 700;
    color: var(--gray-100);
  }
  .secnav-toggle::-webkit-details-marker { display: none; }
  .secnav-toggle::after {
    content: ''; width: 9px; height: 9px;
    border-right: 2px solid var(--cyan-primary);
    border-bottom: 2px solid var(--cyan-primary);
    rotate: 45deg; transition: rotate var(--dur-2) var(--ease);
  }
  .secnav-box[open] .secnav-toggle::after { rotate: -135deg; }
  .secnav-inner {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0 22px var(--s-4); min-height: 0;
  }
  .secnav-inner a { padding: var(--s-3) 0; border-top: 1px solid var(--line-faint); }

  /* áreas táctiles mayores en los acordeones */
  .detect-acc > summary { padding: var(--s-3) 0; min-height: 52px; }
  .detect-acc > summary::after { width: 10px; height: 10px; border-width: 2.5px; }
}

/* ---------------------------------------------- CTA final: botones alineados
   El bloque de IntelliSight lleva una línea fina al pie y el de proyectos no,
   así que sus botones quedaban a distinta altura. Se reserva ese espacio con
   un pseudo-elemento: alinea sin añadir una línea de texto que el brief
   prohíbe.                                                                */
.split-cta-col { display: flex; flex-direction: column; }
.split-cta-col > p:not(.split-cta-fine) { flex: 1; }
.split-cta-col:not(:has(.split-cta-fine))::after {
  content: ''; display: block;
  margin-top: var(--s-4); min-height: 1.7em;
}

/* las cuatro tarjetas del hero: el título ocupa dos renglones reservados, así
   el texto de todas arranca a la misma altura aunque uno de ellos no parta */
.hero .flow-t { min-height: 2.6em; display: flex; align-items: flex-end; }

/* el icono y el nombre de la categoría van juntos a la izquierda; la flecha
   del acordeón (sólo móvil) se empuja al extremo con margin-left:auto */
.detect-acc > summary { justify-content: flex-start; }
@media (max-width: 760px) { .detect-acc > summary::after { margin-left: auto; } }