/* Quiénes somos: banda rosa palo. En celular todo va en una columna
   (texto, escena, frase); desde 48rem (768 px) el texto queda a la izquierda,
   la escena a la derecha y la frase cruza todo el ancho debajo.
   Depende de tokens.css y base.css (.banda, .titulo-seccion). */

.historia__interior {
  display: grid;
  gap: var(--espacio-6);
}

.historia__texto {
  display: grid;
  align-content: start;
  gap: var(--espacio-4);
}

.historia__titulo {
  margin-bottom: var(--espacio-2);
}

.historia__parrafo {
  max-width: var(--ancho-texto);
  font-size: var(--texto-grande);
}

.historia__imagen {
  width: 100%;
  border-radius: var(--radio-lg);
}

/* La frase es el propósito de la marca: se lee como titular, no como pie. */
.historia__frase {
  max-width: 24ch;
  color: var(--texto-marca);
  font-family: var(--fuente-display);
  font-size: var(--texto-titulo);
  font-weight: var(--peso-normal);
  font-style: italic;
  line-height: var(--linea-titulo);
  text-wrap: balance;
}

@media (min-width: 48rem) {
  .historia__interior {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--espacio-7) var(--espacio-8);
  }

  .historia__interior--sin-imagen {
    grid-template-columns: minmax(0, 1fr);
  }

  .historia__frase {
    grid-column: 1 / -1;
    max-width: none;
    padding-top: var(--espacio-7);
    border-top: var(--grosor-borde) solid var(--color-vino);
    text-align: center;
  }
}