/*
 * assets/css/landing.css — portada Lead Rescue (index.html): hero con teléfono y chat,
 * franja de confianza, problema, cómo funciona (5 pasos), Test (texto + formulario), caso,
 * precio (una tarjeta), cierre. Colores SOLO por var(--…): ver tokens.css.
 * Lo compartido con /sivlo/ (reset, cabecera, botones, tarjetas, marcos de dispositivo,
 * kicker/h2/lede, FAQ, pie) vive en site.css: no se repite aquí.
 */

/* ===== Hero ===== */
.hero { padding: 4rem 0 3.5rem; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem; align-items: center; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; font-weight: 700; }
.hero h1 em { font-style: normal; color: var(--indigo); }
.hero .lede { font-size: 1.15rem; margin-top: 1.2rem; max-width: 50ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }

/* Escena: un teléfono con la conversación tras la llamada perdida. El marco .phone/.phone-screen
   viene de site.css (posicionado absoluto para la escena de Sivlo): aquí se vuelve un bloque normal. */
.stage { display: flex; justify-content: center; }
.hero-phone { position: relative; right: auto; bottom: auto; width: min(100%, 320px); aspect-ratio: auto; }
.hero-phone .phone-screen { background: var(--surface); height: auto; min-height: 26rem; display: flex; flex-direction: column; justify-content: flex-end; padding: 0.85rem; }
.chat { display: grid; gap: 0.55rem; font-size: 0.86rem; }
.chat-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.85rem; color: var(--ink-soft); padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.chat-head svg { width: 18px; height: 18px; color: var(--danger); }
.chat-head em { font-style: normal; margin-left: auto; color: var(--muted); font-weight: 400; font-size: 0.78rem; }
.bubble { max-width: 88%; padding: 0.5rem 0.75rem; border-radius: 14px; line-height: 1.35; opacity: 0; transform: translateY(6px); animation: pop 400ms ease forwards; }
.bubble.in { background: var(--surface-2); border-bottom-left-radius: 4px; }
.bubble.out { background: var(--wa-bg); border-bottom-right-radius: 4px; justify-self: end; }
.bubble small { display: block; color: var(--muted); font-size: 0.72rem; margin-top: 0.2rem; }
.bubble:nth-child(2) { animation-delay: 300ms; } .bubble:nth-child(3) { animation-delay: 1400ms; } .bubble:nth-child(4) { animation-delay: 2500ms; }
.bubble:nth-child(5) { animation-delay: 3500ms; } .bubble:nth-child(6) { animation-delay: 4500ms; }
@keyframes pop { to { opacity: 1; transform: none; } }

.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
.trust .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 2rem; }
.trust .lbl { color: var(--muted); font-size: 0.92rem; font-weight: 600; }
.trust .logo { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink-soft); font-weight: 600; font-size: 0.95rem; }
.trust .logo svg { width: 20px; height: 20px; fill: currentColor; }

/* ===== Problema, cómo funciona, caso ===== */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stat b { display: block; font-family: var(--display); font-size: 2rem; font-weight: 600; color: var(--indigo); line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 0.4rem; font-size: 0.95rem; color: var(--ink-soft); }
.stat small { display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--muted); }
.stats-3 { grid-template-columns: repeat(3, 1fr); margin-top: 2.2rem; }
.stats-3 .stat { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 1.4rem; box-shadow: var(--shadow); }
.stats-3 .stat b { font-size: 2.6rem; }

.steps { display: grid; gap: 1rem; margin-top: 2.2rem; }
.steps-5 { grid-template-columns: repeat(5, 1fr); }
.steps .card { gap: 0.6rem; padding: 1.3rem; }
.steps .num { font-family: var(--display); font-weight: 600; font-size: 2rem; color: var(--indigo); line-height: 1; }

.results { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 2.4rem; box-shadow: var(--shadow); display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.4rem; margin-top: 2.2rem; }
blockquote { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.35rem; line-height: 1.35; letter-spacing: -0.01em; }
blockquote + p { margin-top: 1rem; color: var(--muted); font-size: 0.95rem; }

/* ===== Precio: una sola tarjeta ===== */
.plan-solo { max-width: 640px; margin: 2.2rem auto 0; }
.plan-solo.popular { border-color: var(--indigo); box-shadow: var(--shadow-lift); }
.plan .pop { font-size: 0.86rem; font-weight: 600; color: var(--indigo); }
.plan h3 { font-size: 1.5rem; }
.plan .price { font-family: var(--display); font-size: 2.6rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.plan .price small { font-family: var(--body); font-size: 0.9rem; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-left: 0.4rem; }
.price-month { font-family: var(--display); font-size: 1.35rem; font-weight: 600; color: var(--ink); }
.price-month span { color: var(--muted); font-family: var(--body); font-weight: 400; font-size: 0.95rem; }
.plan-then { color: var(--muted); font-size: 0.95rem; }
.plan-solo li::before { color: var(--teal); }
.plan-solo .btn { align-self: flex-start; }
.plans-note { margin-top: 1rem; color: var(--muted); font-size: 0.95rem; max-width: 70ch; }
.guarantee { margin: 1.4rem auto 0; max-width: 640px; padding: 1rem 1.3rem; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font-size: 0.98rem; display: flex; gap: 0.8rem; align-items: flex-start; }
.guarantee svg { width: 20px; height: 20px; color: var(--teal); flex: none; margin-top: 2px; }
#pricing .plans-note { text-align: center; margin-left: auto; margin-right: auto; }

/* ===== Test (texto + formulario) y cierre ===== */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: start; margin-top: 2.2rem; }
.contact ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; color: var(--ink-soft); }
.contact li { display: flex; gap: 0.5rem; }
.contact li::before { content: "→"; color: var(--teal); font-weight: 700; }
form.audit { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 1.6rem; box-shadow: var(--shadow); display: grid; gap: 0.9rem; }
form.audit label { display: grid; gap: 0.35rem; font-size: 0.92rem; font-weight: 600; }
form.audit input, form.audit select { font: inherit; font-size: 1rem; padding: 0.7rem 0.85rem; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); color: var(--ink); min-height: 44px; }
form.audit small { color: var(--muted); font-size: 0.85rem; }
form.audit .form-error { color: var(--danger); font-size: 0.86rem; }
form.audit input[aria-invalid="true"] { border-color: var(--danger); }
form.audit #wa-open { font-weight: 600; }
.wa { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; color: var(--ink); font-weight: 600; }
.wa svg { width: 18px; height: 18px; fill: var(--wa); }
#contact .wrap { text-align: center; }
#contact .h2, #contact .lede { margin-left: auto; margin-right: auto; }
#contact .cta-row { justify-content: center; }

.foot-about { margin-top: 0.8rem; max-width: 34ch; }

@media (max-width: 960px) {
  .hero { padding: 2.6rem 0 2.4rem; }
  .hero .wrap, .results, .contact { grid-template-columns: 1fr; }
  .steps-5 { grid-template-columns: repeat(2, 1fr); }
  .stats-3 { grid-template-columns: 1fr; }
  .hero-phone { width: min(100%, 300px); }
}
@media (max-width: 560px) {
  .steps-5 { grid-template-columns: 1fr; }
  .chat { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; opacity: 1; transform: none; }
}