.bio {
  --bio-line: rgba(36,83,51,.19);
}
#fundadores {
  background: radial-gradient(ellipse at 12% 22%, var(--crema), transparent 54%), var(--verde-pal);
}
.bio-heading {
  margin-bottom: clamp(26px, 5vw, 54px);
  padding-top: 20px;
  border-top: 1px solid var(--bio-line);
}
.bio-role {
  margin-top: 10px;
  color: var(--verde);
  font-size: clamp(15px, 2vw, 19px);
}
.bio-layout {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 7vw, 104px);
}
.bio-gallery {
  margin: 0;
  padding: 10px;
  border: 1px solid var(--bio-line);
  border-radius: 22px;
  background: var(--crema);
  box-shadow: 0 18px 44px rgba(36,83,51,.12);
}
.bio-portraits {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 13px;
  background: var(--verde-pal);
}
.bio-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.045);
  transition: opacity .65s ease, transform .85s var(--ease);
}
.bio-portrait.is-current {
  opacity: 1;
  transform: scale(1);
}
.bio-controls, .bio-pages {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bio-controls {
  padding: 8px 4px 0;
}
.bio-controls button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--verde);
  cursor: pointer;
}
.bio-controls .bio-arrow {
  border-color: var(--bio-line);
  font-size: 20px;
}
.bio-pages button {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.bio-controls button:hover, .bio-pages button[aria-pressed="true"] {
  background: var(--verde);
  color: white;
}
.bio-controls button:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}
.bio-copy {
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.75;
}
.bio-copy > * + * {
  margin-top: 1.25em;
}
.bio-copy blockquote {
  margin-inline: 0;
  padding: .25em 0 .25em .8em;
  border-left: 2px solid var(--oro);
  color: var(--verde);
  font: clamp(22px, 3vw, 30px)/1.3 Marcellus, Georgia, serif;
}
.bio-signature {
  color: var(--verde);
}
/* La foto queda fija mientras se lee. Su alto se ajusta a la pantalla para que siempre quepa entera. */
@media (min-width: 741px) {
  .bio-gallery { position: sticky; top: 98px; width: min(100%, calc((100vh - 190px) * 2 / 3 + 20px)); justify-self: center; }
}
@media (max-width: 740px) {
  .bio-layout { grid-template-columns: minmax(0, 1fr); }
  .bio-gallery { width: min(100%, 350px); margin-inline: auto; }
  /* En móvil: retrato compacto fijo bajo la cabecera; el texto pasa por debajo. */
  /* Franja a todo el ancho con el fondo de la página: el texto pasa por debajo sin asomar a los lados. */
  .bio-sincronizada .bio-gallery {
    position: sticky; top: 77px; z-index: 5;
    width: auto; margin-inline: -24px; padding: 10px 0 12px;
    border: 0; border-radius: 0; box-shadow: 0 12px 18px -14px rgba(36,83,51,.35);
    background: var(--verde-pal);
  }
  .bio-sincronizada .bio-portraits {
    width: calc(28vh * 2 / 3); margin-inline: auto;
    border: 1px solid var(--bio-line);
  }
  .bio-sincronizada .bio-controls { display: none; }
}
.bio-copy > * { transition: opacity .5s ease; }
@media (prefers-reduced-motion: reduce) {
  .bio-portrait { transition: none; transform: none; }
}
/* Segunda biografía: separación clara y subtítulo interno */
.bio-segunda { margin-top: clamp(64px, 10vw, 128px); }
.bio-segunda .bio-heading { border-top: 1px solid var(--oro); }
.bio-subtitulo { margin-top: 1.8em; color: var(--verde); font-size: clamp(22px, 2.6vw, 28px); line-height: 1.25; }

/* 13 nov 2026 (Luis): «¿Quién es Maryori?» y «¿Quién es Cathy?» más pequeños que el título de la página */
.bio-heading #biografia-maryori, .bio-heading #biografia-cathrine { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; }

/* 14 nov 2026 (Luis): título y nombres alineados al mismo borde izquierdo que la foto, y el nombre centrado entre la línea y la foto */
.bio-titulo { width: 100%; box-sizing: border-box; }
#fundadores .bio-heading { padding-top: clamp(20px, 3vw, 32px); margin-bottom: clamp(20px, 3vw, 32px); }