/* V5 — mobile: gesto estável + composição do header, lâmina e controles. */
@media (max-width: 800px) {
  html,
  body.protocols {
    overscroll-behavior-x: none;
  }

  .protocol-carousel,
  .viewport {
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }

  .viewport {
    overflow: hidden;
  }

  .slide.prev,
  .slide.next {
    opacity: 0;
    filter: none;
    pointer-events: none;
  }

  .slide.prev { transform: translateX(-104%) scale(.94); }
  .slide.next { transform: translateX(104%) scale(.94); }
}

/* Desktop: a lâmina ocupa um pouco menos do campo e os indicadores ficam
   claramente abaixo do bloco central, enquanto os chevrons permanecem no
   eixo vertical da lâmina. */
@media (min-width: 801px) {
  .viewport {
    width: min(62vw, 660px);
  }

  .carousel-controls .indicators {
    position: absolute;
    left: 50%;
    top: calc(50% + min(31vw, 330px) + 22px);
    transform: translateX(-50%);
    margin: 0;
  }
}