/* =========================================================
  Sección "Historia" (texto + galería de fotos) — encapsulada. Prefijo historia__
   ========================================================= */
#historia, .historia {
  --h-rojo: var(--rojo, #c8102e); --h-tinta: var(--tinta, #2a0a10);
  max-width: none; min-height: 0; margin: 0; padding: 96px 24px;
  color: var(--h-tinta); font-family: inherit;
}
#historia *, #historia *::before, #historia *::after { box-sizing: border-box; }
#historia :focus-visible { outline: 3px solid var(--h-rojo); outline-offset: 2px; }
.historia__fila {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(32px, 6vw, 80px);
  max-width: 1100px; margin: 0 auto;
}
.historia__titulo { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; margin-bottom: 10px; color: var(--h-rojo); }
.historia__subtitulo { font-style: italic; font-weight: 600; font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--h-rojo); margin-bottom: 20px; }
.historia__parrafo { line-height: 1.75; font-size: 1.05rem; max-width: 56ch; margin-bottom: 14px; }
/* Galería */
.historia__visor {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  aspect-ratio: 4 / 3; border-radius: 28px;
  background: linear-gradient(150deg, #9b0d23, #e63950);   /* se ve si falta una foto */
  box-shadow: 0 24px 50px rgba(155, 13, 35, .22);
}
.historia__visor::-webkit-scrollbar { display: none; }
.historia__foto { flex: 0 0 100%; scroll-snap-align: start; height: 100%; }
.historia__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.historia__controles { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; }
.historia__flecha {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--h-rojo); box-shadow: 0 6px 16px rgba(155, 13, 35, .15);
  transition: background .25s, color .25s;
}
.historia__flecha svg { width: 20px; height: 20px; }
.historia__flecha:hover, .historia__flecha:focus-visible { background: var(--h-rojo); color: #fff; }
.historia__puntos { display: flex; gap: 8px; }
.historia__punto { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: rgba(200, 16, 46, .3); transition: width .25s, background .25s; }
.historia__punto[aria-current="true"] { width: 26px; background: var(--h-rojo); }
@media (max-width: 860px) {
  #historia, .historia { padding: 64px 16px; }
  .historia__fila { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .historia__flecha, .historia__punto { transition: none; } }