/* ==========================================================================
   GELÉE — historia.css
   Página de historia. Solo se carga en historia.html.

   Criterio: poco texto y mucho aire. El peso visual lo carga la foto,
   no la tipografía. Nada de línea de tiempo, valores ni fotos del equipo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Encabezado
   Alineado a la izquierda a propósito: el centrado se reserva para el hero
   y para los títulos de sección cortos de la portada.
   -------------------------------------------------------------------------- */
.historia__titulo { text-align: left; }

/* Línea fina terracota de 48px bajo el título */
.historia__titulo::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin-top: var(--esp-24);
  background-color: var(--marca);
}

/* --------------------------------------------------------------------------
   2. Foto
   Ancho completo del contenedor, proporción 3:2 fija para que la reserva de
   espacio no dependa del archivo final y no haya salto de layout al cargar.
   -------------------------------------------------------------------------- */
.historia__figura {
  margin: var(--esp-40) 0 0;
}

.historia__foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  /* Los atributos width/height del <img> valen como CSS y anularían
     el aspect-ratio: height:auto se lo devuelve. */
  height: auto;
  object-fit: cover;
  border-radius: var(--radio-foto);
  background-color: var(--rosa); /* se ve mientras carga la foto */
}

@media (min-width: 900px) {
  .historia__figura { margin-top: var(--esp-48); }
}

/* La segunda foto va dentro de la columna de lectura, después de la cita:
   corta el bloque de texto sin sacar al lector del ancho de 62ch. */
.historia__figura--texto {
  margin-block: var(--esp-40);
}

.historia__lado { display: contents; }

@media (min-width: 900px) {
  /* Deja de ser transparente y pasa a ser la columna derecha entera, con la
     cita arriba y la foto debajo, pegadas la una a la otra. Puestas por
     separado en la rejilla quedaba un hueco muerto entre las dos. */
  .historia__lado {
    display: block;
    grid-area: 1 / 2 / 4 / 3;
  }

  .historia__figura--texto { margin-block: var(--esp-32) 0; }
}

/* --------------------------------------------------------------------------
   3. Texto
   Ancho de línea limitado en ch e interlineado abierto, pero sin llegar al
   interlineado enorme que vuelve cansada la lectura corrida.
   -------------------------------------------------------------------------- */
.historia__texto {
  max-width: 62ch;
  margin-top: var(--esp-48);
}

/* En escritorio el texto deja de ser una columna pegada a la izquierda con
   medio ancho vacío al lado. Pasa a dos columnas: la lectura a la izquierda,
   y a la derecha la cita y la segunda foto, que es lo que llenaba mal el
   espacio cuando iban dentro del hilo de lectura.

   La colocación es explícita, casilla por casilla, y no automática. El bloque
   siempre trae los mismos cinco elementos en el mismo orden, así que decir
   dónde va cada uno sale más claro que dejar que el navegador los acomode.

   El marcado no cambia, así que en móvil se sigue leyendo en el orden de
   siempre: dos párrafos, cita, foto y el párrafo de cierre. */
@media (min-width: 900px) {
  .historia__texto {
    margin-top: var(--esp-64);
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: var(--esp-64);
    /* El aire entre párrafos lo pone la rejilla, no el margen de cada uno.
       En una sola columna bastaba con "p + p", pero aquí el tercer párrafo ya
       no va pegado al segundo en el marcado, con la cita y la foto en medio,
       así que ese margen no le tocaba y los dos últimos salían pegados. */
    row-gap: var(--esp-24);
    /* La columna derecha suele salir más alta que los tres párrafos juntos.
       Ese sobrante se lo lleva la última fila, así los párrafos siguen
       leyéndose seguidos en vez de separarse para rellenar. */
    grid-template-rows: auto auto 1fr;
    align-items: start;
  }

  .historia__texto p + p { margin-top: 0; }

  .historia__texto > p:nth-of-type(1) { grid-area: 1 / 1; }
  .historia__texto > p:nth-of-type(2) { grid-area: 2 / 1; }
  .historia__texto > p:nth-of-type(3) { grid-area: 3 / 1; }

  /* La medida de lectura ya la fija la columna, no cada párrafo */
  .historia__texto p { max-width: none; }
}

.historia__texto p {
  max-width: none; /* el ancho lo fija la columna, no cada párrafo */
  line-height: 1.65;
}

.historia__texto p + p { margin-top: var(--esp-24); }

/* --------------------------------------------------------------------------
   4. Cita
   Una sola frase, tomada del propio texto. Sin comillas decorativas:
   el cambio de fuente, tamaño y color ya la separa lo suficiente.
   -------------------------------------------------------------------------- */
.historia__cita {
  margin: var(--esp-48) 0;
  max-width: 26ch;
}

.historia__cita p {
  font-family: var(--fuente-titulo);
  font-size: 1.75rem; /* 28px */
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--marca);
  text-wrap: balance;
}

@media (min-width: 900px) {
  /* Ya no corta el texto por la mitad, ahora va al lado, así que no necesita
     aire arriba ni abajo. Solo se despega un poco del primer párrafo. */
  .historia__cita {
    margin-block: 0;
    max-width: none;
    padding-top: 4px;
  }
}

/* --------------------------------------------------------------------------
   5. Cierre
   -------------------------------------------------------------------------- */
.historia__cierre { margin-top: var(--esp-48); }

@media (min-width: 900px) {
  .historia__cierre { margin-top: var(--esp-56); }
}