/* =====================================================================
   Frentes: "O que fazemos" (roda de serviços)
   A seção é alta; o palco fica preso na tela (sticky) enquanto a
   rolagem gira a roda (js/frentes.js).
   ===================================================================== */
.Frentes { --n: 6; position: relative; height: calc(100dvh + var(--n) * 62dvh); background: linear-gradient(180deg, #fff 0%, #F7F5FF 50%, #FAFAFE 100%); color: #1D1E20; }
@media (max-width: 767px) { .Frentes { height: calc(100dvh + var(--n) * 55dvh); } }
.Frentes__palco { position: sticky; top: 0; height: 100dvh; overflow: hidden; user-select: none; }

/* a roda */
.Frentes__cena { position: absolute; inset: 0; }
.Frentes__roda { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; }
@media (max-width: 767px) { .Frentes__roda { top: 40%; } }
.Frentes__card { position: absolute; display: block; backface-visibility: hidden; will-change: transform, opacity; transition: opacity .25s; }
.Frentes__face { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 14px; background: #ECE8F8; box-shadow: 0 22px 44px -22px rgba(47, 28, 106, .45); will-change: transform; }
.Frentes__face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.Frentes__chip { position: absolute; left: 10px; bottom: 10px; padding: .25rem .55rem; border-radius: 999px; font-family: var(--font-mono); font-size: .68rem; color: #fff; background: rgba(20, 7, 61, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* título no centro do anel */
.Frentes__rotulo { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6rem; padding: 0 12%; text-align: center; pointer-events: none; }
.Frentes__eyebrow { font-family: var(--in-font, inherit); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #673DE6; }
.Frentes__h2 { max-width: 15ch; font-size: clamp(1.5rem, .9rem + 1.5vw, 2.2rem); font-weight: 400; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.Frentes__sub { max-width: 30ch; font-size: .98rem; line-height: 1.5; color: #6D6E78; text-wrap: balance; }
.Frentes__dica { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: #8B8398; }
.Frentes__dica svg { width: 14px; height: 14px; animation: frentesDica 1.8s ease-in-out infinite; }

/* serviço da frente: os seis ficam empilhados na mesma célula e só o ativo aparece */
.Frentes__infos { position: absolute; left: clamp(1.5rem, 5vw, 5rem); top: 50%; transform: translateY(-50%); display: grid; width: min(30vw, 380px); opacity: 0; pointer-events: none; }
.Frentes__info { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s, transform .5s cubic-bezier(.16, 1, .3, 1), visibility 0s .35s; }
.Frentes__info.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .5s cubic-bezier(.16, 1, .3, 1), visibility 0s; }
.Frentes__infos::before { content: ""; position: absolute; inset: -2.5rem -3rem -2.5rem -30vw; z-index: -1; background: radial-gradient(closest-side, rgba(250, 250, 254, .95), rgba(250, 250, 254, .75) 60%, transparent); }
.is-tambor .Frentes__infos { pointer-events: auto; }
.Frentes__servico { margin-bottom: .7rem; font-size: .82rem; font-weight: 600; line-height: 1.3; color: #673DE6; }
.Frentes__titulo { font-size: clamp(1.5rem, 1rem + 1.2vw, 2.2rem); font-weight: 400; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.Frentes__texto { margin-top: 1rem; font-size: .98rem; line-height: 1.6; color: #4a4a55; }
.Frentes__link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem; font-size: .9rem; font-weight: 600; color: #5025D1; }
.Frentes__link svg { width: 16px; height: 16px; transition: transform .3s; }
.Frentes__link:hover svg { transform: translate(2px, -2px); }

/* índice à direita */
.Frentes__indice { position: absolute; right: clamp(1.5rem, 3vw, 3rem); top: 50%; transform: translateY(-50%); margin: 0; padding: 0; list-style: none; text-align: right; opacity: 0; transition: opacity .4s; }
.is-tambor .Frentes__indice { opacity: 1; }
.Frentes__indice button { padding: .3rem 0; font: inherit; font-size: .85rem; line-height: 1.5; color: #8B8398; background: none; border: 0; cursor: pointer; transition: color .25s; }
.Frentes__indice button:hover { color: #1D1E20; }
.Frentes__indice button[aria-current="true"] { color: #5025D1; font-weight: 600; }
.Frentes__indice button:focus-visible { outline: 2px solid #673DE6; outline-offset: 2px; border-radius: 4px; }

/* tablet: texto embaixo, sem índice */
@media (max-width: 1023px) {
  .Frentes__indice { display: none; }
  .Frentes__infos { left: 50%; top: auto; bottom: clamp(1.5rem, 6vh, 4rem); transform: translateX(-50%); width: min(90vw, 560px); text-align: center; }
  .Frentes__infos::before { inset: -2rem -1rem; background: radial-gradient(closest-side, rgba(250, 250, 254, .96), rgba(250, 250, 254, .8) 70%, transparent); }
  .Frentes__roda { top: 40%; }
}
@media (max-width: 767px) {
  .Frentes__titulo { font-size: 1.35rem; }
  .Frentes__servico { margin-bottom: .45rem; font-size: .78rem; }
  .Frentes__texto { margin-top: .6rem; font-size: .88rem; line-height: 1.5; }
  .Frentes__link { margin-top: .7rem; }
  .Frentes__h2 { font-size: 1.6rem; }
  .Frentes__sub { font-size: .9rem; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .Frentes__roda { top: 50%; transition: left .6s cubic-bezier(.16, 1, .3, 1); }
  .is-tambor .Frentes__roda { left: 66%; }
  .Frentes__h2 { font-size: 1.35rem; }
  .Frentes__dica { display: none; }
  .Frentes__sub { display: none; }
  .Frentes__infos { left: 1.5rem; top: 50%; bottom: auto; transform: translateY(-50%); width: 40vw; text-align: left; }
  .Frentes__titulo { font-size: 1.2rem; }
  .Frentes__texto { margin-top: .5rem; font-size: .8rem; line-height: 1.45; }
}

@keyframes frentesDica { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) {
  .Frentes__dica svg { animation: none; }
  .Frentes__info { transition: none; }
}
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* tablet e celular: o texto fica num cartão translúcido, acima dos cartões que passam por trás */
@media (max-width: 1023px) {
  .Frentes__infos { padding: 1.1rem 1.25rem 1.2rem; border-radius: 18px; background: rgba(250, 250, 254, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 44px -28px rgba(47, 28, 106, .4); border: 1px solid rgba(213, 200, 255, .5); }
  .Frentes__infos::before { content: none; }
}
/* tablet: o anel é menor, então o título e a frase de apoio encolhem para caber dentro dele */
@media (min-width: 768px) and (max-width: 1023px) {
  .Frentes__rotulo { gap: .45rem; }
  .Frentes__h2 { max-width: 13ch; font-size: 1.3rem; }
  .Frentes__sub { max-width: 24ch; font-size: .78rem; }
  .Frentes__dica { font-size: .72rem; }
}
/* abaixo de 1024px o anel fica a 40% da altura (.Frentes__roda); o título acompanha o centro dele */
@media (max-width: 1023px) and (min-height: 501px) { .Frentes__rotulo { inset: 0 0 20% 0; } }