/* ==========================================================================
   ILUSTRACIÓN (Pie Grande) + BIO
   ========================================================================== */


/* --------------------------------------------------------------------------
   Ilustración
   El jardín ocupa todo el ancho, apoyado abajo. Pie Grande va centrado
   encima; js/illustration-motion.js lo mueve con --motion-x / --motion-y.
   -------------------------------------------------------------------------- */

.illustration {
  /* ✏️ Separación entre el borde inferior del hero y esta sección (margen
     positivo). Con valores mayores (p. ej. 96px) queda una franja vacía
     demasiado grande, sobre todo en móvil. */
  --illustration-overlap: -15px;

  position: relative;
  height: clamp(340px, 55.5vw, 800px);   /* 800px en escritorio, como el original */
  margin-top: var(--illustration-overlap);
  overflow: hidden;
}

/* El jardín ocupa como máximo el ancho del contenedor general (1280px),
   centrado: se separa (100% − 1280px) / 2 del borde izquierdo. Por debajo
   de 1280px esa separación es 0 y ocupa todo el ancho. */
.illustration__background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(0px, calc((100% - var(--container-max-width)) / 2));
  width: min(100%, var(--container-max-width));
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

/* Desde tablet, la parte superior del arco queda a la altura de la mitad de
   la cabeza de Pie Grande (≈27% desde arriba de la sección) y el arco ocupa
   todo su ancho (máx. 1280px) SIN deformarse: se escala en su proporción
   original (cover) anclado arriba, así que lo que sobra se recorta abajo.
   En móvil se mantiene como está (todo el ancho, proporción natural). */
@media (min-width: 768px) {
  .illustration__background {
    top: auto;
    height: 73%;                  /* ✏️ alto visible del arco respecto a la sección */
    object-fit: cover;
    object-position: center top;  /* la curva superior nunca se recorta */
  }
}

.illustration__figure {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  height: 100%;
  transform: translate(calc(-50% + var(--motion-x, 0px)), var(--motion-y, 0px));
  will-change: transform;
}


/* --------------------------------------------------------------------------
   Bio
   Tres columnas en escritorio (35% · 30% · 35%), una sola en móvil.
   -------------------------------------------------------------------------- */

.bio {
  padding: 50px var(--page-gutter);
}

.bio__inner {
  display: grid;
  grid-template-columns: 35fr 30fr 35fr;
  column-gap: 20px;
  padding: 0 10px;
}

.bio__column p {
  font-size: 17px;
  line-height: 28px;
}

.bio__column p + p {
  margin-top: 20px;
}

/* El texto de la columna izquierda sigue en la derecha: el navegador reparte
   las últimas líneas para que la última no quede demasiado corta (en
   navegadores sin soporte, se reparte como siempre). */
.bio__column:first-child p:last-child {
  text-wrap: pretty;
}

.bio__name {
  color: var(--color-gold);
  font-weight: 700;
}

.bio__button-column {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Botón "Portfolio ↓": las dos imágenes ocupan el mismo lugar; en hover se cambia */
.bio__portfolio-button {
  display: grid;
  place-items: center;
}

.bio__portfolio-button img {
  grid-area: 1 / 1;
}

.bio__portfolio-button-hover                               { opacity: 0; }
.bio__portfolio-button:hover .bio__portfolio-button-hover   { opacity: 1; }
.bio__portfolio-button:hover .bio__portfolio-button-default { opacity: 0; }

@media (max-width: 767px) {
  /* Sin separación entre columnas: la izquierda termina a mitad de una frase
     que sigue en la derecha, así que se leen como un texto continuo. (Los
     párrafos conservan su separación propia: .bio__column p + p.) */
  .bio__inner {
    display: block;   /* las dos columnas se apilan como texto normal */
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  /* La frase cortada entre las dos columnas (último párrafo de la izquierda +
     primero de la derecha) fluye como una sola: las columnas no generan caja
     propia y esos dos párrafos van en línea, así que el texto se reparte
     natural en cualquier ancho (sin empezar renglón nuevo en la unión). */
  .bio__column {
    display: contents;
  }

  .bio__column:first-child p:last-child,
  .bio__column:last-child p:first-child {
    display: inline;
  }

  /* Mantiene los 20px entre el primer párrafo y la frase que sigue
     (en un párrafo en línea el margen superior no se aplica) */
  .bio__column:first-child p:first-child {
    margin-bottom: 20px;
  }

  /* En móvil no se muestra el botón gráfico "Portfolio ↓" */
  .bio__button-column {
    display: none;
  }

  /* El arco del fondo tiene el mismo ancho que el texto de la bio: los mismos
     márgenes laterales (--page-gutter de .bio + los 10px de .bio__inner).
     Sigue en su proporción (contain) y apoyado abajo; Pie Grande no cambia. */
  .illustration__background {
    left: calc(var(--page-gutter) + 10px);
    width: calc(100% - 2 * (var(--page-gutter) + 10px));
  }
}