/* ==========================================================================
   Saara · sistema visual
   Base estrutural: a mesma do site (páginas, painel, dados). Desenho próprio da Saara:
   claro, arejado, arredondado; texturas do deserto recortadas em círculo.
   Identidade: Brand Book da Saara (paleta, texturas do deserto, símbolo, Nexa).
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Superfícies: claras e arejadas. Cinza oficial no fundo, branco nos cartões. */
  --paper:        #F4F4F4;   /* off-white (Brand Book) */
  --paper-2:      #FFFFFF;
  --paper-3:      #EAE8E5;
  --ink:          #1E1E1E;   /* chumbo (Brand Book) */
  --ink-2:        #4D4B49;
  --ink-3:        #85817C;
  --line:         rgb(30 30 30 / .1);
  --line-strong:  rgb(30 30 30 / .22);

  /* Cores oficiais da Saara (Brand Book) */
  --brand:        #E25220;   /* laranja: ação e destaque */
  --brand-ink:    #C6431A;
  --blue:         #2E4F65;   /* azul petróleo: estrutura */
  --blue-2:       #24404F;
  --sand:         #DCBFA5;   /* areia: números e detalhes */
  --sand-2:       #EFE4D9;

  /* Texturas oficiais do deserto. Só aparecem recortadas em círculo. */
  --tx-azul:    url("../img/textura/azul.jpg");
  --tx-laranja: url("../img/textura/laranja.jpg");
  --tx-areia:   url("../img/textura/areia.jpg");
  --tx-duna:    url("../img/textura/duna.jpg");

  --case-1: #2E4F65; --case-2: #E25220; --case-3: #DCBFA5;
  --case-4: #C6431A; --case-5: #3E6A86; --case-6: #8A5A3C; --case-ink: #1A1B1D;

  /* Tipografia: Urbanist (parente da Nexa: geométrica, do fino ao black) + Figtree */
  --font-display: 'Urbanist', system-ui, sans-serif;
  --font-text:    'Figtree', system-ui, sans-serif;
  --font-mono:    'Figtree', system-ui, sans-serif;

  --radius:    22px;
  --radius-lg: clamp(28px, 4vw, 48px);

  /* Ritmo */
  --gutter:       clamp(1.25rem, 4vw, 4rem);
  --section-y:    clamp(4.5rem, 8.5vw, 7.75rem);
  --maxw:         1440px;

  /* Movimento */
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Escala tipográfica: todo texto do site usa um destes degraus ---- */
  --t-label:   .75rem;                               /* rótulos em caixa alta (mono) */
  --t-small:   .9375rem;                             /* texto de apoio em cartões */
  --t-text:    clamp(1rem, 1.2vw, 1.0625rem);        /* parágrafo */
  --t-lede:    clamp(1.0625rem, 1.5vw, 1.25rem);     /* texto de abertura */
  --t-h4:      clamp(1.0625rem, 1.8vw, 1.375rem);    /* nomes de itens */
  --t-h3:      clamp(1.25rem, 2.2vw, 1.625rem);      /* títulos de cartão */
  --t-h2s:     clamp(1.375rem, 3vw, 2.25rem);        /* título de seção menor */
  --t-h2:      clamp(1.75rem, 4.6vw, 3.75rem);       /* título de seção */
  --t-display: clamp(2.125rem, 6vw, 5.75rem);        /* título de página */
  --t-num:     clamp(2.75rem, 5vw, 4rem);            /* números grandes */
  --track-display: -0.03em;                          /* títulos */
  --track-text:    -0.02em;                          /* nomes e textos de destaque */
  --track-label:   .12em;                            /* rótulos mono */
  --lh-tight: 1;  --lh-title: 1.1;  --lh-snug: 1.3;  --lh-lede: 1.5;  --lh-body: 1.6;

  /* ---- Escala de espaço ---- */
  --sp-1: .5rem;  --sp-2: .75rem;  --sp-3: 1rem;  --sp-4: 1.5rem;
  --sp-5: clamp(2rem, 4vw, 3rem);                    /* título -> conteúdo */
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.section--brand :focus-visible,
.theme-brand .pagehead :focus-visible,
.zap:focus-visible { outline-color: #0D0D0D; }

::selection { background: var(--brand); color: #fff; }

/* --- Layout ------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
/* Ritmo vertical: nem toda seção merece o mesmo respiro. */

.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.section--tint { background: var(--paper-2); }
.section--ink  { background: var(--ink); color: var(--paper); }
.section--brand { background: var(--brand); color: var(--ink); }
.section--brand .eyebrow { color: rgb(13 13 13 / .85); }

/* Por que existimos: título e texto lado a lado, sem vazio na lateral. */
.why { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 900px) {
  .why { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.why .lede { max-width: 48ch; }

/* --- Tipografia --------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow--brand { color: var(--brand); }

/* Frase longa de posicionamento — largura NORMAL, caixa baixa. */
.statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'wdth' 100;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
/* A palavra que carrega o argumento. Era itálico serifado; agora peso + cor. */
.statement em { font-style: normal; font-weight: 700; color: var(--brand); }

/* Título curto de seção — largura EXPANDIDA, caixa alta. */
.title {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 125;
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.title--sm { font-size: var(--t-h2s); }

/* O lede apoia o título — nunca compete com ele. */
.lede {
  font-size: var(--t-text);
  line-height: var(--lh-body);
  color: var(--ink-2);
  max-width: 46ch;
}

.body { color: var(--ink-2); max-width: 65ch; }

.mono {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
}

.brandmark { color: var(--brand); }

/* --- Header ------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-scrolled {
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 125;
  font-size: 1.25rem;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  white-space: nowrap;
  /* área de toque de 44px sem mudar o tamanho visual */
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav__links {
  display: none;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  align-items: center;
}
.nav__links a {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-2);
  position: relative;
  padding-block: 0.25rem;
  transition: color .2s ease;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--brand);
  transition: right .3s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { right: 0; }
.nav__links a[aria-current="page"] { color: var(--ink); }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: none;
  border: 0;
  min-height: 44px;
  padding: .5rem 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.nav__toggle svg { width: 20px; height: 14px; }

/* Menu mobile em tela cheia */
.menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--paper);
  padding: 96px var(--gutter) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; }
.menu__list { display: grid; gap: .25rem; }
.menu__list a {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 125;
  font-size: clamp(1.75rem, 9vw, 3rem);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  line-height: var(--lh-title);
  border-bottom: 1px solid var(--line);
  padding-block: .35rem;
  display: block;
}
.menu__list a:hover,
.menu__list a[aria-current="page"] { color: var(--brand); }
.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--ink-3);
}

/* --- Botões ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.9rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); background: var(--brand); border-color: var(--brand); color: #fff; }
.btn svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.btn--onink { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--onink:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: .35rem;
  transition: border-color .25s ease, color .2s ease;
}
.link-arrow svg { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.link-arrow:hover { border-color: var(--ink); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --- Hero --------------------------------------------------------------- */
.hero { padding-top: clamp(6.5rem, 12vw, 9.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- Retratos em recorte: quem atende, de verdade ---------------------- */

/* --- Faixa de prova: números + selos ----------------------------------- */

/* A frente integrada é o argumento principal — ganha corpo. */

.selos { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2rem); }
.selos img { height: clamp(20px, 2.6vw, 28px); width: auto; opacity: .68; filter: grayscale(1); }
.selos span {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --- Faixa de logos de clientes ---------------------------------------- */
.logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.logos div { background: var(--paper); display: grid; place-items: center; padding: clamp(.75rem, 1.6vw, 1.25rem); aspect-ratio: 3 / 2; }
.logos img {
  max-height: clamp(72px, 9.5vw, 124px);
  width: auto;
  max-width: 92%;
  opacity: .62;
  filter: grayscale(1);
  transition: opacity .25s ease;
}
.logos div:hover img { opacity: .9; }

/* --- Vitrine de trabalhos (aqui mora a cor) ----------------------------- */

/* Print de site inteiro carrega informação demais.
   A moldura reduz o print a um objeto e dá o contexto de "isto é um site". */

.browser {
  background: var(--paper);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  box-shadow: 0 -4px 32px rgb(13 13 13 / .10);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.browser__bar i { width: 7px; height: 7px; border-radius: 50%; background: #D8D6D1; }
.browser__bar em {
  flex: 1;
  height: 7px;
  margin-left: 8px;
  border-radius: 4px;
  background: var(--paper-2);
  max-width: 45%;
}
.browser img {
  width: 100%;
  height: auto;
  display: block;
  object-position: top center;
}

/* Telas de site: largas. Capas de marca: quase quadradas. Cada uma no seu grid. */

/* Placeholder tipográfico enquanto a foto real do case não entra */

.work__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h4);
  letter-spacing: var(--track-text);
}

/* --- Serviços ----------------------------------------------------------- */
.services { display: grid; gap: 0; border-top: 1px solid var(--line); }
.service {
  display: grid;
  gap: .75rem 2rem;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--line);
  transition: background .3s ease, padding-inline .3s var(--ease);
  align-items: start;
}
.service:hover { background: var(--paper-2); }
.service__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: 'wdth' 125;
  font-size: var(--t-h2s);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  transition: color .25s ease;
}
.service:hover .service__name { color: var(--brand); }
.service__desc { color: var(--ink-2); max-width: 52ch; font-size: var(--t-small); }

.services--grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.services--grid .service {
  display: grid;
  gap: .75rem;
  align-content: start;
  background: var(--paper);
  border: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.services--grid .service:hover { background: var(--paper-2); padding-inline: clamp(1.5rem, 3vw, 2.25rem); }
.services--grid .service__name { font-size: var(--t-h3); }
.services--grid .service__desc { font-size: var(--t-small); max-width: none; }
.services--grid .service__more {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: .25rem;
}
.services--grid .service:hover .service__more { color: var(--brand); }

/* --- Números / prova ---------------------------------------------------- */
.stats { display: grid; gap: 2rem; }
.stat { border-top: 1px solid currentColor; padding-top: 1rem; }

/* --- Logos de clientes -------------------------------------------------- */

/* --- Citação ------------------------------------------------------------ */

.depos { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.depo { background: var(--paper); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1rem; align-content: start; }
.depo__stars { display: flex; gap: 2px; }
.depo__stars svg { width: 14px; height: 14px; fill: var(--brand); }
.depo__text { font-size: var(--t-text); line-height: var(--lh-lede); color: var(--ink); }
.depo__who { display: flex; align-items: center; gap: .625rem; margin-top: auto; padding-top: .25rem; }
.depo__who b { font-size: var(--t-small); font-weight: 600; letter-spacing: var(--track-text); }
.depo__who span { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }

/* --- CTA final ---------------------------------------------------------- */
.cta { display: grid; gap: clamp(1.25rem, 2.6vw, 1.75rem); justify-items: center; text-align: center; }
.cta .statement { max-width: 16ch; }
.cta .lede { max-width: 60ch; }
.cta .hero__actions { justify-content: center; }

/* --- Footer ------------------------------------------------------------- */
.foot { background: var(--ink); color: var(--paper); padding-block: clamp(3rem, 7vw, 5rem) 2rem; }
.foot a { color: rgba(255,255,255,.72); transition: color .2s ease; }
.foot a:hover { color: var(--brand); }
.foot__grid { display: grid; gap: 2.5rem; }
.foot__head { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: .9rem; }
.foot__list { display: grid; gap: .5rem; font-size: var(--t-small); }
.foot__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 125;
  font-size: clamp(2.5rem, 14vw, 10rem);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
}
.foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--track-label);
  color: rgba(255,255,255,.45);
  margin-top: 1.5rem;
}

/* --- Formulário --------------------------------------------------------- */

/* --- Páginas internas: cabeçalho ---------------------------------------- */
.pagehead { padding-top: clamp(7rem, 15vw, 10rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.pagehead__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; border-top: 1px solid var(--line-strong); padding-top: .85rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* --- Equipe ------------------------------------------------------------- */

/* --- Utilitários -------------------------------------------------------- */
.stack { display: grid; }
.stack > * { min-width: 0; }
.gap-sm { gap: .75rem; }
.gap-md { gap: 1.5rem; }
.gap-lg { gap: clamp(2rem, 5vw, 3.5rem); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: .75rem 1.25rem;
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase;
  transition: top .2s ease;
}
.skip:focus { top: 1rem; }

/* --- Trava anti-overflow ------------------------------------------------ */
 .stats, .services{ min-width: 0; }
 .stats > *{ min-width: 0; }

/* --- Reveal ------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }

/* Entrada do hero no load */
@keyframes heroIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero .eyebrow  { animation: heroIn .8s var(--ease) both; }
.hero .statement { animation: heroIn .9s var(--ease) .1s both; }
.hero .lede      { animation: heroIn .9s var(--ease) .22s both; }
.hero__actions   { animation: heroIn .9s var(--ease) .34s both; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width: 640px) {
  
  
  
  .depos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
  
  .service { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .services--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services--grid .service { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
  .hero__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr); align-items: start; }
  
  .logos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .service { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.8fr); align-items: center; }
  .services--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .services--grid .service { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .service:hover { padding-inline: 1.25rem; }
  .foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; }
  
  
}

/* --- Acessibilidade de movimento ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --- Impressão ---------------------------------------------------------- */
@media print {
  .nav, .menu, .btn { display: none !important; }
  body { color: #000; background: #fff; }
}

/* --- Serviços sobre o laranja (home) ------------------------------------ */
.services__head { display: grid; gap: 1.25rem; }
.services__lede {
  font-weight: 500;
  font-size: var(--t-lede);
  line-height: var(--lh-snug);
  max-width: 38ch;
}
@media (min-width: 900px) {
  .services__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.section--brand .services--grid { background: transparent; border: 0; border-top: 1px solid #0D0D0D; gap: 0; }
.section--brand .services--grid .service { background: transparent; border-bottom: 1px solid #0D0D0D; padding-inline: 0; padding-right: clamp(1rem, 2.5vw, 2rem); }
@media (min-width: 640px) { .section--brand .services--grid .service:nth-child(even) { border-left: 1px solid #0D0D0D; padding-left: clamp(1rem, 2.5vw, 2rem); } }
@media (min-width: 900px) {
  .section--brand .services--grid .service { border-left: 1px solid #0D0D0D; padding-left: clamp(1rem, 2.5vw, 2rem); }
  .section--brand .services--grid .service:first-child { border-left: 0; padding-left: 0; }
}
.section--brand .services--grid .service:hover { padding-left: clamp(1rem, 2.5vw, 2rem); }
.section--brand .services--grid .service:hover { background: var(--ink); color: var(--paper); }
.section--brand .services--grid .service:hover .service__name,
.section--brand .services--grid .service:hover .service__more { color: var(--brand); }
.section--brand .service__desc { color: rgb(13 13 13 / .78); }
.section--brand .services--grid .service:hover .service__desc { color: rgb(255 255 255 / .78); }
.section--brand .services--grid .service__more { color: rgb(13 13 13 / .8); }

/* --- Contato: mapa ------------------------------------------------------ */
.map { border: 1px solid var(--line); background: var(--paper-2); height: clamp(340px, 52vw, 600px); }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* --- Rodapé: redes em ícone, na cor da marca ---------------------------- */
.foot__social { display: flex; gap: .75rem; }
.foot__social a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgb(255 74 28 / .45);
  border-radius: 50%;
  color: var(--brand);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.foot__social a:hover { background: var(--brand); color: var(--ink); border-color: var(--brand); }
.foot__social svg { width: 20px; height: 20px; }

/* --- Topo das páginas internas: texto de apoio alinhado à grade -------- */
.pagehead .lede {
  font-size: var(--t-lede);
  line-height: var(--lh-lede);
  color: var(--ink);
  max-width: 40ch;
}
@media (min-width: 900px) {
  /* À esquerda e mais largo: menos linhas, alinhado ao título */
  .pagehead .lede { max-width: 82ch; }
}

/* --- Sobre: missão e visão lado a lado --------------------------------- */
.mv { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 760px) { .mv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4.5rem); } }

/* --- Sobre: time com o texto ao lado ----------------------------------- */
.people { display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: end; }
.people__text .lede { max-width: 36ch; }
.people__team { display: grid; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 1.5rem); }
.person { margin: 0; display: grid; gap: .85rem; }
.person img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center;
  filter: grayscale(1) contrast(1.04);
  transition: filter .5s ease;
}
.person:hover img { filter: grayscale(0); }
.person figcaption { display: grid; gap: .2rem; border-top: 1px solid var(--line-strong); padding-top: .75rem; }
.person figcaption b { font-family: var(--font-display); font-weight: 600; font-size: var(--t-lede); letter-spacing: var(--track-text); }
.person figcaption span { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.person:nth-child(2) { margin-top: clamp(0rem, 6vw, 4.5rem); }
@media (min-width: 900px) {
  .people { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(3rem, 7vw, 6rem); }
  .people__text { align-self: start; position: sticky; top: 7rem; }
}

/* Sobre: missão e visão com o texto oficial (mais longo) */
.mv__text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-text);
  max-width: 34ch;
}

/* --- Marketing: cada entrega com foto e texto, em zigue-zague ---------- */
.features { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.feature { display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-items: center; }
.feature__media {
  aspect-ratio: 4 / 3;
  background: var(--brand);
  display: grid; place-items: end start;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  overflow: hidden;
}
/* o número fica por baixo da foto: só aparece enquanto a foto não existe */
.feature__media span {
  font-family: var(--font-display); font-weight: 800; font-variation-settings: 'wdth' 125;
  font-size: clamp(4rem, 12vw, 9rem); line-height: var(--lh-tight); letter-spacing: var(--track-display);
  color: rgb(13 13 13 / .9);
}
.feature__media { position: relative; }
.feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature__body { display: grid; gap: .85rem; max-width: 46ch; }
.feature__title {
  font-family: var(--font-display); font-weight: 700; font-variation-settings: 'wdth' 125;
  font-size: var(--t-h2s); line-height: var(--lh-title); letter-spacing: var(--track-display); text-transform: uppercase;
}
.feature__text { font-size: var(--t-text); line-height: var(--lh-body); color: var(--ink-2); }
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5.5rem); }
  .feature:nth-child(even) .feature__media { order: 2; }
}

/* --- Fotos da estrutura (P&B, como as fotos do time) ------------------- */

.space__head { display: grid; gap: 1.25rem; }
.space__head .lede { max-width: 42ch; }
@media (min-width: 900px) {
  .space__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.mosaic { display: grid; gap: clamp(.5rem, 1.5vw, 1rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaic img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.mosaic__main { grid-column: 1 / -1; aspect-ratio: 16 / 9 !important; }
@media (min-width: 900px) {
  .mosaic { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .mosaic__main { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto !important; }
}

/* Títulos de etapas e valores: um tamanho só em todas as páginas */
.step__title {
  font-family: var(--font-display); font-weight: 700; font-variation-settings: 'wdth' 125;
  font-size: var(--t-h3); line-height: var(--lh-tight); letter-spacing: var(--track-display); text-transform: uppercase;
  margin-bottom: .5rem;
}

/* --- Cases na home: fundo laranja, três colunas com linhas, sem caixas -----
   Mesmo desenho das quatro frentes. O número grande é o destaque; o desafio e o que
   foi feito ficam dentro de <details>, abertos no "Ver o case". */
.cases__head { display: grid; gap: 1rem; align-items: end; }
.cases__head .lede { max-width: 44ch; color: rgb(13 13 13 / .82); }
.cases { display: grid; border-top: 1px solid #0D0D0D; }
.case {
  display: grid; gap: 0; align-content: start;
  padding: clamp(1.5rem, 3vw, 2rem) 0 clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid #0D0D0D;
}
.case__num { display: grid; gap: .6rem; padding-top: 1.25rem; }
.case__tag {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase;
  color: rgb(13 13 13 / .75); line-height: var(--lh-lede);
  margin-top: 1.25rem;
}
.case__num b {
  font-family: var(--font-display); font-weight: 700; font-variation-settings: 'wdth' 125;
  font-size: var(--t-num); line-height: var(--lh-tight); letter-spacing: var(--track-display);
  color: var(--paper); text-transform: uppercase; white-space: nowrap;
}
.case__num > span { font-size: 1rem; color: var(--ink); line-height: var(--lh-lede); text-wrap: balance; }
.case__name {
  font-family: var(--font-display); font-weight: 700; font-variation-settings: 'wdth' 125;
  font-size: var(--t-h4); line-height: var(--lh-title); letter-spacing: var(--track-display); text-transform: uppercase;
}
.case__extras { display: grid; gap: .45rem; list-style: none; padding-left: 0; margin-top: .8rem; }
.case__extras li { font-size: var(--t-small); line-height: var(--lh-lede); color: rgb(13 13 13 / .82); padding-left: 1.1rem; position: relative; }
.case__extras li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 2px; background: var(--paper); }
.case__more { margin-top: 1.5rem; }
.case__more summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; font-size: var(--t-small); font-weight: 600; letter-spacing: var(--track-text); color: var(--ink);
  border-bottom: 1px solid #0D0D0D; padding-block: .5rem; transition: color .2s ease, border-color .2s ease;
}
.case__more summary::-webkit-details-marker { display: none; }
.case__more summary:hover { color: var(--paper); border-color: var(--paper); }
.case__more summary svg { width: 12px; height: 12px; transition: transform .25s var(--ease); }
.case__more summary span + span { display: none; }
.case__more[open] summary span:first-child { display: none; }
.case__more[open] summary span + span { display: inline; }
.case__more[open] summary svg { transform: rotate(180deg); }
.case__detail { display: grid; gap: .55rem; padding-top: 1.25rem; }
.case__label { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--paper); margin-top: .75rem; }
.case__label:first-child { margin-top: 0; }
.case__text { font-size: var(--t-small); line-height: var(--lh-body); color: rgb(13 13 13 / .82); text-wrap: pretty; }
.case__text--result { color: var(--ink); }
@media (min-width: 640px) {
  .cases__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
@media (min-width: 900px) {
  .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case { padding-inline: clamp(1rem, 2.5vw, 2rem); border-left: 1px solid #0D0D0D; }
  .case:first-child { padding-left: 0; border-left: 0; }
  .case:last-child { padding-right: 0; }
}

/* --- Tráfego: entregas em grade 2x2, sem foto -------------------------- */
/* Linhas feitas com borda de cada bloco (não com fundo escuro), para não aparecer
   um bloco preto enquanto os itens ainda estão surgindo na rolagem. */
.pillars { display: grid; border-top: 1px solid var(--line-strong); }
.pillar { border-bottom: 1px solid var(--line-strong); }
.pillar {
  display: grid; gap: .9rem; align-content: start;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(0rem, 3vw, 2.5rem) clamp(1.75rem, 4vw, 3rem) 0;
  transition: background .3s ease;
}
.pillar__n {
  font-family: var(--font-display); font-weight: 800; font-variation-settings: 'wdth' 125;
  font-size: var(--t-num); line-height: var(--lh-tight); letter-spacing: var(--track-display);
  color: var(--brand);
}
.pillar__title {
  font-family: var(--font-display); font-weight: 700; font-variation-settings: 'wdth' 125;
  font-size: var(--t-h3); line-height: var(--lh-title); letter-spacing: var(--track-display); text-transform: uppercase;
  max-width: 18ch;
}
.pillar__text { font-size: var(--t-text); line-height: var(--lh-body); color: var(--ink-2); max-width: 44ch; }
@media (min-width: 760px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar:nth-child(odd) { border-right: 1px solid var(--line-strong); }
  .pillar:nth-child(even) { padding-left: clamp(1.5rem, 4vw, 3.5rem); padding-right: 0; }
}

/* --- Faixa laranja intercalada (Tráfego) ------------------------------- */
.band { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.band .statement { max-width: 18ch; font-size: var(--t-h2); }
.band__side { display: grid; gap: 1.25rem; align-content: end; }
.band__text { font-size: var(--t-lede); line-height: var(--lh-lede); font-weight: 500; max-width: 38ch; }
/* Etiquetas em grade 2x2: mesma largura, espaçamento igual nas duas direções */
.band__tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; max-width: 30rem; }
/* Etiquetas sobre o laranja: bloco preto com a letra no laranja da própria faixa.
   Preto fixo (o tema escuro inverte --ink). Laranja #FF4A1C sobre #0D0D0D ≈ 6,5:1. */
.band__tags span {
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--brand); background: #0D0D0D;
  border: 1.5px solid #0D0D0D; padding: .75rem .95rem; line-height: var(--lh-title);
  display: flex; align-items: center;
}
@media (min-width: 900px) {
  .band { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: clamp(2.5rem, 6vw, 5rem); }
}

/* --- Portfólio lido de assets/data/portfolio.json ---------------------- */
.pf-filters { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: clamp(1.25rem, 3vw, 2rem); }
.pf-filters button {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase;
  background: transparent; color: var(--ink); border: 1px solid var(--line-strong);
  min-height: 44px; padding: .6rem 1rem; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pf-filters button sup { font-size: var(--t-label); opacity: .6; margin-left: .2rem; vertical-align: super; line-height: 0; }
.pf-filters button:hover { border-color: var(--brand); color: var(--brand); }
.pf-filters button.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.75rem, 1.5vw, 1.25rem); padding-inline: var(--gutter); }
.pf-card { display: block; background: var(--paper); overflow: hidden; }
.pf-card__meta, .pf-card__desc { padding-inline: 1rem !important; }
.pf-card[hidden] { display: none; }
.pf-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.pf-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pf-card:hover .pf-card__media img { transform: scale(1.04); }
.pf-card__meta { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem var(--gutter) .4rem; }
.pf-card__name { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h4); letter-spacing: var(--track-text); }
.pf-card__tag { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.pf-card:hover .pf-card__name { color: var(--brand); }
.pf-card__desc { padding: 0 var(--gutter) 1rem; font-size: var(--t-small); color: var(--ink-2); }
.pf-card__meta:last-child { padding-bottom: 1.4rem; }
@media (min-width: 560px) {
  .pf-card__meta { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1rem; }
}
@media (min-width: 900px) {
  .pf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--maxw); margin-inline: auto; }
}

/* --- Página em laranja (Design e marca): topo chapado na cor da marca -- */
.theme-brand .pagehead { background: var(--brand); color: var(--ink); padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.theme-brand .pagehead .eyebrow--brand { color: var(--ink); }
.theme-brand .pagehead .statement em { color: var(--paper); }
.theme-brand .pagehead .lede { color: var(--ink); }
.theme-brand .pagehead__meta { border-top-color: var(--ink); }
.theme-brand .nav:not(.is-scrolled) .brandmark { color: var(--paper); }
.theme-brand .nav:not(.is-scrolled) .nav__links a { color: var(--ink); }
.theme-brand .nav:not(.is-scrolled) .nav__links a::after { background: var(--ink); }

/* --- Rodapé: selos de parceiro (vieram do topo da home) ---------------- */
.foot__proof {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-block: clamp(1.25rem, 2.6vw, 1.75rem);
  border-top: 1px solid rgba(255,255,255,.16);
}
.foot__proof p { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: rgba(255,255,255,.45); }
.foot__proof .selos img { filter: grayscale(1) brightness(0) invert(1); opacity: .7; }
.foot__proof + .foot__mark { margin-top: 0; }

/* --- Rodapé tom sobre tom ----------------------------------------------
   Continua escuro, mas um grafite um pouco mais claro que o bloco "Vamos conversar"
   (separa os dois) e a assinatura MARCO em relevo quase apagado, sem pesar. */
.foot { background: #171717; }
.foot__mark { color: rgba(255,255,255,.07); border-top-color: rgba(255,255,255,.08); }
.foot__mark .brandmark { color: var(--brand); opacity: .85; }
.foot__proof { border-top-color: rgba(255,255,255,.08); }
.foot__proof .selos img { opacity: .45; }
.foot__social a { border-color: rgba(255,74,28,.3); }
.foot__legal { color: rgba(255,255,255,.35); }

/* Rodapé: "/™" mais discreto, no mesmo tom sobre tom */
.foot__mark .brandmark { color: var(--brand); opacity: .35; }

/* --- Web: plataformas de e-commerce ------------------------------------
   Sem linha própria: a linha de baixo da grade de serviços já separa. */
.platforms { display: grid; gap: 1.25rem; align-items: center; }
.pillars + .platforms { margin-top: calc(-1 * clamp(0.5rem, 1.5vw, 1rem)); }
.platforms__label { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }
.platforms__logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.75rem, 4vw, 3.5rem); }
.platforms__logos img { width: auto; filter: grayscale(1); opacity: .6; transition: filter .3s ease, opacity .3s ease; }
/* alturas ajustadas por logo, para todos terem o mesmo peso visual */
.platforms__logos img[alt="Shopify"]     { height: clamp(24px, 2.6vw, 32px); }
.platforms__logos img[alt="WooCommerce"] { height: clamp(20px, 2.2vw, 27px); }
.platforms__logos img[alt="Nuvemshop"]   { height: clamp(28px, 3vw, 38px); }
.platforms__logos img[alt="Tray"]        { height: clamp(26px, 2.8vw, 36px); }
.platforms__logos img:hover { filter: none; opacity: 1; }
@media (min-width: 900px) { .platforms { grid-template-columns: minmax(0, 1fr) auto; } }
/* Na home: logo abaixo do título da seção Web, com uma linha fina que a separa dos sites. */
.platforms--home { margin-top: clamp(1.25rem, 2.6vw, 1.75rem); padding-top: clamp(1rem, 2vw, 1.25rem); border-top: 1px solid var(--line); }

/* --- Portfólio em formato de site (moldura de navegador) --------------- */
.pf-grid--site { grid-template-columns: minmax(0, 1fr); }
.pf-card__media--site {
  aspect-ratio: 16 / 10; display: grid; align-content: end;
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) 0;
}
.pf-card__media--site img { height: auto; }
.pf-card:hover .pf-card__media--site img { transform: none; }
.pf-card:hover .pf-card__media--site .browser { transform: translateY(-6px); }
.pf-card__media--site .browser { transition: transform .5s var(--ease); }
@media (min-width: 760px) { .pf-grid--site { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pf-grid--site { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Âncoras não ficam escondidas atrás do menu fixo */
section[id] { scroll-margin-top: 72px; }

/* ==========================================================================
   Revisão mobile (21/09/2026)
   ========================================================================== */
/* Etiqueta dos projetos: à esquerda no celular, à direita só quando cabe ao lado do nome */

/* Links do rodapé e "ver mais": área de toque confortável */
.foot__list { gap: .15rem; }
.foot__list a { display: inline-block; padding-block: .55rem; }
.link-arrow { min-height: 44px; padding-block: .6rem; }

@media (max-width: 559px) {
  /* Botões do topo e do "Vamos conversar": mesma largura, empilhados */
  .hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .hero__actions .btn { width: 100%; }
  .cta .hero__actions { max-width: 22rem; }
  /* Linha final do rodapé empilhada */
  .foot__legal { flex-direction: column; gap: .35rem; }
  /* Topo das páginas internas */
  .pagehead { padding-top: 6.5rem; }
  .pagehead__meta { flex-direction: column; gap: .3rem; }
  /* Plataformas: logos em grade 2x2 */
  .platforms__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; justify-items: start; }
}

/* ==========================================================================
   Página em modo escuro (Web e experiência)
   Grafite frio de editor de código. Os tokens são trocados só nesta página,
   então todos os componentes se adaptam sozinhos. O laranja continua igual.
   ========================================================================== */
.theme-dark {
  --paper:       #0F1115;
  --paper-2:     #151821;
  --ink:         #ECEDEF;
  --ink-2:       #B4B8C0;
  --ink-3:       #8A909C;
  --line:        #252A34;
  --line-strong: #3A404C;
  color-scheme: dark;
}
/* Faixa laranja mantém texto escuro */
.theme-dark .section--brand {
  --ink: #0D0D0D; --ink-2: #3D3D3D; --ink-3: #6E6E6E;
  --line: rgb(13 13 13 / .2); --line-strong: #0D0D0D;
}
/* "Vamos conversar": um degrau mais escuro que a página */
.theme-dark .section--ink {
  --paper: #FFFFFF; --ink: #0D0D0D; --ink-2: #3D3D3D; --ink-3: #6E6E6E; --line: #E5E5E3;
  background: #08090C; color: #ECEDEF;
}
/* Menu fixo ao rolar */
.theme-dark .nav.is-scrolled { background: rgba(15,17,21,.86); box-shadow: 0 1px 0 var(--line); }
/* Detalhe de código: os rótulos pequenos ganham "//" como um comentário */
.theme-dark main .eyebrow::before { content: '// '; color: var(--brand); }
.theme-dark .section--brand .eyebrow::before { color: inherit; }
/* Logos das plataformas no escuro: os arquivos *-branco.png já trazem o texto
   em branco e o ícone na cor original. Nada de filtro, que apagaria a cor do ícone. */
.theme-dark .platforms__logos img { filter: none; opacity: .88; }
.theme-dark .platforms__logos img:hover { opacity: 1; }
/* Moldura de navegador em modo escuro */
.theme-dark .browser { box-shadow: 0 -4px 32px rgb(0 0 0 / .45); }
.theme-dark .browser__bar i { background: #3A404C; }
.theme-dark .zap { background: #fff; color: #0D0D0D; }
.theme-dark .zap:hover, .theme-dark .zap:focus-visible { background: var(--brand); color: #0D0D0D; }
.theme-dark .foot { --paper: #FFFFFF; --ink: #0D0D0D; --line: #E5E5E3; background: #0B0D11; }

/* Rodapé: selos com o símbolo colorido e a escrita em branco (arquivos *-branco.png) */
.foot__proof .selos img { filter: none; opacity: .9; height: clamp(22px, 2.4vw, 28px); width: auto; }
.foot__proof .selos img[src*="meta"] { height: clamp(20px, 2.2vw, 26px); }

/* "Vamos conversar": texto de apoio sem palavra sozinha na última linha */
.cta .lede { text-wrap: pretty; }

/* Web: escuro até "Como funciona"; o portfólio volta a ser claro */
.theme-dark #projetos {
  --paper: #FFFFFF; --paper-2: #FAFAF8; --ink: #0D0D0D; --ink-2: #3D3D3D; --ink-3: #6E6E6E;
  --line: #E5E5E3; --line-strong: #0D0D0D;
  background: var(--paper-2); color: var(--ink); color-scheme: light;
}
.theme-dark #projetos .eyebrow::before { content: none; }
.theme-dark #projetos .browser { box-shadow: 0 -4px 32px rgb(13 13 13 / .10); }
.theme-dark #projetos .browser__bar i { background: #D8D6D1; }

/* --- Topo da home: foto da bandeira fincada (o marco) ------------------- */
.hero__photo { margin: 0; position: relative; }
.hero__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero__photo figcaption {
  margin-top: .75rem;
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3);
}
@media (min-width: 900px) {
  .hero__grid { align-items: center; }
  .hero__photo img { max-height: min(72vh, 620px); }
}
@media (max-width: 559px) {
  .hero__photo img { aspect-ratio: 4 / 3; object-position: center 20%; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__photo img { animation: heroIn 1.1s var(--ease) .2s both; }
}

/* --- "Como funciona": linha do tempo de verdade ------------------------
   As etapas são uma sequência, então ficam ligadas por uma linha contínua
   com um ponto laranja em cada etapa. */
.steps { list-style: none; padding: 0; margin: 0; gap: 0; }
.steps .stat {
  position: relative; border-top: 0; border-left: 1px solid var(--line-strong);
  padding: 0 0 2.25rem 1.5rem;
}
.steps .stat:last-child { padding-bottom: 0; }
.steps .stat::before {
  content: ''; position: absolute; left: -5px; top: .15rem;
  width: 9px; height: 9px; border-radius: 50%; background: var(--brand);
}
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .steps .stat { border-left: 0; border-top: 1px solid var(--line-strong); padding: 1.5rem 2rem 0 0; }
  .steps .stat::before { left: 0; top: -5px; }
}
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Topo da home empilhado (celular e tablet em pé): textos, foto, botões ---
   O bloco dos textos é "dissolvido" (display: contents) para seus itens entrarem
   na grade do topo e aceitarem order. No computador (900px+) nada muda.
   A foto não tem nada clicável, então a ordem do Tab continua fazendo sentido. */
@media (max-width: 899px) {
  .hero__grid { gap: clamp(1.25rem, 2.6vw, 1.75rem); }
  .hero__grid > .stack { display: contents; }
  .hero__grid > .stack > * { order: 1; }
  .hero__grid > .hero__photo { order: 2; margin-top: .5rem; }
  .hero__grid .hero__actions { order: 3; margin-top: .25rem; }
}

/* --- Topo da home no tablet: foto mais baixa, não ocupa a tela inteira --- */
@media (min-width: 560px) and (max-width: 899px) {
  .hero__photo img { aspect-ratio: 16 / 10; object-position: center 25%; }
}

/* --- Botão flutuante do WhatsApp ---------------------------------------
   Fica no canto inferior direito em todas as páginas. No computador, abre o
   rótulo ao passar o mouse; no celular fica só o ícone, para não tapar o conteúdo. */
.zap {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 90;
  display: inline-flex; align-items: center; gap: .6rem;
  height: 56px; padding: 0 16px; border-radius: 999px;
  background: var(--ink); color: #fff;
  box-shadow: 0 6px 24px rgb(13 13 13 / .28);
  transition: background .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.zap svg { width: 26px; height: 26px; flex: none; }
.zap__texto {
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase;
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width .35s var(--ease), opacity .25s ease;
}
.zap:hover, .zap:focus-visible { background: var(--brand); color: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 30px rgb(13 13 13 / .3); }
.zap:hover .zap__texto, .zap:focus-visible .zap__texto { max-width: 12rem; opacity: 1; }
@media (max-width: 559px) {
  .zap { height: 52px; padding: 0 13px; }
  .zap__texto { display: none; }
}
/* Não cobre o rodapé quando o menu do celular está aberto */
.menu.is-open ~ .zap { display: none; }
@media print { .zap { display: none; } }
/* Espaço extra no fim da página para o botão não cobrir o último conteúdo */
@media (max-width: 899px) { .foot { padding-bottom: calc(2rem + 60px); } }

/* ==========================================================================
   Revisão geral (23/09/2026)
   ========================================================================== */
/* Contato: a ação principal fica no topo, antes dos canais em texto */
.pagehead .hero__actions { margin-top: .25rem; }

/* ==========================================================================
   Revisões visuais (23/09/2026)
   ========================================================================== */

/* 1) Uma linguagem só para as fotos do site: preto e branco, laranja só na marca.
      O portfólio fica fora disso: ali a cor vem do trabalho. */
.feature__media img { filter: grayscale(1) contrast(1.05); }

/* 2) Diagrama em "Por que existimos": as quatro frentes viram um marco */
.why { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .why { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
}
.why__text { display: grid; gap: 1.25rem; }
.converge { width: 100%; max-width: 520px; height: auto; display: block; overflow: visible; justify-self: end; }
.converge .track { fill: none; stroke: #4A4F58; stroke-linecap: round; transition: stroke .3s ease, stroke-width .3s ease; }
.converge .seed  { fill: none; stroke: #4A4F58; stroke-width: 1.25; }
.converge .rise  { fill: none; stroke: #F4F5F6; stroke-width: 3; stroke-linecap: round; }
.converge .tip   { fill: #F4F5F6; }
.converge .mark  { stroke: var(--brand); stroke-width: 3; stroke-linecap: round; }
.converge .lbl   { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); fill: #9AA0A8; text-transform: uppercase; transition: fill .3s ease; }
.converge .lbl--out { fill: #F4F5F6; font-size: var(--t-label); letter-spacing: var(--track-label); }
.converge .node  { fill: var(--brand); }
.converge .ring  { fill: none; stroke: var(--brand); stroke-width: 1.25; opacity: .45; }
.converge .lane:hover .track { stroke: var(--brand); stroke-width: 2.25; }
.converge .lane:hover .lbl { fill: #F4F5F6; }
.converge .lane:hover .seed { stroke: var(--brand); }
@media (prefers-reduced-motion: no-preference) {
  .converge.is-visible .track { stroke-dasharray: 620; stroke-dashoffset: 620; animation: draw 1.5s cubic-bezier(0.22,1,0.36,1) forwards; }
  .converge.is-visible .lane:nth-of-type(2) .track { animation-delay: .12s; }
  .converge.is-visible .lane:nth-of-type(3) .track { animation-delay: .24s; }
  .converge.is-visible .lane:nth-of-type(4) .track { animation-delay: .36s; }
  .converge.is-visible .rise { stroke-dasharray: 200; stroke-dashoffset: 200; animation: draw .9s cubic-bezier(0.22,1,0.36,1) 1.5s forwards; }
  .converge.is-visible .node, .converge.is-visible .ring, .converge.is-visible .mark { animation: pop .5s cubic-bezier(0.22,1,0.36,1) 1.2s both; }
  .converge.is-visible .tip, .converge.is-visible .lbl--out { animation: fadeIn .5s ease 2.3s both; }
  .converge:not(.is-visible) .rise, .converge:not(.is-visible) .tip, .converge:not(.is-visible) .node,
  .converge:not(.is-visible) .ring, .converge:not(.is-visible) .mark, .converge:not(.is-visible) .lbl--out { opacity: 0; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.converge .node, .converge .ring, .converge .mark { transform-origin: 286px 252px; }
/* .reveal esconde e desloca; o diagrama só precisa disparar a animação */
.converge.reveal { opacity: 1; transform: none; }

/* 4) Depoimentos: um em destaque, os outros ao lado */
@media (min-width: 640px) {
  .depos { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .depo:first-child { grid-row: 1 / span 2; align-content: center; }
  .depo:first-child .depo__who { margin-top: .5rem; }
  .depo:first-child .depo__text { font-size: var(--t-h3); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--track-text); }
}
@media (min-width: 1200px) {
  .depos { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

/* 5) Nas molduras, a tela "rola" devagar ao passar o mouse */
.pf-card__media--site img { transition: transform 2.8s ease; }
.pf-card:hover .pf-card__media--site img { transform: translateY(-22%); }
.pf-card:hover .pf-card__media--site .browser { transform: none; }

/* 6) Logos de clientes em menos tela: células mais baixas */
.logos div { aspect-ratio: 2 / 1; padding: clamp(.6rem, 1.3vw, 1rem); }
.logos img { max-height: clamp(56px, 7.5vw, 96px); }

/* --- Operação digital: tabela "hoje / com a Saara" ---------------------- */

/* --- Home: cinco frentes ----------------------------------------------- */
@media (min-width: 900px) and (max-width: 1099px) { .services--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .services--grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Faixa laranja: link de saída abaixo das etiquetas */
.band__side .link-arrow { margin-top: .5rem; border-bottom-color: rgb(13 13 13 / .35); }

/* ==========================================================================
   Página em cinza chumbo (Automação digital)
   Grafite quente, puxado para o marrom: diferente do preto-azulado da Web.
   O laranja e os botões continuam iguais.
   ========================================================================== */
.theme-chumbo {
  --paper:       #2E2D2A;
  --paper-2:     #262523;
  --ink:         #F1EFEA;
  --ink-2:       #C6C3BB;
  --ink-3:       #9A978F;
  --line:        #434139;
  --line-strong: #6B685E;
  color-scheme: dark;
}
.theme-chumbo .section--brand {
  --ink: #0D0D0D; --ink-2: #3D3D3D; --ink-3: #6E6E6E;
  --line: rgb(13 13 13 / .2); --line-strong: #0D0D0D;
}
.theme-chumbo .section--ink {
  --paper: #FFFFFF; --ink: #0D0D0D; --ink-2: #3D3D3D; --ink-3: #6E6E6E; --line: #E5E5E3;
  background: #1C1B19; color: #F1EFEA;
}
.theme-chumbo .nav.is-scrolled { background: rgba(46,45,42,.9); box-shadow: 0 1px 0 var(--line); }

.theme-chumbo .pf-card { background: #353430; }
.theme-chumbo .browser { background: #353430; box-shadow: 0 -4px 32px rgb(0 0 0 / .4); }
.theme-chumbo .browser__bar i { background: #6B685E; }
.theme-chumbo .zap { background: #fff; color: #0D0D0D; }
.theme-chumbo .zap:hover, .theme-chumbo .zap:focus-visible { background: var(--brand); color: #0D0D0D; }
.theme-chumbo .foot { --paper: #FFFFFF; --ink: #0D0D0D; --line: #E5E5E3; background: #141311; }

/* ==========================================================================
   Automação digital: uma ideia por bloco, um recurso por ideia
   ========================================================================== */
.theme-chumbo .pagehead .lede { max-width: 46ch; font-size: var(--t-lede); color: var(--ink-2); }
.theme-chumbo .pagehead { padding-bottom: clamp(3rem, 7vw, 5.5rem); }

/* --- O que muda: duas colunas. À esquerda apagado, à direita forte. ------ */
.ba { list-style: none; margin: 0; padding: 0; }
.ba__row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem;
  padding: clamp(1.1rem, 2.4vw, 1.75rem) 0; border-top: 1px solid var(--line);
}
.ba__antes { color: var(--ink-3); font-size: var(--t-lede); }
.ba__seta { display: none; color: var(--brand); font-size: 1.25rem; }
.ba__depois { color: var(--ink); font-weight: 600; font-size: var(--t-h3); line-height: var(--lh-title); letter-spacing: var(--track-text); }
.ba__row--cab { border-top: 0; padding-top: 0; padding-bottom: .9rem; display: none; }
.ba__row--cab .ba__antes, .ba__row--cab .ba__depois {
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 400; letter-spacing: var(--track-label); text-transform: uppercase;
}
.ba__row--cab .ba__antes { color: var(--ink-3); }
.ba__row--cab .ba__depois { color: var(--brand); }
@media (min-width: 760px) {
  .ba__row { grid-template-columns: minmax(0, .8fr) 3rem minmax(0, 1.2fr); align-items: center; gap: 0 1.5rem; }
  .ba__row--cab { display: grid; }
  .ba__seta { display: block; text-align: center; }
}

/* --- Módulos: nome e uma linha. Sem número, sem caixa. ------------------- */
.modules { display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem); }
.module { display: grid; gap: .5rem; align-content: start; border-top: 1px solid var(--line-strong); padding-top: 1.1rem; }
.module__name {
  font-family: var(--font-display); font-weight: 700; font-variation-settings: 'wdth' 125;
  font-size: var(--t-h4); line-height: var(--lh-title); letter-spacing: var(--track-display); text-transform: uppercase;
}
.module__text { font-size: var(--t-small); line-height: var(--lh-lede); color: var(--ink-2); }
@media (min-width: 560px) { .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .modules { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- Como contratar: dois momentos, lado a lado -------------------------- */
.duo { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.duo__item { display: grid; gap: .75rem; align-content: start; border-top: 1px solid var(--line-strong); padding-top: 1.25rem; }
.duo__quando { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--brand); }
.duo__nome {
  font-family: var(--font-display); font-weight: 700; font-variation-settings: 'wdth' 125;
  font-size: var(--t-h2s); line-height: var(--lh-tight); letter-spacing: var(--track-display); text-transform: uppercase;
}
.duo__texto { font-size: var(--t-text); line-height: var(--lh-body); color: var(--ink-2); max-width: 44ch; }
@media (min-width: 760px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Faixa laranja só com a frase: o texto de apoio fica discreto abaixo */
.section--brand > .wrap > .band__text { max-width: 44ch; }

/* ==========================================================================
   Revisão final (04/10/2026)
   ========================================================================== */

/* Menu: com 8 itens, entre 900 e 1179px ele quebrava em duas linhas.
   Nessa faixa (notebook pequeno, tablet deitado) entra o botão "Menu". */
.nav__links a { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1179px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
}

/* Contato: telefone e e-mail com área de toque confortável */
.stat .work__name a { display: inline-block; padding-block: .6rem; }

/* Portfólio: botão "Ver todos" */
.pf-mais { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.pf-mais[hidden] { display: none; }

/* Depoimentos no celular: em vez de uma pilha longa, um trilho que desliza
   para o lado. O pedaço do próximo cartão aparecendo indica que tem mais. */
@media (max-width: 759px) {
  .depos {
    display: flex; gap: .75rem; background: none; border: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    padding-bottom: .5rem; scrollbar-width: none;
  }
  .depos::-webkit-scrollbar { display: none; }
  .depos .depo { flex: 0 0 86%; scroll-snap-align: start; border: 1px solid var(--line); }
}

/* ==========================================================================
   Sistema de espaço e padrões (substitui estilos soltos no HTML)
   ========================================================================== */
.eyebrow { line-height: var(--lh-snug); }
.gap-sm { gap: var(--sp-2); }
.gap-md { gap: var(--sp-4); }
.gap-lg { gap: var(--sp-5); }

/* Título de seção -> conteúdo: sempre a mesma distância */
.sec-head { padding-bottom: var(--sp-5); }
.sec-foot { padding-top: var(--sp-4); }
/* Seção que continua a anterior (mesmo fundo): sem espaço em cima */
.section--colada { padding-top: 0; }

/* Blocos escuros: rótulo laranja e texto de apoio claro, sem precisar marcar um por um */
.section--ink .eyebrow { color: var(--brand); }
.section--ink .lede { color: rgba(255,255,255,.78); }
.section--brand .title { color: var(--paper); }
.btn--onink.btn--vazado { background: transparent; color: #fff; }

/* Cartões de etapa/valor/contato */
.stat { border-top-color: var(--line-strong); }
.section--ink .stat { border-top-color: rgba(255,255,255,.2); }
.stat .eyebrow { margin-bottom: var(--sp-1); }
.stat .body { font-size: var(--t-small); }
.stat__text { font-size: var(--t-text); line-height: var(--lh-lede); }

/* "Próximo passo": mesmo ritmo em todas as páginas */
.cta { gap: var(--sp-4); }
.cta .hero__actions { margin-top: var(--sp-2); }

/* Frase das faixas laranja: mesmo tamanho em todas as páginas */
.section--brand .statement { font-size: var(--t-h2); line-height: var(--lh-title); }
/* Home: a linha de plataformas fica logo abaixo do título, com respiro próprio */
.platforms--home { margin-top: var(--sp-3); }
/* Cartões de marca (4 colunas): nome em cima, categoria embaixo. Lado a lado o nome quebrava. */
.pf-grid:not(.pf-grid--site) .pf-card__meta { flex-direction: column; align-items: flex-start; gap: .25rem; }

/* Etapas: palavras longas em caixa alta ("ACOMPANHAMENTO") não cabem em 4 colunas
   numa tela de 1024px. Quatro colunas só a partir de 1180px; antes disso, duas. */
@media (min-width: 900px) and (max-width: 1179px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.step__title, .pillar__title, .module__name { overflow-wrap: break-word; hyphens: auto; }

/* Faixa laranja da Automação: lista das três formas de começar */
.oferta { list-style: none; margin: var(--sp-2) 0 0; padding: 0; border-top: 1px solid rgb(13 13 13 / .35); }
.oferta li { display: grid; gap: .15rem; padding: var(--sp-3) 0; border-bottom: 1px solid rgb(13 13 13 / .2); }
.oferta__nome { font-family: var(--font-display); font-weight: 700; font-variation-settings: 'wdth' 125; font-size: var(--t-h4); letter-spacing: var(--track-display); text-transform: uppercase; line-height: var(--lh-title); }
.oferta__texto { font-size: var(--t-small); line-height: var(--lh-lede); color: rgb(13 13 13 / .78); }
@media (min-width: 900px) { .theme-chumbo .band { align-items: start; } .theme-chumbo .band .statement { max-width: none; } }

/* "Próximo passo": a frase padrão fecha em duas linhas no computador */
.cta .lede { max-width: 72ch; text-wrap: balance; }

/* ==========================================================================
   SAARA · desenho próprio (v3)
   Claro e arejado. Formas arredondadas como a logo. Azul petróleo estrutura,
   laranja só na ação. Assinatura: as texturas oficiais do deserto aparecem
   apenas recortadas em círculo ("janela de deserto"), a forma do símbolo.
   Vale para todas as páginas; vem por último de propósito.
   ========================================================================== */

/* --- Páginas com tema próprio herdado da marco: tudo volta para a base clara */
body, .theme-dark, .theme-chumbo, .theme-brand {
  --paper: #F4F4F4; --paper-2: #FFFFFF; --ink: #1E1E1E;
  --ink-2: #4D4B49; --ink-3: #85817C;
  --line: rgb(30 30 30 / .1); --line-strong: rgb(30 30 30 / .22);
  background: var(--paper); color: var(--ink);
  font-family: var(--font-text);
}
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

/* --- Tipografia -------------------------------------------------------- */
.statement, .title, .headline {
  font-family: var(--font-display);
  font-variation-settings: normal;
  text-transform: none;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--ink);
  text-wrap: balance;
}
.statement em, .title em, .headline em { font-style: normal; font-weight: 800; color: var(--ink); }
.headline { font-size: clamp(2.6rem, 6.2vw, 5.6rem); }
.headline--md, .title { font-size: clamp(2.1rem, 4.2vw, 3.6rem); }
.headline--sm { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
.title--sm { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.statement { font-size: clamp(2.5rem, 5.8vw, 5.2rem); }

.eyebrow, .mono, .label-title, .horizon__label {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: .08em;
  text-transform: none;
  color: var(--blue);
}
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; }
.eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: none; }
.theme-dark main .eyebrow::before { content: ""; }
.eyebrow--brand { color: var(--blue); }
.label-title { color: var(--ink-3); text-align: center; }
.lede { font-family: var(--font-text); font-weight: 400; font-size: clamp(1.06rem, 1.4vw, 1.2rem); line-height: 1.65; color: var(--ink-2); }
.body { font-family: var(--font-text); color: var(--ink-2); line-height: 1.75; font-size: 1.03rem; }
.note { font-size: .95rem; color: var(--ink-3); line-height: 1.7; max-width: 52ch; }

/* --- Menu em cima ------------------------------------------------------ */
.nav, .theme-brand .nav, .theme-dark .nav { background: transparent; }
.nav.is-scrolled, .theme-dark .nav.is-scrolled { background: rgb(244 244 244 / .88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line); }
.nav__inner { min-height: 92px; transition: min-height .3s var(--ease); }
.nav.is-scrolled .nav__inner { min-height: 70px; }
.wordmark img { height: 30px; width: auto; }
.nav__links { gap: clamp(1rem, 1.8vw, 1.9rem); }
.nav__links a, .theme-brand .nav:not(.is-scrolled) .nav__links a {
  font-family: var(--font-text); font-weight: 500; font-size: .875rem; letter-spacing: 0;
  text-transform: none; color: var(--ink-2);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a::after, .theme-brand .nav:not(.is-scrolled) .nav__links a::after { background: var(--brand); height: 2px; border-radius: 2px; }
.nav__toggle { font-family: var(--font-text); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--ink); }
@media (min-width: 1100px) { .nav__links { display: flex !important; } .nav__toggle { display: none !important; } }
.menu { background: var(--paper); }
.menu__list a { font-family: var(--font-display); font-weight: 300; text-transform: none; font-variation-settings: normal; letter-spacing: -.02em; border-color: var(--line); }
.menu__list a[aria-current="page"] { font-weight: 800; color: var(--ink); }
.menu__foot { font-family: var(--font-text); color: var(--ink-3); }

/* --- Botões: pílulas, como as curvas da logo --------------------------- */
.btn, .btn--onink, .theme-dark .btn {
  font-family: var(--font-text); font-weight: 600; font-size: .95rem; letter-spacing: 0; text-transform: none;
  padding: 1rem 1.6rem; border-radius: 999px;
  background: var(--brand); border: 1px solid var(--brand); color: #fff;
}
.btn:hover, .btn--onink:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; transform: translateY(-2px); }
.btn--ghost, .btn--vazado { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover, .btn--vazado:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.link-arrow {
  font-family: var(--font-text); font-weight: 600; font-size: .95rem; letter-spacing: 0; text-transform: none;
  color: var(--ink); border-bottom: 1.5px solid var(--brand); padding-bottom: .2rem;
}
.link-arrow:hover { color: var(--brand); border-color: var(--brand); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

/* --- Seções ------------------------------------------------------------ */
.section--tint, .section--ink, .section--brand, .theme-dark .section--brand, .theme-dark .section--ink, .theme-dark #projetos {
  background: var(--paper); color: var(--ink);
}
.section--tint { background: var(--paper-2); }
.section--brand .eyebrow { color: var(--blue); }
.sec-center { text-align: center; align-items: center; justify-items: center; }
.sec-center .lede { max-width: 46ch; margin-inline: auto; }

/* --- Hero: o sol de deserto -------------------------------------------- */
.hero--sun { padding: clamp(8.5rem, 16vw, 11rem) 0 0; position: relative; overflow: hidden; }
.hero--sun .hero__grid { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
@media (min-width: 960px) { .hero--sun .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.hero__content { display: grid; gap: 1.6rem; justify-items: start; }
.hero__content .headline { max-width: 17ch; }
.hero__content .headline em { display: block; }
.hero__content .lede { max-width: 44ch; }
.sun { position: relative; margin: 0; width: min(100%, 500px); aspect-ratio: 1; justify-self: center; }
.sun__img { position: absolute; inset: 7%; border-radius: 50%; overflow: hidden; box-shadow: 0 40px 80px -30px rgb(46 79 101 / .45); translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -10px); }
.sun__img::before {
  content: ""; position: absolute; inset: -30%;
  background: var(--tx-duna) center / cover no-repeat;
  animation: sun-turn 90s linear infinite;
  translate: calc(var(--px, 0) * 34px) calc(var(--py, 0) * 34px);
}
.sun__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--brand); opacity: .5; translate: calc(var(--px, 0) * 8px) calc(var(--py, 0) * 8px); }
@keyframes sun-turn { to { rotate: 360deg; } }
.horizon {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-top: clamp(3.5rem, 8vw, 6rem); padding-block: 1.6rem;
  border-top: 1px solid var(--line-strong);
}
.horizon__label { color: var(--ink-3); }
.hero__selos { display: flex; align-items: center; gap: 2rem; }
.hero__selos img { height: 22px; width: auto; filter: brightness(0) saturate(0); opacity: .55; }
@media (max-width: 959px) { .sun { width: min(58vw, 260px); order: -1; justify-self: start; } .hero--sun { padding-top: 7rem; } .hero--sun .hero__grid { gap: 2rem; } }

/* --- Logos ------------------------------------------------------------- */
.logos-band { padding-block: clamp(3rem, 6vw, 4.5rem); background: var(--paper); }
.logos, .logos div { background: transparent !important; border: 0 !important; }
.logos { gap: clamp(1rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3.5rem); }
.logos img { filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; opacity: .55; transition: opacity .3s; }
.logos div:hover img { opacity: 1; filter: none; }

/* --- Manifesto: cápsulas em degradê (elemento gráfico do Brand Book) --- */
.split { display: grid; gap: clamp(3rem, 7vw, 6rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.split .body { max-width: 50ch; }
.capsule { margin: 0; display: flex; gap: clamp(.8rem, 2vw, 1.4rem); justify-content: center; align-items: flex-end; height: clamp(280px, 38vw, 460px); }
.capsule span { display: block; clip-path: inset(0 round 999px); width: clamp(64px, 9vw, 110px); border-radius: 999px; background: var(--tx-areia) center / auto 115% no-repeat; }
.capsule span:nth-child(1) { height: 62%; background-image: var(--tx-azul); background-position: 20% 50%; }
.capsule span:nth-child(2) { height: 100%; background-image: var(--tx-duna); background-position: 50% 50%; }
.capsule span:nth-child(3) { height: 78%; background-image: var(--tx-laranja); background-position: 80% 50%; }

/* --- Serviços: cartões brancos, ícone = pequeno sol -------------------- */
.svcs { display: grid; gap: clamp(1rem, 1.6vw, 1.4rem); background: none; border: 0; }
@media (min-width: 640px)  { .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .svcs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc {
  display: flex; flex-direction: column; gap: .8rem;
  min-height: 300px; padding: clamp(1.75rem, 2.6vw, 2.4rem);
  background: var(--paper-2); border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.section--tint .svc { background: var(--paper); }
.svc:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgb(46 79 101 / .45); border-color: transparent; }
.svc .sym {
  width: 52px; height: 52px; border-radius: 50%; color: #fff; margin-bottom: auto;
  background: var(--tx-duna) center / 600% no-repeat;
}
.svc .sym circle { opacity: 0; }
.svc:nth-child(2) .sym { background-image: var(--tx-laranja); }
.svc:nth-child(3) .sym { background-image: var(--tx-areia); }
.svc:nth-child(4) .sym { background-image: var(--tx-azul); }
.svc:nth-child(5) .sym { background-position: 80% 30%; }
.svc__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1.8vw, 1.5rem); letter-spacing: -.02em; margin-top: 2rem; }
.svc__desc { color: var(--ink-2); font-size: .98rem; line-height: 1.65; }
.svc__more { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .9rem; color: var(--blue); margin-top: .4rem; }
.svc__more svg { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.svc:hover .svc__more svg { transform: translateX(4px); }
.svc--cta { background: var(--blue) !important; color: #fff; border-color: var(--blue); justify-content: flex-end; }
.svc--cta .svc__name { color: #fff; margin-top: 0; }
.svc--cta .svc__desc { color: rgb(255 255 255 / .78); }
.svc--cta .svc__more { color: var(--sand); }
@media (max-width: 639px) { .svc { min-height: 0; } .svc__name { margin-top: 1.25rem; } }

/* --- Duas colunas + checklist ----------------------------------------- */
.duo { display: grid; gap: clamp(3rem, 6vw, 6rem); }
@media (min-width: 900px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.checks { display: grid; gap: .9rem 2rem; }
@media (min-width: 560px) { .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.checks li { display: flex; gap: .8rem; align-items: center; font-weight: 500; }
.checks li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 5px rgb(226 82 32 / .14); }

/* --- Cases: o único bloco azul, para dar peso e equilíbrio ------------ */
.section--cases { background: var(--blue); color: #fff; border-radius: var(--radius-lg); margin-inline: clamp(.5rem, 2vw, 1.5rem); }
.section--cases .eyebrow { color: var(--sand); }
.section--cases .eyebrow::before { background: var(--sand); }
.section--cases .title, .section--cases .title em { color: #fff; }
.section--cases .lede { color: rgb(255 255 255 / .75); }
.cases { border: 0 !important; gap: clamp(1rem, 1.6vw, 1.4rem) !important; background: none !important; }
.case { background: rgb(255 255 255 / .06) !important; border: 1px solid rgb(255 255 255 / .12) !important; border-radius: var(--radius-lg) !important; color: #fff; }
.case::before { content: none !important; }
.case__name { font-family: var(--font-display) !important; font-weight: 700 !important; text-transform: none !important; font-variation-settings: normal !important; letter-spacing: -.02em !important; color: #fff !important; }
.case__num b { font-family: var(--font-display) !important; font-weight: 300 !important; font-variation-settings: normal !important; text-transform: none !important; letter-spacing: -.03em !important; color: var(--sand) !important; }
.case__num span, .case__tag, .case__extras li, .case__text { color: rgb(255 255 255 / .74) !important; }
.case__label { color: var(--sand) !important; }
.case summary { color: #fff !important; border-color: rgb(255 255 255 / .2) !important; }

/* --- Portfólio, depoimentos, plataformas ------------------------------- */
.pf-filters button { border-radius: 999px !important; font-family: var(--font-text); text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-2); border: 1px solid var(--line-strong); background: transparent; }
.pf-filters button.is-active, .pf-filters button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pf-card img, .work img, .browser { border-radius: var(--radius) !important; }
.browser { overflow: hidden; }
.depo { background: var(--paper-2) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-lg) !important; }
.depo__stars { color: var(--brand); }
.depo__text { color: var(--ink-2); }
.platforms__logos img, .theme-dark .platforms__logos img { filter: brightness(0); opacity: .5; }

/* --- CTA: painel arredondado com a textura ----------------------------- */
.cta-panel {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(4rem, 9vw, 7.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center; display: grid; justify-items: center; gap: 1.4rem;
  color: #fff;
}
.cta-panel::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--tx-laranja) center / cover; }
.cta-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(20 20 20 / .32); }
.cta-panel .eyebrow { color: #fff; }
.cta-panel .eyebrow::before { background: #fff; }
.cta-panel .headline, .cta-panel .headline em { color: #fff; }
.cta-panel .headline em { display: block; }
.cta-panel .lede { color: rgb(255 255 255 / .9); max-width: 46ch; }
.cta-panel .hero__actions { justify-content: center; }
.cta-panel .btn { background: #fff; border-color: #fff; color: var(--ink); }
.cta-panel .btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.cta-panel .btn--ghost { background: transparent; border-color: rgb(255 255 255 / .55); color: #fff; }

/* CTA das páginas internas (seção escura herdada) */
.cta { gap: 1.4rem; }

/* --- Topo das páginas internas: título + pequeno sol à direita -------- */
.pagehead { position: relative; overflow: hidden; background: var(--paper) !important; color: var(--ink) !important; }
.pagehead::after {
  content: ""; position: absolute; z-index: 0; border-radius: 50%;
  width: clamp(200px, 26vw, 400px); aspect-ratio: 1;
  right: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  top: clamp(7rem, 12vw, 9rem);
  background: var(--tx-duna) center / 260% no-repeat;
  box-shadow: 0 40px 80px -36px rgb(46 79 101 / .5);
}
.theme-dark .pagehead::after { background-image: var(--tx-azul); }
.theme-brand .pagehead::after { background-image: var(--tx-areia); }
.theme-chumbo .pagehead::after { background-image: var(--tx-laranja); }
.pagehead > * { position: relative; z-index: 1; }
@media (min-width: 900px) { .pagehead .statement, .pagehead .lede { max-width: min(16ch, 58%); } .pagehead .lede { max-width: 46ch; } }
@media (max-width: 899px) { .pagehead::after { width: 120px; top: 6rem; right: var(--gutter); opacity: .9; } .pagehead .statement { padding-right: 0; } }
.theme-brand .pagehead .statement em, .theme-brand .pagehead .eyebrow--brand, .theme-brand .pagehead .lede { color: var(--ink); }
.theme-brand .pagehead__meta { border-top-color: var(--line-strong); }
.pagehead__meta { border-top-color: var(--line-strong) !important; }

/* --- Rodapé: chumbo, sóbrio, com respiro ------------------------------- */
.foot, .theme-dark .foot { background: #1E1E1E; color: #fff; --paper: #1E1E1E; --ink: #FFFFFF; --line: rgb(255 255 255 / .12); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.foot a { color: rgb(255 255 255 / .7); }
.foot a:hover { color: var(--sand); }
.foot__head { font-family: var(--font-text); font-weight: 600; text-transform: none; letter-spacing: .02em; font-size: .85rem; color: var(--sand); }
.foot__list { font-family: var(--font-text); }
.foot__mark { border-color: rgb(255 255 255 / .12); }
.foot__mark img { width: min(100%, 380px); height: auto; }
.foot__legal { font-family: var(--font-text); text-transform: none; letter-spacing: 0; font-size: .82rem; color: rgb(255 255 255 / .5); }
.foot__social a { border-color: rgb(255 255 255 / .2); color: #fff; }
.foot__social a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.foot__proof p, .foot__proof { font-family: var(--font-text); text-transform: none; letter-spacing: 0; color: rgb(255 255 255 / .5); }

/* --- WhatsApp flutuante ------------------------------------------------ */
.zap, .theme-dark .zap { background: var(--brand) !important; color: #fff !important; border-radius: 999px; }

/* --- Títulos de cartão herdados: sem caixa alta larga ------------------ */
.duo__nome, .feature__title, .module__name, .oferta__nome, .pillar__title,
.service__name, .step__title, .work__name, .person figcaption b {
  font-family: var(--font-display) !important; font-variation-settings: normal !important;
  text-transform: none !important; letter-spacing: -.02em !important; font-weight: 700 !important;
}
.pillar__n, .feature__media span, .stat b {
  font-family: var(--font-display) !important; font-variation-settings: normal !important;
  font-weight: 300 !important; color: var(--blue) !important; letter-spacing: -.03em !important;
}
.feature__media img, .person img { border-radius: var(--radius-lg); }

.sym { display: block; }



/* ==========================================================================
   v4 · movimento e acabamento
   Efeitos com função: o sol reage ao mouse (a "janela" mostra outro trecho do
   deserto), as frentes orbitam, os números contam, os clientes passam em
   esteira, os cartões acendem onde o mouse está. Tudo desliga para quem pede
   menos movimento.
   ========================================================================== */

/* --- Escala de texto única -------------------------------------------- */
.headline, .statement { font-size: clamp(2.6rem, 5.6vw, 5.25rem); }
.headline--md, .title { font-size: clamp(2rem, 3.8vw, 3.4rem); }
.headline--sm, .title--sm { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.lede { max-width: 48ch; }
.sec-center .lede { max-width: 44ch; }
.stack.gap-sm { gap: 1rem; }
.stack.gap-md { gap: 1.5rem; }
.stack.gap-lg { gap: clamp(2.5rem, 5vw, 4rem); }

/* --- Entrada do topo: uma sequência só -------------------------------- */
.hero--sun .eyebrow, .hero--sun .headline, .hero--sun .lede, .hero--sun .hero__actions { animation: sobe .9s var(--ease) both; }
.hero--sun .headline { animation-delay: .08s; }
.hero--sun .lede { animation-delay: .2s; }
.hero--sun .hero__actions { animation-delay: .32s; }
.sun { animation: nasce 1.4s var(--ease) both .1s; }
@keyframes sobe { from { opacity: 0; transform: translateY(26px); } }
@keyframes nasce { from { opacity: 0; transform: translateY(60px) scale(.92); } }

/* --- Frentes em órbita ------------------------------------------------- */
.chip {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .95rem; border-radius: 999px;
  background: rgb(255 255 255 / .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 600 .82rem/1 var(--font-text); color: var(--ink); white-space: nowrap;
  box-shadow: 0 10px 30px -12px rgb(46 79 101 / .5), 0 0 0 1px var(--line);
  translate: calc(var(--px, 0) * var(--d, 18px)) calc(var(--py, 0) * var(--d, 18px));
  animation: boia 6s ease-in-out infinite alternate, sobe .8s var(--ease) both;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.chip--1 { top: 9%;  left: -4%;  --d: 26px; animation-delay: 0s, .5s; }
.chip--2 { top: 1%;  right: 6%;  --d: 16px; animation-delay: -2s, .6s; }
.chip--3 { top: 46%; right: -7%; --d: 30px; animation-delay: -4s, .7s; }
.chip--4 { bottom: 12%; left: -1%; --d: 20px; animation-delay: -1s, .8s; }
.chip--5 { bottom: 0;  right: 14%; --d: 24px; animation-delay: -3s, .9s; }
.chip--2::before, .chip--5::before { background: var(--blue); }
@keyframes boia { from { margin-top: -5px; } to { margin-top: 5px; } }
@media (max-width: 959px) {
  .chip { font-size: .72rem; padding: .45rem .75rem; }
  .chip--1 { left: -2%; } .chip--3 { right: -30%; } .chip--2 { right: -22%; } .chip--5 { right: -12%; } .chip--4 { display: none; }
}

/* --- Faixa de números -------------------------------------------------- */
.nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; margin: clamp(3.5rem, 7vw, 5.5rem) 0 0; padding-bottom: clamp(3rem, 6vw, 4.5rem); }
@media (min-width: 900px) { .nums { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }
.num { border-top: 1px solid var(--line-strong); padding-top: 1.1rem; display: grid; gap: .45rem; align-content: start; }
.num dt { font: 300 clamp(2rem, 3.6vw, 3.1rem)/1 var(--font-display); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.num:nth-child(odd) dt { color: var(--blue); }
.num dd { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-2); max-width: 24ch; }

/* --- Esteira de clientes ----------------------------------------------- */
.logos-band { padding-block: 0 clamp(3.5rem, 7vw, 5.5rem); }
.logos-band .sec-head { padding-bottom: 1.75rem; }
.logos--marquee {
  display: flex !important; overflow: hidden; gap: 0 !important; padding: 0 !important;
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logos--marquee .logos__track { display: flex !important; flex: none; align-items: center; aspect-ratio: auto !important; padding: 0 !important; animation: esteira 48s linear infinite; }
.logos--marquee:hover .logos__track { animation-play-state: paused; }
.logos--marquee .logos__track > div { flex: none; width: clamp(150px, 15vw, 210px); aspect-ratio: 2 / 1; padding: .5rem 1.25rem; }
.logos--marquee .logos__track img { max-height: 72px; }
@keyframes esteira { to { transform: translateX(-100%); } }

/* --- Cápsulas crescem quando entram na tela ---------------------------- */
.capsule.reveal { opacity: 1; transform: none; }
.capsule span { transform-origin: 50% 100%; transform: scaleY(.25); opacity: 0; transition: transform 1.2s var(--ease), opacity .6s ease; }
.capsule span:nth-child(2) { transition-delay: .12s; }
.capsule span:nth-child(3) { transition-delay: .24s; }
.capsule.is-visible span { transform: none; opacity: 1; }

/* --- Luz que segue o mouse nos cartões --------------------------------- */
.svc, .case, .depo { position: relative; isolation: isolate; overflow: hidden; }
.svc::after, .case::after, .depo::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgb(226 82 32 / .13), transparent 70%);
  opacity: 0; transition: opacity .4s ease;
}
.case::after { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgb(220 191 165 / .22), transparent 70%); }
.svc--cta::after { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .16), transparent 70%); }
.svc:hover::after, .case:hover::after, .depo:hover::after { opacity: 1; }
.svc .sym { transition: transform .6s var(--ease); }
.svc:hover .sym { transform: scale(1.12) rotate(-8deg); }

/* --- Brilho que atravessa o botão -------------------------------------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .35) 50%, transparent 65%);
  transform: translateX(-120%);
}
.btn:hover::before { transform: translateX(120%); transition: transform .8s var(--ease); }

/* --- Sol das páginas internas também segue o mouse -------------------- */
.pagehead::after { translate: calc(var(--px, 0) * 16px) calc(var(--py, 0) * 16px); }

/* --- Acabamento de espaçamento ---------------------------------------- */
.hero--sun { padding-top: clamp(8rem, 13vw, 10.5rem); }
.hero--sun .hero__grid { min-height: min(62vh, 560px); }
.cases__head { gap: 1.5rem 4rem; margin-bottom: 0; }
@media (min-width: 900px) { .cases__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.case { padding: clamp(1.75rem, 2.6vw, 2.4rem) !important; }
.section--cases { padding-block: clamp(4rem, 7vw, 6.5rem); }
.duo .headline--sm { max-width: 16ch; }
.duo .body { max-width: 50ch; }
.pf-card { border-radius: var(--radius); background: transparent; }
.pf-card__media { border-radius: var(--radius); }
.pf-card__meta { padding-inline: .25rem !important; }
.pf-card__tag { font-family: var(--font-text); text-transform: none; letter-spacing: 0; font-size: .88rem; }
.pf-card:hover .pf-card__name { color: var(--blue); }
.depo__who span, .case__tag, .platforms__label { font-family: var(--font-text) !important; text-transform: none !important; letter-spacing: .01em !important; font-size: .88rem !important; }
.foot { margin-top: clamp(1rem, 3vw, 2rem); }
.foot__grid { gap: 2.5rem 2rem; }

@media (prefers-reduced-motion: reduce) {
  .sun, .sun__img::before, .chip, .logos__track,
  .hero--sun .eyebrow, .hero--sun .headline, .hero--sun .lede, .hero--sun .hero__actions { animation: none !important; }
  .capsule span { transform: none; opacity: 1; transition: none; }
  .btn::before { display: none; }
}

/* Esteira: a mistura com o fundo é feita na faixa inteira (a animação isola cada trilho) */
.logos--marquee .logos__track { mix-blend-mode: multiply; }
.logos--marquee .logos__track img { mix-blend-mode: normal; }
.duo .headline em { display: block; }
.duo .headline--sm { max-width: none; }

/* Esteira: fundo do trilho na cor da página, para o branco dos logos sumir no multiply */
.logos--marquee .logos__track { mix-blend-mode: normal; background: var(--paper) !important; }
.logos--marquee .logos__track img { mix-blend-mode: multiply; }

/* "Próximo passo" das páginas internas: o mesmo painel com textura da home */
.section--ink > .cta {
  position: relative; isolation: isolate; overflow: hidden;
  width: auto; max-width: calc(var(--maxw) - 2 * var(--gutter)); margin-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  border-radius: var(--radius-lg);
  padding: clamp(4rem, 9vw, 7rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center; justify-items: center; align-items: center; color: #fff;
}
.section--ink > .cta::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--tx-laranja) center / cover; }
.section--ink > .cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(20 20 20 / .32); }
.section--ink > .cta .eyebrow { color: #fff; }
.section--ink > .cta .eyebrow::before { background: #fff; }
.section--ink > .cta .statement, .section--ink > .cta .statement em { color: #fff; }
.section--ink > .cta .lede { color: rgb(255 255 255 / .9); max-width: 46ch; margin-inline: auto; }
.section--ink > .cta .hero__actions { justify-content: center; }
.section--ink > .cta .btn { background: #fff; border-color: #fff; color: #1E1E1E; }
.section--ink > .cta .btn:hover { background: #1E1E1E; border-color: #1E1E1E; color: #fff; }
.section--ink > .cta .btn--vazado, .section--ink > .cta .btn--ghost { background: transparent; border-color: rgb(255 255 255 / .55); color: #fff; }
/* Outros blocos escuros herdados: texto legível na base clara */
.section--ink .lede, .section--ink .body { color: var(--ink-2); }

/* ==========================================================================
   v5 · ajustes do cliente
   Cabeçalho sempre branco · textos mais largos (menos linhas) · ícone próprio
   por frente · páginas internas com a faixa de horizonte no lugar do círculo.
   ========================================================================== */

/* --- Cabeçalho sempre branco ------------------------------------------ */
.nav, .nav.is-scrolled, .theme-dark .nav, .theme-brand .nav, .theme-dark .nav.is-scrolled {
  background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 var(--line);
}
.nav__inner { min-height: 76px; }
.nav.is-scrolled .nav__inner { min-height: 66px; }
.menu { background: #fff; }

/* --- Textos: colunas mais largas e quebra equilibrada ------------------ */
.lede { max-width: 58ch; text-wrap: balance; }
.body, .note { text-wrap: pretty; }
.hero__content .lede { max-width: 54ch; }
.sec-center .lede { max-width: 70ch; }
.split .body { max-width: 60ch; }
.duo .body { max-width: 58ch; }
.note { max-width: 62ch; }
.cases__head .lede { max-width: 52ch; }
.cta-panel .lede, .section--ink > .cta .lede { max-width: 58ch; }
.svc__desc, .case__num span, .case__text, .depo__text, .feature__text, .step p, .num dd { text-wrap: pretty; }
.case__num span { max-width: none; }

/* --- Topo da home sem a faixa de números ------------------------------ */
.hero--sun { padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.hero--sun .hero__grid { min-height: 0; }
.logos-band { padding-top: 0; }

/* --- Serviços: um ícone para cada frente ------------------------------ */
.svc__icon {
  display: grid; place-items: center; flex: none;
  width: 56px; height: 56px; border-radius: 18px; margin-bottom: auto;
  background: var(--sand-2); color: var(--blue);
  transition: background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease);
}
.svc__icon svg { width: 26px; height: 26px; }
.svc:hover .svc__icon { background: var(--brand); color: #fff; transform: translateY(-3px) rotate(-6deg); }
.svc { min-height: 280px; }

/* --- Páginas internas: faixa de horizonte ------------------------------
   No lugar do círculo (que fica só na home). É a "barra em degradê" do
   Brand Book: uma cápsula larga com a textura, que desliza devagar e
   acompanha o mouse. Cada página tem a sua textura. */
.pagehead { overflow: visible; padding-bottom: 0; }
.pagehead::after {
  content: ""; display: block; position: static; z-index: 0;
  width: auto; aspect-ratio: auto; top: auto; right: auto;
  height: clamp(96px, 13vw, 190px);
  max-width: calc(var(--maxw) - 2 * var(--gutter));
  margin: clamp(2rem, 4vw, 3rem) max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))) 0;
  border-radius: 999px;
  background: var(--tx-duna) 50% 50% / 135% auto no-repeat;
  box-shadow: 0 30px 60px -34px rgb(46 79 101 / .55);
  translate: none;
  background-position: calc(50% + var(--px, 0) * 14%) calc(50% + var(--py, 0) * 20%);
  animation: horizonte 1.2s var(--ease) both .15s;
}
@keyframes horizonte { from { opacity: 0; clip-path: inset(0 50% 0 50% round 999px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 999px); } }
@media (min-width: 900px) {
  .pagehead .statement { max-width: 20ch; }
  .pagehead .lede { max-width: 64ch; }
}
@media (max-width: 899px) { .pagehead::after { width: auto; top: auto; right: auto; opacity: 1; height: 88px; } }
.pagehead__meta { border-top: 0 !important; padding-top: 0; }

@media (prefers-reduced-motion: reduce) { .pagehead::after { animation: none; } }
.pagehead { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.pagehead::after {
  background-size: cover;
  background-position: calc(var(--bx, 50%) + var(--px, 0) * 10%) calc(var(--by, 50%) + var(--py, 0) * 14%);
}
/* Uma textura (e um trecho dela) por página, para não repetir */
.pagehead::after                { --by: 62%; }
.theme-dark .pagehead::after    { background-image: var(--tx-azul);    --by: 12%; }
.theme-brand .pagehead::after   { background-image: var(--tx-areia);   --by: 40%; }
.theme-chumbo .pagehead::after  { background-image: var(--tx-laranja); --by: 78%; }
@media (min-width: 900px) { .pagehead .lede { max-width: 78ch; } }
.svc__icon { width: 60px; height: 60px; }
.svc__icon svg { width: 28px; height: 28px; }

/* ==========================================================================
   v6 · lapidação da home e rodapé (05/10)
   ========================================================================== */

/* --- Ícones de serviço: sem animação ---------------------------------- */
.svc__icon, .svc:hover .svc__icon { transform: none; transition: background .3s ease, color .3s ease; }

/* --- Topo: sem os logos logo abaixo, fecha com mais respiro ----------- */
.hero--sun { padding-bottom: clamp(4.5rem, 9vw, 7.5rem); }

/* --- Clientes: seção própria, depois dos serviços, logos maiores ------ */
.logos-band { padding-block: var(--section-y); border: 0; }
.logos-band .sec-head { padding-bottom: clamp(2rem, 4vw, 3rem); }
.logos-band .label-title {
  font: 300 clamp(1.6rem, 2.6vw, 2.3rem)/1.1 var(--font-display); letter-spacing: -.03em;
  color: var(--ink); text-align: center;
}
.logos--marquee .logos__track > div { width: clamp(190px, 19vw, 280px); padding: .5rem 1.75rem; }
.logos--marquee .logos__track img { max-height: 104px; opacity: .72; }
.logos--marquee .logos__track { animation-duration: 60s; }

/* --- Cases ------------------------------------------------------------- */
.section--cases { padding-block: clamp(4.5rem, 8vw, 7rem); }
.section--cases .cases__head { padding-bottom: 0; }
.cases { display: grid !important; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 900px) { .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case {
  display: flex !important; flex-direction: column; gap: 0;
  padding: clamp(1.75rem, 2.4vw, 2.25rem) !important;
  background: rgb(255 255 255 / .07) !important;
  border-color: rgb(255 255 255 / .14) !important;
  transition: background .4s ease, transform .4s var(--ease);
}
.case:hover { background: rgb(255 255 255 / .1) !important; transform: translateY(-4px); }
.case__tag {
  order: -1; align-self: flex-start; margin: 0 0 1.5rem !important;
  padding: .4rem .8rem; border-radius: 999px;
  background: rgb(220 191 165 / .16); color: var(--sand) !important;
  font-weight: 600 !important; font-size: .8rem !important; line-height: 1.2;
}
.case__name { font-size: 1.15rem !important; font-weight: 600 !important; opacity: .92; margin: 0; }
.case__num { padding-top: .5rem !important; gap: .5rem !important; }
.case__num b { font-size: clamp(2.8rem, 4.4vw, 4rem) !important; line-height: 1 !important; font-weight: 300 !important; color: #fff !important; }
.case__num > span { font-size: 1rem !important; line-height: 1.45 !important; color: rgb(255 255 255 / .8) !important; }
.case__extras { margin-top: 1.5rem !important; padding-top: 1.25rem !important; border-top: 1px solid rgb(255 255 255 / .14); gap: .6rem !important; }
.case__extras li { padding-left: 1.2rem !important; font-size: .95rem !important; }
.case__extras li::before { width: 6px !important; height: 6px !important; border-radius: 50%; background: var(--brand) !important; top: .55em !important; }
.case__more { margin-top: auto !important; padding-top: 1.75rem; }
.case__more summary {
  display: inline-flex !important; align-items: center; gap: .5rem; width: auto !important;
  padding: .65rem 1.15rem !important; border: 1px solid rgb(255 255 255 / .3) !important; border-radius: 999px;
  font: 600 .9rem/1 var(--font-text) !important; text-transform: none !important; letter-spacing: 0 !important;
  cursor: pointer; transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.case__more summary:hover, .case__more[open] summary { background: #fff; color: var(--blue) !important; border-color: #fff !important; }
.case__detail { padding-top: 1.5rem !important; }
.case__label { font: 600 .8rem/1.2 var(--font-text) !important; text-transform: none !important; letter-spacing: .02em !important; }

/* --- Filtros do portfólio --------------------------------------------- */
.pf-filters { gap: .5rem; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.pf-filters button { padding: .6rem 1.15rem; font-size: .92rem; }

/* --- Plataformas: logos originais, alinhados e do mesmo peso ---------- */
.platforms--home { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2.5rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.platforms__label { color: var(--ink-3); margin: 0; }
.platforms__logos { gap: clamp(1.5rem, 3.5vw, 3rem); }
.platforms__logos img, .theme-dark .platforms__logos img { filter: grayscale(1); opacity: .62; transition: filter .3s ease, opacity .3s ease; }
.platforms__logos img:hover, .theme-dark .platforms__logos img:hover { filter: none; opacity: 1; }
.platforms__logos img[alt="Shopify"]     { height: 30px; }
.platforms__logos img[alt="WooCommerce"] { height: 22px; }
.platforms__logos img[alt="Nuvemshop"]   { height: 30px; }
.platforms__logos img[alt="Tray"]        { height: 34px; }

/* --- Sites: moldura de navegador, parada (sem rolagem nem subida) ----- */
.pf-grid--site { gap: clamp(1.25rem, 2.2vw, 2rem) !important; }
.pf-card__media--site {
  display: block !important; aspect-ratio: auto !important;
  padding: clamp(1.25rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.6vw, 2.25rem) 0 !important;
  background: var(--paper-3) !important; border: 0; border-radius: var(--radius-lg) !important; overflow: hidden;
}
.pf-card__media--site .browser, .pf-card:hover .pf-card__media--site .browser {
  display: block; background: #fff !important;
  border: 0 !important; border-radius: 14px 14px 0 0 !important;
  box-shadow: 0 18px 40px -18px rgb(30 30 30 / .35) !important;
  transform: none !important; transition: none !important; overflow: hidden;
}
.pf-card__media--site .browser__bar { display: flex !important; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--line); }
.pf-card__media--site .browser__bar i { width: 8px; height: 8px; background: var(--paper-3); }
.pf-card__media--site .browser__bar i:first-child { background: var(--brand); opacity: .8; }
.pf-card__media--site .browser__bar em { background: var(--paper); border-radius: 999px; }
.pf-card__media--site img, .pf-card:hover .pf-card__media--site img {
  display: block; width: 100%; height: auto !important; aspect-ratio: 1400 / 781; object-fit: cover; object-position: top center;
  border-radius: 0 !important; transform: none !important; transition: none !important;
}
.pf-grid--site .pf-card__meta { flex-direction: row; align-items: baseline; justify-content: space-between; padding-top: 1rem; }
.pf-card__media { border: 1px solid var(--line); }
.pf-card__media--site { border: 0 !important; }

/* --- Depoimentos: três cartões iguais, menores, cantos limpos --------- */
.depos { display: grid; gap: clamp(1rem, 1.6vw, 1.4rem) !important; background: none !important; border: 0 !important; grid-template-columns: 1fr; }
@media (min-width: 900px) { .depos { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.depo, .depo:first-child { grid-column: auto !important; grid-row: auto !important; display: flex !important; flex-direction: column; gap: 1rem; padding: 1.6rem !important; border-radius: var(--radius) !important; margin: 0; }
.depo__stars svg { width: 15px; height: 15px; }
.depo__text, .depo:first-child .depo__text { font-size: .95rem !important; line-height: 1.6 !important; font-weight: 400 !important; font-family: var(--font-text) !important; letter-spacing: 0 !important; color: var(--ink-2); }
.depo__who { margin-top: auto; padding-top: .5rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.depo__who b { font: 700 1rem/1.2 var(--font-display); }

/* --- Rodapé organizado ------------------------------------------------- */
.foot { padding-block: clamp(3.5rem, 6vw, 5rem) 1.75rem; }
.foot__top { display: grid; gap: 2.5rem 2rem; grid-template-columns: 1fr; padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 640px)  { .foot__top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot__brand { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .foot__top { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 3rem; } .foot__brand { grid-column: auto; } }
.foot__brand { display: grid; gap: 1.25rem; align-content: start; justify-items: start; }
.foot__brand img { height: 30px; width: auto; }
.foot__brand p { color: rgb(255 255 255 / .6); font-size: .95rem; line-height: 1.6; max-width: 34ch; }
.foot__head { margin-bottom: 1.1rem; }
.foot__list { display: grid; gap: .65rem; font-size: .95rem; color: rgb(255 255 255 / .7); }
.foot__social { margin: 0; gap: .5rem; }
.foot__social a { width: 40px; height: 40px; }
.foot__social svg { width: 17px; height: 17px; }
.foot__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / .12);
  font-size: .85rem; color: rgb(255 255 255 / .5);
}
.foot__bottom .selos { display: flex; align-items: center; gap: 1.5rem; margin: 0; }
.foot__bottom .selos span { all: unset; font-size: .85rem; color: rgb(255 255 255 / .5); }
.foot__bottom .selos img { height: 20px; width: auto; opacity: .85; }
@media (min-width: 900px) { .foot__bottom { padding-right: 4.5rem; } }
@media (max-width: 899px) { .foot { padding-bottom: 5.5rem; } .foot__bottom { flex-direction: column; align-items: flex-start; } }


/* ==========================================================================
   v7 · home: título com palavra que troca, logo maior, acabamento fino
   ========================================================================== */
.wordmark img { height: 38px; }
.nav__inner { min-height: 84px; }
.nav.is-scrolled .nav__inner { min-height: 72px; }
@media (max-width: 599px) { .wordmark img { height: 32px; } .nav__inner { min-height: 72px; } }

/* "expressing your" fino e parado; a palavra final é a única coisa que muda */
.headline--troca { text-transform: lowercase; font-size: clamp(2.9rem, 6.4vw, 6rem); line-height: 1; letter-spacing: -.045em; max-width: none !important; }
.headline--troca em { display: block; color: var(--brand); font-weight: 800; }
.troca { overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.troca__in { display: inline-block; transition: transform .42s var(--ease), opacity .3s ease; }
.troca__in.is-saindo { transform: translateY(-105%); opacity: 0; }
.troca__in.is-entrando { transform: translateY(105%); opacity: 0; transition: none; }
.hero__content { gap: 1.75rem; }
.hero__content .lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); max-width: 50ch; }
.hero__content .lede { font-size: clamp(1.06rem, 1.35vw, 1.2rem); max-width: 56ch; }
.hero--sun .hero__grid { align-items: center; }
.hero__actions { margin-top: .25rem; }

/* ==========================================================================
   v8 · home: topo mais forte, quebra clara para a segunda parte,
   logos maiores, portfólio de web sem o fundo
   ========================================================================== */
.wordmark img { height: 33px; }
@media (max-width: 599px) { .wordmark img { height: 29px; } }

/* --- Topo ocupa a tela, com o conteúdo centrado e a seta de continuação */
.hero--sun {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(7.5rem, 11vw, 9rem); padding-bottom: clamp(5.5rem, 9vw, 7rem);
}
.hero--sun .hero__grid { width: 100%; gap: clamp(2.5rem, 6vw, 6rem); }
@media (min-width: 960px) { .hero--sun .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.headline--troca { font-size: clamp(3rem, 7.2vw, 7rem); line-height: .96; }
.hero__content { gap: 2rem; }
.hero__content .lede { max-width: 50ch; font-size: clamp(1.08rem, 1.4vw, 1.25rem); }
.sun { width: min(100%, 560px); }
.hero__next {
  position: absolute; left: 50%; bottom: clamp(1.5rem, 3vw, 2.25rem); translate: -50% 0;
  display: inline-flex; align-items: center; gap: .6rem;
  font: 600 .88rem/1 var(--font-text); color: var(--ink-2);
  padding: .7rem 1.1rem; border-radius: 999px; border: 1px solid var(--line-strong); background: rgb(255 255 255 / .6);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.hero__next:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.hero__next svg { width: 12px; height: 12px; animation: desce 1.8s ease-in-out infinite; }
@keyframes desce { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 3px; } }
@media (max-width: 959px) { .hero--sun { min-height: 0; padding-bottom: 6.5rem; } }

/* --- Segunda parte: uma folha branca arredondada sobre o cinza -------- */
.section--sheet {
  background: var(--paper-2); border-radius: var(--radius-lg);
  margin-inline: clamp(.5rem, 2vw, 1.5rem);
  padding-block: clamp(4rem, 8vw, 7rem);
  box-shadow: 0 1px 0 var(--line), 0 30px 60px -50px rgb(46 79 101 / .35);
  scroll-margin-top: 96px;
}
.section--sheet + .section { padding-top: var(--section-y); }

/* --- Clientes: logos um pouco maiores --------------------------------- */
.logos--marquee .logos__track > div { width: clamp(210px, 21vw, 320px); padding: .5rem 2rem; }
.logos--marquee .logos__track img { max-height: 128px; opacity: .78; }

/* --- Web: só o navegador, sem o fundo; nome e serviço alinhados a ele - */
.pf-grid--site { gap: clamp(2rem, 3.4vw, 3rem) clamp(1.5rem, 2.6vw, 2.25rem) !important; }
.pf-card__media--site { padding: 0 !important; background: none !important; border-radius: 0 !important; overflow: visible !important; }
.pf-card__media--site .browser, .pf-card:hover .pf-card__media--site .browser {
  border: 1px solid var(--line-strong) !important; border-radius: 16px !important;
  box-shadow: 0 24px 48px -32px rgb(30 30 30 / .4) !important;
}
.pf-card__media--site .browser__bar { padding: 11px 14px; background: var(--paper); }
.pf-card__media--site .browser__bar em { background: #fff; }
.pf-grid--site .pf-card__meta, .pf-grid .pf-card__meta {
  display: flex; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start; gap: .2rem;
  padding: 1.1rem 0 0 !important;
}
.pf-card__name { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.pf-card__tag { color: var(--ink-3); }
.pf-card__desc { padding-inline: 0 !important; }

@media (prefers-reduced-motion: reduce) { .hero__next svg { animation: none; } }
.hero__content .lede { max-width: 58ch; font-size: clamp(1.06rem, 1.3vw, 1.2rem); }
.logos--marquee .logos__track > div { width: clamp(230px, 23vw, 350px); padding: .25rem 1.25rem; aspect-ratio: 5 / 3; }
.logos--marquee .logos__track img { max-height: 170px; width: 100%; object-fit: contain; }

/* ==========================================================================
   v9 · único detalhe trazido da referência Neuros: a palavra que troca
   aparece no degradê da logo (laranja → azul petróleo). O resto da home
   é a versão leve, com o círculo no topo.
   ========================================================================== */
.headline--troca em, .headline--troca .troca__in {
  background: linear-gradient(95deg, var(--brand) 0%, #C6431A 40%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.headline--troca em.troca { background: none; -webkit-text-fill-color: initial; }
.headline--troca .troca__in { padding-right: .08em; padding-bottom: .1em; }

/* --- Topo: o símbolo dentro do círculo (sem etiquetas em volta) -------- */
.sun__sym {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  stroke-width: 5; opacity: .92;
  translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 10px);
}
.sun__sym path { stroke-dasharray: 520; stroke-dashoffset: 520; animation: traco 1.8s var(--ease) forwards .7s; }
.sun__sym path:nth-child(2) { animation-delay: .9s; }
.sun__sym path:nth-child(3) { animation-delay: 1.1s; }
@keyframes traco { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .sun__sym path { animation: none; stroke-dashoffset: 0; } }
.sun__sym { stroke-width: 3.2; opacity: .85; }

/* ==========================================================================
   v10 · acabamento fino da home (05/10)
   ========================================================================== */
/* texto dos cartões de portfólio não encosta no recorte */
.pf-card { overflow: visible; }
.pf-card__meta { padding-left: 2px !important; }
.pf-card__name { font-size: 1.08rem; }
.pf-card__tag { font-size: .9rem; }

/* cabeçalhos de seção: todos alinhados à esquerda, texto de apoio à direita */
#servicos .sec-center {
  display: grid; text-align: left; justify-items: start; align-items: end; gap: .9rem 4rem;
  grid-template-columns: 1fr;
}
#servicos .sec-center .lede { margin: 0; max-width: 42ch; }
@media (min-width: 900px) {
  #servicos .sec-center { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  #servicos .sec-center .eyebrow { grid-column: 1 / -1; }
  #servicos .sec-center .lede { justify-self: end; padding-bottom: .5rem; }
}

/* cartões de serviço mais compactos e com a mesma altura */
.svc { min-height: 250px; gap: .7rem; }
.svc__name { margin-top: 1.5rem; }
.svc--cta { justify-content: flex-end; }

/* ritmo vertical: uma medida entre seções, metade entre blocos irmãos */
#servicos { padding-bottom: calc(var(--section-y) * .6); }
.logos-band { padding-block: calc(var(--section-y) * .6) var(--section-y); }
.logos-band .sec-head { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
#trabalho { padding-bottom: var(--section-y); }
[data-depoimentos] { padding-block: var(--section-y) calc(var(--section-y) * .5); }
[data-depoimentos] + .section { padding-top: calc(var(--section-y) * .5); }

/* títulos de seção: mesma medida e respiro até o conteúdo */
.sec-head { padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.sec-head .title, #depo-h { max-width: 22ch; }
.pf-filters { padding-bottom: clamp(1.25rem, 2.6vw, 1.75rem); }

/* cases: etiqueta legível e número com a mesma linha de base */
.case__tag { font-size: .82rem !important; padding: .45rem .85rem; }
.case__num b { display: block; min-height: 1em; }
.section--cases .cases__head { align-items: end; }
.section--cases .lede { padding-bottom: .35rem; }

/* depoimentos: autor e origem alinhados, sem ficar sob o botão flutuante */
.depo__who span { white-space: nowrap; }
@media (min-width: 900px) { .depos { padding-right: 0; } }

/* botão "Conheça a Saara" mais discreto */
.hero__next { background: transparent; border-color: var(--line-strong); font-weight: 500; }
/* celular: o título vem primeiro; o círculo fica menor, depois dos botões */
@media (max-width: 959px) {
  .hero--sun { padding-top: 7.5rem; }
  .hero--sun .sun { order: 2; width: min(74vw, 340px); justify-self: center; margin-top: .5rem; }
}

/* ==========================================================================
   v11 · pedidos do cliente + equilíbrio das fontes (05/10)
   ========================================================================== */

/* Título do topo sempre em duas linhas: "expressing your" / palavra */
.headline--troca { white-space: nowrap; font-size: clamp(2.5rem, 6vw, 6.25rem); }
.headline--troca em { white-space: nowrap; }
@media (max-width: 959px) { .headline--troca { font-size: clamp(2.5rem, 11.5vw, 5rem); } }

/* "Por que a Saara": texto justificado */
.section--sheet .body { text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: wrap; max-width: 58ch; }

/* "Quem trabalha com a gente, recomenda." numa linha só */
#depo-h { max-width: none; }
@media (min-width: 900px) { #depo-h { white-space: nowrap; } }

/* --- Escala de fontes equilibrada --------------------------------------
   Um tamanho para cada papel, em toda a home:
   topo 6.25rem · título de seção 3rem · convite final 3.75rem ·
   nome de cartão 1.3rem · texto de abertura 1.125rem · texto 1.0625rem ·
   texto de cartão 1rem · rótulo .9rem.
   Pesos: 300 no traço fino, 700 no destaque (800 só na palavra do topo). */
.title, .headline--md, .title--sm, #depo-h, .section--cases .title {
  font-size: clamp(1.9rem, 3.3vw, 3rem); line-height: 1.06; letter-spacing: -.035em; font-weight: 300;
}
.title em, .headline em, .statement em { font-weight: 700; }
.headline--troca em { font-weight: 800; }
.logos-band .label-title { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 300; }
.cta-panel .headline { font-size: clamp(2.2rem, 4.2vw, 3.75rem); line-height: 1.04; }

.lede, .hero__content .lede, .sec-center .lede, #servicos .sec-center .lede, .cases__head .lede, .cta-panel .lede {
  font-size: clamp(1.0625rem, 1.25vw, 1.125rem); line-height: 1.6;
}
.body, .section--sheet .body { font-size: 1.0625rem; line-height: 1.7; }

.svc__name { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.case__name { font-size: 1.3rem !important; font-weight: 700 !important; }
.pf-card__name { font-size: 1.125rem; font-weight: 700; }
.depo__who b { font-size: 1rem; font-weight: 700; }

.svc__desc, .depo__text, .depo:first-child .depo__text, .case__num > span, .case__extras li, .case__text { font-size: 1rem !important; line-height: 1.6 !important; }
.case__num b { font-size: clamp(2.6rem, 4vw, 3.5rem) !important; }

.eyebrow, .svc__more, .pf-card__tag, .case__tag, .depo__who span, .platforms__label, .pf-filters button, .hero__next, .link-arrow { font-size: .9rem !important; }
.btn { font-size: .95rem; }
.nav__links a { font-size: .9rem; }
.foot__list, .foot__brand p { font-size: .95rem; }
.foot__head { font-size: .9rem; }
.section--sheet .body { hyphens: manual; -webkit-hyphens: manual; }

/* ==========================================================================
   v12 · página Sobre (layout novo) + topo das internas sem a linha de meta
   ========================================================================== */

/* Topo em duas colunas: título à esquerda, texto à direita */
.ab-head { display: grid; gap: 1.5rem clamp(2rem, 6vw, 6rem); align-items: end; }
@media (min-width: 960px) {
  .ab-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .pagehead--duo .statement { max-width: none; }
  .pagehead--duo .lede { max-width: 46ch; justify-self: end; padding-bottom: .6rem; }
}
.pagehead .statement { font-size: clamp(2.4rem, 5vw, 4.75rem); }

/* Missão e visão: folha branca, duas colunas com fio no meio */
.ab-mv { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 860px) {
  .ab-mv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .ab-mv__item { padding-inline: clamp(1.5rem, 4vw, 4rem); }
  .ab-mv__item:first-child { padding-left: 0; border-right: 1px solid var(--line-strong); }
  .ab-mv__item:last-child { padding-right: 0; }
}
.ab-mv__item { display: grid; gap: 1.25rem; align-content: start; }
.ab-mv__text { font: 300 clamp(1.35rem, 2.1vw, 1.9rem)/1.32 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; }

/* Time: texto fixo à esquerda, retratos em arco à direita */
.ab-team { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 960px) { .ab-team { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.ab-team__people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); align-items: start; }
.ab-person { margin: 0; display: grid; gap: 1.1rem; }
.ab-person--b { margin-top: clamp(2rem, 6vw, 5rem); }
.ab-person__foto { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 999px 999px var(--radius-lg) var(--radius-lg); background: var(--sand-2); }
.ab-person__foto img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 0 !important; filter: grayscale(1) contrast(1.03); transition: filter .6s ease, scale .9s var(--ease); }
.ab-person:hover .ab-person__foto img { filter: none; scale: 1.03; }
.ab-person figcaption { display: grid; gap: .15rem; padding-left: .25rem; }
.ab-person figcaption b { font: 700 1.3rem/1.2 var(--font-display); letter-spacing: -.02em; }
.ab-person figcaption span { font-size: .9rem; color: var(--ink-3); }

/* Valores: bloco azul com quatro cartões */
.ab-vals { display: grid; gap: clamp(1rem, 1.6vw, 1.4rem); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .ab-vals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ab-vals { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ab-val {
  display: flex; flex-direction: column; gap: .8rem; min-height: 250px;
  padding: clamp(1.6rem, 2.2vw, 2rem); border-radius: var(--radius-lg);
  background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .14);
  transition: background .4s ease, transform .4s var(--ease);
}
.ab-val:hover { background: rgb(255 255 255 / .11); transform: translateY(-4px); }
.ab-val__dot { width: 44px; height: 44px; border-radius: 50%; margin-bottom: auto; background: var(--tx-duna) center / 400% no-repeat; }
.ab-val__dot--2 { background-image: var(--tx-laranja); }
.ab-val__dot--3 { background-image: var(--tx-areia); }
.ab-val__dot--4 { background-image: var(--tx-azul); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25); }
.ab-val h3 { font: 700 1.3rem/1.2 var(--font-display); letter-spacing: -.02em; color: #fff; margin-top: 1.5rem; text-wrap: balance; }
.ab-val p { font-size: 1rem; line-height: 1.6; color: rgb(255 255 255 / .76); text-wrap: pretty; }

/* Espaço: mosaico arredondado */
.ab-space__head { display: grid; gap: 1.25rem 4rem; align-items: end; }
@media (min-width: 900px) { .ab-space__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } .ab-space__head .lede { justify-self: end; max-width: 42ch; padding-bottom: .4rem; } }
.ab-mosaic { display: grid; gap: clamp(.75rem, 1.4vw, 1.25rem); grid-template-columns: 1fr; }
.ab-mosaic img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); aspect-ratio: 4 / 3; }
@media (min-width: 800px) {
  .ab-mosaic { grid-template-columns: 1.6fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); height: clamp(420px, 46vw, 640px); }
  .ab-mosaic img { aspect-ratio: auto; min-height: 0; }
  .ab-mosaic img:first-child { grid-row: 1 / -1; }
}
.ab-val { min-height: 0; }
.ab-val__dot { margin-bottom: 0; background-size: 300%; background-position: 30% 70%; }
.ab-val__dot--2 { background-position: 85% 85%; }
.ab-val__dot--3 { background-position: 40% 40%; }
.ab-val__dot--4 { background-position: 50% 6%; }
.ab-val h3 { margin-top: 2rem; }


/* ==========================================================================
   v13 · arquivos finais da marca aplicados (logos, símbolos, fundos) + Sobre
   ========================================================================== */
.foot__brand img { height: 32px; }

/* Sobre: faixa do topo com o fundo e o logo oficiais */
.pagehead--marca::after { content: none; display: none; }
.ab-band {
  position: relative; margin: clamp(2rem, 4vw, 3rem) 0 0; overflow: hidden; isolation: isolate;
  height: clamp(220px, 30vw, 430px); border-radius: var(--radius-lg);
  display: grid; place-items: center;
  animation: palco-sobre 1.2s var(--ease) both .15s;
}
@keyframes palco-sobre { from { opacity: 0; transform: translateY(30px); } }
.ab-band__img {
  position: absolute; inset: -6%; z-index: -1; background: var(--tx-duna) center / cover no-repeat;
  translate: calc(var(--px, 0) * -22px) calc(var(--py, 0) * -16px);
}
.ab-band img { width: clamp(220px, 30vw, 430px); height: auto; filter: drop-shadow(0 6px 24px rgb(0 0 0 / .25)); }

/* Missão e visão: símbolo oficial acima do rótulo */
.ab-mv__sym { width: 56px; height: 56px; object-fit: contain; }
.ab-mv__item { gap: 1rem; }
.ab-mv__item .eyebrow { margin-top: .5rem; }

/* Valores: símbolo oficial em cada cartão */
.ab-val__sym { width: 48px; height: 48px; object-fit: contain; }
.ab-val h3 { margin-top: 1.75rem; }

/* Time: detalhe em azul claro da paleta ampliada */
.ab-person figcaption span { color: var(--blue); font-weight: 500; }
.ab-person__foto { box-shadow: 0 30px 60px -40px rgb(46 79 101 / .6); }

@media (prefers-reduced-motion: reduce) { .ab-band { animation: none; } }

/* --- v14: símbolo oficial no círculo da home; Sobre volta ao desenho anterior */
img.sun__sym { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .95; z-index: 1;
  translate: calc(var(--px, 0) * 8px) calc(var(--py, 0) * 8px);
  animation: simbolo-entra 1.4s var(--ease) both .6s; }
@keyframes simbolo-entra { from { opacity: 0; scale: .96; } }
.ab-person figcaption span { color: var(--ink-3); font-weight: 400; }
.ab-person__foto { box-shadow: none; }
.ab-val h3 { margin-top: 2rem; }
@media (prefers-reduced-motion: reduce) { img.sun__sym { animation: none; } }

/* ==========================================================================
   v15 · topo da home com o fundo oficial em toda a área ("mais Saara no
   primeiro impacto"). Cabeçalho continua branco; o resto da página, claro.
   ========================================================================== */
.hero--saara { padding: calc(76px + clamp(.5rem, 1.2vw, 1rem)) clamp(.5rem, 2vw, 1.5rem) 0; }
.hero__panel {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(100svh - 76px - clamp(1.5rem, 3.2vw, 2.5rem));
  border-radius: var(--radius-lg);
  display: flex; align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  color: #fff;
  animation: painel-entra 1.1s var(--ease) both;
}
@keyframes painel-entra { from { opacity: 0; transform: translateY(24px) scale(.985); } }
.hero__bgimg {
  position: absolute; inset: -5%; z-index: -2;
  background: var(--tx-duna) center / cover no-repeat;
  translate: calc(var(--px, 0) * -26px) calc(var(--py, 0) * -18px);
  animation: fundo-respira 30s ease-in-out infinite alternate;
}
@keyframes fundo-respira { from { scale: 1; } to { scale: 1.08; } }
.hero__panel::after { /* escurece só o lado do texto, para leitura */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(18 18 18 / .58) 0%, rgb(18 18 18 / .28) 48%, rgb(18 18 18 / 0) 78%);
}
.hero--saara .hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; width: 100%; }
@media (min-width: 960px) { .hero--saara .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.hero--saara .hero__content { gap: 1.75rem; }
.hero--saara .headline--troca { color: #fff; font-size: clamp(2.6rem, 6.4vw, 6.75rem); }
.hero--saara .headline--troca em, .hero--saara .headline--troca .troca__in {
  background: none; -webkit-text-fill-color: #fff; color: #fff;
}
.hero--saara .lede { color: rgb(255 255 255 / .9); max-width: 50ch; }
.hero--saara .hero__actions { margin-top: .5rem; gap: 1rem 1.75rem; }
.hero--saara .btn { background: #fff; border-color: #fff; color: #1E1E1E; }
.hero--saara .btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.hero--saara .link-arrow { color: #fff; border-bottom-color: rgb(255 255 255 / .6); }
.hero--saara .link-arrow:hover { color: #fff; border-bottom-color: #fff; }
.hero__symbol {
  justify-self: center; width: min(100%, 400px); height: auto; opacity: .96;
  translate: calc(var(--px, 0) * 16px) calc(var(--py, 0) * 16px);
  filter: drop-shadow(0 10px 40px rgb(0 0 0 / .2));
  animation: simbolo-entra 1.4s var(--ease) both .4s;
}
.hero--saara .headline, .hero--saara .lede, .hero--saara .hero__actions { animation: sobe .9s var(--ease) both .25s; }
.hero--saara .lede { animation-delay: .38s; }
.hero--saara .hero__actions { animation-delay: .5s; }
@media (max-width: 959px) {
  .hero__panel { min-height: 0; padding-block: 3.5rem 3rem; }
  .hero__panel::after { background: rgb(18 18 18 / .42); }
  .hero__symbol { width: 150px; order: -1; justify-self: start; }
  .hero--saara .headline--troca { font-size: clamp(2.5rem, 11.5vw, 5rem); }
}
/* a folha branca logo abaixo não precisa mais de tanta distância */
.hero--saara + .section--sheet { margin-top: clamp(.5rem, 2vw, 1.5rem); }
@media (prefers-reduced-motion: reduce) { .hero__panel, .hero__bgimg, .hero__symbol, .hero--saara .headline, .hero--saara .lede, .hero--saara .hero__actions { animation: none !important; } }
.hero__symbol { width: min(100%, 350px); opacity: .92; }
.hero--saara .lede { max-width: 56ch; }

/* ==========================================================================
   v16 · ajustes do cliente (05/10)
   ========================================================================== */

/* HOME — círculo: a textura só gira no lugar; nada se desloca com o mouse */
.sun__img, .sun__ring, img.sun__sym, .sun__img::before { translate: none !important; }
.sun__img::before { inset: -22%; animation: sun-turn 70s linear infinite; }
.sun__img { transform: translateZ(0); }

/* HOME — cabeçalhos sem o texto de apoio: título ocupa a linha inteira */
#servicos .sec-center { grid-template-columns: 1fr; }
.section--cases .cases__head { grid-template-columns: 1fr; }
@media (min-width: 900px) { #cases-h { white-space: nowrap; max-width: none; } }
#cases-h em { display: inline; }

/* SOBRE — título menor, texto logo abaixo */
.pagehead--sobre .stack { gap: 1.5rem; }
.pagehead--sobre .statement { font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.06; max-width: 22ch; }
.pagehead--sobre .lede { max-width: 62ch; }

/* Faixa do topo das páginas internas: abre da esquerda para a direita */
@keyframes horizonte { from { opacity: .4; clip-path: inset(0 100% 0 0 round 999px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 999px); } }
.pagehead::after { animation: horizonte 1.5s var(--ease) both .2s; }

/* SOBRE — "As portas estão abertas." numa linha; fotos em preto e branco */
@media (min-width: 900px) { #espaco-h { white-space: nowrap; max-width: none; } }
.ab-mosaic img { filter: grayscale(1) contrast(1.04); transition: filter .6s ease; }
.ab-mosaic img:hover { filter: none; }

/* --- v17: topo da Sobre revisado ----------------------------------------
   Antes: tudo espremido à esquerda, metade direita vazia e a faixa mostrando
   um trecho chapado da textura. Agora o título corre numa linha, o texto usa
   a largura, e a faixa mostra o encontro do azul com o laranja. */
.pagehead--sobre .stack { gap: 1.25rem; }
.pagehead--sobre .statement { font-size: clamp(2rem, 3.9vw, 3.5rem); max-width: none; letter-spacing: -.04em; }
@media (min-width: 1100px) { .pagehead--sobre .statement { white-space: nowrap; } }
.pagehead--sobre .lede { max-width: 88ch; text-wrap: pretty; margin-top: .25rem; }
.pagehead--sobre::after {
  height: clamp(130px, 17vw, 260px);
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  --by: 30%;
}

/* --- v18: Sobre — a faixa vira uma linha fina, com a cor concentrada no meio */
.pagehead--sobre::after {
  height: 5px; border-radius: 999px; box-shadow: none;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background-size: 100% 4000%; --by: 34%;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.pagehead--sobre { padding-bottom: clamp(1rem, 3vw, 2rem); }
.pagehead--sobre { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* --- v19: topo da home em telas grandes (print do cliente, 2000px) ------
   1) a palavra que troca estava com o topo cortado ("brana"): o recorte
      agora dá espaço às ascendentes;  2) buraco entre o título e o texto;
   3) círculo sem limite de tamanho. */
.troca { padding: .18em 0 .14em; margin: -.18em 0 -.14em; }
.troca__in { padding-bottom: 0; }
.hero--sun .hero__content { gap: 1.4rem; }
.hero--sun .headline--troca { line-height: .98; margin-bottom: .2rem; }
.hero--sun .hero__actions { margin-top: .4rem; }
.hero--sun .sun { width: min(100%, 520px); }
@media (min-width: 1700px) {
  .hero--sun .sun { width: 560px; }
  .hero--sun .headline--troca { font-size: 6.25rem; }
  .hero--sun .hero__content .lede { max-width: 52ch; }
}

/* ==========================================================================
   v22 · revisão fina de home e Sobre (06/10)
   ========================================================================== */
/* Por que a Saara: texto justificado sem palavra sozinha na última linha */
.section--sheet .body { max-width: 64ch; }
.section--sheet .split { align-items: center; }
/* Clientes: faixa mais enxuta */
.logos-band { padding-block: calc(var(--section-y) * .5) calc(var(--section-y) * .8); }
.logos-band .sec-head { padding-bottom: 1.25rem; }
/* Serviços: cartão-convite com o texto alinhado ao topo, como os outros */
.svc--cta { justify-content: flex-start; }
.svc--cta .svc__name { margin-top: 0; }
.svc--cta .svc__more { margin-top: auto; }
/* Portfólio: respiro igual acima e abaixo das grades */
.sec-foot { padding-top: clamp(1.75rem, 3vw, 2.5rem); }
/* Sobre: missão e visão com o rótulo mais perto do texto; retratos com legenda alinhada */
.ab-mv__item { gap: .9rem; }
.ab-person figcaption { padding-left: 0; }
.ab-team__text .lede { max-width: 40ch; }
/* Rodapé: colunas alinhadas ao topo e linha final mais discreta */
.foot__top { align-items: start; }
.foot__bottom { font-size: .82rem; }

/* ==========================================================================
   v23 · Sobre: parte de cima refeita
   O topo apresenta a agência e as pessoas juntos (título + texto à esquerda,
   retratos em arco à direita). Missão e visão sobem para o bloco azul, junto
   dos valores: tudo o que a Saara acredita fica num lugar só.
   ========================================================================== */
.pagehead--equipe { padding-top: clamp(7.5rem, 12vw, 9.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.pagehead--equipe::after { content: none; display: none; }
.eq { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 960px) { .eq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.eq__text { display: grid; gap: 1.25rem; align-content: center; }
.eq__text .statement { font-size: clamp(2.2rem, 4vw, 3.6rem); max-width: 16ch; line-height: 1.04; }
.eq__text .lede { max-width: 50ch; }
.eq__quem { margin-top: clamp(1rem, 2.4vw, 1.75rem); padding-top: clamp(1.25rem, 2.4vw, 1.75rem); border-top: 1px solid var(--line-strong); display: grid; gap: .6rem; }
.eq__frase { font: 300 clamp(1.4rem, 2.1vw, 1.9rem)/1.2 var(--font-display); letter-spacing: -.025em; color: var(--ink); }
.eq__quem .body { max-width: 46ch; font-size: 1rem; }
.eq__people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.75rem); align-items: start; }
.eq__people .ab-person--b { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.eq__people .ab-person { animation: sobe 1s var(--ease) both .15s; }
.eq__people .ab-person--b { animation-delay: .3s; }
@media (max-width: 959px) { .eq__people { max-width: 520px; } }

/* Missão e visão sobre o azul */
.ab-mv--azul { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1px solid rgb(255 255 255 / .14); }
@media (min-width: 860px) { .ab-mv--azul .ab-mv__item:first-child { border-right-color: rgb(255 255 255 / .18); } }
.ab-mv--azul .eyebrow { color: var(--sand); }
.ab-mv--azul .eyebrow::before { background: var(--sand); }
.ab-mv--azul .ab-mv__text { color: #fff; font-size: clamp(1.25rem, 1.9vw, 1.7rem); }
.ab-values__head { padding-top: .5rem; }
@media (prefers-reduced-motion: reduce) { .eq__people .ab-person { animation: none; } }

/* ==========================================================================
   v24 · Sobre: topo com a "porta" (arco de textura) · missão e visão de volta
   à folha branca · time como seção própria · "Nosso espaço" sem o texto
   ========================================================================== */
.pagehead--porta { padding-top: clamp(7.5rem, 12vw, 9.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.pagehead--porta::after { content: none; display: none; }
.porta { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
@media (min-width: 900px) { .porta { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.porta__text { display: grid; gap: 1.5rem; }
.porta__text .statement { font-size: clamp(2.4rem, 4.4vw, 4rem); max-width: 15ch; line-height: 1.02; }
.porta__text .lede { max-width: 52ch; }
.porta__arco {
  margin: 0; justify-self: end; position: relative; overflow: hidden;
  width: min(100%, 380px); aspect-ratio: 3 / 4;
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
  box-shadow: 0 40px 80px -48px rgb(46 79 101 / .55);
  animation: nasce 1.3s var(--ease) both .15s;
}
.porta__arco span {
  position: absolute; inset: -12%;
  background: var(--tx-duna) 42% 50% / cover no-repeat;
  animation: porta-respira 36s ease-in-out infinite alternate;
}
@keyframes porta-respira { from { scale: 1; } to { scale: 1.1; } }
@media (max-width: 899px) { .porta__arco { justify-self: center; width: min(70vw, 300px); } }
.ab-space__head { grid-template-columns: 1fr; }
@media (prefers-reduced-motion: reduce) { .porta__arco, .porta__arco span { animation: none; } }

/* --- v25: Sobre — no topo, foto real da agência no lugar do arco de textura
   (o elemento de textura já aparece na home; aqui a imagem é a própria casa) */
.pagehead--foto { padding-top: clamp(7.5rem, 12vw, 9.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.pagehead--foto::after { content: none; display: none; }
.porta__foto {
  margin: 0; justify-self: end; overflow: hidden;
  width: min(100%, 460px); aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px -48px rgb(30 30 30 / .45);
  animation: nasce 1.2s var(--ease) both .15s;
}
.porta__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); transition: filter .6s ease, scale 1.2s var(--ease); }
.porta__foto:hover img { filter: none; scale: 1.03; }
@media (max-width: 899px) { .porta__foto { justify-self: stretch; width: 100%; aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) { .porta__foto { animation: none; } }

/* ==========================================================================
   v26 · Sobre: tudo acima do bloco azul numa folha só
   Uma composição: intro à esquerda, missão e visão à direita, e o time como
   rodapé da folha (rostos pequenos + nomes). Sem textura, sem elemento solto.
   ========================================================================== */
.pagehead--folha { padding-top: calc(76px + clamp(1rem, 2.4vw, 2rem)); padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.pagehead--folha::after { content: none; display: none; }
.folha {
  background: var(--paper-2); border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 var(--line), 0 30px 60px -50px rgb(46 79 101 / .35);
  padding: clamp(2rem, 4vw, 4rem);
  display: grid; gap: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 6vw, 6rem);
  animation: sobe .9s var(--ease) both;
}
@media (min-width: 960px) {
  .folha { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .folha__time { grid-column: 1 / -1; }
}
.folha__intro { display: grid; gap: 1.4rem; align-content: start; }
.folha__intro .statement { font-size: clamp(2.4rem, 4.2vw, 4rem); line-height: 1.02; max-width: 15ch; }
.folha__intro .lede { max-width: 50ch; }
.folha__mv { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); align-content: start; padding-top: clamp(0rem, 1vw, 1rem); }
.folha__item { display: grid; gap: .7rem; padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.folha__item:first-child { border-top-color: var(--brand); }
.folha__texto { font: 300 clamp(1.1rem, 1.5vw, 1.3rem)/1.45 var(--font-display); letter-spacing: -.015em; color: var(--ink); text-wrap: pretty; }
.folha__time {
  display: grid; gap: 1.5rem 2.5rem; align-items: center;
  padding-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--line);
}
@media (min-width: 900px) { .folha__time { grid-template-columns: auto minmax(0, 1fr) auto; } }
.folha__rostos { display: flex; }
.folha__rostos span { width: clamp(84px, 8vw, 112px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid var(--paper-2); box-shadow: 0 10px 30px -14px rgb(30 30 30 / .4); }
.folha__rostos span + span { margin-left: -1.6rem; }
.folha__rostos img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(1); transition: filter .5s ease; border-radius: 0 !important; }
.folha__time:hover .folha__rostos img { filter: none; }
.folha__quem { display: grid; gap: .45rem; }
.folha__frase { font: 300 clamp(1.3rem, 1.9vw, 1.7rem)/1.2 var(--font-display); letter-spacing: -.025em; }
.folha__quem .body { max-width: 52ch; font-size: 1rem; }
.folha__nomes { display: grid; gap: .9rem; }
.folha__nomes li { display: grid; gap: .1rem; padding-left: 1rem; border-left: 2px solid var(--brand); }
.folha__nomes b { font: 700 1rem/1.2 var(--font-display); }
.folha__nomes span { font-size: .85rem; color: var(--ink-3); }
.pagehead--folha + .section--cases { margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (prefers-reduced-motion: reduce) { .folha { animation: none; } }

/* --- v27: Sobre — o time vira uma faixa laranja, lado a lado, abaixo da folha */
.faixa-time {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  background: var(--brand); color: #fff; border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.75rem, 3.5vw, 3rem);
  display: grid; gap: 1.5rem 2.5rem; align-items: center;
}
@media (min-width: 900px) { .faixa-time { grid-template-columns: auto minmax(0, 1fr) auto; } }
.faixa-time .folha__rostos { gap: .9rem; }
.faixa-time .folha__rostos span { margin-left: 0; border-color: rgb(255 255 255 / .9); width: clamp(84px, 8vw, 112px); box-shadow: 0 12px 30px -14px rgb(0 0 0 / .35); }
.faixa-time .folha__rostos img { filter: grayscale(1); }
.faixa-time:hover .folha__rostos img { filter: none; }
.faixa-time .eyebrow { color: rgb(255 255 255 / .85); }
.faixa-time .eyebrow::before { background: #fff; }
.faixa-time .folha__frase { color: #fff; }
.faixa-time .folha__quem .body { color: rgb(255 255 255 / .9); }
.faixa-time .folha__nomes li { border-left-color: rgb(255 255 255 / .7); }
.faixa-time .folha__nomes b { color: #fff; }
.faixa-time .folha__nomes span { color: rgb(255 255 255 / .8); }
.pagehead--folha + .section--cases { margin-top: clamp(1rem, 2vw, 1.5rem); }
/* v28: retratos em quadrado arredondado, maiores, lado a lado */
.faixa-time .folha__rostos span { border-radius: 18px; width: clamp(104px, 10vw, 150px); aspect-ratio: 1; border-width: 0; }
.faixa-time .folha__rostos { gap: .75rem; }
.faixa-time { padding-block: clamp(1.5rem, 2.6vw, 2.25rem); }
@media (max-width: 899px) { .faixa-time .folha__rostos span { width: 120px; } }

/* --- v29: Sobre — time em dois quadros laranja lado a lado (foto + dados dentro) */
.time2 { margin-top: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 1000px) { .time2 { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.time2__head { display: grid; gap: .6rem; }
.time2__head .body { max-width: 44ch; font-size: 1rem; }
.time2__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.25rem); }
.pcard {
  background: var(--brand); color: #fff; border-radius: var(--radius-lg);
  padding: clamp(1rem, 1.6vw, 1.25rem);
  display: grid; gap: 1rem; align-content: start;
  transition: transform .4s var(--ease), background .3s ease;
}
.pcard:hover { transform: translateY(-4px); background: var(--brand-ink); }
.pcard__foto { aspect-ratio: 1; border-radius: calc(var(--radius-lg) - 10px); overflow: hidden; background: rgb(0 0 0 / .15); }
.pcard__foto img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: grayscale(1); transition: filter .5s ease; border-radius: 0 !important; }
.pcard:hover .pcard__foto img { filter: none; }
.pcard__info { display: grid; gap: .15rem; padding: 0 .25rem .25rem; }
.pcard__info b { font: 700 1.15rem/1.2 var(--font-display); letter-spacing: -.02em; }
.pcard__info span { font-size: .9rem; color: rgb(255 255 255 / .85); }
@media (max-width: 480px) { .time2__cards { grid-template-columns: 1fr; } }

/* --- v30: Sobre — quadros laranja na horizontal (foto à esquerda, dados à direita),
   ocupando a largura, com o texto do time acima */
.time2 { grid-template-columns: 1fr !important; gap: clamp(1.25rem, 2.4vw, 2rem); }
.time2__head { display: grid; grid-template-columns: 1fr; gap: .5rem 3rem; align-items: end; }
@media (min-width: 900px) {
  .time2__head { grid-template-columns: auto minmax(0, 1fr); }
  .time2__head .eyebrow { grid-column: 1 / -1; }
  .time2__head .body { max-width: 52ch; justify-self: end; text-align: right; }
}
.time2__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.5rem); }
.pcard { grid-template-columns: clamp(120px, 12vw, 170px) minmax(0, 1fr); align-items: center; gap: clamp(1rem, 2vw, 1.75rem); padding: clamp(.9rem, 1.4vw, 1.1rem); }
.pcard__foto { aspect-ratio: 1; width: 100%; }
.pcard__info { padding: 0 .5rem 0 0; gap: .3rem; }
.pcard__info b { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
.pcard__info span { font-size: .95rem; }
@media (max-width: 760px) { .time2__cards { grid-template-columns: 1fr; } .time2__head .body { text-align: left; } }

/* ==========================================================================
   v32 · home: areia em movimento dentro do círculo
   A textura oficial deixa de girar e passa a deslizar como areia ao vento:
   uma camada desliza para um lado, outra (quase transparente) para o outro,
   e um véu de grão passa devagar. Sem deslocamento com o mouse.
   ========================================================================== */
.sun__img::before { animation: none; background: none; }
.sun__areia {
  position: absolute; inset: -20% -40%; z-index: 0;
  background: var(--tx-duna) 0 50% / auto 140% repeat-x;
}
.sun__areia--a { animation: areia-a 70s linear infinite; }
.sun__areia--b {
  background-image: var(--tx-laranja); opacity: .38; mix-blend-mode: soft-light;
  animation: areia-b 95s linear infinite reverse;
}
@keyframes areia-a { to { background-position: -1920px 50%; } }
@keyframes areia-b { to { background-position: -1920px 50%; } }
.sun__img::after { /* véu de grão que passa devagar, como poeira */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--grain) 0 0 / 240px; opacity: .22; mix-blend-mode: overlay;
  animation: poeira 18s linear infinite;
}
@keyframes poeira { to { background-position: 480px 240px; } }
img.sun__sym { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .sun__areia, .sun__img::after { animation: none; } }

/* ==========================================================================
   v33 · teste: referência "Parada" — logo à esquerda, menu à direita,
   imagem no centro com o título atravessando, símbolo gigante ao fundo
   ========================================================================== */
.hero--palco {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(6.5rem, 9vw, 8rem) 0 clamp(5rem, 7vw, 6rem); overflow: hidden; isolation: isolate;
}
.palco__marca {
  position: absolute; z-index: -1; left: 50%; top: 50%; translate: -50% -52%;
  width: min(120vmin, 1100px); height: auto; opacity: .035; pointer-events: none;
}
.palco { position: relative; display: grid; justify-items: center; align-items: center; gap: 0; }
.hero--palco .sun { width: min(66vw, 560px); margin: 0; grid-area: 1 / 1; animation: nasce 1.4s var(--ease) both .1s; }
.hero--palco .sun__ring { display: none; }
.headline--palco {
  grid-area: 1 / 1; z-index: 3; align-self: center; text-align: center;
  white-space: nowrap; max-width: none !important;
  font-size: clamp(2.8rem, 8.2vw, 9rem); line-height: .95; letter-spacing: -.045em;
  color: #fff; mix-blend-mode: difference;
  animation: sobe 1s var(--ease) both .35s;
}
.headline--palco em { display: block; font-weight: 800; }
.headline--palco em, .headline--palco .troca__in { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.headline--palco .troca { display: inline-block; padding: .14em .04em .12em 0; margin: -.14em -.04em -.12em 0; }
.palco__base { grid-area: 2 / 1; display: grid; justify-items: center; text-align: center; gap: 1.25rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); animation: sobe 1s var(--ease) both .55s; }
.palco__base .lede { max-width: 56ch; text-align: center; margin: 0; }
@media (max-width: 959px) {
  .hero--palco { min-height: 0; padding-top: 7rem; }
  .hero--palco .sun { width: min(80vw, 380px); order: 0; justify-self: center; }
  .headline--palco { font-size: clamp(2.4rem, 11vw, 4.5rem); }
}
@media (prefers-reduced-motion: reduce) { .hero--palco .sun, .headline--palco, .palco__base { animation: none !important; } }
/* v33b: como na referência, fundo pastel (areia da marca) e título branco atravessando */
.hero--palco { background: linear-gradient(180deg, #EBDCCB 0%, #E3D0BB 100%); }
.hero--palco + .section--sheet { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.palco__marca { opacity: .5; filter: invert(1); }
.headline--palco { mix-blend-mode: normal; color: #fff; text-shadow: 0 2px 30px rgb(120 60 20 / .18); }
.headline--palco em { display: block; }
.headline--palco em, .headline--palco .troca__in { -webkit-text-fill-color: #fff; color: #fff; }
.palco__base .lede { color: #4A3A2E; }
.palco__base .link-arrow { color: #1E1E1E; border-bottom-color: var(--brand); }
.hero--palco .hero__next { border-color: rgb(30 30 30 / .25); color: #4A3A2E; }
.nav { background: #fff; }
.headline--palco .troca { display: block; margin-top: -.02em; }
.headline--palco { font-size: clamp(2.8rem, 7.4vw, 8rem); }
.palco__marca { opacity: .35; }

/* ==========================================================================
   v34 · teste: a imagem oficial BG 02 ocupa todo o topo; cabeçalho
   transparente com logo e menu brancos sobre ela (vira branco ao rolar)
   ========================================================================== */
.nav--sobre-imagem:not(.is-scrolled) { background: transparent; box-shadow: none; }
.nav--sobre-imagem:not(.is-scrolled) .nav__links a { color: rgb(255 255 255 / .82); }
.nav--sobre-imagem:not(.is-scrolled) .nav__links a:hover,
.nav--sobre-imagem:not(.is-scrolled) .nav__links a[aria-current="page"] { color: #fff; }
.nav--sobre-imagem:not(.is-scrolled) .nav__links a::after { background: #fff; }
.nav--sobre-imagem:not(.is-scrolled) .nav__toggle { color: #fff; }
.wordmark--dupla { position: relative; display: inline-grid; align-items: center; }
.wordmark--dupla img { grid-area: 1 / 1; transition: opacity .3s ease; }
.wordmark__escuro { opacity: 0; }
.nav.is-scrolled .wordmark__claro { opacity: 0; }
.nav.is-scrolled .wordmark__escuro { opacity: 1; }

.hero--fundo {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(7rem, 10vw, 9rem) 0 clamp(5rem, 7vw, 6rem);
  margin-top: -76px;
}
.fundo__img {
  position: absolute; inset: -6%; z-index: -1;
  background: var(--tx-laranja) 50% 50% / cover no-repeat;
  animation: fundo-areia 40s ease-in-out infinite alternate;
}
@keyframes fundo-areia { from { background-position: 42% 50%; scale: 1; } to { background-position: 58% 50%; scale: 1.08; } }
.hero--fundo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 50% 50%, rgb(0 0 0 / .18), transparent 70%); }
.fundo__conteudo { display: grid; justify-items: center; text-align: center; gap: clamp(1.25rem, 2.4vw, 1.75rem); }
.headline--fundo {
  color: #fff; text-align: center; white-space: nowrap; max-width: none !important;
  font-size: clamp(2.8rem, 7.4vw, 8rem); line-height: .96; letter-spacing: -.045em;
  animation: sobe 1s var(--ease) both .15s;
}
.headline--fundo em { display: block; font-weight: 800; }
.headline--fundo em, .headline--fundo .troca__in { background: none; -webkit-text-fill-color: #fff; color: #fff; }
.headline--fundo .troca { display: block; padding: .14em 0 .12em; margin: -.14em 0 -.12em; }
.hero--fundo .lede { color: rgb(255 255 255 / .9); text-align: center; max-width: 56ch; animation: sobe 1s var(--ease) both .3s; }
.hero--fundo .link-arrow { color: #fff; border-bottom-color: rgb(255 255 255 / .7); animation: sobe 1s var(--ease) both .4s; }
.hero--fundo .link-arrow:hover { color: #fff; border-bottom-color: #fff; }
.hero--fundo .hero__next { color: rgb(255 255 255 / .9); border-color: rgb(255 255 255 / .4); background: transparent; }
.hero--fundo .hero__next:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero--fundo + .section--sheet { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 959px) { .hero--fundo { min-height: 92svh; } .headline--fundo { white-space: normal; font-size: clamp(2.6rem, 11.5vw, 5rem); } }
@media (prefers-reduced-motion: reduce) { .fundo__img, .headline--fundo, .hero--fundo .lede, .hero--fundo .link-arrow { animation: none !important; } }
/* v34b: título numa linha só; sem "Ver cases"; topo sem sobra de espaço */
.headline--fundo em, .headline--fundo .troca { display: inline; }
.headline--fundo .troca { display: inline-block; vertical-align: bottom; padding: .14em .05em .12em 0; margin: -.14em -.05em -.12em 0; }
.headline--fundo { font-size: clamp(2.6rem, 6.6vw, 7rem); }
.hero--fundo { min-height: 0; padding: clamp(11rem, 20vw, 17rem) 0 clamp(7rem, 10vw, 9rem); }
.fundo__conteudo { gap: clamp(1.25rem, 2vw, 1.5rem); }
.hero--fundo .hero__next { bottom: clamp(1.5rem, 3vw, 2.25rem); }
@media (max-width: 959px) { .hero--fundo { min-height: 0; padding: 9rem 0 6.5rem; } .headline--fundo { white-space: normal; } .headline--fundo .troca { display: block; } }
.hero--fundo { padding: clamp(12rem, 22vw, 18rem) 0 clamp(9rem, 12vw, 11rem); }

/* v34c: palavra alinhada à linha de base (estava subindo), sem cortar hastes;
   topo mais alto e mais respiro entre título, texto e botão */
.headline--fundo .troca {
  display: inline-block; vertical-align: baseline; overflow: visible;
  padding: 0; margin: 0; min-width: 2.75em; text-align: left;
  clip-path: inset(-.25em -.1em -.3em 0);
}
.headline--fundo .troca__in { display: inline-block; }
.hero--fundo { padding: clamp(14rem, 25vw, 21rem) 0 clamp(11rem, 14vw, 13rem); }
.fundo__conteudo { gap: clamp(2rem, 3.2vw, 2.75rem); }
.hero--fundo .lede { font-size: clamp(1.08rem, 1.35vw, 1.22rem); }
.hero--fundo .hero__next { bottom: clamp(2rem, 3.5vw, 2.75rem); }
@media (max-width: 959px) { .hero--fundo { padding: 9.5rem 0 7rem; } .headline--fundo .troca { display: block; min-width: 0; text-align: center; } }
/* v34d: fundo invertido (espelhado na horizontal) */
.fundo__img { transform: scaleX(-1); }
/* v34e: fundo com azul — BG 01 (azul, laranja e areia), escurecido só onde o texto passa */
.fundo__img { background-image: var(--tx-duna); transform: none; }
@keyframes fundo-areia { from { background-position: 50% 40%; scale: 1; } to { background-position: 50% 60%; scale: 1.08; } }
.hero--fundo::after { background: radial-gradient(70% 70% at 50% 55%, rgb(10 10 10 / .42), rgb(10 10 10 / .08) 75%); }
/* v34f: volta o fundo dramático (BG 02, espelhado) com um reflexo azul petróleo no canto */
.fundo__img { background-image: var(--tx-laranja); transform: scaleX(-1); }
@keyframes fundo-areia { from { background-position: 42% 50%; scale: 1; } to { background-position: 58% 50%; scale: 1.08; } }
.hero--fundo::after {
  background:
    radial-gradient(55% 70% at 88% 18%, rgb(46 79 101 / .55), transparent 70%),
    radial-gradient(60% 60% at 50% 50%, rgb(0 0 0 / .18), transparent 70%);
}

/* v34g: movimento na imagem (areia ao vento) e equilíbrio vertical do topo */
.hero--fundo { min-height: 88svh; padding: clamp(9rem, 14vw, 12rem) 0 clamp(8rem, 11vw, 10rem); justify-content: center; }
.fundo__img { inset: -8%; background-size: cover; animation: areia-vento-a 48s ease-in-out infinite alternate; }
.fundo__img--b {
  opacity: .45; mix-blend-mode: soft-light; transform: scaleX(-1) scaleY(-1);
  animation: areia-vento-b 64s ease-in-out infinite alternate-reverse;
}
@keyframes areia-vento-a { from { background-position: 38% 46%; scale: 1.02; } to { background-position: 62% 54%; scale: 1.12; } }
@keyframes areia-vento-b { from { background-position: 60% 55%; scale: 1.06; } to { background-position: 40% 45%; scale: 1.16; } }
.fundo__grao {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grain) 0 0 / 260px; opacity: .16; mix-blend-mode: overlay;
  animation: poeira 22s linear infinite;
}
.fundo__conteudo { gap: clamp(1.75rem, 2.8vw, 2.4rem); translate: 0 -1.5vh; }
.hero--fundo .hero__next { bottom: clamp(2rem, 4vw, 3rem); }
@media (max-width: 959px) { .hero--fundo { min-height: 0; padding: 9.5rem 0 7rem; } .fundo__conteudo { translate: none; } }
@media (prefers-reduced-motion: reduce) { .fundo__img, .fundo__img--b, .fundo__grao { animation: none !important; } }

/* v34h: topo volta à altura maior (o cliente preferiu); movimento mantido */
.hero--fundo { min-height: 0; padding: clamp(14rem, 25vw, 21rem) 0 clamp(11rem, 14vw, 13rem); }
.fundo__conteudo { translate: none; }

/* ==========================================================================
   v35 · Sobre: círculo ao lado do texto · missão e visão lado a lado,
   encaixadas numa folha · fotos (quadros laranja) logo abaixo
   ========================================================================== */
.pagehead--circulo { padding-top: clamp(7.5rem, 12vw, 9.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.pagehead--circulo::after { content: none; display: none; }
.sob { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
@media (min-width: 900px) { .sob { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.sob__text { display: grid; gap: 1.5rem; }
.sob__text .statement { font-size: clamp(2.4rem, 4.4vw, 4rem); max-width: 15ch; line-height: 1.02; }
.sob__text .lede { max-width: 50ch; }
.pagehead--circulo .sun { width: min(100%, 420px); justify-self: end; margin: 0; }
@media (max-width: 899px) { .pagehead--circulo .sun { justify-self: center; width: min(70vw, 320px); order: 2; } }
.section--mv { padding-block: clamp(2.5rem, 4.5vw, 3.5rem); margin-top: clamp(1rem, 2vw, 1.5rem); }
.section--mv .ab-mv__text { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.4; }
.section--time { padding-block: clamp(2.5rem, 5vw, 4rem) var(--section-y); }
.section--time .time2 { margin-top: 0; }
.section--time + .section--cases { margin-top: 0; }
/* v35b: texto do topo da Sobre ocupa a coluna inteira (sobrava espaço à direita) */
.sob__text .statement { max-width: none; font-size: clamp(2.4rem, 4.6vw, 4.2rem); }
.sob__text .lede { max-width: none; font-size: clamp(1.08rem, 1.4vw, 1.25rem); }
@media (min-width: 900px) { .sob { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2.5rem, 5vw, 4.5rem); } }
.section--time[hidden] { display: none; }
.section--mv + .section--time[hidden] + .section--cases { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ==========================================================================
   v36 · RITMO VERTICAL ÚNICO (home e Sobre)
   Regra: entre o conteúdo de uma seção e o da seguinte, sempre a mesma
   distância (--section-y, 112px no computador). Blocos com fundo (folha,
   azul, convite) têm respiro interno de 3/4 disso e 24px de margem externa.
   ========================================================================== */
main > .section, main > .section--tight, main > .logos-band, main > [data-depoimentos], main > .section--mv, main > .section--time {
  padding-top: calc(var(--section-y) * .5) !important;
  padding-bottom: calc(var(--section-y) * .5) !important;
  margin-top: 0 !important; margin-bottom: 0 !important;
}
/* blocos com fundo */
main > .section--sheet, main > .section--cases, main > .section--mv {
  padding-top: calc(var(--section-y) * .75) !important;
  padding-bottom: calc(var(--section-y) * .75) !important;
  margin-top: clamp(1rem, 2vw, 1.5rem) !important; margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
}
/* convite final: a seção só segura o painel */
main > .section:has(> .wrap > .cta-panel) { padding-top: calc(var(--section-y) * .5) !important; padding-bottom: calc(var(--section-y) * .75) !important; }
main > .section--ink:has(> .cta) { padding-top: calc(var(--section-y) * .5) !important; padding-bottom: calc(var(--section-y) * .75) !important; }
/* topo da home: a imagem encosta no cabeçalho; embaixo, a mesma margem dos blocos */
.hero--fundo { margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.hero--fundo + .section--sheet { margin-top: 0 !important; }
/* topo da Sobre */
.pagehead--circulo { padding-bottom: calc(var(--section-y) * .5) !important; }
/* dentro das seções: título → conteúdo sempre igual */
.sec-head, .head, .cases__head, .time2__head { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.stack.gap-lg { gap: clamp(2rem, 4vw, 3.5rem) !important; }
.sec-foot { padding-top: clamp(1.5rem, 3vw, 2.5rem) !important; }

/* v37 · ajustes: topo do portfólio web, PB no portfólio, rodapé em 2 linhas, manifesto justificado */
.section--tint .sec-head { gap: clamp(.75rem, 1.4vw, 1rem) !important; }
.section--tint .sec-head .title { margin-bottom: clamp(1rem, 2vw, 1.5rem) !important; }
.platforms--home { margin-top: 0 !important; padding-top: clamp(1.25rem, 2.2vw, 1.75rem) !important; }
.section--tint [data-portfolio] .pf-filters { padding-top: clamp(1.75rem, 3vw, 2.5rem) !important; padding-bottom: clamp(1.25rem, 2.2vw, 1.75rem) !important; }
.pf-card__media img { filter: grayscale(1); transition: filter .5s ease, transform .7s var(--ease) !important; }
.pf-card:hover .pf-card__media img, .pf-card:focus-within .pf-card__media img { filter: none; }
.foot__brand p { max-width: 46ch !important; }
#sobre .split__text .body { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* v38 · parágrafos corridos justificados (home e Sobre). Textos centralizados do topo e dos convites ficam como estão. */
.lede, .body, .svc__desc, .case__text, .depo__text, .ab-mv__text, .ab-val p, .pcard p, .pf-card__desc, .sob__text p {
  text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty;
}
.hero--fundo .lede, .palco__base .lede, .cta .lede, .cta-panel .lede, .cta p, .cta-panel p, .headline + .lede.is-centro { text-align: center; text-align-last: center; hyphens: manual; }

/* v39 · escala tipográfica única (home e Sobre)
   Display (Urbanist 300): H1 topo 66 · frase de convite 60 · título de seção 48 · faixa de logos 32
   Subtítulo (Urbanist 700): 21 em cards, 18 no portfólio
   Texto (Figtree 400): lede 19 · corpo 17 · texto de card 16 · rodapé 15 · etiquetas 14
   ========================================================================== */
.statement, .cta .statement, .cta-panel .headline, .section--ink .statement { font-size: clamp(2.4rem, 4.6vw, 3.75rem) !important; line-height: 1.04 !important; font-weight: 300 !important; }
h1.statement, .pagehead h1 { font-size: clamp(2.6rem, 5vw, 4.125rem) !important; line-height: 1.04 !important; }
.title, .headline--md { font-size: clamp(2rem, 3.6vw, 3rem) !important; line-height: 1.06 !important; font-weight: 300 !important; letter-spacing: -.01em; }
.lede { font-family: var(--font-text) !important; font-size: clamp(1.05rem, 1.35vw, 1.1875rem) !important; line-height: 1.6 !important; font-weight: 400 !important; }
.body, .ab-mv__text, .sob__text p:not(.eyebrow) { font-family: var(--font-text) !important; font-size: clamp(1rem, 1.2vw, 1.0625rem) !important; line-height: 1.7 !important; font-weight: 400 !important; color: var(--ink-2); }
.svc__desc, .case__text, .depo__text, .ab-val p, .pcard p, .pf-card__desc { font-family: var(--font-text) !important; font-size: 1rem !important; line-height: 1.65 !important; font-weight: 400 !important; }
.svc__name, .case__name, .ab-val h3, .pcard h3, .time2 h3 { font-family: var(--font-display) !important; font-size: 1.3125rem !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -.01em; }
.pf-card__name { font-size: 1.125rem !important; line-height: 1.3 !important; font-weight: 700 !important; }
.eyebrow, .case__tag, .case__label, .foot__head, .link-arrow { font-size: .875rem !important; font-weight: 600 !important; line-height: 1.35 !important; }
.pf-card__tag, .platforms__label, .depo__who span, .case__num { font-size: .875rem !important; font-weight: 400 !important; line-height: 1.5 !important; }
.pf-filters button, .hero__next { font-size: .875rem !important; font-weight: 500 !important; }
.btn { font-size: .9375rem !important; font-weight: 600 !important; }
.sob__text .lede { font-size: clamp(1.05rem, 1.35vw, 1.1875rem) !important; line-height: 1.6 !important; }
/* v39b · respiro entre título e filtros em todos os portfólios */
[data-portfolio] .pf-filters { padding-top: clamp(2rem, 3.4vw, 3rem) !important; padding-bottom: clamp(1.25rem, 2.2vw, 1.75rem) !important; }

/* ==========================================================================
   v40 · PÁGINA MARKETING
   Topo em duas colunas com fio de areia · cartões brancos 2×2 · etapas no bloco azul
   ========================================================================== */
.pagehead--mk::after { display: none !important; }
.pagehead--mk { padding-bottom: 0 !important; }
.mk-head { display: grid; gap: clamp(1.25rem, 3vw, 2rem) clamp(2rem, 5vw, 5rem); align-items: end; }
@media (min-width: 900px) { .mk-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } .mk-head .lede { max-width: 44ch; padding-bottom: .5rem; } }
.pagehead--mk .statement { max-width: 14ch; padding-right: 0 !important; }
.mk-fio { display: block; height: 3px; margin-top: clamp(2rem, 4vw, 3rem); border-radius: 999px; background: var(--tx-duna) 50% 40% / 100% auto no-repeat; opacity: .9; }

.mk-grid { display: grid; gap: clamp(1rem, 1.6vw, 1.4rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mk-card {
  position: relative; display: flex; flex-direction: column; gap: .7rem;
  padding: clamp(1.75rem, 2.6vw, 2.4rem); min-height: 300px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.mk-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgb(46 79 101 / .45); border-color: transparent; }
.mk-card__media { aspect-ratio: 16 / 7; border-radius: calc(var(--radius-lg) - 8px); overflow: hidden; margin-bottom: .75rem; background: var(--paper); }
.mk-card__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .5s ease, transform .7s var(--ease); }
.mk-card:hover .mk-card__media img { filter: none; transform: scale(1.03); }
.mk-card__n { font: 300 1.75rem/1 var(--font-display); color: var(--blue); letter-spacing: -.02em; margin-top: auto; }
.mk-card h3 { font: 700 1.3125rem/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.mk-card p { font-size: 1rem; line-height: 1.65; color: var(--ink-2); text-align: justify; text-align-last: left; hyphens: auto; }

.mk-etapas { list-style: none; padding: 0; margin: 0; }
.mk-etapa { font-family: var(--font-text); font-size: .875rem; font-weight: 600; color: var(--sand); margin-bottom: auto; }
.mk-steps .ab-val h3 { margin-top: 1.5rem; }
.mk-steps .ab-val p { text-align: justify; text-align-last: left; hyphens: auto; }

/* v41 · TOPO COLORIDO DAS PÁGINAS INTERNAS
   Cada serviço com uma cor da paleta, em bloco arredondado abaixo do cabeçalho branco.
   areia = Marketing · laranja = Tráfego · azul = Design e marca · céu = Web · grafite = Automação */
.pagehead--cor {
  margin: calc(76px + .75rem) clamp(.5rem, 2vw, 1.5rem) 0 !important;
  padding: clamp(4rem, 7vw, 6rem) 0 clamp(3.5rem, 6vw, 5rem) !important;
  border-radius: var(--radius-lg); background: var(--paper) !important; color: var(--ink) !important;
}
.pagehead--cor::after { display: none !important; }
.pagehead--cor .mk-fio { display: none; }
.pagehead--cor .statement, .pagehead--cor .statement em, .pagehead--cor .lede { color: inherit !important; }
.pagehead--cor .mk-head__dir { align-self: end; }
.pagehead--cor .hero__actions { margin-top: .25rem; }
/* areia: texto chumbo */
.cor-areia { background: var(--sand) !important; color: var(--ink) !important; }
.cor-areia .eyebrow--brand { color: var(--brand-ink) !important; }
.cor-areia .eyebrow--brand::before { background: var(--brand-ink) !important; }
.cor-areia .lede { color: rgb(30 30 30 / .82) !important; }
/* fundos escuros: texto branco, etiqueta em areia */
.cor-laranja { background: var(--brand) !important; color: #fff !important; }
.cor-azul    { background: var(--blue) !important; color: #fff !important; }
.cor-ceu     { background: #5993C5 !important; color: #fff !important; }
.cor-grafite { background: #353535 !important; color: #fff !important; }
.cor-laranja .eyebrow--brand, .cor-azul .eyebrow--brand, .cor-ceu .eyebrow--brand, .cor-grafite .eyebrow--brand { color: var(--sand) !important; }
.cor-laranja .eyebrow--brand::before, .cor-azul .eyebrow--brand::before, .cor-ceu .eyebrow--brand::before, .cor-grafite .eyebrow--brand::before { background: var(--sand) !important; }
.cor-laranja .eyebrow--brand { color: #fff !important; }
.cor-laranja .eyebrow--brand::before { background: #fff !important; }
.cor-laranja .lede, .cor-azul .lede, .cor-ceu .lede, .cor-grafite .lede { color: rgb(255 255 255 / .86) !important; }
.cor-laranja .btn, .cor-azul .btn, .cor-ceu .btn, .cor-grafite .btn { background: #fff; color: var(--ink); border-color: #fff; }
.cor-laranja .btn--ghost, .cor-azul .btn--ghost, .cor-ceu .btn--ghost, .cor-grafite .btn--ghost { background: transparent; color: #fff; border-color: rgb(255 255 255 / .5); }
/* a seção seguinte respira igual às demais */
.pagehead--cor + .section { margin-top: 0 !important; }

/* v42 · TOPO CLARO + FAIXA DE TEXTURA (substitui o bloco colorido da v41)
   Texto no fundo claro, em duas colunas; abaixo, uma faixa larga e baixa com a textura oficial.
   Cada página usa uma textura: duna (Marketing) · laranja (Tráfego) · azul (Design) · areia (Web) · azul invertido (Automação) */
.pagehead--faixa { margin: 0 !important; padding: clamp(7.5rem, 12vw, 9.5rem) 0 0 !important; background: var(--paper) !important; color: var(--ink) !important; border-radius: 0; }
.pagehead--faixa::after { display: none !important; }
.pagehead--faixa .mk-head__dir { align-self: end; }
.mk-faixa { position: relative; overflow: hidden; height: clamp(120px, 16vw, 200px); margin-top: clamp(2.5rem, 4.5vw, 3.5rem); border-radius: var(--radius-lg); isolation: isolate; }
.mk-faixa__a, .mk-faixa__b { position: absolute; inset: -12% -6%; background: var(--tx) 50% 50% / cover no-repeat; }
.mk-faixa__a { animation: areia-vento-a 48s ease-in-out infinite alternate; }
.mk-faixa__b { opacity: .4; mix-blend-mode: soft-light; transform: scaleX(-1); animation: areia-vento-b 64s ease-in-out infinite alternate-reverse; }
.mk-faixa--duna     { --tx: var(--tx-duna); }
.mk-faixa--laranja  { --tx: var(--tx-laranja); }
.mk-faixa--azul     { --tx: var(--tx-azul); }
.mk-faixa--areia    { --tx: var(--tx-areia); }
.mk-faixa--azul-inv { --tx: var(--tx-azul); } .mk-faixa--azul-inv .mk-faixa__a { transform: scaleX(-1); } .mk-faixa--azul-inv .mk-faixa__b { transform: none; }
@media (prefers-reduced-motion: reduce) { .mk-faixa__a, .mk-faixa__b { animation: none; } }
.pagehead--faixa + .section { margin-top: 0 !important; }
.mk-faixa--azul .mk-faixa__a, .mk-faixa--azul-inv .mk-faixa__a { background-position: 50% 18%; filter: brightness(1.18) saturate(1.1); }
.mk-faixa--azul .mk-faixa__b, .mk-faixa--azul-inv .mk-faixa__b { background-position: 50% 30%; }
.mk-faixa--duna .mk-faixa__a { background-position: 50% 62%; }
/* a animação controla background-position; o recorte da faixa é feito pelo inset das camadas */
.mk-faixa--azul .mk-faixa__a, .mk-faixa--azul-inv .mk-faixa__a { inset: -210% -6% -10%; filter: none; }
.mk-faixa--azul .mk-faixa__b, .mk-faixa--azul-inv .mk-faixa__b { inset: -190% -6% -8%; }
.mk-faixa--duna .mk-faixa__a { inset: -140% -6% -10%; }
/* v43 · título no bloco Missão e visão (Sobre) */
.section--mv .wrap { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
/* v43b · rodapé: frase em duas linhas fixas no computador */
.foot__brand p { max-width: none !important; }
@media (min-width: 900px) { .foot__brand p { white-space: nowrap; } }

/* ==========================================================================
   v44 · MARKETING, versão editorial (referência Bili, no nosso lado claro)
   Lista numerada com fios finos · faixa de palavras grandes · painel laranja + etapas
   ========================================================================== */
.mk2-head { display: grid; gap: 1.25rem 4rem; align-items: end; }
@media (min-width: 900px) { .mk2-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .mk2-head .lede { max-width: 40ch; justify-self: end; padding-bottom: .4rem; } }

.mk2-itens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line-strong); }
@media (min-width: 760px) { .mk2-itens { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 5vw, 5rem); } }
.mk2-item { position: relative; display: grid; gap: .75rem; padding: clamp(1.75rem, 3vw, 2.5rem) 0 clamp(2rem, 3.6vw, 3rem); border-bottom: 1px solid var(--line-strong); }
.mk2-item__n { font: 300 clamp(1.6rem, 2.2vw, 2rem)/1 var(--font-display); color: var(--brand); letter-spacing: -.02em; margin-bottom: clamp(1.25rem, 2.6vw, 2.25rem); }
.mk2-item h3 { font: 700 1.3125rem/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.mk2-item p { font-size: 1rem; line-height: 1.65; color: var(--ink-2); text-align: justify; text-align-last: left; hyphens: auto; max-width: 48ch; }
@media (min-width: 760px) { .mk2-item:nth-child(-n+2) { border-top: 0; } }

.mk2-palavras { padding-block: clamp(1.5rem, 3vw, 2.5rem) !important; }
.mk2-palavras__linha { font: 300 clamp(1.6rem, 3.4vw, 3rem)/1.25 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-align: left; margin: 0; text-wrap: balance; }
.mk2-palavras__linha span { color: var(--brand); margin: 0 .15em; font-weight: 400; }

.mk2-como__grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 960px) { .mk2-como__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: stretch; } }
.mk2-painel { display: flex; flex-direction: column; gap: 1.25rem; padding: clamp(2rem, 3.4vw, 3rem); border-radius: var(--radius-lg); background: var(--brand); color: #fff; }
.mk2-painel .eyebrow { color: #fff; } .mk2-painel .eyebrow::before { background: #fff; }
.mk2-painel .title, .mk2-painel .title em { color: #fff !important; }
.mk2-painel .body { color: rgb(255 255 255 / .86) !important; max-width: 34ch; text-align: left !important; }
.mk2-painel .btn { align-self: flex-start; margin-top: auto; background: #fff; color: var(--ink); border-color: #fff; }
.mk2-painel .btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.mk2-etapas { list-style: none; margin: 0; padding: 0 clamp(0rem, 1vw, .5rem); display: grid; align-content: center; }
.mk2-etapa { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1rem; padding: clamp(1.25rem, 2.2vw, 1.75rem) 0; border-top: 1px solid var(--line-strong); }
.mk2-etapa:last-child { border-bottom: 1px solid var(--line-strong); }
.mk2-etapa__n { font: 300 1.5rem/1.1 var(--font-display); color: var(--brand); letter-spacing: -.02em; }
.mk2-etapa h3 { font: 700 1.3125rem/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); margin-bottom: .35rem; }
.mk2-etapa p { font-size: 1rem; line-height: 1.6; color: var(--ink-2); max-width: 46ch; text-align: justify; text-align-last: left; hyphens: auto; }

/* ==========================================================================
   v45 · TOPO COM FOTO (páginas internas)
   Título grande à esquerda invade a foto PB à direita; embaixo, azulejo de textura + texto + botões.
   ========================================================================== */
.pagehead--foto { position: relative; overflow: visible; padding: clamp(7.5rem, 12vw, 9.5rem) 0 clamp(3rem, 5vw, 4rem) !important; background: var(--paper) !important; color: var(--ink) !important; }
.pagehead--foto::after { display: none !important; }
.pagehead__foto { position: absolute; top: 0; right: 0; bottom: 0; width: min(44vw, 760px); overflow: hidden; border-radius: 0 0 0 var(--radius-lg); }
.pagehead__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; filter: grayscale(1) contrast(1.04); display: block; }
.pagehead__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--paper) 0%, rgb(244 244 244 / 0) 22%); pointer-events: none; }
.pf-top { position: relative; z-index: 1; display: grid; gap: clamp(1.25rem, 2.4vw, 1.75rem); }
.statement--xl { font-size: clamp(3rem, 7.2vw, 6.25rem) !important; line-height: .98 !important; letter-spacing: -.03em; max-width: 11ch !important; }
.statement--xl em { font-weight: 700; }
.pf-baixo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 3.2vw, 3rem); align-items: end; margin-top: clamp(1rem, 2vw, 1.5rem); max-width: 60%; }
.pf-baixo .lede { max-width: 38ch; margin: 0; }
.pf-tile { position: relative; display: block; width: clamp(120px, 12vw, 180px); aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; }
.pf-tile__a, .pf-tile__b { position: absolute; inset: -12%; background: var(--tx) 50% 50% / cover no-repeat; }
.pf-tile__a { animation: areia-vento-a 48s ease-in-out infinite alternate; }
.pf-tile__b { opacity: .4; mix-blend-mode: soft-light; transform: scaleX(-1); animation: areia-vento-b 64s ease-in-out infinite alternate-reverse; }
.pf-tile--duna { --tx: var(--tx-duna); } .pf-tile--laranja { --tx: var(--tx-laranja); } .pf-tile--azul { --tx: var(--tx-azul); } .pf-tile--areia { --tx: var(--tx-areia); }
@media (prefers-reduced-motion: reduce) { .pf-tile__a, .pf-tile__b { animation: none; } }
@media (max-width: 959px) {
  .pagehead__foto { position: relative; width: auto; height: clamp(220px, 48vw, 360px); margin: 1.5rem var(--gutter) 0; border-radius: var(--radius-lg); order: 2; }
  .pagehead__foto::after { display: none; }
  .pagehead--foto { display: flex; flex-direction: column; }
  .pf-top { order: 1; }
  .statement--xl { max-width: 14ch !important; }
  .pf-baixo { max-width: none; }
}
@media (max-width: 599px) { .pf-baixo { grid-template-columns: 1fr; } .pf-tile { width: 96px; } }
.pagehead--foto + .section { margin-top: 0 !important; }
.pagehead h1.statement--xl, h1.statement.statement--xl { font-size: clamp(3rem, 7.2vw, 6.25rem) !important; line-height: .98 !important; max-width: 11ch !important; }
@media (max-width: 959px) { .pagehead h1.statement--xl { max-width: 14ch !important; } }
/* v45b · título invade a foto, como na referência */
.pagehead h1.statement--xl, h1.statement.statement--xl { font-size: clamp(3rem, 7.8vw, 7rem) !important; max-width: 12.5ch !important; }
.pagehead__foto { width: min(46vw, 800px); }
.pagehead__foto::after { background: linear-gradient(90deg, var(--paper) 0%, rgb(244 244 244 / .55) 14%, rgb(244 244 244 / 0) 34%); }
/* v45c · ajustes do cliente: foto reta, sem etiqueta e sem botões, título maior em 2 linhas, azulejo menor */
.pagehead__foto { border-radius: 0; }
.pagehead h1.statement--xl, h1.statement.statement--xl { font-size: clamp(3.2rem, 8.4vw, 7.75rem) !important; line-height: .96 !important; max-width: 20ch !important; text-wrap: balance; }
.pf-baixo { align-items: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); max-width: 56%; gap: clamp(1.25rem, 2.4vw, 2rem); }
.pf-tile { width: clamp(88px, 8vw, 120px); }
.pf-baixo .lede { max-width: 42ch; }
@media (max-width: 959px) { .pagehead h1.statement--xl { max-width: 14ch !important; } .pf-baixo { max-width: none; } }
/* v45d · proporção: título termina pouco depois do começo da foto em qualquer largura */
@media (min-width: 960px) { .pagehead h1.statement--xl, h1.statement.statement--xl { font-size: clamp(3.2rem, 6.6vw, 7.25rem) !important; max-width: 20ch !important; } }

/* v46 · "O que está incluído" com cor: cada frente = uma textura oficial com o número por cima */
.mk3-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 2.2vw, 2rem) clamp(1rem, 1.8vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .mk3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mk3-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mk3-item { display: grid; gap: .6rem; align-content: start; }
.mk3-tex { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: .9rem; isolation: isolate; }
.mk3-tex__img { position: absolute; inset: -6%; background: var(--tx) var(--pos, 50% 50%) / cover no-repeat; transition: transform .8s var(--ease); }
.mk3-item:hover .mk3-tex__img { transform: scale(1.05); }
.mk3-tex b { position: absolute; left: clamp(1rem, 1.6vw, 1.4rem); bottom: clamp(.6rem, 1.2vw, 1rem); font: 300 clamp(2.4rem, 3.4vw, 3.25rem)/1 var(--font-display); color: #fff; letter-spacing: -.03em; text-shadow: 0 2px 18px rgb(0 0 0 / .25); }
.mk3-tex--duna    { --tx: var(--tx-duna);    --pos: 50% 70%; }
.mk3-tex--laranja { --tx: var(--tx-laranja); --pos: 50% 45%; }
.mk3-tex--azul    { --tx: var(--tx-azul);    --pos: 50% 82%; }
.mk3-tex--areia   { --tx: var(--tx-areia);   --pos: 50% 50%; }
.mk3-tex--areia b { color: var(--ink); text-shadow: none; }
.mk3-item h3 { font: 700 1.3125rem/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.mk3-item p { font-size: 1rem; line-height: 1.65; color: var(--ink-2); text-align: justify; text-align-last: left; hyphens: auto; }

/* ==========================================================================
   v47 · MARKETING, versão editorial com coluna fixa + trilha
   ========================================================================== */
.mk4__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 960px) { .mk4__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(3rem, 7vw, 7rem); } .mk4__fixo { position: sticky; top: calc(76px + 2rem); align-self: start; } }
.mk4__fixo { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.mk4__fixo .body { max-width: 36ch; }
.mk4__duna { position: relative; display: block; width: 100%; max-width: 420px; aspect-ratio: 5 / 3; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; }
.mk4__duna-a, .mk4__duna-b { position: absolute; inset: -10%; background: var(--tx-duna) 50% 70% / cover no-repeat; }
.mk4__duna-a { animation: areia-vento-a 48s ease-in-out infinite alternate; }
.mk4__duna-b { opacity: .4; mix-blend-mode: soft-light; transform: scaleX(-1); animation: areia-vento-b 64s ease-in-out infinite alternate-reverse; }
@media (prefers-reduced-motion: reduce) { .mk4__duna-a, .mk4__duna-b { animation: none; } }
.mk4__lista { display: grid; gap: clamp(3rem, 6vw, 5.5rem); padding-top: clamp(.5rem, 2vw, 2rem); }
.mk4__item { display: grid; gap: .9rem; }
.mk4__frase { font: 300 clamp(1.9rem, 3.1vw, 2.75rem)/1.08 var(--font-display) !important; letter-spacing: -.02em; color: var(--ink); max-width: 16ch; text-wrap: balance; }
.mk4__frase em { font-style: normal; font-weight: 700; }
.mk4__item p:not(.eyebrow) { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); max-width: 52ch; text-align: justify; text-align-last: left; hyphens: auto; }

/* trilha: uma linha de areia com um ponto por etapa */
.mk4-como .mk2-head .lede { color: rgb(255 255 255 / .82); }
.trilha { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem 1.5rem; position: relative; }
@media (min-width: 760px) { .trilha { grid-template-columns: repeat(4, minmax(0, 1fr)); } .trilha::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: rgb(220 191 165 / .45); } }
.trilha__etapa { position: relative; display: grid; gap: .5rem; padding-top: 2rem; }
.trilha__ponto { position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 5px var(--blue); }
.trilha__etapa:first-child .trilha__ponto { background: var(--brand); }
.trilha__n { font-family: var(--font-text); font-size: .875rem; font-weight: 600; color: var(--sand); }
.trilha__etapa h3 { font: 700 1.3125rem/1.2 var(--font-display); color: #fff; letter-spacing: -.01em; }
.trilha__etapa p { font-size: 1rem; line-height: 1.6; color: rgb(255 255 255 / .78); text-align: left !important; max-width: 30ch; }
@media (max-width: 759px) { .trilha { padding-left: 1.5rem; } .trilha::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: rgb(220 191 165 / .45); } .trilha__etapa { padding-top: 0; padding-left: .5rem; } .trilha__ponto { left: -1.5rem; top: 2px; } }

/* ==========================================================================
   v48 · MARKETING do zero: mostrar o plano
   folha branca com o plano desenhado · cartões da home · bloco azul · prova · convite
   ========================================================================== */
.mk5-plano__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 960px) { .mk5-plano__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 6vw, 6rem); } }
.mk5-plano .body { max-width: 46ch; }
.mk5-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.mk5-checks li { position: relative; padding-left: 1.75rem; font-size: 1.0625rem; color: var(--ink); }
.mk5-checks li::before { content: ""; position: absolute; left: 0; top: .42em; width: 14px; height: 14px; border-radius: 50%; background: var(--brand); box-shadow: inset 0 0 0 4px #fff, 0 0 0 1px var(--brand); }

/* a folha do plano */
.plano { position: relative; margin: 0; padding: 1.25rem 0 0 1.25rem; }
.plano__folha { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.25rem, 2vw, 1.75rem); box-shadow: 0 30px 60px -36px rgb(30 30 30 / .35); font-family: var(--font-text); color: var(--ink); display: grid; gap: 1.1rem; }
.plano__folha--tras { position: absolute; inset: 0 1.25rem 1.25rem 0; background: var(--sand-2); border-color: transparent; box-shadow: none; z-index: 0; padding: 0; }
.plano__folha:not(.plano__folha--tras) { z-index: 1; }
.plano__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.plano__rot { display: block; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.plano__topo strong { font: 700 1.15rem/1.2 var(--font-display); letter-spacing: -.01em; }
.plano__chip { font-size: .75rem; padding: .35rem .7rem; border-radius: 999px; background: var(--paper); color: var(--ink-2); white-space: nowrap; }
.plano__meta { margin: 0; font-size: .95rem; padding: .7rem .9rem; border-radius: 10px; background: var(--blue); color: #fff; }
.plano__meta span { display: inline-block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sand); margin-right: .6rem; }
.plano__gantt { --cols: 12; position: relative; display: grid; gap: .45rem; padding-top: .25rem; }
.plano__meses { display: grid; grid-template-columns: 9.5rem repeat(12, 1fr); font-size: .7rem; color: var(--ink-3); }
.plano__meses i { font-style: normal; text-align: center; grid-column: span 1; }
.plano__meses i:first-child { grid-column: 2; }
.plano__linha { display: grid; grid-template-columns: 9.5rem repeat(12, 1fr); align-items: center; height: 1.35rem; }
.plano__linha span { font-size: .78rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: .5rem; }
.plano__linha b { grid-column: calc(var(--i) + 1) / span var(--w); grid-row: 1; height: .7rem; border-radius: 999px; }
.b-areia { background: var(--sand); } .b-azul { background: var(--blue); } .b-laranja { background: var(--brand); } .b-grafite { background: #353535; }
.plano__hoje { position: absolute; top: 1.3rem; bottom: 0; left: calc(9.5rem + (100% - 9.5rem) / 12 * var(--i)); width: 1px; background: var(--brand); opacity: .6; }
.plano__hoje::before { content: "hoje"; position: absolute; top: -1.1rem; left: -.9rem; font-size: .62rem; color: var(--brand); }
.plano__lista { list-style: none; margin: 0; padding: .25rem 0 0; display: grid; gap: .45rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.plano__lista li { display: flex; align-items: baseline; gap: .6rem; font-size: .88rem; }
.plano__lista em { font: 300 .95rem/1 var(--font-display); color: var(--brand); font-style: normal; }
.plano__lista small { margin-left: auto; font-size: .72rem; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 560px) { .plano__meses, .plano__linha { grid-template-columns: 6rem repeat(12, 1fr); } .plano__hoje { left: calc(6rem + (100% - 6rem) / 12 * var(--i)); } .plano__lista small { display: none; } }

/* cartões das frentes em 4 colunas (2 no tablet) */
.svcs--4 { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .svcs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svcs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
article.svc { cursor: default; }
article.svc:hover { transform: none; box-shadow: none; border-color: var(--line); }

/* prova */
.mk5-prova__grid { display: grid; gap: 1.5rem; max-width: 60rem; }
.mk5-quote { margin: 0; display: grid; gap: 1.25rem; }
.mk5-quote p { font: 300 clamp(1.5rem, 2.6vw, 2.25rem)/1.25 var(--font-display) !important; letter-spacing: -.015em; color: var(--ink); text-align: left !important; text-wrap: pretty; }
.mk5-quote footer { display: grid; gap: .15rem; font-size: .95rem; }
.mk5-quote footer strong { font-family: var(--font-display); font-weight: 700; }
.mk5-quote footer span { color: var(--ink-3); }

/* rodapé: revisão fina */
.foot__brand img { height: 34px; }
.foot__social a:hover { transform: translateY(-2px); }
.foot__list a { transition: color .2s; } .foot__list a:hover { color: #fff; }
.foot__bottom { border-top-color: rgb(220 191 165 / .22); }
.foot__head { color: var(--sand); }
/* v48b · frentes em 2 colunas, cartão horizontal (ícone à esquerda) para o texto justificado respirar */
.svcs--4 { grid-template-columns: 1fr !important; }
@media (min-width: 760px) { .svcs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.svcs--4 .svc { display: grid !important; grid-template-columns: 52px minmax(0, 1fr); gap: .5rem 1.25rem; min-height: 0 !important; align-content: start; }
.svcs--4 .svc__icon { grid-row: 1 / 3; margin: 0 !important; }
.svcs--4 .svc__name { margin-top: .35rem !important; }
.svcs--4 .svc__desc { grid-column: 2; max-width: 48ch; }
.mk5-prova__grid .link-arrow { justify-self: start; }
/* v48c · topo e folha do plano: mais ar, camadas e legenda */
.pagehead--foto { padding-top: clamp(8.5rem, 13vw, 11rem) !important; padding-bottom: clamp(5rem, 8vw, 7rem) !important; }
.pagehead__foto { margin: 0; }
.pagehead__foto figcaption { position: absolute; left: clamp(1rem, 2vw, 1.75rem); bottom: clamp(4.25rem, 6.5vw, 5.75rem); font-size: .8rem; color: #fff; background: rgb(30 30 30 / .55); padding: .35rem .7rem; border-radius: 999px; backdrop-filter: blur(6px); letter-spacing: .01em; }
@media (max-width: 959px) { .pagehead__foto figcaption { bottom: .75rem; } }
/* a folha branca sobe por cima da foto: duas camadas, não duas seções */
.pagehead--foto + .section--sheet { margin-top: calc(-1 * clamp(3rem, 5vw, 4.5rem)) !important; position: relative; z-index: 2; box-shadow: 0 -24px 60px -40px rgb(30 30 30 / .25); }
.pf-baixo { margin-top: clamp(2rem, 3.6vw, 3rem); }
/* plano: folha de trás levemente girada, rótulo "hoje" acima dos meses */
.plano__folha--tras { transform: rotate(-2deg); transform-origin: 50% 100%; inset: .5rem .5rem 1rem .5rem; }
.plano__hoje::before { top: -1.35rem; }
.plano__meses { position: relative; z-index: 1; }
.plano__meta { font-size: 1rem; }

/* ==========================================================================
   v49 · MARKETING com o que vale do site atual
   bloco laranja de 4 colunas + faixa de fotos PB · trilha clara · letreiro "vamos conversar"
   ========================================================================== */
.mk6-frentes { padding-top: calc(var(--section-y) * .5) !important; padding-bottom: calc(var(--section-y) * .5) !important; }
.mk6-bloco { background: var(--brand); color: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-inline: clamp(.5rem, 2vw, 1.5rem); padding: calc(var(--section-y) * .75) 0 calc(var(--section-y) * .6); }
.mk6-bloco .eyebrow { color: #fff; } .mk6-bloco .eyebrow::before { background: #fff; }
.mk6-bloco .title, .mk6-bloco .title em { color: #fff !important; }
.mk6-cols { display: grid; gap: 2rem clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .mk6-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mk6-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mk6-cols article { display: grid; gap: .75rem; align-content: start; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / .35); }
.mk6-cols h3 { font: 700 1.3125rem/1.2 var(--font-display); letter-spacing: -.01em; color: #fff; }
.mk6-cols p { font-size: 1rem; line-height: 1.65; color: rgb(255 255 255 / .9); text-align: justify; text-align-last: left; hyphens: auto; }
.mk6-faixa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: clamp(.5rem, 2vw, 1.5rem); border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; background: var(--ink); }
.mk6-faixa img { width: 100%; height: clamp(160px, 18vw, 280px); object-fit: cover; filter: grayscale(1); display: block; }
@media (max-width: 699px) { .mk6-faixa { grid-template-columns: 1fr 1fr; } .mk6-faixa img:last-child { display: none; } }

/* trilha em fundo claro */
.trilha--clara::before { background: var(--line-strong) !important; }
.trilha--clara .trilha__ponto { background: var(--sand); box-shadow: 0 0 0 5px var(--paper); }
.trilha--clara .trilha__etapa:first-child .trilha__ponto { background: var(--brand); }
.trilha--clara .trilha__n { color: var(--brand-ink); }
.trilha--clara .trilha__etapa h3 { color: var(--ink); }
.trilha--clara .trilha__etapa p { color: var(--ink-2); }
.mk6-como .mk2-head .lede { color: var(--ink-2); }

/* letreiro */
.mk6-letreiro { display: block; overflow: hidden; padding-block: clamp(1.25rem, 2.4vw, 2rem); border-block: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.mk6-letreiro__trilho { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.5rem); width: max-content; animation: letreiro 38s linear infinite; }
.mk6-letreiro span { font: 300 italic clamp(1.75rem, 3.6vw, 3.25rem)/1 var(--font-display); letter-spacing: -.02em; white-space: nowrap; transition: color .3s; }
.mk6-letreiro i { flex: none; width: clamp(16px, 1.8vw, 24px); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--brand); }
.mk6-letreiro:hover span { color: var(--brand); }
.mk6-letreiro:hover .mk6-letreiro__trilho { animation-play-state: paused; }
.mk6-letreiro:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; }
@keyframes letreiro { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mk6-letreiro__trilho { animation: none; } }
.mk6-letreiro + .section--ink { margin-top: clamp(1rem, 2vw, 1.5rem) !important; }

/* ==========================================================================
   v50 · MARKETING "ROTA" (do zero)
   Conceito: no deserto, chega quem tem rota. A duna da marca com a rota desenhada
   e as quatro etapas como pontos de parada. Depois, as frentes em bloco laranja, uma frase e o convite.
   ========================================================================== */
.rota { padding: clamp(8rem, 12vw, 10rem) 0 calc(var(--section-y) * .5); }
.rota__head { display: grid; gap: 1.5rem clamp(2rem, 6vw, 6rem); align-items: end; }
@media (min-width: 960px) { .rota__head { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.rota__titulo { font: 300 clamp(3rem, 7vw, 6.5rem)/.96 var(--font-display); letter-spacing: -.035em; color: var(--ink); margin: 0; text-wrap: balance; }
.rota__titulo em { font-style: normal; font-weight: 700; }
.rota__head .lede { max-width: 40ch; margin: 0; padding-bottom: .6rem; }

.rota__mapa { position: relative; height: clamp(220px, 26vw, 380px); margin: clamp(2.5rem, 5vw, 4rem) clamp(.5rem, 2vw, 1.5rem) 0; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; }
.rota__duna { position: absolute; inset: -10%; z-index: -2; background: var(--tx-duna) 50% 62% / cover no-repeat; animation: areia-vento-a 52s ease-in-out infinite alternate; }
.rota__duna--b { z-index: -1; opacity: .35; mix-blend-mode: soft-light; transform: scaleX(-1); animation: areia-vento-b 68s ease-in-out infinite alternate-reverse; }
.rota__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rota__caminho { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .9; }
.rota__pontos { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.rota__pontos li { position: absolute; left: var(--x, 50%); top: var(--y, 50%); translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: .7rem; color: #fff; font: 600 .9rem/1 var(--font-text); white-space: nowrap; opacity: 0; animation: ponto .7s var(--ease) forwards; animation-delay: calc(.5s + var(--d) * .35s); }
.rota__pontos li::after { content: ""; order: 2; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgb(255 255 255 / .25); }
.rota__pontos li:first-child::after { background: var(--brand); box-shadow: 0 0 0 6px rgb(255 255 255 / .9); }
.rota__pontos li span { font-weight: 400; opacity: .75; margin-right: .3em; }
.rota__pontos li { padding-bottom: 0; }
.rota__pontos li > * { order: 1; }
@keyframes ponto { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rota__duna { animation: none; } .rota__pontos li { animation: none; opacity: 1; } }

.rota__etapas { list-style: none; margin: clamp(1.75rem, 3vw, 2.5rem) auto 0; padding-left: var(--gutter); padding-right: var(--gutter); display: grid; gap: 1.75rem clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; }
@media (min-width: 760px) { .rota__etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rota__etapas li { display: grid; gap: .5rem; align-content: start; }
.rota__etapas h2 { font: 700 1.3125rem/1.2 var(--font-display) !important; letter-spacing: -.01em; color: var(--ink); }
.rota__etapas p { font-size: 1rem; line-height: 1.65; color: var(--ink-2); text-align: justify; text-align-last: left; hyphens: auto; }
@media (max-width: 759px) {
  .rota__pontos li { font-size: 0; gap: 0; }
  .rota__pontos li span { display: none; }
  .rota__etapas li { padding-left: 1.75rem; position: relative; }
  .rota__etapas li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; border-radius: 50%; background: var(--sand); }
  .rota__etapas li:first-child::before { background: var(--brand); }
}

/* frentes: bloco laranja, uma linha por frente */
.frentes { padding-block: calc(var(--section-y) * .5) !important; }
.frentes__bloco { background: var(--brand); color: #fff; border-radius: var(--radius-lg); margin-inline: clamp(.5rem, 2vw, 1.5rem); padding: calc(var(--section-y) * .75) 0; }
.frentes__head { display: grid; gap: .75rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.frentes .eyebrow { color: #fff; } .frentes .eyebrow::before { background: #fff; }
.frentes .title, .frentes .title em { color: #fff !important; }
.frentes__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(255 255 255 / .35); }
.frente { display: grid; gap: 1rem 2.5rem; padding: clamp(1.5rem, 2.6vw, 2.25rem) 0; border-bottom: 1px solid rgb(255 255 255 / .35); align-items: center; }
@media (min-width: 900px) { .frente { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) clamp(160px, 16vw, 230px); } }
.frente h3 { font: 300 clamp(1.6rem, 2.6vw, 2.35rem)/1.08 var(--font-display) !important; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.frente p { font-size: 1rem; line-height: 1.65; color: rgb(255 255 255 / .9); max-width: 52ch; text-align: justify; text-align-last: left; hyphens: auto; }
.frente figure { margin: 0; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: rgb(0 0 0 / .15); }
.frente img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .5s ease, transform .7s var(--ease); }
.frente:hover img { filter: none; transform: scale(1.04); }
.frente:hover h3 { font-weight: 400 !important; }
@media (max-width: 899px) { .frente figure { max-width: 320px; } }

/* frase */
.frase { padding-block: calc(var(--section-y) * .75) calc(var(--section-y) * .5) !important; }
.frase__txt { font: 300 clamp(2.2rem, 5.4vw, 4.75rem)/1.02 var(--font-display) !important; letter-spacing: -.03em; color: var(--ink); text-align: center !important; margin: 0 auto; max-width: 18ch; text-wrap: balance; }
.frase__txt em { font-style: normal; font-weight: 700; color: var(--brand); }
/* v50b · paradas: ponto exatamente sobre a linha, número acima, alinhadas ao início de cada coluna */
.rota__pontos li { display: block; translate: -9px -9px; width: 18px; height: 18px; gap: 0; }
.rota__pontos li::after { position: absolute; inset: 0; }
.rota__pontos li b { position: absolute; left: 0; bottom: calc(100% + .7rem); font: 300 clamp(1.4rem, 2vw, 1.9rem)/1 var(--font-display); color: #fff; letter-spacing: -.02em; }
@media (max-width: 759px) { .rota__pontos li b { font-size: 1.1rem; left: 50%; translate: -50% 0; } }

/* ==========================================================================
   v51 · MARKETING na família da home e do Sobre
   Reaproveita os componentes do Sobre; só a forma do topo muda (arco no lugar do círculo).
   ========================================================================== */
.sun--arco { aspect-ratio: 4 / 5; width: min(100%, 380px) !important; }
.sun--arco .sun__img { inset: 5%; border-radius: 999px 999px 28px 28px; }
.sun--arco .sun__ring { border-radius: 999px 999px 34px 34px; }
.sun--arco img.sun__sym { inset: 22% 14% auto; height: auto; width: 72%; }
@media (max-width: 899px) { .pagehead--circulo .sun--arco { width: min(60vw, 260px) !important; } }

/* quatro frentes em 2×2, com o mesmo fio vertical de Missão e visão */
@media (min-width: 900px) {
  .ab-mv--4 { row-gap: clamp(2.5rem, 4vw, 3.5rem) !important; }
  .ab-mv--4 .ab-mv__item { padding-inline: clamp(1.5rem, 4vw, 4rem); border-right: 0; }
  .ab-mv--4 .ab-mv__item:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--line-strong); }
  .ab-mv--4 .ab-mv__item:nth-child(even) { padding-right: 0; }
  .ab-mv--4 .ab-mv__item:first-child { border-right: 1px solid var(--line-strong); }
  .ab-mv--4 .ab-mv__item:last-child { padding-right: 0; }
}
/* v51b · folha das frentes: nome da frente como subtítulo de verdade, não etiqueta */
.mv-frente { font: 700 1.3125rem/1.2 var(--font-display) !important; letter-spacing: -.01em; color: var(--ink); position: relative; padding-left: 1.4rem; }
.mv-frente::before { content: ""; position: absolute; left: 0; top: .42em; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.ab-mv--4 .ab-mv__item:nth-child(2) .mv-frente::before { background: var(--blue); }
.ab-mv--4 .ab-mv__item:nth-child(3) .mv-frente::before { background: var(--sand); }
.ab-mv--4 .ab-mv__item:nth-child(4) .mv-frente::before { background: #353535; }
.ab-mv--4 .ab-mv__item { gap: .75rem !important; }
.ab-mv--4 .ab-mv__text { padding-left: 1.4rem; }
/* v51c · arco sem o símbolo branco e sem emenda na textura:
   a areia do arco não repete lado a lado (era isso que criava a faixa vertical); só desliza e respira */
.sun--arco .sun__areia { inset: -12%; background: var(--tx-duna) 50% 60% / cover no-repeat; animation: areia-vento-a 48s ease-in-out infinite alternate; }
.sun--arco .sun__areia--b { background-image: var(--tx-laranja); transform: scaleX(-1); animation: areia-vento-b 64s ease-in-out infinite alternate-reverse; }
.sun--arco .sun__img::before { display: none; }

/* v52 · rodapé: sem vazio embaixo das redes, frase sem invadir a coluna vizinha */
@media (min-width: 900px) { .foot__brand p { white-space: normal !important; } }
@media (min-width: 1000px) {
  .foot__top { align-items: stretch !important; }
  .foot__brand { align-content: space-between !important; }
  .foot__brand p { max-width: 40ch !important; }
}
.foot__list { gap: .55rem !important; line-height: 1.5; }
.foot__head { margin-bottom: .9rem !important; }
.foot__top { padding-bottom: clamp(2rem, 4vw, 2.75rem) !important; }

/* v52 · arco: a areia volta a se mover, agora deslizando dentro do arco (sem repetir a imagem) */
.sun--arco .sun__areia { inset: -25% !important; animation: arco-vento-a 22s ease-in-out infinite alternate !important; }
.sun--arco .sun__areia--b { animation: arco-vento-b 30s ease-in-out infinite alternate !important; }
@keyframes arco-vento-a { from { transform: translate(-7%, -4%) scale(1.02); } to { transform: translate(7%, 5%) scale(1.1); } }
@keyframes arco-vento-b { from { transform: scaleX(-1) translate(6%, 4%); } to { transform: scaleX(-1) translate(-8%, -5%) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .sun--arco .sun__areia { animation: none !important; } }
/* v52b · rodapé: logo e frase juntos no alto, redes alinhadas com o último link de Serviços */
@media (min-width: 1000px) {
  .foot__brand { display: flex !important; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .foot__brand .foot__social { margin-top: auto !important; }
  .foot__brand p { max-width: none !important; }
}

/* ==========================================================================
   v53 · TOPO DAS PÁGINAS DE SERVIÇO igual ao da home
   Textura em tela cheia (uma por serviço), cabeçalho transparente, texto branco centralizado.
   ========================================================================== */
.hero--tx-duna    .fundo__img { background-image: var(--tx-duna); background-position: 50% 62%; }
.hero--tx-azul    .fundo__img { background-image: var(--tx-azul); }
.hero--tx-areia   .fundo__img { background-image: var(--tx-areia); }
.hero--tx-laranja .fundo__img { background-image: var(--tx-laranja); }
.hero--servico .fundo__conteudo { display: grid; justify-items: center; text-align: center; }
.servico__titulo { font: 300 clamp(2.6rem, 6vw, 5.75rem)/1 var(--font-display); letter-spacing: -.035em; color: #fff; max-width: 15ch; margin: 0 auto; text-wrap: balance; animation: sobe 1s var(--ease) both .1s; }
.servico__titulo em { font-style: normal; font-weight: 700; }
.hero--servico .lede { color: rgb(255 255 255 / .9) !important; max-width: 52ch; text-align: center !important; text-align-last: center !important; hyphens: manual !important; }
.hero--servico + .section--sheet { margin-top: 0 !important; }

/* v54 · topo de serviço nas demais páginas: uma textura (ou um giro dela) por página
   home laranja · Marketing duna · Tráfego laranja de cabeça para baixo · Design azul · Web areia · Automação azul espelhada */
.hero--tx-laranja-b .fundo__img { background-image: var(--tx-laranja); transform: scaleY(-1); }
.hero--tx-laranja-b .fundo__img--b { transform: scaleX(-1); }
.hero--tx-azul-b .fundo__img { background-image: var(--tx-azul); transform: scaleX(-1) scaleY(-1); }
.hero--tx-azul-b .fundo__img--b { transform: none; }
.hero--tx-areia::after { background: radial-gradient(70% 80% at 50% 45%, rgb(30 30 30 / .38), transparent 75%), linear-gradient(180deg, rgb(30 30 30 / .25), transparent 30%) !important; }
.hero--servico .hero__actions { justify-content: center; }
.hero--servico .btn { background: #fff; color: var(--ink); border-color: #fff; }
.hero--servico .btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
/* v54b · menu branco sobre a textura também nas páginas com tema (theme-brand/dark/chumbo) */
body .nav--sobre-imagem:not(.is-scrolled) .nav__links a { color: rgb(255 255 255 / .82) !important; }
body .nav--sobre-imagem:not(.is-scrolled) .nav__links a:hover, body .nav--sobre-imagem:not(.is-scrolled) .nav__links a[aria-current="page"] { color: #fff !important; }
body .nav--sobre-imagem:not(.is-scrolled) .nav__toggle { color: #fff !important; }
/* recortes das texturas escuras: mostrar a duna clara, não só o céu escuro */
.hero--tx-azul .fundo__img { background-position: 50% 88% !important; filter: brightness(1.25) saturate(1.1); }
.hero--tx-azul-b .fundo__img { background-position: 50% 10% !important; filter: brightness(1.2); }
/* areia é clara: véu mais forte para o texto branco ler bem */
.hero--tx-areia::after { background: linear-gradient(180deg, rgb(30 30 30 / .35), rgb(30 30 30 / .2) 45%, rgb(30 30 30 / .35)), radial-gradient(60% 55% at 50% 50%, rgb(30 30 30 / .3), transparent 75%) !important; }
/* v54c · menu ao rolar igual em todas as páginas, mesmo com tema no body */
body .nav--sobre-imagem.is-scrolled { background: #fff !important; box-shadow: 0 1px 0 var(--line) !important; }
body .nav--sobre-imagem.is-scrolled .nav__links a { color: var(--ink-2) !important; }
body .nav--sobre-imagem.is-scrolled .nav__links a:hover, body .nav--sobre-imagem.is-scrolled .nav__links a[aria-current="page"] { color: #1E1E1E !important; }
body .nav--sobre-imagem.is-scrolled .nav__toggle { color: #1E1E1E !important; }
/* Automação: duna de cabeça para baixo (laranja em cima, azul embaixo), diferente da Marketing e do Design */
.hero--tx-duna-b .fundo__img { background-image: var(--tx-duna); transform: scaleY(-1); }
.hero--tx-duna-b .fundo__img--b { transform: scaleX(-1); }
/* Design: azul mais luminoso */
.hero--tx-azul .fundo__img { filter: brightness(1.45) saturate(1.15) !important; }

/* ==========================================================================
   v55 · MIOLO DAS PÁGINAS DE SERVIÇO no acabamento da Saara
   Mesma estrutura herdada da marco; só o visual muda.
   ========================================================================== */
/* 1) Pilares ("O que está incluído"): folha branca, 2×2, sem números gigantes,
      nome com bolinha de cor (igual à Marketing) e fio vertical no meio */
.sec-pilares .pillars { display: grid !important; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem) 0 !important; border: 0 !important; counter-reset: none; }
@media (min-width: 900px) {
  .sec-pilares .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(2.5rem, 4vw, 3.5rem) !important; }
  .sec-pilares .pillar:nth-child(odd)  { padding-right: clamp(1.5rem, 4vw, 4rem) !important; border-right: 1px solid var(--line-strong) !important; }
  .sec-pilares .pillar:nth-child(even) { padding-left: clamp(1.5rem, 4vw, 4rem) !important; }
}
.sec-pilares .pillar { display: grid !important; gap: .75rem !important; padding-top: 0 !important; padding-bottom: 0 !important; border-top: 0 !important; border-bottom: 0 !important; background: none !important; min-height: 0 !important; align-content: start; }
.sec-pilares .pillar::before, .sec-pilares .pillar::after { display: none !important; }
.sec-pilares .pillar__n { display: none !important; }
.sec-pilares .pillar__title { font: 700 1.3125rem/1.2 var(--font-display) !important; letter-spacing: -.01em; color: var(--ink) !important; position: relative; padding-left: 1.4rem; margin: 0 !important; text-transform: none !important; }
.sec-pilares .pillar__title::before { content: ""; position: absolute; left: 0; top: .42em; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.sec-pilares .pillar:nth-child(2) .pillar__title::before { background: var(--blue); }
.sec-pilares .pillar:nth-child(3) .pillar__title::before { background: var(--sand); }
.sec-pilares .pillar:nth-child(4) .pillar__title::before { background: #353535; }
.sec-pilares .pillar__text { padding-left: 1.4rem; font-size: 1.0625rem !important; line-height: 1.7 !important; color: var(--ink-2) !important; max-width: 52ch; text-align: justify; text-align-last: left; hyphens: auto; }


/* 2) Faixa de destaque (section--brand): vira o bloco azul arredondado da home e do Sobre */
.pg-servico .section--brand { background: var(--blue) !important; color: #fff !important; border-radius: var(--radius-lg); margin-inline: clamp(.5rem, 2vw, 1.5rem) !important; padding-block: calc(var(--section-y) * .75) !important; margin-block: clamp(1rem, 2vw, 1.5rem) !important; }
.pg-servico .section--brand .statement { color: #fff !important; font-size: clamp(2rem, 3.6vw, 3rem) !important; line-height: 1.06 !important; font-weight: 300 !important; }
.pg-servico .section--brand .statement em { color: #fff !important; font-weight: 700; }
.pg-servico .section--brand .band__text, .pg-servico .section--brand p { color: rgb(255 255 255 / .82) !important; }
.pg-servico .section--brand .eyebrow { color: var(--sand) !important; }
.pg-servico .section--brand .eyebrow::before { background: var(--sand) !important; }
.pg-servico .band__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.pg-servico .band__tags span { display: inline-flex; align-items: center; padding: .5rem 1rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / .35) !important; background: transparent !important; color: #fff !important; font: 500 .875rem/1 var(--font-text) !important; letter-spacing: 0 !important; text-transform: none !important; }

/* 3) Etapas: trilha clara (fio + ponto areia, primeiro ponto laranja) */
.pg-servico .steps .stat { border-top: 1px solid var(--line-strong) !important; }
.pg-servico .steps .stat::before { background: var(--sand) !important; box-shadow: 0 0 0 5px var(--paper) !important; width: 12px !important; height: 12px !important; border-radius: 50% !important; }
.pg-servico .steps .stat:first-child::before { background: var(--brand) !important; }
.pg-servico .steps .eyebrow--brand { color: var(--brand-ink) !important; }
.pg-servico .steps .eyebrow--brand::before { display: none !important; }
.pg-servico .step__title { font: 700 1.3125rem/1.2 var(--font-display) !important; letter-spacing: -.01em; text-transform: none !important; color: var(--ink) !important; }
.pg-servico .steps .body { font-size: 1rem !important; line-height: 1.65 !important; }

/* 4) Convite e ritmo: mesmas regras da home e do Sobre */
.pg-servico main > .section--tint { background: transparent !important; }
.sec-pilares .pillar__title { max-width: none !important; }
/* v55b · Automação: ofertas legíveis no bloco azul */
.pg-servico .section--brand .oferta__nome { color: #fff !important; font: 700 1.125rem/1.2 var(--font-display) !important; text-transform: none !important; letter-spacing: -.01em; }
.pg-servico .section--brand .oferta__texto { color: rgb(255 255 255 / .78) !important; }
.pg-servico .section--brand .oferta > *, .pg-servico .section--brand .oferta li, .pg-servico .section--brand .oferta div { border-color: rgb(255 255 255 / .2) !important; }
.pg-servico .section--brand a { color: #fff !important; }
.pg-servico .module__name, .pg-servico .duo__nome { font-family: var(--font-display) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: -.01em; }
.pg-servico .ba__depois { font-family: var(--font-display) !important; font-weight: 700 !important; }
/* v55c · botão vazado sobre a textura (Contato) */
.hero--servico .btn--ghost { background: transparent !important; color: #fff !important; border-color: rgb(255 255 255 / .55) !important; }
.hero--servico .btn--ghost:hover { background: #fff !important; color: var(--ink) !important; }
.hero--tx-azul-b .fundo__img { filter: brightness(1.35) saturate(1.1); }

/* v56 · TOPO DA MARKETING, versão "base": texto ancorado embaixo, como capa de revista.
   Título grande à esquerda, abertura à direita, um fio fino separando do resto da textura. */
.hero--base { justify-content: flex-end !important; min-height: min(92vh, 860px) !important; padding: clamp(9rem, 14vw, 12rem) 0 clamp(3rem, 6vw, 5rem) !important; }
.hero--base::after { background: linear-gradient(180deg, rgb(0 0 0 / .18) 0%, transparent 30%, transparent 50%, rgb(0 0 0 / .45) 100%) !important; }
.hero--base .base__grid { display: grid !important; justify-items: start !important; text-align: left !important; gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 6vw, 6rem) !important; align-items: end; padding-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid rgb(255 255 255 / .35); }
@media (min-width: 960px) { .hero--base .base__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); } }
.hero--base .servico__titulo { margin: 0 !important; text-align: left; max-width: 13ch; font-size: clamp(3rem, 7.4vw, 7.25rem) !important; line-height: .95 !important; }
.hero--base .lede { text-align: left !important; text-align-last: left !important; max-width: 34ch; margin: 0 !important; padding-bottom: .5rem; }
/* v56b · Marketing: topo recortado com cantos arredondados, título menor, sem texto de abertura */
.hero--base { margin: calc(-76px + .6rem) clamp(.5rem, 2vw, 1.5rem) 0 !important; border-radius: var(--radius-lg); min-height: min(78vh, 720px) !important; padding-bottom: clamp(2.5rem, 5vw, 4rem) !important; }
.hero--base .base__grid { grid-template-columns: 1fr !important; }
.hero--base .servico__titulo { font-size: clamp(2.4rem, 5vw, 4.75rem) !important; line-height: 1 !important; max-width: 14ch; }
.hero--base + .section--sheet { margin-top: clamp(1rem, 2vw, 1.5rem) !important; }
.hero--base .base__grid { border-top: 0 !important; padding-top: 0 !important; }
/* v56c · Marketing: textura de ponta a ponta, só os cantos de baixo arredondados; título em duas linhas */
.hero--base { margin: -76px 0 0 !important; border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important; }
.hero--base .servico__titulo { max-width: none !important; text-wrap: nowrap; }
@media (min-width: 760px) { .hero--base .servico__titulo { font-size: clamp(2.4rem, 4.6vw, 4.5rem) !important; } }
@media (max-width: 759px) { .hero--base .servico__titulo { text-wrap: balance; } }

/* v57 · TOPO DA MARKETING, refinos (teste antes de levar às outras páginas) */
/* 6) altura menor: o começo da folha aparece na primeira tela */
.hero--base { min-height: min(70vh, 660px) !important; z-index: 1; }
/* 2) entrada do título: as duas linhas sobem, uma depois da outra */
.hero--base .servico__titulo { animation: none !important; }
.hero--base .linha { display: block; overflow: hidden; }
.hero--base .linha { animation: linha-sobe .9s var(--ease) both; }
.hero--base .linha + .linha { animation-delay: .18s; }
@keyframes linha-sobe { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } }
/* 4) palavra-chave em areia */
.hero--base .servico__titulo em { color: var(--sand); }
/* 3) a textura acompanha o mouse, de leve (mesmo efeito do Sobre) */
.hero--base .fundo__img { translate: calc(var(--px, 0) * -14px) calc(var(--py, 0) * -10px); }
.hero--base .fundo__img--b { translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 8px); }
/* 5) a folha branca sobe sobre o topo: duas camadas da mesma cena */
.hero--base + .section--sheet { margin-top: calc(-1 * clamp(1.75rem, 3vw, 2.5rem)) !important; position: relative; z-index: 2; box-shadow: 0 -18px 40px -30px rgb(30 30 30 / .35); }
.hero--base { padding-bottom: clamp(4.5rem, 7vw, 6rem) !important; }
@media (prefers-reduced-motion: reduce) { .hero--base .linha { animation: none; } .hero--base .fundo__img { translate: none; } }
@media (max-width: 759px) { .hero--base .linha { display: inline; } }

/* v58 · topo "base" em todas as páginas de serviço e no Contato */
@media (min-width: 960px) { .hero--base .base__grid--acoes { grid-template-columns: minmax(0, 1fr) auto !important; align-items: end; } }
.hero--base .base__grid--acoes .hero__actions { justify-content: flex-start; margin: 0; padding-bottom: .6rem; }
/* Web (areia, clara): base mais escura e palavra-chave em branco para ler bem */
.hero--base.hero--tx-areia::after { background: linear-gradient(180deg, rgb(30 30 30 / .25) 0%, transparent 28%, rgb(30 30 30 / .2) 55%, rgb(30 30 30 / .6) 100%) !important; }
.hero--base.hero--tx-areia .servico__titulo em { color: #fff; }

/* v59 · títulos das páginas de serviço em UMA linha, menores; botões abaixo do título */
.hero--base .servico__titulo { font-size: clamp(1.9rem, 3.3vw, 3.4rem) !important; line-height: 1.05 !important; max-width: none !important; animation: linha-sobe .9s var(--ease) both .1s !important; }
@media (min-width: 960px) { .hero--base .servico__titulo { white-space: nowrap; } }
@media (max-width: 959px) { .hero--base .servico__titulo { text-wrap: balance; } }
.hero--base .base__grid--acoes { grid-template-columns: 1fr !important; }
.hero--base .base__grid--acoes .hero__actions { padding-bottom: 0; }
.hero--base { min-height: min(62vh, 580px) !important; }
/* v59b · Contato: canais numa folha branca, mapa logo abaixo sem o vão extra, mapa arredondado */
.hero--base + .ct-canais { margin-top: calc(-1 * clamp(1.75rem, 3vw, 2.5rem)) !important; position: relative; z-index: 2; box-shadow: 0 -18px 40px -30px rgb(30 30 30 / .35); }
.ct-canais .stats { margin: 0; }
.ct-canais .stat { border-top: 0 !important; padding-top: 0 !important; }
.ct-canais .work__name, .ct-canais .work__name a { font: 600 1.125rem/1.4 var(--font-display) !important; color: var(--ink) !important; letter-spacing: -.01em; }
.ct-mapa__head { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline; justify-content: space-between; }
.ct-mapa .map { border-radius: var(--radius-lg); overflow: hidden; }
.ct-mapa .map iframe { display: block; width: 100%; height: clamp(320px, 42vw, 520px); border: 0; filter: grayscale(.35); }
.ct-mapa .map { height: auto !important; aspect-ratio: auto !important; padding: 0 !important; background: none !important; border: 0 !important; }
.hero--404 { min-height: min(82vh, 760px) !important; }
/* v60 · Web: areia mais profunda (a clara ficou lavada) — a areia ganha um véu azul-petróleo por cima */
.hero--base.hero--tx-areia .fundo__img { filter: saturate(1.25) contrast(1.1) brightness(.78); }
.hero--base.hero--tx-areia::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(160deg, rgb(46 79 101 / .75) 0%, rgb(46 79 101 / .35) 45%, rgb(30 30 30 / .15) 100%); mix-blend-mode: multiply; }
.hero--base.hero--tx-areia .fundo__conteudo { position: relative; z-index: 1; }
.hero--base.hero--tx-areia .servico__titulo em { color: var(--sand); }
/* v61 · topo dos serviços só com a textura: a frase sai da tela (continua no código para o Google) */
.hero--sem-titulo { min-height: min(46vh, 440px) !important; padding-top: 0 !important; padding-bottom: clamp(3.5rem, 5vw, 4.5rem) !important; }
.hero--sem-titulo .servico__titulo.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero--sem-titulo .base__grid:not(.base__grid--acoes) { display: none !important; }

/* v62 · Automação, bloco azul: frase grande no alto, texto curto e as três ofertas em cartões,
   igual aos cartões de valores do Sobre (bolinha de textura, vidro claro sobre o azul) */
.faixa-oferta .band { display: grid !important; grid-template-columns: 1fr !important; gap: clamp(1.75rem, 3vw, 2.5rem) !important; }
.faixa-oferta .statement { max-width: 22ch; }
.faixa-oferta .band__side { display: grid; gap: clamp(1.5rem, 2.6vw, 2rem); max-width: none !important; }
.faixa-oferta .band__text { max-width: 52ch; font-size: 1.0625rem !important; }
.faixa-oferta .oferta { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 1.6vw, 1.4rem); margin: 0 !important; border: 0 !important; counter-reset: of; }
@media (min-width: 760px) { .faixa-oferta .oferta { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.faixa-oferta .oferta li { display: flex !important; flex-direction: column; gap: .6rem !important; padding: clamp(1.5rem, 2.2vw, 2rem) !important; border: 1px solid rgb(255 255 255 / .14) !important; border-radius: var(--radius-lg); background: rgb(255 255 255 / .07); transition: background .4s ease, transform .4s var(--ease); }
.faixa-oferta .oferta li:hover { background: rgb(255 255 255 / .11); transform: translateY(-4px); }
.faixa-oferta .oferta li::before { content: ""; width: 40px; height: 40px; border-radius: 50%; margin-bottom: 1.25rem; background: var(--tx-duna) 30% 70% / 300% no-repeat; }
.faixa-oferta .oferta li:nth-child(2)::before { background-image: var(--tx-laranja); }
.faixa-oferta .oferta li:nth-child(3)::before { background-image: var(--tx-areia); }
.faixa-oferta .oferta__nome { font: 700 1.3125rem/1.2 var(--font-display) !important; letter-spacing: -.01em; text-transform: none !important; font-variation-settings: normal; }
.faixa-oferta .oferta__texto { font-size: 1rem !important; line-height: 1.6 !important; }
/* v62b · frase do bloco azul da Automação em duas linhas fixas */
.faixa-oferta .statement { max-width: none !important; font-size: clamp(1.6rem, 3vw, 2.75rem) !important; }
@media (min-width: 900px) { .faixa-oferta .statement { white-space: nowrap; } .faixa-oferta .band__text { max-width: none; } }

/* v63 · revisão de tipografia: mesmos papéis, mesmos tamanhos em todas as páginas */
.sob__text p.lede { font-size: clamp(1.05rem, 1.35vw, 1.1875rem) !important; line-height: 1.6 !important; }
.pg-servico .section--brand .band__text { font-size: 1.0625rem !important; line-height: 1.7 !important; font-weight: 400 !important; }
/* contatos no rodapé do menu do celular: legíveis (eram 12px) */
.menu__foot, .menu__foot span, .menu__foot a { font-size: .875rem !important; letter-spacing: 0 !important; text-transform: none !important; }