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

/* ---------- HERO flagship ---------- */
.dir-hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-top:104px;padding-bottom:72px;overflow:hidden}
.dir-hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,72px);align-items:center;width:100%}
.dir-hero__copy{max-width:600px}
.dir-hero h1{margin:18px 0 0;font-size:clamp(40px,6.4vw,80px)}
.dir-hero__sub{margin:26px 0 30px;max-width:48ch}
.dir-hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}

/* telegram phone in hero (briefing se escribe solo) */
.dir-device{justify-self:center;width:min(360px,92%);position:relative}
.dir-device .tg-screen{width:100%}
.dir-device .tg-screen__body{min-height:380px}
.dir-glow{display:none}

/* ---------- IDEA flip (problema elevado → la idea) ---------- */
.idea{position:relative}
.idea__line{font-family:var(--display);font-size:clamp(26px,4.2vw,52px);line-height:1.12;letter-spacing:-.01em;max-width:20ch;text-wrap:balance}
.idea__a{color:var(--muted)}
.idea__b{color:var(--fg);margin-top:.5em}
.idea__b .gold{color:var(--gold)}
.idea__rule{width:64px;height:1px;background:var(--gold);margin:36px 0}

/* ---------- AGENT MAP (organigrama que despierta) ---------- */
.amap-sec{position:relative;overflow:hidden}
.amap{position:relative;width:100%;max-width:660px;margin:48px auto 0;aspect-ratio:1.12/1}
.amap__center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:168px;height:168px;border-radius:50%;display:grid;place-content:center;text-align:center;gap:2px;
  border:1px solid var(--gold);background:var(--ink-2);
  box-shadow:0 18px 50px -28px rgba(0,0,0,.7);z-index:3;
}
.amap__center .tri{font-family:var(--display);color:var(--gold);font-size:26px;line-height:1}
.amap__center b{font-family:var(--display);font-weight:500;font-size:19px;color:var(--fg)}
.amap__center span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.amap__pulse{position:absolute;left:50%;top:50%;width:168px;height:168px;border-radius:50%;border:1px solid rgba(227,165,62,.4);transform:translate(-50%,-50%);z-index:2}
@media (prefers-reduced-motion:no-preference){
  .amap.awake .amap__pulse{animation:amapPulse 3.4s var(--ease-out) infinite}
}
@keyframes amapPulse{0%{opacity:.5;transform:translate(-50%,-50%) scale(1)}70%{opacity:0;transform:translate(-50%,-50%) scale(1.7)}100%{opacity:0}}

.agent{
  position:absolute;transform:translate(-50%,-50%);width:182px;z-index:2;
  background:var(--ink-soft);border:1px solid var(--hair);border-radius:14px;padding:14px;
  opacity:.32;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),border-color var(--t-enter);
  cursor:default;
}
.amap.awake .agent{opacity:1}
.agent:hover{border-color:var(--gold);transform:translate(-50%,-50%) translateY(-3px)}
.agent__top{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.agent__ico{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--ink-2);border:1px solid var(--hair);color:var(--gold)}
.agent__ico .ico{width:18px;height:18px}
.agent__name{font-weight:600;font-size:14px;color:var(--fg);line-height:1.1}
.agent__role{font-size:12.5px;color:var(--muted);line-height:1.4}
.agent__status{display:flex;align-items:center;gap:6px;margin-top:9px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--muted)}
.agent__dot{width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none}
.amap.awake .agent__dot{background:var(--ok)}
@media (prefers-reduced-motion:no-preference){
  .amap.awake .agent__dot{animation:blink 1.8s ease-in-out infinite}
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

.amap__link{position:absolute;left:50%;top:50%;height:1px;transform-origin:left center;z-index:1;
  background:linear-gradient(90deg,rgba(227,165,62,.55),rgba(227,165,62,.06));opacity:0;transition:opacity .6s var(--ease-out)}
.amap.awake .amap__link{opacity:1}

/* agent list (mobile) */
.amap-list{display:none;flex-direction:column;gap:12px;margin-top:36px}
.amap-list .agent{position:static;transform:none;width:auto;opacity:1}
.amap-list .agent:hover{transform:none}

/* ---------- INTERACCIÓN ESTRELLA (telegram) ---------- */
.dir-demo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.dir-demo__copy h2{margin:16px 0 16px}
.dir-demo__steps{display:flex;flex-direction:column;gap:14px;margin:22px 0 26px}
.dir-step{display:flex;gap:13px;align-items:flex-start}
.dir-step__n{width:26px;height:26px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);font-family:var(--mono);font-size:12px;display:grid;place-items:center;flex:none}
.dir-step p{margin:0;font-size:14.5px;color:var(--lead);line-height:1.45}
.dir-step b{color:var(--fg)}
.dir-demo .tg-screen{width:min(380px,100%);margin:0 auto}
.dir-demo .tg-screen__body{min-height:360px}

/* ---------- SPRINTS ---------- */
.sprints{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;position:relative}
.sprint{padding:26px 22px;border-left:1px solid var(--hair);position:relative}
.sprint:first-child{border-left:0}
.sprint__tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.sprint__node{position:absolute;left:22px;top:-6px;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--ink)}
.sprint:not(:first-child) .sprint__node{background:var(--ink-2);border:1px solid var(--hair-strong);box-shadow:0 0 0 4px var(--ink)}
.sprints::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--hair)}
.sprints::after{content:"";position:absolute;top:-1px;left:0;width:25%;height:1px;background:var(--gold)}
.sprint h3{font-family:var(--display);font-weight:500;font-size:20px;margin:0 0 8px}
.sprint p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}

/* ---------- ROI anchor ---------- */
.dir-roi{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px);align-items:center}
.dir-roi__big{font-family:var(--display);font-size:clamp(56px,9vw,108px);line-height:.95;color:var(--gold);font-variant-numeric:tabular-nums}
.dir-roi__big small{display:block;font-family:var(--sans);font-size:15px;color:var(--muted);font-variant-numeric:normal;margin-top:14px;letter-spacing:.02em}
.dir-roi__points{display:flex;flex-direction:column;gap:18px}
.dir-roi__pt{display:flex;gap:13px;align-items:flex-start}
.dir-roi__pt .ico{color:var(--gold);margin-top:2px;flex:none}
.dir-roi__pt b{color:var(--fg);display:block;font-size:15.5px;margin-bottom:2px}
.dir-roi__pt span{color:var(--muted);font-size:14px;line-height:1.45}

/* ---------- LA PRUEBA (ventaja injusta) ---------- */
.proof{position:relative;text-align:center;overflow:hidden}
.proof__glow{display:none}
.proof .wrap{position:relative;z-index:2}
.proof__q{font-family:var(--display);font-weight:500;font-style:italic;font-size:clamp(28px,5vw,58px);line-height:1.12;letter-spacing:-.01em;max-width:18ch;margin:0 auto;text-wrap:balance}
.proof__q .gold{font-style:normal}
.proof__by{margin-top:28px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--muted)}
.proof__by b{color:var(--fg)}

/* ---------- PRECIO a tu medida ---------- */
.dir-price{border:1px solid var(--hair-strong);border-radius:20px;background:var(--ink-2);padding:clamp(30px,4vw,52px);text-align:center}
.dir-price__amt{font-family:var(--display);font-size:clamp(30px,4vw,44px);color:var(--gold);margin:10px 0 14px}
.dir-price__d{color:var(--muted);max-width:44ch;margin:0 auto 26px;font-size:15.5px;line-height:1.55}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .dir-hero__grid{grid-template-columns:1fr;gap:48px}
  .dir-hero__copy{max-width:none}
  .dir-demo{grid-template-columns:1fr}
  .dir-roi{grid-template-columns:1fr}
}
@media (max-width:900px){
  .amap{display:none}
  .amap-list{display:flex}
  .sprints{grid-template-columns:1fr;margin-top:34px}
  .sprint{border-left:0;border-top:1px solid var(--hair);padding:24px 0 24px 26px}
  .sprint:first-child{border-top:0}
  .sprint__node{left:0;top:26px}
  .sprints::before{top:0;left:5px;right:auto;width:1px;height:100%}
  .sprints::after{top:0;left:5px;width:1px;height:25%}
}
@media (max-width:560px){
  .dir-hero__cta .btn{width:100%}
  .dir-device{width:min(330px,100%)}
}