/* ===================================================================
   HERO — fondo blanco con tintes de marca
   =================================================================== */
.hero{
  background:
    radial-gradient(900px 520px at 78% -12%, var(--blue-10), transparent 62%),
    radial-gradient(680px 480px at 6% 108%, var(--orange-08), transparent 58%),
    var(--paper);
  color:var(--ink);position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero .grid-bg{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:46px 46px;opacity:.85;
  mask-image:radial-gradient(700px 500px at 70% 20%, #000 30%, transparent 75%);
}
.hero .wrap{
  position:relative;display:grid;grid-template-columns:1.06fr .94fr;
  gap:54px;align-items:center;padding-top:74px;padding-bottom:78px;
}
.hero h1{font-size:clamp(2.3rem,5.2vw,3.9rem);font-weight:700;margin:18px 0 20px}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero p.lead{font-size:1.12rem;color:var(--muted);max-width:34ch;margin-bottom:16px}

.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero-metrics{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap}
.metric .n{font-family:var(--display);font-weight:700;font-size:1.5rem;color:var(--navy)}
.metric .l{font-size:.78rem;color:var(--muted);font-family:var(--mono)}

/* ---------- Mapa de decisión: convierte capacidades en una ruta ---------- */
.decision-map{position:relative;border:1px solid var(--line-strong);border-radius:20px;padding:26px;background:rgba(255,255,255,.88);box-shadow:var(--shadow-lg)}
.map-head{display:flex;flex-direction:column;gap:2px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.map-kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.map-head strong{font-family:var(--display);font-size:1.35rem;color:var(--navy)}
.map-head span:last-child{font-size:.86rem;color:var(--muted)}
.map-steps{list-style:none;position:relative;display:grid;gap:0;margin:20px 0}
.map-steps::before{content:"";position:absolute;left:15px;top:22px;bottom:22px;width:1px;background:var(--line-strong)}
.map-steps li{position:relative;z-index:1;display:flex;gap:12px;align-items:center;padding:9px 0}
.map-steps li>span{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:var(--paper);border:1px solid var(--blue);color:var(--blue);font-family:var(--mono);font-size:.65rem}
.map-steps li:first-child>span{border-color:var(--orange);background:var(--orange);color:#fff}
.map-steps b{display:block;font-size:.87rem;color:var(--navy)}
.map-steps small{display:block;font-size:.75rem;color:var(--muted)}
.map-outcome{border-radius:12px;background:var(--blue-05);border:1px solid var(--blue-18);padding:13px 14px;display:flex;flex-direction:column;gap:3px}
.map-outcome span{font-family:var(--mono);font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.map-outcome b{font-size:.84rem;color:var(--navy);line-height:1.35}

@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:10px}
  .decision-map{max-width:580px}
}