/* Segmentos (Figma: Home v1 / Segmentos, 2545:16277). Fileira de cards
   com ícone, rolável por toque/seta — reaproveita o mesmo
   ".segmento-card" da página Segmentos (ver segmentos-detalhado.css),
   não mais o slide único foto+painel navy que trocava sozinho. */

.segmentos { padding: 56px 0; }
@media (min-width: 1024px) {
  .segmentos { padding: 96px 0; }
}

/* Alinhado à esquerda (Figma: Home v1 / Segmentos, "Texto" 2470:8527 —
   eyebrow/título/lead começam todos em x=320, sem centralização). */
.segmentos-intro { margin-bottom: 40px; text-align: left; }
.segmentos-intro h2 { max-width: 767px; margin: 0 0 24px; }
.segmentos-intro .lead { max-width: 605px; margin: 0; }
@media (min-width: 1024px) {
  /* Figma: as setas começam logo abaixo da última linha do texto de
     apoio (4463 = 4409 + 54), sem vão — o respiro de 32px até os cards
     fica na própria fileira de setas (ver ".segmentos-grid-nav"). */
  .segmentos-intro { margin-bottom: 0; }
}

/* Entrada animada (fade + slide-up) ao rolar até a seção. */
.segmentos-intro {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.segmentos-intro.is-visible { opacity: 1; transform: none; }
html:not(.js) .segmentos-intro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .segmentos-intro { transition: none; }
}

/* Setas de navegação: alinhadas à direita, acima da fileira de cards
   (Figma: Group 469, 2513:15189) — só aparecem a partir de onde o
   container ganha largura fixa, já que no mobile o scroll por toque já
   é suficiente e as setas ficariam apertadas. */
.segmentos-grid-wrap { text-align: left; }
.segmentos-grid-nav { display: none; }
@media (min-width: 1024px) {
  .segmentos-grid-nav { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 32px; }
}
.segmentos-grid-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: var(--color-white);
  cursor: pointer;
}
.segmentos-grid-arrow--next { background: var(--color-orange); }
.segmentos-grid-arrow:disabled { opacity: 0.4; cursor: default; }
.segmentos-grid-arrow-icon {
  display: block;
  width: 18px;
  height: 18px;
  background-color: var(--color-navy);
  mask: url(../img/cases-caret-icon.svg) center / contain no-repeat;
  -webkit-mask: url(../img/cases-caret-icon.svg) center / contain no-repeat;
}
.segmentos-grid-arrow--next .segmentos-grid-arrow-icon { background-color: var(--color-white); transform: scaleX(-1); }

.segmentos-grid-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  /* Explícito (não deixar no "visible" padrão): sem isso, o navegador
     calcula "overflow-y" sozinho como "auto" só por existir
     "overflow-x: auto" (regra da spec de CSS Overflow) — isso tornava
     o eixo vertical "rolável" por engano, e o bounce/rubber-band do
     trackpad (Mac) nesse eixo fantasma cortava visualmente o topo dos
     cards ao rolar a fileira horizontalmente. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 20px;
  scrollbar-width: none;
  margin: 0 -20px;
  padding: 0 20px;
}
.segmentos-grid-track::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  /* A sangria de -20px (usada no mobile pra alinhar com o padding do
     container mesmo com scroll nativo) faria a fileira vazar 20px pra
     fora do container, que no desktop já tem largura exata. O
     "scroll-padding" precisa zerar junto — senão o encaixe (snap)
     continuava reservando 20px de margem interna que não existe mais,
     fazendo o primeiro/último card encaixar levemente deslocado. */
  .segmentos-grid-track { margin: 0; padding: 0; scroll-padding: 0; }
}

.segmentos-grid-track .segmento-card {
  flex: 0 0 85%;
  scroll-snap-align: start;
  /* Sem isso, um swipe/fling rápido pode pular o ponto de encaixe e
     parar com o card pela metade (sem atingir o "start" de nenhum) —
     força sempre parar em cima de um card inteiro, nunca cortado. */
  scroll-snap-stop: always;
}
@media (min-width: 640px) {
  .segmentos-grid-track .segmento-card { flex-basis: calc(50% - 10px); }
}
@media (min-width: 1024px) {
  /* Largura real do Figma (413px), não uma fração do container — o
     carrossel mostra ~3,1 cards por vez (há mais segmentos do que cabem
     de uma vez), daí a largura fixa em vez de dividir o container. */
  .segmentos-grid-track .segmento-card { flex: 0 0 413px; }
}

/* Entrada em cascata ao rolar até a seção — escopada a
   ".segmentos-grid-track" (não ".segmento-card" sozinho) porque esse
   mesmo componente também é usado, sem animação, na grade estática da
   página Segmentos (ver segmentos-detalhado.css) — não dava pra
   esconder por padrão ali sem um observer próprio pra revelar depois. */
.segmentos-grid-track .segmento-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.segmentos-grid-track .segmento-card.is-visible { opacity: 1; transform: none; }
html:not(.js) .segmentos-grid-track .segmento-card { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .segmentos-grid-track .segmento-card { transition: none; }
}

/* ===== Mobile: texto da seção centralizado, cards em largura total e
   pistas de que dá pra arrastar pro lado (bolinhas + "empurrãozinho"
   do primeiro card ao entrar na tela). ===== */
@media (max-width: 639px) {
  .segmentos-intro { text-align: center; }
  .segmentos-intro h2,
  .segmentos-intro .lead { margin-left: auto; margin-right: auto; }
  .segmentos-grid-track .segmento-card { flex-basis: 100%; }
}

.segmentos-dots { display: none; }
@media (max-width: 1023px) {
  .segmentos-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
  .segmentos-dot {
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background: var(--color-border-blue);
    transition: width 0.3s ease, background-color 0.3s ease;
  }
  .segmentos-dot.is-active { width: 24px; background: var(--color-orange); }
}

/* Empurrãozinho: os cards deslizam ~36px pra esquerda e voltam, duas
   vezes, mostrando a borda do próximo (main.js liga ".is-hinting" uma
   vez, quando o carrossel aparece, e desliga ao primeiro toque). Usa a
   propriedade "translate" (não "transform", que a animação de entrada
   dos cards já usa). */
@media (max-width: 1023px) {
  .segmentos-grid-track.is-hinting .segmento-card {
    animation: segmentos-nudge 1.1s cubic-bezier(0.45, 0, 0.25, 1) 0.4s 2;
  }
}
@keyframes segmentos-nudge {
  0%, 100% { translate: 0 0; }
  45% { translate: -40px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .segmentos-grid-track.is-hinting .segmento-card { animation: none; }
}