/*
 * Faixa "Mais agilidade. Em cada conversa." — fonte única do visual.
 * A mesma faixa aparece na Home da SYO e na home do Sistema KAVO (dono, 08/11/2026):
 * o HTML nasce de `benefitsSection()` (src/modules/syo-kavo/site/home-experience.mjs),
 * o carrossel vem de benefits-band.js e o estilo vem só daqui. Mudou aqui, muda nas duas.
 * Autossuficiente: não depende de .syo-site nem de outra folha da SYO.
 * Quem hospeda pode alinhar a coluna com `--syo-band-width`.
 */
@font-face {
  font-family: 'Syo Interface';
  src: url('/syo-kavo/inter-tight-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.f-benefits {
  --band-font: -apple-system, BlinkMacSystemFont, 'Syo Interface', 'Segoe UI', sans-serif;
  --band-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --band-foreground: #f5f5f7;
  --band-muted: #b7b7be;
  padding-block: clamp(72px, 9vw, 128px);
  overflow-x: clip;
  background: #000;
  color: var(--band-foreground);
  font-family: var(--band-font);
}
.f-benefits .wrap {
  width: var(--syo-band-width, min(1120px, calc(100% - 2 * clamp(24px, 4vw, 64px))));
  margin-inline: auto;
}
.f-benefits h2 {
  margin: 0 0 32px;
  color: var(--band-foreground);
  font: 400 clamp(34px, 4.4vw, 56px) / 1.12 var(--band-font);
  letter-spacing: -0.04em;
  text-align: left;
  text-wrap: balance;
}
.f-benefits h2 span {
  color: var(--band-muted);
}

/* O trilho sai pela direita até a borda da tela, com o primeiro cartão alinhado ao título.
   `relative` prende os textos ocultos dentro do trilho. */
.f-benefit-list {
  position: relative;
  display: flex;
  gap: 20px;
  margin: 0 calc(50% - 50vw) 0 0;
  padding: 0 calc(50vw - 50%) 8px 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline-offset: 6px;
}
.f-benefit-list::-webkit-scrollbar {
  display: none;
}
.f-benefit-card {
  display: flex;
  flex: 0 0 clamp(300px, 30vw, 400px);
  flex-direction: column;
  min-width: 0;
  height: clamp(460px, 38vw, 520px);
  overflow: hidden;
  border: 1px solid #1c1c1f;
  border-radius: 28px;
  background: #0a0a0c;
  scroll-snap-align: start;
}
.f-benefit-copy {
  padding: 32px 32px 8px;
}
.f-benefit-card > img {
  display: block;
  order: 1;
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  transition: transform 700ms var(--band-ease);
}
.f-benefit-card h3 {
  margin: 0 0 10px;
  color: var(--band-foreground);
  font: 600 clamp(22px, 2vw, 26px) / 1.18 var(--band-font);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.f-benefit-card p {
  max-width: 62ch;
  margin: 0;
  color: var(--band-muted);
  font: 400 15px/1.5 var(--band-font);
}
@media (hover: hover) and (pointer: fine) {
  .f-benefit-card:hover > img {
    transform: scale(1.04);
  }
}

/* Setas no canto direito, como nas vitrines de produto; somem quando não há o que passar. */
.syo-rail-nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}
.syo-rail-nav[hidden] {
  display: none;
}
.syo-rail-nav button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #1d1d1f;
  color: #f5f5f7;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color 160ms var(--band-ease),
    opacity 160ms var(--band-ease),
    transform 120ms var(--band-ease);
}
.syo-rail-nav button:focus-visible {
  outline: 2px solid #f5f5f7;
  outline-offset: 3px;
}
.syo-rail-nav .syo-icon {
  width: 20px;
  height: 20px;
}
.syo-rail-nav button:active {
  transform: scale(0.94);
}
.syo-rail-nav button:disabled {
  opacity: 0.35;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .syo-rail-nav button:not(:disabled):hover {
    background: #2c2c30;
  }
}

@keyframes syo-fade {
  from {
    opacity: 0;
  }
}
@keyframes syo-rise {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
}

/* ---------- Celular: cartões um embaixo do outro, imagem com proporção fixa e sem setas ---------- */
@media (max-width: 800px) {
  .f-benefits {
    padding-block: 64px;
  }
  /* A segunda frase do título desce inteira para a linha de baixo. */
  .f-benefits h2 span {
    display: block;
  }
  .f-benefit-list {
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .f-benefit-card {
    flex: none;
    height: auto;
    border-radius: 24px;
  }
  /* `height: auto` vence o atributo height da <img>: sem ele, na página da SYO (sem
     reset de imagem) a foto ficava com 800 px de altura e o cartão estourava. */
  .f-benefit-card > img {
    flex: none;
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .f-benefit-copy {
    padding: 24px 24px 4px;
  }
  /* Cada cartão aparece ao entrar na tela, só com CSS. Com reduzir movimento, só esmaece
     (o site.css da SYO zera animações com !important, por isso o reforço). */
  @supports (animation-timeline: view()) {
    .f-benefit-card {
      animation: syo-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 30%;
    }
    @media (prefers-reduced-motion: reduce) {
      .f-benefit-card {
        animation-name: syo-fade !important;
        animation-duration: auto !important;
        animation-timing-function: linear !important;
        animation-fill-mode: both !important;
        animation-timeline: view() !important;
        animation-range: entry 5% cover 30% !important;
      }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .f-benefit-card > img {
    transition: none;
  }
}