/* =========================================================================
   FIGUEROA DIGITAL — bio.css
   Estilos exclusivos de enlaces.html ("link in bio"). Pensada para caber
   COMPLETA en una sola pantalla de celular, sin scroll -- por eso el
   espaciado aqui es mas compacto que el resto del sitio (variables.css
   sigue siendo la fuente de verdad de color/tipografia; solo el ritmo
   vertical y el tamaño de los botones son propios de esta pagina).
   ========================================================================= */

.bio-page {
  min-height: 100vh;
  min-height: 100dvh; /* dvh = alto real visible en mobile, sin la barra del navegador */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) 1.25rem;
}

/* Fondo NITIDO, sin oscurecer -- a diferencia del resto del sitio (Proceso,
   CTA), esta pagina pidio explicitamente la foto sin overlay oscuro encima.
   Scoped a .bio-page para no tocar el patron .section--photo-bg que usan
   esas otras secciones del sitio principal (esas si necesitan el overlay
   por legibilidad de su texto). */
.bio-page .section--photo-bg__bg img { opacity: 1; }
.bio-page .section--photo-bg__bg::after { display: none; }

.bio-page__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  /* Historial de ajustes pedidos a mano: -84px, +100px, -12px -> neto +4px
     desde el centro vertical original. Si piden otro ajuste, suma/resta
     sobre este valor, no lo reemplaces a ciegas. */
  transform: translateY(4px);
}

.bio-page__logo {
  width: 440px; max-width: 100%; height: auto; /* 100% mas grande que los 220px originales */
  /* Sin el overlay oscuro de fondo, el logo blanco necesita su propia
     sombra para no perderse contra zonas claras de la foto (ej. el ladrillo). */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7));
}

/* ---------- Botones (mismas clases .btn del sitio, version compacta) ----- */
.bio-page__links {
  width: 100%;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.btn.bio-page__link {
  width: 100%; justify-content: center;
  padding: 0.6rem 1.25rem; font-size: 0.68rem; letter-spacing: 0.12em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); /* legibilidad sin overlay global */
}

/* Efecto "glass" solo en los botones outline (los transparentes) de esta
   pagina -- .btn--solid ya tiene su propio fondo blanco solido, no
   necesita vidrio. Especificidad (.btn.btn--outline.bio-page__link, 3
   clases) le gana a .btn--outline normal del sitio sin tocarlo. */
.btn.btn--outline.bio-page__link {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.45);
}
.btn.btn--outline.bio-page__link:hover {
  background: rgba(255, 255, 255, 0.24);
  color: var(--c-white);
}

/* ---------- Ranura de carrusel automático (trabajo reciente) -------------
   Va DEBAJO de los botones. Una sola ranura, 4 fotos apiladas
   (position:absolute, mismo patron que .hero__slide), JS externo
   (bio-carousel.js) solo turna la clase .is-active cada 2.2s. Sin
   flechas/dots -- es decorativo, no interactivo. */
.bio-page__carousel {
  position: relative; width: 310px; height: 248px; max-width: 100%; overflow: hidden;
  border: var(--border-thin); flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.bio-page__carousel-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 700ms var(--ease);
}
.bio-page__carousel-img.is-active { opacity: 1; }

.bio-page__footer {
  font-size: 0.65rem; color: var(--c-white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.bio-page__footer a { text-decoration: underline; }

/* Pantallas muy bajitas (celulares chicos en horizontal, o SE) -- recorta
   un poco mas el ritmo vertical para seguir cabiendo sin scroll. */
@media (max-height: 700px) {
  .bio-page__logo { width: 360px; }
  .bio-page__carousel { width: 260px; height: 208px; }
  .btn.bio-page__link { padding: 0.5rem 1.25rem; }
}