/* Carrossel dos itens do plano de cameras.
 *
 * Veio do prototipo em /laboratorio/slider-cards/. Duas coisas mudaram na
 * mudanca de casa:
 *
 * - as variaveis saem do `:root` e passam a viver no proprio bloco. No
 *   laboratorio a pagina era so isto; aqui elas redefiniriam --sg-orange,
 *   --sg-green e --sg-white para a pagina inteira, e o site usa outros valores
 *   nesses mesmos nomes;
 * - o wrapper de tela cheia (`min-height: 100svh`) da lugar ao container do
 *   site, senao o carrossel ficava encostado na borda esquerda.
 */
.sg-camera-slider {
  --sg-slider-orange: #ff6600;
  --sg-slider-green: #12cc5e;
  --sg-gray-900: #202124;
  --sg-gray-700: #54595f;
  --sg-gray-300: #dfe3e6;
  --sg-gray-100: #f6f8fa;
  width: min(calc(100% - 64px), 1080px);
  margin: 0 auto;
  padding: 70px 0;
  color: var(--sg-gray-900);
}

.sg-camera-slider *,
.sg-camera-slider *::before,
.sg-camera-slider *::after {
  box-sizing: border-box;
}

.sg-camera-slider button {
  font: inherit;
}

/* Halo, mais discreto que o das outras secoes: o desfoque e metade e a franja
   sai com meia forca, porque aqui a caixa e um cartao no meio do texto e nao uma
   faixa de ponta a ponta.
 *
 * Fica no `stack` e nao no proprio cartao porque o cartao tem `overflow:
 * hidden`, que recortaria a camada. O `bottom` desconta o recheio do stack para
 * a camada ter exatamente a caixa do cartao — maior que isso e o degrade
 * aparece inteiro, e vira moldura em vez de brilho. */
.sg-camera-slider__stack::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 1.75rem;
  border-radius: 1.5rem;
  background: linear-gradient(to left, #f60 24.435%, #25d366 62.788%);
  filter: blur(18px);
  opacity: .5;
  pointer-events: none;
}

.sg-camera-slider__stack { cursor: grab; padding-bottom: 1.75rem; position: relative; touch-action: pan-y; user-select: none; }
.sg-camera-slider__stack.is-dragging { cursor: grabbing; }
.sg-camera-slider__card { background: linear-gradient(135deg, #fff, #f8fafb); border: 1px solid var(--sg-gray-300); border-radius: 1.5rem; min-height: 26.25rem; overflow: hidden; position: relative; z-index: 1; }
.sg-camera-slider__shine { background: var(--sg-accent-soft); border-radius: 50%; filter: blur(15px); height: 24rem; opacity: .8; pointer-events: none; position: absolute; right: -9rem; top: -11rem; width: 24rem; }
.sg-camera-slider__content { align-items: center; display: grid; gap: clamp(2rem, 6vw, 6rem); grid-template-columns: minmax(0, 1fr) minmax(19rem, .9fr); min-height: 26.25rem; padding: clamp(2rem, 5vw, 4rem); position: relative; }
.sg-camera-slider__feature { display: flex; flex-direction: column; height: 100%; }
.sg-camera-slider__icon { align-items: center; background: var(--sg-accent-soft); border-radius: .8rem; color: var(--sg-accent); display: flex; height: 4rem; justify-content: center; margin-bottom: clamp(1.7rem, 4vw, 2.5rem); width: 4rem; }
.sg-camera-slider__icon svg { fill: none; height: 2.5rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 2.5rem; }
.sg-camera-slider__number { color: var(--sg-accent); font-size: .73rem; font-variation-settings: "wght" 700; letter-spacing: .2em; margin: 0 0 .9rem; }
.sg-camera-slider h2 { font-size: clamp(1.9rem, 3.25vw, 2.75rem); font-variation-settings: "wght" 700; letter-spacing: 0; line-height: 1.03; margin: 0 0 1.35rem; max-width: 12ch; }
.sg-camera-slider h2.is-long-title { max-width: 18ch; }
.sg-camera-slider__description { color: var(--sg-gray-700); font-size: 1rem; font-variation-settings: "wght" 420; line-height: 1.65; margin: 0; max-width: 32rem; }
.sg-camera-slider__detail { align-items: center; align-self: flex-start; background: var(--sg-accent-soft); border: 1px solid var(--sg-accent-line); border-radius: 99px; color: var(--sg-accent); display: flex; font-size: .72rem; font-variation-settings: "wght" 650; gap: .5rem; letter-spacing: .04em; margin: auto 0 0; padding: .62rem 1rem; text-transform: uppercase; }
.sg-camera-slider__detail > span:first-child { background: currentColor; border-radius: 50%; height: .38rem; width: .38rem; }

.sg-camera-slider__navigation { display: grid; gap: .7rem; }
.sg-camera-slider__navigation button { align-items: center; background: rgb(84 89 95 / 4%); border: 1px solid var(--sg-gray-300); border-radius: .75rem; color: var(--sg-gray-700); cursor: pointer; display: grid; font-size: .86rem; font-variation-settings: "wght" 560; gap: .85rem; grid-template-columns: 2rem 1fr; line-height: 1.2; min-height: 4rem; padding: .75rem 1rem; text-align: left; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; }
/* O `background` e o `color` estao aqui porque a folha convertida traz
   `button:hover { background-color: #c36; color: #fff }` — o mesmo rosa que ja
   tinha atacado o cabecalho. Declarar so a borda deixava o fundo virar rosa. */
.sg-camera-slider__navigation button:hover,
.sg-camera-slider__navigation button:focus-visible { background: rgb(84 89 95 / 7%); border-color: var(--sg-accent); color: var(--sg-gray-900); transform: translateX(.25rem); }
.sg-camera-slider__navigation button.is-active:hover { transform: none; }
.sg-camera-slider__navigation button.is-active { background: var(--sg-accent-soft); border-color: var(--sg-accent-line); color: var(--sg-gray-900); }
.sg-camera-slider__navigation button.is-active:nth-child(odd) { background: #fff0e6; border-color: #ffc299; }
.sg-camera-slider__navigation button.is-active:nth-child(even) { background: #e8fbf0; border-color: #9de7b8; }
.sg-camera-slider__navigation button > span:last-child { display: block; }
.sg-camera-slider__nav-number { align-items: center; background: #eef0f2; border-radius: .45rem; color: #727980; display: flex; font-size: .72rem; font-variation-settings: "wght" 700; height: 2rem; justify-content: center; width: 2rem; }
.sg-camera-slider__navigation button.is-active .sg-camera-slider__nav-number { background: var(--sg-accent-soft); color: var(--sg-accent); }
.sg-camera-slider__navigation button.is-active:nth-child(odd) .sg-camera-slider__nav-number { background: #ffe1cc; color: var(--sg-slider-orange); }
.sg-camera-slider__navigation button.is-active:nth-child(even) .sg-camera-slider__nav-number { background: #d4f8e1; color: var(--sg-slider-green); }

.sg-camera-slider__controls { align-items: center; display: flex; justify-content: space-between; margin-top: 1.5rem; }
.sg-camera-slider__dots { display: flex; gap: .45rem; }
.sg-camera-slider__dots button { background: #c8cdd1; border: 0; border-radius: 99px; cursor: pointer; height: .45rem; padding: 0; transition: background .25s ease, width .25s ease; width: .45rem; }
.sg-camera-slider__dots button.is-active { background: var(--sg-accent); width: 1.8rem; }
.sg-camera-slider__arrows { display: flex; gap: .7rem; }
.sg-camera-slider__arrows button { align-items: center; background: #fff; border: 1px solid var(--sg-gray-300); border-radius: 50%; color: var(--sg-gray-700); cursor: pointer; display: inline-flex; height: 2.8rem; justify-content: center; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; width: 2.8rem; }
.sg-camera-slider__arrows button:last-child { background: var(--sg-accent); border-color: var(--sg-accent); color: #fff; }
.sg-camera-slider__arrows button:hover,
.sg-camera-slider__arrows button:focus-visible { background: #fff; border-color: var(--sg-accent); color: var(--sg-accent); transform: translateY(-2px); }
.sg-camera-slider__arrows button:last-child:hover,
.sg-camera-slider__arrows button:last-child:focus-visible { background: var(--sg-accent); color: #fff; }
.sg-camera-slider__dots button:hover,
.sg-camera-slider__dots button:focus-visible { background: var(--sg-accent); }
.sg-camera-slider__arrows svg { fill: none; height: 1.15rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 1.15rem; }
.sg-camera-slider button:focus-visible { outline: 3px solid var(--sg-slider-green); outline-offset: 3px; }

@media (max-width: 760px) {
  .sg-camera-slider__stack { padding-bottom: 1.2rem; }
  .sg-camera-slider__card, .sg-camera-slider__content { min-height: 0; }
  .sg-camera-slider__content { gap: 2rem; grid-template-columns: 1fr; padding: 2rem; }
  .sg-camera-slider__feature { min-height: 21rem; }
  .sg-camera-slider h2 { max-width: 13ch; }
  .sg-camera-slider__navigation { gap: .55rem; }
  .sg-camera-slider__navigation button { font-size: .8rem; min-height: 3.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}