/* ══════════════════════════════════════════════════════
   SOBRE MÍ — Dra. Julieta Rivero
   Paleta base de marca: negro cálido y dorado, sin color
   de tratamiento, porque esta página es la de la persona.
   ══════════════════════════════════════════════════════ */

:root {
  --bg:         #16140f;
  --bg-dark:    #0f0e0a;
  --bg-mid:     #221f17;
  --bg-deep:    #0c0b08;
  --gold:       #c4a352;
  --gold-dim:   rgba(196,163,82,0.35);
  --accent:     #e8dcc0;
  --text:       #f5f1e8;
  --text-sec:   #d8d2c4;
  --text-dim:   rgba(245,241,232,0.45);
  --border:     rgba(196,163,82,0.18);
  --border-l:   rgba(245,241,232,0.1);
  --hero-glow:  rgba(196,163,82,0.10);
  --cta-stripe: rgba(12,11,8,0.06);
  --cta-border: rgba(12,11,8,0.35);
}

/* ── Hero ─────────────────────────────────────────── */
.sm-hero{ background:var(--bg-dark); padding:140px 80px 90px; text-align:center;
  border-bottom:0.5px solid var(--border); }
.sm-eyebrow{ display:block; font-family:var(--font-body); font-size:var(--text-micro);
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--gold);
  margin-bottom:26px; }
.sm-hero h1{ font-family:var(--font-display); font-weight:300; font-size:var(--text-hero-s);
  line-height:var(--lh-heading); color:var(--text); letter-spacing:var(--ls-tight);
  max-width:880px; margin:0 auto; }
.sm-hero h1 em{ font-style:italic; color:var(--gold); }

/* ── Bloques de texto ─────────────────────────────── */
.sm-bloque{ background:var(--bg); padding:80px; }
.sm-bloque-alt{ background:var(--bg-dark); }
.sm-bloque > *{ max-width:760px; margin-left:auto; margin-right:auto; }
.sm-bloque h2{ font-family:var(--font-display); font-weight:300; font-size:var(--text-2xl);
  color:var(--gold); line-height:var(--lh-heading); margin-bottom:28px;
  letter-spacing:var(--ls-tight); }
.sm-bloque p{ font-family:var(--font-body); font-weight:300; font-size:var(--text-body);
  line-height:var(--lh-relaxed); color:var(--text-sec); letter-spacing:var(--ls-body);
  margin-bottom:22px; }
.sm-bloque p:last-child{ margin-bottom:0; }
.sm-destacado{ border-left:2px solid var(--gold); padding-left:28px;
  color:var(--text) !important; font-size:var(--text-md) !important; }

/* ── Formación ────────────────────────────────────── */
.sm-formacion{ list-style:none; padding:0; max-width:760px; margin:0 auto; }
.sm-formacion li{ padding:24px 0; border-bottom:0.5px solid var(--border-l); }
.sm-formacion li:last-child{ border-bottom:none; }
.sm-form-tema{ display:block; font-family:var(--font-body); font-size:var(--text-micro);
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--gold);
  margin-bottom:9px; }
.sm-form-desc{ display:block; font-family:var(--font-body); font-weight:300;
  font-size:var(--text-sm); line-height:var(--lh-body); color:var(--text-sec); }
.sm-form-desc a{ color:var(--gold); text-decoration:none;
  border-bottom:0.5px solid var(--gold-dim); white-space:nowrap; }
.sm-form-desc a:hover{ border-bottom-color:var(--gold); }

/* ── CTA ──────────────────────────────────────────── */
.sm-cta{ background:var(--gold); color:var(--bg-deep); padding:90px 80px; text-align:center; }
.sm-cta h2{ font-family:var(--font-display); font-weight:300; font-size:var(--text-2xl);
  margin-bottom:14px; letter-spacing:var(--ls-tight); }
.sm-cta p{ font-family:var(--font-body); font-weight:300; font-size:var(--text-sm);
  margin-bottom:34px; letter-spacing:var(--ls-body); }
.sm-cta-boton{ display:inline-block; font-family:var(--font-body); font-size:var(--text-micro);
  letter-spacing:var(--ls-caps); text-transform:uppercase; text-decoration:none;
  color:var(--gold); background:var(--bg-deep); padding:17px 44px; transition:opacity .2s; }
.sm-cta-boton:hover{ opacity:.86; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width:860px){
  .sm-hero{ padding:110px 32px 64px; }
  .sm-hero h1{ font-size:var(--text-xl); }
  .sm-bloque{ padding:56px 32px; }
  .sm-bloque h2{ font-size:var(--text-lg); }
  .sm-bloque p{ font-size:var(--text-sm); }
  .sm-destacado{ padding-left:20px; }
  .sm-cta{ padding:64px 32px; }
}
@media (max-width:480px){
  .sm-hero{ padding:96px 20px 52px; }
  .sm-bloque{ padding:44px 20px; }
  .sm-cta{ padding:52px 20px; }
  .sm-cta-boton{ display:block; }
}