/* ============================================================
   JN ∴ — /whatsapp-ia · estilos de página
   Reusa jn.css + home.css (nav, footer, faq, phone, wa chat…)
   ============================================================ */

/* ---------- HERO ---------- */
.wa-hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-top:104px;padding-bottom:72px;overflow:hidden}
.wa-hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,5vw,72px);align-items:center;width:100%}
.wa-hero__copy{max-width:600px}
.wa-hero h1{margin:18px 0 0;font-size:clamp(40px,6.2vw,78px)}
.wa-hero__sub{margin:26px 0 30px;max-width:48ch}
.wa-hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.wa-hero .command{max-width:340px}
.wa-hero .phone{width:100%;margin:0}
.wa-hero .tg-card{display:none}

/* meta badge */
.meta-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 13px;border-radius:var(--r-pill);border:1px solid rgba(37,211,102,.35);background:rgba(37,211,102,.08);font-size:12.5px;color:#8FE9AE;font-family:var(--mono);letter-spacing:.02em}
.meta-badge svg{width:15px;height:15px;fill:var(--wa)}

/* ---------- PROBLEMA stat ---------- */
.wa-prob{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,56px);align-items:center}
.wa-prob__stat{font-family:var(--display);font-size:clamp(72px,12vw,150px);line-height:.9;color:var(--gold);font-variant-numeric:tabular-nums}
.wa-prob__t{font-family:var(--display);font-weight:500;font-size:clamp(24px,3.2vw,38px);line-height:1.12;max-width:18ch}
.wa-prob__t .gold{color:var(--gold)}

/* ---------- CÓMO FUNCIONA (3 pasos) ---------- */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:stretch;margin-top:48px}
.flow__step{background:var(--ink-soft);border:1px solid var(--hair);border-radius:var(--r-card);padding:28px 24px;display:flex;flex-direction:column;gap:14px}
.flow__ico{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;background:var(--ink-2);border:1px solid var(--hair);color:var(--gold)}
.flow__ico .ico{width:24px;height:24px}
.flow__n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.flow__step h3{font-family:var(--sans);font-weight:600;font-size:17px;margin:0}
.flow__step p{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
.flow__arrow{display:grid;place-items:center;color:var(--gold);opacity:.6}
.flow__arrow svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.4;fill:none}

/* ---------- DEMO (simulador) ---------- */
.wa-demo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.wa-demo__copy h2{margin:16px 0 16px}
.wa-demo .chips{margin-top:20px}
.wa-demo .phone{width:min(310px,100%);margin:0 auto}
.wa-demo .phone__screen{aspect-ratio:9/19.4}
.photo-bubble{width:150px;height:104px;border-radius:10px;overflow:hidden;position:relative;background:linear-gradient(135deg,#2b3a32,#1a2620);display:grid;place-items:center}
.photo-bubble .ico{width:34px;height:34px;color:rgba(255,255,255,.5)}
.photo-bubble .cap{position:absolute;left:0;right:0;bottom:0;padding:5px 8px;font-size:9.5px;color:rgba(255,255,255,.8);background:linear-gradient(transparent,rgba(0,0,0,.6))}

/* ---------- LO QUE LO HACE DISTINTO ---------- */
.compare{border:1px solid var(--hair);border-radius:18px;overflow:hidden;margin-top:42px}
.compare__head{display:grid;grid-template-columns:1.5fr 1fr 1fr}
.compare__head>div{padding:20px 22px;border-bottom:1px solid var(--hair)}
.compare__head .c-normal{border-left:1px solid var(--hair);color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-align:center}
.compare__head .c-jn{border-left:1px solid var(--hair);text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);background:var(--gold-soft)}
.compare__row{display:grid;grid-template-columns:1.5fr 1fr 1fr;align-items:center}
.compare__row:not(:last-child){border-bottom:1px solid var(--hair)}
.compare__row>div{padding:16px 22px}
.compare__feat{font-size:15px;color:var(--lead)}
.compare__cell{text-align:center;border-left:1px solid var(--hair)}
.compare__cell.jn{background:var(--gold-soft)}
.compare__cell .x{color:var(--muted);opacity:.6}
.compare__cell .ok{color:var(--ok)}
.compare__cell svg{width:20px;height:20px;display:inline-block;vertical-align:middle}

/* ---------- TIERS ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.tier{background:var(--ink-soft);border:1px solid var(--hair);border-radius:var(--r-card);padding:30px 26px;display:flex;flex-direction:column;gap:16px}
.tier--featured{border-color:var(--gold);background:var(--ink-soft);position:relative}
.tier__badge{position:absolute;top:-11px;left:26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#1A1206;background:var(--gold);padding:4px 11px;border-radius:var(--r-pill)}
.tier__name{font-family:var(--sans);font-weight:600;font-size:18px}
.tier__price{font-family:var(--display);font-size:34px;color:var(--fg);font-variant-numeric:tabular-nums;line-height:1}
.tier__price small{font-size:14px;color:var(--muted);font-family:var(--mono)}
.tier__list{display:flex;flex-direction:column;gap:11px;flex:1}
.tier__list .li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--lead);line-height:1.4}
.tier__list .ico{width:17px;height:17px;color:var(--gold);flex:none;margin-top:2px}
.tiers-note{margin-top:22px;text-align:center;font-size:14px;color:var(--muted);font-family:var(--mono)}
.tiers-note b{color:var(--gold)}

/* ---------- ANTI-META ---------- */
.anti{position:relative;text-align:center;overflow:hidden}
.anti__glow{display:none}
.anti .wrap{position:relative;z-index:2}
.anti__q{font-family:var(--display);font-weight:500;font-size:clamp(26px,4.4vw,52px);line-height:1.14;max-width:22ch;margin:0 auto;text-wrap:balance}
.anti__q .gold{color:var(--gold)}
.anti__q .dim{color:var(--muted)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .wa-hero__grid{grid-template-columns:1fr;gap:44px}
  .wa-hero__copy{max-width:none}
  .wa-hero .command{margin:0 auto}
  .wa-demo{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;gap:0}
  .flow__arrow{transform:rotate(90deg);padding:8px 0}
}
@media (max-width:900px){
  .wa-prob{grid-template-columns:1fr;gap:18px;text-align:left}
  .tiers{grid-template-columns:1fr}
  .tier--featured{order:-1}
}
@media (max-width:680px){
  .compare__head,.compare__row{grid-template-columns:1.3fr .8fr .8fr}
  .compare__feat{font-size:13.5px}
  .compare__row>div,.compare__head>div{padding:13px 12px}
}
@media (max-width:560px){
  .wa-hero__cta .btn{width:100%}
}