/* ════════════════════════════════════════
   WISE — efeitos do site
   Animações, transições, profundidade (3D) e efeitos de rolagem.

   Carregado entre o <style> base e o <style> de componentes do
   index.html, então mantém a prioridade que tinha quando era inline.
   Os efeitos de rolagem só ligam com a classe .fx-js (posta pelo JS);
   sem JS, ou com "reduzir movimento" no sistema, tudo aparece parado.
════════════════════════════════════════ */

:root {
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --shine: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);
}


/* ══════════════════════════════════
   ROLAGEM
══════════════════════════════════ */

/* Seções entram subindo */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* Títulos de seção sobem de dentro de uma máscara */
.fx-js .reveal .section-h2 {
  clip-path: inset(0 0 100% 0);
  transform: translateY(0.35em);
  transition: clip-path 0.9s var(--ease-out) 0.1s, transform 0.9s var(--ease-out) 0.1s;
}
.fx-js .reveal.visible .section-h2 {
  clip-path: inset(-20% -5% -30% -5%);
  transform: none;
}

/* Grids: cada card entra um pouco depois do anterior (--i vem do JS) */
.fx-js .reveal:not(.visible) [data-stagger] > * { opacity: 0; }
.fx-js .reveal.visible [data-stagger] > * {
  animation: fx-rise 0.8s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 90ms + 0.15s);
}
@keyframes fx-rise { from { opacity: 0; transform: translateY(28px); } }

/* Foto do "Sobre" abre como uma cortina */
.fx-js .about.reveal .about-img-wrap {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1) 0.15s;
}
.fx-js .about.reveal.visible .about-img-wrap { clip-path: inset(0 0 0 0); }

/* Cards de especialidade entram em leque */
.spec-card {
  opacity: 0;
  transform: perspective(700px) rotateY(-15deg) translateZ(-50px) translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.175,0.885,0.32,1.1) !important;
}
.spec-card.card-in {
  opacity: 1 !important;
  transform: perspective(700px) rotateY(0deg) translateZ(0) translateY(0) !important;
}

/* Barra de progresso de leitura */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 999;
  background: linear-gradient(90deg, var(--terra), var(--sage));
  transform-origin: left; transform: scaleX(0);
  transition: transform 0.1s linear;
}


/* ══════════════════════════════════
   MENU
══════════════════════════════════ */
.site-nav { transition: height 0.35s var(--ease-out), box-shadow 0.35s ease; }
.site-nav.is-scrolled { height: calc(var(--nav-h) * 0.82); }
.site-nav .nav-logo svg { transition: width 0.35s var(--ease-out); }
.nav-toggle span { transition: transform 0.3s var(--ease-out), opacity 0.2s; }
.site-nav.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-nav.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1200px) {
  .site-nav .nav-links { transition: opacity 0.3s ease, transform 0.35s var(--ease-out), visibility 0s linear 0.35s; }
  .site-nav.is-open .nav-links { transition: opacity 0.3s ease, transform 0.35s var(--ease-out), visibility 0s; }
}


/* ══════════════════════════════════
   HERO
══════════════════════════════════ */

/* Entrada */
@media (prefers-reduced-motion: no-preference) {
  .whero-copy > * { animation: whero-in 0.9s var(--ease-out) both; }
  .whero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .whero-copy > :nth-child(3) { animation-delay: 0.16s; }
  .whero-copy > :nth-child(4) { animation-delay: 0.24s; }
  .whero-copy > :nth-child(5) { animation-delay: 0.32s; }
  .whero-person img { animation: whero-rise 1.2s var(--ease-out) both; }
  .whero-callout { animation: whero-fade 1s ease 0.5s both; }
}
@keyframes whero-in   { from { opacity: 0; transform: translateY(14px); } }
@keyframes whero-rise { from { opacity: 0; transform: translateY(3%); } }
@keyframes whero-fade { from { opacity: 0; } }

/* Ao rolar, cada camada sobe numa velocidade (--hp vai de 0 a 1) */
.whero-bg       { transform: translate3d(0, calc(var(--hp, 0) * 70px), 0); }
.whero-person   { transform: translate3d(0, calc(var(--hp, 0) * 140px), 0); }
.whero-callout  { transform: translate3d(0, calc(var(--hp, 0) * 30px), 0); }
.whero-copy     { transform: translate3d(0, calc(var(--hp, 0) * 90px), 0); opacity: calc(1 - var(--hp, 0) * 0.9); }
@media (max-width: 599px) {
  .whero-copy { transform: none; opacity: 1; }
}


/* Linhas do arco se desenham assim que a página abre, em todas as telas
   (o JS marca cada traço com .whero-line e pathLength="1") */
.whero-line {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: fx-draw 2s var(--ease-out) 0.3s forwards;
}
@keyframes fx-draw { to { stroke-dashoffset: 0; } }


/* ══════════════════════════════════
   CELULAR E TOQUE
══════════════════════════════════ */
@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
  /* a cúpula verde sobe logo depois do texto */
  .whero-art { animation: whero-dome 1.1s var(--ease-out) 0.25s both; }
  /* links do menu em tela cheia entram em sequência */
  .site-nav.is-open .nav-links li { animation: fx-rise 0.5s var(--ease-out) backwards; }
  .site-nav.is-open .nav-links li:nth-child(2) { animation-delay: 0.04s; }
  .site-nav.is-open .nav-links li:nth-child(3) { animation-delay: 0.08s; }
  .site-nav.is-open .nav-links li:nth-child(4) { animation-delay: 0.12s; }
  .site-nav.is-open .nav-links li:nth-child(5) { animation-delay: 0.16s; }
  .site-nav.is-open .nav-links li:nth-child(6) { animation-delay: 0.2s; }
  .site-nav.is-open .nav-links li:nth-child(7) { animation-delay: 0.24s; }
  .site-nav.is-open .nav-links li:nth-child(8) { animation-delay: 0.3s; }
}
@keyframes whero-dome { from { opacity: 0; transform: translateY(70px); } }

@media (max-width: 640px) {
  /* selos correndo como letreiro (a 2ª cópia fecha a emenda) */
  .trust-track { animation: fx-marquee 34s linear infinite; }
  .trust-bar:active .trust-track { animation-play-state: paused; }
  .reveal { transform: translateY(14px); }
  .sticky-mobile-cta { transition: transform 0.35s var(--ease-out) !important; }
}
@keyframes fx-marquee { to { transform: translateX(-50%); } }

/* Toque: sem "hover preso", com resposta ao apertar */
@media (hover: none) {
  .service-card:hover, .map-wrap:hover {
    transform: none !important; box-shadow: none !important;
  }
  .about-img-wrap:hover img { transform: none !important; filter: none !important; }
  .blog-topic:hover { transform: none !important; padding-left: 0; }
  .cta:hover { transform: none; }
  .cta:active, .filter-btn:active, .blog-more:active, .sticky-cta-check:active { transform: scale(0.97); }
  .id-card:active, .spec-card:active, .service-card:active, .faq-q:active { filter: brightness(0.96); }
  .cta, .filter-btn, .blog-more, .sticky-cta-check { transition: transform 0.15s ease, filter 0.15s ease; }
}


/* ══════════════════════════════════
   CTA
══════════════════════════════════ */
.cta {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}
.cta::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease-out);
}
.cta:hover { transform: translateY(-2px); }
.cta:hover::after { transform: translateX(120%); }
.cta:active { transform: translateY(0); }
.cta-ico { transition: transform 0.3s var(--ease-out); }
.cta:hover .cta-ico { transform: rotate(-8deg) scale(1.08); }


/* ══════════════════════════════════
   PROFUNDIDADE (3D) E HOVER
══════════════════════════════════ */

/* Partículas no fundo da página */
#particle-canvas {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0.55;
}
body { position: relative; z-index: 1; }

/* Identificação */
.id-card { position: relative; overflow: hidden; }
.id-card::before {
  content: ''; position: absolute; inset: 0;
  background: var(--shine); opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.id-card:hover::before { opacity: 1; }
.id-icon { transition: transform 0.3s ease; }
.id-card:hover .id-icon { transform: scale(1.08) rotate(-6deg); }
.identify, .services { position: relative; }

/* Sobre — o corte diagonal é o topo da própria seção: ela sobe por cima do fim
   de Identificação, então a foto acompanha a linha em vez de ficar reta embaixo dela */
.about {
  --cut: 40px;
  position: relative; z-index: 3;   /* acima da .stack-cover (2), de onde ele sai */
  margin-top: calc(-1 * var(--cut));
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
}
.about-img-wrap { position: relative; }
.about-img-wrap::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(28,58,74,0.3) 100%);
  pointer-events: none;
}
.about-img-wrap img { transition: transform 0.5s ease, filter 0.5s ease !important; }
.about-img-wrap:hover img { transform: scale(1.04) !important; filter: brightness(0.62) saturate(0.85) !important; }
.about-content { position: relative; overflow: hidden; }
.about-content::before {
  content: ''; position: absolute; top: -50%; right: -20%; width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(122,158,142,0.08) 0%, transparent 70%);
  animation: about-glow 6s ease-in-out infinite alternate;
  pointer-events: none;
}
.about-badge-crp {
  box-shadow: 0 4px 0 rgba(0,0,0,0.2), 0 8px 24px rgba(196,130,106,0.3) !important;
  transition: transform 0.3s, box-shadow 0.3s;
}
.about-badge-crp:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 0 rgba(0,0,0,0.15), 0 16px 40px rgba(196,130,106,0.35) !important;
}

/* Serviços */
.service-card {
  transform-style: preserve-3d;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
  position: relative; overflow: hidden;
}
.service-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--terra), var(--sage));
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease;
}
.service-card::after { content: ''; position: absolute; inset: 0; background: var(--shine); pointer-events: none; }
.service-card:hover {
  transform: perspective(800px) rotateX(-3deg) translateZ(16px) translateY(-6px) !important;
  box-shadow: 0 20px 60px rgba(28,58,74,0.15), 0 6px 20px rgba(28,58,74,0.08) !important;
}
.service-card:hover::before { transform: scaleX(1); }

/* FAQ */
.faq { position: relative; overflow: visible !important; }
.faq::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 10% 50%, rgba(122,158,142,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 90% 20%, rgba(196,130,106,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.faq-list, .faq .section-tag, .faq .section-h2 { position: relative; z-index: 1; }
.faq-item.open {
  background: rgba(247,244,238,0.04); border-radius: 2px;
  box-shadow: inset 3px 0 0 var(--terra), inset 0 0 0 1px rgba(247,244,238,0.05);
  padding-left: 0.75rem;
  transition: padding-left 0.3s ease, box-shadow 0.3s ease;
}

/* Blog */
.blog-section { position: relative; overflow: hidden; }
.blog-section::before {
  content: ''; position: absolute; top: 0; right: 0; width: 40%; height: 100%;
  background: linear-gradient(to left, rgba(28,58,74,0.03) 0%, transparent 100%);
  pointer-events: none;
}
.blog-topic {
  position: relative;
  transition: transform 0.3s ease, background 0.25s, padding-left 0.25s !important;
}
.blog-topic::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--terra); transform: scaleY(0); transform-origin: top; transition: transform 0.3s ease;
}
.blog-topic:hover { background: rgba(28,58,74,0.015); padding-left: 0.75rem; transform: translateX(8px) !important; }
.blog-topic:hover::before { transform: scaleY(1); }
.blog-closing {
  position: relative; overflow: hidden;
  box-shadow: 0 4px 0 rgba(0,0,0,0.2), 0 20px 60px rgba(28,58,74,0.2) !important;
}
.blog-closing::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  animation: closing-sweep 5s ease-in-out infinite;
  pointer-events: none;
}
.blog-closing::after {
  content: ''; position: absolute; top: -50%; right: -10%; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(196,130,106,0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* CTA final */
.cta-final { position: relative; overflow: hidden; }
.cta-final::before { animation: cta-glow-pulse 4s ease-in-out infinite alternate !important; }
.cta-final::after {
  content: ''; position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%);
  width: 80%; height: 120px;
  background: radial-gradient(ellipse, rgba(196,130,106,0.15) 0%, transparent 70%);
  pointer-events: none;
}

/* Localização */
.map-wrap {
  box-shadow: 0 8px 0 rgba(0,0,0,0.12), 0 20px 60px rgba(28,58,74,0.15) !important;
  transition: box-shadow 0.3s, transform 0.3s;
}
.map-wrap:hover {
  transform: perspective(1200px) rotateX(-1deg) translateY(-4px);
  box-shadow: 0 16px 0 rgba(0,0,0,0.1), 0 32px 80px rgba(28,58,74,0.18) !important;
}
.map-wrap iframe { display: block; filter: saturate(0.9) contrast(1.02); transition: filter 0.3s; }
.map-wrap:hover iframe { filter: saturate(1) contrast(1); }

/* Rodapé */
footer { position: relative; overflow: hidden; }
footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122,158,142,0.4), rgba(196,130,106,0.4), transparent);
}

.section-h2 { text-shadow: 0 2px 12px rgba(28,58,74,0.08); }


/* ══════════════════════════════════
   KEYFRAMES
══════════════════════════════════ */
@keyframes about-glow {
  0%   { transform: translateY(0) scale(1); opacity: 0.5; }
  100% { transform: translateY(-20px) scale(1.1); opacity: 1; }
}
@keyframes closing-sweep { 0% { left: -100%; } 50%, 100% { left: 140%; } }
@keyframes cta-glow-pulse {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 1;   transform: scale(1.15); }
}
@keyframes hero-breathe {
  0%   { transform: scale(1)    rotate(0deg);   opacity: 0.8; }
  100% { transform: scale(1.06) rotate(0.5deg); opacity: 1; }
}
@keyframes em-float {
  0%,100% { transform: translateY(0) skewX(0deg); }
  50%      { transform: translateY(-5px) skewX(-1deg); }
}
@keyframes shape-float-1 { 0%,100% { transform: rotate(15deg) translateY(0); } 50% { transform: rotate(20deg) translateY(-18px); } }
@keyframes shape-float-2 { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-12px) scale(1.05); } }
@keyframes shape-float-3 { 0%,100% { transform: rotate(45deg) translateY(0); opacity: 0.06; } 50% { transform: rotate(50deg) translateY(-10px); opacity: 0.1; } }
@keyframes modal-in { 0% { transform: scale(0.88) translateY(20px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes cta-pulse { 0% { transform: scale(1) translateX(0); } 100% { transform: scale(1.08) translateX(5%); } }
@keyframes ripple-out { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }
@keyframes spark-out { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }


/* ══════════════════════════════════
   EMPILHAMENTO — a folha seguinte sobe por cima da hero
══════════════════════════════════ */
.stack { --stack-r: 28px; --stack-deep: #0E1F26; }
.stack-cover {
  position: relative; z-index: 2;
  /* fundo só abaixo dos cantos arredondados: a hero não aparece enquanto as seções surgem */
  background: linear-gradient(transparent var(--stack-r), var(--cream-dark) var(--stack-r));
}
@media (prefers-reduced-motion: no-preference) {
  /* a hero fica sobre um fundo escuro: o que aparece nas laterais e atrás dos cantos
     é o mesmo tom para onde ela escurece, então hero e folha parecem do mesmo conjunto */
  .fx-js .stack { background: var(--stack-deep); }
  .fx-js .stack-cover > .trust-bar {
    position: relative;
    border-radius: var(--stack-r) var(--stack-r) 0 0;
    box-shadow: 0 -14px 40px rgba(14,31,38,0.35);
  }
  /* fio de luz na borda de cima da folha, acompanhando a curva */
  .fx-js .stack-cover > .trust-bar::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    border-top: 1px solid rgba(247,244,238,0.18);
  }
  /* a hero fica parada, recua e escurece enquanto a folha cobre (--hp vai de 0 a 1);
     os cantos dela chegam no mesmo raio da folha */
  .fx-js .stack > .whero {
    position: sticky; top: var(--stick-top, 0px); z-index: 0;
    transform: scale(calc(1 - var(--hp, 0) * 0.06)); transform-origin: 50% 100%;
    border-radius: calc(var(--hp, 0) * var(--stack-r));
  }
  .fx-js .stack > .whero::after {
    content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none;
    background: linear-gradient(to bottom, rgba(14,31,38,0.35), var(--stack-deep));
    opacity: calc(var(--hp, 0) * 0.85);
  }
}
@media (max-width: 640px) {
  .stack { --stack-r: 22px; }
}


/* ══════════════════════════════════
   PARA QUEM É ESTE ESPAÇO — cards empilhando
══════════════════════════════════ */
.identify .id-head .section-h2 { margin-bottom: 1rem; }
.id-lead { max-width: 36ch; margin-bottom: 2.5rem; font-size: 0.95rem; line-height: 1.7; color: var(--text-mid); }
.identify .id-grid { display: flex; flex-direction: column; gap: 22px; padding-bottom: 10vh; }
.identify .id-card {
  position: sticky; top: calc(var(--nav-h) + 28px + var(--i, 0) * 16px);
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 1.5rem; align-content: center;
  min-height: 210px; padding: 2.25rem 2.5rem;
  background: var(--cream); border: 1px solid rgba(28,58,74,0.1); border-radius: 18px;
  box-shadow: 0 -10px 34px rgba(28,58,74,0.08);
  /* --depth = quantos cards já estão por cima deste (o script calcula) */
  transform: scale(calc(1 - var(--depth, 0) * 0.04)); transform-origin: 50% 0;
  filter: brightness(calc(1 - var(--depth, 0) * 0.035));
}
.identify .id-card:nth-child(even) { background: #fff; }
.identify .id-card .id-icon { grid-row: span 2; width: 56px; height: 56px; margin: 0; font-size: 24px; }
.identify .id-card h3 { margin: 0.2rem 0 0.45rem; font-size: 1.35rem; }
.identify .id-card p { font-size: 0.92rem; }
@media (min-width: 1024px) {
  .identify {
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: 6vw; align-items: start;
  }
  .identify .id-head { position: sticky; top: calc(var(--nav-h) + 56px); }
  .identify .id-card { top: calc(var(--nav-h) + 56px + var(--i, 0) * 16px); }
}
@media (max-width: 640px) {
  .id-lead { margin-bottom: 1.75rem; }
  .identify .id-grid { gap: 14px; padding-bottom: 6vh; }
  .identify .id-card {
    top: calc(var(--nav-h) + 16px + var(--i, 0) * 10px);
    grid-template-columns: 44px minmax(0, 1fr); column-gap: 1rem; align-content: start;
    min-height: 0; padding: 1.4rem 1.25rem; border-radius: 16px;
  }
  .identify .id-card .id-icon { width: 44px; height: 44px; font-size: 20px; }
  .identify .id-card h3 { font-size: 1.1rem; margin-top: 0; }
  .identify .id-card p { font-size: 0.86rem; }
}
@media (prefers-reduced-motion: reduce) {
  .identify .id-card, .identify .id-head { position: static; transform: none; filter: none; }
}


/* ══════════════════════════════════
   COMO POSSO TE AJUDAR — carrossel que anda com a rolagem
══════════════════════════════════ */
.hs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.hs-head .section-h2 { margin-bottom: 0; }
.hs-progress { display: none; }
.service-card { display: flex; flex-direction: column; align-items: flex-start; background: var(--cream); }
.service-card .service-tag { margin-top: auto; }
.service-card p { margin-bottom: 1.25rem; }

/* .is-hscroll: o script liga quando cabe na tela e há movimento permitido */
.services.is-hscroll { padding: 0; }
.services.is-hscroll .hs-pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 1.5rem) 0 2rem;
}
.services.is-hscroll .hs-head { padding: 0 8vw; }
.services.is-hscroll .hs-progress {
  display: block; position: relative; flex: 0 0 180px; height: 3px; margin-bottom: 0.7rem;
  border-radius: 2px; background: rgba(28,58,74,0.12); overflow: hidden;
}
.hs-progress span {
  position: absolute; inset: 0; border-radius: 2px; background: var(--rust);
  transform: scaleX(var(--p, 0)); transform-origin: left;
}
.services.is-hscroll .services-grid {
  display: flex !important; width: max-content; gap: 24px;
  margin: 2.75rem 0 0; padding: 0 8vw; overflow: visible !important;
  scroll-snap-type: none; will-change: transform;
}
.services.is-hscroll .services-grid > * { flex: 0 0 auto; width: clamp(300px, 40vw, 600px); }
.services.is-hscroll .service-card { min-height: min(400px, 52vh); }
.services.is-hscroll .swipe-progress { display: none !important; }
/* até 768px a barra fixa do WhatsApp ocupa o pé da tela */
@media (max-width: 768px) {
  .services.is-hscroll .hs-pin { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  .services.is-hscroll .hs-pin { padding-top: calc(var(--nav-h) + 1rem); }
  .services.is-hscroll .hs-head { display: block; padding: 0 24px; }
  .services.is-hscroll .hs-progress { width: 38%; margin: 1.1rem 0 0; }
  .services.is-hscroll .services-grid { gap: 14px; margin-top: 1.5rem; padding: 0 24px; }
  .services.is-hscroll .services-grid > * { width: 84vw; }
  .services.is-hscroll .service-card { min-height: 0; padding: 1.6rem 1.4rem; }
}
/* celular baixinho: card mais enxuto para caber inteiro na tela */
@media (max-width: 640px) and (max-height: 720px) {
  .services.is-hscroll .section-h2 { font-size: 1.45rem; }
  .services.is-hscroll .services-grid { margin-top: 1rem; }
  .services.is-hscroll .service-card { padding: 1.25rem 1.2rem; }
  .services.is-hscroll .service-card p { font-size: 0.8rem; line-height: 1.55; margin-bottom: 0.9rem; }
}


/* ══════════════════════════════════
   MENOS MOVIMENTO
══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .reveal, .spec-card { opacity: 1 !important; transform: none !important; }
  .fx-js .reveal .section-h2, .fx-js .about.reveal .about-img-wrap { clip-path: none; transform: none; }
  .whero-bg, .whero-person, .whero-callout, .whero-copy { transform: none; opacity: 1; }
  /* o desenho das linhas da hero é curto e não desloca nada: fica ligado sempre */
  .whero-line { animation-duration: 2s !important; animation-delay: 0.3s !important; }
}