/* Nossa História — scrollytelling + stacking (FAQ → história → contato) */

/* ── Stacking: irmãos diretos em <main> ── */
.s-intro,
.landing-faq-accordion.s-intro {
  position: sticky;
  top: 0;
  z-index: 7;
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--color-cream, #faf7f2);
}

#story-outer {
  position: relative;
  z-index: 8;
  /* vh/lvh = altura constante (viewport "grande", barra escondida). É constante
     como o svh (não muda com a barra → sem pulo), mas grande o bastante para
     PREENCHER a tela quando a barra some — sem a faixa branca embaixo que o svh
     deixava. O vilão do pulo era o dvh (dinâmico), removido. Casa com #story-pin. */
  height: 550vh;
  height: 550lvh;
  margin: 0;
  padding: 0;
  /* Creme no outer — enquanto o pin sobe na entrada (FAQ → história), o espaço
     abaixo dele ainda mostra o fundo do outer; laranja aqui piscava no rodapé.
     Laranja fica no #story-pin / .gallery-wrap; ::after verde cobre história → contato. */
  background: var(--color-cream, #faf7f2);
  overflow: visible;
  border-radius: 0;
  box-shadow: none;
  isolation: isolate;
}

/* Pista do stacking (últimos 100lvh): verde pré-pintado antes do card de contato
   entrar — elimina o flash creme embaixo no início da transição. */
#story-outer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  height: 100lvh;
  background: var(--color-secondary, #2b4939);
  border-radius: 14px 14px 0 0;
  z-index: 0;
  pointer-events: none;
}

#story-pin {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 100vh;  /* constante e preenche a tela (sem barra branca) */
  height: 100lvh; /* viewport grande: constante (sem jump) + preenche */
  margin-top: 0;
  padding-top: 0;
  overflow: hidden;
  /* Laranja no próprio card (e não só no #story-outer atrás): como o pin recorta
     com overflow:hidden + border-radius, o fundo laranja passa a seguir exatamente
     a borda arredondada do card. As fotos ficam por cima; nenhum laranja de canto
     reto vaza para fora da curva durante a entrada/encaixe. */
  background: var(--color-primary, #9e3d18);
  contain: layout paint;
  backface-visibility: hidden;
}

#story-pin::before,
#story-pin::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 5;
  pointer-events: none;
}

#story-pin::before {
  top: 0;
  /* removido: gradiente que tapava o topo das fotos e impedia o efeito de
     "fotos saindo do fundo escuro" no stacking */
  background: none;
  display: none;
}

#story-pin::after {
  bottom: 0;
  height: 220px;
  background: linear-gradient(
    to top,
    var(--color-primary, #9e3d18) 0%,
    rgba(158, 61, 24, 0.6) 40%,
    rgba(158, 61, 24, 0.15) 75%,
    transparent 100%
  );
}

/* Galeria — cobre 100% do pin; sem padding no topo para as fotos chegarem
   flush à borda superior do fundo escuro (efeito "fotos saindo do fundo") */
.gallery-wrap {
  position: absolute;
  inset: 0;
  padding: 0 8px 8px; /* topo zerado, laterais e base mantidas */
  box-sizing: border-box;
  z-index: 1;
  overflow: hidden;
  background: var(--color-primary, #9e3d18);
}

.story-scroll__reveal-inner {
  width: 100%;
  height: 100%;
}

.story-scroll__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.g-col,
.story-scroll__column {
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.story-scroll__track {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.2vw, 0.75rem);
}

.story-scroll__set {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.2vw, 0.75rem);
  flex-shrink: 0;
}

.story-scroll__card {
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.28);
}

.story-scroll__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-scroll__img {
  opacity: 0;
  transition: opacity 0.35s var(--ease-out-smooth, ease);
}

.story-scroll__img.is-loaded {
  opacity: 1;
}

/* Overlay — cobre o pin inteiro (galeria + texto); escuro por padrão (JS só
   reduz no fim da seção / stacking com contato — evita “aparecer” no scroll). */
#story-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #130e09;
  opacity: 0.82;
  pointer-events: none;
  will-change: opacity;
}

/* Capítulos — z-index 3 */
#story-chapters {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: calc(var(--header-height, 4.5rem) + 2rem) clamp(1.25rem, 5vw, 3rem) calc(var(--header-height, 4.5rem) + 2rem);
  box-sizing: border-box;
  pointer-events: none;
}

.story-scroll__chapters {
  --story-text-edge-fade: clamp(0.75rem, 3.5vw, 1.75rem);
  position: relative;
  width: min(100%, 54rem);
  min-height: 14rem;
  padding-inline: clamp(0.35rem, 1.5vw, 0.75rem);
  box-sizing: border-box;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--story-text-edge-fade),
    #000 calc(100% - var(--story-text-edge-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--story-text-edge-fade),
    #000 calc(100% - var(--story-text-edge-fade)),
    transparent 100%
  );
}

.story-chapter {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.75rem;
  padding-inline: clamp(1rem, 4.5vw, 2rem);
  box-sizing: border-box;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(100%, 0, 0);
  pointer-events: none;
}

.story-chapter__eyebrow {
  margin: 0;
  font-family: var(--font-heading, "Montserrat", sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary, #9e3d18);
}

.story-chapter__title {
  margin: 0;
  font-family: var(--font-heading, "Montserrat", sans-serif);
  letter-spacing: var(--title-letter-spacing-extra);
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  font-weight: var(--weight-title);
  line-height: 1.12;
  color: rgba(255, 255, 255, 1);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

.story-chapter__text {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(0.95rem, 1.35vw, 1.05rem);
  font-weight: var(--weight-regular, 400);
  line-height: 1.75;
  color: #ffffff;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
  text-wrap: pretty;
}

/* Barrinhas de progresso abaixo do texto */
.story-chapter__progress {
  display: flex;
  flex-direction: row;
  gap: 6px;
  margin-top: 1rem;
  margin-bottom: 0;
}

.story-chapter__bar {
  display: block;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.35s ease;
}

/* Toolbar mobile — barras + hint (desktop: oculto até nav ativa) */
.story-chapter__toolbar {
  display: none;
  --story-hint-slot-h: clamp(3.2rem, 8.5vw, 3.75rem);
}

.story-chapter__bar-fill {
  display: none;
}

.story-chapter__toolbar .carousel-tap-hint {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--story-hint-slot-h);
  height: var(--story-hint-slot-h);
  margin: 0;
  gap: 8px;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

#story-chapters.is-hint-visible .story-chapter__toolbar .carousel-tap-hint {
  opacity: 1;
  visibility: visible;
  animation: story-tap-hint-bob 1.5s ease-in-out infinite;
}

@keyframes story-tap-hint-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  #story-chapters.is-hint-visible .story-chapter__toolbar .carousel-tap-hint {
    animation: none;
  }
}

/* Capítulo 0: 1ª barra ativa */
.story-chapter[data-chapter="0"] .story-chapter__bar:nth-child(1) {
  background: rgba(255, 255, 255, 1);
}

/* Capítulo 1: 1ª e 2ª barras ativas */
.story-chapter[data-chapter="1"] .story-chapter__bar:nth-child(1),
.story-chapter[data-chapter="1"] .story-chapter__bar:nth-child(2) {
  background: rgba(255, 255, 255, 1);
}

/* Capítulo 2: todas as barras ativas */
.story-chapter[data-chapter="2"] .story-chapter__bar {
  background: rgba(255, 255, 255, 1);
}

/* Indicadores inferiores — desativados; progresso fica nas barras abaixo do texto */
#story-nav {
  display: none !important;
}

.story-scroll__dot {
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  transition: width 0.35s ease, background-color 0.35s ease;
}

.story-scroll__dot.is-active {
  width: 20px;   /* expande horizontalmente */
  background: rgba(255, 255, 255, 1);
}

/* Contato cobre a história via stacking — entra como card de baixo pra cima.
   margin-top negativo puxa o contato para dentro do espaço de scroll da
   história, assim o sticky dispara enquanto a galeria ainda está visível. */
.s-after,
.landing-contact.s-after {
  position: sticky;
  top: 0;
  z-index: 11;
  /* min-height e margin-top na MESMA unidade constante (vh/lvh): a sobreposição
     do stacking depende de margin-top == altura própria. vh é constante (sem
     jump) e preenche a tela (sem faixa branca). Misturar dvh com vh é o que fazia
     a sobreposição variar com a barra do mobile → jump. */
  min-height: 100vh;
  min-height: 100lvh;
  margin-top: -100vh;
  margin-top: -100lvh;
  background: var(--color-secondary, #2b4939);
  box-shadow: none;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Sombra só no topo — evita faixa escura entre contato e rodapé (box-shadow vaza p/ baixo) */
.landing-contact.s-after::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.07) 40%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 4;
}

/* Durante o stacking com a galeria — camada GPU só na transição */
.landing-contact.s-after.is-story-contact-stack {
  will-change: transform;
}

/* Backdrop por trás do card — preenche antes do paint do sticky. */
.landing-contact.s-after::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  /* height:auto anula a faixa de 6px de pages.css (.landing-contact::before) */
  height: auto;
  min-height: 100vh;
  min-height: 100lvh;
  border-radius: inherit;
  background: var(--color-secondary, #2b4939);
  z-index: 0;
  pointer-events: none;
}

.landing-contact.s-after .landing-contact__inner {
  position: relative;
  z-index: 1;
}

/* story-nav-dark removido — header mantém aparência natural durante a galeria */

.site-nav.dark a {
  color: rgba(255, 255, 255, 1);
}

/* Cores adaptadas para fundo verde */
.landing-contact.s-after .contact-info__title {
  color: var(--color-cream, #faf7f2);
}

.landing-contact.s-after .contact-info__text {
  color: rgba(250, 247, 242, 0.75);
}

.landing-contact.s-after .contact-info__whatsapp {
  background: var(--color-primary, #9e3d18);
  color: var(--color-cream, #faf7f2);
}

.landing-contact.s-after .contact-info__meta {
  color: rgba(250, 247, 242, 0.5);
}

.landing-contact.s-after .contact-form__field label {
  color: rgba(250, 247, 242, 0.65);
}

.landing-contact.s-after .contact-form__field input,
.landing-contact.s-after .contact-form__field textarea {
  color: var(--color-cream, #faf7f2);
  background: rgba(250, 247, 242, 0.07);
  border-color: rgba(250, 247, 242, 0.2);
}

@media (max-width: 767px) {
  #story-outer {
    /* 200lvh = 100lvh pin sticky + 100lvh runway pro contato subir por cima */
    height: 200lvh;
    min-height: 200lvh;
  }

  #story-outer.is-story-mobile-carousel {
    height: 200lvh;
    min-height: 200lvh;
  }

  #story-pin {
    position: sticky;
    top: 0;
    height: 100lvh;
    min-height: 100lvh;
  }

  .landing-contact.s-after {
    position: sticky;
    top: 0;
    z-index: 11;
    min-height: 100lvh;
    margin-top: -100lvh;
    border-radius: 14px 14px 0 0;
    box-shadow: none;
    overflow: hidden;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  #story-chapters {
    pointer-events: auto;
    transition: opacity 0.35s ease;
  }

  #story-chapters.is-story-carousel-ready {
    gap: 0;
    align-items: stretch;
  }

  #story-chapters.is-story-carousel-ready .story-scroll__chapters {
    touch-action: pan-y;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
  }

  #story-chapters.is-story-carousel-ready .story-chapter__frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-shrink: 0;
  }

  #story-chapters.is-story-carousel-ready .story-chapter__slides {
    position: relative;
    width: 100%;
    min-height: min(36vh, 17.5rem);
  }

  #story-chapters.is-story-carousel-ready .story-chapter__toolbar {
    --story-toolbar-control-h: 1.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    flex-shrink: 0;
    padding-inline: clamp(0.75rem, 3vw, 1.25rem);
    margin-top: 0.65rem;
    margin-bottom: 0;
    pointer-events: auto;
    position: relative;
    z-index: 4;
  }

  #story-chapters.is-story-carousel-ready .story-chapter > .story-chapter__progress {
    display: none;
  }

  #story-chapters.is-story-carousel-ready .story-chapter__progress {
    width: 100%;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 2px;
    margin-bottom: 0;
    gap: 6px;
    align-items: center;
  }

  #story-chapters.is-story-carousel-ready .story-chapter__bar {
    flex: 1 1 0;
    min-width: 0;
    height: 2px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    align-self: center;
    line-height: 0;
    font-size: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.45s ease;
  }

  #story-chapters.is-story-carousel-ready .story-chapter__bar.is-done {
    background: rgba(255, 255, 255, 0.25);
  }

  #story-chapters.is-story-carousel-ready .story-chapter__bar.is-active {
    background: rgba(255, 255, 255, 0.25);
  }

  #story-chapters.is-story-carousel-ready .story-chapter__bar-fill {
    display: block;
    height: 100%;
    width: 0;
    background: rgba(255, 255, 255, 1);
    border-radius: inherit;
    pointer-events: none;
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #story-chapters.is-story-carousel-ready .story-chapter__bar.is-done .story-chapter__bar-fill {
    width: 100%;
    animation: none;
  }

  #story-chapters.is-story-carousel-ready .story-chapter__bar.is-active .story-chapter__bar-fill {
    transition: none;
    animation: story-bar-fill var(--story-slide-duration, 14s) linear forwards;
  }

  #story-chapters.is-story-carousel-ready .story-chapter__bar.is-active.is-paused .story-chapter__bar-fill {
    animation-play-state: paused;
  }

  @keyframes story-bar-fill {
    from { width: 0%; }
    to { width: 100%; }
  }

  #story-chapters.is-story-carousel-ready .story-chapter {
    pointer-events: auto;
    cursor: pointer;
    justify-content: flex-start;
    padding-top: 0;
    transition:
      opacity 0.48s cubic-bezier(0.33, 1, 0.68, 1),
      transform 0.48s cubic-bezier(0.33, 1, 0.68, 1),
      visibility 0.48s;
  }

  #story-chapters.is-story-carousel-ready .story-chapter.is-slide-active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) !important;
    z-index: 2;
  }

  #story-chapters.is-story-carousel-ready .story-chapter.is-slide-before {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(-78%, 0, 0) !important;
    z-index: 0;
  }

  #story-chapters.is-story-carousel-ready .story-chapter.is-slide-after {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(88%, 0, 0) !important;
    z-index: 0;
  }
}

@media (max-width: 767px) {
  #story-chapters {
    padding: calc(var(--header-height, 4.5rem) + 0.75rem)
      clamp(1.25rem, 5vw, 1.75rem)
      calc(var(--header-height, 4.5rem) + 0.35rem);
    gap: 0.75rem;
  }

  /* Filhos absolutos não expandem o pai — flex:1 usa a área útil do pin
     (100dvh menos header) em vez de min-height fixo que cortava o texto. */
  .story-scroll__chapters {
    --story-text-edge-fade: clamp(0.5rem, 2.5vw, 1rem);
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    min-height: 0;
    max-height: none;
  }

  .story-chapter {
    justify-content: center;
    padding-inline: clamp(0.75rem, 3vw, 1.25rem);
  }

  .story-chapter__title {
    line-height: 1.15;
  }

  .story-chapter__text {
    font-size: clamp(0.875rem, 3.6vw, 0.95rem);
    line-height: 1.65;
  }

  /* Mobile: FAQ em fluxo normal (NÃO fixo). Fixar no topo deixava o conteúdo
     com item aberto preso fora da viewport e fazia a história sobrepor o FAQ
     cedo demais. Em fluxo normal o conteúdo rola natural e a próxima seção
     só aparece quando a pessoa realmente chega ao fim do FAQ. */
  .landing-faq-accordion.s-intro {
    position: relative;
    top: auto;
    z-index: 7;
    height: auto;
    min-height: 0;
    overflow: visible;
    display: block;
    margin: 0;
    /* runway: espaço extra ao final pra respirar e dar um pouco mais de scroll */
    padding: calc(1rem + 1px) 0 clamp(5rem, 15vh, 9rem);
    background-color: var(--color-cream, #faf7f2);
    overflow-anchor: none;
  }

  /* Meio-termo do stacking: o FAQ rola normal (legível), e a galeria "encaixa"
     por cima do finalzinho do FAQ — cantos arredondados + sombra dão a cara de
     card empilhado, sem prender o FAQ (que quebrava a leitura do último item).
     O overlap visual fica só no pin (não no outer) para não encurtar o fluxo
     de scroll e evitar pulos na transição FAQ → história. */
  #story-outer,
  #story-pin,
  .gallery-wrap {
    --story-stack-radius: clamp(16px, 5vw, 22px);
  }

  /* Outer e galeria herdam o mesmo raio do pin — alinha a curva do card empilhado. */
  #story-outer {
    border-radius: var(--story-stack-radius) var(--story-stack-radius) 0 0;
  }

  #story-pin {
    margin-top: calc(-1 * clamp(1.5rem, 5vw, 2.75rem));
    border-radius: var(--story-stack-radius) var(--story-stack-radius) 0 0;
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.22);
    background: var(--color-primary, #9e3d18);
  }

  .gallery-wrap {
    border-radius: var(--story-stack-radius) var(--story-stack-radius) 0 0;
  }

  .landing-faq-accordion.s-intro::after {
    display: none;
  }

  .landing-faq-accordion.s-intro > .container {
    flex: none;
    min-height: 0;
    overflow: visible;
    box-sizing: border-box;
    padding-bottom: 0;
  }

  .landing-faq-accordion__layout {
    gap: 1rem;
  }

  .landing-faq-accordion__intro {
    gap: 0.75rem;
  }

  /* Triggers mais compactos no mobile — Unbounded 700; padding lateral generoso */
  .landing-faq-accordion .faq-accordion__trigger {
    padding: 0.875rem 1.125rem;
    gap: 1rem;
    font-size: 0.8125rem;
    line-height: 1.5;
  }
}

@media (min-width: 768px) {
  .story-scroll__chapters {
    width: min(100%, 62rem);
    min-height: 16rem;
  }

  .story-chapter {
    transform: translate3d(42%, 0, 0);
  }

  #story-pin.is-story-desktop-nav {
    cursor: pointer;
  }

  #story-chapters.is-story-desktop-clickable {
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
  }

  #story-chapters.is-story-desktop-clickable .story-scroll__chapters {
    touch-action: pan-y;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(100%, 62rem);
  }

  #story-chapters.is-story-desktop-clickable .story-chapter__frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-shrink: 0;
  }

  #story-chapters.is-story-desktop-clickable .story-chapter__slides {
    position: relative;
    width: 100%;
    min-height: min(30vh, 13.5rem);
    flex-shrink: 0;
  }

  #story-chapters.is-story-desktop-clickable .story-chapter > .story-chapter__progress {
    display: none;
  }

  #story-chapters.is-story-desktop-clickable .story-chapter.is-story-active {
    pointer-events: auto;
    cursor: pointer;
  }

  #story-chapters.is-story-desktop-clickable .story-chapter__toolbar {
    --story-toolbar-control-h: 1.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    max-width: none;
    align-self: stretch;
    justify-content: flex-start;
    flex-shrink: 0;
    padding-inline: clamp(1rem, 4.5vw, 2rem);
    margin-top: 0.65rem;
    margin-bottom: 0;
    pointer-events: auto;
    position: relative;
    z-index: 4;
  }

  #story-chapters.is-story-desktop-clickable .story-chapter__progress {
    display: flex;
    width: 100%;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 2px;
    margin-top: 0;
    margin-bottom: 0;
    gap: 6px;
    align-items: center;
  }

  #story-chapters.is-story-desktop-clickable .story-chapter__bar {
    flex: 1 1 0;
    min-width: 0;
    height: 2px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    align-self: center;
    line-height: 0;
    font-size: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.35s ease;
  }

  #story-chapters.is-story-desktop-clickable .story-chapter__bar.is-done,
  #story-chapters.is-story-desktop-clickable .story-chapter__bar.is-active {
    background: rgba(255, 255, 255, 1);
  }

  #story-chapters.is-story-desktop-clickable .story-chapter__bar-fill {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  .story-scroll__chapters {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .story-chapter {
    will-change: auto;
  }

  #story-chapters.is-story-carousel-ready .story-chapter {
    transition: none;
  }

  #story-chapters.is-story-carousel-ready .story-chapter__bar.is-active .story-chapter__bar-fill {
    animation: none;
    width: 100%;
  }

  .story-scroll__track {
    transform: none !important;
  }

  .story-scroll__reveal-inner {
    transform: none !important;
  }
}

/* Hint da história: só no mobile (carrossel por toque). No desktop os capítulos
   avançam pelo scroll natural, então o hint de interação não deve aparecer. */
@media (hover: hover) and (pointer: fine) {
  .story-chapter__toolbar .carousel-tap-hint {
    display: none;
  }
}