/*
  Sección de historia — pausa editorial full-bleed entre el hero y el
  catálogo de sabores, en el espíritu de los bloques "Sustainably sourced"
  de equatorcoffees.com: una imagen/fondo con texto centrado superpuesto,
  no otro carrusel de producto.

  Fondo placeholder con la paleta ya existente (gradiente de
  --color-brown-700 a --color-brown-900) hasta que haya foto real —
  cuando llegue, reemplazar background-image por background-image:
  url(...) + background-size/position, sin tocar ningún otro estilo de
  esta sección ni las variables de tokens.css.
*/

.story {
  position: relative;
  min-height: min(60vh, 34rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-4);
  background-image: linear-gradient(135deg, var(--color-brown-700), var(--color-brown-900));
  color: var(--color-cream);
  text-align: center;
  overflow: hidden;
}

.story__content {
  position: relative;
  max-width: 34rem;
}

.story__eyebrow {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-mustard);
  margin-block-end: var(--space-3);
}

.story__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}

.story__text {
  margin-block-start: var(--space-4);
  font-size: 1.0625rem;
  line-height: var(--lh-normal);
  color: var(--color-cream-dark);
}

@media (min-width: 960px) {
  .story {
    min-height: min(70vh, 40rem);
  }
}