/* Página pública de bienvenida (marketing). Reutiliza las variables de
   color y los componentes de botón (.primary-action/.ghost) definidos en
   styles.css para que se sienta como el mismo producto, no un sitio aparte.
   La landing se compromete a modo claro fijo (ver data-theme="light" en
   landing.html): sobre papel blanco, el motivo del check puede tener textura
   real de tinta (filtro SVG #inkTexture definido inline en landing.html), y
   el logo completo (búho + wordmark navy) vuelve a ser protagonista de la
   navegación. El sistema tipográfico y el motivo del "check" (Checka =
   check + auditoría) son propios de este archivo. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/instrument-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

body.landing {
  background: var(--bg);
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* Azul marino como color principal de identidad (junto al naranja de
     acción ya definido en :root) — reservado para los "momentos oscuros"
     de la página (AI Intelligence Center, comparación de valor), no como
     fondo general: el resto de la landing sigue siendo mayoritariamente
     blanco, a propósito. Vive scoped a .landing para no filtrarse a la app
     autenticada, que no usa navy en su propio sistema de tokens. */
  --l-navy: #0a1f44;
  --l-navy-deep: #061534;
  --l-navy-soft: #12294f;
  --l-navy-line: rgba(255, 255, 255, .14);
  --l-navy-text: rgba(255, 255, 255, .78);
}

.landing main {
  overflow-x: hidden;
}

.landing h1,
.landing h2,
.landing h3 {
  font-family: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
}

.l-eyebrow {
  margin: 0 0 10px;
  color: var(--orange-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.l-case-line {
  font-family: var(--font-mono);
  font-weight: 700;
}

.l-center {
  text-align: center;
}

.l-h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -.01em;
}

/* ---- Accesibilidad: saltar al contenido ---- */

.l-skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: top .15s ease;
}

.l-skip-link:focus {
  top: 12px;
}

/* ---- Nav ---- */

.l-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 14px max(20px, calc((100vw - 1440px) / 2));
}

.l-nav-brand {
  display: block;
  flex: none;
}

.l-nav-brand img {
  height: 56px;
  width: auto;
  display: block;
}

.l-footer .l-nav-brand img {
  height: 42px;
  opacity: .85;
}

/* En desktop el wrapper no debe alterar el layout flex de .l-nav: sus dos
   hijos (.l-nav-links y .l-nav-actions) siguen participando directamente
   en esa fila. En mobile se convierte en el panel colapsable del menú
   hamburguesa (ver @media más abajo). */
.l-nav-menu {
  display: contents;
}

.l-nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 1;
  font-weight: 800;
  font-size: 14.5px;
}

.l-nav-links a {
  color: var(--ink);
  text-decoration: none;
}

.l-nav-links a:hover {
  color: var(--orange-dark);
}

.l-nav-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.l-nav-actions a {
  padding: 9px 16px;
  font-size: 14px;
}

.l-nav-toggle {
  display: none;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.l-nav-toggle span {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: var(--ink);
}

/* ---- Hero ---- */

.l-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  align-items: center;
  gap: 48px;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) 20px clamp(56px, 8vw, 96px);
}

.l-hero::before {
  content: '';
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 620px;
  background: radial-gradient(60% 60% at 30% 20%, var(--orange-bg) 0%, rgba(255, 138, 76, 0) 70%);
  z-index: -1;
}

.l-hero h1 {
  position: relative;
  margin: 0 0 18px;
  font-weight: 800;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
  display: inline-block;
}

.l-hero-lead {
  margin: 0 0 28px;
  max-width: 540px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
  text-align: justify;
}

.l-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.l-cta {
  padding: 14px 22px;
  font-size: 15.5px;
}

.l-hero-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.l-hero-visual {
  display: flex;
  justify-content: center;
}

/* El timbre "Checkeado": cae sobre el titular una vez cargada la página,
   como un sello de auditoría real. El filtro #inkTexture (feTurbulence +
   feDisplacementMap, definido inline en landing.html) va SOLO en el
   ::before (borde + relleno) y no en el texto: aplicado al elemento
   completo, el mismo filtro que le da textura al borde vuelve el texto
   ilegible, así que el sello es un borde con textura de tinta detrás y el
   texto siempre nítido encima. Ver landing.html para el disparo por
   requestAnimationFrame (respeta prefers-reduced-motion). */
.stamp {
  position: absolute;
  top: -2px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  color: var(--orange-dark);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  transform: rotate(-8deg) scale(1.5);
  opacity: 0;
  white-space: nowrap;
}

.stamp::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2.5px solid var(--orange-dark);
  border-radius: 999px;
  background: var(--orange-bg);
  filter: url(#inkTexture);
  z-index: -1;
}

.stamp.is-visible {
  animation: stamp-hit .5s cubic-bezier(.2, 1.4, .4, 1) forwards;
}

@keyframes stamp-hit {
  0%   { opacity: 0; transform: rotate(-8deg) scale(1.8); }
  60%  { opacity: 1; transform: rotate(-8deg) scale(.92); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}

.stamp-tick {
  font-size: 13px;
}

/* ---- Hero waveform card (evocación del reproductor real de Checka) ---- */

.l-wave-card {
  width: 100%;
  max-width: 440px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-2);
  padding: 22px 24px;
}

.l-wave-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
}

.l-wave-head strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
}

.l-wave-head span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.l-wave-score {
  flex: none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.l-wave-score b {
  color: var(--ink);
  font-family: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
}

.l-wave-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 46px;
}

.l-wave-track i {
  flex: 1;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 1px;
}

.l-wave-track i.played {
  background: var(--orange);
}

.l-wave-pins {
  position: relative;
  height: 14px;
  margin-top: 6px;
}

.l-wave-pin {
  position: absolute;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateX(-50%);
}

.l-wave-pin.g { background: var(--green); }
.l-wave-pin.y { background: var(--yellow); }
.l-wave-pin.r { background: var(--red); }

.l-wave-legend {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.l-wave-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.l-wave-legend .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

.l-wave-legend .dot.g { background: var(--green); }
.l-wave-legend .dot.y { background: var(--yellow); }
.l-wave-legend .dot.r { background: var(--red); }

/* ---- Trust strip ---- */

.l-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.l-strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px;
}

.l-strip-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.chip-tick {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  flex: none;
}

/* ---- Generic section ---- */

.l-section {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) 20px;
  scroll-margin-top: 84px;
}

.l-section-alt {
  max-width: none;
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 84px;
}

.l-section-alt > * {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.l-section-lead {
  max-width: 640px;
  margin: 0 auto 44px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

/* ---- Checklist (Producto / Privacidad) ----
   Cada beneficio se presenta como un ítem de checklist cuyo casillero se
   "marca" (SVG stroke-dashoffset) al entrar en pantalla, para que el gesto
   de auditoría del check se sienta también al hacer scroll. */

.l-checklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.l-check-item {
  display: flex;
  gap: 14px;
  background: var(--panel);
  padding: 24px;
}

.l-checklist-compact .l-check-item {
  padding: 18px;
}

.l-checkbox {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 6px;
  border: 1.5px solid var(--muted);
  transition: border-color .3s ease, background .3s ease;
}

.l-checkbox svg {
  width: 14px;
  height: 14px;
  stroke: var(--panel);
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset .35s ease .05s;
}

.l-check-item.is-checked .l-checkbox {
  border-color: var(--green);
  background: var(--green);
}

.l-check-item.is-checked .l-checkbox svg {
  stroke-dashoffset: 0;
}

.l-check-item h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.l-check-item p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
  text-align: justify;
}

.l-checklist-compact .l-check-item h3 {
  font-size: 14.5px;
}

.l-checklist-compact .l-check-item p {
  font-size: 13px;
}

.l-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.l-compare-col {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
}

.l-compare-col h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.l-compare-col.pass h3 { color: var(--green); }
.l-compare-col.flag h3 { color: var(--red); }

.l-compare-mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  flex: none;
}

.l-compare-col.pass .l-compare-mark { background: var(--green); }
.l-compare-col.flag .l-compare-mark { background: var(--red); }


/* ---- Plans ---- */

/* Contenido presente en el DOM (indexable, accesible a lectores de
   pantalla) pero sin ocupar espacio visual ni exigir scroll — mismo patrón
   estándar "sr-only" usado en el resto de la web para no sacrificar SEO al
   recortar el texto visible de una página. */
.l-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.l-plans-section {
  position: relative;
  padding-top: clamp(32px, 4vw, 48px);
  padding-bottom: clamp(48px, 6vw, 72px);
}

/* Fondo tecnológico sutil: dos manchas radiales muy tenues (naranja de marca
   + un acento frío) detrás del contenido, nunca detrás del texto ni
   compitiendo con la tarjeta de precios — puramente atmosférico. Esta
   página siempre corre en tema claro (data-theme="light" fijo en
   planes.html), así que no necesita variante oscura. */
.l-plans-section::before {
  content: '';
  position: absolute;
  inset: -40px -20px auto -20px;
  height: 420px;
  background:
    radial-gradient(560px 280px at 18% 0%, rgba(240, 100, 35, .08), transparent 70%),
    radial-gradient(480px 260px at 84% 10%, rgba(37, 99, 235, .05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.l-plans-section > * {
  position: relative;
  z-index: 1;
}

.l-plans-lead {
  max-width: 560px;
  margin-bottom: 24px;
}

/* Fila compacta de confianza (reemplaza el antiguo "proof strip" de 3
   tarjetas con texto repetido — esos mismos datos ya están en el footnote
   de la tarjeta de precios): una sola línea, sin peso visual extra, para
   que la tarjeta de planes quede visible sin necesitar scroll. */
.plans-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto 32px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.plans-trust-dot {
  color: var(--orange-dark);
}

.plans-legal-note {
  max-width: 560px;
  margin: 28px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.l-plans-note {
  margin: 20px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}

/* ---- Footer ---- */

.l-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 20px 40px;
  border-top: 1px solid var(--line);
}

.l-footer-links {
  display: flex;
  gap: 20px;
  font-size: 13.5px;
  font-weight: 700;
}

.l-footer-links a {
  color: var(--muted);
  text-decoration: none;
}

.l-footer-links a:hover {
  color: var(--orange-dark);
}

.l-footer-copy {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* ---- Reduced motion: mostrar el estado final sin animar ---- */

@media (prefers-reduced-motion: reduce) {
  .stamp,
  .l-checkbox svg {
    transition: none !important;
    animation: none !important;
  }

  .stamp.is-visible {
    opacity: 1;
    transform: rotate(-8deg) scale(1);
  }
}

/* ---- Responsive ---- */

@media (max-width: 980px) {
  .l-hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }

  .l-hero-lead {
    margin-left: auto;
    margin-right: auto;
  }

  .l-hero-actions {
    justify-content: center;
  }

  .l-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .l-checklist,
  .l-compare-grid {
    grid-template-columns: 1fr;
  }

  .stamp {
    /* position:relative (no "static"): .stamp::before dibuja el borde con
       textura de tinta con position:absolute + inset:0, y necesita que
       .stamp siga siendo su propio contenedor de posicionamiento — con
       "static" ese ::before se salía a buscar el ancestro posicionado más
       cercano (el <h1>) y terminaba envolviendo todo el titular. */
    position: relative;
    display: inline-flex;
    margin-top: 12px;
    transform: none;
  }

  .stamp.is-visible {
    animation: none;
    opacity: 1;
  }

  .l-hero-actions {
    flex-direction: column;
  }

  .l-hero-actions .l-cta {
    width: 100%;
  }

  .l-footer {
    flex-direction: column;
    text-align: center;
  }

  .l-footer-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ============================================================
   REDISEÑO — Inteligencia Comercial con IA
   Hero centrado + mockup de producto, panel ejecutivo (con AI
   Intelligence Center integrado), ahorro cuantificado, motor de
   auditoría, seguridad y footer extendido. Reutiliza los tokens y
   componentes ya definidos arriba (l-section, l-checklist,
   l-compare-grid, chip-tick, stamp) en vez de duplicarlos.
   ============================================================ */

/* ---- Reveal genérico (fade + translate al entrar en pantalla) ---- */

.l-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}

.l-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Hero v2: copy centrado + mockup a todo el ancho debajo ---- */

.l-hero-v2 {
  display: block;
  text-align: center;
}

.l-hero-copy-center {
  max-width: 760px;
  margin: 0 auto;
}

.l-hero-copy-center .l-hero-lead {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.l-mockup-wrap {
  max-width: 1280px;
  margin: 56px auto 0;
}

/* ---- Mockup del producto (interfaz simulada, no una imagen genérica) ---- */

.l-mockup {
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3, 0 20px 60px rgba(10, 31, 68, .12));
  overflow: hidden;
}

.l-mockup-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: var(--soft);
  border-bottom: 1px solid var(--line);
}

.l-mockup-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}

.l-mockup-url {
  margin-left: 10px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

.l-mockup-body {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1fr;
}

.l-mockup-col {
  padding: 18px 16px;
  border-left: 1px solid var(--line);
  text-align: left;
}

.l-mockup-col:first-child {
  border-left: none;
}

.l-mockup-col-title {
  margin: 0 0 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.l-mockup-queue-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--soft);
}

.l-mockup-queue-item.is-active {
  border-color: var(--orange);
  background: var(--orange-bg);
}

.l-mockup-queue-item > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.l-mockup-queue-item strong {
  font-size: 13px;
  color: var(--ink);
}

.l-mockup-queue-item span {
  color: var(--muted);
  font-size: 11.5px;
}

.l-mockup-queue-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

.l-mockup-badge {
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}

.l-mockup-badge.is-done {
  background: var(--green-bg);
  color: var(--green);
}

.l-mockup-badge.is-pending {
  background: var(--line);
  color: var(--muted);
}

.l-mockup-fields {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
}

.l-mockup-fields div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
}

.l-mockup-fields dt {
  color: var(--muted);
}

.l-mockup-fields dd {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}

.l-mockup-transcript-title {
  margin-top: 4px;
}

.l-mockup-transcript {
  display: grid;
  gap: 6px;
}

.l-mockup-transcript p {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--soft);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.l-mockup-transcript b {
  color: var(--ink);
}

.l-mockup-result {
  background: var(--soft);
}

.l-mockup-score {
  --ring-size: 84px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--ring-size);
  height: var(--ring-size);
  margin: 4px auto 18px;
  border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--score) * 1%), var(--line) 0);
}

.l-mockup-score::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--panel);
}

.l-mockup-score-num {
  position: relative;
  font-family: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: var(--ink);
  line-height: 1;
}

.l-mockup-score-max {
  position: relative;
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  margin-top: 2px;
}

.l-mockup-findings {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}

.l-mockup-findings-title {
  margin: 8px 0 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.l-mockup-findings-title.is-good { color: var(--green); }
.l-mockup-findings-title.is-warn { color: var(--yellow); }

.l-mockup-finding {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.l-mockup-finding.is-good { color: var(--ink); }
.l-mockup-finding.is-warn { color: var(--ink); }

.l-mockup-recommendation {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--orange-bg);
  border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent);
}

.l-mockup-rec-tag {
  display: block;
  margin-bottom: 4px;
  color: var(--orange-dark);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.l-mockup-recommendation p {
  margin: 0;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.4;
  font-style: italic;
}

.l-mockup-caption {
  margin: 14px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 12.5px;
}

/* ---- AI Intelligence Center: tarjeta de conversación (autocontenida, funciona sobre fondo claro u oscuro) ---- */

.l-ai-eyebrow {
  margin-top: 36px;
}

.l-ai-card {
  max-width: 640px;
  margin: 0 auto;
  padding: 22px;
  border-radius: 16px;
  background: var(--l-navy-soft);
  border: 1px solid var(--l-navy-line);
}

.l-ai-question,
.l-ai-answer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.l-ai-question {
  margin-bottom: 18px;
}

.l-ai-question p {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px 12px 12px 2px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
}

.l-ai-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  font-size: 14px;
}

.l-ai-avatar-bot {
  background: var(--orange);
}

.l-ai-answer-body {
  flex: 1;
  padding: 14px 16px;
  border-radius: 2px 12px 12px 12px;
  background: rgba(255, 255, 255, .05);
  text-align: left;
}

.l-ai-answer-lead {
  margin: 0 0 12px;
  color: #fff;
  font-size: 14.5px;
  line-height: 1.5;
}

.l-ai-answer-section-title {
  margin: 0 0 8px;
  color: var(--l-navy-text);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.l-ai-findings {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.l-ai-findings li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 13.5px;
}

.l-ai-finding-arrow {
  flex: none;
  font-weight: 800;
  font-size: 13px;
}

.l-ai-finding-arrow.down { color: #ff8a7a; }
.l-ai-finding-arrow.flag { color: var(--orange); font-size: 8px; }

.l-ai-recommendation {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(240, 100, 35, .16);
  border: 1px solid rgba(240, 100, 35, .4);
}

.l-ai-rec-tag {
  display: block;
  margin-bottom: 4px;
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.l-ai-recommendation p {
  margin: 0;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}

/* ---- Panel ejecutivo (stat cards con contador animado) ---- */

.l-dash-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

/* La grilla de KPIs de "Ahorro" reutiliza .l-dash-grid pero solo tiene 4
   tarjetas (no 5, como el panel ejecutivo): sin este ajuste, la 5ª columna
   quedaba vacía a la derecha y las 4 tarjetas se veían corridas a la
   izquierda en vez de ocupar todo el ancho de la sección. */
#savingsKpiGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.l-dash-card {
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  text-align: center;
}

.l-dash-value {
  display: block;
  font-family: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 30px);
  color: var(--ink);
}

.l-dash-card.is-positive .l-dash-value { color: var(--green); }
.l-dash-card.is-warning .l-dash-value { color: var(--red); }

.l-dash-label {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12.5px;
}

/* ---- Antes/Después y comparación de valor (extiende l-compare-grid) ---- */

.l-compare-grid-v2 .l-compare-col {
  padding: 26px 26px 22px;
}

.l-compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.l-compare-list li {
  padding: 10px 0 10px 22px;
  position: relative;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}

.l-compare-list li:first-child {
  border-top: none;
  padding-top: 0;
}

.l-compare-col.pass .l-compare-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 800;
}

.l-compare-col.flag .l-compare-list li::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 800;
}

/* ---- Variables de auditoría (tarjetas con barra de progreso) ---- */

.l-var-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.l-var-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  text-align: left;
}

.l-var-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.l-var-head h3 {
  margin: 0;
  font-size: 15px;
}

.l-var-score {
  font-family: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--green);
}

.l-var-card-warn .l-var-score {
  color: var(--yellow);
}

.l-var-bar {
  height: 6px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.l-var-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--green);
  transition: width 1s cubic-bezier(.2, .8, .2, 1);
}

.l-var-card-warn .l-var-bar i {
  background: var(--yellow);
}

.l-var-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ---- Seguridad: badges ---- */

.l-security-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 36px;
}

.l-security-badge {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

/* ---- Ahorro: comparación cuantificada + calculadora ---- */

.l-savings-calc-wrap {
  max-width: 900px;
  margin: 36px auto 0;
}

.l-savings-calc-title {
  margin: 0 0 18px;
  font-family: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 800;
  color: var(--ink);
  text-align: center;
}

.l-savings-quickpicks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 6px;
}

.l-savings-quickpicks button {
  padding: 8px 16px;
  font-size: 13.5px;
}

.l-savings-quickpicks button[aria-current="true"] {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.l-savings-calc-value {
  margin: 0 0 18px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
}

.l-savings-result-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 8px;
}

.l-savings-result-grid .l-dash-card {
  text-align: left;
  padding: 16px 18px;
}

.l-savings-result-grid .l-dash-value {
  font-size: clamp(18px, 1.8vw, 22px);
}

.l-savings-calc-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}

.l-savings-assumptions-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.l-savings-assumptions-actions {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.l-savings-assumptions-error {
  margin: 10px 0 0;
  color: var(--red);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}

/* .pricing-details (styles.css) es un componente compartido con la
   tarjeta de precios de /planes, donde el detalle va alineado a la
   izquierda a propósito; acá, dentro de "Ahorro", todo el resto de la
   sección está centrado, así que se centra también el <summary> de sus
   3 acordeones (Ajustar supuestos, costos indirectos, metodología). */
#ahorro .pricing-details summary {
  text-align: center;
}

.l-savings-indirect {
  max-width: 1080px;
  margin: 48px auto 0;
}

.l-savings-indirect-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.l-savings-indirect-emphasis {
  color: var(--ink);
  font-weight: 700;
}

.l-savings-methodology {
  max-width: 780px;
  margin: 32px auto 0;
}

.l-savings-methodology-body {
  margin-top: 12px;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.6;
}

.l-savings-methodology-body p {
  margin: 0 0 12px;
}

.l-savings-methodology-body ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.l-savings-methodology-body a {
  color: var(--orange-dark);
  font-weight: 700;
}

.l-savings-positioning {
  max-width: 760px;
  margin: 56px auto 0;
}

.l-savings-closing {
  max-width: 720px;
  margin: 40px auto 0;
  text-align: center;
}

.l-savings-closing-lead {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
}

.l-savings-closing-sub {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
}

.l-savings-closing-actions {
  margin-top: 20px;
}

/* ---- Footer extendido ---- */

.l-footer-v2 {
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}

.l-footer-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.l-footer-tagline {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
}

.l-footer-v2 .l-footer-links {
  flex-wrap: wrap;
  gap: 10px 22px;
}

/* ---- Responsive: nuevas secciones ---- */

@media (max-width: 980px) {
  .l-mockup-body {
    grid-template-columns: 1fr;
  }

  .l-mockup-col {
    border-left: none;
    border-top: 1px solid var(--line);
  }

  .l-mockup-col:first-child {
    border-top: none;
  }

  .l-dash-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #savingsKpiGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .l-var-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .l-savings-result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .l-dash-grid,
  .l-var-grid,
  .l-compare-grid-v2,
  .l-savings-result-grid,
  .l-savings-assumptions-grid {
    grid-template-columns: 1fr;
  }

  .l-ai-question p {
    font-size: 13.5px;
  }
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
  .l-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .l-var-bar i {
    transition: none !important;
  }
}


/* ==========================================================================
   SIGNAL OS 2.0 — ORANGE INTELLIGENCE / RECONSTRUCCIÓN ESTRUCTURAL
   ========================================================================== */
:root {
  --signal-obsidian: #070b12;
  --signal-panel: #0d1420;
  --signal-panel-2: #121c2a;
  --signal-line: rgba(148, 163, 184, .18);
  --signal-cloud: #f3f6fa;
  --signal-orange: #ff5a1f;
  --signal-orange-hot: #ff7a28;
  --signal-orange-soft: #fff0e8;
  --signal-ink: #08111f;
}
html { scroll-behavior: smooth; }
body.landing {
  background: var(--signal-obsidian);
  color: #edf3fb;
  font-family: Inter, "Manrope", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.l-nav {
  background: rgba(7, 11, 18, .84);
  border-bottom: 1px solid var(--signal-line);
  backdrop-filter: blur(22px);
}
.l-nav-inner { max-width: 1440px; min-height: 82px; }
.l-nav-brand {
  width: 166px;
  height: 52px;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 40px rgba(0,0,0,.2);
}
.l-nav-brand img { width: 100%; height: 100%; object-fit: contain; }
.l-nav-links a { color: #aeb9c8; font-weight: 650; }
.l-nav-links a:hover { color: #fff; }
.l-nav .ghost {
  color: #edf3fb;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.18);
}
.l-nav .primary-action {
  background: linear-gradient(135deg, var(--signal-orange), var(--signal-orange-hot));
  box-shadow: 0 12px 35px rgba(255,90,31,.25);
}
.landing-main { background: var(--signal-obsidian); }
.l-hero-signal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(600px, 1.1fr);
  gap: clamp(48px, 6vw, 100px);
  align-items: center;
  max-width: 1440px;
  min-height: 770px;
  margin: 0 auto;
  padding: 108px 44px 82px;
  overflow: hidden;
}
.l-hero-signal::before {
  content: "";
  position: absolute;
  inset: -20% auto auto -15%;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,90,31,.16), transparent 67%);
  pointer-events: none;
}
.l-hero-signal::after {
  content: "";
  position: absolute;
  inset: 10% -10% auto auto;
  width: 740px;
  height: 740px;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle, #000, transparent 68%);
  pointer-events: none;
}
.l-hero-signal-copy, .l-signal-demo { position: relative; z-index: 1; }
.l-signal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #c7d0dd;
  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.l-live-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 999px;
  background: var(--signal-orange);
  box-shadow: 0 0 0 6px rgba(255,90,31,.12), 0 0 20px rgba(255,90,31,.55);
}
.l-hero-signal h1 {
  max-width: 690px;
  margin: 30px 0 24px;
  color: #f8fbff;
  font-size: clamp(50px, 5.4vw, 82px);
  line-height: .98;
  letter-spacing: -.058em;
  text-wrap: balance;
}
.l-hero-signal h1 span {
  display: block;
  margin-top: 12px;
  color: var(--signal-orange-hot);
}
.l-hero-signal .l-hero-lead {
  max-width: 630px;
  margin: 0;
  color: #aab5c5;
  font-size: 18px;
  line-height: 1.65;
}
.l-hero-signal .l-hero-actions {
  justify-content: flex-start;
  margin: 34px 0 0;
}
.l-hero-signal .l-cta {
  min-height: 50px;
  padding-inline: 25px;
  border-radius: 10px;
}
.l-hero-signal .primary-action {
  background: linear-gradient(135deg, var(--signal-orange), var(--signal-orange-hot));
  box-shadow: 0 16px 45px rgba(255,90,31,.28);
}
.l-hero-signal .ghost {
  color: #edf3fb;
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.17);
}
.l-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 38px;
  color: #8290a3;
  font-size: 12px;
}
.l-trust-row b { color: #f2f6fb; font-family: "IBM Plex Mono", monospace; }
.l-signal-demo {
  padding: 22px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background: linear-gradient(150deg, rgba(18,28,42,.92), rgba(8,13,22,.96));
  box-shadow: 0 32px 90px rgba(0,0,0,.44), inset 0 1px rgba(255,255,255,.05);
}
.l-signal-demo::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,90,31,.38), transparent 28%, transparent 74%, rgba(67,95,125,.25));
  z-index: -1;
}
.l-signal-demo-head, .l-signal-demo-head > div, .l-evidence-card > div {
  display: flex;
  align-items: center;
}
.l-signal-demo-head { justify-content: space-between; padding: 4px 2px 22px; }
.l-signal-demo-head > div { gap: 10px; }
.l-signal-demo-head strong { font-size: 14px; }
.l-signal-demo-head small { color: #718095; font-size: 11px; }
.l-confidence-chip {
  padding: 7px 10px;
  color: #89e0b3;
  border: 1px solid rgba(55,196,125,.24);
  border-radius: 999px;
  background: rgba(21,120,75,.14);
  font: 700 10px/1 "IBM Plex Mono", monospace;
  text-transform: uppercase;
}
.l-wave-shell {
  position: relative;
  min-height: 210px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: #080d15;
  overflow: hidden;
}
.l-wave-shell::after {
  content: "";
  position: absolute;
  left: 18%;
  top: 48px;
  bottom: 26px;
  width: 1px;
  background: var(--signal-orange);
  box-shadow: 0 0 18px var(--signal-orange);
}
.l-wave-meta { display: flex; justify-content: space-between; color: #8290a3; font: 700 10px/1 "IBM Plex Mono", monospace; }
.l-wave-bars { position: absolute; inset: 56px 18px 30px; display: flex; align-items: center; gap: 5px; }
.l-wave-bars i { flex: 1; height: var(--h); min-height: 8px; border-radius: 4px; background: linear-gradient(180deg, #485568, #202b39); opacity: .85; }
.l-wave-bars i:nth-child(-n+6) { background: linear-gradient(180deg, #ff8b3d, #ff4f1c); }
.l-wave-play {
  position: absolute;
  left: calc(18% - 18px);
  bottom: 10px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: var(--signal-orange);
  font-size: 11px;
}
.l-signal-route {
  display: grid;
  grid-template-columns: 1fr 32px 1fr 32px 1fr;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
}
.l-signal-route > i { height: 1px; background: linear-gradient(90deg, var(--signal-orange), rgba(255,255,255,.13)); }
.l-route-node {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.l-route-node > span {
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  color: #92a0b2;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  font: 700 9px/1 "IBM Plex Mono", monospace;
}
.l-route-node.is-active { border-color: rgba(255,90,31,.4); background: rgba(255,90,31,.07); }
.l-route-node.is-active > span { color: #fff; border-color: var(--signal-orange); background: var(--signal-orange); }
.l-route-node small, .l-route-node strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-route-node small { margin-bottom: 4px; color: #66758a; font: 700 8px/1 "IBM Plex Mono", monospace; text-transform: uppercase; }
.l-route-node strong { color: #dfe6ef; font-size: 10px; }
.l-evidence-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 98px;
  padding: 16px;
  border: 1px solid rgba(255,90,31,.23);
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(255,90,31,.09), rgba(255,255,255,.025));
}
.l-evidence-card > div { gap: 12px; max-width: 75%; }
.l-evidence-card small, .l-evidence-card strong { display: block; }
.l-evidence-card small { margin-bottom: 5px; color: var(--signal-orange-hot); font: 700 9px/1 "IBM Plex Mono", monospace; text-transform: uppercase; }
.l-evidence-card strong { color: #e8eef6; font-size: 12px; line-height: 1.4; }
.l-evidence-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; border-radius: 10px; background: var(--signal-orange); }
.l-score-ring {
  width: 58px;
  height: 58px;
  display: grid;
  place-content: center;
  color: #fff;
  border: 3px solid var(--signal-orange);
  border-radius: 50%;
  font: 800 18px/1 "IBM Plex Mono", monospace;
  box-shadow: 0 0 24px rgba(255,90,31,.2);
}
.l-score-ring small { display: block; margin-top: 2px; color: #768499; font-size: 7px; text-align: center; }
.l-signal-disclaimer { margin: 12px 2px 0; color: #5f6d7f; font-size: 9px; }
.l-signal-metrics {
  border-top: 1px solid var(--signal-line);
  border-bottom: 1px solid #dfe5ec;
  background: var(--signal-cloud);
}
.l-signal-metrics .l-strip-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1440px;
  padding: 0 44px;
}
.l-signal-metrics article {
  display: flex;
  gap: 18px;
  align-items: center;
  min-height: 134px;
  padding: 25px 34px;
  border-right: 1px solid #dce3eb;
}
.l-signal-metrics article:first-child { border-left: 1px solid #dce3eb; }
.l-signal-metrics article > span { color: var(--signal-orange); font: 700 11px/1 "IBM Plex Mono", monospace; }
.l-signal-metrics strong, .l-signal-metrics small { display: block; }
.l-signal-metrics strong { color: var(--signal-ink); font-size: 16px; }
.l-signal-metrics small { margin-top: 6px; color: #687586; line-height: 1.45; }
.landing .l-section,
.landing .l-section-alt,
.landing .l-security,
.landing .l-pricing,
.landing .l-final-cta {
  color: var(--signal-ink);
}
.landing .l-section { max-width: none; margin: 0; padding: 100px max(44px, calc((100vw - 1352px)/2)); background: #fff; }
.landing .l-section-alt { background: var(--signal-cloud); }
.landing .l-eyebrow { color: #d94b18; }
.landing .l-h2 { color: var(--signal-ink); letter-spacing: -.04em; }
.landing .l-section-lead { color: #697587; }
.landing .l-dash-card,
.landing .l-feature-card,
.landing .l-product-card {
  border-color: #dde4ec;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(8,17,31,.06);
}
.l-footer { background: #070b12; border-top: 1px solid var(--signal-line); }

@media (max-width: 1080px) {
  .l-hero-signal { grid-template-columns: 1fr; padding-top: 86px; }
  .l-signal-demo { max-width: 760px; width: 100%; }
  .l-signal-metrics .l-strip-inner { padding-inline: 20px; }
}
@media (max-width: 720px) {
  .l-hero-signal { padding: 72px 20px 56px; min-height: 0; }
  .l-hero-signal h1 { font-size: 46px; }
  .l-signal-demo { padding: 14px; }
  .l-signal-route { grid-template-columns: 1fr; }
  .l-signal-route > i { display: none; }
  .l-signal-metrics .l-strip-inner { grid-template-columns: 1fr; }
  .l-signal-metrics article { min-height: 100px; border-left: 0; border-right: 0; border-bottom: 1px solid #dce3eb; }
  .l-nav-links { display: none; }
}


/* Signal OS 2.0 — ajuste de fidelidad visual y marca transparente */
.l-nav {
  padding-top: 10px;
  padding-bottom: 10px;
}
.l-nav-brand {
  width: 194px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.l-nav-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
.l-footer .l-nav-brand {
  width: 220px;
  height: 64px;
}
.l-footer .l-nav-brand img { height: 100%; opacity: 1; }
.l-hero-signal {
  grid-template-columns: minmax(430px, .88fr) minmax(560px, 1.12fr);
  gap: clamp(54px, 6vw, 92px);
  min-height: 690px;
  padding: 82px 44px 70px;
}
.l-hero-signal h1 {
  max-width: 620px;
  font-size: clamp(48px, 4.35vw, 68px);
  line-height: 1.01;
}
.l-hero-signal .l-hero-lead {
  max-width: 590px;
  font-size: 17px;
}
.l-signal-demo {
  width: 100%;
  max-width: 720px;
  justify-self: end;
}
.l-wave-shell { min-height: 196px; }
.l-signal-metrics article { min-height: 118px; }
@media (max-width: 1080px) {
  .l-hero-signal {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .l-signal-demo { justify-self: center; }
}
@media (max-width: 760px) {
  .l-nav-brand { width: 166px; height: 48px; }
  .l-hero-signal h1 { font-size: clamp(42px, 13vw, 56px); }
}

/* Canonical first viewport surface.
   The page mantle owns the background; the navigation uses the real lockup image.
 */
body.landing:not(.plans-page):not(.seo-page) main,
body.landing:not(.plans-page):not(.seo-page) .l-hero-signal {
  background: transparent !important;
  background-image: none !important;
}

body.landing .l-nav-brand {
  position: relative;
  background: transparent !important;
  background-image: none !important;
}

body.landing .l-nav-brand::before,
body.landing .l-nav-brand::after {
  content: none !important;
  display: none !important;
}

body.landing .l-nav-brand img {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}