/* ==========================================================================
   EasyCheck — landing pública (v3)
   Requiere tokens.css y components.css. No requiere screens.css.
   ========================================================================== */

/* Escala tipográfica de la landing: SEIS tamaños y ninguno más. Antes había
   medidas sueltas (18.5, 17.5, 15.5, 13.5, 11.5px) decididas de a una; esa
   improvisación es exactamente lo que separa lo prolijo de lo impecable. Si
   necesitás un tamaño nuevo, primero fijate si no sirve alguno de estos. */
:root {
  --lp-sub:      19px;    /* bajada de sección */
  --lp-lead:     19px;    /* bajada del hero */
  --lp-body-lg:  17px;    /* pregunta del FAQ, cuerpo destacado */
  --lp-body:     15px;    /* cuerpo estándar */
  --lp-meta:     13px;    /* fineprint, notas */
  --lp-micro:    11px;    /* barra del mockup, sellos */
  --lp-price:    34px;    /* importe de plan */
  --lp-rhythm:   104px;   /* aire entre secciones — uno solo, para toda la página */

  /* Contraste: el gris terciario del sistema da 2,75:1 sobre el fondo, muy por
     debajo del mínimo de 4,5:1 que exige WCAG para texto chico. Acá se sube a
     4,59:1. El override vive en landing.css, que solo carga esta página, así
     que no toca la aplicación — donde el mismo problema sigue abierto. */
  --ec-text-faint: #5f83ab;
}

/* ---------------------------------------------------------------- fondo --- */
/* Grid fino + dos glows (verde de marca / info azul) en tono duotono, fijos
   al viewport. Todo estático a propósito: le da profundidad sin que nada
   "respire" — el resto del sistema (ver .lp-reveal más abajo) ya usa el
   presupuesto de movimiento en el contenido, no en el fondo. En mobile se
   pasa a background-attachment: scroll (más abajo, en el media query),
   fixed en scroll puede generar repintados en gama media. */
body {
  background-color: var(--ec-bg);
  background-image:
    radial-gradient(640px circle at 88% -8%, rgba(0, 196, 122, .11), transparent 60%),
    radial-gradient(520px circle at 4% 22%, rgba(77, 166, 255, .07), transparent 58%),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-size: auto, auto, 64px 64px, 64px 64px;
  background-attachment: fixed, fixed, fixed, fixed;
}

.lp { max-width: var(--ec-content-max); margin: 0 auto; padding: 0 var(--ec-space-11); }

/* -------------------------------------------------------------- nav */
.lp-nav {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--ec-border);
  background: rgba(15, 31, 56, .88);
  backdrop-filter: blur(14px);
}
.lp-nav-inner {
  max-width: var(--ec-content-max); margin: 0 auto;
  padding: var(--ec-space-6) var(--ec-space-11);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ec-space-11); flex-wrap: wrap;
}
.lp-nav-links { display: flex; align-items: center; gap: var(--ec-space-11); flex-wrap: wrap; font-size: var(--ec-text-md); font-weight: var(--ec-weight-medium); }
.lp-nav-links a { color: var(--ec-text-soft); }
.lp-nav-links a:hover { color: var(--ec-text); }
.lp-wordmark { font-family: var(--ec-font-display); font-size: var(--ec-text-xl); font-weight: var(--ec-weight-bold); letter-spacing: -0.03em; color: var(--ec-text-strong); }

/* ------------------------------------------------------------- hero */
.lp-hero { padding: 92px 0 0; }
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: var(--ec-space-11);
  padding: 5px var(--ec-space-5);
  border: 1px solid rgba(0, 196, 122, .25);
  border-radius: var(--ec-radius-pill);
  background: var(--ec-accent-soft);
  color: var(--ec-accent);
  font-size: var(--ec-text-2xs); font-weight: var(--ec-weight-bold);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.lp-eyebrow .dot { width: 6px; height: 6px; border-radius: var(--ec-radius-full); background: var(--ec-accent); box-shadow: 0 0 6px var(--ec-accent); }
.lp-h1 {
  margin: 0; max-width: 21ch;
  font-family: var(--ec-font-display);
  font-size: var(--ec-text-hero);
  font-weight: var(--ec-weight-bold);
  letter-spacing: var(--ec-tracking-hero);
  line-height: 1.03;
  color: var(--ec-text-strong);
}
.lp-lead { margin: var(--ec-space-11) 0 0; max-width: 58ch; font-size: var(--lp-lead); color: var(--ec-text-muted); }
.lp-cta-row { display: flex; align-items: center; gap: var(--ec-space-5); flex-wrap: wrap; margin-top: var(--ec-space-12); }
.lp-fineprint { margin: var(--ec-space-7) 0 0; font-size: var(--lp-meta); color: var(--ec-text-soft); }

/* --------------------------------------------------- barra de confianza */
/* Cuatro señales verificables, sin adjetivos. El ícono va en gris: acompaña,
   no compite. Nada de verde acá — no hay ninguna acción que tomar. */
.lp-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--ec-space-11);
  margin-top: var(--ec-space-13);
  padding: var(--ec-space-11) 0;
  border-top: 1px solid var(--ec-divider);
  border-bottom: 1px solid var(--ec-divider);
}
.lp-trust-item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--ec-space-4); align-items: start; }
.lp-trust-item > i { font-size: 17px; color: var(--ec-text-soft); line-height: 1.25; }
.lp-trust-title { display: block; font-size: var(--lp-meta); font-weight: var(--ec-weight-semibold); color: var(--ec-text); }
.lp-trust-text  { display: block; margin-top: 2px; font-size: var(--lp-meta); line-height: 1.5; color: var(--ec-text-soft); }

/* Tarjetas de confianza y problemas: dos filas de tres, mismo diseño. */
.lp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ec-space-12); padding-top: var(--ec-space-12); }
.lp-cards-top { margin-top: var(--ec-space-13); }
.lp-card { border-top: 2px solid var(--ec-border-strong); padding-top: var(--ec-space-8); }
.lp-card > i { display: block; margin-bottom: var(--ec-space-5); font-size: 20px; line-height: 1; color: var(--ec-text-soft); }
.lp-card h3 { margin: 0 0 var(--ec-space-4); font-family: var(--ec-font-display); font-size: var(--ec-text-xl); font-weight: var(--ec-weight-bold); letter-spacing: -0.02em; color: var(--ec-text-strong); }
.lp-card p { margin: 0; font-size: var(--lp-body); line-height: 1.65; color: var(--ec-text-muted); }
@media (max-width: 900px) { .lp-cards { grid-template-columns: minmax(0, 1fr); gap: var(--ec-space-9); } }

/* ------------------------------------------------- hoy vs. easycheck --- */
/* La comparación es contra la situación actual del visitante, nunca contra un
   competidor con nombre: es más honesto y no envejece cuando el otro saca una
   función. La columna "hoy" va apagada y la de EasyCheck con el texto pleno:
   la jerarquía de color hace el argumento sin que haga falta escribirlo. */
.lp-compare { margin-top: var(--ec-space-13); border-top: 1px solid var(--ec-divider); }
.lp-compare-head,
.lp-compare-row {
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ec-space-11);
  align-items: baseline;
  padding: var(--ec-space-10) 0;
  border-bottom: 1px solid var(--ec-divider);
}
.lp-compare-head {
  padding: var(--ec-space-6) 0;
  font-size: var(--ec-text-3xs);
  font-weight: var(--ec-weight-bold);
  letter-spacing: var(--ec-tracking-kicker);
  text-transform: uppercase;
}
.lp-compare-head .lp-compare-hoy { color: var(--ec-text-faint); }
.lp-compare-head .lp-compare-ec  { color: var(--ec-accent); }
.lp-compare-tema {
  font-family: var(--ec-font-display);
  font-size: var(--lp-body-lg);
  font-weight: var(--ec-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--ec-text-strong);
}
.lp-compare-row .lp-compare-hoy { font-size: var(--lp-body); line-height: 1.6; color: var(--ec-text-soft); }
.lp-compare-row .lp-compare-ec {
  display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: var(--ec-space-3);
  font-size: var(--lp-body); line-height: 1.6; color: var(--ec-text);
}
.lp-compare-row .lp-compare-ec i { font-size: var(--lp-body); color: var(--ec-accent); line-height: 1.6; }

/* ---------------------------------------------------------- secciones */
.lp-section { padding: var(--lp-rhythm) 0 0; }
.lp-h2 {
  margin: 0; max-width: 24ch;
  font-family: var(--ec-font-display);
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: var(--ec-weight-bold);
  letter-spacing: var(--ec-tracking-title);
  line-height: 1.08;
  color: var(--ec-text-strong);
}
.lp-sub { margin: var(--ec-space-8) 0 0; max-width: 62ch; font-size: var(--lp-sub); color: var(--ec-text-muted); }

/* Los tres problemas: regla superior de acento, sin relleno. */
.lp-problems { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--ec-space-12); padding-top: var(--lp-rhythm); }
.lp-problem { border-top: 2px solid var(--ec-border-strong); padding-top: var(--ec-space-8); }
.lp-problem h3 { margin: 0 0 var(--ec-space-4); font-family: var(--ec-font-display); font-size: var(--ec-text-xl); font-weight: var(--ec-weight-bold); letter-spacing: -0.02em; color: var(--ec-text-strong); }
.lp-problem p { margin: 0; font-size: var(--lp-body); line-height: 1.65; color: var(--ec-text-muted); }

/* Anotaciones numeradas del dashboard. */
.lp-annotated { display: grid; grid-template-columns: minmax(0, 1fr) 276px; gap: var(--ec-space-12); align-items: start; margin-top: var(--ec-space-13); }
.lp-notes { display: flex; flex-direction: column; gap: var(--ec-space-9); padding-top: var(--ec-space-1); }
.lp-note { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 11px; align-items: start; }
.lp-note-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--ec-radius-full);
  background: var(--ec-accent-soft); border: 1px solid rgba(0, 196, 122, .3);
  color: var(--ec-accent); font-size: var(--ec-text-2xs); font-weight: var(--ec-weight-bold);
}
.lp-note p { margin: 0; font-size: var(--ec-text-md); line-height: 1.55; color: var(--ec-text-muted); }
/* Marcador sobre la esquina de una tarjeta del mockup. */
.lp-marker {
  position: absolute; top: -11px; right: -11px; z-index: 2;
  width: 24px; height: 24px; border-radius: var(--ec-radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ec-accent); color: var(--ec-accent-ink);
  font-size: var(--ec-text-xs); font-weight: var(--ec-weight-bold);
  box-shadow: 0 0 0 4px var(--ec-surface);
}

/* Pie del tablero anotado: una sola línea, centrada, con un filete arriba.
   Es un remate del argumento, no una nota al pie — por eso no va en gris de
   nota sino en el gris de cuerpo. */
.lp-pie {
  margin: var(--ec-space-13) auto 0;
  padding-top: var(--ec-space-9);
  max-width: 54ch;
  border-top: 1px solid var(--ec-divider);
  text-align: center;
  font-size: var(--lp-body-lg);
  line-height: 1.6;
  color: var(--ec-text-muted);
}

/* Módulos. */
.lp-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--ec-space-6); margin-top: var(--ec-space-13); }
.lp-module { display: flex; flex-direction: column; gap: var(--ec-space-5); padding: var(--ec-space-11) var(--ec-space-10); }
.lp-module-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--ec-radius-md);
  background: var(--ec-surface-2); color: var(--ec-text-soft);
  border: 1px solid var(--ec-border);
}
.lp-module h3 { margin: 0; font-family: var(--ec-font-display); font-size: var(--ec-text-xl); font-weight: var(--ec-weight-bold); letter-spacing: -0.02em; color: var(--ec-text-strong); }
.lp-module p { margin: 0; font-size: var(--ec-text-md); line-height: 1.65; color: var(--ec-text-muted); }

/* Banda para contadores. */
.lp-band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ec-space-11); align-items: center;
  padding: var(--ec-space-13);
  border: 1px solid rgba(0, 196, 122, .25);
  border-radius: var(--ec-radius-xl);
  background: linear-gradient(135deg, rgba(0, 196, 122, .06) 0%, rgba(15, 31, 56, 0) 60%), var(--ec-surface);
}
.lp-band h3 { margin: 0 0 var(--ec-space-5); font-family: var(--ec-font-display); font-size: var(--ec-text-3xl); font-weight: var(--ec-weight-bold); letter-spacing: var(--ec-tracking-title); color: var(--ec-text-strong); }
.lp-band p { margin: 0; max-width: 46ch; font-size: var(--ec-text-lg); color: var(--ec-text-muted); }

/* Precios. */
.lp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ec-space-6); }
.lp-plan { display: flex; flex-direction: column; gap: var(--ec-space-7); padding: var(--ec-space-11) var(--ec-space-10); }
.lp-plan-price { font-family: var(--ec-font-display); font-size: var(--lp-price); font-weight: var(--ec-weight-bold); letter-spacing: var(--ec-tracking-hero); color: var(--ec-text-strong); }
.lp-plan-price.is-placeholder { font-family: var(--ec-font-body); font-size: var(--lp-meta); font-weight: var(--ec-weight-medium); letter-spacing: 0; color: var(--ec-text-soft); }
.lp-plan-periodo { font-size: var(--lp-meta); color: var(--ec-text-soft); }
.lp-plan.is-destacado {
  position: relative;
  background: var(--ec-surface-2);
  border-color: var(--ec-accent-line);
}
.lp-plan-tag {
  position: absolute; top: calc(-1 * var(--ec-space-4)); left: var(--ec-space-10);
  padding: 3px var(--ec-space-4);
  border-radius: var(--ec-radius-pill);
  background: var(--ec-accent); color: var(--ec-accent-ink);
  font-size: var(--ec-text-3xs); font-weight: var(--ec-weight-bold);
  letter-spacing: var(--ec-tracking-label); text-transform: uppercase;
}
/* Nota de precios: sobria. Un cartel rojo de "valores de relleno" le dice al
   visitante que la empresa todavía no está operando, y eso cuesta más caro
   que no mostrar un número. */
.lp-precio-nota {
  font-size: var(--lp-meta);
  color: var(--ec-text-soft);
  border-left: 2px solid var(--ec-border-strong);
  padding-left: var(--ec-space-5);
  max-width: 34ch;
  line-height: 1.5;
}
.lp-plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: var(--ec-text-md); color: var(--ec-text-muted); }
.lp-plan li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: start; }
.lp-plan li i { margin-top: 3px; font-size: var(--ec-text-md); color: var(--ec-accent); }
.lp-plan .ec-btn { margin-top: auto; }

/* Preguntas: dos columnas partidas por filetes. */
.lp-faq { border-top: 1px solid var(--ec-divider); margin-top: var(--ec-space-13); }
.lp-faq-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--ec-space-12); padding: var(--ec-space-11) 0;
  border-bottom: 1px solid var(--ec-divider);
}
.lp-faq-row h3 { margin: 0; font-size: var(--lp-body-lg); font-weight: var(--ec-weight-semibold); color: var(--ec-text-strong); }
.lp-faq-row p { margin: 0; font-size: var(--lp-body); line-height: 1.65; color: var(--ec-text-muted); }

/* Cierre y pie. */
.lp-close { padding: 100px 0 108px; text-align: center; }
.lp-close .lp-h1 { max-width: 22ch; margin: 0 auto; font-size: clamp(30px, 4.2vw, 48px); line-height: 1.06; }
.lp-close .lp-cta-row { justify-content: center; }
.lp-footer { border-top: 1px solid var(--ec-divider); background: var(--ec-surface-sunk); }
.lp-footer-inner {
  max-width: var(--ec-content-max); margin: 0 auto;
  padding: var(--ec-space-12) var(--ec-space-11);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ec-space-9); flex-wrap: wrap;
  font-size: var(--ec-text-sm); color: var(--ec-text-soft);
}

/* ------------------------------------------------- entradas al scroll --- */
/* Ver criterio completo en la doc del proyecto ("Sistema de movimiento").
   Un solo disparo por elemento (JS hace unobserve), solo opacity+transform. */
html { scroll-behavior: smooth; }

.lp-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--ec-duration-enter) var(--ec-ease),
              transform var(--ec-duration-enter) var(--ec-ease);
  transition-delay: var(--lp-delay, 0ms);
}
.lp-reveal.is-in { opacity: 1; transform: none; }

/* Pulso corto del círculo numerado cuando su nota entra en pantalla —
   conecta el mockup anotado con el texto que lo explica. */
.lp-marker.is-pulsing { animation: lp-marker-pulse 900ms var(--ec-ease); }
@keyframes lp-marker-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 4px var(--ec-surface); }
  30%  { transform: scale(1.35); box-shadow: 0 0 0 4px var(--ec-surface), 0 0 10px 2px rgba(0, 196, 122, .55); }
  100% { transform: scale(1);    box-shadow: 0 0 0 4px var(--ec-surface); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-reveal { opacity: 1; transform: none; transition: none; }
  .lp-marker.is-pulsing { animation: none; }
}

/* ---------------------------------------------------------- responsive */
@media (max-width: 900px) {
  /* fixed + gradientes grandes puede trabar el scroll en gama media */
  body { background-attachment: scroll, scroll, scroll, scroll; background-size: auto, auto, 44px 44px, 44px 44px; }
  .lp-annotated { grid-template-columns: minmax(0, 1fr); }
  /* La comparación pasa a una fila por tema: tema arriba, y las dos columnas
     una debajo de la otra. En tres columnas angostas no se lee nada. */
  .lp-compare-head { display: none; }
  .lp-compare-row { grid-template-columns: minmax(0, 1fr); gap: var(--ec-space-4); }
  .lp-compare-row .lp-compare-hoy::before { content: 'Hoy · '; color: var(--ec-text-faint); font-weight: var(--ec-weight-semibold); }
  .lp-trust { gap: var(--ec-space-9); }
  .lp-faq-row { grid-template-columns: minmax(0, 1fr); gap: var(--ec-space-5); }
  .lp-hero { padding-top: 56px; }
  .lp-section { padding-top: 64px; }
  .lp-problems { padding-top: 56px; gap: var(--ec-space-9); }
  .lp { padding: 0 var(--ec-space-7); }
  .lp-nav-inner, .lp-footer-inner { padding-left: var(--ec-space-7); padding-right: var(--ec-space-7); }
}