/* Ritmo e rolagem — Just BC
   Camada de melhoria sobre o site: espaçamento vertical em escala única, cabeçalho que acompanha a rolagem,
   entrada suave das seções, barra de progresso e carrossel de resultados no celular.
   Regras de ouro (skill scroll-motion): sem sequestro de rolagem, só transform/opacity, tudo desliga com
   prefers-reduced-motion e o conteúdo nunca depende da animação para aparecer. */

:root {
  --sec-y: clamp(48px, 5.4vw, 72px);   /* respiro vertical de cada seção (antes: 116–124px no desktop) */
  --hdr: 100px;                       /* cabeçalho no topo da página */
  --hdr-c: 64px;                      /* cabeçalho compacto ao rolar */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}
@media (width <= 760px) { :root { --hdr: 79px; --hdr-c: 58px; } }

/* ---------- âncoras: o destino fica logo abaixo do cabeçalho compacto ---------- */
:root { scroll-padding-top: max(0px, calc(var(--hdr-c) - var(--sec-y) + 32px)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- espaçamento vertical: uma escala só para todas as seções ---------- */
main > section.section-shell.section-shell:not(.hero) { padding-block: var(--sec-y); }
main > section.contact.contact-new.section-shell { padding-block: calc(var(--sec-y) * 1.3); }
.sol-body { margin-top: clamp(28px, 3vw, 40px); }
.sol-close { margin-top: clamp(36px, 4vw, 52px); }
.proc-art { margin-top: clamp(16px, 2.4vw, 28px); }
.proc-close { margin-top: clamp(32px, 3.4vw, 44px); }
.res-grid { margin-top: clamp(28px, 3.2vw, 40px); }
.products .product-grid { margin-top: clamp(28px, 3vw, 36px); }
.contact-new .contact-bottom { margin-top: clamp(36px, 4.4vw, 52px); }

/* ---------- cabeçalho fixo que encolhe ao rolar ---------- */
body { padding-top: var(--hdr); }
.header { position: fixed; top: 0; right: 0; left: 0; margin: 0 auto; z-index: 60; transition: height .3s var(--ease-out); border-bottom-color: transparent; }
.header::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: #080d1b00; border-bottom: 1px solid var(--line);
  transition: background-color .3s, backdrop-filter .3s, border-color .3s; }
.header.is-stuck { height: var(--hdr-c); }
.header.is-stuck::before { background: #080d1bcc; -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border-bottom-color: #26314a; }
.header .brand img { transition: transform .3s var(--ease-out); transform-origin: left center; }
.header.is-stuck .brand img { transform: scale(.86); }
.desktop-nav a { position: relative; transition: color .25s; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #00f0ff, #9a7bff);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.desktop-nav a.is-active, .nav-contact.is-active { color: #fff; }
.desktop-nav a.is-active::after { transform: scaleX(1); }
.nav-contact.is-active svg { transform: translate(2px, -2px); }
.nav-contact svg { transition: transform .25s; }

/* ---------- barra de progresso de leitura ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #00f0ff, #9a7bff 55%, #ff7ac6); }
@supports (animation-timeline: scroll()) {
  .scroll-progress { animation: ritmo-progress linear both; animation-timeline: scroll(root block); }
  @keyframes ritmo-progress { to { transform: scaleX(1); } }
}

/* ---------- entrada das seções (só existe se o JS marcar o elemento; sem JS nada fica escondido) ---------- */
.rv { opacity: 0; }
.rv.rv-in { opacity: 1; animation: ritmo-up .8s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 85ms); }
@keyframes ritmo-up { from { opacity: 0; transform: translate3d(0, 26px, 0); } }
.rv-soft.rv-in { animation-name: ritmo-soft; animation-duration: 1s; }
@keyframes ritmo-soft { from { opacity: 0; transform: translate3d(0, 34px, 0) scale(.985); } }
/* a escada do método se monta degrau por degrau */
.proc-art.rv-in .proc-item, .proc-art.rv-in .proc-start { animation: ritmo-step .9s var(--ease-out) backwards; }
@keyframes ritmo-step { from { opacity: 0; transform: translate3d(0, 30px, 0); } }
.proc-art.rv-in .proc-start { animation-delay: .05s; }
.proc-art.rv-in .proc-item[data-step="0"] { animation-delay: .18s; }
.proc-art.rv-in .proc-item[data-step="1"] { animation-delay: .34s; }
.proc-art.rv-in .proc-item[data-step="2"] { animation-delay: .50s; }
.proc-art.rv-in .proc-item[data-step="3"] { animation-delay: .66s; }
.proc-art.rv-in .proc-item[data-step="4"] { animation-delay: .82s; }
/* as barrinhas coloridas dos títulos "se desenham" */
.rv-in .sol-eyebrow i, .rv-in .proc-eyebrow i, .rv-in .res-eyebrow i, .rv-in .dif-eyebrow-bar, .rv-in .sol-list-head:after {
  transform-origin: left center; animation: ritmo-bar .9s .15s var(--ease-out) backwards; }
@keyframes ritmo-bar { from { transform: scaleX(0); } }

/* ---------- parallax só em decoração (anéis do fechamento), onde houver suporte ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (width >= 761px) {
    .contact-new .contact-orbit { animation: ritmo-orbit linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes ritmo-orbit { from { transform: scaleY(.72) translateY(-70px); } to { transform: scaleY(.72) translateY(70px); } }
  }
}

/* ---------- celular: resultados viram uma faixa deslizante (2.700px de rolagem viram ~550px) ---------- */
.res-dots { display: none; }
@media (width <= 760px) {
  .res-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: -18px; padding: 4px 18px 8px; scroll-padding-inline: 18px; -webkit-overflow-scrolling: touch; }
  .res-grid::-webkit-scrollbar { display: none; }
  .res-grid:focus-visible { outline-offset: -2px; border-radius: 16px; }
  .res-card { flex: 0 0 min(82%, 330px); scroll-snap-align: start; }
  .res-card.rv { opacity: 1; }          /* rede de segurança se a janela for redimensionada de desktop para celular */
  .res-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .res-dots i { width: 7px; height: 7px; border-radius: 50%; background: #2c4166; transition: background-color .25s, width .25s; }
  .res-dots i.is-on { width: 22px; border-radius: 4px; background: var(--cyan); }
}

/* ---------- celular: botão flutuante de contato (aparece depois do início, some no fechamento) ---------- */
.fab-cta { display: none; }
@media (width <= 760px) {
  .fab-cta { display: inline-flex; align-items: center; gap: 10px; position: fixed; z-index: 55; right: 16px; bottom: max(16px, env(safe-area-inset-bottom));
    min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--cyan); color: #061923; font-size: 13px; font-weight: 650; letter-spacing: -.005em;
    box-shadow: 0 10px 28px #00121f99, 0 0 0 1px #ffffff22 inset; transform: translate3d(0, 140%, 0); opacity: 0; pointer-events: none;
    transition: transform .4s var(--ease-out), opacity .3s; }
  .fab-cta.is-on { transform: none; opacity: 1; pointer-events: auto; }
  .fab-cta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
}

/* ---------- diagramação: ajustes de tablet (achados na varredura de larguras) ---------- */
/* topo: entre 761 e 880px o botão "Pausar animação" cobria o último botão do seletor de ilustrações */
@media (761px <= width <= 880px) {
  .hero-visual .scene-controls { left: 44%; }
  .hero-visual figcaption { left: 44%; }
}
/* método: entre 900 e 1100px as cinco fases ficavam numa coluna só, com quase metade da largura vazia -> três colunas */
@media (900px <= width <= 1100px) {
  .proc-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px 28px; max-width: none; margin-top: 40px; }
  .proc-steps:before { display: none; }
  .proc-steps li { display: block; flex: 0 0 calc((100% - 56px) / 3); padding: 0; text-align: left; }
  .proc-steps li .proc-mini { max-width: 236px; margin: 0 0 6px; }
  .proc-steps h3 { margin-top: 12px; }
  .proc-steps p { max-width: none; }
}
/* método: em ~1150px a palavra "Desenvolvimento" passava da coluna */
@media (1101px <= width <= 1240px) { .proc-steps h3 { font-size: 18px; } }

/* ---------- movimento reduzido: tudo aparece de uma vez, sem animação ---------- */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; }
  .rv.rv-in, .proc-art.rv-in .proc-item, .proc-art.rv-in .proc-start, .rv-in .sol-eyebrow i, .rv-in .proc-eyebrow i, .rv-in .res-eyebrow i,
  .rv-in .dif-eyebrow-bar, .rv-in .sol-list-head:after { animation: none; }
  .header, .header::before, .header .brand img, .desktop-nav a::after, .fab-cta { transition: none; }
  .scroll-progress { display: none; }
}