/* ===== Sobre mí — estilos de página ===== */

/* --- Hero --- */
.sm-hero{
  background:var(--bg);
  border-bottom:1px solid var(--rule);
}
.sm-hero-inner{
  display:grid;
  grid-template-columns:1.05fr 0.82fr;
  gap:64px;
  align-items:center;
  padding:18px 0 76px;
}
.sm-hero-eyebrow{ color:var(--muted); margin-bottom:22px; display:inline-block; }
.sm-h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:58px;
  line-height:1.08;
  letter-spacing:-0.012em;
  color:var(--ink);
  margin:0 0 26px;
  text-wrap:balance;
}
.sm-h1 em{
  font-style:italic;
  color:var(--amber-2);
}
.sm-hero-lede{
  font-family:var(--sans);
  font-size:19px;
  line-height:1.62;
  color:var(--ink-2);
  max-width:30em;
  margin:0 0 30px;
}
.sm-hero-lede strong{ color:var(--ink); font-weight:600; }

.sm-facts{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.sm-fact{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--ink-2);
  padding:13px 18px 13px 0;
  margin-right:18px;
  border-right:1px solid var(--rule);
  display:flex;
  align-items:center;
}
.sm-fact:last-child{ border-right:0; margin-right:0; padding-right:0; }
.sm-fact b{ color:var(--ink); font-weight:500; }

/* --- Portrait --- */
.sm-portrait-wrap{
  position:relative;
}
.sm-portrait{
  position:relative;
  aspect-ratio:1/1;
  background:var(--navy);
  overflow:hidden;
  border:1px solid var(--rule);
}
.sm-portrait img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.sm-portrait .frame-corners{ position:absolute; inset:16px; pointer-events:none; z-index:2; }
.sm-portrait .frame-corners span{
  position:absolute;width:20px;height:20px;border:1px solid rgba(250,250,248,.6);
}
.sm-portrait .frame-corners .tl{top:0;left:0;border-right:0;border-bottom:0}
.sm-portrait .frame-corners .tr{top:0;right:0;border-left:0;border-bottom:0}
.sm-portrait .frame-corners .bl{bottom:0;left:0;border-right:0;border-top:0}
.sm-portrait .frame-corners .br{bottom:0;right:0;border-left:0;border-top:0}
.sm-portrait-cap{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
}
.sm-portrait-cap .who{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-2);
}
.sm-portrait-cap .handle{
  font-family:var(--mono);font-size:11.5px;color:var(--amber-2);
}

/* --- Cuerpo editorial --- */
.sm-body{ padding:84px 0 0; }
.sm-measure{ max-width:720px; margin:0 auto; }

.sm-block{ margin-bottom:72px; }
.sm-block-eyebrow{ color:var(--muted); display:block; margin-bottom:18px; }
.sm-block h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:30px;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0 0 22px;
  text-wrap:balance;
}
.sm-block p{
  font-family:var(--sans);
  font-size:17.5px;
  line-height:1.72;
  color:var(--ink-2);
  margin:0 0 20px;
  text-wrap:pretty;
}
.sm-block p:last-child{ margin-bottom:0; }
.sm-block p strong{ color:var(--ink); font-weight:600; }
.sm-block p.sm-lead{
  font-size:21px;
  line-height:1.62;
  color:var(--ink);
}
.sm-block p.sm-lead::first-letter{
  font-family:var(--serif);
  float:left;
  font-size:64px;
  line-height:0.84;
  padding:6px 14px 0 0;
  color:var(--ink);
}

/* --- Cita destacada --- */
.sm-quote{
  margin:48px 0;
  padding:0 0 0 28px;
  border-left:2px solid var(--amber);
}
.sm-quote p{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:27px;
  line-height:1.38;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
}

/* --- Figura editorial --- */
.sm-figure{
  margin:36px 0 8px;
}
.sm-figure img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--rule);
  background:var(--bg-soft);
}
.sm-figure figcaption{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.02em;
  color:var(--muted);
  margin-top:10px;
}

/* --- Línea de diálogo --- */.sm-dialog{
  font-family:var(--serif) !important;
  font-style:italic;
  font-size:21px !important;
  line-height:1.5 !important;
  color:var(--ink) !important;
}

/* --- Lista editorial --- */
.sm-list{
  list-style:none;
  margin:28px 0 4px;
  padding:0;
  border-top:1px solid var(--rule);
}
.sm-list li{
  font-family:var(--sans);
  font-size:17.5px;
  line-height:1.5;
  color:var(--ink);
  padding:15px 0 15px 26px;
  border-bottom:1px solid var(--rule);
  position:relative;
  text-wrap:pretty;
}
.sm-list li::before{
  content:"";
  position:absolute;
  left:2px; top:23px;
  width:6px; height:6px;
  background:var(--ink);
}

/* --- Pilares Empresario / Formador / Consultor --- */
.sm-pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin:8px 0 0;
}
.sm-pillar{
  padding:28px 24px 30px;
  border-right:1px solid var(--rule);
}
.sm-pillar:last-child{ border-right:0; }
.sm-pillar .sm-pillar-ic{
  width:26px;height:26px;color:var(--navy);display:block;margin-bottom:16px;
}
.sm-pillar .sm-pillar-ic svg{ width:26px;height:26px; }
.sm-pillar h3{
  font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink);margin:0 0 7px;
}
.sm-pillar p{
  font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--muted);margin:0;
}

/* --- Banda personal --- */
.sm-personal{
  background:var(--bg-soft);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin-top:84px;
  padding:84px 0;
}
.sm-personal .sm-block{ margin-bottom:0; }
.sm-personal p{ color:var(--ink-2); }

/* --- Cierre --- */
.sm-closer{
  padding:96px 0 100px;
  text-align:center;
}
.sm-closer .sm-closer-eyebrow{ color:var(--muted); display:block; margin-bottom:26px; }
.sm-closer p{
  font-family:var(--serif);
  font-weight:400;
  font-size:40px;
  line-height:1.22;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0 auto;
  max-width:18em;
  text-wrap:balance;
}
.sm-closer p em{
  font-style:italic;
  color:var(--amber-2);
}
.sm-closer-sign{
  margin-top:34px;
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--ink-2);
}
.sm-closer-sign b{ color:var(--ink);font-weight:500; }

/* --- CTA --- */
.sm-cta{
  border-top:1px solid var(--rule);
  padding:56px 0 0;
  margin-top:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 28px;
}
.sm-cta .sm-cta-label{
  font-family:var(--sans);font-size:15px;color:var(--ink-2);margin-right:8px;
}

/* --- Responsive --- */
@media (max-width:900px){
  .sm-hero-inner{ grid-template-columns:1fr; gap:40px; padding-bottom:56px; }
  .sm-portrait-wrap{ order:-1; max-width:380px; }
  .sm-h1{ font-size:46px; }
  .sm-body{ padding-top:60px; }
  .sm-personal{ margin-top:64px; padding:64px 0; }
  .sm-closer p{ font-size:32px; }
}
@media (max-width:560px){
  .sm-h1{ font-size:38px; }
  .sm-hero-lede{ font-size:17px; }
  .sm-pillars{ grid-template-columns:1fr; }
  .sm-pillar{ border-right:0; border-bottom:1px solid var(--rule); }
  .sm-pillar:last-child{ border-bottom:0; }
  .sm-quote p{ font-size:23px; }
  .sm-closer p{ font-size:27px; }
  .sm-block p.sm-lead::first-letter{ font-size:54px; }
}