/* ==========================================================================
   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);
}

/* --------------------------------------------------------------------------
   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);
}

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

.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) {
  .historia__cita { margin-block: var(--esp-56); }
}

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

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