/* ══════════════════════════════════════════════════════════════════════════════
   BIOGRAFÍA
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Hero autoral ─────────────────────────────────────────────────────────── */
.bh {
  background: var(--color-bg);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.bh__wrap {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr clamp(240px, 28vw, 380px);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}

/* Eyebrow */
.bh__eyebrow {
  display: block;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

/* Nombre: tipografía de portada */
.bh__nombre {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(3.8rem, 8vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0 0 clamp(1.4rem, 2.5vw, 2rem);
}

.bh__nombre em {
  display: block;
  font-style: italic;
  color: var(--color-accent);
}

/* Separador ornamental */
.bh__sep {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.bh__sep-linea {
  display: block;
  width: 52px;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.3;
}

.bh__sep-glyph {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-gold);
  opacity: 0.45;
  line-height: 1;
}

/* Tags de credenciales */
.bh__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.bh__tag {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-mid);
  padding: 5px 13px;
  border: 1px solid rgba(184, 149, 90, 0.28);
  opacity: 0.72;
}

/* Retrato enmarcado */
.bh__retrato {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.bh__retrato-marco {
  position: relative;
  width: 100%;
  border: 1px solid rgba(184, 149, 90, 0.32);
  padding: 7px;
  background: var(--color-bg-dark);
}

/* Doble borde interior sutil */
.bh__retrato-marco::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(184, 149, 90, 0.14);
  pointer-events: none;
  z-index: 1;
}

.bh__retrato-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
}

/* ── Contenido biográfico ─────────────────────────────────────────────────── */
.bc {
  padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem);
}

/* ── Prose WYSIWYG ────────────────────────────────────────────────────────── */
.bio-prose {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

/* Drop cap en el primer párrafo */
.bio-prose>p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 4.2em;
  font-weight: 400;
  float: left;
  line-height: 0.78;
  margin-right: 0.1em;
  margin-top: 0.08em;
  color: var(--color-accent);
}

.bio-prose h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  color: var(--color-ink);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-sm);
}

/* Si hay h1 en el WYSIWYG, no aplicar drop cap al p siguiente */
.bio-prose h1+p::first-letter {
  float: none;
  font-size: inherit;
  color: inherit;
  margin: 0;
  line-height: inherit;
}

.bio-prose h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  color: var(--color-ink-mid);
  line-height: 1.4;
  margin: var(--space-xl) 0 var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid rgba(184, 149, 90, 0.22);
}

.bio-prose h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--color-ink);
  line-height: 1.3;
  margin: var(--space-2xl) 0 var(--space-sm);
}

.bio-prose h4 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sage);
  margin: var(--space-xl) 0 var(--space-sm);
}

.bio-prose p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.95;
  color: var(--color-ink-mid);
  margin-bottom: var(--space-md);
}

.bio-prose p:last-child {
  margin-bottom: 0;
}

.bio-prose h2+p {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  color: var(--color-ink);
  line-height: 1.85;
}

/* Listas */
.bio-prose ul,
.bio-prose ol {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.85;
  color: var(--color-ink-mid);
  margin-bottom: var(--space-md);
  padding-left: 0;
  list-style: none;
}

.bio-prose ul li {
  padding-left: 22px;
  position: relative;
  margin-bottom: 8px;
}

.bio-prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: var(--color-accent);
}

.bio-prose ol {
  counter-reset: bio-ol;
}

.bio-prose ol li {
  padding-left: 30px;
  position: relative;
  margin-bottom: 8px;
  counter-increment: bio-ol;
}

.bio-prose ol li::before {
  content: counter(bio-ol);
  position: absolute;
  left: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--color-accent);
  font-weight: 700;
}

/* Blockquote */
.bio-prose blockquote {
  margin: var(--space-2xl) -2rem;
  padding: var(--space-lg) var(--space-xl);
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-dark);
  position: relative;
}

.bio-prose blockquote::before {
  content: '\201C';
  position: absolute;
  top: -10px;
  left: var(--space-lg);
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.15;
}

.bio-prose blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--color-ink);
  line-height: 1.65;
  margin: 0;
}

/* HR */
.bio-prose hr {
  border: none;
  border-top: 1px solid rgba(184, 149, 90, 0.25);
  margin: var(--space-2xl) 0;
}

/* Imágenes */
.bio-prose img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

.bio-prose .alignnone,
.bio-prose img.alignnone {
  display: block;
  margin: var(--space-2xl) auto;
  max-width: 100%;
  box-shadow: 0 8px 40px rgba(44, 24, 16, 0.10);
}

.bio-prose .aligncenter,
.bio-prose img.aligncenter {
  display: block;
  margin: var(--space-2xl) auto;
  max-width: 100%;
  box-shadow: 0 8px 40px rgba(44, 24, 16, 0.10);
}

.bio-prose .alignleft,
.bio-prose img.alignleft {
  float: left;
  margin: var(--space-xs) var(--space-xl) var(--space-lg) 0;
  max-width: 50%;
  box-shadow: 0 6px 28px rgba(44, 24, 16, 0.10);
}

.bio-prose .alignright,
.bio-prose img.alignright {
  float: right;
  margin: var(--space-xs) 0 var(--space-lg) var(--space-xl);
  max-width: 50%;
  box-shadow: 0 6px 28px rgba(44, 24, 16, 0.10);
}

.bio-prose .alignfull,
.bio-prose img.alignfull {
  width: 100%;
  max-width: 100%;
  margin: var(--space-2xl) 0;
  box-shadow: none;
}

.bio-prose .size-thumbnail,
.bio-prose .size-medium,
.bio-prose .size-medium_large,
.bio-prose .size-large,
.bio-prose .size-full {
  width: auto;
  max-width: 100%;
}

.bio-prose figure {
  margin: var(--space-2xl) 0;
}

.bio-prose figcaption {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-ink-mid);
  opacity: 0.55;
  letter-spacing: 0.06em;
  margin-top: var(--space-xs);
  font-style: italic;
}

.bio-prose::after {
  content: '';
  display: table;
  clear: both;
}

.bio-prose strong {
  color: var(--color-ink);
  font-weight: 600;
}

.bio-prose em {
  font-style: italic;
}

.bio-prose a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}

.bio-prose a:hover {
  opacity: 0.72;
}

/* ── Frase de cierre ──────────────────────────────────────────────────────── */
.biografia-frase {
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.biografia-frase__inner {
  max-width: 680px;
  margin: 0 auto;
}

.frase-card {
  padding: var(--space-xl) var(--space-2xl);
  text-align: center;
  border: 1px solid rgba(184, 149, 90, 0.18);
  background: var(--color-bg-dark);
}

.frase-card--accent {
  background: rgba(196, 120, 90, 0.06);
  border-color: rgba(196, 120, 90, 0.2);
}

.frase-card--sage {
  background: rgba(122, 140, 110, 0.06);
  border-color: rgba(122, 140, 110, 0.18);
}

.frase-card__ornament {
  font-size: 1.5rem;
  color: var(--color-gold);
  opacity: 0.55;
  margin-bottom: var(--space-sm);
}

.frase-card__texto {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  color: var(--color-ink);
  line-height: 1.65;
  margin-bottom: var(--space-sm);
}

.frase-card__atribucion {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-sage);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .bh__wrap {
    grid-template-columns: 1fr clamp(200px, 35vw, 280px);
    gap: clamp(2rem, 5vw, 4rem);
  }

  .bh__nombre {
    font-size: clamp(3.2rem, 9vw, 5.5rem);
  }

  .bio-prose .alignnone,
  .bio-prose img.alignnone {
    margin: var(--space-md) 0;
  }
}

@media (max-width: 680px) {
  .bh__wrap {
    grid-template-columns: 1fr;
  }

  .bh__retrato {
    justify-content: center;
    order: -1;
  }

  .bh__retrato-marco {
    max-width: 260px;
    margin: 0 auto;
  }

  .bh__retrato-img {
    aspect-ratio: 2 / 3;
  }

  .bh__nombre {
    font-size: clamp(3rem, 13vw, 5rem);
  }

  .bio-prose blockquote {
    margin: var(--space-xl) 0;
  }

  .bio-prose .alignleft,
  .bio-prose img.alignleft,
  .bio-prose .alignright,
  .bio-prose img.alignright {
    float: none;
    max-width: 100%;
    margin: var(--space-lg) 0;
  }

  .frase-card {
    padding: var(--space-lg);
  }
}

@media (max-width: 480px) {
  .bh {
    padding: 2rem 0 1.5rem;
  }

  .bh__wrap {
    gap: var(--space-lg);
  }

  .bh__retrato-marco {
    max-width: 200px;
  }

  .bh__nombre {
    font-size: clamp(2.8rem, 14vw, 4rem);
  }

  .bh__tag {
    font-size: 0.62rem;
    padding: 4px 10px;
  }

  .bio-prose>p:first-of-type::first-letter {
    font-size: 3.2em;
  }

  .frase-card {
    padding: var(--space-md) var(--space-lg);
  }
}