/* ==========================================================================
   About — bio estilo créditos sobre una foto centrada.
   · La foto ocupa todo el alto del escenario y tiene zoom in/out constante.
   · El texto (justificado) sube solo de abajo hacia arriba; el usuario puede
     adelantarlo o regresarlo (scroll, dedo, teclado, botones o barra).
   · Dos capas idénticas de texto: la normal (negra) se oculta sobre la foto y
     la duplicada (blanca con contorno azul) sólo se ve sobre la foto.
   ========================================================================== */

.site-main.about-page { padding: 0 var(--gutter); }

.about {
  --photo-w: 62%;  /* ancho de la foto */
  --col-w: 100%;   /* ancho de la columna de texto (más ancha que la foto) */
  --bio-fs: 17px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  height: 100%;
}

.about__stage {
  position: relative;
  min-height: 0;
  margin-top: 6px;
}

/* ---------- Foto centrada con zoom constante: 4 s zoom out + 4 s zoom in ---------- */
.about__photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - var(--photo-w) / 2);
  z-index: 0;
  width: var(--photo-w);
  margin: 0;
  overflow: hidden;
  background: var(--black);
}
.about__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 52%;
  transform-origin: 64% 50%;
  opacity: 0;
  transition: opacity 700ms var(--ease);
  animation: pk-breathe 8s ease-in-out infinite;
}
.about__photo.is-loaded img { opacity: 1; }

@keyframes pk-breathe {
  0%,
  100% { transform: scale(1.14); } /* acercado */
  50% { transform: scale(1); }     /* alejado a los 4 s */
}

/* Pedido explícito: el zoom se mantiene aun con "reducir movimiento" */
@media (prefers-reduced-motion: reduce) {
  .about__photo img { animation: pk-breathe 8s ease-in-out infinite !important; }
}

/* ---------- Créditos (contenedor con scroll propio; la página no hace scroll) ---------- */
.credits {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  container-type: size;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  transition: opacity 420ms var(--ease);
}
.credits::-webkit-scrollbar { display: none; }
.credits:focus { outline: none; }
.credits:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.credits.is-looping { opacity: 0; }

.credits__col {
  width: var(--col-w);
  margin: 0 auto;
  /* entra desde abajo y sale completo por arriba */
  padding: 45vh 0 80vh;
  padding: 58cqh 0 96cqh;
}

.bio-stack { position: relative; }

.bio {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--bio-fs);
  line-height: 1.45;
  letter-spacing: -0.005em;
  text-align: justify;
  text-align-last: left;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-transform: none;
}
.bio p + p { margin-top: 0.8em; }

.bio .bio__kicker {
  margin-bottom: 1.4em;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  text-align-last: center;
  text-transform: uppercase;
  color: var(--accent);
}
.bio .bio__sign {
  margin-top: 1.6em;
  text-align: center;
  text-align-last: center;
}
.bio .bio__sign .name { font-size: 2.2em; letter-spacing: -0.01em; }

/* Resaltes */
.bio strong { font-weight: 800; }

.bio em {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.32em;
  line-height: 1;
  letter-spacing: 0;
}

.bio .big {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 1.3em;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--accent);
  -webkit-hyphens: none;
  hyphens: none;
}

.bio .name {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 0.92em;
  text-transform: uppercase;
}

/* Capa duplicada: letras blancas con contorno azul, sólo donde pisan la foto */
.bio--over {
  position: absolute;
  inset: 0;
  color: var(--white);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.bio--over,
.bio--over * {
  --o: max(1px, 0.07em);
  --oo: calc(var(--o) * -1);
  text-shadow:
    var(--o) 0 0 var(--accent),
    var(--oo) 0 0 var(--accent),
    0 var(--o) 0 var(--accent),
    0 var(--oo) 0 var(--accent),
    var(--o) var(--o) 0 var(--accent),
    var(--oo) var(--oo) 0 var(--accent),
    var(--o) var(--oo) 0 var(--accent),
    var(--oo) var(--o) 0 var(--accent);
}
.bio--over .big,
.bio--over .bio__kicker { color: var(--white); }

/* ---------- Barra de controles ---------- */
.about__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 0 6px;
}

.about__controls {
  display: flex;
  flex: none;
  margin-left: -6px;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: inherit;
  transition: color var(--dur) var(--ease);
}
@media (hover: hover) {
  .icon-btn:hover { color: var(--accent); }
}

/* Barra de avance: también sirve para adelantar o regresar */
.about__seek {
  --p: 0%;
  flex: 1;
  width: 0; /* sin esto, el ancho propio del control (≈130px) ensancha la página en pantallas chicas */
  min-width: 60px;
  height: 32px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.about__seek::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, var(--accent) var(--p), rgba(0, 0, 0, 0.18) var(--p));
}
.about__seek::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -5px;
  border: 0;
  background: var(--accent);
  -webkit-appearance: none;
  appearance: none;
}
.about__seek::-moz-range-track { height: 2px; background: rgba(0, 0, 0, 0.18); }
.about__seek::-moz-range-progress { height: 2px; background: var(--accent); }
.about__seek::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 0; background: var(--accent); }
.about__seek:focus { outline: none; }
.about__seek:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Idioma (banderas, estilos en base.css) */
.about__lang { margin-right: -5px; }

.about__cta {
  display: none;
  flex: none;
  gap: 20px;
}
.about__cta a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  transition: color var(--dur) var(--ease);
}
.about__cta a:first-child { color: var(--accent); }
@media (hover: hover) {
  .about__cta a:hover { color: var(--accent); }
  .about__cta a:first-child:hover { color: var(--ink); }
}

/* ---------- Tamaños ---------- */
@media (max-width: 359px) {
  .about { --bio-fs: 15.5px; }
}
@media (min-width: 768px) {
  .about { --photo-w: 48%; --col-w: 80%; --bio-fs: 21px; }
  .about__cta { display: flex; }
}
@media (min-width: 1024px) {
  .about { --photo-w: 32%; --col-w: 56%; --bio-fs: clamp(20px, 1.55vw, 30px); }
  .about__bar { min-height: 40px; }
}
@media (orientation: landscape) and (max-height: 480px) {
  .about { --photo-w: 30%; --col-w: 64%; --bio-fs: 15px; }
  .about__bar { min-height: 36px; padding: 0 0 4px; }
  .icon-btn { height: 32px; }
}