/* =====================================================================
   main.css — camada Althius
   Reúne o reset de estilos globais, as classes do smooth scroll (Lenis), a
   máscara do line-reveal e os estados iniciais das animações de entrada.
   O grosso (layout, tipografia, cores) vive em althius-base.css
   ===================================================================== */

/* =====================================================================
   ESCALA DE ESPAÇAMENTO (Fibonacci) — fonte única da verdade
   ---------------------------------------------------------------------
   Todo espaçamento vertical do site sai desta escala. Os números seguem
   Fibonacci (1,2,3,5,8,13) convertidos para rem, o que dá saltos que
   crescem na mesma proporção e por isso lêem como ritmo, não como valores
   soltos. Antes desta camada o site misturava 1.25, 3.5, 5.5, 7 e 10rem
   sem critério — ver o bloco "NORMALIZAÇÃO" abaixo.

   Regra prática: nunca escrever um valor de espaçamento cru. Use um token.
   ===================================================================== */
:root {
  --sp-3xs: 0.25rem;  /*   4px — micro (badge, tag) */
  --sp-2xs: 0.5rem;   /*   8px — entre linhas irmãs */
  --sp-xs:  1rem;     /*  16px — título → texto */
  --sp-sm:  2rem;     /*  32px — entre blocos de um card */
  --sp-md:  3rem;     /*  48px — entre grupos de conteúdo */
  --sp-lg:  5rem;     /*  80px — respiro interno de seção */
  --sp-xl:  8rem;     /* 128px — RITMO ENTRE SEÇÕES */
  --sp-2xl: 13rem;    /* 208px — separação máxima */
}

/* ---- NORMALIZAÇÃO dos utilitários do Webflow ----
   O Webflow define a própria escala (10rem de seção, spacer-xxhuge 10rem).
   Como main.css carrega depois, reancoramos esses utilitários na escala
   acima em vez de sair caçando cada uso no HTML. */
.padding-section-large {
  grid-column-gap: var(--sp-xl);
  grid-row-gap: var(--sp-xl);
  padding-top: var(--sp-xl);
  padding-bottom: var(--sp-xl);
}
.padding-section-medium { padding-top: var(--sp-lg); padding-bottom: var(--sp-lg); }
.padding-section-small  { padding-top: var(--sp-md); padding-bottom: var(--sp-md); }

.spacer-small   { padding-top: var(--sp-xs); }
.spacer-medium  { padding-top: var(--sp-sm); }
.spacer-large   { padding-top: var(--sp-md); }
.spacer-xlarge  { padding-top: var(--sp-md); }
.spacer-xxlarge { padding-top: var(--sp-lg); }
.spacer-huge    { padding-top: var(--sp-lg); }
.spacer-xhuge   { padding-top: var(--sp-xl); }
.spacer-xxhuge  { padding-top: var(--sp-xl); }
/* O Webflow derruba o spacer do rodapé pra 4rem no tablet/mobile — valor que
   não existe na escala. Recolocamos no degrau equivalente (--sp-lg). */
@media screen and (max-width: 991px) {
  .spacer-xxhuge.is-footer { padding-top: var(--sp-lg); }
}

/* Variantes de seção: mantêm a intenção original (hero colado no topo,
   CTA sem respiro duplicado contra o footer) mas com valores da escala. */
.padding-section-large.is-home-hero    { padding-top: var(--sp-sm); padding-bottom: var(--sp-lg); }
/* Sobre: um degrau abaixo do ritmo de seção pra o bloco não ficar baixo
   demais contra a faixa da animação logo abaixo. */
.padding-section-large.is-about-hero   { padding-top: var(--sp-lg); padding-bottom: 0; }
.padding-section-large.is-hero-service { padding-top: var(--sp-xl); padding-bottom: var(--sp-xl); }
.padding-section-large.is-about-cta    { padding-top: var(--sp-lg); padding-bottom: var(--sp-lg); }
.padding-section-large.clear-bot       { padding-bottom: 0; }

/* ---- Webflow global-styles reset (from original head) ---- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
  outline: 0.125rem solid #4d65ff;
  outline-offset: 0.125rem;
}
.w-richtext > :not(div):first-child,
.w-richtext > div:first-child > :first-child { margin-top: 0 !important; }
.w-richtext > :last-child,
.w-richtext ol li:last-child,
.w-richtext ul li:last-child { margin-bottom: 0 !important; }
.pointer-events-off { pointer-events: none; }
.pointer-events-on  { pointer-events: auto; }
.container-medium, .container-small, .container-large {
  margin-right: auto !important;
  margin-left: auto !important;
}
.hide { display: none !important; }
@media screen and (max-width: 991px) { .hide, .hide-tablet { display: none !important; } }
@media screen and (max-width: 767px) { .hide-mobile-landscape { display: none !important; } }
@media screen and (max-width: 479px) { .hide-mobile { display: none !important; } }

/* ---- Lenis smooth scroll ---- */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ---- Line-by-line reveal mask (founder quote, SplitType) ---- */
.line { position: relative; }
.line-mask {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(12, 13, 15, 1);
  opacity: 0.75;
  height: 100%;
  width: 100%;
  z-index: 2;
}

/* =====================================================================
   Entrance-animation INITIAL STATES
   These mirror the Webflow IX2 "page load / scroll into view" reveals.
   GSAP (main.js) animates them to their resting state. Guarded behind
   .js so the page is fully visible if scripting is disabled.
   ===================================================================== */
/* O :not(.is-revealed) é essencial. As tweens terminam com clearProps:"transform",
   que apaga o transform inline — sem este guard o elemento voltava a obedecer a
   regra abaixo e CAÍA 4rem depois de já ter animado até o lugar certo. O JS
   adiciona .is-revealed ao fim de cada tween, desligando o estado inicial. */
@media (min-width: 992px) {
  .js [data-anim="hero"]:not(.is-revealed),
  .js [data-anim="reveal"]:not(.is-revealed) {
    opacity: 0;
    transform: translate3d(0, 4rem, 0);
  }
}

/* Hero scroll indicator: hidden by default; JS adds .is-visible only while
   at the top (fades via CSS transition). Being position:fixed, it must never
   linger over the sections below. */
.js #hero_scroll {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.js #hero_scroll.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.hero_scroll.is-hero {
  background-image: none;
  background-color: transparent;
}

/* Nav background starts transparent; JS fades it in on scroll */
.js .nav-background { opacity: 0; }

/* Splash headline starts collapsed (matches .splash_text transform: scale(0)) */
.js .splash_text.gradient_text-l-bg { transform: scale(0); }

/* Splash graphic pins natively while scrubbing through the tall section */
@media (min-width: 992px) {
  .js .splash_item { position: sticky; top: 0; height: 100vh; }
}

/* Splash background PNGs are the original multicolor dot-ring layers. With the
   custom canvas ring now providing the graphic, these overlap it at mismatched
   radii and read as busy/dim extra rings — so hide them and let the single
   clean orange canvas ring stand on its own. */
.js .splash-image {
  display: none;
}

/* Brands + "Althius em números" sits inside .service_list, AFTER the three
   sticky (150vh) service cards. The last card stays pinned to top:0 until the
   whole list ends, so this block scrolls up OVER it. In the original it carried
   an opaque dark background (from the Webflow-only `.edit` class, stripped at
   runtime); without it the pinned card shows through. Restore the opaque
   background so the section cleanly covers the cards as it scrolls in. */
.brand-section.is-service {
  background-color: var(--bg-dark);
  position: relative;
  z-index: 2;
}

/* The original .text-wrapper is position:fixed and was shown/hidden by a
   Webflow IX2 scroll interaction. Without that engine we bind it to the
   (sticky, bounded) splash_item instead, so the headline scrolls away with
   the splash graphic rather than staying fixed over later sections. */
.js .text-wrapper {
  position: absolute;
  inset: 0;
  z-index: 9;
}

/* Reviews title reveal: the section title sits directly above the first review
   row (only ~48px gap). The default reveal starts elements 4rem (64px) below
   their resting spot, which briefly pushes the title down INTO the first row.
   Use a smaller offset here so it clears the row at every point of the tween. */
@media (min-width: 992px) {
  .js .review_heading [data-anim="reveal"]:not(.is-revealed) {
    transform: translate3d(0, 1.5rem, 0);
  }
}

/* =====================================================================
   TYPE SYSTEM — Althius
   Archivo for display/section/sub/body · JetBrains Mono for labels/eyebrows.
   Loaded after althius-base.css, so equal-specificity rules win here.
   ROLE      FAMILY · WEIGHT            USE
   DISPLAY   Archivo 800                Hero · brand      (h1, splash, footer)
   SECTION   Archivo 700                Section titles    (h2)
   SUB       Archivo 600               Subtitles · cards (h3–h6)
   BODY      Archivo 400               Paragraphs · text (body, p)
   LABEL/EYEBROW  JetBrains Mono 500   Tags · labels · numbering
   ===================================================================== */
:root { --font-display: "Archivo", sans-serif; --font-mono: "JetBrains Mono", monospace; }

body { font-family: var(--font-display); font-weight: 400; }

/* DISPLAY 800 */
h1, .splash_text, h1.is-footer { font-family: var(--font-display); font-weight: 800; }

/* SECTION 700 */
h2, .heading-style-h2 { font-family: var(--font-display); font-weight: 700; }

/* SUB 600 */
h3, h4, h5, h6, .heading-style-h3, .faq_title h5, .footer_subtext { font-family: var(--font-display); font-weight: 600; }

/* BODY 400 */
p, .text-size-regular, .text-size-medium, .footer_link, .nav_link, .service_text, .review_head + div, .dropdown_hide-content p {
  font-family: var(--font-display);
  font-weight: 400;
}

/* LABEL · MONO / EYEBROW — JetBrains Mono 500 */
.text-style-allcaps,
.service_tag,
.service_tag .text-size-small,
.tag-btn,
.footer_nav-title,
.footer_coppyright .text-size-small,
.figures_item p,
.review_service .text-size-regular,
.review_toggle .text-size-regular {
  font-family: var(--font-mono) !important;
  font-weight: 500;
}

/* =====================================================================
   SERVICE CARDS — palette (black / white / orange #FF5A1F)
   Original cards were red / green / blue. Re-tone to the brand tri-palette,
   keeping each card's existing text/dots contrast. Only the light card's
   "MORE DETAILS" button is flipped to dark so it stays visible.
   ===================================================================== */
/* Corner decoration is now a canvas spiral galaxy — pull it onto the card and
   make it a tidy square so the galaxy core/arms read inside the corner. */
.service_item-dots {
  width: 28rem;
  height: 28rem;
  inset: -6rem -6rem auto auto;
}

.service_item.is-lead   { background-color: #FF5A1F; }   /* orange · white text */
.service_item.is-ecom   { background-color: #ECE7DE; color: var(--bg-dark); } /* light · black text */
.service_item.is-search { background-color: #16171A; }   /* near-black · white text */

/* Light (E-commerce) card: make the round CTA dark so it reads on off-white */
.service_item.is-ecom .service_btn {
  background-color: var(--bg-dark);
  color: var(--white);
}

/* ---- Partner reviews section spacing ----
   O ritmo cheio deixava ~160px de cinza vazio abaixo da última avaliação,
   porque a lista já termina com respiro próprio. Um degrau abaixo resolve. */
.review-section .padding-section-large {
  padding-bottom: var(--sp-lg);
}

/* ---- Footer copyright: left-aligned ----
   Original centres it via a 2-column grid AND the .text-size-small utility
   forces text-align:right. Collapse to a single left-aligned column and undo
   the right-align on the copyright line so it sits in the page's left corner. */
.footer_coppyright {
  grid-template-columns: 1fr;
  justify-items: start;
}
.footer_coppyright .text-size-small {
  text-align: left;
}

/* ---- Footer logo: Althius mark ----
   Kept as the source PNG's native solid black (no color inversion), per
   request; size it to roughly match the original 60x60 SVG mark. */
.footer_logo img.is-althius-mark {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

/* =====================================================================
   GRADIENT TEXT — orange tonal (#FF5A1F)
   Replaces the original multicolor text gradients (pink/blue/green/red) with
   an orange tonal sweep: light #FFB27A → base #FF5A1F → deep #C2410C.
   Base rules already set -webkit-text-fill-color:transparent + background-clip:
   text; we only swap background-image. Covers hero words, splash headline,
   footer "SCALE?", figures numbers, brand title spans and the founder quote.
   ===================================================================== */
.grdient_main {
  background-image: linear-gradient(100deg, #FFB27A, #FF5A1F 38%, #C2410C 70%, #FF8A50);
}
.gradient_text-l-bg {
  background-image: linear-gradient(100deg, #FF8A50, #FF5A1F 55%, #C2410C);
}
.gradient_text-d-bg,
.gradient_text-d-bg.is-txt,
.althius-gradient-text {
  background-image: linear-gradient(100deg, #FFB27A, #FF5A1F 55%, #C2410C);
  display: inline !important;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
/* Fix: background-clip:text clips the gradient to the glyph ink box, and the
   browser shaves the right side-bearing of the last glyph of an inline span
   (e.g. the "r" in "comprar"). box-decoration-break:clone gives each wrapped
   line its own background, and a tiny padding-right (cancelled by an equal
   negative margin so layout is unchanged) gives that last glyph room to render
   fully. Together they remove the clipped-letter artifact. */
.grdient_main,
.gradient_text-l-bg,
.gradient_text-d-bg,
.gradient_text-d-bg.is-txt,
.althius-gradient-text {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-right: 0.12em;
  margin-right: -0.12em;
}

/* ---- Althius logo (horizontal PNG lockup, ~4:1) ----
   Size by height so it stays compact like the original wordmark; the black
   PNG background blends into the dark nav. */
.logo-image.is-althius {
  width: auto !important;
  height: 3.2rem;
}
@media screen and (max-width: 479px) {
  .logo-image.is-althius { height: 2.6rem; }
}

/* ---- Review tag button (.tag-btn) hover-fill effect ----
   Webflow's original slides a background PNG (300x153, aspect ~0.51) from
   250% up to 0% on hover. At this button's actual size (~92x38px) the image
   scales to ~47px tall at 100% width — TALLER than the 38px button — so the
   250% offset can't push it fully out of view: it still covers the top ~64%
   of the pill at rest, cutting the label in half. That's the bug.
   Fix: drop the fragile percentage-based image slide and use a solid-color
   pseudo-element instead, which fills correctly at any button size. */
.tag-btn {
  background-image: none;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.tag-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--bg-dark);
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  z-index: 0;
}
.tag-btn:hover::before {
  transform: translateY(0%);
}
.tag-btn > * {
  position: relative;
  z-index: 1;
}

/* ---- Founder quote: two photos side by side ----
   .quote_human-photo was built for a single centered avatar; wrap two of
   them in a row so both founders show, still centered above their names. */
.quote_human-photos {
  display: flex;
  justify-content: center;
  gap: var(--sp-2xs);
  margin-bottom: var(--sp-xs);
}
.quote_human-photos .quote_human-photo {
  margin-bottom: 0;
}
/* Kauê's source photo is a tall vertical portrait with the face in the
   upper third — recenter the crop on the face instead of the default
   middle (which would land on his chest/mug). Renan's is already a
   head-centered square portrait, so it needs no override. */
.quote_human-photo.is-kaue .image-cover {
  object-position: 50% 7%;
  transform: scale(2.15);
}

/* ---- Services hero graphic fix ----
   .service_elipse is 270rem (a huge dark radial-gradient vignette); the
   `is-smaller` class only swaps the gradient, NOT the size, so it overflows far
   to the left and its dark edge covers the right half of the hero heading —
   making "construída sobre" fade into black (the "hero cut off" bug). Contain
   the vignette to the dots-graphic on the right so it stops touching the copy. */
.hero-section.is-service .service_elipse.is-smaller {
  width: 100%;
  height: 100%;
  transform: none;
  inset: 0;
}
/* Amplified dots graphic on the right, clear of the heading column, with a
   slow continuous spin. Only the dots image rotates — the elipse vignette and
   overlay stay put so the circular fade stays fixed. */
.hero-section.is-service .hero_iteract {
  width: 62%;
  inset: -14% -8% auto auto;
  transform: scale(1);
}
.hero-section.is-service .service_dots-img {
  animation: svc-dots-spin 48s linear infinite;
  will-change: transform;
}
@keyframes svc-dots-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-section.is-service .service_dots-img { animation: none; }
}

/* ---- Services timeline: orange progress fill ----
   Replaces the original green/red/blue fixed progress bars (hidden by JS) with
   a single orange fill that grows down the track as you scroll the services. */
.timeline_progress {
  overflow: hidden;
}
.timeline_progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background-image: linear-gradient(to bottom, #FFB27A, #FF5A1F 55%, #C2410C);
  border-radius: 2rem;
}

/* ---- Mobile burger → X transform ---- */
.nav_burger-line { transition: transform .3s ease, opacity .3s ease; }
.nav_burger.is-active .nav_burger-line.is-1 { transform: translateY(.3125rem) rotate(45deg); }
.nav_burger.is-active .nav_burger-line.is-2 { opacity: 0; }
.nav_burger.is-active .nav_burger-line.is-3 { transform: translateY(-.3125rem) rotate(-45deg); }

/* ---- Hero: descola do menu fixo sem empurrar o conteúdo pra baixo ---- */
.hero-section {
  padding-top: var(--sp-md);
}
/* O padding-top do hero da home vem do bloco de normalização (--sp-sm).
   No mobile ele encolhe um degrau porque a altura de tela é o recurso escasso. */
@media screen and (max-width: 767px) {
  .padding-section-large.is-home-hero {
    padding-top: var(--sp-xs);
  }
}

/* ---- Hero text styling (more compact & less bold) ---- */
.hero_content h1 {
  font-weight: 400; /* Reduz o Bold de 500 para 400 (Regular) */
  font-size: 3.5rem; /* Mais compacto (era 4rem) */
  line-height: 1.05; /* Menor altura de linha */
  letter-spacing: -0.03em; /* Espaçamento de letras mais compacto */
}

@media screen and (max-width: 767px) {
  .hero_content h1 {
    font-size: 2.5rem; /* Proporcional para telas mobile (era 3rem) */
  }
}

/* ---- Splash text styling (less bold / thinner) ---- */
.splash_text {
  font-weight: 400; /* Reduz o bold de 800 para 400 (Regular) */
  display: inline-block !important;
  background-image: linear-gradient(100deg, #FFB27A, #FF5A1F 50%, #C2410C) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Reduced-motion: show everything, no transforms */
@media (prefers-reduced-motion: reduce) {
  .js [data-anim="hero"],
  .js [data-anim="reveal"],
  .js #hero_scroll,
  .js .nav-background { opacity: 1 !important; transform: none !important; }
  .js .splash_text.gradient_text-l-bg { transform: scale(1) !important; }
}

/* ---- Service card border clipping fix ---- */
/* Prevent decorative dots from bleeding outside rounded card borders */
.service_card1,
.service_card2,
.service_card3 {
  overflow: hidden;
  border-radius: 1.25rem;
}

.service_item {
  overflow: hidden;
  border-radius: 1.25rem;
}

/* Constrain the dots overlay so it doesn't escape the card boundaries */
.service_item-dots {
  overflow: hidden;
  pointer-events: none;
}

/* Make brand title thinner */
.brand_title {
  font-weight: 400;
}

/* Reviews: o respiro acima vinha de um override de 5rem que furava o ritmo.
   Agora usa o mesmo --sp-xl das demais seções (vem da normalização). */

/* Título → primeira avaliação: um degrau abaixo do ritmo de grupo, pra
   o título ler como preso à lista e não como bloco solto. */
.review_heading .container-medium.padding-large {
  padding-bottom: var(--sp-sm);
}

/* ====================================================================
   Services page — unified orange theme (#FF5A1F)
   ==================================================================== */

/* Progress-fill gradient: pure orange shades */
.timeline_progress-fill {
  background-image: linear-gradient(
    to bottom,
    #FF8A50 0%,
    #FF5A1F 50%,
    #D23B00 100%
  ) !important;
}

/* Progress bars (fixed, used by JS) */
.timeline_progress-bar.is-service.is-1,
.timeline_progress-bar.is-service,
.timeline_progress-bar.is-service.is-3 {
  background-image: linear-gradient(to bottom, #FF5A1F, #FF5A1F) !important;
}

/* Circle labels on the left (sticky) */
.timeline_circle-text.is-timeline-text {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  opacity: 0.15;
}

/* Timeline circle markers */
.timeline_circle.is-service {
  background-color: #ffffff !important;
  box-shadow: 0 0 16px 3px rgba(255, 255, 255, 0.3) !important;
  opacity: 0.15;
}

/* Main Section H2 Headings: Solid White */
#lead h2,
#gtm h2,
#suporte h2 {
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

/* Small grid titles (subtítulos dos elementos) */
.service_grid-title p {
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #FF5A1F !important;
  color: #FF5A1F !important;
}

/* SVG icons next to the grid titles: white */
.service_grid-title img {
  filter: brightness(0) invert(1) !important;
}

/* Motion Graphic top accent glows: orange */
/* Hide the orange neon strip on all motion wrappers (per request) */
.svc-motion-accent {
  display: none !important;
}

/* ---- CTA section: fix button width + spacing ---- */
.cta_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.cta_content h2 {
  margin-bottom: var(--sp-xs);
}
.cta_content p {
  margin-bottom: var(--sp-sm);
}
.cta_content .button {
  width: auto !important;
  align-self: center;
}

/* ====================================================================
   Service Motion Graphics — autoplay on scroll
   ==================================================================== */

.svc-motion-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1.25rem;
  overflow: hidden;
  background: #080808;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -1px 2px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 32px 80px rgba(0, 0, 0, 0.7),
    0 0 15px rgba(255, 255, 255, 0.08);
  margin-bottom: var(--sp-md);
  /* Entrance: starts slightly scaled down + invisible */
  opacity: 0;
  transform: translateY(1.5rem) scale(0.98);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
.svc-motion-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1.25rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
  z-index: 3;
}
.svc-motion-wrapper:hover {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    inset 0 -1px 2px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 32px 80px rgba(0, 0, 0, 0.8),
    0 0 25px rgba(255, 255, 255, 0.15);
}

/* Class added by IntersectionObserver when in viewport */
.svc-motion-wrapper.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Coloured glow strip at the top matching the section accent colour */
.svc-motion-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
  background: var(--accent, #FF5A1F);
  box-shadow: 0 0 32px 6px var(--accent, #FF5A1F);
  pointer-events: none;
}

/* The video itself fills the wrapper. */
.svc-motion-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Bigger, more prominent motion videos on desktop — AND everything else in the
   column (heading, subhead/description, feature-grid icons+text, CTA block)
   widens along with it, so the whole content column stays aligned to one
   consistent left/right edge instead of the video floating 159px further left
   than the title/text above and below it.
   .timeline_item.is-service has a FIXED 10rem column-gap between the circle/dot
   column and the text column (regardless of viewport width) — reclaiming that
   gap via negative margin on the whole .service_title-info column always lands
   its left edge exactly where the circle column ends, so it can never collide
   with the sticky dot/label. This widens everything ~19% without touching the
   tablet/mobile layout, where the gap collapses to 0 and this trick would no
   longer be safe. */
@media (min-width: 992px) {
  .service_title-info {
    width: calc(100% + 10rem);
    margin-left: -10rem;
  }
}

/* Topo da timeline de serviços: aqui o spacer encosta num título que já
   traz respiro próprio, então fica um degrau abaixo do ritmo de seção.
   Antes era 2rem cru contra 10rem do mesmo .spacer-xxhuge em outras páginas
   — mesma classe com valores incompatíveis. */
#timeline.section-timeline .spacer-xxhuge {
  padding-top: var(--sp-md);
}

/* Recolor the services hero dots graphic to vibrant orange (#FF5A1F) */
.service_dots-img {
  filter: sepia(1) saturate(8) hue-rotate(340deg) brightness(0.9) contrast(1.2) !important;
}

/* Adjust contact page heading letter spacing to separate letters */
.contact_h1 {
  letter-spacing: 0.02em !important;
}

/* Contact buttons layout styling */
.contact-btn-group {
  display: flex;
  gap: var(--sp-xs);
  justify-content: center;
  margin-top: var(--sp-sm);
  flex-wrap: wrap;
}

/* ====================================================================
   Privacy Policy Modal / Popup
   ==================================================================== */
.modal-wrapper {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.modal-card {
  background-color: #16171a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.25rem;
  padding: var(--sp-md) var(--sp-sm);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 30px 80px rgba(0, 0, 0, 0.9);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: var(--sp-xs);
  margin-bottom: var(--sp-sm);
}

.modal-title {
  font-family: 'Archivo', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #FF5A1F;
}

.modal-close {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s ease;
}
.modal-close:hover {
  color: #FF5A1F;
}

.modal-body {
  flex: 1 1 auto;      /* ocupa o espaço restante do card (80vh) e rola dentro */
  min-height: 0;       /* sem isto, um filho flex não encolhe e a rolagem some */
  overflow-y: auto;
  overscroll-behavior: contain;         /* não propaga o scroll pro fundo no mobile */
  -webkit-overflow-scrolling: touch;    /* rolagem com inércia no iOS */
  padding-right: var(--sp-2xs);
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--sp-sm);
}

/* Trava a rolagem da página enquanto o popup está aberto. lenis.stop() não
   segura o scroll nativo por toque no mobile, então o fundo rolava atrás. */
html.modal-lock, html.modal-lock body { overflow: hidden !important; }

.modal-body p {
  margin-bottom: var(--sp-xs);
}

.modal-body p strong {
  color: #ffffff;
}

/* Custom scrollbar for modal body */
.modal-body::-webkit-scrollbar {
  width: 4px;
}
.modal-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}
.modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--sp-xs);
  display: flex;
  justify-content: flex-end;
}

.button.is-modal {
  width: auto !important;
}

/* Fix services hero text being cut off by the overlapping background graphics/ellipse */
.hero_content.is-service {
  position: relative;
  z-index: 5;
}

/* Adjust navigation menu links closer to the contact button */
@media screen and (min-width: 992px) {
  .nav_menu {
    grid-column-gap: var(--sp-sm) !important;
    column-gap: var(--sp-sm) !important;
  }
}

/* ====================================================================
   Accordion fix (FAQ + Reviews) — closed by default via CSS
   ====================================================================
   althius-base.css defines `.dropdown_hide { height: auto; overflow:
   hidden; }` — OPEN by default. The original Webflow site relied on the
   IX2 interaction engine to apply the collapsed state at runtime. Our
   GSAP port (initFaq/initReviews in main.js) is now the only thing that
   collapses these panels, and it only runs after DOMContentLoaded — on
   mobile, where JS often lags behind first paint, there's a real window
   where EVERY FAQ answer and EVERY review renders fully expanded at
   once, spilling into and overlapping the content below them (reported
   as "coisas coladas, quebradas uma em cima da outra").
   Fix: collapse by default in CSS, so the resting state is correct from
   the very first paint — JS only needs to handle the open/close
   animation on top of this, not establish the initial state. */
.dropdown_hide {
  height: 0;
}

/* ====================================================================
   About Page — Sections
   ==================================================================== */

/* Lottie Animation Band */
.about_animation-section {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-dark, #0c0d0f);
}
.about_video-wrapper {
  position: relative;
  width: 100%;
  height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.about_lottie-wrapp {
  width: 100%;
  height: 100%;
}
.lottie-opacity {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15%;
  background: linear-gradient(90deg, var(--bg-dark, #0c0d0f) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}
.lottie-opacity.is-right {
  left: auto;
  right: 0;
  background: linear-gradient(270deg, var(--bg-dark, #0c0d0f) 0%, transparent 100%);
}

/* About Brand Block */
.about-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  max-width: 52rem;
  margin-top: calc(var(--sp-md) * -1);
  padding-bottom: var(--sp-lg);
}
.about-wrap img {
  max-width: 180px;
}

/* "Por que a Althius existe": o Webflow dava 10rem/4rem, que deixava o título
   baixo e o texto colado na timeline. Agora usa o ritmo de seção nos dois
   lados. #id vence a specificity do .story-section.background-color-bgdark
   .z-index-2; o override mobile abaixo segue mandando pelo !important dele. */
#why-althius {
  padding-top: var(--sp-xl);
  padding-bottom: var(--sp-xl);
}

/* Timeline About variant: o trilho herda o cinza var(--line) do Webflow;
   aqui ele vira o gradiente laranja da marca. */
.section-timeline.is-about .timeline_progress {
  background-color: transparent;
  background-image: linear-gradient(180deg, #FFB27A 0%, #FF5A1F 50%, #C2410C 100%);
}

/* Benefits / Values Section */
.benefits-section {
  position: relative;
}
.benefits_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md) var(--sp-sm);
}
.benefits_item {
  display: flex;
  flex-direction: column;
}
.benefits_ic {
  margin-bottom: var(--sp-xs);
  width: 3rem;
  height: 3rem;
}
.benefits_ic svg {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 991px) {
  .benefits_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 479px) {
  .benefits_grid {
    grid-template-columns: 1fr;
  }
}

/* Team Section — a seção saiu do sobre.html, o CSS fica para uso futuro */
.team-grid {
  display: flex;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}
.team_slide {
  position: relative;
  display: flex;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #16171a;
  transition: width 0.5s ease;
}
.team_item-visible {
  flex-shrink: 0;
}
.team_item {
  display: flex;
  flex-direction: column;
}
.team_item-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1.15;
  width: 100%;
  border-radius: 0.75rem 0.75rem 0 0;
}
.team_item-photo img.team-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team_item-hover {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--sp-sm);
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}
.team_slide:hover .team_item-hover {
  opacity: 1;
}
.team_item-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  color: #fff;
}
.team_hover-ic {
  width: 1.25rem;
  height: auto;
}
.team_item-info {
  padding: 0 var(--sp-xs) var(--sp-sm);
  transition: opacity 0.3s ease;
}
.team_item-info h5 {
  margin-bottom: var(--sp-3xs);
}

/* Team Bio Hidden Panel */
.team_item-hiden {
  width: 0;
  overflow: hidden;
  transition: width 0.5s ease;
  flex-shrink: 0;
  display: flex !important;
}
.team_item-hiden.is-open {
  width: 24rem;
}
.team_item-content {
  padding: var(--sp-sm);
  width: 24rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
}
.team_item-content-name h3 {
  margin-bottom: var(--sp-3xs);
}
.team_item-content-name p {
  color: var(--secondary-gray, #999);
  font-size: 0.875rem;
}
.team_item-content > p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.875rem;
  line-height: 1.6;
}
.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s;
}
.close-btn:hover {
  color: #FF5A1F;
}

/* Responsive team */
@media screen and (min-width: 992px) {
  .team_item-visible {
    width: 22rem;
  }
}
@media screen and (max-width: 991px) {
  .team-grid {
    flex-direction: column;
  }
  .team_slide {
    flex-direction: column;
    width: 100% !important;
  }
  .team_item-visible {
    width: 100%;
  }
  .team_item-photo {
    aspect-ratio: 1 / 0.8;
  }
  .team_item-hiden, .team_item-hiden.is-open {
    width: 100% !important;
    height: auto;
  }
  .team_item-content {
    width: 100%;
  }
}

/* CTA Section */
.cta-section {
  position: relative;
}
.about-cta-block {
  padding: 0;
}
.grid_2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
  align-items: start;
}
.max-width-semilarge {
  max-width: 32rem;
}
.vertical-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media screen and (max-width: 767px) {
  .grid_2col {
    grid-template-columns: 1fr;
    gap: var(--sp-sm);
  }
}

/* is-about-hero e is-about-cta são definidos no bloco de normalização
   lá em cima — os overrides que existiam aqui (8/4 e 5/5) furavam a escala. */

/* Fix service grid item alignment */
.service_grid-item {
  text-align: left !important;
  align-items: flex-start !important;
}
.service_grid-title {
  justify-content: flex-start !important;
}

/* Decrease hero h1 font size slightly and make it responsive */
.hero_content h1 {
  font-size: 3.5rem;
  line-height: 1.15;
}
@media screen and (max-width: 991px) {
  .hero_content h1 {
    font-size: 2.8rem;
  }
}
@media screen and (max-width: 479px) {
  .hero_content h1 {
    font-size: 2.2rem;
  }
}

/* Mission downward arrow */
.mission-arrow-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: var(--sp-md);
  width: 100%;
}
.mission-down-arrow {
  animation: floatArrow 2.2s infinite ease-in-out;
  opacity: 0.85;
  filter: drop-shadow(0 0 8px rgba(255, 120, 61, 0.4));
  transition: all 0.3s ease;
}
.mission-down-arrow:hover {
  filter: drop-shadow(0 0 12px rgba(255, 120, 61, 0.8));
  opacity: 1;
}
@keyframes floatArrow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(12px);
  }
}

/* Distanciar o título "Como pensamos" dos ícones e grid de valores */
.benefits-section .is-benefits {
  margin-bottom: var(--sp-lg);
}

/* Ocultar o card expansível inline da equipe para evitar que ocupe espaço */
.team_item-hiden {
  display: none !important;
}

/* Splash downward scroll indicator */
.splash-arrow-container {
  -webkit-text-fill-color: initial !important;
  text-fill-color: initial !important;
  margin-top: var(--sp-sm);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.splash-down-arrow {
  animation: floatArrow 2.2s infinite ease-in-out;
  opacity: 0.85;
  filter: drop-shadow(0 0 8px rgba(255, 120, 61, 0.4));
  transition: all 0.3s ease;
}
.splash-down-arrow:hover {
  filter: drop-shadow(0 0 12px rgba(255, 120, 61, 0.8));
  opacity: 1;
}

/* ====================================================================
   AJUSTES MOBILE (≤ 767px)
   Correções de UX/UI pedidas: botão do hero, textos dos cards,
   overflow da timeline de serviços, e animação/timeline da página Sobre.
   ==================================================================== */

/* Versão curta dos textos dos cards da home: só aparece no mobile.
   No desktop mostramos o texto completo (.svc-desc-full). */
.svc-desc-mobile { display: none; }

@media screen and (max-width: 767px) {

  /* -- HOME: remove o botão "EXPLORE SUA ESCALA" abaixo da headline -- */
  .hero-section .hero_content > .button { display: none !important; }

  /* -- HOME: cards mostram o resumo curto no lugar do texto longo -- */
  .service_text .svc-desc-full { display: none !important; }
  .service_text .svc-desc-mobile { display: block !important; }

  /* -- SERVIÇOS: remove as frases que descem junto com as bolinhas
        (os rótulos rotacionados "Definição de ICP", etc.) -- */
  .timeline_circle-text.is-timeline-text { display: none !important; }

  /* -- SERVIÇOS: conteúdo da timeline não pode estourar a tela.
        A coluna de texto era `auto` (crescia até o max-content do
        vídeo/textos) — minmax(0,1fr) força ela a encolher e caber. -- */
  .timeline_item.is-service {
    grid-template-columns: 1.5rem minmax(0, 1fr) !important;
  }
  .timeline_right.is-service { min-width: 0 !important; }
  .service_title-info { width: 100% !important; }

  /* -- SERVIÇOS: títulos a 2.5rem (40px) tinham palavras longas
        ("personalizadas", "concorrência") que não cabiam em 375px e
        empurravam a página pro lado. Reduz a fonte pra caber e deixa
        palavras longas quebrarem se precisar. -- */
  #gtm h2, #lead h2, #suporte h2 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* -- SERVIÇOS: gráfico decorativo do hero (elipse + pontos) sangra
        pra fora da direita e criava scroll lateral. Clipa na seção. -- */
  .hero-section.is-service { overflow: hidden !important; }

  /* -- SERVIÇOS: remove a esfera de pontos animada do hero no mobile. -- */
  .hero-section.is-service .hero_iteract { display: none !important; }

  /* -- SOBRE: animação (Lottie) estava ampliada por DOIS scales somados
        (.about_video-wrapper scale 1.5 + .about_lottie-wrapp scale 2.5 ≈
        3.75x). Remove os dois e fixa uma altura real (o Lottie tem filho
        absoluto, então altura:auto colapsa a caixa pra 0). Resultado:
        faixa de largura total, sem zoom — igual ao PC. -- */
  .about_video-wrapper { transform: none !important; }
  .about_lottie-wrapp,
  .about_lottie-2 {
    transform: none !important;
    min-width: auto !important;
    width: 100% !important;
    height: 8rem !important;
  }

  /* -- SOBRE: linha do tempo estava quebrada — os 3 filhos (data,
        bolinha, conteúdo) caíam em colunas de 24px ilegíveis. Reorganiza
        em grid-areas: bolinha à esquerda, data+conteúdo empilhados. -- */
  .section-timeline.is-about .timeline_item {
    grid-template-columns: 1.5rem minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
    grid-template-areas:
      "dot date"
      "dot content";
    column-gap: var(--sp-xs);
    row-gap: var(--sp-2xs);
    align-items: start;
  }
  .section-timeline.is-about .timeline_left { grid-area: date; }
  .section-timeline.is-about .timeline_centre { grid-area: dot; }
  .section-timeline.is-about .timeline_right {
    grid-area: content;
    min-width: 0;
  }

  /* -- HOME: splash "Toda receita começa antes" estava torto. A margem
        auto herdada resolvia assimétrica junto do display:inline-block,
        jogando o texto ~25px pra direita. Força bloco centrado. -- */
  .js .splash_text {
    display: block !important;
    width: 90% !important;
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* -- HOME: botão circular "mais detalhes" dos cards estava grande
        demais (80px). Reduz o círculo e o texto pra harmonizar. -- */
  .service_btn {
    width: 3.5rem !important; min-width: 3.5rem !important; max-width: 3.5rem !important;
    height: 3.5rem !important; min-height: 3.5rem !important; max-height: 3.5rem !important;
  }
  .service_btn_text { font-size: 0.625rem !important; line-height: 1.15 !important; }

  /* -- MENU MOBILE: links Serviços/Sobre estavam a 32px, grandes demais. -- */
  .open-menu .nav_link.heading-style-h3 { font-size: 1.375rem !important; }

  /* -- SERVIÇOS (mobile): layout redesenhado pra destacar os vídeos.
        Remove a bolinha + rótulo rotacionado (corriam pela lateral e ficavam
        desalinhados com o vídeo full-width) e vira coluna única full-width.
        O trilho de progresso (.timeline_progress) continua — ver abaixo,
        reposicionado como uma linha fina na margem, fora da área de
        conteúdo, só pra indicar o progresso sem brigar com o layout. -- */
  .timeline_item.is-service .timeline_centre.is-service,
  .timeline_service-wrapper { display: none !important; }
  .timeline_item.is-service {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    padding-top: var(--sp-sm) !important;
    padding-bottom: var(--sp-sm) !important;
  }

  /* -- SERVIÇOS (mobile): linha do tempo fina, deslocada pra dentro da
        margem externa da página. `left` é relativo ao .timeline_component,
        que já começa alinhado com o conteúdo (x=20px/1.25rem da viewport) —
        um valor NEGATIVO puxa a linha pra fora desse ponto, para dentro da
        margem da página, deixando espaço antes do título/ícone/texto/vídeo. -- */
  .timeline_component.is-service .timeline_progress {
    left: -0.875rem !important;
    width: 0.15rem !important;
  }

  /* -- SERVIÇOS (mobile): vídeo vira o destaque — card enquadrado, cantos
        arredondados, sombra, e toque pra abrir em tela cheia (landscape). -- */
  .svc-motion-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    border-radius: 0.75rem !important;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55) !important;
    cursor: pointer;
  }
  /* dica visual "toque para ampliar" (injetada via JS só no mobile) */
  .svc-expand-hint {
    position: absolute;
    bottom: var(--sp-2xs);
    right: var(--sp-2xs);
    display: flex;
    align-items: center;
    gap: var(--sp-3xs);
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    padding: var(--sp-3xs) var(--sp-2xs);
    border-radius: 100rem;
    z-index: 4;
    pointer-events: none;
  }
  .svc-expand-hint svg { width: 0.8rem; height: 0.8rem; flex: none; }

  /* -- SERVIÇOS: título grande da CTA (perto do rodapé) reduzido. -- */
  .cta-section h2 { font-size: 1.75rem !important; line-height: 1.2 !important; }

  /* -- SOBRE: distância enorme entre a animação e "Por que a Althius
        existe" (~200px vazios na seção + 160px de padding-top). Encolhe
        a seção ao conteúdo e reduz o respiro. -- */
  .about_animation-section {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: var(--sp-xs) !important;
  }
  /* No mobile a seção cai dois degraus (8rem → 3rem): a tela é curta e o
     ritmo de desktop empurraria o título pra fora da primeira dobra. */
  #why-althius {
    padding-top: var(--sp-md) !important;
    padding-bottom: var(--sp-md) !important;
  }

  /* -- HERO (todas as páginas): no mobile o conteúdo colava no menu fixo
        (64px). O padding no container não bastava (a hero começa ~16px acima
        do topo). Empurra o conteúdo direto no .hero_content pra descolar. -- */
  .hero-section .hero_content { padding-top: var(--sp-md) !important; }
  /* Sobre já tinha respiro de sobra (~104px) — não empurra mais. */
  .padding-section-large.is-about-hero .hero_content { padding-top: 0 !important; }

  /* -- HERO: mostra o indicador "Role para baixo" no mobile (o Webflow
        escondia em tablet/mobile) — exceto em Sobre, onde foi removido a
        pedido (o Webflow já esconde por padrão nesse breakpoint, então
        simplesmente não sobrescrevemos aqui). -- */
  .hero_scroll.is-hero,
  .hero_scroll.is-service {
    display: flex !important;
  }
  .hero_scroll.is-about { display: none !important; }

  /* -- SERVIÇOS: efeito de scroll "guia" — ao entrar na tela, cada bloco de
        serviço revela título/descrição/features/CTA em sequência, acompanhando
        a entrada do vídeo. O estado inicial (invisível) só vale quando o JS
        marca .svc-reveal-ready; sem JS/reduced-motion, tudo já aparece. -- */
  .timeline_item.is-service.svc-reveal-ready .service_title-info > *:not(.svc-motion-wrapper) {
    opacity: 0;
    transform: translateY(1.5rem);
    transition:
      opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .timeline_item.is-service.is-revealed .service_title-info > *:not(.svc-motion-wrapper) {
    opacity: 1;
    transform: none;
  }
  .timeline_item.is-service.is-revealed .service_title-info > *:nth-child(2) { transition-delay: 0.08s; }
  .timeline_item.is-service.is-revealed .service_title-info > *:nth-child(4) { transition-delay: 0.16s; }
  .timeline_item.is-service.is-revealed .service_title-info > *:nth-child(5) { transition-delay: 0.24s; }

  /* -- MENU MOBILE: botão X para fechar (canto superior direito do overlay)
        e link "Início" pra voltar à home, adicionados antes de Serviços. -- */
  .open-menu { padding-top: var(--sp-sm); }
  .menu-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
  }
  .menu-close svg { width: 1.375rem; height: 1.375rem; }
}