/* /assets/css/main.css */
/* ==========================================================================
   Studio Artemis — main.css
   Figma: i23qiP70wQhTOjyhYLT9LM · Home desktop 8160:163
   ========================================================================== */

:root {
  /* Cores — variáveis do Figma (get_variable_defs 8160:163) */
  --gray-0: #ffffff;
  --gray-200: #cecece;
  --gray-300: #b5b5b5;
  --gray-400: #9d9d9d;
  --gray-500: #848485;
  --gray-800: #3a3a3c;
  --gray-900: #212123;
  --black-100: #111111;
  --black-200: #09090b;
  --blue-300: #87baff;
  --blue-400: #5499ff;
  --green-300: #93ffd0;
  --green-400: #5dffb8;
  --magenta-300: #e88fff;
  --orange-200: #ffd5c0;
  --orange-300: #ffb48e;
  --orange-400: #ff8c53;

  /* Tipografia */
  --font-display: "Exo", sans-serif;
  --font-body: "Cabin", sans-serif;
  --font-serif: "Instrument Serif", serif;

  /* Tokens estruturais — extraídos do Figma deste projeto (Fase 0.5) */
  --frame-w: 1440px;
  --content-w: 1376px;
  --section-px: clamp(16px, calc(32 / 1440 * 100vw), 32px); /* 32px exatos no frame 1440 */
  --section-py: 120px;
  --content-gap: 32px;

  /* Header fixo: 80px no topo (8165:2338), 60px após o scroll (8165:2339) */
  --header-h: 80px;
  --header-h-scrolled: 60px;
}

/* Mobile (frame 8635:1583, 375 de largura) — vale até 767px.
   Seções: respiro lateral 16 (o clamp de --section-px já dá 16) e vertical 60;
   header de 60 (8635:3579) também no estado inicial. */
@media (max-width: 767px) {
  :root {
    --section-py: 60px;
    --header-h: 60px;
  }
  .page-post { --header-h: 64px; } /* post: header com selo (8693:2102) */
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* âncoras (#estudos, abas do Blog) */

body {
  margin: 0;
  background: var(--black-200);
  color: var(--gray-0);
  font-family: var(--font-body);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty; /* sem palavra viúva no site todo (pedido do cliente); herdado por todo texto. Firefox: reforço no main.js */
}

main { padding-top: var(--header-h); overflow-x: clip; } /* altura do header fixo (estado inicial) · clip: rede contra rolagem lateral das entradas (não cria contêiner de rolagem, sticky continua) */
section[id] { scroll-margin-top: var(--header-h-scrolled); } /* âncoras (#estudos, abas do Blog) param logo abaixo do header fixo */
.is-preview main { padding-top: 0; } /* preview isolado de seção (tools/build.py --preview) */

p, h1, h2, h3 { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }

.container {
  width: 100%;
  max-width: calc(var(--content-w) + 2 * var(--section-px));
  margin-inline: auto;
  padding-inline: var(--section-px);
}

:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Componentes de seção compartilhados (padrão recorrente no Figma)
   - .eyebrow       → Instrument Serif italic 20/1.3 (ex.: 8183:975, 8195:1067)
   - .section-title → Exo SemiBold 40/1.2, trecho em <em> cinza (ex.: 8183:309, 8294:503)
   - .section-head  → coluna eyebrow + título, gap 16 (ex.: 8213:369, 8195:1064)
   - .body-lg       → Cabin 18/1.5 gray-300 (ex.: 8294:505)
   -------------------------------------------------------------------------- */
.section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

.eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: var(--gray-300);
}
.eyebrow--400 { color: var(--gray-400); }

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.2;
  color: var(--gray-0);
  text-wrap: pretty;
}
.section-title em { font-style: normal; color: var(--gray-500); }
.section-title--em-300 em { color: var(--gray-300); }
.section-title--em-400 em { color: var(--gray-400); }

.body-lg { font-size: 18px; line-height: 1.5; color: var(--gray-300); }

/* --------------------------------------------------------------------------
   Botão — componente (8160:172 / 8160:173)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 23px; /* 18/24 do Figma − 1px do stroke inside */
  border: 1px solid var(--gray-800);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--gray-0);
  background: transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { border-color: var(--gray-500); }
.btn--primary { background: var(--gray-0); color: var(--black-200); }
.btn--primary:hover { background: var(--gray-200); border-color: var(--gray-800); }

/* --------------------------------------------------------------------------
   Header (8165:2338) · versão scroll (8165:2339)
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--black-200);
  box-shadow: inset 0 -1px 0 var(--gray-900); /* stroke inside 1px */
  transition: height .25s ease, box-shadow .25s ease;
}
/* Após o scroll: fixo, sem stroke, logo e padding menores (py 16, logo 120×28) */
.site-header.is-scrolled { height: var(--header-h-scrolled); box-shadow: none; }
/* Barra: container (8165:2315 / 8635:3289) + botão "Menu" do mobile (8635:3577) */
.site-header__bar { display: flex; align-items: center; }
.site-header__inner {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__logo img { width: 137px; height: 32px; transition: width .25s ease, height .25s ease; }
.site-header.is-scrolled .site-header__logo img { width: 120px; height: 28px; }
.site-header__actions { display: flex; align-items: center; gap: 24px; }
.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav a,
.site-header__cta {
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--gray-0);
  transition: color .2s ease;
}
.site-nav a { font-weight: 400; }
.site-nav a:hover { color: var(--gray-300); }
.site-header__sep { width: 4px; height: 4px; background: var(--gray-500); }
.site-header__cta { font-weight: 600; }
.site-header__cta:hover { color: var(--gray-300); }

/* Variante Blog (8340:2124): logo sem ™ 125×32 + selo "BLOG" (8314:2527, gap 24); nav com "Início" */
.site-header__brand { display: flex; align-items: center; gap: 24px; }
.site-header__logo picture { display: block; }
.site-header--blog .site-header__logo img { width: 125px; height: 32px; }
.site-header--blog.is-scrolled .site-header__logo img { width: 109.375px; height: 28px; } /* mesma escala 32 → 28 da versão scroll (8165:2339) */
/* 8314:2542 · Tag: p 2/6, blue-300 · texto 8314:2526 Cabin Bold 12/1.3 maiúsculo black-200 */
.site-header__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  background: var(--blue-300);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--black-200);
}
.site-header__tag span { display: block; }

/* 768–1023: com a MktOps no menu (5 links; 6 no Blog, com "Início") os gaps de 24 não cabem — 16 em todas as variantes */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header__brand,
  .site-header__actions,
  .site-nav { gap: 16px; }
  /* texto do botão editável (Dados do site): se não couber, encolhe com reticências em vez de passar da tela */
  .site-header__actions { min-width: 0; }
  .site-header__cta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
/* 768–899 no Blog: logo + selo (192) + 6 links não cabem — o selo sai, como no celular */
@media (min-width: 768px) and (max-width: 899px) {
  .site-header--blog .site-header__tag { display: none; }
}
@media (min-width: 768px) and (max-width: 819px) {
  .site-header--blog .site-nav { gap: 12px; } /* 6 links: com 16 sobravam 5 px entre o logo e o menu em 768 */
}

/* Botão "Menu" e gaveta só existem no mobile (≤767) */
.site-header__toggle,
.site-header__drawer { display: none; }

/* Gaveta aberta: trava a rolagem da página */
html.has-menu-open,
html.has-menu-open body { overflow: hidden; }

/* --------------------------------------------------------------------------
   Header mobile (≤767) · 8635:3579 (375×60) · scroll 8662:2937 · menu 8662:2946
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* 8635:3579: p 16, logo 120×28 nos dois estados; stroke inferior só no topo (8662:2937 sem stroke) */
  .site-header__logo img,
  .site-header--blog .site-header__logo img,
  .site-header.is-scrolled .site-header__logo img { width: 120px; height: 28px; }
  .site-header__actions { display: none; } /* 8635:3291 (hidden) */
  /* Blog mobile 8673:4443 = instância do header da Home: logo com ™ (<source> do <picture>), sem selo */
  .site-header__tag { display: none; }

  /* Post mobile 8693:2102 "Header blog" (375×64): logo sem ™ 125×32 + selo, gap 16; rolando volta aos 60 do 8662:2937 */
  .site-header--tag-m .site-header__tag { display: flex; }
  .site-header--tag-m .site-header__brand { gap: 16px; }
  .site-header--tag-m:not(.is-scrolled) .site-header__logo img { width: 125px; height: 32px; }

  /* 8635:3577 / 8635:3568 · "Menu" Cabin Regular 18/1.5 */
  .site-header__toggle,
  .site-header__close {
    position: relative;
    display: block;
    flex: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-body);
    font-variation-settings: "wdth" 100;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--gray-0);
    cursor: pointer;
    transition: color .2s ease;
  }
  .site-header__toggle { min-width: 44px; text-align: right; transition: color .2s ease, opacity .3s ease; } /* caixa de texto 44×27 do Figma (texto à direita) */
  html.has-menu-open .site-header__toggle { opacity: 0; } /* com a gaveta aberta, "Fechar" substitui "Menu" (não vaza ao lado do painel) */
  .site-header__close { min-width: 51px; text-align: right; }  /* 8662:2952 · 51×27 */
  .site-header__toggle span { display: block; }
  .site-header__toggle::after,
  .site-header__close::after { content: ""; position: absolute; inset: -9px -8px; } /* área de toque ≥ 44px */
  .site-header__toggle:hover,
  .site-header__close:hover { color: var(--gray-300); }

  /* Gaveta (8662:2946): overlay cobrindo a altura da tela, entra da esquerda para a direita */
  .site-header__drawer {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    visibility: hidden;
    transition: visibility 0s linear .3s;
  }
  .site-header__drawer.is-open { visibility: visible; transition-delay: 0s; }
  .site-header__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--black-200) 60%, transparent);
    opacity: 0;
    transition: opacity .3s ease;
  }
  .site-header__drawer.is-open .site-header__backdrop { opacity: 1; }
  .site-header__panel {
    position: absolute;
    inset: 0 auto 0 0;
    width: min(325px, calc(100% - 50px)); /* 325 no frame de 375 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--black-100);
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
  }
  .site-header__drawer.is-open .site-header__panel { transform: none; }

  /* 8662:2947 · Close Button 325×60: p 16 + stroke inferior de 1 (no layout), "Fechar" à direita (8662:2952) */
  .site-header__panel-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px;
    border-bottom: 1px solid var(--gray-900);
  }

  /* 8662:2938 / 8662:2939 · links Cabin 16/1.5, gap 24, à direita */
  .site-header__menu {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px;
  }
  .site-header__menu a {
    position: relative;
    display: block;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    text-align: right;
    color: var(--gray-0);
    transition: color .2s ease;
  }
  .site-header__menu a::after { content: ""; position: absolute; inset: -10px 0; } /* área de toque 44px */
  .site-header__menu a:hover { color: var(--gray-300); }

  /* 8662:2965 · Email and Description: p 16, gap 8, stroke superior inside */
  .site-header__contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    box-shadow: inset 0 1px 0 var(--gray-900);
    text-align: right;
  }
  .site-header__contact-label { /* 8662:2966 · Instrument Serif Italic 18/1.3 */
    height: 23px;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    color: var(--gray-300);
  }
  .site-header__contact-email { /* 8662:2967 · Exo SemiBold 16/1.2 — clique copia o e-mail */
    position: relative;
    display: block;
    min-height: 23px; /* 23 do Figma; e-mail longo do Customizer quebra em vez de estourar a gaveta (320 → 238 úteis) */
    overflow-wrap: anywhere;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    color: var(--gray-0);
    transition: color .2s ease;
  }
  .site-header__contact-email::after { content: ""; position: absolute; inset: -11px 0; } /* área de toque 45px */
  .site-header__contact-email:hover { color: var(--gray-300); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__logo img,
  .site-header__toggle,
  .site-header__drawer,
  .site-header__backdrop,
  .site-header__panel { transition: none; }
}

/* Formulários: campo isca anti-spam (server/forms.py) — fora da tela e da leitura, robô preenche */
.form-isca { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* /assets/css/motion.css */
/* Studio Artemis — motion.css: estados e animações da biblioteca assets/js/motion.js (catálogo em MODEL.md › Motion).
   Tudo que esconde fica atrás de html.motion-on (ligado no <head> só com prefers-reduced-motion: no-preference)
   e some com .is-done: em repouso, sem JS, com movimento reduzido e na impressão a página é a do Figma.
   Só transform-like (translate/scale), opacity e clip-path; nada muda o tamanho da caixa (sem CLS). */

:root { --motion-ease: cubic-bezier(.25, .6, .3, 1); }

/* --------------------------------------------------------------------------
   Entradas — data-reveal (estado inicial só enquanto não entrou)
   -------------------------------------------------------------------------- */
.motion-on [data-reveal]:not(.is-in):not(.is-done) { opacity: 0; }
.motion-on [data-reveal="rise"]:not(.is-in):not(.is-done) { opacity: 1; translate: 0 32px; }
.motion-on [data-reveal="grow-x"]:not(.is-in):not(.is-done) { opacity: 1; scale: 0 1; }
.motion-on [data-reveal="grow-y"]:not(.is-in):not(.is-done) { opacity: 1; scale: 1 0; }

.motion-on [data-reveal].is-in { animation: m-up .9s var(--motion-ease) var(--m-delay, 0ms) both; }
.motion-on [data-reveal="diag"].is-in { animation-name: m-diag; }
.motion-on [data-reveal="fade"].is-in { animation-name: m-fade; animation-duration: .7s; }
.motion-on [data-reveal="pop"].is-in { animation-name: m-pop; animation-duration: .8s; }
.motion-on [data-reveal="rise"].is-in { animation-name: m-rise; animation-duration: 1.1s; }
.motion-on [data-reveal="grow-x"].is-in { animation-name: m-grow-x; }
.motion-on [data-reveal="grow-y"].is-in { animation-name: m-grow-y; }

[data-reveal="grow-x"] { transform-origin: left center; }
[data-reveal="grow-x"][data-origin="right"] { transform-origin: right center; }
[data-reveal="grow-x"][data-origin="center"] { transform-origin: center; }
[data-reveal="grow-y"] { transform-origin: center top; }
[data-reveal="grow-y"][data-origin="bottom"] { transform-origin: center bottom; }
[data-reveal="grow-y"][data-origin="center"] { transform-origin: center; }

@keyframes m-up { from { opacity: 0; translate: 0 24px; } }
@keyframes m-diag { from { opacity: 0; translate: -32px 24px; } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-pop { from { opacity: 0; scale: .9; } }
@keyframes m-rise { from { translate: 0 32px; } }
@keyframes m-grow-x { from { scale: 0 1; } }
@keyframes m-grow-y { from { scale: 1 0; } }

/* --------------------------------------------------------------------------
   Título por linhas — data-split="lines" (o JS fixa as quebras do repouso e devolve o HTML no fim)
   -------------------------------------------------------------------------- */
.motion-on [data-split]:not(.is-split):not(.is-done) { opacity: 0; }
.m-w {
  display: inline-block;
  vertical-align: top;
  overflow: clip;
  padding-bottom: .12em; /* respiro para os descendentes (g, p, ç) dentro da máscara */
  margin-bottom: -.12em;
}
.m-w__i { display: inline-block; }
.motion-on [data-split].is-split:not(.is-in) .m-w__i { translate: 0 110%; }
.motion-on [data-split].is-in .m-w__i {
  animation: m-line .9s var(--motion-ease) both;
  animation-delay: calc(var(--m-delay, 0ms) + var(--m-line, 0) * 80ms);
}
@keyframes m-line { from { translate: 0 110%; } }

/* --------------------------------------------------------------------------
   Topo da página — data-motion-start="load" sem esperar o motion.js
   O <head> liga html.motion-boot junto com o motion-on: a entrada do topo toca só com CSS desde a 1ª pintura.
   Antes, o topo ficava escondido até o motion.js (defer, depois de todo o HTML e CSS) e as fontes chegarem —
   3,5 a 4,5 s de tela preta numa 1ª visita. O motion.js marca esses itens como prontos e tira o motion-boot
   quando estas animações terminam; a repetição ao voltar à tela continua com o JS.
   Keyframes com "to" explícito: o estado escondido (opacity 0 etc.) é o valor de base durante a animação.
   -------------------------------------------------------------------------- */
.motion-boot [data-motion-start="load"] :is([data-reveal], [data-split]),
.motion-boot :is([data-reveal], [data-split])[data-motion-start="load"] {
  animation: m-load-up .8s var(--motion-ease) var(--m-load-delay, 120ms) both;
}
.motion-boot [data-motion-start="load"] [data-split],
.motion-boot [data-split][data-motion-start="load"] { --m-load-delay: 0ms; animation-duration: .9s; }
.motion-boot [data-motion-start="load"] [data-reveal="fade"],
.motion-boot [data-reveal="fade"][data-motion-start="load"] { --m-load-delay: 0ms; animation-name: m-load-fade; animation-duration: .7s; }
.motion-boot [data-motion-start="load"] [data-reveal="pop"],
.motion-boot [data-reveal="pop"][data-motion-start="load"] { animation-name: m-load-pop; }
.motion-boot [data-motion-start="load"] [data-reveal="rise"],
.motion-boot [data-reveal="rise"][data-motion-start="load"] { animation-name: m-load-rise; animation-duration: 1.1s; }
.motion-boot [data-motion-start="load"] [data-reveal="grow-x"],
.motion-boot [data-reveal="grow-x"][data-motion-start="load"] { animation-name: m-load-grow-x; }
.motion-boot [data-motion-start="load"] [data-reveal="grow-y"],
.motion-boot [data-reveal="grow-y"][data-motion-start="load"] { animation-name: m-load-grow-y; }
.motion-boot [data-motion-start="load"] [data-wipe],
.motion-boot [data-wipe][data-motion-start="load"] { animation: m-wipe 1s var(--motion-ease) var(--m-load-delay, 200ms) both; }

@keyframes m-load-up { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes m-load-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-load-pop { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes m-load-rise { from { opacity: 1; translate: 0 32px; } to { opacity: 1; translate: 0 0; } }
@keyframes m-load-grow-x { from { opacity: 1; scale: 0 1; } to { opacity: 1; scale: 1 1; } }
@keyframes m-load-grow-y { from { opacity: 1; scale: 1 0; } to { opacity: 1; scale: 1 1; } }

/* --------------------------------------------------------------------------
   Cortina — data-wipe (máscara que abre na direção pedida) · data-wipe-zoom assenta a 1ª imagem
   Máscara, não clip-path: no Chrome a IntersectionObserver aplica o clip-path do próprio alvo — com o recorte
   fechado o elemento contava como fora da tela e, depois de voltar ao início (repetição), nunca mais tocava.
   -------------------------------------------------------------------------- */
.motion-on [data-wipe] { --m-mpos: 0 0; --m-mfrom: 0% 100%; }        /* right: abre da esquerda para a direita */
.motion-on [data-wipe="left"] { --m-mpos: 100% 0; }
.motion-on [data-wipe="up"] { --m-mpos: 0 100%; --m-mfrom: 100% 0%; } /* abre de baixo para cima */
.motion-on [data-wipe="down"] { --m-mfrom: 100% 0%; }
.motion-on [data-wipe="out"] { --m-mpos: 50% 0; }                    /* abre do centro para as bordas */
.motion-on [data-wipe]:not(.is-done) {
  -webkit-mask: linear-gradient(#000, #000) var(--m-mpos) / var(--m-mfrom) no-repeat;
  mask: linear-gradient(#000, #000) var(--m-mpos) / var(--m-mfrom) no-repeat;
}
.motion-on [data-wipe].is-in { animation: m-wipe 1s var(--motion-ease) var(--m-delay, 0ms) both; }
.motion-on [data-wipe-zoom].is-in img { animation: m-settle 1.3s var(--motion-ease) var(--m-delay, 0ms) both; }

@keyframes m-wipe { to { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } }
@keyframes m-settle { from { scale: 1.06; } }

/* --------------------------------------------------------------------------
   Contador e digitação
   -------------------------------------------------------------------------- */
/* Contém o .m-sr (absolute): sem ancestral posicionado ele escapa do clip do main e alarga a página no celular */
[data-type], [data-count] { position: relative; }
.m-count { display: inline-block; text-align: right; }
.m-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.motion-on [data-type].is-typing-ready:not(.is-in) .m-c { opacity: 0; }
.motion-on [data-type].is-in .m-c {
  animation: m-fade .12s linear both;
  animation-delay: calc(var(--m-delay, 0ms) + var(--m-i, 0) * 18ms);
}

/* --------------------------------------------------------------------------
   Hover só em link e botão (Regra de hover)
   -------------------------------------------------------------------------- */
/* Botão: o rótulo sobe e a cópia (text-shadow) ocupa o lugar. A máscara tem a altura da linha do .btn (1,5em). */
.m-roll { display: inline-block; vertical-align: top; height: 1.5em; overflow: clip; }
.m-roll__in { display: block; text-shadow: 0 1.5em currentColor; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .m-roll__in { transition: translate .45s var(--motion-ease); }
  .btn:hover .m-roll__in,
  .btn:focus-visible .m-roll__in { translate: 0 -1.5em; }
}

/* Link de texto: sublinhado que cresce da esquerda (o link atual, aria-current, fica como no Figma) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.site-nav a, .site-header__cta, .site-footer__legal-links a, [data-hover="line"]):not([aria-current]) {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size .35s var(--motion-ease), color .2s ease;
  }
  :is(.site-nav a, .site-header__cta, .site-footer__legal-links a, [data-hover="line"]):not([aria-current]):hover {
    background-size: 100% 1px;
  }
}

/* --------------------------------------------------------------------------
   Menu do celular: os links chegam um por vez ao abrir a gaveta
   -------------------------------------------------------------------------- */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .site-header__drawer.is-open .site-header__menu a,
  .site-header__drawer.is-open .site-header__contact {
    animation: m-drawer .3s var(--motion-ease) both;
  }
  .site-header__drawer.is-open .site-header__menu a:nth-child(1) { animation-delay: .12s; }
  .site-header__drawer.is-open .site-header__menu a:nth-child(2) { animation-delay: .16s; }
  .site-header__drawer.is-open .site-header__menu a:nth-child(3) { animation-delay: .2s; }
  .site-header__drawer.is-open .site-header__menu a:nth-child(4) { animation-delay: .24s; }
  .site-header__drawer.is-open .site-header__menu a:nth-child(5) { animation-delay: .28s; }
  .site-header__drawer.is-open .site-header__menu a:nth-child(6) { animation-delay: .32s; }
  .site-header__drawer.is-open .site-header__menu a:nth-child(7) { animation-delay: .36s; }
  .site-header__drawer.is-open .site-header__contact { animation-delay: .4s; }
}
@keyframes m-drawer { from { opacity: 0; translate: -12px 0; } }

/* --------------------------------------------------------------------------
   Loops com tempo (data-loop): as seções ligam a animação infinita só com .is-looping
   -------------------------------------------------------------------------- */
.cta__status:not(.is-looping) .cta__led,
.newsletter__status:not(.is-looping) .newsletter__led { animation: none; } /* LED aceso (quadro do Figma) fora do tempo */
.cta__pattern.is-live:not(.is-looping) .cta__dash-row path:not(.is-lit) { animation: none; }

/* --------------------------------------------------------------------------
   Transição entre páginas (View Transitions entre documentos) — header parado, conteúdo em fade curto
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: m-vt-out .18s ease both; }
  ::view-transition-new(root) { animation: m-vt-in .26s var(--motion-ease) both; }
}
@keyframes m-vt-out { to { opacity: 0; } }
@keyframes m-vt-in { from { opacity: 0; translate: 0 8px; } }

/* --------------------------------------------------------------------------
   Impressão: tudo no repouso
   -------------------------------------------------------------------------- */
@media print {
  .motion-on [data-reveal],
  .motion-on [data-split],
  .motion-on [data-wipe],
  .motion-on [data-wipe] img,
  .motion-on .m-w__i,
  .motion-on .m-c { opacity: 1 !important; translate: none !important; scale: none !important; clip-path: none !important; -webkit-mask: none !important; mask: none !important; animation: none !important; }
}
/* /assets/css/sections/01-hero.css */
/* Seção 01 — Hero (Figma 8160:165) + Customer Logos (8160:446) */

/* --------------------------------------------------------------------------
   Hero (8160:165)
   -------------------------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-top: 32px;
  padding-bottom: var(--section-py);
}

.hero__main {
  position: relative;
  isolation: isolate;
  overflow: clip;
  height: 630px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero__row {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap; /* abaixo de ~990 os botões descem para baixo do texto */
  gap: 48px 32px;
  align-items: flex-end;
  justify-content: space-between;
}

/* 733 no Figma; entre 768 e 1439 encolhe até 480 antes de os botões quebrarem de linha */
.hero__text { flex: 1 1 480px; max-width: 733px; display: flex; flex-direction: column; gap: 32px; }
.hero__heading { display: flex; flex-direction: column; gap: 24px; }

.hero__eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.3;
  color: var(--gray-300);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 62px;
  line-height: 1.1;
  line-height: round(nearest, 1.1em, 1px); /* Figma arredonda 68.2 → 68 (caixa 204 = 3 linhas) */
  color: var(--gray-0);
}
.hero__title em { font-style: normal; color: var(--gray-500); }

.hero__lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--gray-300);
}

.hero__actions { display: flex; align-items: center; gap: 16px; }

/* Padrão de traços (8160:174) — 1440 de largura, centralizado no main */
.hero__pattern {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(50% - 0.5px);
  transform: translate(-50%, -50%);
  width: var(--frame-w);
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.hero__pattern-group { display: flex; flex-direction: column; gap: 15px; }
.hero__pattern-group--start { align-items: flex-start; }
.hero__pattern-group--end { align-items: flex-end; }
.hero__dash-row { height: 24px; }
.hero__dash-row svg { overflow: visible; }
/* --dx: o SVG exportado inclui a sangria do traço à esquerda — desloca só o desenho,
   e a caixa da linha fica no x do Figma (8635:1825/1845/1859 medem Δ 0 no mobile) */
.hero__dash-row > * { margin-left: var(--dx, 0px); }

.hero__dash-row path {
  opacity: var(--o, 1);
  transition: opacity .35s ease, stroke .35s ease;
}
.hero__pattern.is-live.is-blinking .hero__dash-row path { /* só com o data-loop ligado (01-hero.js) */
  animation: dash-blink var(--d, 4s) ease-in-out var(--delay, 0s) infinite;
}
.hero__pattern.is-live .hero__dash-row path.is-lit {
  animation: none;
  opacity: 1;
  stroke: var(--blue-300);
}
@keyframes dash-blink {
  0%, 100% { opacity: var(--o, 1); }
  50%      { opacity: calc(var(--o, 1) * .25); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__pattern.is-live .hero__dash-row path { animation: none; }
}

/* Entrada do h1 (motion.js, data-split): é o LCP — termina em até 0,9 s (0,6 s por linha, 40 ms entre linhas;
   com o atraso de 90 ms do grupo: 3 linhas no desktop = 0,77 s, 5 no celular = 0,85 s) */
.motion-on .hero__title.is-in .m-w__i {
  animation-duration: .6s;
  animation-delay: calc(var(--m-delay, 0ms) + var(--m-line, 0) * 40ms);
}

/* Logos de clientes (8160:446) */
.clients { display: flex; flex-direction: column; gap: 24px; }

.clients__grid {
  container-type: inline-size; /* os logos escalam pela largura da grade (cqi) fora do 1440 */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  box-shadow: inset 0 0 0 1px var(--gray-900); /* stroke inside — não soma altura */
  list-style: none;
  margin: 0;
  padding: 0;
}
.clients__cell {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  box-shadow: inset 0 -1px 0 var(--gray-900); /* strokes inside — não deslocam o logo */
}
.clients__cell:nth-child(2),
.clients__cell:nth-child(4) {
  box-shadow: inset 0 -1px 0 var(--gray-900), inset 1px 0 0 var(--gray-900), inset -1px 0 0 var(--gray-900);
}
.clients__logo { flex: none; object-fit: cover; }
/* Logo pintado de branco via máscara (ex.: Orsegups, original azul) — tamanho/offset inline */
.clients__logo--mask {
  display: block;
  background: var(--gray-0);
  -webkit-mask: var(--logo) center / 100% 100% no-repeat;
          mask: var(--logo) center / 100% 100% no-repeat;
}

.clients__pattern {
  grid-column: 1 / -1;
  position: relative;
  height: 64px;
}
.clients__pattern img {
  position: absolute;
  inset: -0.27% 0;
  width: 100%;
  height: 100.54%;
}
.clients__hatch { display: none; } /* hachura do mobile (ver bloco ≤767) */

.clients__caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.3;
  color: var(--gray-300);
  text-align: center;
}

/* 768–1439 — o layout de 1440 se adapta: os logos encolhem na proporção da grade
   (1376 no Figma). tan(atan2()) transforma a razão de larguras em número para o zoom. */
@media (min-width: 768px) and (max-width: 1439px) {
  .clients__logo { zoom: min(1, tan(atan2(100cqi, 1376px))); }
}

/* ==========================================================================
   Mobile ≤767 — Figma frame Mobile 8635:1583 · hero 8635:1586 (375 × 1154)
   De 320 a 767 o layout de 375 se estica: conteúdo = 100% − 2×16.
   ========================================================================== */
@media (max-width: 767px) {
  /* hero 8635:1586 — pt 32 · pb 60 (--section-py) · px 16 (--section-px) · gap 40 */
  .hero { gap: 40px; }

  /* main container 8635:1587 — 680 de altura com o conteúdo no rodapé; cresce se o texto quebrar mais (320) */
  .hero__main { height: auto; min-height: 680px; }

  /* Image Container 8635:1588 — texto e botões empilhados, gap 48 */
  .hero__row { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 48px; }
  .hero__text { flex: none; max-width: none; gap: 24px; } /* Main Text Container 8635:1589 */
  .hero__heading { gap: 16px; }             /* Heading 8635:1590 */

  /* 8635:1591 — Instrument Serif italic 18/1.3, caixa de 247 (quebra em 2 linhas) */
  .hero__eyebrow {
    max-width: 247px;
    font-size: 18px;
    line-height: round(nearest, 1.3em, 1px); /* Figma arredonda 23.4 → 23 (caixa 46 = 2 linhas) */
  }

  /* 8635:1592 — Exo SemiBold 32/1.2 */
  .hero__title {
    font-size: 32px;
    line-height: 1.2;
    line-height: round(nearest, 1.2em, 1px); /* 38.4 → 38 (caixa 114 = 3 linhas) */
  }

  /* 8635:1593 — Cabin 18/1.4 */
  .hero__lead {
    line-height: 1.4;
    line-height: round(nearest, 1.4em, 1px); /* 25.2 → 25 (caixa 125 = 5 linhas) */
  }

  /* Container buttons 8635:1594 — botões de largura total (343 × 60), gap 16 */
  .hero__actions { flex-direction: column; align-items: stretch; gap: 16px; }

  /* Pattern 8635:1597 — o mesmo padrão do desktop (mesmos SVGs) em escala 1134,834 / 1440,
     centrado (−0,5px) e colado no topo do main container */
  .hero__pattern {
    top: 0;
    left: calc(50% - .5px);
    transform: translateX(-50%) scale(.788079);
    transform-origin: 50% 0;
  }

  /* Customer Logos Container 8635:1870 — 2 colunas de 171 (sobra 1px à direita, como no Figma)
     + hachura de 32. Abaixo de 375 os logos encolhem junto com a grade (--logo-k). */
  .clients__grid {
    --logo-k: min(1px, 100cqi / 343); /* cqi resolve no logo, relativo a esta grade */
    display: flex;
    flex-wrap: wrap;
  }
  .clients__cell { width: calc(50% - .5px); height: 80px; } /* 8635:1871 … 8635:1900 */
  .clients__cell:nth-child(5) { box-shadow: inset -1px 0 0 var(--gray-900); } /* 8635:1900: só o stroke da direita */

  /* Tamanho do logo no mobile vem do <li> (--mw/--mh, px sem unidade) e precisa vencer
     o width/height/transform inline do desktop — por isso o !important */
  .clients__logo {
    width: calc(var(--mw) * var(--logo-k)) !important;
    height: calc(var(--mh) * var(--logo-k)) !important;
    transform: none !important;
  }

  /* Pattern 8635:1904 — traços de 24×64 a cada 12px, centrados e cortados em 32 de altura.
     Stroke de cima inside (box-shadow); os traços têm a mesma cor (gray-900). */
  .clients__pattern {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: clip;
    box-shadow: inset 0 1px 0 var(--gray-900);
  }
  .clients__pattern > img { display: none; }
  .clients__hatch { display: flex; flex: none; }
  .clients__hatch > i {
    flex: none;
    width: 24px;
    height: 64px;
    margin-right: -12px;
    background: url(/assets/images/01-hero/m-diagonal.svg) 50% 50% / 24.9363px 64.3511px no-repeat;
  }
  .clients__hatch > i:last-child { margin-right: 0; }
  .clients__hatch > .clients__hatch-line--narrow {
    width: 22px;
    background-image: url(/assets/images/01-hero/m-diagonal-narrow.svg);
    background-size: 22.9457px 64.3251px;
  }

  /* Customer Logos Description 8635:1988 — Instrument Serif italic 18/1.3 */
  .clients__caption {
    font-size: 18px;
    line-height: round(nearest, 1.3em, 1px); /* 23.4 → 23 (caixa 46 = 2 linhas) */
  }
}

/* Entrada do topo só com CSS (motion.css › motion-boot): logos e 2º botão em sequência, como o data-stagger fazia */
.motion-boot .hero__actions .btn + .btn { --m-load-delay: 200ms; }
.motion-boot .clients__cell:nth-child(1) .clients__logo { --m-load-delay: 250ms; }
.motion-boot .clients__cell:nth-child(2) .clients__logo { --m-load-delay: 320ms; }
.motion-boot .clients__cell:nth-child(3) .clients__logo { --m-load-delay: 390ms; }
.motion-boot .clients__cell:nth-child(4) .clients__logo { --m-load-delay: 460ms; }
.motion-boot .clients__cell:nth-child(5) .clients__logo { --m-load-delay: 530ms; }
/* /assets/css/sections/02-o-que-fazemos.css */
/* Seção 02 — O que fazemos (Figma 8183:302) */

.o-que-fazemos {
  background: var(--black-200);
  padding-block: var(--section-py);
  /* stroke inside top/bottom gray-900 — não soma altura */
  box-shadow: inset 0 1px 0 var(--gray-900), inset 0 -1px 0 var(--gray-900);
}

.o-que-fazemos__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--content-gap);
}

/* Coluna esquerda (8183:977): heading no topo, fundadores na base */
.o-que-fazemos__aside {
  flex: 1 0 0;
  min-width: 1px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px; /* respiro mínimo se o texto da direita encurtar (no Figma sobra 149px) */
}

.o-que-fazemos__heading { overflow-wrap: break-word; } /* 8213:369 */
.o-que-fazemos__eyebrow { align-self: stretch; }        /* 8183:975 — largura total da coluna */
.o-que-fazemos__title { width: 489px; max-width: 100%; } /* 8183:309 */

/* Founder Info (8213:357) */
.o-que-fazemos__founders {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Avatares 64px sobrepostos −16px (8213:358) */
.o-que-fazemos__avatars {
  display: flex;
  flex: none;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.o-que-fazemos__avatar {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  cursor: default;
}
.o-que-fazemos__avatar:not(:last-child) { margin-right: -16px; }
.o-que-fazemos__avatar img {
  position: absolute;
  top: -1.5625%;   /* imagem 66px com stroke de 1px fora da elipse de 64 */
  left: -1.5625%;
  width: 103.125%;
  height: 103.125%;
  max-width: none;
  border-radius: 50%;
  object-fit: cover; /* fotos trocadas no WP podem não ser quadradas */
}
/* Anel 1px black-200 (o mesmo já embutido nas fotos do Figma) — garante o recorte em fotos novas */
.o-que-fazemos__avatar::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--black-200);
  pointer-events: none;
}

/* Microinteração: nome acima do avatar no hover/foco */
.o-que-fazemos__name {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--black-100);
  box-shadow: inset 0 0 0 1px var(--gray-800);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--gray-0);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.o-que-fazemos__avatar:hover,
.o-que-fazemos__avatar:focus-visible { z-index: 2; }
.o-que-fazemos__avatar:hover .o-que-fazemos__name,
.o-que-fazemos__avatar:focus-visible .o-que-fazemos__name {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* Touch: o toque foca o avatar (tabindex) e mostra o nome.
   cursor: pointer faz o iOS Safari tratar o avatar como clicável e disparar o foco no toque. */
@media (hover: none) {
  .o-que-fazemos__avatar { cursor: pointer; }
  .o-que-fazemos__avatar:focus { z-index: 2; }
  .o-que-fazemos__avatar:focus .o-que-fazemos__name { opacity: 1; transform: translate(-50%, 0); }
}

/* 8244:1236 — Cabin SemiBold 18/1.5 branco */
.o-que-fazemos__caption {
  flex: none;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--gray-0);
  white-space: nowrap;
}

/* Texto longo (8183:974) — Cabin 18/1.5 gray-300, parágrafos com 16 de espaço */
.o-que-fazemos__body {
  flex: 1 0 0;
  min-width: 1px;
  overflow-wrap: break-word;
}
.o-que-fazemos__body p + p { margin-top: 16px; }
.o-que-fazemos__body strong { font-weight: 700; color: var(--gray-0); }

@media (prefers-reduced-motion: reduce) {
  .o-que-fazemos__name { transition: opacity .2s ease; transform: translate(-50%, 0); }
}

/* Abaixo do desktop: colunas empilhadas */
@media (max-width: 1023px) {
  .o-que-fazemos__inner { flex-direction: column; gap: 48px; }
  .o-que-fazemos__aside,
  .o-que-fazemos__body { flex: none; width: 100%; }
  .o-que-fazemos__aside { align-self: auto; }
  .o-que-fazemos__founders { flex-wrap: wrap; } /* legenda desce se não couber (evita scroll horizontal) */
}

/* --------------------------------------------------------------------------
   Mobile — Figma 8635:1990 (375 × 1096), vale até 767px
   Seção: coluna, px 16 (--section-px) · py 60 (--section-py) · gap 40
     8635:1991 Container (343 × 240): heading + fundadores, gap 32
       8635:1992 Heading: eyebrow 8635:1993 + título 8635:1994 (Exo 28/1.2), gap 16
       8635:1995 Founder Info: avatares 8635:1996 (187 = 4 × 64 − 3 × 23) + legenda 8635:1997 (fill), gap 16
     8635:1998 Texto (343 × 696): Cabin 18/1.5, parágrafos com 16 de espaço (herda do desktop)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .o-que-fazemos__inner { gap: 40px; }   /* 8635:1990 */
  .o-que-fazemos__aside { gap: 32px; }   /* 8635:1991 */

  /* 8635:1994 — largura total; o Figma arredonda a linha de 33,6 para 34px (3 linhas = 102) */
  .o-que-fazemos__title {
    width: auto;
    font-size: 28px;
    line-height: 1.2;
    line-height: round(nearest, 1.2em, 1px);
  }

  /* 8635:1996 — avatares mais sobrepostos: −23px em 375 (187 de largura). Abaixo de 375 a sobreposição
     cresce até −26px em 320 (178), para "Fundadores" (~90px) continuar ao lado dos avatares */
  .o-que-fazemos__avatar:not(:last-child) {
    margin-right: clamp(-26px, calc((100vw - 375px) * 3 / 55 - 23px), -23px);
  }

  /* 8635:1997 — legenda ocupa o resto da linha (140 em 375). Abaixo de 375 o texto quebra em mais
     linhas ao lado dos avatares (ex.: 360, 320); só desce para baixo deles abaixo de ~310px */
  .o-que-fazemos__caption { flex: 1 1 0; white-space: normal; }
}
/* /assets/css/sections/03-nossos-sistemas.css */
/* Seção 03 — Nossos sistemas (Figma 8294:500) */

.sistemas {
  /* Textura dos Description Blocks (8294:574/691/741/799): ponto 1px gray-200 a 4%, passo 4px */
  --sistemas-dot: color-mix(in srgb, var(--gray-200) 4%, transparent);
  background: var(--black-200);
  padding-block: var(--section-py);
}

.sistemas__inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* Service Block (8294:501): título à esquerda, texto 672 à direita, centralizados no eixo Y */
.sistemas__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--content-gap);
}
.sistemas__title-wrap { flex: none; max-width: 100%; }     /* 8294:502 */
.sistemas__title { width: 367px; max-width: 100%; }        /* 8294:503 */
.sistemas__intro { flex: 0 1 672px; min-width: 0; }        /* 8294:504 */

/* Service cards (8294:506): grade de cards + legenda, gap 56 */
.sistemas__cards {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Services (8294:507): 4 colunas de 320 com gap 32 no frame 1440 */
.sistemas__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--content-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Card (8294:508): ilustração + bloco de descrição; todos com a altura do mais alto */
.sistemas__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--black-100);
}
/* Sem efeito de hover no card (não é link: subir/crescer dava a impressão de clicável). Com o cursor no card só a
   ilustração anima de novo — ver assets/js/sections/03-nossos-sistemas.js. */

/* Ilustrações animadas (cards [data-anim]) — cada uma em 03-nossos-sistemas--<anim>.css, com as camadas
   em partials/ilustra-<anim>.html. Estados (classes postas pelo JS):
     padrão (sem JS / movimento reduzido) = quadro final do Figma
     .sistemas.is-armed .sistemas__card    = quadro inicial
     .sistemas__card.is-playing            = anima até o quadro final (animation-fill-mode: both)
     .sistemas__card.is-static             = quadro final, sem animar */

/* Cena em camadas (tools/gen_ilustras.py): frame do Figma (fundo black-200 + stroke inside 1px black-100),
   camadas posicionadas em % do frame — escala junto com o card. Cena "d" (320) no desktop, "m" (343) no celular. */
.ilu { position: relative; }
.ilu__scene {
  position: relative;
  overflow: hidden;
  background: var(--black-200);
}
.ilu__scene::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--black-100);
  pointer-events: none;
}
.ilu__l { position: absolute; display: block; max-width: none; }
.ilu__route { visibility: hidden; } /* só geometria; a rota visível está na camada "Rota" */
.ilu__scene--m { display: none; }
@media (max-width: 767px) {
  .ilu__scene--d { display: none; }
  .ilu__scene--m { display: block; }
}

/* Capas dos segmentos (barra de progresso): no quadro final não aparecem; armado = cobrem os segmentos;
   tocando = somem uma a uma (--i, passo --ilu-step definido em cada ilustração) */
.ilu__cover { opacity: 0; }
.sistemas.is-armed .sistemas__card:not(.is-playing):not(.is-static) .ilu__cover { opacity: 1; }
.sistemas__card.is-playing .ilu__cover {
  animation: ilu-cover-out .16s ease-out both;
  animation-delay: calc(var(--i) * var(--ilu-step, 90ms));
}
@keyframes ilu-cover-out { from { opacity: 1; } to { opacity: 0; } }

/* Ilustração (8294:509) — imagem exportada do frame "ilustra" (fundo e stroke inclusos).
   <picture>: até 767px troca para o recorte do frame mobile (m-*, 8635:2008) */
.sistemas__media { display: block; flex: none; }
.sistemas__img {
  width: 100%;
  height: auto;
}

/* Description Block (8294:574): padding 24, ocupa o restante do card.
   Fundo: grade de pontos 1×1 no canto superior esquerdo de cada célula 4×4, ancorada na origem do bloco */
.sistemas__body {
  flex: 1 0 auto;
  padding: 24px;
  background: conic-gradient(at 1px 1px, transparent 270deg, var(--sistemas-dot) 0) 0 0 / 4px 4px;
}
.sistemas__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-wrap: break-word;
}

.sistemas__card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  color: var(--gray-0);
}

.sistemas__card-text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-300);
}

/* Subheading (8294:803) — tipografia de .eyebrow, centralizada */
.sistemas__caption { text-align: center; }

/* --------------------------------------------------------------------------
   Responsivo (fora do frame desktop 1440)
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .sistemas__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .sistemas { padding-block: 80px; }
  .sistemas__inner { gap: 48px; }
  .sistemas__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .sistemas__intro { flex-basis: auto; }
  .sistemas__cards { gap: 40px; }
}

/* --------------------------------------------------------------------------
   Mobile (frame 8635:1583) — nossos sistemas 8635:1999, 375 × 2649
   Vale até 767px; de 320 a 767 tudo é fluido (conteúdo = 100% − 2 × 16).
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* 8635:1999: py 60 (--section-py), gap 40, strokes top/bottom gray-900 inside */
  .sistemas {
    padding-block: var(--section-py);
    box-shadow: inset 0 1px 0 var(--gray-900), inset 0 -1px 0 var(--gray-900);
  }
  .sistemas__inner { gap: 40px; }

  /* Service Block 8635:2000: coluna, gap 16, filhos com a largura toda */
  .sistemas__head {
    align-items: stretch;
    gap: 16px;
  }
  /* 8635:2002 — Exo SemiBold 28/1.2; o Figma arredonda cada linha: 33,6 → 34 (2 linhas = 68).
     O Figma deixa "decidem" sozinho na 2ª linha; o site não tem palavra viúva (pedido do cliente) */
  .sistemas__title {
    width: auto;
    font-size: 28px;
    line-height: round(nearest, 1.2em, 1px);
  }

  /* Service cards 8635:2005: gap 40 · Services 8635:2006: uma coluna, gap 32 */
  .sistemas__cards { gap: 40px; }
  .sistemas__list { grid-template-columns: minmax(0, 1fr); }

  /* Description Block 8635:2073: padding 20 · Text Block 8635:2074: gap 8 */
  .sistemas__body { padding: 20px; }
  .sistemas__copy { gap: 8px; }
  .sistemas__card-title { font-size: 20px; } /* 8635:2075 — Exo SemiBold 20/1.3 */
}
/* /assets/css/sections/03-nossos-sistemas--codificacao.css */
/* Ilustração "Codificação de produto" (Figma 8294:696 · celular 8635:2195) — os 23 segmentos rosa da
   barra (8294:714…736) carregam um por vez (capas da cor do card somem em sequência) e, no fim, aparece
   o status "Configurado" (8294:737). */
.ilu--codificacao { --ilu-step: 95ms; }
.sistemas__card.is-playing .ilu--codificacao .ilu__cover--status {
  animation-delay: calc(23 * var(--ilu-step) + .15s);
}
/* /assets/css/sections/03-nossos-sistemas--quantificacao.css */
/* Ilustração "Quantificação de projeto" (Figma 8294:579 · celular 8635:2078) — os 3 marcadores azuis
   (Tubo 8294:667, Válvula 8294:675, Conexões 8294:683) sobem devagar a partir do plano até a altura do
   Figma, com a haste crescendo junto. Deslocamento inicial = comprimento da haste, em % do marcador:
   Tubo 41,9/75 · Válvula 73,4/76,5 · Conexões 27/80 na vertical e −40/72,7 na horizontal (haste inclinada). */
.ilu--quantificacao .ilu__pin { --dx: 0%; --dy: 56%; }
.ilu--quantificacao .ilu__pin[style*="--i:1"] { --dy: 96%; }
.ilu--quantificacao .ilu__pin[style*="--i:2"] { --dx: -55%; --dy: 34%; }
.ilu--quantificacao .ilu__stem { transform-origin: 0 100%; }

.sistemas.is-armed .sistemas__card:not(.is-playing):not(.is-static) .ilu--quantificacao .ilu__pin {
  opacity: 0;
  transform: translate(var(--dx), var(--dy));
}
.sistemas.is-armed .sistemas__card:not(.is-playing):not(.is-static) .ilu--quantificacao .ilu__stem {
  transform: scale(0);
}

.sistemas__card.is-playing .ilu--quantificacao .ilu__pin {
  animation: ilu-pin-rise 1.8s cubic-bezier(.22, .7, .2, 1) both;
  animation-delay: calc(var(--i) * .3s);
}
.sistemas__card.is-playing .ilu--quantificacao .ilu__stem {
  animation: ilu-stem-grow 1.8s cubic-bezier(.22, .7, .2, 1) both;
  animation-delay: calc(var(--i) * .3s);
}
@keyframes ilu-pin-rise {
  0% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
  15% { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes ilu-stem-grow {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
/* /assets/css/sections/03-nossos-sistemas--roteirizacao.css */
/* Ilustração "Alocação e roteirização" (Figma 8294:746 · celular 8635:3593) — o cubo laranja ("Carga"
   8294:795) percorre a rota (8294:790) do início até onde está no Figma (JS: 03-nossos-sistemas--roteirizacao.js),
   enquanto a barra do card "Otimizando rota…" (8294:757…779) carrega um segmento por vez — termina junto. */
.ilu--roteirizacao { --ilu-step: 110ms; }
.sistemas.is-armed .sistemas__card:not(.is-playing):not(.is-static) .ilu--roteirizacao .ilu__cube { opacity: 0; }
/* /assets/css/sections/03-nossos-sistemas--validacao.css */
/* Ilustração "Validação documental" (Figma 8294:509 · celular 8635:2008) — laser verde de leitura
   ("Analysis illustration" 8294:534) desce e sobe sobre o documento sem parar enquanto o card está na tela
   (.is-playing ou .is-static — o 03-nossos-sistemas.js tira as duas quando o card sai da tela: volta ao
   quadro do Figma). Percurso: 65 de 135 da altura do laser (fica dentro do documento 8294:523). */
.sistemas__card:is(.is-playing, .is-static) .ilu--validacao .ilu__laser {
  animation: ilu-laser 2.5s ease-in-out infinite;
}
@keyframes ilu-laser {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(48%); }
}
/* /assets/css/sections/04-depoimento.css */
/* Seção 04 — Depoimento / testmonial (Figma 8186:1160) */

/* Fundo: fill 1 black-100 + fill 2 pattern (fonte 8257:3488 = elipse 1×1 gray-200,
   escala 0.8, a cada 4px, 8%). A elipse de 0.8px cobre ~metade do pixel → ponto de
   1px a ~4% (calibrado em 4.4% para dar #191919 sobre #111, igual ao export do Figma). */
.depoimento {
  --depoimento-dot: color-mix(in srgb, var(--gray-200) 4.4%, transparent);
  position: relative;
  overflow: clip;
  background-color: var(--black-100);
  background-image: radial-gradient(circle at .5px .5px, var(--depoimento-dot) .5px, transparent .5px);
  background-size: 4px 4px;
}

/* px 32 (container) · py 120 · gap 32 · itens centralizados */
.depoimento__inner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--content-gap);
  padding-block: var(--section-py);
}

/* Globo pontilhado (8229:2131) — 935×443, bottom 0 / left 0 do frame */
.depoimento__globe {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 935px;
  height: 443px;
  pointer-events: none;
}
.depoimento__globe-canvas,
.depoimento__globe img { display: block; width: 100%; height: 100%; }

/* Eyebrow (8186:1170) e coluna do depoimento (8186:1335): flex 1 cada */
.depoimento__eyebrow,
.depoimento__card {
  flex: 1 0 0;
  min-width: 1px;
}

.depoimento__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 56px;
  margin: 0;
}

.depoimento__quote { width: 100%; margin: 0; } /* 8186:1340 — Exo 600 40/1.2 (.section-title) */

/* Autor (8186:1346): avatar 51 + gap 24 */
.depoimento__author {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}

/* 8186:1342 — elipse 51×51 com foto: recorte circular também para fotos quadradas do WP */
.depoimento__avatar {
  flex-shrink: 0;
  width: 51px;
  height: 51px;
  border-radius: 50%;
  object-fit: cover;
}

.depoimento__author-text {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 8186:1352 — Cabin 18/1.5: nome SemiBold + cargo Regular */
.depoimento__name {
  width: 100%;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--gray-0);
}
.depoimento__name strong { font-weight: 600; }

/* 8186:1353 — Cabin Regular 16/1.5 gray-500 */
.depoimento__company {
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-500);
}

/* --------------------------------------------------------------------------
   Responsivo — empilha eyebrow e depoimento
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .depoimento__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding-block: 80px;
  }
  .depoimento__eyebrow,
  .depoimento__card { flex: none; }
  .depoimento__card { gap: 40px; }
  .depoimento__quote .section-title { font-size: clamp(28px, 6vw, 40px); }
  .depoimento__globe { opacity: .6; }
}

/* --------------------------------------------------------------------------
   Mobile — Figma 8635:2302 (375×501), vale até 767px
   Coluna px 16 · py 60 · gap 32: eyebrow (8635:2303) e depoimento (8635:2304, gap 56);
   autor (8635:2306) em coluna com gap 16: avatar 51 (8635:2307) sobre o texto (8635:2308).
   Entrelinhas em px inteiro: o Figma arredonda cada linha (18×1.3 → 23; 32×1.2 → 38,
   caixa do título = 4×38 = 152).
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .depoimento__inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 32px;
    padding-block: var(--section-py);
  }

  /* 8635:2303 — Instrument Serif italic 18/1.3 gray-300 */
  .depoimento__eyebrow { font-size: 18px; line-height: 23px; }

  /* 8635:2304 — título + autor, gap 56 */
  .depoimento__card { gap: 56px; }

  /* 8635:2305 — Exo SemiBold 32/1.2 */
  .depoimento__quote .section-title { font-size: 32px; line-height: 38px; }

  /* 8635:2306 — avatar em cima, texto embaixo (largura total) */
  .depoimento__author {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .depoimento__author-text { flex: none; width: 100%; }

  /* Globo (8635:2311) — 800×501, embaixo e centralizado (left 50% − 0.5px); o mesmo vetor
     676×665 do desktop deslocado (+155, +58) dentro do frame: o JS troca o enquadramento */
  .depoimento__globe {
    left: calc(50% - .5px);
    width: 800px;
    height: 501px;
    opacity: 1;
    transform: translateX(-50%);
  }

  /* Sem JS: o SVG do desktop (935×443) posicionado com o mesmo deslocamento do vetor */
  .depoimento__globe img {
    position: absolute;
    left: 155px;
    top: 58px;
    width: 935px;
    height: 443px;
  }
}
/* /assets/css/sections/05-como-funciona.css */
/* Seção 05 — Como funciona (Figma 8307:3380) */

.como-funciona {
  /* Topo da coluna fixa: header compacto (60px, 8165:2339) + respiro de 32 */
  --como-funciona-sticky-top: calc(var(--header-h-scrolled) + var(--content-gap));
  background: var(--black-200);
  padding-block: var(--section-py);
}

/* Step blocks (8307:3381) — 564 | 140 | 672 no frame 1440 */
.como-funciona__blocks {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--content-gap); /* respiro mínimo quando o container encolhe */
}

/* Left Service Block (8307:3382) — sticky top no Figma */
.como-funciona__intro {
  position: sticky;
  top: var(--como-funciona-sticky-top);
  flex: 0 1 564px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.como-funciona__text { width: 100%; display: flex; flex-direction: column; gap: 16px; } /* 8307:3384 */
.como-funciona__desc { display: flex; flex-direction: column; gap: 16px; } /* 8307:3386 — parágrafos, mb 16 */

/* Main Container (8307:3506) */
.como-funciona__main {
  flex: 0 1 672px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Lista de passos (8307:3508) */
.como-funciona__steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Passo (8307:3509) — divisor gray-800 é stroke inside: box-shadow não soma altura */
.como-funciona__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 24px;
  box-shadow: inset 0 -1px 0 var(--gray-800);
}
.como-funciona__step:last-child { padding-bottom: 0; box-shadow: none; } /* 8307:3530 sem divisor */

/* Spacer (8307:3510) — quadrado + linha em degradê sob o número */
.como-funciona__marker {
  position: absolute;
  left: 13px;
  top: 47px;
}

/* Exo 24/1.3 — o Figma arredonda a linha de 31.2 para 31px (texto 617×31); round() reproduz,
   e a primeira declaração fica de fallback para navegadores sem round() */
.como-funciona__num,
.como-funciona__step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  line-height: round(nearest, 1.3em, 1px);
}

.como-funciona__num { flex: none; width: 31px; color: var(--blue-300); } /* 8307:3513 */

.como-funciona__body { /* 8307:3514 > 3593 > 3594 */
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.como-funciona__step-title { color: var(--gray-0); } /* 8307:3595 */
.como-funciona__step-text { font-size: 16px; line-height: 1.5; color: var(--gray-300); } /* 8307:3596 */

/* Entrada dos passos (assets/js/sections/05-como-funciona.js): um passo por vez, a cada 0,5 s —
   o número sobe, 0,2 s depois o texto sobe e o traço se desenha de cima para baixo (a sequência toda
   leva ~2,4 s; pedido do cliente em 2026-10-19: mais rápida que os ~5 s de antes).
   --i = ordem do passo (JS). Sem .is-armed (sem JS / movimento reduzido) fica o desenho do Figma.
   As transições ficam só no .is-in: esconder ao carregar é instantâneo. */
.como-funciona__steps.is-armed .como-funciona__num,
.como-funciona__steps.is-armed .como-funciona__body { opacity: 0; translate: 0 24px; }
.como-funciona__steps.is-armed .como-funciona__marker { scale: 1 0; transform-origin: top; }

.como-funciona__steps.is-in .como-funciona__num,
.como-funciona__steps.is-in .como-funciona__body {
  opacity: 1;
  translate: none;
  transition: opacity .6s ease, translate .8s cubic-bezier(.25, .6, .3, 1);
}
.como-funciona__steps.is-in .como-funciona__num { transition-delay: calc(var(--i, 0) * 500ms); }
.como-funciona__steps.is-in .como-funciona__body { transition-delay: calc(var(--i, 0) * 500ms + 200ms); }
.como-funciona__steps.is-in .como-funciona__marker {
  scale: none;
  transition: scale .6s cubic-bezier(.25, .6, .3, 1) calc(var(--i, 0) * 500ms + 250ms);
}

/* Impressão / PDF sem ter rolado até a seção: passos no estado final */
@media print {
  .como-funciona__steps.is-armed :is(.como-funciona__num, .como-funciona__body) { opacity: 1; translate: none; transition: none; }
  .como-funciona__steps.is-armed .como-funciona__marker { scale: none; transition: none; }
}

/* Abaixo do desktop: colunas empilhadas (gap 32 como no Step blocks mobile 8635:2314), sem sticky */
@media (max-width: 1023.98px) {
  .como-funciona__blocks { flex-direction: column; gap: var(--content-gap); }
  .como-funciona__intro { position: static; flex-basis: auto; width: 100%; }
  .como-funciona__main { flex-basis: auto; width: 100%; }
}
/* ==========================================================================
   Mobile — Figma "como funciona" 8635:2313 (375 × 1318), vale até 767px
   - py 60 / px 16 vêm dos tokens --section-py e --section-px (main.css)
   - Step blocks 8635:2314: coluna única, gap 32 (bloco ≤1023 acima), sem sticky
   - Left Service Block 8635:2315: gap 24, eyebrow 8635:2316 em largura total
   - Eyebrows 8635:2316 / 8635:2321: Instrument Serif 18/1.3; título 8635:2318: Exo 28/1.2;
     o Figma arredonda cada linha (18×1.3 = 23.4 → 23; 28×1.2 = 33.6 → 34), por isso o round()
   - Passos 8635:2323 / 2333 / 2343 / 2353: título 20/1.3 (26), número 24 (31), texto 16/1.5
   - Spacer do passo 1 (8635:2324) fica ancorado embaixo (bottom 24 → rente ao fim do texto);
     nos passos 2 e 3 (8635:2334 / 8635:2344) segue em top 47, igual ao desktop
   ========================================================================== */
@media (max-width: 767px) {
  .como-funciona__intro { align-items: stretch; gap: 24px; } /* 8635:2315 */
  .como-funciona .eyebrow { font-size: 18px; line-height: round(nearest, 1.3em, 1px); } /* 8635:2316 / 8635:2321 */
  .como-funciona .section-title { font-size: 28px; line-height: round(nearest, 1.2em, 1px); } /* 8635:2318 */
  .como-funciona__step-title { font-size: 20px; } /* 8635:2331 / 2341 / 2351 / 2358 */
  .como-funciona__step:first-child .como-funciona__marker { top: auto; bottom: 24px; } /* 8635:2324 */
  /* Texto curto vindo do Customizer: o spacer nunca sobe além do top 47 (número 31 + 16).
     :not(:last-child) — passo único (WP com os outros vazios) não tem spacer nem respiro extra */
  .como-funciona__step:first-child:not(:last-child) { min-height: calc(31px + 16px + 48px + 24px); }
}
/* /assets/css/sections/06-diagrama.css */
/* Seção 06 — Diagram (Figma 8653:2286 · mobile 8653:2599): POC → MVP → Escala + Description Block (8653:2355)
   Posições horizontais do diagrama em % da largura do Section Container (8653:2287 = --content-w),
   para o desenho acompanhar a coluna sem quebrar entre 1024 e o frame desktop. */

.diagrama {
  --diagrama-card-from: #1f1f1f; /* início do gradiente dos cards (8653:2312) — fora da paleta */
  --diagrama-error: #ff8f91;     /* "Humano errou" + borda tracejada (8653:2322) — fora da paleta */
  /* Base das proporções: --content-w sem unidade (tan(atan2(a, b)) = a / b entre comprimentos) */
  --diagrama-ref: tan(atan2(var(--content-w), 1px));
  background: var(--black-200);
  padding-top: 32px;
  padding-bottom: var(--section-py);
}

.diagrama__inner { display: flex; flex-direction: column; gap: 80px; }

/* --------------------------------------------------------------------------
   Section Container (8653:2287)
   -------------------------------------------------------------------------- */
.diagrama__chart {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Header POC / MVP / Escala (8653:2288) */
.diagrama__phases {
  display: flex;
  align-items: center;
  gap: var(--content-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.diagrama__phase {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-800); /* 26 + 10 + 1 = 37 como no Figma */
}
.diagrama__phase-title { display: block; width: 100%; text-align: center; color: var(--gray-0); }

/* Linhas verticais de fundo (8653:2293 · 8653:2300 · 8653:2343) — SVGs do Figma */
.diagrama__lines {
  position: absolute;
  top: 53px;
  height: 461px;
  pointer-events: none;
}
.diagrama__lines img { width: calc(100% + 0.5px); height: 100%; max-width: none; } /* +0,5px: traço de 1px na borda (inset -0.11% do Figma) */
.diagrama__lines--mvp    { left: calc(459 / var(--diagrama-ref) * 100%); width: calc(464 / var(--diagrama-ref) * 100%); }
.diagrama__lines--escala { left: calc(924 / var(--diagrama-ref) * 100%); width: calc(433 / var(--diagrama-ref) * 100%); }
.diagrama__lines--poc    { z-index: 1; top: -16px; left: calc(18 / var(--diagrama-ref) * 100%); width: calc(435 / var(--diagrama-ref) * 100%); }
.diagrama__lines--poc img { width: calc(100% + 1px); margin-left: -0.5px; }

/* Content Container (8653:2305) → Content (8653:2306) + Legenda (8653:2348) */
.diagrama__body { display: flex; flex-direction: column; gap: 24px; }

.diagrama__content {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.diagrama__row { position: relative; z-index: 2; display: flex; align-items: flex-start; }
.diagrama__row--start { gap: var(--content-gap); }
.diagrama__row--end { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   Item (cards) — borda 1px gray-900 entra no layout (texto em x=19), 70 de altura
   -------------------------------------------------------------------------- */
.diagrama__item {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 18px;
  border: 1px solid var(--gray-900);
  border-radius: 17px;
  background: linear-gradient(90deg, var(--diagrama-card-from) 0%, var(--black-100) 100%), var(--black-100);
  box-shadow: 0 0.3px 0 color-mix(in srgb, var(--gray-0) 25%, transparent); /* drop-shadow 0 0.3 0 */
}
/* Inner shadow do Figma cobre a forma inteira, inclusive o stroke → overlay na border-box */
.diagrama__item::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: inset 1px 1px 2px color-mix(in srgb, var(--gray-0) 8%, transparent);
  pointer-events: none;
}

/* 01 · Amostra com gabarito (8653:2308) — branco, sem borda: 22 + 24 + 22 = 68 */
.diagrama__item--light {
  flex: 1 0 0;
  min-width: 0;
  height: 68px;
  border: 0;
  background: var(--gray-0);
  box-shadow: none;
}
.diagrama__item--light::after,
.diagrama__item--lab::after { content: none; }

/* 02 · Medição de assertividade (8653:2312) */
.diagrama__item--measure { width: calc(917 / var(--diagrama-ref) * 100%); }

/* Ajuste de critério (8653:2317) */
.diagrama__item--adjust { width: calc(771 / var(--diagrama-ref) * 100%); margin-left: calc(495 / var(--diagrama-ref) * 100%); }

/* Humano errou · Caso sai da base (8653:2322) — stroke tracejado CENTRALIZADO na borda (meio px para fora),
   fora do layout (texto em x=18). Traço 7 / vão 5 medido no render do Figma → SVG, já que border: dashed não controla o traço. */
.diagrama__item--error {
  justify-content: flex-start;
  gap: 16px;
  margin-left: calc(566 / var(--diagrama-ref) * 100%);
  border: 0;
}
.diagrama__item--error::after { inset: -0.5px; }
.diagrama__dash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.diagrama__dash rect {
  fill: none;
  stroke: var(--diagrama-error);
  stroke-width: 1;
  stroke-dasharray: 7 5;
  stroke-dashoffset: -1.5;
}

/* 03 · Laboratório no seu sistema (8653:2329) */
.diagrama__item--lab {
  width: calc(696 / var(--diagrama-ref) * 100%);
  margin-left: calc(680 / var(--diagrama-ref) * 100%);
  overflow: clip;
  background: var(--blue-300);
  box-shadow: none;
}

/* Versions (8653:2336) */
.diagrama__versions {
  width: calc(696 / var(--diagrama-ref) * 100%);
  display: flex;
  align-items: center;
  gap: var(--content-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.diagrama__item--version { flex: 1 0 0; min-width: 0; justify-content: flex-start; }

/* Textos dos cards — Cabin 18, line-height normal (22 no Figma) */
.diagrama__item-title {
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
  color: var(--gray-0);
}
.diagrama__item-title--bold { font-weight: 700; color: var(--black-200); }

.diagrama__item-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.diagrama__item-label {
  min-width: 100%;
  font-size: 14px;
  line-height: 1.215; /* "normal" da Cabin (965 + 250 / 1000) sem o arredondamento do Chrome: 17 como no Figma */
  color: var(--diagrama-error);
}
/* "Você testa" (mobile 8653:2644) — só no layout mobile; no desktop (8653:2329) o cartão 03 tem só o título */
.diagrama__item-label--lab { display: none; min-width: 0; color: var(--black-200); }

/* Badge Container (8653:2310 · 8653:2314 · 8653:2333) */
.diagrama__badge {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--black-200);
  color: var(--gray-0);
}
.diagrama__badge--blue { background: var(--blue-300); color: var(--black-200); }
.diagrama__badge-num {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  text-box: trim-both cap alphabetic; /* text-box-trim do Figma: caixa = altura das maiúsculas (10) */
}

.diagrama__icon { flex: none; width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   Montagem ligada à rolagem + fluxo em loop (assets/js/sections/06-diagrama.js) — só com o movimento liberado;
   sem JS, com movimento reduzido e na impressão: o quadro do Figma, sem o caminho nem o ponto.
   -------------------------------------------------------------------------- */
/* Réguas de POC/MVP/Escala: a borda do li vira um traço que se desenha (scaleX); --diagrama-rule vem do JS
   (sem valor = 1 = Figma). O traço fica no lugar exato da borda (10 de respiro + 1). */
.diagrama__chart.is-scrub .diagrama__phase { border-bottom-color: transparent; }
.diagrama__chart.is-scrub .diagrama__phase-title { position: relative; }
.diagrama__chart.is-scrub .diagrama__phase-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -11px;
  height: 1px;
  background: var(--gray-800);
  transform: scaleX(var(--diagrama-rule, 1));
  transform-origin: left center;
}
/* Linhas pontilhadas crescem para baixo */
.diagrama__chart.is-scrub .diagrama__lines { transform-origin: center top; }

/* Fluxo: caminho (guia bem sutil) e ponto de luz com rastro, por cima do diagrama */
.diagrama__flow {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}
.diagrama__chart.is-flow.is-assembled .diagrama__flow { opacity: 1; } /* só com o diagrama montado */
.diagrama__flow-guide {
  fill: none;
  stroke: color-mix(in srgb, var(--blue-300) 22%, transparent);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.diagrama__flow-dot { transition: opacity .3s ease; }
.diagrama__flow-trail {
  fill: none;
  stroke: var(--blue-300);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.diagrama__flow-trail--0 { opacity: .18; }
.diagrama__flow-trail--1 { opacity: .45; }
.diagrama__flow-trail--2 { opacity: .9; }
.diagrama__flow-head {
  fill: var(--gray-0);
  filter: drop-shadow(0 0 3px var(--blue-300)) drop-shadow(0 0 7px var(--blue-300));
}

/* Realce quando o ponto chega: selo (01/02/03), refresh, lixeira ou etiqueta da versão — a caixa não se mexe */
.diagrama__badge.is-hit { animation: diagrama-badge-hit .8s ease-out; }
@keyframes diagrama-badge-hit {
  30% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue-300) 70%, transparent), 0 0 14px var(--blue-300); filter: brightness(1.25); }
}
.diagrama__icon.is-spin { animation: diagrama-spin .9s ease-in-out; }
@keyframes diagrama-spin { to { rotate: -360deg; } } /* ícone anti-horário: uma volta */
.diagrama__icon.is-shake { transform-origin: 50% 20%; animation: diagrama-shake 1s ease-in-out; }
@keyframes diagrama-shake {
  10%, 50% { rotate: -10deg; }
  30%, 70% { rotate: 9deg; }
  85% { rotate: -4deg; }
}
.diagrama__item-title.is-hit { animation: diagrama-label-hit .8s ease-out; }
@keyframes diagrama-label-hit { 30% { text-shadow: 0 0 2px var(--gray-0), 0 0 12px var(--blue-300); } }

/* Luzes curtas que descem pelas linhas pontilhadas (o JS cria e remove) */
.diagrama__drip {
  position: absolute;
  top: 0;
  width: 1px;
  height: 28px;
  margin-left: -.5px;
  background: linear-gradient(to bottom, transparent, var(--blue-300));
  pointer-events: none;
  animation: diagrama-drip 2.4s linear forwards;
}
@keyframes diagrama-drip {
  0% { transform: translateY(-28px); opacity: 0; }
  12%, 85% { opacity: 1; }
  100% { transform: translateY(461px); opacity: 0; }
}
@keyframes diagrama-drip-m { /* celular: a faixa tem a altura dos cartões, não 461 */
  0% { top: -28px; opacity: 0; }
  12%, 85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@media print {
  .diagrama__flow,
  .diagrama__drip { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .diagrama__flow,
  .diagrama__drip { display: none; }
}

/* Legenda (8653:2348) */
.diagrama__legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}
.diagrama__legend-item { display: flex; align-items: center; gap: 8px; }
.diagrama__legend-item img { flex: none; width: 24px; height: 24px; }
.diagrama__legend-item--start { width: calc(540 / var(--diagrama-ref) * 100%); justify-content: flex-end; }
.diagrama__legend-item--end { width: calc(696 / var(--diagrama-ref) * 100%); }
.diagrama__legend-text {
  font-size: 16px;
  line-height: normal;
  white-space: nowrap;
  color: var(--gray-300);
}

/* Divider Lines Container (mobile 8653:2896) — progresso da rolagem; só aparece no mobile */
.diagrama__progress { display: none; }

/* --------------------------------------------------------------------------
   Description Block (8653:2355) — título .section-title + texto 672 (coluna)
   -------------------------------------------------------------------------- */
.diagrama__desc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--content-gap);
}
.diagrama__title { white-space: nowrap; }
.diagrama__text {
  flex: 0 1 calc((100% - var(--content-gap)) / 2); /* 672 no desktop; encolhe antes de estourar a coluna */
  min-width: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-300);
}

/* --------------------------------------------------------------------------
   Telas estreitas: o diagrama mantém a proporção mínima e rola na horizontal
   -------------------------------------------------------------------------- */
@media (max-width: 1087px) {
  .diagrama__scroll {
    overflow-x: auto;
    margin-inline: calc(-1 * var(--section-px));
    padding-inline: var(--section-px);
    padding-bottom: 8px;
    scrollbar-width: thin;
  }
  .diagrama__chart { min-width: 1024px; }

  /* Description Block empilha: título (nowrap, 534) + texto lado a lado não cabem na coluna */
  .diagrama__desc { flex-direction: column; align-items: flex-start; gap: 16px; }
  .diagrama__text { flex: none; width: 100%; max-width: calc((var(--content-w) - var(--content-gap)) / 2); }
}

/* Mouse (janela estreita): arrastar rola o diagrama — assets/js/sections/06-diagrama.js
   (.is-scrollable vem do JS: entre ~1072 e 1087 o desenho já cabe e não há o que arrastar) */
@media (max-width: 1087px) and (hover: hover) and (pointer: fine) {
  .diagrama__scroll.is-scrollable { cursor: grab; }
  .diagrama__scroll.is-dragging { cursor: grabbing; user-select: none; }
}

/* ==========================================================================
   Mobile (≤767) — Figma 8653:2599 (375 × 869), com uma mudança pedida pelo cliente (2026-10-19): o Figma deixa o
   desenho de 1376 rolando na horizontal (8653:2900 + barra 8653:2896); aqui o MESMO diagrama encolhe para caber na
   coluna, sem rolagem lateral. Posições horizontais seguem as % do desktop (sobre a largura da coluna), cartões com
   altura pelo conteúdo, texto menor que pode quebrar em 2 linhas, selos e ícones de 20.
   ========================================================================== */
@media (max-width: 767px) {
  .diagrama { padding-top: 16px; padding-bottom: 56px; } /* 8653:2599: pt 16 · pb 56 */
  .diagrama__inner { gap: 40px; }

  .diagrama__scroll { overflow: visible; margin-inline: 0; padding: 0; } /* sem rolagem lateral */
  .diagrama__chart { --dm-gap: 8px; min-width: 0; width: 100%; gap: 16px; }
  .diagrama__progress { display: none; } /* a barra de progresso da rolagem não tem mais função */

  /* POC / MVP / Escala: terços da coluna */
  .diagrama__phases { gap: var(--dm-gap); }
  .diagrama__phase-title { font-size: 16px; }

  /* Linhas pontilhadas: uma faixa por fase, da régua até o fim dos cartões (a legenda tem 1 linha de 20) */
  .diagrama__lines--mvp,
  .diagrama__lines--escala {
    top: calc(16px * 1.3 + 11px + 4px);  /* régua (título 16/1.3 + 10 + 1) + 4 */
    bottom: calc(20px + 16px);          /* legenda + vão */
    height: auto;
    width: calc((100% - 2 * var(--dm-gap)) / 3);
  }
  .diagrama__lines--mvp    { left: calc((100% - 2 * var(--dm-gap)) / 3 + var(--dm-gap)); }
  .diagrama__lines--escala { left: calc((100% - 2 * var(--dm-gap)) * 2 / 3 + 2 * var(--dm-gap)); }
  .diagrama__lines--poc { top: -12px; bottom: 0; height: auto; left: 0; width: calc((100% - 2 * var(--dm-gap)) / 3); }
  .diagrama__lines--poc img { width: 100%; margin-left: 0; }

  /* Cartões: as mesmas posições do desktop em % da coluna; altura pelo conteúdo */
  .diagrama__body { gap: 16px; }
  .diagrama__content { gap: 12px; }
  .diagrama__row--start { gap: var(--dm-gap); align-items: stretch; }
  .diagrama__item {
    height: auto;
    min-height: 44px;
    padding: 8px;
    gap: 8px;
    border-radius: 12px;
  }
  .diagrama__item--light { height: auto; }
  .diagrama__item-title { font-size: clamp(12px, 3.47vw, 15px); line-height: 1.2; white-space: normal; } /* 13 em 375 · 12 em 320 */
  .diagrama__item-label { font-size: clamp(11px, 3.2vw, 13px); }
  .diagrama__item-text { min-width: 0; }
  .diagrama__item--error { gap: 8px; }
  .diagrama__dash rect { rx: 12px; ry: 12px; }
  .diagrama__versions { gap: 6px; }
  .diagrama__item--version { padding-inline: 8px; }
  .diagrama__badge { width: 20px; height: 20px; }
  .diagrama__badge-num { font-size: 12px; }
  .diagrama__icon { width: 20px; height: 20px; }


  /* 03 · Laboratório (8653:2642): "Você testa" + título, gap 2 (Frame 100 · 8653:2643) */
  .diagrama__item-label--lab { display: block; }

  /* Legenda numa linha, centralizada */
  .diagrama__legend { justify-content: center; gap: 16px; }
  .diagrama__legend-item--start,
  .diagrama__legend-item--end { width: auto; gap: 6px; }
  .diagrama__legend-item img { width: 20px; height: 20px; }
  .diagrama__legend-text { font-size: clamp(12px, 3.47vw, 14px); }

  /* Luzes das linhas: descem até o fim da faixa (a altura muda com a largura) */
  .diagrama__drip { animation-name: diagrama-drip-m; }

  /* Description Block (8653:2668): centralizado, gap 10; título 28/1.2 (8653:2669) · texto 16/1.5 (8653:2670) */
  .diagrama__desc { align-items: stretch; gap: 10px; text-align: center; }
  .diagrama__title {
    white-space: normal; /* o Figma quebra "…no seu / sistema"; o site não tem palavra viúva (pedido do cliente) */
    font-size: 28px;
    line-height: 1.2;
    line-height: round(nearest, 1.2em, 1px); /* o Figma arredonda cada linha: 28 × 1,2 = 33,6 → 34 (2 linhas = 68) */
  }
  .diagrama__text { max-width: none; }
}

/* Até 479: o cartão 01 (coluna POC, a mais estreita) não comporta texto + selo lado a lado — o selo vai para o canto
   e o texto ganha a largura do cartão ("Amostra / com gabarito"). Acima disso o texto caberia numa linha e passaria
   por baixo do selo: ele volta para o lado. */
@media (max-width: 479px) {
  .diagrama__item--light .diagrama__badge { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; }
  .diagrama__item--light .diagrama__badge-num { font-size: 11px; }
}
/* /assets/css/sections/07-estudos.css */
/* Seção 07 — Estudos de impacto (Figma 8195:1063) · carrossel = instância 8201:3770 do componente 8201:3769 */

.estudos { background: var(--black-200); }

/* 8195:1063: px 32 (container) · py 120 · gap 80 entre cabeçalho e carrossel */
.estudos__inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-block: var(--section-py);
}
.estudos__heading { align-self: stretch; } /* 8195:1066: min-w-full → 1376 */

/* --------------------------------------------------------------------------
   Carrossel (8201:3770): card 573 + gap 32 + controles 40 = 645
   -------------------------------------------------------------------------- */
.estudos__carousel { display: flex; flex-direction: column; gap: 32px; }

/* Só o slide ativo ocupa o fluxo; a altura acompanha o slide (Gascat 8201:3766 é mais alto) */
.estudos__slides {
  position: relative;
  overflow: clip;
  touch-action: pan-y;
  transition: height .45s cubic-bezier(.4, 0, .2, 1);
}

/* Review Container (8201:3594): stroke 1px inside gray-900 — a pintura cobre o stroke à direita */
.estudos__card {
  position: relative;
  display: flex;
  background: var(--black-200);
  box-shadow: inset 0 0 0 1px var(--gray-900);
  transition: opacity .45s ease, visibility 0s;
}
.estudos__card:not(.is-active) {
  position: absolute;
  inset: 0 0 auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility 0s linear .55s; /* cobre a saída do texto (.5s) */
}

/* Altura reservada (JS: --estudos-h = altura do estudo mais alto): trocar de estudo não empurra
   o conteúdo de baixo. Nos estudos mais baixos a sobra fica no bloco de texto, com o rodapé
   (categoria | status) no pé; a imagem acompanha a altura. Sem JS cada estudo tem a sua altura. */
.estudos__card { min-height: var(--estudos-h, 0px); }
.estudos__tags { margin-top: auto; }

/* Review Text Container (8201:3595): 640 · p 48 · gap 32 · stroke direito inside */
.estudos__text {
  flex: 0 0 calc((100% - 64px) * 640 / 1312); /* 640 : 672 ao redor do padrão de 64 */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 48px;
  box-shadow: inset -1px 0 0 var(--gray-900);
  overflow-wrap: break-word;
}
/* Estudo 4 (8284:168): sem rodapé, altura fixa 573 com conteúdo centralizado — entre 1024 e 1439,
   onde os outros estudos crescem, acompanha o menor bloco de texto deles (--estudos-text-min, JS) */
.estudos__text--center { justify-content: center; min-height: max(573px, var(--estudos-text-min, 0px)); }

/* Figma arredonda a entrelinha para px inteiro (24×1,3 = 31,2 → 31 · 32×1,2 = 38,4 → 38) */
.estudos__meta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  line-height: round(1.3em, 1px);
  color: var(--gray-300);
}

.estudos__content { display: flex; flex-direction: column; gap: 16px; } /* 8201:3600 */

.estudos__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.2;
  line-height: round(1.2em, 1px);
  color: var(--gray-0);
}

/* 8201:3602: Cabin 16/1.5 gray-300, parágrafos com 12 entre si */
.estudos__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-300);
}

/* Review Header (8201:3596): categoria | status — tipografia do .eyebrow */
.estudos__tags { display: flex; align-items: flex-start; gap: 8px; white-space: nowrap; }
.estudos__status {
  display: flex;
  padding-left: 8px;
  box-shadow: inset 1px 0 0 var(--gray-900); /* 8201:3598: stroke esquerdo inside */
}
.estudos__status:first-child { padding-left: 0; box-shadow: none; } /* WP: status sem categoria */
.estudos__status-label { display: block; }

/* Right Pattern Container (8201:3604): 64 de largura, padrão 1376×64 girado 90°, centro em 50% − 40,5 */
.estudos__pattern {
  position: relative;
  flex: 0 0 64px;
  overflow: clip;
}
.estudos__pattern img {
  position: absolute;
  left: 50%;
  top: calc(50% - 40.5px);
  width: var(--content-w);
  height: 64.35px; /* 64 + inset −0,27% do Figma */
  max-width: none;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Review Image (8201:3689): 672 · pl 48 · pt 48 · pintura em cover + captura do sistema */
.estudos__media {
  position: relative;
  flex: 1 1 0; /* 672 = o que sobra */
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: 48px 0 0 48px;
  overflow: clip;
}
.estudos__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* Review Image Content (8201:3690): fundo branco, captura alinhada ao topo/esquerda na altura do quadro */
.estudos__shot {
  position: relative;
  flex: 1 1 0;
  min-height: 1px;
  background: var(--gray-0);
  overflow: hidden;
}
.estudos__shot-img {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: var(--shot-zoom, 100%); /* Gascat 8201:3580: 138,69% */
  max-width: none;
}

/* --------------------------------------------------------------------------
   Controles (8201:3692): progresso 640 + setas 40 (gap 8)
   -------------------------------------------------------------------------- */
.estudos__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Divider Lines Container (8201:3693) — trecho branco = 164 por estudo ((640 + 16) / 4) */
.estudos__progress {
  flex: 0 1 640px;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: clip;
  border-radius: 999px;
}
.estudos__progress-fill {
  flex: none;
  width: calc((100% + 16px) * var(--estudos-step, 1) / var(--estudos-total, 4));
  height: 2px;
  background: var(--gray-0);
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
.estudos__progress-rest {
  flex: 1 0 0;
  min-width: 1px;
  height: 2px;
  background: var(--gray-400);
}

.estudos__nav { display: flex; align-items: center; gap: 8px; } /* 8201:3696 */

/* primary-butotn (8201:3697): 40×40, stroke 1px gray-900, ícone 16 centralizado */
.estudos__arrow {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--gray-900);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.estudos__arrow:hover { border-color: var(--gray-500); }
.estudos__arrow:active { background: var(--gray-900); }
.estudos__arrow img { width: 16px; height: 16px; }

/* Pausar/Reproduzir a troca automática (fora do Figma, WCAG 2.2.2): mesmo desenho das setas,
   antes delas; ícone de pausa trocando sozinho, de play parado (.is-paused, JS) */
.estudos__toggle { color: var(--gray-0); }
.estudos__toggle[hidden] { display: none; }
.estudos__toggle-icon { display: block; width: 16px; height: 16px; }
.estudos__toggle-icon--play,
.estudos__toggle.is-paused .estudos__toggle-icon--pause { display: none; }
.estudos__toggle.is-paused .estudos__toggle-icon--play { display: block; }

/* Um estudo só: sem controles (WP) */
.estudos__carousel.is-single .estudos__controls { display: none; }

/* Troca de estudo (JS): o texto do estudo que sai sobe na diagonal e some (.is-leaving); o do
   estudo que entra sobe na diagonal, de baixo e da esquerda, um bloco por vez — meta, título,
   cada parágrafo, rodapé (.is-entering). Na imagem, a pintura assenta com um zoom-out leve e a
   captura desliza 40px no sentido da navegação (--estudos-dir: 1 próximo, −1 anterior). */
.estudos__card.is-leaving :is(.estudos__meta, .estudos__title, .estudos__body > *, .estudos__tags) {
  animation: estudos-text-out .5s cubic-bezier(.4, 0, .8, .6) both;
}
.estudos__card.is-entering :is(.estudos__meta, .estudos__title, .estudos__body > *, .estudos__tags) {
  animation: estudos-text-in 1.3s cubic-bezier(.25, .6, .3, 1) .3s both; /* devagar o bastante para se perceber */
}
.estudos__card.is-entering .estudos__title { animation-delay: .45s; }
.estudos__card.is-entering .estudos__body > :nth-child(1) { animation-delay: .6s; }
.estudos__card.is-entering .estudos__body > :nth-child(2) { animation-delay: .72s; }
.estudos__card.is-entering .estudos__body > :nth-child(n+3) { animation-delay: .84s; }
.estudos__card.is-entering .estudos__tags { animation-delay: .98s; }
.estudos__card.is-entering .estudos__bg { animation: estudos-bg-in 1.6s cubic-bezier(.2, .7, .2, 1) both; }
.estudos__card.is-entering .estudos__shot { animation: estudos-shot-in .9s cubic-bezier(.2, .7, .2, 1) .1s both; }

/* 1ª entrada (07-estudos.js, só com o movimento liberado): o estudo ativo espera no estado inicial da troca
   até o carrossel chegar na tela */
.motion-on .estudos__card.is-pending :is(.estudos__meta, .estudos__title, .estudos__body > *, .estudos__tags, .estudos__shot) { opacity: 0; }
.motion-on .estudos__card.is-pending .estudos__bg { transform: scale(1.08); }
@media print {
  .estudos__card.is-pending :is(.estudos__meta, .estudos__title, .estudos__body > *, .estudos__tags, .estudos__shot) { opacity: 1; }
  .estudos__card.is-pending .estudos__bg { transform: none; }
}

@keyframes estudos-text-in { from { opacity: 0; transform: translate(var(--estudos-text-x, -36px), 28px); } }
@keyframes estudos-text-out { to { opacity: 0; transform: translate(24px, -18px); } }
@keyframes estudos-bg-in { from { transform: scale(1.08); } }
@keyframes estudos-shot-in { from { opacity: 0; transform: translateX(calc(var(--estudos-dir, 1) * 40px)); } }

@media (prefers-reduced-motion: reduce) {
  .estudos__slides,
  .estudos__card,
  .estudos__card:not(.is-active),
  .estudos__progress-fill { transition: none; }
  .estudos__card.is-entering *,
  .estudos__card.is-leaving * { animation: none; }
}

/* --------------------------------------------------------------------------
   Telas menores: texto em cima, imagem embaixo
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .estudos__inner { gap: 48px; }
  .estudos__card { flex-direction: column; }
  .estudos__text { flex: 1 0 auto; padding: 32px 24px; box-shadow: inset 0 -1px 0 var(--gray-900); } /* cresce com a altura reservada */
  .estudos__card { --estudos-text-x: -20px; } /* entrada na diagonal: até o padding de 24, sem passar da borda */
  /* Estudo sem rodapé: altura do menor bloco de texto dos outros estudos (JS) */
  .estudos__text--center { min-height: var(--estudos-text-min, 0px); }
  .estudos__pattern { display: none; }
  .estudos__media { flex: none; aspect-ratio: 672 / 573; padding: 32px 0 0 32px; }
}

/* --------------------------------------------------------------------------
   Mobile (frame 8635:1583 · seção 8635:2366, 375 × 1321,47) — vale até 767px.
   Abaixo de 375 tudo encolhe junto: conteúdo = 100% − 2×16.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* 8635:2366: px 16 · py 60 (tokens) · gap 40 entre cabeçalho e carrossel */
  .estudos__inner { gap: 40px; }

  /* 8635:2369: Exo SemiBold 28/1.2 — Figma arredonda a entrelinha (33,6 → 34) */
  .estudos__heading {
    font-size: 28px;
    line-height: 1.2;
    line-height: round(nearest, 1.2em, 1px);
  }

  /* Entrada do texto na troca: diagonal mais curta — com p 20, os 36px do desktop passariam da borda */
  .estudos__card { --estudos-text-x: -14px; }

  /* Review Text Container (8635:3461): p 20 · gap 20 · stroke direito inside (some sob o do card) */
  .estudos__text {
    gap: 20px;
    padding: 20px;
    box-shadow: inset -1px 0 0 var(--gray-900);
  }
  /* Estudo 4 (sem rodapé): texto centralizado como a variante 8284:168 do desktop, com a altura do
     menor bloco de texto dos outros estudos (--estudos-text-min, JS) — no 375 = 645 do estudo 1;
     sem JS fica 645 */
  .estudos__text--center { min-height: var(--estudos-text-min, 645px); }

  .estudos__meta { font-size: 18px; }  /* 8635:3462: 18/1.3 → 23 */
  .estudos__title { font-size: 20px; } /* 8635:3464: 20/1.2 → 24 */

  /* Review Header (8635:3466): Instrument Serif 18/1.3 (→ 23); categoria e status quebram linha se não
     couberem (texto longo do WP também quebra dentro do item, em vez de estourar o card) */
  .estudos__tags {
    flex-wrap: wrap;
    column-gap: 16px; /* 8 do Figma + os 8 que o status devolve com a margem negativa */
    white-space: normal;
    font-size: 18px;
    line-height: 1.3;
    line-height: round(nearest, 1.3em, 1px);
    /* Status que quebra para a 2ª linha (320) começa alinhado ao texto (margem −8 = o pl 8) e sem o
       stroke solto: abaixo da 1ª linha (23) recorta o que fica à esquerda de −4 (o stroke, em −8) —
       a 1ª linha e as sobras do itálico ficam intactas */
    clip-path: polygon(-16px -16px, calc(100% + 16px) -16px, calc(100% + 16px) calc(100% + 16px), -4px calc(100% + 16px), -4px 23px, -16px 23px);
  }
  /* 8635:3468: x = categoria + 8 continua igual (16 − 8); na 2ª linha o texto fica em x = 0 */
  .estudos__status { margin-left: -8px; }
  .estudos__status:first-child { margin-left: 0; }

  /* Right Pattern Container (8635:3470): a coluna 64×573 do desktop vira a faixa 343×32 entre texto e
     imagem (girada −90°): stroke inside no topo e o padrão 8635:3471 (m-pattern.svg, 1376×64,35 na
     horizontal) com o centro em x = 50% − 40,5 e y = 0 — só a metade de baixo aparece */
  .estudos__pattern {
    display: block;
    flex: none;
    height: 32px;
  }
  .estudos__pattern::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: var(--gray-900);
  }
  .estudos__pattern img {
    left: calc(50% - 40.5px);
    top: 0;
    width: auto;  /* tamanho do próprio SVG (1376 × 64,35) */
    height: auto;
    transform: translate(-50%, -50%);
  }

  /* Review Image (8635:3555): 672/573 (do bloco acima) · pl 16 · pt 16 */
  .estudos__media { padding: 16px 0 0 16px; }

  /* Container (8635:3557): progresso na largura toda e, 8 abaixo, as setas à esquerda */
  .estudos__controls {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .estudos__progress { flex: none; width: 100%; }
  /* 8635:3559: trecho branco de 164 em 343 no estudo 1 (47,81%), cresce até a largura toda no último */
  .estudos__progress-fill {
    width: calc(100% * 164 / 343 + 100% * 179 / 343 * (var(--estudos-step, 1) - 1) / max(var(--estudos-total, 4) - 1, 1));
  }

  /* primary-butotn (8635:3562 / 8635:3565): desenho 40×40, área de toque 44×44 */
  .estudos__arrow { position: relative; }
  .estudos__arrow::after {
    content: "";
    position: absolute;
    inset: -3px; /* 38 (dentro da borda) + 2×3 = 44 */
    border-radius: 50%;
  }
}
/* /assets/css/sections/08-stats.css */
/* Seção 08 — Stats (Figma 8486:1798) */

/* Raiz: strokes topo/base entram no layout (filhos começam em y=1) → border real */
.stats {
  border-block: 1px solid var(--gray-900);
}

/* --------------------------------------------------------------------------
   Faixas de padrão (8486:1794 topo · 8497:1583 base): 64 + stroke 1 = 65
   -------------------------------------------------------------------------- */
.stats__band { height: 65px; }
.stats__band--top { border-bottom: 1px solid var(--gray-900); }
.stats__band--bottom { border-top: 1px solid var(--gray-900); }

/* Pattern (8486:1883): 1376×62, strokes laterais inside, duas metades de 686 centralizadas */
.stats__pattern {
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* fallback Safari < 16: sem isso as metades de 686 vazam e geram scroll horizontal */
  overflow: clip;
  box-shadow: inset 1px 0 0 var(--gray-900), inset -1px 0 0 var(--gray-900);
}
.stats__pattern--flip { transform: scaleY(-1); } /* 8497:1585 — base espelhada na vertical */

.stats__ellipses { flex: none; width: 686px; height: 62px; }
.stats__ellipses--mirror { transform: scaleX(-1); } /* 8486:1884 — rotate(180°) + scaleY(-1) = espelho horizontal */

/* --------------------------------------------------------------------------
   Números (8486:1552): 4 células de 344×250, stroke esquerdo inside
   -------------------------------------------------------------------------- */
.stats__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  box-shadow: 1px 0 0 var(--gray-900); /* stroke esquerdo da célula vazia 8486:1692 (x = 1408) */
}

.stats__item {
  min-height: 250px; /* 250 no Figma; cresce se a legenda do Customizer for mais longa (não invade a faixa de baixo) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px; /* só age se o conteúdo crescer: no 1440 o space-between já abre 84px */
  padding: 32px;
  overflow-wrap: break-word;
  box-shadow: inset 1px 0 0 var(--gray-900); /* stroke inside — não desloca o texto */
}

/* Valor (8486:1690): Exo SemiBold 40/1.2 — prefixo/sufixo (R$, /MÊS) em 24 */
.stats__value {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.2;
  color: var(--gray-0);
}
.stats__unit { font-size: 24px; }
/* 1024–1199: a coluna estreita não comporta "40.000 /MÊS" em 40 e o "/MÊS" ficaria sozinho na linha (sem palavra viúva) */
@media (min-width: 1024px) and (max-width: 1199px) {
  .stats__value { font-size: 34px; }
  .stats__unit { font-size: 20px; }
}

/* Contador de rolo (assets/js/sections/08-stats.js): cada dígito numa coluna com máscara da altura da linha
   (--odo-lh, em) e a largura do dígito final; a fita (0–9 repetidos, terminando no dígito) sobe até o fim com
   easing suave. Pontuação parada (.stats__odo-sep). No fim o JS devolve o texto original. */
.stats__odo {
  display: inline-flex;
  align-items: flex-start;
  vertical-align: top;
  white-space: nowrap;
}
.stats__odo-col {
  display: inline-block;
  height: var(--odo-lh);
  overflow: clip;
  text-align: center;
}
.stats__odo-reel { display: block; }
.stats__odo-reel > span,
.stats__odo-sep {
  display: block;
  height: var(--odo-lh);
  line-height: var(--odo-lh);
}
.stats__odo-sep { display: inline-block; }
.stats__odo.is-rolling .stats__odo-reel {
  translate: 0 var(--odo-to);
  transition: translate var(--odo-dur, 1.3s) cubic-bezier(.2, .75, .25, 1) var(--odo-delay, 0ms);
}

/* Valor real para leitor de tela enquanto as colunas (aria-hidden) rolam — preso ao valor (posicionado):
   solto, o absolute escaparia e poderia alargar a página no celular */
.stats__value { position: relative; }
.stats__sr {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Faixa de baixo (8497:1585): fechada até o último número parar; abre do centro (.is-opening, keyframe
   m-wipe-out do motion.css) e fica aberta (.is-open). Só com o movimento liberado; impressão: aberta */
.motion-on .stats__pattern[data-stats-band-end]:not(.is-open) { clip-path: inset(0 50% 0 50%); }
.motion-on .stats__pattern[data-stats-band-end].is-opening { animation: m-wipe-out 1s var(--motion-ease) both; }
@media print { .stats__pattern[data-stats-band-end] { clip-path: none !important; animation: none !important; } }

/* Legenda (8486:1691): Cabin 18/1.5 gray-300 (.body-lg) */
.stats__label { width: 100%; text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Telas intermediárias (768–1023): grade 2×2 fluida entre o desktop e o mobile
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__item { min-height: 220px; }
  .stats__item:nth-child(-n+2) { box-shadow: inset 1px 0 0 var(--gray-900), inset 0 -1px 0 var(--gray-900); }
}

/* --------------------------------------------------------------------------
   Mobile — Figma 8635:2371 (375 × 932), vale até 767px
   - Faixas 8635:2372 / 8635:2411: 64 + stroke 1; espaçadores "Statistic" de 32
     (8635:2373/2395, 8635:2412/2434) → Pattern 8635:2374 / 8635:2413 = 100% − 2×32
   - Números 8635:2396: largura total (sem o respiro de 16), 4 células empilhadas
     de 375×200 (8635:2398/2401/2404/2407), padding 32, space-between
   - Strokes inside: base nas células 1–3; a 4ª (8635:2407) só tem o stroke esquerdo
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* No mobile o Pattern não recorta: as elipses passam das bordas e vão até a borda
     da tela (o recorte é da faixa inteira, como o frame no Figma) */
  .stats__band { overflow: hidden; overflow: clip; }
  .stats__band .container { padding-inline: 32px; }
  .stats__pattern { overflow: visible; }

  .stats > .container { padding-inline: 0; } /* só o container dos números (as faixas têm .stats__band no meio) */
  .stats__list { grid-template-columns: minmax(0, 1fr); box-shadow: none; }

  .stats__item { min-height: 200px; } /* 200 no Figma; cresce se a legenda do Customizer quebrar em mais linhas */
  .stats__item:not(:last-child) { box-shadow: inset 0 -1px 0 var(--gray-900); }
  .stats__item:last-child { box-shadow: inset 1px 0 0 var(--gray-900); }

  /* Valor (8635:2399): Exo SemiBold 24/1.2 — prefixo/sufixo no mesmo corpo do valor */
  .stats__value { font-size: 24px; }
  .stats__unit { font-size: inherit; }
}
/* /assets/css/sections/09-como-trabalhamos.css */
/* Seção 09 — Como trabalhamos (Figma 8490:2191) */

.como-trabalhamos {
  background: var(--black-200);
  padding-block: var(--section-py);
}

.como-trabalhamos__inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* Left Service Block (8490:2192) — eyebrow + título, gap 24 (o componente usa 16) */
.como-trabalhamos__head { gap: 24px; overflow-wrap: break-word; }
.como-trabalhamos__title { align-self: stretch; } /* 8490:2194 — largura total (min-w-full) */

/* --------------------------------------------------------------------------
   Frame 84 (8490:2976) — moldura 1px gray-900.
   Neste bloco o Figma inclui os strokes no layout (filhos em 1,1; célula
   8490:2204 abraça 191 = 32+126+32+1; texto de 8490:2220 em x=33), então
   border CSS (border-box) reproduz a geometria exata.
   -------------------------------------------------------------------------- */
.como-trabalhamos__frame { border: 1px solid var(--gray-900); }

/* Main Container (8490:2195) — regra 1 em coluna de 437 (ocupa as 2 linhas);
   área de 937 dividida em 468 | 1 | 467 | 1 para reproduzir as células
   469 + 468 (linha 1) e 468 + 468 (linha 2) com os divisores alinhados. */
.como-trabalhamos__rules {
  display: grid;
  grid-template-columns: 437px 468fr 1px 467fr 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.como-trabalhamos__rule {
  display: flex;
  flex-direction: column;
  padding: 32px;
}
.como-trabalhamos__rule:nth-child(1) { /* 8490:2196 */
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-content: flex-end;
  gap: 32px;
  border-right: 1px solid var(--gray-900);
}
.como-trabalhamos__rule:nth-child(2) { /* 8490:2200 — texto 403 numa célula de 469 */
  grid-column: 2 / 4;
  grid-row: 1;
  padding-right: 33px;
  border-right: 1px solid var(--gray-900);
  border-bottom: 1px solid var(--gray-900);
}
.como-trabalhamos__rule:nth-child(3) { /* 8490:2204 */
  grid-column: 4 / 6;
  grid-row: 1;
  border-bottom: 1px solid var(--gray-900);
}
.como-trabalhamos__rule:nth-child(4) { /* 8490:2208 */
  grid-column: 2 / 3;
  grid-row: 2;
}
.como-trabalhamos__rule:nth-child(5) { /* 8490:2212 */
  grid-column: 3 / 5;
  grid-row: 2;
  border-left: 1px solid var(--gray-900);
}

/* Item (8490:2221 …) — título + descrição, gap 16 */
.como-trabalhamos__rule-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.como-trabalhamos__rule-title { /* 8490:2198 — Exo SemiBold 24/1.3 */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  line-height: round(1.3em, 1px); /* Figma arredonda a linha: 31 / 62 (31,2 somaria 0,8px na grade) */
  color: var(--gray-0);
}

.como-trabalhamos__rule-text { /* 8490:2199 — Cabin 16/1.5 gray-300 */
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-300);
}

/* --------------------------------------------------------------------------
   Illustration (8490:2308) — 372×190, posições absolutas do Figma.
   Projeções isométricas (equivalentes às transformações do Figma):
   --top  : plano deitado   = matrix(.866, -.5, .866, .5, 0, 0)
   --side : plano vertical  = matrix(.866, -.5, 0, 1, 0, 0)
   -------------------------------------------------------------------------- */
.como-trabalhamos__illustration {
  position: relative;
  flex: none;
  height: 190px;
  overflow: clip;
}
.como-trabalhamos__illustration > * { position: absolute; }
.como-trabalhamos__illustration img { max-width: none; }

.como-trabalhamos__iso {
  display: flex;
  align-items: center;
  justify-content: center;
}
.como-trabalhamos__iso > * { flex: none; }
.como-trabalhamos__iso--top > * { transform: rotate(-30deg) skewX(30deg) scaleY(0.86603); }
.como-trabalhamos__iso--side > * { transform: rotate(-30deg) skewX(-30deg) scaleY(0.86603); }

/* Camada inferior (8490:2618) */
.como-trabalhamos__base { left: 77px; top: 109px; }                                      /* 8490:2617 */
.como-trabalhamos__iso--code { left: 77px; top: 56px; width: 218.238px; height: 126px; }  /* 8490:2550 */
.como-trabalhamos__iso--tick-code { left: 171px; top: 181px; width: 0; height: 7.5px; }   /* 8490:2620 */

/* Camada "Screen" (8490:2549) */
.como-trabalhamos__screen-outline { left: 77.5px; top: 53.136px; }                        /* 8490:2547 (inset −0.5 / −0.864) */
.como-trabalhamos__iso--screen { left: 76px; top: 0; width: 219.97px; height: 127px; }    /* 8490:2514 */
.como-trabalhamos__iso--tick-screen { left: 172px; top: 126px; width: 0; height: 7.5px; } /* 8490:2548 */

/* Selo de status (8490:2919) */
.como-trabalhamos__iso--line { left: 43.3px; top: 50px; width: 20.785px; height: 80px; }  /* 8490:2917 */
.como-trabalhamos__iso--status { left: 0; top: 0.5px; width: 85.737px; height: 94.5px; }  /* 8490:2636 */

.como-trabalhamos__tick { position: relative; width: 0; height: 7.5px; }
.como-trabalhamos__tick img { position: absolute; top: 0; left: -0.5px; }

/* Tracejado 0,5px (8490:2917): em 1x o Chrome some com o trecho vertical quando
   pinta o SVG direto sob a projeção; em camada própria ele aparece. */
.como-trabalhamos__dashed { position: relative; width: 24px; height: 68px; will-change: transform; }
.como-trabalhamos__dashed img { position: absolute; top: -0.25px; left: -0.25px; }

/* Cards (8490:2550 / 8490:2514) — 144 de largura, stroke gray-800 */
.como-trabalhamos__card {
  width: 144px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border: 1px solid var(--gray-800);
}
.como-trabalhamos__card--code { height: 108px; gap: 8px; background: var(--black-200); }
.como-trabalhamos__card--screen { background: var(--black-100); }

.como-trabalhamos__code-label { /* 8490:2580 — Cabin 8/1.5 caixa-alta green-300, caixa aparada no cap */
  font-size: 8px;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--green-300);
  text-box: trim-both cap alphabetic;
}

/* Text block (8490:2599) — linhas 3px, raio 4, gray-800 */
.como-trabalhamos__lines,
.como-trabalhamos__lines-indent { display: flex; flex-direction: column; gap: 3px; }
.como-trabalhamos__lines-indent { padding-left: 11px; }
.como-trabalhamos__lines-row { display: flex; gap: 2px; width: 115px; }
.como-trabalhamos__lines span {
  flex: none;
  width: var(--w, 100%);
  height: 3px;
  border-radius: 4px;
  background: var(--gray-800);
}
.como-trabalhamos__lines span.is-fill { flex: 1 0 0; min-width: 1px; width: auto; }

/* Inner container da tela (8490:2513) */
.como-trabalhamos__screen-row { display: flex; align-items: center; gap: 6px; }
.como-trabalhamos__screen-pattern { /* 8490:2403 — padrão 92×14 girado 90° */
  flex: none;
  width: 14px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.como-trabalhamos__screen-pattern img { flex: none; transform: rotate(90deg); }
.como-trabalhamos__screen-ui { /* 8490:2507 */
  flex: 1 0 0;
  min-width: 1px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.como-trabalhamos__screen-ui span {
  background: var(--black-100);
  border: 1px solid var(--gray-800);
}
.como-trabalhamos__screen-header { height: 15px; }                                   /* 8490:2312 */
.como-trabalhamos__screen-buttons { display: flex; gap: 4px; }                       /* 8490:2504 */
.como-trabalhamos__screen-buttons span { flex: 1 0 0; min-width: 1px; height: 15px; }
.como-trabalhamos__screen-lower { flex: 1 0 0; min-height: 1px; display: flex; gap: 4px; } /* 8490:2508 */
.como-trabalhamos__screen-lower span:first-child { flex: none; width: 33.33px; }    /* 8490:2510 */
.como-trabalhamos__screen-lower span:last-child { flex: 1 0 0; min-width: 1px; }    /* 8490:2511 */

/* Status (8490:2636) — "Validação / Pendente" */
.como-trabalhamos__status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--black-200);
  border: 1px solid var(--gray-900);
}
.como-trabalhamos__status img { flex: none; }
.como-trabalhamos__status-label { /* 8490:2639 — 49×27 (15 + 12) */
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}
/* Figma usa leading "normal" (1,215 no Cabin) e arredonda cada linha: 14,58 → 15 e 12,15 → 12.
   O "normal" do Chrome arredonda ascent/descent e dá 15 + 13 (selo 1px mais alto). */
.como-trabalhamos__status-label span:first-child { font-size: 12px; line-height: 1.25; color: var(--gray-0); }                    /* 8490:2640 */
.como-trabalhamos__status-label span:last-child { font-size: 10px; line-height: 1.2; font-weight: 700; color: var(--orange-300); } /* 8490:2641 */

/* --------------------------------------------------------------------------
   Animação de scroll da ilustração (assets/js/sections/09-como-trabalhamos.js)
   --p vai de 0 → 1 conforme a ilustração sobe na tela. Padrão 1 = desenho do
   Figma (sem JS / prefers-reduced-motion a ilustração aparece pronta).
   1. A camada "Screen" começa encaixada sobre a de código (56 = 56 − 0, topo do
      card de código menos topo da tela) e sobe até a posição do Figma.
   2. O tracejado se desenha de baixo para cima enquanto a tela sobe.
   3. O selo "Validação / Pendente" surge quando o tracejado chega nele.
   -------------------------------------------------------------------------- */
.como-trabalhamos__illustration { --p: 1; --lift: 56px; }

.como-trabalhamos__lift {
  translate: 0 calc((1 - var(--p)) * var(--lift));
  will-change: translate;
}

.como-trabalhamos__iso--line { /* desenha de 15% a 85% do progresso */
  clip-path: inset(calc((1 - clamp(0, (var(--p) - 0.15) / 0.7, 1)) * 100%) -4px -4px -4px);
}

.como-trabalhamos__iso--status { /* aparece nos últimos 20% */
  opacity: clamp(0, (var(--p) - 0.8) / 0.2, 1);
  translate: 0 calc((1 - clamp(0, (var(--p) - 0.8) / 0.2, 1)) * 6px);
}

/* Depois de montada e enquanto está na tela (data-loop, .is-floating, JS), as camadas flutuam devagar, cada uma no seu ritmo:
   a tela e o selo descem um pouco e a camada de código sobe — o vão entre elas "respira".
   Só para dentro da caixa de 190 (a tela e o selo encostam no topo, o código no pé).
   transform não briga com o translate da montagem. */
@keyframes como-trabalhamos-float { to { transform: translateY(var(--float)); } }
.como-trabalhamos__illustration.is-floating .como-trabalhamos__lift {
  --float: 5px;
  animation: como-trabalhamos-float 2.8s ease-in-out infinite alternate;
}
.como-trabalhamos__illustration.is-floating :is(.como-trabalhamos__base, .como-trabalhamos__iso--code, .como-trabalhamos__iso--tick-code) {
  --float: -2px;
  animation: como-trabalhamos-float 3.4s ease-in-out .6s infinite alternate;
}
.como-trabalhamos__illustration.is-floating :is(.como-trabalhamos__iso--status, .como-trabalhamos__iso--line) {
  --float: 4px;
  animation: como-trabalhamos-float 2.3s ease-in-out .3s infinite alternate;
}

/* --------------------------------------------------------------------------
   Pattern (8490:2977) — stroke-top inside (não soma altura: diagonais em y=0).
   83 diagonais de 24/22 com margem −7,366 (Figma). O layout do navegador arredonda
   a margem em 1/64px e acumularia 0,5px: −7,375 (= −472/64) + space-between
   distribui a sobra e devolve o passo exato do Figma (16,634 / 14,634).
   -------------------------------------------------------------------------- */
.como-trabalhamos__pattern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset 0 1px 0 var(--gray-900);
  overflow: clip visible; /* em telas menores as diagonais excedentes são cortadas */
}
.como-trabalhamos__stroke {
  position: relative;
  flex: none;
  width: 24px;
  height: 64px;
}
.como-trabalhamos__stroke:not(:last-child) { margin-right: -7.375px; }
.como-trabalhamos__stroke--narrow { width: 22px; }
.como-trabalhamos__stroke img { /* SVG 24,94×64,35 (ou 22,95×64,33) centrado no slot — inset do Figma */
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  translate: -50% -50%;
}

/* --------------------------------------------------------------------------
   Responsivo (768–1023) — regra 1 sobre a grade 2×2; até 767 vale o Mobile abaixo
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .como-trabalhamos__rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .como-trabalhamos__rule,
  .como-trabalhamos__rule:nth-child(n) {
    grid-column: auto;
    grid-row: auto;
    padding: 32px;
    border: 0;
  }
  .como-trabalhamos__rule:nth-child(1) {
    grid-column: 1 / -1;
    justify-content: flex-start;
    border-bottom: 1px solid var(--gray-900);
  }
  .como-trabalhamos__rule:nth-child(2),
  .como-trabalhamos__rule:nth-child(3) { border-bottom: 1px solid var(--gray-900); }
  .como-trabalhamos__rule:nth-child(2),
  .como-trabalhamos__rule:nth-child(4) { border-right: 1px solid var(--gray-900); }
}

/* ==========================================================================
   Mobile — Figma "Mobile" 8635:2435 (375 × 1227), vale até 767px.
   Padding 60/16 vem dos tokens (--section-py / --section-px). A ilustração
   (8635:2442) é a mesma do desktop, nas mesmas posições, numa caixa de 301.
   ========================================================================== */
@media (max-width: 767px) {
  .como-trabalhamos__inner { gap: 40px; } /* 8635:2435 — cabeçalho → moldura */

  /* Left Service Block (8635:2436) — gap 24 (já vale). O Figma arredonda a altura
     de cada linha: 18 × 1,3 = 23,4 → 23 e 28 × 1,2 = 33,6 → 34 (2 linhas = 68). */
  .como-trabalhamos__eyebrow { font-size: 18px; line-height: round(1.3em, 1px); } /* 8635:2437 */
  .como-trabalhamos__title { font-size: 28px; line-height: round(1.2em, 1px); }   /* 8635:2438 */

  /* Main Container (8635:2440) — regras empilhadas, padding 20, divisores 1px gray-900.
     O Figma agrupa as regras 2–5 em 8635:2524 (sem estilo próprio) — não precisa de wrapper. */
  .como-trabalhamos__rules { grid-template-columns: minmax(0, 1fr); }
  .como-trabalhamos__rule:nth-child(n) { padding: 20px; border: 0; }
  .como-trabalhamos__rule:nth-child(1) { gap: 20px; }                                   /* 8635:2441 */
  .como-trabalhamos__rule:nth-child(-n+3) { border-bottom: 1px solid var(--gray-900); } /* 8635:2441 / 2525 / 2529 */
  .como-trabalhamos__rule:nth-child(5) { border-top: 1px solid var(--gray-900); }       /* 8635:2537 — 8635:2533 não tem divisor */

  .como-trabalhamos__rule-title { font-size: 20px; } /* 8635:2522 … — Exo SemiBold 20/1.3 (26) */

  /* Pattern (8635:2541) — faixa de 32 com as mesmas diagonais 24/22 (64 de altura,
     centradas em y −16), passo de 12 (margem −12) e corte nos dois eixos. */
  .como-trabalhamos__pattern {
    height: 32px;
    justify-content: flex-start;
    overflow: clip;
  }
  .como-trabalhamos__stroke:not(:last-child) { margin-right: -12px; }
}

/* A ilustração desenha até x = 296 numa caixa de (largura da tela − 74): abaixo de 370px
   a célula fica mais estreita e o corte pegaria as telas. Reduz em degraus para caber
   inteira (0,9 → 266,4 cabe a partir de 341; 0,8 → 236,8 cabe a partir de 311). */
@media (max-width: 369px) { .como-trabalhamos__illustration { zoom: 0.9; } }
@media (max-width: 340px) { .como-trabalhamos__illustration { zoom: 0.8; } }
/* /assets/css/sections/10-cta.css */
/* Seção 10 — Call to action (Figma 8160:1628) */

.cta {
  --cta-led: #6f7277; /* 8160:1631 — fora da paleta */
  background: var(--black-100);
}

/* --------------------------------------------------------------------------
   Barra de status (8160:1629) — stroke top inside, pt 24, gap 32
   -------------------------------------------------------------------------- */
.cta__status { box-shadow: inset 0 1px 0 var(--gray-900); }

.cta__status-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 24px;
}

.cta__status-item { flex: none; display: flex; align-items: center; gap: 10px; }

.cta__led {
  flex: none;
  width: 7px;
  height: 9px;
  background: var(--cta-led);
  animation: cta-led 2.4s ease-in-out infinite;
}
@keyframes cta-led {
  0%, 60%, 100% { opacity: 1; }
  80%           { opacity: .2; }
}

.cta__status-text {
  flex: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gray-500);
}

/* Icon group (8160:1633) — ícones nas pontas + 20 traços distribuídos */
.cta__signal {
  flex: 1 0 0;
  min-width: 1px;
  height: 13.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cta__signal-icon { flex: none; position: relative; width: 36px; height: 13.5px; }
.cta__signal-icon--wide { width: 54px; }
.cta__signal-icon img { position: absolute; top: 0; left: -0.5px; width: calc(100% + 1px); height: 100%; }
.cta__signal-line { flex: none; width: 1px; height: 13.5px; margin-inline: -0.5px; } /* vetor de largura 0, stroke 1px */

/* --------------------------------------------------------------------------
   Main container (8160:1721) — py 120, justify-between, padrão ao fundo
   -------------------------------------------------------------------------- */
.cta__main {
  position: relative;
  isolation: isolate;
  overflow: hidden; /* fallback: Safari < 16 não tem overflow: clip (o padrão de 1440 geraria rolagem lateral) */
  overflow: clip;
  min-height: 578px;
  padding-block: var(--section-py);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cta__note-row {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.cta__note { width: 408px; max-width: 100%; text-align: right; }

.cta__content { position: relative; z-index: 2; display: flex; align-items: flex-start; }
.cta__body { width: 524px; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.cta__heading { display: flex; flex-direction: column; gap: 16px; }

.cta__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.2;
  color: var(--gray-0);
}
.cta__text { white-space: pre-wrap; } /* preserva o espaço duplo do Figma */

/* Padrão de traços (8160:1729) — 1440 de largura, centralizado no main */
.cta__pattern {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(50% - 0.5px);
  transform: translate(-50%, -50%);
  width: var(--frame-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.cta__pattern-group { width: 100%; display: flex; flex-direction: column; gap: 15px; }
.cta__pattern-group--start { align-items: flex-start; }
.cta__pattern-group--end { align-items: flex-end; }
.cta__dash-slot { width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.cta__dash-row { position: relative; flex: none; height: 24px; }
/* Inset do Figma por linha via --l/--r (ex.: 8160:1957 → left -0.19%) */
.cta__dash-row > img,
.cta__dash-row > svg {
  position: absolute;
  top: 0;
  left: var(--l, 0%);
  width: calc(100% - var(--l, 0%) - var(--r, 0%));
  height: 100%;
  overflow: visible;
}

.cta__dash-row path {
  opacity: var(--o, 1);
  transition: opacity .35s ease, stroke .35s ease;
}
.cta__pattern.is-live .cta__dash-row path {
  animation: cta-dash-blink var(--d, 4s) ease-in-out var(--delay, 0s) infinite;
}
.cta__pattern.is-live .cta__dash-row path.is-lit {
  animation: none;
  opacity: 1;
  stroke: var(--blue-300);
}
@keyframes cta-dash-blink {
  0%, 100% { opacity: var(--o, 1); }
  50%      { opacity: calc(var(--o, 1) * .25); }
}

@media (prefers-reduced-motion: reduce) {
  .cta__led,
  .cta__pattern.is-live .cta__dash-row path { animation: none; }
}

/* --------------------------------------------------------------------------
   Tablet (768–1100) — barra de status encurta (o desktop segue fluido até 1440)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1100px) {
  .cta__status-inner { gap: 20px; }
  .cta__status-inner > :nth-child(n+4) { display: none; } /* 2º ícone + último status */
}

/* --------------------------------------------------------------------------
   Mobile (≤767) · frame Mobile 8635:2625 (375×576)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Container 8635:2626 — pt 24, px 16, gap 20: a linha inteira segue além da tela e é cortada */
  .cta__status { overflow: hidden; overflow: clip; } /* hidden = fallback de Safari < 16 */
  .cta__status-inner { gap: 20px; }
  /* Icon group 8635:2630 / 8635:2674 — 342 fixos (ícones nas pontas + 20 traços a cada 12) */
  .cta__signal { flex: none; width: 342px; }

  /* main container 8635:2718 — h 526, py 60, justify-between; cresce se o texto quebrar mais.
     gap 56 = espaço que sobra em 375 (526 − 120 − 46 − 304): em 375 nada muda e, abaixo disso,
     a nota não encosta no título quando o texto ganha linhas */
  .cta__main { min-height: 526px; gap: 56px; }

  /* Main Description 8635:2720 — Instrument Serif Italic 18/1.3 à direita, largura total.
     Figma arredonda cada linha: 23.4 → 23 (caixa 46 em 2 linhas) */
  .cta__note {
    flex: 1 0 0;
    min-width: 1px;
    width: auto;
    font-size: 18px;
    line-height: round(1.3em, 1px);
  }

  /* Content Container 8635:2722 — largura total; título Cabin SemiBold 28/1.2 (caixa 34) */
  .cta__body { width: 100%; }
  .cta__title { font-size: 28px; line-height: round(1.2em, 1px); }
  .cta__button { align-self: stretch; } /* 8635:2726 — 343×60 */

  /* Pattern 8635:2728 — 1440 centralizado com +0.5 (left calc(50% + 0.5px) no Figma) */
  .cta__pattern { left: calc(50% + 0.5px); }
}
/* /assets/css/sections/10-cta--servicos.css */
/* Chamada final na página Serviços — mobile 8699:5366 (375×628): main container 8699:5459 com 578 de altura
   (na Home, 526). Com justify-between e o padrão centralizado, a nota fica 108 acima do conteúdo e o padrão em y 62. */
@media (max-width: 767px) {
  .page-servicos .cta__main { min-height: 578px; }
}
/* /assets/css/sections/footer.css */
/* Footer (Figma 8165:2501 — símbolo "Footer container") */

.site-footer { background: var(--black-200); }

/* Content Container (8193:512) — pt 120, pb 32, gap 56 */
.site-footer__content {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding-top: var(--section-py);
  padding-bottom: 32px;
}

/* Navigation and Contact (8165:2341) */
.site-footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }

.site-footer__intro { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.site-footer__logo { transition: opacity .2s ease; }
.site-footer__logo:hover { opacity: .8; }
.site-footer__logo img { width: 137px; height: 32px; }

.site-footer__title {
  width: 445px;
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  line-height: round(1.2em, 1px); /* Figma arredonda cada linha: 28.8 → 29 (caixa 87 em 3 linhas) */
  color: var(--gray-0);
}
.site-footer__title em { font-style: normal; color: var(--gray-400); }

/* Newsletter (8165:2346) — input + botão, gap 8; strokes inside (border-box) */
.site-footer__form { position: relative; align-self: stretch; display: flex; align-items: flex-start; gap: 8px; }
.site-footer__input {
  flex: 1 0 0;
  min-width: 1px;
  margin: 0;
  padding: 15px 23px; /* 16/24 do Figma − 1px do stroke */
  border: 1px solid var(--gray-800);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-body);
  font-variation-settings: "wdth" 100;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-0);
  transition: border-color .2s ease;
}
.site-footer__input::placeholder { color: var(--gray-500); opacity: 1; }
.site-footer__input:hover,
.site-footer__input:focus { border-color: var(--gray-500); }
.site-footer__input:focus { outline: none; }
.site-footer__input:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; }
.site-footer__submit { flex: none; padding: 15px 23px; cursor: pointer; } /* 8165:2349 — py 16 (botão menor que o .btn padrão) */
.site-footer__form-msg {
  position: absolute;
  top: calc(100% + 8px);
  left: 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-400);
}

/* Colunas de links e contato (8165:2351) — 740 de largura, gap 32 */
.site-footer__cols { flex: none; width: 740px; display: flex; align-items: flex-start; gap: 32px; }
.site-footer__col { flex: 1 0 0; min-width: 1px; display: flex; flex-direction: column; gap: 16px; }
.site-footer__links { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }

.site-footer__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-0);
}

.site-footer__link,
.site-footer__label,
.site-footer__totop-label,
.site-footer__legal {
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-300);
}
.site-footer__link { display: block; transition: color .2s ease; }
.site-footer__link:hover { color: var(--gray-0); }

/* Contato (8165:2365) — largura = e-mail (nowrap); demais textos quebram */
.site-footer__contact {
  flex: none;
  width: min-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  font-style: normal;
}
.site-footer__contact-item { display: flex; flex-direction: column; gap: 16px; }
.site-footer__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  line-height: round(1.2em, 1px); /* idem: 29 por linha, como no Figma */
  color: var(--gray-0);
  transition: color .2s ease;
}
.site-footer__value--nowrap { white-space: nowrap; }
.site-footer__value:hover { color: var(--gray-300); }

/* Social + voltar ao topo (8165:2375) */
.site-footer__middle { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.site-footer__social { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.site-footer__social .site-footer__label { align-self: stretch; }
.site-footer__icons { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* Ícone redondo 48 (8165:2379) — stroke inside via border-box */
.site-footer__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--gray-800);
  border-radius: 999px;
  transition: border-color .2s ease, background-color .2s ease;
}
.site-footer__icon svg { flex: none; overflow: visible; }
a.site-footer__icon:hover,
.site-footer__totop:hover .site-footer__icon { border-color: var(--gray-500); background: var(--gray-900); }

.site-footer__glyph { position: relative; flex: none; overflow: clip; }
/* mingcute:dribbble-fill (8165:2392) — grupo com inset 8.33% 8.34% 0.77% 8.34% */
.site-footer__glyph--dribbble { width: 24px; height: 24px; }
.site-footer__glyph--dribbble svg { position: absolute; top: 8.33%; left: 8.34%; width: 83.32%; height: 90.9%; }
/* prime:twitter (8165:2397) — 14×14, grupo com inset 4.69% 0 */
.site-footer__glyph--x { width: 14px; height: 14px; }
.site-footer__glyph--x svg { position: absolute; top: 4.69%; left: 0; width: 100%; height: 90.62%; }

/* Voltar ao topo (8165:2404) — texto 95×23 alinhado à direita, gap 16 */
.site-footer__totop { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.site-footer__totop-label { display: block; width: 95px; height: 23px; text-align: right; white-space: nowrap; transition: color .2s ease; }
.site-footer__totop:hover .site-footer__totop-label { color: var(--gray-0); }

/* Copyright (8165:2493) */
.site-footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 24px; white-space: nowrap; }
.site-footer__legal-links { display: flex; align-items: flex-start; gap: 24px; margin: 0; padding: 0; list-style: none; }

/* Pattern (8193:599) — stroke top inside; 83 diagonais, justify-between, mr −6.561 */
.site-footer__pattern {
  display: flex;
  justify-content: center;
  height: 64px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 var(--gray-900);
}
.site-footer__pattern-track {
  flex: none;
  width: max(100%, var(--frame-w));
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Caixa do vetor 24×64 com o SVG em inset −0.27% −1.95% (22×64: −0.25% −2.15%) e mr −6.561.
   Valores em múltiplos de 1/64 px (unidade de layout do Chrome): 24.936 → 24.9375, −0.468 → −0.46875 etc.
   Com decimais "soltos" o arredondamento somava ~0.013px por vetor (+1px na ponta direita). Passo = 17.4375 (Figma 17.439). */
.site-footer__diag { flex: none; overflow: visible; width: 24.9375px; height: 64.34375px; margin: 0 -7.03125px 0 -0.46875px; }
.site-footer__diag--22 { width: 22.9375px; height: 64.3125px; }
.site-footer__diag:last-child { margin-right: -0.46875px; }

/* Ícones e diagonais vêm do sprite inline no início do footer (<use href="#ft-…">) — sem requisição por SVG */
.site-footer__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Leitores de tela */
.site-footer__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Telas menores que o frame
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .site-footer__top { flex-direction: column; gap: 64px; }
  .site-footer__cols { width: 100%; }
}

/* --------------------------------------------------------------------------
   Mobile (≤767) · frame Mobile 8641:1595 (símbolo "Footer container", 375×1459)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Content Container 8635:3302 — pt 60 (--section-py), px 16, pb 16, gap 40 */
  .site-footer__content { gap: 40px; padding-bottom: 16px; }

  /* Navigation and Contact 8635:3303 — tudo em coluna, gap 40 */
  .site-footer__top { align-items: stretch; gap: 40px; }

  /* Main Heading 8635:3307 — Exo SemiBold 20/1.2, largura total */
  .site-footer__title { align-self: stretch; width: auto; font-size: 20px; }

  /* Campo 8635:3309 — texto com reticências quando não cabe (text-ellipsis no Figma) */
  .site-footer__input { text-overflow: ellipsis; }

  /* Links and Contact Sections 8635:3313 — coluna, gap 32 */
  .site-footer__cols { width: auto; flex-direction: column; align-items: stretch; }
  .site-footer__col { flex: none; }

  /* Contact Information 8635:3325 — largura total; valores Exo SemiBold 20/1.2 */
  .site-footer__contact { width: auto; }
  .site-footer__value { font-size: 20px; }
  .site-footer__value--nowrap { white-space: normal; overflow-wrap: anywhere; } /* e-mail longo em telas estreitas */

  /* Container 8635:3335 — Social (8635:3336) e Voltar ao topo (8635:3364) em coluna, gap 40 */
  .site-footer__middle { flex-direction: column; align-items: stretch; gap: 40px; }
  .site-footer__social { align-items: stretch; }
  .site-footer__icons { flex-wrap: wrap; }
  .site-footer__totop { align-items: flex-start; } /* rótulo 95×23 e ícone à esquerda */

  /* Copyright Notice 8635:3369 — coluna, gap 32; links lado a lado (gap 24) */
  .site-footer__legal { flex-direction: column; align-items: stretch; gap: 32px; white-space: normal; }
  .site-footer__legal-links { flex-wrap: wrap; white-space: nowrap; }

  /* Área de toque sem mexer no layout: links de 24 com gap 16 → ±8 (40); valores e links legais → 44 */
  .site-footer__link,
  .site-footer__value { position: relative; }
  .site-footer__link::after,
  .site-footer__value::after { content: ""; position: absolute; inset: -10px 0; }
  .site-footer__links .site-footer__link::after { inset: -8px 0; }
  .site-footer__legal-links .site-footer__link::after { inset: -10px -12px; }
  /* Logo 8635:3306 (137×32) → alvo de 44 (pt 60 acima, gap 24 abaixo) */
  .site-footer__logo { position: relative; }
  .site-footer__logo::after { content: ""; position: absolute; inset: -6px 0; }

  /* Pattern 8635:3374 — h 32; diagonais 24/22×64 centradas (y −16) com mr −12: passo 12, faixa de 994.
     Mesmo inset do desktop (−0.46875 de cada lado) → mr da imagem = −12 − 0.46875 */
  .site-footer__pattern { height: 32px; align-items: center; }
  .site-footer__pattern-track { width: auto; justify-content: flex-start; }
  .site-footer__diag { margin-right: -12.46875px; }
  .site-footer__diag:last-child { margin-right: -0.46875px; }
}