/* ============================================================================
   ChichaLabs Studio — SERVICE LANDINGS · Dark Premium
   Ad-optimized landing pages for cold paid traffic (Meta / Google Ads).
   Load order:  tokens.css → styles.css → landing.css
   Reuses the site's components (btn, section, section-label, split-header,
   checklist, metrics, diag-layout__offer, cta-final, mockup, wa-float, footer)
   so these pages inherit the exact reveals / count-up / spotlight / nav-scroll
   behavior from js/main.js. This file only adds the net-new landing pieces:
   the pain-hook hero, the before→after proof block, the slim nav and the
   include cards.
   ============================================================================ */

/* Landing pages sit one folder deep (servicios/*.html) and reuse the site's
   full .nav / .nav-mobile (styled in styles.css) plus the main.js nav behavior.
   `.lp-hero` is a <section>, so the z-index rule in styles.css already covers it. */

/* ============================================================
   HERO — pain hook (the whole job of the first screen)
   ============================================================ */
/* Columna, no fila: el grid del hero se centra en el espacio que sobra y el
   strip de logos queda anclado al fondo, los dos dentro del mismo 100svh. */
.lp-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 8rem 0 1.5rem;
  overflow: hidden;
}
.lp-hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; opacity: 0.6;
}
.lp-hero__grid {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  align-content: center;
}
@media (min-width: 940px) {
  .lp-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 4.5rem; }
}

/* Hero copy column — CSS-only entrance (NOT main.js), so the pain hook always
   renders on a cold-traffic page even if JS is slow, throttled or blocked. */
.lp-hero__col > * {
  opacity: 0;
  animation: lp-rise 0.7s var(--ease-out-expo) forwards;
}
.lp-hero__col > *:nth-child(1) { animation-delay: 0.05s; }
.lp-hero__col > *:nth-child(2) { animation-delay: 0.17s; }
.lp-hero__col > *:nth-child(3) { animation-delay: 0.29s; }
.lp-hero__col > *:nth-child(4) { animation-delay: 0.41s; }
.lp-hero__col > *:nth-child(5) { animation-delay: 0.53s; }
@keyframes lp-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-hero__col > * { opacity: 1; animation: none; transform: none; }
}

.lp-hero__hook {
  font-size: clamp(2.35rem, 1.3rem + 4.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  max-width: 18ch;
  margin: 1.5rem 0 1.5rem;
}
.lp-hero__solution {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  max-width: 52ch;
  margin-bottom: 2rem;
}
.lp-hero__solution strong { color: var(--ink); font-weight: 600; }

.lp-hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* Constrain the WhatsApp glyph inside any button on the landings (the base
   .btn in styles.css sets no svg size, so an unsized viewBox svg would fill it). */
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Micro-trust line under the hero CTA — kills friction objections */
.lp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.lp-trust span { display: inline-flex; align-items: center; gap: 0.4rem; }
.lp-trust span::before {
  content: '';
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green-glow);
  flex-shrink: 0;
}

/* El strip de logos ahora comparte el 100svh con el hero, así que el copy tiene
   que caber en lo que sobra. En pantallas bajas se comprime el ritmo vertical
   en vez de empujar el strip abajo del fold. */
/* Debajo de 940px el grid es de una columna y el mockup se apila debajo del
   copy, sumando ~400px que empujan el strip fuera del fold. En ese layout el
   gráfico es decorativo: el hook y el CTA son los que convierten en tráfico
   pago. Se cae y queda copy + prueba social (strip de marcas) en la primera
   pantalla. */
@media (max-width: 939px) {
  .lp-hero__visual { display: none; }
  .lp-hero__grid { grid-template-columns: 1fr; }
}

/* El strip de logos ahora comparte el 100svh con el hero, así que el copy tiene
   que caber en lo que sobra. En pantallas de menos de ~1100px de alto (todos
   los portátiles y monitores 1080) se comprime el ritmo vertical en vez de
   empujar el strip abajo del fold. */
@media (max-height: 1100px) {
  .lp-hero { padding: 7rem 0 1.5rem; }
  .lp-hero__hook { font-size: clamp(2rem, 1.1rem + 3.4vw, 3.2rem); margin: 1.1rem 0; }
  .lp-hero__solution { font-size: 1.1rem; margin-bottom: 1.5rem; }
  .lp-trust { margin-top: 1.2rem; }
}
@media (max-height: 860px) {
  .lp-hero { padding: 6rem 0 1.1rem; }
  .lp-hero__hook { margin: 0.8rem 0; }
  .lp-hero__solution { font-size: 1.02rem; margin-bottom: 1rem; }
}
/* Altura de teléfono (≤880px): la línea de micro-confianza cede su lugar al
   strip de marcas. Los dos son prueba social; el strip es el que se pidió
   mostrar en la primera pantalla y pesa un renglón menos de copy. En tablet y
   desktop (más altos) la línea de confianza se conserva. */
@media (max-height: 880px) {
  .lp-trust { display: none; }
}
@media (max-height: 810px) {
  .lp-hero { padding: 5.25rem 0 0.9rem; }
  .lp-hero__hook { font-size: clamp(1.8rem, 1rem + 2.6vw, 2.6rem); margin: 0.6rem 0; }
  .lp-hero__solution { font-size: 1rem; margin-bottom: 0.9rem; }
}
/* Teléfonos legacy muy bajos (SE, Android viejos ≤700px): con la copy completa
   de estas landings el strip no entra ni comprimiendo, así que el párrafo de
   solución se recorta a 5 líneas. El hook y el CTA quedan intactos. */
@media (max-width: 600px) and (max-height: 700px) {
  .lp-hero__solution {
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Hero visual — reuses .mockup* from styles.css, framed + floating */
.lp-hero__visual { position: relative; }
.lp-hero__visual .mockup { box-shadow: var(--shadow-lg); }
.lp-hero__visual::after {
  content: '';
  position: absolute;
  inset: -12% -8% -18% -8%;
  z-index: -1;
  background: radial-gradient(60% 60% at 60% 30%, var(--green-glow), transparent 70%);
  opacity: 0.5;
  filter: blur(24px);
  pointer-events: none;
}

/* ============================================================
   BEFORE → AFTER — the proof block that does the heavy lifting
   ============================================================ */
.lp-ba {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 2.5rem;
}
@media (min-width: 820px) {
  .lp-ba { grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: center; }
}
.lp-ba__col {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  background: var(--surface-1);
  height: 100%;
}
.lp-ba__col--before {
  border-color: var(--st-danger-line);
  background: var(--st-danger-bg);
}
.lp-ba__col--after {
  border-color: var(--green-line);
  background: var(--green-wash);
  box-shadow: var(--shadow-glow);
}
.lp-ba__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.lp-ba__col--before .lp-ba__tag { color: var(--st-danger); }
.lp-ba__col--after  .lp-ba__tag { color: var(--green); }
.lp-ba__col p { font-size: 1rem; color: var(--ink-2); line-height: 1.6; }
.lp-ba__col p strong { color: var(--ink); font-weight: 600; }
.lp-ba__col--after p strong { color: var(--green); }
.lp-ba__arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
  font-size: 1.5rem;
  line-height: 1;
}
.lp-ba__arrow svg { width: 28px; height: 28px; }
@media (max-width: 819px) { .lp-ba__arrow { transform: rotate(90deg); } }

/* Metric strip with 3 items (site default is 4) — no empty trailing cell */
.metrics.lp-metrics-3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .metrics.lp-metrics-3 { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   QUÉ INCLUYE — concrete deliverables as scannable cards
   ============================================================ */
.lp-includes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 2.5rem;
}
@media (min-width: 720px) { .lp-includes { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
.lp-include {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-1);
  transition: border-color var(--t-mid), transform var(--t-mid);
}
.lp-include:hover { border-color: var(--green-line); transform: translateY(-2px); }
.lp-include__check {
  width: 2rem; height: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  background: var(--green-wash);
  border: 1px solid var(--green-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
}
.lp-include__check svg { width: 15px; height: 15px; }
.lp-include h3 { font-size: 1.05rem; letter-spacing: var(--tracking-snug); margin-bottom: 0.35rem; }
.lp-include p { font-size: 0.9rem; color: var(--ink-3); line-height: 1.55; }

/* ============================================================
   PRICE ANCHOR — visible "desde US$X", no hunting
   ============================================================ */
.lp-price { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 880px) { .lp-price { grid-template-columns: 1fr 0.9fr; gap: 4rem; } }
.lp-price__head h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); margin-bottom: 1rem; }
.lp-price__head p { color: var(--ink-2); max-width: 46ch; }

/* Reuses .diag-layout__offer (glass card + spotlight from main.js) */
.lp-price__card { width: 100%; }
.lp-price__from {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--green);
}
.lp-price__lead { font-size: 0.95rem; color: var(--ink-2); line-height: 1.6; }
.lp-price__card .checklist { margin-top: 0.25rem; }
.lp-price__card .checklist li { color: var(--ink-2); }

/* ============================================================
   Small helpers
   ============================================================ */
.lp-footer { padding: 4rem 0 3rem; border-top: 1px solid var(--line); }
.lp-footer__inner {
  display: flex; flex-direction: column; gap: 1.25rem;
  align-items: flex-start;
}
@media (min-width: 640px) { .lp-footer__inner { flex-direction: row; justify-content: space-between; align-items: center; } }
.lp-footer__brand { font-family: var(--font-mono); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--green); }
.lp-footer__links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.lp-footer__links a { font-size: 0.85rem; color: var(--ink-3); transition: color var(--t-fast); }
.lp-footer__links a:hover { color: var(--green); }

/* Section eyebrow variant used on landings (mono, matches .section-label) */
.lp-back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; color: var(--ink-3);
  margin-top: 3rem;
  transition: gap var(--t-fast), color var(--t-fast);
}
.lp-back:hover { color: var(--green); gap: 0.6rem; }