/* ==========================================================================
   Vira Digital — agência de marketing digital e performance
   Mobile first. Tema claro: papel branco, tinta grafite e o laranja da marca.
   Estrutura no modelo de uma landing de conversão: hero cheio, faixa de
   serviços, prova social, passo a passo, contato, faixa de CTA e rodapé.

   O laranja #F26A1B vem da seta da logo. Ele é a cor da MARCA, não a cor do
   TEXTO: sobre branco dá 3,1:1 e nenhuma palavra pode viver nele. Quem carrega
   texto e botão é o laranja profundo (--laranja-forte), que passa em AA.
   Regra da casa: #F26A1B só em fundo, faixa, borda e traço decorativo — e em
   texto sobre o carvão do hero, onde ele tem 6:1 de sobra.
   ========================================================================== */

:root {
  /* Tinta — grafite levemente quente, para conversar com o laranja -------- */
  --tinta:      #1B1712;                     /* 17,8:1 no branco */
  --tinta-2:    #554E45;                     /*  8,2:1 — texto de apoio */
  --tinta-3:    #6B635A;                     /*  5,9:1 — legendas e miúdos */
  --tinta-4:    rgba(27, 23, 18, .42);       /* só ícone, borda e hover */

  /* Fundo escuro — hero e manifesto -------------------------------------- */
  --carvao:     #16130F;
  --carvao-2:   #1E1A15;
  --hero-txt:   #FFF6EF;                     /* 17,3:1 sobre o carvão */
  --hero-txt-2: rgba(255, 246, 239, .84);
  --hero-veu:   22, 19, 15;                  /* --carvao em partes de rgba() */

  /* Papel ---------------------------------------------------------------- */
  --papel:      #FFFFFF;
  --papel-1:    #FAF7F3;                     /* seções alternadas */
  --papel-2:    #F4EFE8;                     /* caixas dentro das alternadas */
  --linha:      rgba(27, 23, 18, .10);
  --linha-2:    rgba(27, 23, 18, .17);

  /* Laranja — a cor da marca --------------------------------------------- */
  --laranja:       #F26A1B;                  /* o da seta: fundo e traço */
  --laranja-claro: #FF9A3D;                  /* 8,8:1 sobre o carvão */
  --laranja-forte: #B4500C;                  /* 5,1:1 no branco — texto/CTA */
  --laranja-titulo: #E0570A;                 /* 3,3:1 no papel: só em tipo de cartaz */
  --laranja-fundo: #8F3F08;                  /* hover do CTA */
  --laranja-wash:  rgba(242, 106, 27, .12);
  /* Dois tons de apoio, derivados do laranja: o âmbar do selo e o salmão
     das formas. Nunca texto miúdo. */
  --ambar:         #F5B31B;
  --salmao:        #F58A5C;
  /* As cores do cartaz: só em tipo grande (>= 3:1 sobre o papel) e nos
     adesivos. Nunca em texto corrido. */
  --azul:          #2E5BFF;                  /* 4,6:1 */
  --verde:         #0E8C5C;                  /* 4,1:1 */
  --verde-fundo:   #0B7549;                  /* 5,3:1 com branco: botão */
  --rosa:          #E8457A;                  /* 3,7:1 */
  /* Sobre o carvão os mesmos tons sobem um degrau para ler. */
  --azul-claro:    #7C9BFF;
  --verde-claro:   #3BDC97;
  --rosa-claro:    #FF8FB0;
  --carvao-borda:  rgba(255, 246, 239, .12);
  --laranja-edge:  rgba(242, 106, 27, .42);
  --laranja-sombra: rgba(242, 106, 27, .45);

  /* Sobre a faixa laranja chapada o texto vira carvão: branco daria 3,1:1. */
  --laranja-ink:   #241004;                  /* 5,9:1 sobre o --laranja */

  /* O verde só existe no botão do WhatsApp, para que o canal nunca dispute
     atenção com a identidade. -------------------------------------------- */
  --wa:         #25D366;
  --wa-lit:     #2FE873;
  --wa-ink:     #04130A;                     /* 9,6:1 sobre o verde */

  /* Medidas -------------------------------------------------------------- */
  --shell:      74rem;                        /* 1184px */
  --shell-pad:  clamp(1.15rem, 5vw, 2.5rem);
  --radius:     16px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --header-h:   4.5rem;

  /* A logo é uma grotesca pesada, de contraforma fechada. A Inter Tight é a
     mais próxima no Google Fonts: mesma largura estreita e mesmo "a" de dois
     andares. O corpo fica na Manrope, que lê melhor em tamanho pequeno. */
  --font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* O cartaz do hero: condensada pesada, de caixa alta. Só ali. */
  --font-poster:  "Anton", "Impact", "Arial Narrow", sans-serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
}

/* --------------------------------------------------------------------------
   1 · Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* O atributo `hidden` vale display:none no estilo do navegador — que é fraco
   e perde para qualquer regra nossa com display. Como o selo de atendimento e
   o aviso do formulário se escondem por `hidden`, ele precisa ganhar. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

img, video, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  /* 1.1 encostava: a cedilha de "Tráfego" batia na linha de cima e o "g" de
     "digital" no "j". Português precisa de mais folga que inglês. */
  line-height: 1.18;
  letter-spacing: -.028em;
  margin: 0;
  text-wrap: balance;
}

.hero-title, .section-title, .cta-title { font-weight: 800; }

/* A palavra destacada é o único lugar em que o laranja vira texto — e por isso
   usa o tom profundo, não o da logo. */
.hero-title em, .section-title em, .cta-title em {
  font-style: normal;
  /* O laranja da logo, não o profundo: em tipo de cartaz (>= 41px) 3,1:1
     passa, e o cartaz recupera a cor da marca. Em texto pequeno continua
     valendo o --laranja-forte. */
  color: var(--laranja-titulo);
}
/* Nos fundos escuros o laranja da marca enfim pode ser texto: sobre o carvão
   ele tem 6:1, contraste de sobra. */
.manifesto .section-title em { color: var(--laranja-claro); }
.manifesto .section-title .rosa { color: var(--rosa-claro); }
.manifesto .section-title .circulada { color: var(--hero-txt); }
/* A mesma elipse laranja do hero: uma assinatura, uma cor. Palavra mais
   larga que VIRAR: o laço fica um pouco mais alto para cruzar menos letra. */
.manifesto .elipse { top: -20%; height: 140%; }

p  { margin: 0; text-wrap: pretty; }
a  { color: inherit; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--laranja-forte);
  outline-offset: 3px;
  border-radius: 8px;
}
/* Sobre o carvão o laranja profundo some: aqui o foco usa o da marca. */
.manifesto :focus-visible { outline-color: var(--laranja-claro); }

::selection { background: var(--laranja); color: var(--laranja-ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: .6rem; left: .6rem; z-index: 200;
  transform: translateY(-180%);
  background: var(--tinta); color: var(--papel);
  padding: .7rem 1.1rem; border-radius: 999px;
  font-size: .875rem; font-weight: 700; text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}
.shell-narrow { max-width: 52rem; }

/* Ícones soltos, fora dos botões. */
.ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.ico-stroke {
  width: 1.05em; height: 1.05em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   2 · Cabeçalhos de seção
   -------------------------------------------------------------------------- */
.section { padding-block: clamp(4rem, 11vw, 7.5rem); position: relative; }
.section-tint { background: var(--papel-1); }

/* Cabeçalho centrado: o cartaz do hero se repete em cada seção, menor. */
.section-head { max-width: 52rem; margin: 0 auto clamp(2.25rem, 6vw, 3.5rem); text-align: center; }

.section-title {
  font-family: var(--font-poster);
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 5.25rem);
  text-transform: uppercase; line-height: 1.14; letter-spacing: .005em;
  margin-bottom: 1rem;
}
/* As cores do cartaz, em qualquer título. */
.hero-title .azul,  .section-title .azul,  .cta-title .azul  { color: var(--azul); }
.hero-title .verde, .section-title .verde, .cta-title .verde { color: var(--verde); }
.hero-title .rosa,  .section-title .rosa,  .cta-title .rosa  { color: var(--rosa); }

/* Adesivo dentro do título: um por seção, do tamanho de uma letra. */
.ades { display: inline-block; width: .5em; height: .5em; vertical-align: -.02em; margin-left: .05em; }
.ades svg { width: 100%; height: 100%; overflow: visible; }
.ades-carinha svg { fill: var(--ambar); }
.ades-carinha .olho { fill: var(--tinta); }
.ades-carinha .boca { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-linecap: round; }
.ades-brilho svg { fill: var(--verde); }
.ades-asterisco svg { fill: var(--rosa); }
.ades-mais svg { fill: var(--azul); }
.ades-rabisco { width: .9em; height: .45em; vertical-align: .05em; }
.ades-rabisco svg { fill: none; stroke: var(--rosa); stroke-width: 6; stroke-linecap: round; }

.so-mobile { display: none; }
@media (max-width: 45.999em) { .so-mobile { display: inline; } }

.section-lead {
  font-size: clamp(1.0625rem, 2.4vw, 1.1875rem);
  color: var(--tinta-2);
  max-width: 42rem;
  margin-inline: auto;
}

/* Seção escura: o carvão do manifesto, para os serviços. */
.section-escura { background: var(--carvao); color: var(--hero-txt); }
.section-escura .section-lead { color: var(--hero-txt-2); }
.section-escura .section-title .verde { color: var(--verde-claro); }
.section-escura :focus-visible { outline-color: var(--laranja-claro); }

/* --------------------------------------------------------------------------
   3 · Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  padding: .9rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font-family: var(--font-body);
  font-size: .9375rem; font-weight: 700; letter-spacing: -.005em;
  /* Sem isto o botão herda o line-height 1.65 do corpo: a caixa do texto fica
     bem mais alta que a letra e o ícone centraliza contra o vão, não contra
     a palavra. */
  line-height: 1.2;
  text-decoration: none; text-align: center;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease),
              color .18s var(--ease);
}
.btn .ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.btn .ico-stroke {
  width: 1.05em; height: 1.05em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s var(--ease);
}
.btn:hover .ico-stroke { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

/* O laranja da logo, cheio, com a tinta por cima (5,9:1): o botão vira o
   mesmo adesivo do resto da página. */
.btn-laranja {
  background: var(--laranja); color: var(--laranja-ink);
  box-shadow: 0 8px 20px -10px rgba(27, 23, 18, .45);
}
.btn-laranja:hover { background: var(--laranja-claro); box-shadow: 0 12px 26px -10px rgba(27, 23, 18, .5); }

.btn-wa {
  background: var(--wa); color: var(--wa-ink);
  box-shadow: 0 8px 20px -10px rgba(27, 23, 18, .45);
}
.btn-wa:hover { background: var(--wa-lit); }

.btn-ghost {
  border-color: var(--linha-2); color: var(--tinta);
  background: var(--papel);
}
.btn-ghost:hover { border-color: var(--laranja); background: var(--laranja-wash); color: var(--laranja-forte); }

/* Nos fundos escuros o fantasma inverte: borda clara e fundo translúcido. */
.manifesto .btn-ghost,
.cta-band .btn-ghost {
  border-color: rgba(255, 246, 239, .30);
  background: rgba(255, 246, 239, .06);
  color: var(--hero-txt);
}
.manifesto .btn-ghost:hover,
.cta-band .btn-ghost:hover {
  border-color: var(--laranja);
  background: rgba(242, 106, 27, .16);
  color: var(--laranja-claro);
}

/* Nos fundos escuros o botão cheio troca o laranja profundo pelo da marca:
   sobre o carvão ele tem 6:1 de sobra e brilha, enquanto o profundo
   embarraria. O texto vira carvão, que sobre o laranja dá 5,9:1. */
.manifesto .btn-laranja,
.cta-band .btn-laranja {
  background: var(--laranja); color: var(--laranja-ink);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5);
}


/* O selo estrelado: um adesivo âmbar com o texto em tinta, ligeiramente
   girado. clip-path é geometria pura. As carinhas da página são SVG desenhado
   na mão, decisão de direção (a referência pede), não emoji. */
.selo-cta {
  position: relative;
  display: inline-grid; place-items: center;
  width: 13.5rem; min-height: 7.75rem;
  padding: 1.6rem 1.75rem;
  background: var(--ambar); color: var(--tinta);
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.08;
  text-transform: uppercase; text-align: center; text-decoration: none;
  clip-path: polygon(50% 0%, 58% 9%, 69% 3%, 73% 14%, 85% 12%, 84% 24%, 96% 27%, 90% 37%, 100% 45%, 91% 53%, 97% 64%, 86% 68%, 88% 80%, 76% 80%, 73% 92%, 62% 87%, 55% 98%, 47% 90%, 37% 98%, 32% 87%, 21% 91%, 20% 79%, 8% 78%, 12% 67%, 1% 61%, 9% 52%, 0% 43%, 10% 36%, 5% 25%, 17% 23%, 16% 11%, 28% 13%, 31% 2%, 41% 8%);
  transform: rotate(-4deg);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.selo-cta span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.selo-cta:hover { transform: rotate(-2deg) scale(1.03); background: var(--laranja); }
.selo-cta:focus-visible { outline: 3px solid var(--laranja-forte); outline-offset: 6px; }
.btn-lg { padding: 1.05rem 1.75rem; font-size: 1rem; }
.btn-sm { padding: .6rem 1.05rem; font-size: .875rem; min-height: 2.75rem; }
.btn-block { width: 100%; }

@media (min-width: 40em) {
  .btn-lg { font-size: 1.0625rem; }
}

/* --------------------------------------------------------------------------
   4 · Header
   -------------------------------------------------------------------------- */
/* O padrão é a barra branca — é ela que vale sem JavaScript, quando ninguém
   troca a classe e o header precisa ser legível em qualquer altura da
   página. Só com JS, e só no topo, ela some para o hero aparecer inteiro. */
/* A barra é uma pílula solta no topo — o mesmo painel arredondado do resto
   da página, não uma faixa de borda a borda. No topo ela é translúcida e
   sem sombra; ao rolar (o script põe .is-stuck a partir de 8px) ganha fundo
   cheio, blur e sombra. Sem JS fica sempre no estado cheio. A altura da
   pílula + o respiro em cima batem com --header-h, que é o que o
   scroll-padding e o pino da cena usam. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  height: var(--header-h);
  display: flex; align-items: center;
  padding: .55rem var(--shell-pad) 0;
  pointer-events: none;
}
.header-inner {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; width: 100%;
  min-height: 3.35rem;
  padding: .35rem .4rem .35rem 1.15rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 30px -18px rgba(27, 23, 18, .35);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.js .site-header:not(.is-stuck) .header-inner {
  background: rgba(255, 255, 255, .55);
  box-shadow: none;
}
/* Com largura, o menu vai para o centro e a marca e as ações seguram as
   pontas — a barra da referência. */
@media (min-width: 58em) {
  .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .header-ctas { justify-self: end; }
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 1.5rem; width: auto; }

/* Os atalhos em caixa alta e miúdos, como as etiquetas dos cases. */
.nav { display: none; gap: .25rem; }
.nav a {
  padding: .45rem .7rem;
  border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: .78125rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-2); text-decoration: none;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav a:hover { color: var(--tinta); background: var(--papel-2); }
.nav a.is-active { color: var(--tinta); background: var(--ambar); }

.header-ctas { display: flex; align-items: center; gap: .4rem; }

/* O WhatsApp é o caminho único do negócio: fica sempre visível, inclusive no
   celular, no verde da paleta (o mesmo dos títulos). O Instagram é um disco
   rosa, só ícone, e só com largura. */
.header-cta { display: none; }
.header-cta.cta-principal { display: inline-flex; }
/* Os dois com a mesma altura fechada: o disco sem borda ficava 2px mais
   baixo que a pílula com borda, e desalinhava. */
.header-ctas .btn { height: 2.75rem; box-sizing: border-box; }
.header-ctas .btn-laranja { background: var(--verde-fundo); color: #fff; box-shadow: none; }
.header-ctas .btn-laranja:hover { background: var(--verde-claro); color: var(--tinta); }
/* Sem herdar nada de .btn: só o disco e o ícone no centro, por grid. */
.header-insta {
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem; flex: none;
  padding: 0; margin: 0; line-height: 0;
  border: 0; border-radius: 50%;
  background: var(--rosa-claro); color: var(--tinta);
  text-decoration: none;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.header-insta:hover { background: var(--rosa); color: var(--papel); }
.header-insta .ico { display: block; width: 1.15rem; height: 1.15rem; margin: auto; fill: currentColor; }

.nav-toggle {
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  width: 2.75rem; height: 2.75rem; flex: none; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--papel-2);
  color: var(--tinta);
  cursor: pointer;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav-toggle:hover { background: var(--ambar); }
.nav-toggle-bar {
  display: block; width: 15px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .25s var(--ease);
}
/* 3px = metade da distância entre os centros das barras (2px + 4px de gap):
   é o quanto cada uma anda para as duas se cruzarem no meio. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child  { transform: translateY(-3px) rotate(-45deg); }

/* O menu do celular é outro painel arredondado, pendurado sob a pílula. */
@media (max-width: 57.999em) {
  .nav.is-open {
    display: grid; gap: .25rem;
    position: fixed; z-index: 79;
    inset: calc(var(--header-h) + .35rem) var(--shell-pad) auto var(--shell-pad);
    padding: .75rem;
    background: var(--papel);
    border: 1px solid var(--linha);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 50px -24px rgba(27, 23, 18, .45);
  }
  .nav.is-open a {
    padding: .9rem 1rem;
    border-radius: 14px;
    font-size: .9375rem; color: var(--tinta);
  }
}

@media (min-width: 40em) {
  .header-cta { display: inline-flex; }
}
@media (min-width: 58em) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
}
/* --------------------------------------------------------------------------
   5 · Hero
   Sem foto e sem vídeo: a agência não tem vitrine para filmar, e imagem de
   banco diria menos que o próprio título. O fundo é o carvão da marca com um
   brilho laranja e uma grade fina — tudo em CSS, 0 KB, e sem nada que possa
   falhar ao carregar.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Uma tela inteira: sem a faixa, é o hero sozinho que fecha a dobra —
     com teto sobrava uma tira da seção seguinte no pé da primeira tela. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(3.5rem, 12vw, 5.5rem);
  overflow: hidden;
  isolation: isolate;
  /* Claro: papel quente e tinta escura. O carvão fica para o manifesto e o
     fecho, que são a pausa escura da página. */
  background: var(--papel-1);
  color: var(--tinta);
}

/* Dois halos: o grande, laranja, sobe do canto de baixo à esquerda — onde
   mora o texto; o pequeno, quente, fecha o topo à direita para a tela não
   ficar chapada. */
.hero-brilho {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 34rem at 6% 96%, rgba(242, 106, 27, .16), transparent 66%),
    radial-gradient(38rem 26rem at 88% 6%, rgba(255, 154, 61, .12), transparent 70%);
}

/* Paralaxe do hero ---------------------------------------------------------
   Três camadas descolando em velocidades diferentes é o que dá profundidade a
   um fundo que não tem foto nenhuma: a grade quase não anda, o brilho anda um
   pouco, e o texto sobe na frente. O --p
   vem do motor (0 no topo da página, 1 quando o hero termina de sair). */
.hero { --p: 0; }
.hero-brilho { transform: translate3d(0, calc(var(--p) * 72px), 0); }
/* O conteúdo sobe e se apaga um pouco antes do fim: quando a faixa laranja
   encosta, o hero já saiu de cena em vez de ser cortado no meio. */
.hero-body {
  transform: translate3d(0, calc(var(--p) * -56px), 0);
  opacity: calc(1 - var(--p) * 1.15);
}

/* No celular o cartaz e os painéis empilham: menos respiro em cima para o
   selo de diagnóstico caber na primeira tela. */
@media (max-width: 43.999em) {
  .hero { padding-top: calc(var(--header-h) + 2rem); padding-bottom: clamp(2.75rem, 9vw, 4rem); }
}

.hero-body { position: relative; text-align: center; }

/* O cartaz ---------------------------------------------------------------- */
.cartaz { position: relative; display: inline-block; margin-top: .5rem; }

.hero-title {
  font-family: var(--font-poster);
  font-weight: 400;
  /* Anton é estreita: cabe grande. 15vw no celular, teto de 8.5rem. */
  font-size: clamp(3.4rem, 15vw, 8.5rem);
  /* 1.14: o acento do Ê e a cedilha precisam de ar entre as linhas. */
  line-height: 1.14;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0;
}
.hero-title .linha { display: block; }
.hero-title em { font-style: normal; color: var(--tinta); }
.hero-title .azul    { color: var(--azul); }
.hero-title .verde   { color: var(--verde); }
.hero-title .laranja { color: var(--laranja-titulo); }
.circulada { position: relative; display: inline-block; }
/* Largura E altura explícitas: com height:auto o SVG respeita a proporção
   do viewBox (2:1) e, numa palavra comprida, a elipse virava um balão. */
.elipse {
  /* Bem maior que a caixa da palavra: a Anton tem caixa alta quase do tamanho
     da linha, e uma elipse do tamanho da caixa cortava as letras. */
  position: absolute; left: -12%; top: -16%;
  width: 124%; height: 132%; max-width: none;
  /* Por cima das letras, traço fino, laço folgado: como caneta no impresso. */
  z-index: 1;
  overflow: visible; pointer-events: none;
}
/* Um laço de caneta: 1,1 volta, o fim passa por cima do começo, raio
   crescendo um pouco — é o que faz parecer desenhado à mão e não um
   <ellipse>. Comprimento do traço ≈ 484 unidades do viewBox. */
.elipse path {
  fill: none; stroke: var(--laranja); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 484; stroke-dashoffset: 0;
}
.js .elipse path { stroke-dashoffset: 484; }
.js .hero-title .elipse path,
.js .section-title.is-in .elipse path { animation: traca 1.1s var(--ease-out) .55s forwards; }
@keyframes traca { to { stroke-dashoffset: 0; } }

/* Adesivos: geometria em SVG, posicionada em relação ao cartaz. Tamanhos em
   em do título para escalarem junto com ele. */
.adesivo { position: absolute; pointer-events: none; font-size: clamp(3.4rem, 15vw, 8.5rem); }
.adesivo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ad-mais      { width: .32em; height: .32em; left: -.55em; top: -.1em; }
.ad-mais svg  { fill: var(--azul); }
.ad-brilho    { width: .3em; height: .3em; right: -.55em; top: .28em; }
.ad-brilho svg { fill: var(--verde); }
.ad-rabisco   { width: 1.1em; height: .55em; right: -.7em; top: -.42em; transform: rotate(-12deg); }
.ad-rabisco svg { fill: none; stroke: var(--rosa); stroke-width: 5; stroke-linecap: round; }
.ad-aspas     { width: .5em; height: .42em; left: -.62em; top: 1em; }
.ad-aspas svg { fill: var(--ambar); }
.ad-carinha   { width: .46em; height: .46em; right: -.1em; top: .86em; transform: rotate(10deg); }
.ad-carinha svg { fill: var(--ambar); }
.ad-carinha .olho { fill: var(--tinta); }
.ad-carinha .boca { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-linecap: round; }
.ad-play      { width: .78em; height: .78em; right: -.95em; top: 1.05em; transform: rotate(8deg); }
.ad-play svg  { fill: var(--verde); }
.ad-play .anel { fill: none; stroke: var(--papel-1); stroke-width: 2; stroke-dasharray: 5 4; }
.ad-play .tri  { fill: var(--papel); }
.ad-asterisco { width: .3em; height: .3em; right: -.5em; bottom: -.08em; }
.ad-asterisco svg { fill: var(--rosa); }

/* No celular o cartaz ocupa a largura toda: só ficam os adesivos que moram
   nas bordas, sem cair sobre as letras. */
@media (max-width: 47.999em) {
  /* O selo sobe para a primeira tela: no celular o texto empurraria o botão
     para fora da dobra. */
  .painel-rolar { order: -1; padding: 1rem 1rem 1.25rem; }
  /* Os adesivos ficam, menores, nos vãos que o cartaz deixa a 400px: em cima
     (plus e brilho), dos dois lados de VIRAR — a única linha curta — (carinha
     e play) e embaixo (rabisco e asterisco). As aspas saem: o painel de
     texto já tem as suas. */
  .ad-aspas { display: none; }
  .ad-mais  { left: -.1em; top: -.42em; }
  .ad-brilho { right: -.05em; top: -.35em; }
  .ad-carinha { width: .5em; height: .5em; left: .02em; top: 2.28em; right: auto; }
  .ad-play { width: .62em; height: .62em; right: .02em; top: 2.2em; }
  .ad-rabisco { width: .8em; height: .4em; left: -.05em; right: auto; bottom: -.55em; top: auto; transform: rotate(8deg); }
  .ad-asterisco { right: -.05em; bottom: -.4em; }
}

/* Os painéis ----------------------------------------------------------------
   Como na referência: o texto com a pílula de pé e, ao lado, o convite de
   rolar com o selo estrelado colado por cima. */
.hero-paineis {
  position: relative;
  display: grid; gap: 1rem;
  margin-top: 2.5rem;
  text-align: left;
}
.painel {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.painel-texto { position: relative; display: grid; gap: .9rem; align-content: center; padding-top: 1.9rem; }
.painel-adesivo {
  position: absolute; top: -1.1rem; left: 1.35rem;
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--ambar); color: var(--tinta);
  box-shadow: 0 0 0 3px var(--papel-1);
  transform: rotate(-8deg);
}
.painel-adesivo svg { width: 1.1rem; height: .95rem; fill: currentColor; }
/* Etiquetas: os fatos do hero como adesivos coloridos, tinta por cima. */
.etiquetas { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.etiquetas li {
  padding: .3rem .7rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: .75rem;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--ambar); color: var(--tinta);
}
.etiquetas li:nth-child(2) { background: var(--azul-claro); }
.etiquetas li:nth-child(3) { background: var(--verde-claro); }
/* No celular o painel encolhe: etiquetas menores, duas por linha. */
@media (max-width: 47.999em) {
  .painel-texto { padding: 1.4rem 1rem 1rem; gap: .55rem; margin-top: 1.5rem; }
  .painel-texto .hero-sub { font-size: .9375rem; line-height: 1.45; }
  .painel-adesivo { width: 2.2rem; height: 2.2rem; top: -.95rem; left: 1rem; }
  .painel-adesivo svg { width: .9rem; height: .8rem; }
  .etiquetas { gap: .3rem; }
  .etiquetas li { padding: .22rem .55rem; font-size: .625rem; letter-spacing: .03em; }
}
.hero-sub {
  margin: 0;
  font-size: clamp(1rem, 3vw, 1.0625rem);
  line-height: 1.6;
  color: var(--tinta-2);
}
.painel-rolar {
  display: grid; place-items: center; gap: 1rem;
  padding: 1.25rem;
}
.rolar {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 2.75rem; padding: .5rem .75rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--tinta); text-decoration: none;
  border-radius: 999px;
}
.rolar .ico { width: 1.1rem; height: 1.1rem; fill: var(--laranja); }
.rolar:hover { color: var(--laranja-forte); }

@media (min-width: 48em) {
  .hero-paineis { grid-template-columns: 1.6fr 1fr; gap: 1.25rem; margin-top: 3.25rem; }
  .painel { padding: 1.5rem 2rem; }
  /* O selo sobe e invade o cartaz, como um adesivo colado por cima. */
  .painel-rolar { position: relative; padding-top: 3.25rem; padding-bottom: 1.25rem; }
  .painel-rolar .selo-cta { position: absolute; top: -4.5rem; left: 50%; transform: translateX(-50%) rotate(-5deg); }
  .painel-rolar .selo-cta:hover { transform: translateX(-50%) rotate(-3deg) scale(1.03); }
}
/* Selo de atendimento, preenchido pelo script a partir do horário real.
   Esta é a versão de fundo claro — a mesma que aparece na tabela de
   Atendimento, lá embaixo. */
.status-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .38rem .8rem .38rem .65rem;
  border: 1px solid var(--linha-2); border-radius: 999px;
  background: var(--papel);
  font-size: .8125rem; font-weight: 500; line-height: 1.2; color: var(--tinta-3);
  white-space: nowrap;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.status-badge strong { color: var(--tinta); font-weight: 700; }
.status-dot {
  width: .5rem; height: .5rem; flex: none; border-radius: 50%;
  background: var(--tinta-4);
}
.status-badge.is-open {
  background: rgba(37, 211, 102, .10);
  border-color: rgba(37, 211, 102, .40);
}
.status-badge.is-open strong { color: #0B7A38; }
.status-badge.is-open .status-dot {
  background: var(--wa);
  animation: pulso 2.6s var(--ease) infinite;
}
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); }
  70%  { box-shadow: 0 0 0 .45rem rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}


/* --------------------------------------------------------------------------
   7 · Prova social
   As marcas atendidas passam em laço. Mesma mecânica da faixa de serviços —
   duas metades idênticas, a animação anda exatamente uma — mas em vez de uma
   tarja colorida a esteira é transparente, e as pontas somem em degradê para
   as marcas entrarem e saírem em vez de serem cortadas na borda.
   -------------------------------------------------------------------------- */
.clientes {
  padding-block: clamp(2.5rem, 6vw, 3.5rem);
  border-bottom: 1px solid var(--linha);
  overflow: hidden;
}
.clientes-titulo {
  font-family: var(--font-body);
  font-size: .78125rem; font-weight: 700; line-height: 1.2;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-3);
  text-align: center;
  margin-bottom: 1.75rem;
}

/* As marcas, uma vez só, paradas: prova social se lê, não se persegue.
   Cada uma numa caixa do mesmo tamanho, contida — as quatro chegam em
   proporções diferentes (a A.R. é quadrada, a Gio é deitada). */
.marcas-lista {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
}
/* flex, não grid: numa linha automática de grade o height:100% da imagem
   vira auto e a A.R. (quadrada) estoura a caixa. */
.marcas-lista li {
  width: 9.5rem; height: 4.25rem; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.marcas-lista img {
  width: 100%; height: 100%;
  object-fit: contain;
}
/* --------------------------------------------------------------------------
   8 · Vantagens
   -------------------------------------------------------------------------- */
.vantagens {
  list-style: none;
  display: grid; gap: 1.6rem 1rem;
  grid-template-columns: 1fr;
  padding-top: .6rem;
}
@media (min-width: 46em) { .vantagens { grid-template-columns: repeat(2, 1fr); gap: 1.9rem 1.25rem; } }

/* Painel arredondado com o adesivo redondo colado no canto de cima — o
   cartão da referência. Cada um leva uma cor: o que os separa é a cor, não
   o desenho. */
.vantagem {
  position: relative;
  padding: 2rem 1.5rem 1.5rem;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--radius-lg);
}
.vantagem-ico {
  position: absolute; top: -1.2rem; left: 1.35rem;
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--ambar); color: var(--tinta);
  box-shadow: 0 0 0 3px var(--papel-1);
  transform: rotate(-6deg);
}
.vantagem:nth-child(2) .vantagem-ico { background: var(--rosa-claro); transform: rotate(5deg); }
.vantagem:nth-child(3) .vantagem-ico { background: var(--azul-claro); transform: rotate(-4deg); }
.vantagem:nth-child(4) .vantagem-ico { background: var(--verde-claro); transform: rotate(7deg); }
.vantagem-ico svg {
  width: 1.25rem; height: 1.25rem;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.vantagem h3 {
  font-family: var(--font-poster); font-weight: 400;
  font-size: 1.5rem; letter-spacing: .01em; line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.vantagem p  { color: var(--tinta-2); font-size: .9375rem; }
/* --------------------------------------------------------------------------
   9 · Serviços
   -------------------------------------------------------------------------- */
.servicos {
  list-style: none;
  display: grid; gap: 1.75rem 1rem;
  grid-template-columns: 1fr;
  padding-top: .6rem;
}
@media (min-width: 46em) { .servicos { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.25rem; } }
@media (min-width: 64em) { .servicos { grid-template-columns: repeat(3, 1fr); } }

/* O mesmo painel das vantagens, agora sobre o carvão: um tom acima do fundo,
   fio claro, e o adesivo redondo no canto. */
.servico {
  position: relative;
  padding: 2.1rem 1.6rem 1.6rem;
  background: var(--carvao-2);
  border: 1px solid var(--carvao-borda);
  border-radius: var(--radius-xl);
}
.servico-ico {
  position: absolute; top: -1.3rem; left: 1.4rem;
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--ambar); color: var(--tinta);
  box-shadow: 0 0 0 3px var(--carvao);
  transform: rotate(-6deg);
}
.servico:nth-child(2) .servico-ico { background: var(--rosa-claro);  transform: rotate(5deg); }
.servico:nth-child(3) .servico-ico { background: var(--azul-claro);  transform: rotate(-3deg); }
.servico:nth-child(4) .servico-ico { background: var(--verde-claro); transform: rotate(6deg); }
.servico:nth-child(5) .servico-ico { background: var(--laranja);     transform: rotate(-5deg); }
.servico:nth-child(6) .servico-ico { background: var(--salmao);      transform: rotate(4deg); }
.servico-ico svg {
  width: 1.35rem; height: 1.35rem;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.servico h3 {
  font-family: var(--font-poster); font-weight: 400;
  font-size: 1.6rem; letter-spacing: .01em; line-height: 1.05;
  text-transform: uppercase;
  color: var(--hero-txt);
  margin-bottom: .4rem;
}
.servico p  { color: var(--hero-txt-2); font-size: .9375rem; }
/* --------------------------------------------------------------------------
   10 · Como funciona
   A arte fica grudada na tela enquanto os três passos passam ao lado, e muda
   de estágio conforme o passo que está sendo lido. O estágio é um atributo no
   contêiner (data-etapa), não uma classe por peça: assim cada elemento do
   desenho declara aqui como se comporta em cada um dos três momentos, e o
   script só troca um número.
   Sem JavaScript o atributo fica em "3" — a ilustração aparece completa, os
   passos ficam todos legíveis e nada some.
   -------------------------------------------------------------------------- */
.fluxo { display: grid; gap: clamp(2rem, 5vw, 2.75rem); }
/* Os atos valem 1 por padrão — sem script a cena aparece pronta. Ficam na
   pista porque é ela que o motor mede, e daqui descem para o desenho. */
.fluxo-palco { --ato1: 1; --ato2: 1; --ato3: 1; }

@media (min-width: 62em) {
  .fluxo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* Só entre as colunas. Um gap único valia também entre as linhas e abria
       um buraco entre o texto de abertura e o primeiro passo — os dois vivem
       na mesma coluna, um debaixo do outro. */
    column-gap: clamp(2rem, 5vw, 4rem);
    row-gap: .5rem;
    align-items: center;
  }

  /* O pino. A pista tem duas telas e meia de altura; a cena, presa por
     sticky, ocupa uma e fica parada enquanto a rolagem gasta o resto. É isso
     que faz a tela não subir nem descer durante a animação: o que anda é o
     documento por baixo, não a cena.
     Prender só a arte, como já esteve aqui, não resolve — a coluna de texto
     continuava passando e era ela que dava a sensação de página se mexendo. */
  /* Só com motor: sem script, ou com menos movimento, a cena já aparece
     pronta e a pista de 2,5 telas viraria rolagem vazia. */
  .js .fluxo-palco { height: 250vh; }
  .js .fluxo {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    grid-template-rows: auto auto;
    align-content: center;
  }
  /* O título entra na coluna do texto, acima dos passos, e a arte ocupa a
     coluna inteira ao lado. Fora do bloco preso ele ficava para trás na
     rolagem, e a cena passava a acontecer sem dizer do que se trata. */
  .fluxo-arte   { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .fluxo-head   { grid-column: 2; grid-row: 1; }
  .fluxo-passos { grid-column: 2; grid-row: 2; }
}
/* Pouca margem: o primeiro passo já traz o próprio preenchimento no topo, e
   somar os dois abria um buraco entre o texto de abertura e a lista. */
.fluxo-head { max-width: none; margin: 0 0 .35rem; text-align: left; }
.fluxo-head .section-lead { margin-inline: 0; }
.fluxo-head .section-title { font-size: clamp(2.4rem, 5.5vw, 3.6rem); }

.fluxo-arte { margin: 0; }
.fluxo-arte svg { width: 100%; height: auto; overflow: visible; }

/* Sem o pino de tela larga, o desenho gruda no topo (abaixo do header) e os
   três passos passam por baixo dele: assim o rosto termina de montar na
   frente de quem lê, em vez de sumir pela borda antes do terceiro ato. A
   régua da pista continua a mesma — a seção é mais alta que a tela, então o
   motor mede o curso por ela. */
@media (max-width: 61.999em) {
  .fluxo-arte {
    position: sticky; top: calc(var(--header-h) + .25rem); z-index: 2;
    padding: .5rem 0 .75rem;
    background: var(--papel);
  }
  .fluxo-arte svg { max-width: 14rem; margin-inline: auto; }
}

.fluxo-legenda {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .55rem;
  margin-top: 1rem;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-3);
}
.fluxo-legenda svg {
  width: .95rem; height: .95rem; flex: none;
  fill: none; stroke: var(--laranja); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
/* No celular a legenda empilha, com a seta apontando para baixo: numa linha
   só o segundo trecho quebrava sozinho e a seta ficava solta na ponta. */
@media (max-width: 47.999em) {
  .fluxo-legenda { flex-direction: column; gap: .3rem; }
  .fluxo-legenda svg { transform: rotate(90deg); }
}
/* A legenda é o resumo da cena, então a segunda metade só acende quando a
   cena chega lá. */
.fluxo-legenda .fluxo-para {
  color: var(--laranja-forte);
  opacity: calc(.28 + var(--ato3, 1) * .72);
}

/* Os três atos valem 1 até que alguém diga o contrário — e quem diz é o
   motor, que só entra em campo com JavaScript e sem pedido de menos
   movimento. Ou seja: o padrão declarado aqui é a cena inteira montada, que é
   exatamente o que precisa aparecer para quem não vai ver a encenação.
   Sem estes três números o var() não resolve, o calc() inteiro é descartado e
   as peças desabam empilhadas no centro. */
/* A cena é encenada pela rolagem: os três atos avançam com a página e param
   quando ela para — o mesmo funcionamento da referência. Nada de transição
   sobre as peças, portanto: quem conduz é o dedo, e uma transição por cima
   faria o desenho chegar sempre meio segundo depois dele. */

/* A ilustração ------------------------------------------------------------
   A cena é feita de uma peça só, repetida: o "play" da logo. Cada seta é um
   post. Elas nascem apontando cada uma para um lado, se organizam num anel
   (o fio condutor) e no fim se recolhem num rosto sorridente — o adesivo da
   página, montado. O desenho conta o que os três passos dizem ao lado.

   As três posições de cada peça viram uma conta só, abaixo, e o que muda de
   uma para a outra são seis números. Como o terceiro ato leva todas ao
   centro (0,0), o destino final não precisa ser escrito. */
/* Sem isto a origem das transformações seria o canto do viewBox, e cada seta
   giraria em torno de um ponto fora dela mesma. fill-box + center põe o eixo
   no meio da própria peça — que é onde "virar" faz sentido. */
.peca, .arte-anel, .arte-rosto, .rosto-olho {
  transform-box: fill-box;
  transform-origin: center;
}

.peca {
  transform:
    translate(
      calc((var(--x1) + (var(--x2) - var(--x1)) * var(--ato1) + (var(--x3, 0) - var(--x2)) * var(--ato3)) * 1px),
      calc((var(--y1) + (var(--y2) - var(--y1)) * var(--ato1) + (var(--y3, 0) - var(--y2)) * var(--ato3)) * 1px))
    rotate(calc((var(--r1) * (1 - var(--ato1)) + var(--r2) * var(--ato1)) * 1deg))
    scale(calc(var(--s1) + (1 - var(--s1)) * var(--ato1)))
    scale(calc(1 - var(--ato3) * .82));
}
/* --x2/--y2: doze pontos num anel de raio 110, de 30 em 30 graus; --r2 é o
   mesmo ângulo, para cada seta apontar para fora. --x3/--y3 é o destino do
   terceiro ato: o centro (padrão), salvo as três peças escuras, que vão
   parar onde nascem os olhos e a boca. */
.peca:nth-child(1)  { --x1: -156; --y1: -112; --r1:  -37; --s1: 1.14; --x2:  -95; --y2:  -55; --r2: 210; }
.peca:nth-child(2)  { --x1:  -96; --y1:  -60; --r1:   71; --s1: 0.82; --x2:  -55; --y2:  -95; --r2: 240; }
.peca:nth-child(3)  { --x1:  -30; --y1: -128; --r1:  -64; --s1: 0.96; --x2:    0; --y2: -110; --r2: 270; --x3: -25; --y3: -16; }
.peca:nth-child(4)  { --x1:   84; --y1: -116; --r1:   22; --s1: 1.08; --x2:   55; --y2:  -95; --r2: 300; }
.peca:nth-child(5)  { --x1: -170; --y1:  -14; --r1:  128; --s1: 0.88; --x2: -110; --y2:    0; --r2: 180; }
.peca:nth-child(6)  { --x1:  -72; --y1:  -34; --r1:  -81; --s1: 1.16; --x2:  -95; --y2:   55; --r2: 150; }
.peca:nth-child(7)  { --x1:   46; --y1:  -46; --r1:   98; --s1: 0.84; --x2:   95; --y2:  -55; --r2: 330; --x3:  25; --y3: -16; }
.peca:nth-child(8)  { --x1:  150; --y1:  -78; --r1:  -24; --s1: 1.02; --x2:  110; --y2:    0; --r2:   0; }
.peca:nth-child(9)  { --x1: -122; --y1:   84; --r1:   61; --s1: 0.92; --x2:  -55; --y2:   95; --r2: 120; }
.peca:nth-child(10) { --x1:  -22; --y1:   58; --r1:  -16; --s1: 1.12; --x2:    0; --y2:  110; --r2:  90; --x3:   0; --y3:  24; }
.peca:nth-child(11) { --x1:   58; --y1:  112; --r1:  152; --s1: 0.86; --x2:   55; --y2:   95; --r2:  60; }
.peca:nth-child(12) { --x1:  156; --y1:   36; --r1:  -52; --s1: 0.98; --x2:   95; --y2:   55; --r2:  30; }

/* Cinza enquanto está solta, âmbar depois de entrar no anel. São duas
   cópias da mesma seta se cruzando em fade: cor não se interpola em calc(),
   e um cross-fade custa menos que qualquer contorno para isso. */
.peca-solta { fill: var(--tinta-4); opacity: calc((1 - var(--ato1)) * .8); }
.peca-junta { fill: var(--ambar); opacity: var(--ato1); }
/* Três peças escuras desde o começo: são os olhos e a boca — o que dá cara
   ao rosto já estava no meio do conteúdo solto. */
.peca:nth-child(3) .peca-solta, .peca:nth-child(7) .peca-solta, .peca:nth-child(10) .peca-solta { fill: var(--tinta); }
.peca:nth-child(3) .peca-junta, .peca:nth-child(7) .peca-junta, .peca:nth-child(10) .peca-junta { fill: var(--tinta); }
.arte-pecas { opacity: calc(1 - var(--ato3) * .96); }

/* O anel é traçado no segundo ato (pathLength="1" normaliza o traço) e no
   terceiro encolhe até o raio do disco: vira a borda do rosto. */
.arte-anel {
  fill: none;
  /* Ponta reta: com ponta redonda, o traço em offset 1 deixava um pingo. */
  stroke: var(--ambar); stroke-width: 3; stroke-linecap: butt;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--ato2));
  transform: scale(calc(1 - var(--ato3) * .345));
  /* Some de vez antes do segundo ato: em offset 1 sobrava um pingo. */
  opacity: calc(min(var(--ato2) * 8, 1) - var(--ato3) * .5);
}

/* O rosto: fantasma desde o começo (ele já está ali, só falta o conteúdo se
   juntar). No terceiro ato o disco cresce, os olhos abrem e a boca é traçada. */
.arte-rosto {
  opacity: calc(.09 + var(--ato3) * .91);
  transform: scale(calc(.42 + var(--ato3) * .58));
}
.rosto-disco { fill: var(--ambar); }
.rosto-olho  { fill: var(--tinta); transform: scale(var(--ato3)); }
.rosto-boca  {
  fill: none; stroke: var(--tinta); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--ato3));
}
/* Os passos ---------------------------------------------------------------
   Os três ficam à vista ao mesmo tempo, ligados por uma trilha que atravessa
   os números. A régua veio da referência e é toda de contenção: o fio tem
   1px, não 2; o nó tem 1,4rem, não 1,8; e só o passo ativo ganha cor — os
   outros ficam em cinza. Com o fio grosso e laranja em toda a altura, ele
   competia com o texto e parecia furar os números em vez de passar por trás.
   -------------------------------------------------------------------------- */
.fluxo-passos {
  position: relative;
  list-style: none;
  display: grid;
  /* Sem vão: os cartões se encostam, e é o próprio preenchimento que separa.
     Com folga entre eles a trilha aparecia picotada nas juntas. */
  gap: 0;
}

/* Duas trilhas sobrepostas no mesmo lugar: a cinza é o caminho todo, a
   laranja é o quanto dele já foi andado. A laranja cresce por scaleY a partir
   do topo — escalar é de graça para o compositor, mexer na altura não é. */
.fluxo-passos::before,
.fluxo-passos::after {
  content: "";
  position: absolute; top: 1rem; bottom: 1rem;
  /* 1,9rem é o centro do nó. O translateX(-50%) põe o centro do fio nesse
     mesmo ponto sem precisar descontar meio pixel na mão — que é conta que
     erra sozinha quando a espessura ou o rem mudam. */
  left: 1.9rem;
  width: 1px;
  transform: translateX(-50%);
}
.fluxo-passos::before { background: var(--linha-2); }
.fluxo-passos::after {
  background: var(--laranja);
  transform-origin: top center;
  transform: translateX(-50%) scaleY(calc((var(--ato1) + var(--ato2) + var(--ato3)) / 3));
}

/* z-index acima das trilhas: os pseudo-elementos que as desenham são o
   primeiro e o ÚLTIMO filho da lista, e o último pintaria por cima de tudo —
   inclusive dos números. Com os passos na frente, a trilha passa por trás dos
   nós, que têm fundo próprio. */
/* O contorno do passo ativo é sombra interna, não borda. Uma borda de 1px —
   mesmo transparente — empurra a caixa de preenchimento para dentro, e o nó,
   que é filho absoluto, se posiciona por ela: o círculo saía 1px à direita do
   fio e a trilha entrava torta nele. */
.fluxo-passo {
  position: relative;
  z-index: 1;
  padding: 1.15rem 1.35rem 1.15rem 3.6rem;
  border-radius: var(--radius-lg);
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}

/* O nó fica centrado no fio: metade da largura dele para a esquerda do
   1,9rem da trilha, metade da altura acima do centro da primeira linha. */
/* O nó é o mesmo disco colorido dos painéis, um por passo, torto. Cresce
   quando o passo acende. */
.fluxo-n {
  position: absolute; left: 1rem; top: 1.05rem;
  display: grid; place-items: center;
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  background: var(--ambar);
  color: var(--tinta);
  font-family: var(--font-poster); font-weight: 400; font-size: 1rem;
  line-height: 1;
  transform: rotate(-8deg);
  transition: transform .4s var(--ease-out);
}
.fluxo-passo[data-etapa="2"] .fluxo-n { background: var(--rosa-claro); transform: rotate(6deg); }
.fluxo-passo[data-etapa="3"] .fluxo-n { background: var(--verde-claro); transform: rotate(-5deg); }
.fluxo-tag {
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: .35rem;
  transition: color .4s var(--ease);
}
.fluxo-passo h3 {
  font-family: var(--font-poster); font-weight: 400;
  font-size: 1.45rem; letter-spacing: .01em; line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.fluxo-passo p  { color: var(--tinta-2); font-size: .9375rem; }

/* Só o passo ativo se acende. Os outros continuam legíveis, sem apagar: quem
   lê fora de ordem não fica com texto meio invisível na frente. */
.js .fluxo-passo.esta-ativo {
  background: var(--laranja-wash);
  box-shadow: inset 0 0 0 1px var(--laranja-edge);
}
.js .fluxo-passo.esta-ativo .fluxo-n { transform: rotate(0deg) scale(1.15); }
.js .fluxo-passo.esta-ativo .fluxo-tag { color: var(--laranja-forte); }

/* --------------------------------------------------------------------------
   11 · Manifesto
   Uma pausa escura no meio da página clara: separa o "o que fazemos" do
   "para quem já fizemos".
   -------------------------------------------------------------------------- */
.manifesto {
  background: var(--carvao);
  color: var(--hero-txt);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
/* O brilho sobe enquanto a seção passa: o fundo deixa de ser um chapado e
   ganha a sensação de que a luz está atrás do texto, não colada nele. */
.manifesto { --p: 0; }
.manifesto::before {
  content: ""; position: absolute; inset: -12% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48rem 28rem at 50% 100%, rgba(242, 106, 27, .22), transparent 70%);
  transform: translate3d(0, calc(var(--p) * -90px), 0);
}

/* A VIRADA — a assinatura de movimento da marca.
   A palavra "virar" vira de verdade, uma vez só, quando a frase entra na
   tela. É o único giro completo da página inteira: usado em mais de um lugar
   viraria maneirismo, e aqui ele é literalmente o nome da agência
   acontecendo. O mesmo gesto reaparece, mais contido, na marca do CTA. */
.js .vira-palavra {
  display: inline-block;
  transform-origin: center 55%;
}
.js .section-title.is-in .vira-palavra {
  animation: virada 1s var(--ease-out) .15s both;
}
@keyframes virada {
  from { transform: perspective(700px) rotateX(-92deg); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: perspective(700px) rotateX(0deg);   opacity: 1; }
}
.manifesto .section-title {
  font-size: clamp(2.8rem, 9.5vw, 6.25rem);
  margin-inline: auto; margin-bottom: 1.5rem;
}
.manifesto .shell { position: relative; }

/* O selo que gira: azul, texto claro em círculo, o play no meio. Gira devagar
   e sem parar — é o único movimento contínuo da página, e é pequeno. */
.selo-giro {
  display: block;
  width: clamp(6.5rem, 14vw, 9.5rem); height: auto;
  margin: 0 auto 2rem;
  border-radius: 50%;
  transition: transform .2s var(--ease);
}
.selo-giro svg { width: 100%; height: auto; overflow: visible; }
.selo-giro:hover circle { fill: var(--laranja); }
.selo-giro circle { fill: var(--azul); }
.selo-giro text {
  fill: var(--hero-txt);
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  letter-spacing: .1em; text-transform: uppercase;
}
.selo-giro .tri { fill: var(--hero-txt); }
.js .selo-giro { animation: gira 18s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (min-width: 62em) {
  /* Com largura ele sai do fluxo e cola no canto do cartaz, torto. */
  .selo-giro { position: absolute; right: -4.5rem; top: -6rem; margin: 0; transform: rotate(-8deg); }
  .js .selo-giro { animation: giraTorto 18s linear infinite; }
  @keyframes giraTorto { to { transform: rotate(352deg); } }
}
.manifesto .section-lead { color: var(--hero-txt-2); margin-inline: auto; }
.manifesto-acoes { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   12 · Portfólio
   -------------------------------------------------------------------------- */
.projetos {
  list-style: none;
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 46em) { .projetos { grid-template-columns: repeat(2, 1fr); } }
/* Quatro na mesma fileira no desktop: um projeto por coluna. */
@media (min-width: 68em) { .projetos { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }

/* O cartão inclina para o lado do cursor: --gx e --gy chegam do script, em
   graus, e são zerados quando o ponteiro sai. Em tela de toque nada disso é
   ligado — não há ponteiro para seguir, e o cartão inclinado embaixo do dedo
   só atrapalharia a leitura. */
.projeto {
  --gx: 0deg; --gy: 0deg;
  display: grid; grid-template-rows: auto 1fr;
  height: 100%;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  transform: perspective(900px) rotateY(var(--gx)) rotateX(var(--gy));
  transition: border-color .25s var(--ease), transform .4s var(--ease),
              box-shadow .25s var(--ease);
}
.projeto:hover {
  border-color: var(--laranja-edge);
  box-shadow: 0 30px 60px -34px rgba(27, 23, 18, .65);
  /* O translateZ dentro da mesma perspectiva aproxima o cartão em vez de
     ampliá-lo: o giro e a aproximação viram um gesto só. */
  transform: perspective(900px) rotateY(var(--gx)) rotateX(var(--gy)) translateZ(14px);
  /* Enquanto o ponteiro está em cima, a inclinação precisa colar nele: com a
     transição longa do repouso o cartão ficaria sempre um passo atrás. */
  transition: border-color .25s var(--ease), transform .12s linear,
              box-shadow .25s var(--ease);
}
/* Quadrada, não 16/10: as marcas chegaram como imagens quadradas, com fundo
   próprio. Em quadro quadrado elas preenchem a área inteira sem corte — em
   16/10 seria preciso decepar quase 20% em cima e embaixo, e o que sai é
   justamente o topo da engrenagem e a linha de baixo do logo da A.R. */
.projeto-media {
  display: grid; place-items: center;
  aspect-ratio: 16 / 10;
  background: var(--papel-2);
  overflow: hidden;
}
.projeto-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
}
.projeto-corpo { display: grid; align-content: start; gap: .4rem; padding: 1.4rem; }
/* Etiqueta cheia, com a tinta por cima: cada projeto na sua cor. */
.projeto-tag {
  justify-self: start;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: var(--ambar);
  color: var(--tinta);
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.projetos li:nth-child(2) .projeto-tag { background: var(--azul-claro); }
.projetos li:nth-child(3) .projeto-tag { background: var(--rosa-claro); }
.projetos li:nth-child(4) .projeto-tag { background: var(--verde-claro); }
.projeto-corpo strong {
  font-family: var(--font-poster);
  font-size: 1.45rem; font-weight: 400; letter-spacing: .01em;
  line-height: 1.05; text-transform: uppercase;
  margin-top: .35rem;
}
.projeto-txt { color: var(--tinta-2); font-size: .9375rem; }
.projeto-link {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .55rem;
  color: var(--laranja-forte); font-weight: 700; font-size: .9375rem;
}
.projeto-link svg { width: .95rem; height: .95rem; transition: transform .2s var(--ease); }
.projeto:hover .projeto-link svg { transform: translate(2px, -2px); }

/* Fecho do passo a passo: a promessa e o caminho, na ordem. */
.passo-fim {
  margin-top: clamp(2.25rem, 6vw, 3.25rem);
  display: grid; gap: 1.75rem;
  justify-items: center;
  text-align: center;
}
.passo-cta { display: grid; gap: .85rem; justify-items: center; }
.passo-cta p { font-size: .875rem; color: var(--tinta-3); }

/* Citação: um painel com as aspas âmbar coladas no canto, como os adesivos. */
.citacao {
  position: relative;
  margin: 0;
  max-width: 42rem;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--papel-1);
  border: 1px solid var(--linha);
  border-radius: var(--radius-xl);
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.8vw, 1.375rem);
  font-weight: 600; line-height: 1.4; letter-spacing: -.02em;
  color: var(--tinta);
}
.citacao-aspas {
  position: absolute; top: -1.1rem; left: 1.5rem;
  width: 2.4rem; height: 2rem;
  transform: rotate(-6deg);
}
.citacao-aspas svg { width: 100%; height: 100%; fill: var(--ambar); }

/* --------------------------------------------------------------------------
   14 · Dúvidas
   -------------------------------------------------------------------------- */
.faq { list-style: none; display: grid; gap: .65rem; }
@media (min-width: 60em) {
  .faq { grid-template-columns: repeat(2, 1fr); gap: .75rem 1.15rem; align-items: start; }
}

.faq-item {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--radius-lg);
  transition: border-color .25s var(--ease);
}
.faq-item[open] { border-color: var(--azul); }
.faq li:nth-child(2) .faq-item[open] { border-color: var(--rosa); }
.faq li:nth-child(3) .faq-item[open] { border-color: var(--verde); }
.faq li:nth-child(4) .faq-item[open] { border-color: var(--ambar); }
.faq li:nth-child(5) .faq-item[open] { border-color: var(--laranja); }
.faq li:nth-child(6) .faq-item[open] { border-color: var(--rosa); }
.faq li:nth-child(2) .faq-seta { stroke: var(--rosa); }
.faq li:nth-child(3) .faq-seta { stroke: var(--verde); }
.faq li:nth-child(4) .faq-seta { stroke: var(--laranja-forte); }
.faq li:nth-child(5) .faq-seta { stroke: var(--laranja); }
.faq li:nth-child(6) .faq-seta { stroke: var(--rosa); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem;
  font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
/* O triângulo nativo do <details> some nos dois motores: o nosso chevron faz
   o papel dele e gira ao abrir. */
.faq-item summary::-webkit-details-marker { display: none; }
.faq-seta {
  width: 1.1rem; height: 1.1rem; flex: none;
  fill: none; stroke: var(--azul); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.faq-item[open] .faq-seta { transform: rotate(180deg); }
.faq-item p {
  padding: 0 1.35rem 1.3rem;
  color: var(--tinta-2); font-size: .9688rem;
}
/* O <details> nativo não anima a altura sem um envelope e um punhado de
   JavaScript. O que dá para fazer sem nada disso — e resolve o essencial — é
   a resposta chegar deslizando em vez de aparecer estalada. O fechar
   continua instantâneo, e ninguém sente falta. */
.faq-item[open] p { animation: abreResposta .34s var(--ease-out) both; }
@keyframes abreResposta {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.faq-item summary { transition: color .2s var(--ease); }
.faq-item summary:hover { color: var(--azul); }

/* --------------------------------------------------------------------------
   15 · Canais, atendimento e formulário
   -------------------------------------------------------------------------- */
.contato-grid { display: grid; gap: 1.15rem; }
@media (min-width: 60em) { .contato-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

/* space-between em vez de start: as duas colunas passam a terminar na mesma
   linha. A folga vai para os vãos entre os cards, que continuam do tamanho do
   próprio conteúdo — esticar os cards para casar altura deixaria um deles com
   um buraco branco dentro. */
.contato-lado { display: grid; gap: 1.15rem; align-content: space-between; }
.canais { list-style: none; display: grid; gap: .65rem; align-content: start; }

/* No celular tudo vira uma coluna só: 'display: contents' dissolve a caixa do
   .contato-lado para que canais, atendimento e formulário fiquem irmãos e
   possam ser reordenados — o WhatsApp primeiro, que é o caminho mais curto. */
@media (max-width: 59.999em) {
  .contato-lado { display: contents; }
  .canais     { order: 1; }
  .horarios   { order: 2; }
  .form-caixa { order: 3; }
  .atende     { order: 4; }
}
.canais a {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color .25s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.canais a:hover {
  border-color: var(--laranja); transform: translateY(-2px);
  box-shadow: 0 18px 40px -26px rgba(27, 23, 18, .35);
}
.canal-ico {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; flex: none;
  border-radius: 12px;
  background: var(--laranja-wash);
  border: 1px solid var(--laranja-edge);
  color: var(--laranja-forte);
}
.canal-ico svg { width: 1.3rem; height: 1.3rem; }
.canal-txt { display: grid; gap: .1rem; min-width: 0; }
.canal-txt strong { font-size: 1rem; font-weight: 700; letter-spacing: -.015em; }
.canal-txt small { font-size: .875rem; color: var(--tinta-3); }
.canais .seta {
  margin-left: auto; flex: none;
  width: 1.1rem; height: 1.1rem;
  fill: none; stroke: var(--tinta-4); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .25s var(--ease), transform .25s var(--ease);
}
.canais a:hover .seta { stroke: var(--laranja-forte); transform: translateX(3px); }

/* O expediente vive em três lugares que não se leem: esta tabela, o
   `expediente` do script.js (que acende o selo) e o
   openingHoursSpecification do JSON-LD. Mudou um, mude os três. */
.horarios {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--radius-xl);
  padding: 1.5rem 1.4rem;
}
.horarios-topo {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .75rem;
  margin-bottom: 1.25rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--linha);
}
.horarios h3 {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: 1.0625rem;
}
.horarios h3 svg {
  width: 1.1rem; height: 1.1rem; flex: none;
  color: var(--laranja-forte);
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.horarios-lista { list-style: none; display: grid; gap: .15rem; font-size: .9375rem; }
.horarios-lista li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem;
  padding: .55rem .7rem;
  margin-inline: -.7rem;
  border-radius: 10px;
  color: var(--tinta-2);
}
.horarios-lista span:first-child { color: var(--tinta-3); }
.horarios-lista strong { font-weight: 700; font-variant-numeric: tabular-nums; }

/* A linha de hoje é a que a pessoa veio conferir: sai do cinza. */
.horarios-lista li.e-hoje {
  background: var(--laranja-wash);
  border: 1px solid var(--laranja-edge);
  padding-block: calc(.55rem - 1px);
}
.horarios-lista li.e-hoje span:first-child { color: var(--tinta); font-weight: 700; }
.horarios-lista li.e-hoje strong { color: var(--laranja-forte); }
.horarios-lista li.e-hoje span:first-child::after {
  content: "hoje";
  margin-left: .5rem; padding: .05rem .4rem;
  border-radius: 999px;
  background: var(--laranja); color: var(--laranja-ink);
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  vertical-align: 1px;
}

/* Card de atendimento — ocupa o lugar que num ponto físico seria o mapa. */
.atende {
  padding: 1.5rem 1.4rem;
  background: var(--laranja-wash);
  border: 1px solid var(--laranja-edge);
  border-radius: var(--radius-xl);
}
.atende h3 {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: 1.0625rem; margin-bottom: 1rem;
}
.atende h3 svg {
  width: 1.2rem; height: 1.2rem; flex: none;
  color: var(--laranja-forte);
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.atende-lista {
  list-style: none;
  display: grid; gap: .7rem;
  font-size: .9375rem;
}
.atende-lista li {
  display: flex; align-items: flex-start; gap: .65rem;
  color: var(--tinta-2);
}
.atende-lista svg {
  width: 1.05rem; height: 1.05rem; flex: none; margin-top: .28rem;
  color: var(--laranja-forte);
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.atende-lista strong { color: var(--tinta); font-weight: 700; }

/* Contato no mesmo sistema do resto: adesivo redondo torto em cada painel,
   nome em Anton, o painel "online" no carvão. ------------------------------ */
.canais a { padding: 1.25rem 1.4rem; border-radius: var(--radius-xl); }
.canal-ico {
  width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 0;
  background: var(--verde-claro); color: var(--tinta);
  transform: rotate(-6deg);
}
.canais li:nth-child(2) .canal-ico { background: var(--rosa-claro); transform: rotate(5deg); }
.canal-txt strong {
  font-family: var(--font-poster); font-weight: 400;
  font-size: 1.35rem; letter-spacing: .01em; line-height: 1.05;
  text-transform: uppercase;
}
.horarios h3, .atende h3 {
  font-family: var(--font-poster); font-weight: 400;
  font-size: 1.45rem; letter-spacing: .01em; line-height: 1.05;
  text-transform: uppercase;
  gap: .75rem;
}
/* Mesmo disco dos canais (2,9rem), ícone de 1,3rem dentro. */
.horarios h3 svg, .atende h3 svg {
  width: 2.9rem; height: 2.9rem; padding: .8rem; flex: none;
  border-radius: 50%;
  background: var(--ambar); color: var(--tinta);
  transform: rotate(-6deg);
}
.horarios-lista li.e-hoje { background: var(--ambar); border: 0; padding-block: .55rem; }
.horarios-lista li.e-hoje strong { color: var(--tinta); }
.horarios-lista li.e-hoje span:first-child::after { background: var(--tinta); color: var(--ambar); }
.atende { background: var(--carvao-2); border-color: var(--carvao-borda); color: var(--hero-txt); }
.atende h3 svg { background: var(--azul-claro); transform: rotate(6deg); }
.atende-lista li { color: var(--hero-txt-2); }
.atende-lista strong { color: var(--hero-txt); }
.atende-lista svg { color: var(--verde-claro); }
.atende :focus-visible { outline-color: var(--laranja-claro); }
/* --------------------------------------------------------------------------
   16 · Formulário
   Não há back-end: o script monta a mensagem e abre o WhatsApp. Por isso o
   único campo obrigatório é o nome — o resto se resolve na conversa.
   -------------------------------------------------------------------------- */
.form-caixa {
  position: relative;
  padding: clamp(1.4rem, 4vw, 1.85rem);
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--radius-xl);
}
/* O formulário estica para ocupar o card inteiro e a folga vira respiro
   entre os campos. A altura do card é ditada pela coluna da esquerda, que é
   mais alta; sem isto sobrava um vazio embaixo do último campo. */
.form { display: grid; gap: 1rem; }
.form-adesivo {
  position: absolute; top: -1.2rem; right: 1.6rem;
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: var(--rosa-claro); color: var(--tinta);
  box-shadow: 0 0 0 3px var(--papel);
  transform: rotate(8deg);
}
.form-adesivo svg {
  width: 1.3rem; height: 1.3rem;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.campo { display: grid; gap: .4rem; }

/* Dois campos por linha onde eles são curtos — nome/empresa e telefone/e-mail.
   Abaixo de 30em cada um volta a ocupar a linha inteira: espremidos, o
   placeholder não cabe e o dedo erra o alvo. */
.campo-par { display: grid; gap: 1rem; }
@media (min-width: 30em) {
  .campo-par { grid-template-columns: 1fr 1fr; }
}

/* O asterisco é enfeite: quem avisa a tecnologia assistiva que o campo é
   obrigatório é o atributo required, não este caractere. Daí o aria-hidden
   no HTML. */
.obrig { color: var(--laranja-forte); font-style: normal; }
.campo label {
  font-size: .875rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--tinta);
}
.campo label span { font-weight: 500; color: var(--tinta-3); }

.campo input,
.campo select {
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--linha-2);
  border-radius: var(--radius);
  background: var(--papel);
  font: inherit; font-size: .9375rem; color: var(--tinta);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
/* Placeholder com contraste AA (4,6:1): a tinta translúcida dava 2,9:1. */
.campo input::placeholder { color: #66707E; }
/* Anel cheio, não translúcido: é o indicador de foco de quem navega por
   teclado, e a 12% de alfa ele sumia no papel. */
.campo input:focus,
.campo select:focus {
  outline: none;
  border-color: var(--laranja);
  box-shadow: 0 0 0 3px var(--laranja);
}

/* O select nativo traz a seta do sistema, que muda de desenho em cada
   plataforma: appearance:none tira a dele e o chevron abaixo entra no lugar. */
.campo-select { position: relative; display: grid; }
.campo-select select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
}
.campo-seta {
  position: absolute; right: 1rem; top: 50%;
  transform: translateY(-50%);
  width: 1.05rem; height: 1.05rem; pointer-events: none;
  fill: none; stroke: var(--tinta-3); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Caixa de aceite: o alvo de toque é o rótulo inteiro, não só o quadradinho. */
.campo-aceite {
  display: flex; align-items: flex-start; gap: .7rem;
  margin-top: .25rem;
  font-size: .875rem; line-height: 1.45; color: var(--tinta-2);
  cursor: pointer;
}
.campo-aceite input {
  width: 1.15rem; height: 1.15rem; flex: none; margin-top: .1rem;
  accent-color: var(--laranja-forte);
  cursor: pointer;
}
.campo-aceite.tem-erro,
.campo-aceite:has(input.tem-erro) { color: var(--laranja-fundo); }

/* Campo que faltou: borda e halo na cor da marca. Nunca só a cor — o recado
   em texto aparece junto, logo abaixo do botão, e o foco vai para o campo. */
.campo input.tem-erro,
.campo select.tem-erro {
  border-color: var(--laranja-forte);
  box-shadow: 0 0 0 4px var(--laranja-wash);
}
.campo-aceite input.tem-erro { outline: 2px solid var(--laranja-forte); outline-offset: 3px; }

.form-nota { font-size: .8125rem; color: var(--tinta-3); }
.form-erro {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .8rem 1rem;
  border-radius: 14px;
  background: var(--laranja-wash);
  border: 1px solid var(--laranja-edge);
  font-size: .875rem; font-weight: 600; color: var(--laranja-fundo);
}
.form-ok {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  background: rgba(37, 211, 102, .10);
  border: 1px solid rgba(37, 211, 102, .40);
  font-size: .875rem; color: var(--tinta-2);
}
.form-ok svg {
  width: 1.05rem; height: 1.05rem; flex: none; margin-top: .2rem;
  color: #0B7A38;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   17 · CTA final e rodapé
   -------------------------------------------------------------------------- */
/* Fecha no carvão, não no laranja. O motivo é a marca: a seta da logo é
   laranja e sumia na faixa laranja — e resolver isso com um cartão branco
   atrás dela era remendo. No escuro entra a versão branca da assinatura, que
   existe exatamente para isto, e o botão laranja vira o ponto mais forte da
   página inteira. */
.cta-band {
  position: relative;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--carvao);
  color: var(--hero-txt);
}
/* Um halo laranja no topo tira o chapado do carvão — e desce devagar
   enquanto a faixa passa, para a luz não ficar carimbada. */
.cta-band { --p: 0; }
.cta-band::before {
  content: ""; position: absolute; inset: -15% 0; z-index: -1;
  background: radial-gradient(46rem 26rem at 50% 0%, rgba(242, 106, 27, .34), transparent 70%);
  transform: translate3d(0, calc(var(--p) * 80px), 0);
}
.cta-marca {
  display: block; width: clamp(8.5rem, 23vw, 11.5rem);
  margin: 0 auto 1.9rem;
}
/* A marca vira ao entrar: é o fecho da página repetindo, em miniatura, o
   gesto que o manifesto fez por extenso. */
.js .cta-marca.is-in { animation: viradaMarca 1.1s var(--ease-out) .1s both; }
@keyframes viradaMarca {
  from { transform: perspective(800px) rotateY(-75deg) scale(.9); opacity: 0; }
  to   { transform: perspective(800px) rotateY(0deg)   scale(1);  opacity: 1; }
}
.cta-title {
  font-family: var(--font-poster); font-weight: 400;
  font-size: clamp(2.8rem, 10vw, 6.5rem);
  line-height: 1.14; letter-spacing: .005em; text-transform: uppercase;
  margin: 0 auto 1.25rem;
  color: var(--hero-txt);
}
.cta-title .linha { display: block; }
.cta-title em { color: var(--laranja-claro); font-style: normal; }
.cta-title .azul { color: var(--azul-claro); }
.cartaz-cta { margin: 0 auto; }
.cartaz-cta .adesivo { font-size: clamp(2.8rem, 10vw, 6.5rem); }
.cartaz-cta .ad-mais svg { fill: var(--azul-claro); }
.cartaz-cta .ad-brilho svg { fill: var(--verde-claro); }
.cartaz-cta .ad-brilho { right: -.6em; top: .15em; }
.cartaz-cta .ad-carinha { right: -.85em; top: 1.15em; }
.cartaz-cta .ad-asterisco svg { fill: var(--rosa-claro); }
/* No celular o asterisco caía em cima do parágrafo abaixo do título (a
   carinha já some pela regra geral dos adesivos). */
@media (max-width: 47.999em) { .cartaz-cta .ad-asterisco { display: none; } }
.cta-band .section-lead { color: var(--hero-txt-2); margin-inline: auto; }
.cta-actions { margin-top: 2rem; display: grid; gap: .75rem; }
@media (min-width: 34em) {
  .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; }
}
.cta-nota { margin-top: 1.35rem; font-size: .875rem; color: rgba(255, 246, 239, .62); }

.site-footer {
  border-top: 1px solid var(--carvao-borda);
  padding-block: 1.75rem 1.5rem;
  background: var(--carvao);
  color: var(--hero-txt);
  font-size: .9375rem;
}
.site-footer :focus-visible { outline-color: var(--laranja-claro); }

/* Uma faixa só: marca, atalhos e redes. O rodapé não repete o site — os
   links que já estão no topo e nos canais não voltam aqui. */
.footer-topo {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1.25rem 2rem;
}
.footer-marca { display: inline-flex; }
.footer-marca img { height: 1.5rem; width: auto; }

.footer-nav { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; }
.footer-nav a { color: var(--hero-txt-2); text-decoration: none; }
.footer-nav a:hover { color: var(--laranja-claro); }

.footer-social { display: flex; gap: .5rem; }
.footer-social a {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid rgba(255, 246, 239, .28); border-radius: 50%;
  color: var(--hero-txt-2);
  transition: color .2s var(--ease), border-color .2s var(--ease),
              background-color .2s var(--ease);
}
.footer-social a:hover { color: var(--laranja-claro); border-color: var(--laranja); background: rgba(242, 106, 27, .16); }
.footer-social svg { width: 1rem; height: 1rem; }

.footer-fim {
  margin-top: 1.35rem; padding-top: 1rem;
  border-top: 1px solid var(--carvao-borda);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between;
  color: rgba(255, 246, 239, .62); font-size: .8125rem;
}
.footer-fim a { color: var(--hero-txt-2); }

/* --------------------------------------------------------------------------
   17b · Celular mais curto
   A 400px a página passava de 13 mil pixels: quinze telas. O que corta sem
   tirar conteúdo: menos ar entre seções, painéis mais justos, o portfólio
   deslizando de lado (um case por vez, com o dedo) e o painel "online" fora
   — o hero já diz que a agência atende o Brasil inteiro.
   -------------------------------------------------------------------------- */
@media (max-width: 45.999em) {
  .section { padding-block: 3rem; }
  .section-head { margin-bottom: 1.75rem; }
  .atende { display: none; }

  /* Uma fileira só, deslizando com o dedo: cases, serviços e vantagens.
     scroll-snap nativo; o script só faz a fileira andar sozinha. A lista
     sangra até a borda da tela para o próximo card aparecer, e o respiro em
     cima é para o adesivo redondo, que fica fora do card, não ser cortado
     pelo overflow. */
  .projetos, .servicos, .vantagens {
    display: flex; gap: .85rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--shell-pad));
    padding: 1.5rem var(--shell-pad) .5rem;
    /* Sem isto o snap encosta o card na borda da tela, ignorando o respiro. */
    scroll-padding-inline: var(--shell-pad);
    scrollbar-width: none;
  }
  .projetos::-webkit-scrollbar, .servicos::-webkit-scrollbar, .vantagens::-webkit-scrollbar { display: none; }
  .projetos > li, .servicos > li, .vantagens > li { flex: 0 0 82%; scroll-snap-align: start; }
  /* Com o script rodando a fileira vira esteira: o snap sairia brigando com
     o movimento contínuo. */
  .esteira { scroll-snap-type: none; }
  /* Sem formulário no celular: quem chega pelo celular toca no WhatsApp; seis
     campos eram 700px de atrito. O card do WhatsApp já pede o contexto na
     mensagem. Tudo que aponta para o formulário some junto (.so-desktop). */
  .form-caixa, .so-desktop { display: none !important; }
  /* FAQ no celular: só as três que decidem (preço, prazo, como começar).
     As outras ficam no HTML — o rich snippet de FAQ lê todas. */
  .faq li:nth-child(3), .faq li:nth-child(4), .faq li:nth-child(5) { display: none; }
  /* As marcas também: uma linha só, sangrando até a borda, como esteira. */
  .marcas-lista {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--shell-pad));
    padding-inline: var(--shell-pad);
    scrollbar-width: none;
  }
  .marcas-lista::-webkit-scrollbar { display: none; }
  .vantagem { padding: 1.6rem 1.25rem 1.25rem; }
  .servico  { padding: 1.7rem 1.3rem 1.3rem; }
}
/* Os clones da esteira só existem para o laço do celular fechar; em tela
   larga a grade voltaria com tudo em dobro. */
@media (min-width: 46em) { [data-clone] { display: none; } }

/* --------------------------------------------------------------------------
   18 · Botão flutuante do WhatsApp
   -------------------------------------------------------------------------- */
.wa-fab {
  position: fixed; z-index: 90;
  right: clamp(.9rem, 4vw, 1.6rem);
  bottom: calc(clamp(.9rem, 4vw, 1.6rem) + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: var(--wa); color: var(--wa-ink);
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgba(27, 23, 18, .45), 0 2px 6px rgba(27, 23, 18, .18);
  transition: transform .3s var(--ease-out), opacity .3s var(--ease);
}
/* Centro por grid E por margem: cinto e suspensório, para o ícone não
   depender de line-height herdado em nenhum motor. */
.wa-fab { padding: 0; line-height: 0; }
.wa-fab .ico { width: 1.7rem; height: 1.7rem; margin: auto; fill: currentColor; flex: none; }
.wa-fab:hover { background: var(--wa-lit); }
/* visibility junto do opacity: escondido de verdade, sem virar parada de
   tabulação invisível. */
.js .wa-fab {
  opacity: 0; visibility: hidden;
  transform: translateY(140%) scale(.9); pointer-events: none;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease), visibility 0s .3s;
}
.js .wa-fab.is-visible {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease), visibility 0s;
}
/* Na seção de contato os canais já estão na tela: o flutuante recua para não
   cobrir o próprio botão do WhatsApp. */
.js body[data-contato-visivel="1"] .wa-fab {
  opacity: 0; visibility: hidden;
  transform: translateY(140%) scale(.9); pointer-events: none;
}

/* --------------------------------------------------------------------------
   Aviso de cookies
   Uma barra no pé da tela, não um modal: ninguém precisa responder para ler a
   página. Nasce escondida e só aparece quando ainda não existe resposta
   guardada — quem já escolheu não vê de novo.

   "Só os essenciais" e "Aceitar" têm o mesmo peso visual de propósito: a LGPD
   pede que recusar seja tão fácil quanto aceitar, e negar escondido atrás de
   um link miúdo não cumpre isso.

   Os botões reusam o .btn do próprio site — o aviso não traz identidade
   própria, ele veste a da casa. Por isso aqui só existem as medidas; as cores
   vêm dos tokens logo abaixo.
   -------------------------------------------------------------------------- */
.cookie-aviso {
  --ck-fundo: var(--papel);
  --ck-tinta: var(--tinta);
  --ck-apoio: var(--tinta-2);
  --ck-borda: var(--linha-2);

  position: fixed; z-index: 110;
  left: 0; right: 0;
  bottom: env(safe-area-inset-bottom, 0px);
  padding: clamp(.75rem, 3vw, 1.15rem) var(--shell-pad);
  /* A barra ocupa a largura toda para centralizar a caixa, mas só a caixa
     recebe clique: sem isto a faixa transparente das laterais engoliria o
     toque em quem está lendo atrás dela. */
  pointer-events: none;
}
.cookie-caixa {
  pointer-events: auto;
  width: 100%; max-width: var(--shell);
  margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .85rem 1.5rem;
  padding: 1rem 1.15rem;
  background: var(--ck-fundo);
  border: 1px solid var(--ck-borda);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 50px -22px rgba(0, 0, 0, .45);
}
.cookie-txt {
  flex: 1 1 20rem; min-width: 0;
  font-size: .875rem; line-height: 1.5; color: var(--ck-apoio);
}
.cookie-txt strong { color: var(--ck-tinta); font-weight: 700; }

.cookie-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Onde a caixa já quebrou em duas linhas os botões esticam para a linha
   inteira: com a largura do próprio texto, "Só os essenciais" e "Aceitar"
   ficavam de tamanhos diferentes e desalinhados um sob o outro. */
@media (max-width: 33.999em) {
  .cookie-acoes { width: 100%; }
  .cookie-acoes .btn { flex: 1 1 0; }
}

/* Entra deslizando de baixo. O estado escondido é o padrão: sem script a
   barra nunca aparece — quem a revela é o script.js, que é também quem sabe
   se já houve resposta. Some junto o `hidden` do HTML, para ela não ficar
   como parada de tabulação invisível antes da hora. */
.cookie-caixa {
  transform: translateY(120%);
  opacity: 0;
  transition: transform .35s var(--ease-out), opacity .3s var(--ease);
}
.cookie-aviso.esta-visivel .cookie-caixa { transform: none; opacity: 1; }

/* Sem JavaScript o botão de enviar some: o <noscript> ao lado aponta os
   números. */
.no-js .form-enviar { display: none; }


/* --------------------------------------------------------------------------
   19 · Sistema de movimento — "a virada"

   A página inteira se mexe a partir de uma ideia só, que é o nome da agência:
   virar. Nada aqui desliza de lado nem pisca; tudo entra girando um pouco no
   próprio eixo, como uma placa que se volta para quem chega. É o que separa
   este site de uma landing com animação de prateleira — o movimento fala a
   mesma coisa que o texto.

   São três mecanismos, e o script tem exatamente os mesmos três:

     1 · ENTRADA   — .reveal + .is-in. Definido aqui embaixo. A cascata sai do
                     --i que o script escreve nos filhos de [data-cascata].
     2 · PROGRESSO — --p (e --ato1..N) escritos pelo script durante a rolagem.
                     Usados no hero (paralaxe de três camadas), na cena "Da
                     dispersão à referência" (três atos) e nos brilhos do
                     manifesto e do CTA. Ficam junto de cada seção, porque só
                     fazem sentido lá.
     3 · REAÇÃO    — hover e ponteiro: ícones que guinam, cartões que inclinam.
                     Também ficam junto de cada componente.

   O giro completo é reservado: só a palavra "virar" do manifesto e a marca do
   CTA dão a volta inteira. Repetido em tudo, o gesto viraria tique.
   -------------------------------------------------------------------------- */
/* A entrada: sobe, aparece e se endireita. O rotateX de 7° é pequeno de
   propósito — o suficiente para ler como uma virada, não como um cartão
   caindo na tela. A perspectiva vai dentro do próprio transform para não
   precisar preparar o pai de cada elemento animado. */
.js .reveal {
  opacity: 0;
  transform: perspective(900px) translateY(20px) rotateX(7deg);
  transform-origin: center top;
}
.js .reveal.is-in {
  opacity: 1;
  transform: perspective(900px) translateY(0) rotateX(0deg);
  transition: opacity .7s var(--ease-out), transform .75s var(--ease-out);
  /* A cascata automática das grades. Sem [data-cascata] o --i não existe, o
     atraso é zero e o elemento entra na hora. */
  transition-delay: calc(var(--i, 0) * 85ms);
}

/* Sequências escritas à mão, onde a ordem é uma escolha e não uma grade:
   o hero e a coluna de contato. Vêm depois da regra do --i de propósito —
   mesma especificidade, então quem fica por último é quem manda. */
.js .reveal-1.is-in { transition-delay: .06s; }
.js .reveal-2.is-in { transition-delay: .12s; }

/* --------------------------------------------------------------------------
   20 · Preferências do sistema
   -------------------------------------------------------------------------- */
/* Quem pediu menos movimento não recebe menos página: recebe a mesma página
   parada. O motor do script nem liga nesse caso, então --p fica no 0 que está
   declarado em cada cena e os atos da ilustração ficam no 1 — ou seja, hero
   sem paralaxe e desenho já completo. Aqui só se apagam as transições e as
   animações que sobrariam. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .fluxo-palco { height: auto; }
  .js .fluxo { position: static; height: auto; }
}

@media print {
  .site-header, .wa-fab, .cta-band, .hero-brilho { display: none; }
  body { background: #fff; color: #000; }
}