/* ============================================================
   JN ∴ — /sobre-jn · estilos de página (editorial, confianza)
   ============================================================ */

/* ---------- HERO ---------- */
.ab-hero{position:relative;padding-top:clamp(130px,16vh,190px);padding-bottom:clamp(48px,6vw,80px);overflow:hidden}
.ab-hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center}
.ab-hero h1{margin:18px 0 0;font-size:clamp(40px,6.4vw,82px)}
.ab-hero__sub{margin:24px 0 0;max-width:42ch;color:var(--lead);font-size:clamp(16px,1.8vw,20px);line-height:1.6}
.ab-photo{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--hair-strong);aspect-ratio:4/5;max-width:440px;justify-self:center;width:100%}
.ab-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.02)}
.ab-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,rgba(14,14,18,.62))}
.ab-photo__tag{position:absolute;left:18px;bottom:16px;z-index:2}
.ab-photo__name{font-family:var(--display);font-size:21px;color:var(--bone)}
.ab-photo__role{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.04em;margin-top:2px}

/* ---------- STORY ---------- */
.story{max-width:740px;margin-inline:auto}
.story__p{font-size:clamp(17px,2vw,22px);line-height:1.65;color:var(--lead);margin:0 0 28px;text-wrap:pretty}
.story__p .lead-in{font-family:var(--display);font-style:italic;color:var(--fg)}
.story__p strong{color:var(--fg);font-weight:600}
.story__quote{font-family:var(--display);font-weight:500;font-size:clamp(26px,4vw,44px);line-height:1.16;color:var(--fg);margin:clamp(36px,5vw,56px) 0;text-wrap:balance;border-left:2px solid var(--gold);padding-left:clamp(20px,3vw,32px)}
.story__quote .gold{color:var(--gold)}

/* ---------- TIMELINE ---------- */
.ab-time{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.ab-mile{padding:26px;background:var(--ink-soft);border:1px solid var(--hair);border-radius:var(--r-card);position:relative}
.ab-mile__k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.ab-mile__t{font-family:var(--display);font-size:22px;margin:0 0 8px}
.ab-mile__d{color:var(--muted);font-size:14px;line-height:1.5;margin:0}

/* ---------- VALORES ---------- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}
.value{padding:28px;background:var(--ink-soft);border:1px solid var(--hair);border-radius:var(--r-card);display:flex;flex-direction:column;gap:13px}
.value .ico-chip{width:46px;height:46px}
.value h3{font-family:var(--sans);font-weight:600;font-size:17px;margin:0}
.value p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

/* ---------- RESPONSIVE ---------- */
@media (max-width:920px){
  .ab-hero__grid{grid-template-columns:1fr;gap:40px}
  .ab-photo{order:-1;max-width:360px;aspect-ratio:1}
  .ab-time{grid-template-columns:1fr}
  .values{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ab-hero__cta .btn{width:100%}
}