#historia { overflow: clip; }
#historia .has-story-carousel {
  display: block;
  position: sticky;
  top: 110px;
  align-self: start;
  min-height: 0;
  min-width: 0;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#historia .has-story-carousel > [hidden] { display: none !important; }
.story-carousel { position: relative; width: 100%; min-width: 0; isolation: isolate; }
.story-carousel::after {
  content: "";
  position: absolute;
  width: 30%;
  aspect-ratio: 1;
  bottom: 0;
  right: 0;
  z-index: 4;
  background: url('../img/watercolor-bouquet.webp') center / contain no-repeat;
  pointer-events: none;
}
.story-carousel-stage {
  position: relative;
  aspect-ratio: 5 / 6;
  max-height: min(700px, calc(100svh - 150px));
  overflow: visible;
  touch-action: pan-y pinch-zoom;
}
.story-carousel-slide {
  position: absolute;
  inset: 5% 9% 9%;
  margin: 0;
  padding: 8px 8px 22px;
  background: #fafcfb;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 3px;
  box-shadow: 0 14px 35px rgba(28,40,29,.22), 0 2px 5px rgba(28,40,29,.12);
  opacity: 0;
  z-index: 0;
  transform: translate3d(10%, 3%, 0) rotate(8deg) scale(.9);
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.story-carousel-slide.is-previous { opacity: .7; z-index: 1; transform: translate3d(-7%, 2%, 0) rotate(-7deg) scale(.94); }
.story-carousel-slide.is-next { opacity: .85; z-index: 2; transform: translate3d(7%, 2%, 0) rotate(6deg) scale(.94); }
.story-carousel-slide.is-current { opacity: 1; z-index: 3; transform: rotate(-1deg); }
.story-carousel-slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.story-carousel-toolbar {
  position: absolute;
  inset: 0 2px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.story-carousel.is-touch-active .story-carousel-toolbar,
.story-carousel:has(:focus-visible) .story-carousel-toolbar { opacity: 1; }
.story-carousel.is-touch-active button,
.story-carousel:has(:focus-visible) button { pointer-events: auto; }
@media (hover: hover) {
  .story-carousel:hover .story-carousel-toolbar { opacity: 1; }
  .story-carousel:hover button { pointer-events: auto; }
}
.story-carousel button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #fff;
  background: rgba(30,42,31,.78);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
}
.story-carousel button:hover { background: #344038; border-color: #fff; }
.story-carousel :focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.story-carousel [hidden] { display: none; }
.story-design-shell, .story-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
@media (max-width: 900px) {
  .story-design-shell, .story-grid { grid-template-columns: minmax(0, 1fr); }
  #historia .has-story-carousel { position: relative; top: auto; max-width: 480px; margin-inline: auto; }
  .story-carousel-stage { max-height: 560px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-carousel-slide { transition: none; }
  .story-carousel-toolbar { transition: none; }
}