/* =========================================================================
   Elt Digital — folha unica
   Camadas conforme specs/site.md §10. Todo valor vem da camada `tokens`.
   ========================================================================= */

@layer tokens, base, components, sections, utilities;

/* ============================ FONTES ==================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 200 600;
  font-stretch: 112%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 200 600;
  font-stretch: 112%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fallbacks metricamente ajustados — contem o salto de layout do `swap`. */
@font-face {
  font-family: "Inter-fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo-fallback";
  src: local("Arial");
  size-adjust: 103%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ============================ TOKENS ==================================== */

@layer tokens {
  :root {
    /* Verde-petroleo — amostrado do mockup da marca */
    --elt-900: #001a19;
    --elt-850: #00211f;
    --elt-800: #002523;
    --elt-750: #002a27;
    --elt-700: #012d2b;
    --elt-600: #003c39;
    --elt-500: #00524f;
    --elt-400: #00968e;

    /* Acento ciano */
    --ciano: #02fff4;
    --ciano-hover: #00d6cd;
    --ciano-12: rgba(2, 255, 244, 0.12);
    --ciano-24: rgba(2, 255, 244, 0.24);

    /* Neutros */
    --branco: #ffffff;
    --claro-1: #f4f8f7;
    --linha-clara: #e3edec;
    --linha-escura: rgba(255, 255, 255, 0.1);

    /* Texto */
    --texto-escuro-forte: #ffffff;
    --texto-escuro-suave: #7a9c99;
    --texto-escuro-suave-2: #8fadaa;
    --texto-claro-forte: #012d2b;
    --texto-claro-suave: #4f6664;
    /* Recuado, mas legivel: #8C9D9C do mockup da so 2.83:1 sobre branco e
       reprova AA em 11px. Este valor mantem a hierarquia com 4.80:1. */
    --numero-claro: #637674;

    /* Contexto — reescrito por .sec--claro / .sec--escuro */
    --cor-foco: var(--ciano);
    --cor-acento-ctx: var(--ciano);

    /* Tipografia */
    --fonte-titulo: "Archivo", "Archivo-fallback", system-ui, sans-serif;
    --fonte-corpo: "Inter", "Inter-fallback", system-ui, -apple-system, sans-serif;

    --t-display: clamp(2.75rem, 7vw, 6rem);
    --t-h2: clamp(2rem, 5vw, 4rem);
    --t-h3: clamp(1.5rem, 3vw, 2.25rem);
    --t-h4: clamp(1.125rem, 2vw, 1.375rem);
    --t-body-lg: clamp(1rem, 1.4vw, 1.125rem);
    --t-body: 1rem;
    --t-body-sm: 0.9375rem;
    --t-label: 0.75rem;
    --t-micro: 0.6875rem;
    --t-metrica: clamp(2rem, 4vw, 3rem);

    /* Espacos */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;
    --sp-10: 128px;
    --sp-11: 160px;

    /* Layout */
    --largura-max: 1240px;
    --gutter: clamp(20px, 5vw, 72px);
    --pad-secao: clamp(80px, 10vw, 160px);
    --h-header: 72px;

    /* Raios */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-pill: 999px;

    /* Sombras */
    --sombra-card: 0 1px 2px rgba(1, 45, 43, 0.04), 0 8px 24px rgba(1, 45, 43, 0.06);
    --brilho-ciano: 0 0 40px rgba(2, 255, 244, 0.18);

    /* Movimento */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-rapida: 160ms;
    --dur-padrao: 280ms;
    --dur-lenta: 520ms;
  }

  @media (min-width: 1024px) {
    :root {
      --h-header: 88px;
    }
  }
}

/* ============================= BASE ===================================== */

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

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--h-header) + var(--sp-4));
  }

  body {
    font-family: var(--fonte-corpo);
    font-size: var(--t-body);
    line-height: 1.65;
    color: var(--texto-escuro-forte);
    background: var(--elt-700);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  body.is-travado {
    overflow: hidden;
  }

  img,
  svg,
  picture {
    display: block;
    max-width: 100%;
  }

  img {
    height: auto;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  button {
    background: none;
    border: 0;
    cursor: pointer;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul,
  ol {
    list-style: none;
    padding: 0;
  }

  /* Assinatura tipografica da marca — nao flexibilizar. */
  h1,
  h2,
  h3,
  .titulo {
    font-family: var(--fonte-titulo);
    font-weight: 200;
    font-stretch: 112%;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--t-display);
    line-height: 1.05;
  }

  h2 {
    font-size: var(--t-h2);
  }

  h3 {
    font-size: var(--t-h3);
    font-weight: 300;
    line-height: 1.15;
  }

  /* Titulos de card usam a fonte de corpo — nao seguem a assinatura. */
  h4 {
    font-family: var(--fonte-corpo);
    font-size: var(--t-h4);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
  }

  p {
    max-width: 60ch;
    text-wrap: pretty;
  }

  :focus-visible {
    outline: 2px solid var(--cor-foco);
    outline-offset: 2px;
    border-radius: var(--r-xs);
  }

  ::selection {
    background: var(--ciano);
    color: var(--elt-700);
  }
}

/* =========================== COMPONENTES ================================ */

@layer components {
  /* --- Estrutura ------------------------------------------------------- */

  .container {
    width: 100%;
    max-width: var(--largura-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .secao {
    padding-block: var(--pad-secao);
    position: relative;
  }

  .sec--claro {
    background: var(--branco);
    color: var(--texto-claro-forte);
    --cor-foco: var(--elt-400);
    --cor-acento-ctx: var(--elt-400);
  }

  .sec--claro p {
    color: var(--texto-claro-suave);
  }

  .sec--escuro {
    background: var(--elt-700);
    color: var(--texto-escuro-forte);
    --cor-foco: var(--ciano);
    --cor-acento-ctx: var(--ciano);
  }

  .sec--escuro p {
    color: var(--texto-escuro-suave);
  }

  /* Destaque cromatico da segunda metade dos titulos.
     Cobre h1/h2/h3 diretamente — nao depende da classe .titulo estar presente. */
  :is(h1, h2, h3, .titulo) em {
    font-style: normal;
    color: var(--cor-acento-ctx);
  }

  /* Titulo de card: mantem o nivel semantico (h3) com o estilo de card. */
  .card__titulo {
    font-family: var(--fonte-corpo);
    font-size: var(--t-h4);
    font-weight: 600;
    font-stretch: normal;
    line-height: 1.35;
    letter-spacing: -0.005em;
    text-transform: none;
    color: var(--texto-claro-forte);
  }

  .skip-link {
    position: absolute;
    left: var(--sp-4);
    top: var(--sp-4);
    z-index: 200;
    padding: var(--sp-3) var(--sp-5);
    background: var(--ciano);
    color: var(--elt-700);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--r-sm);
    transform: translateY(-200%);
    transition: transform var(--dur-padrao) var(--ease);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }

  /* --- Rotulos --------------------------------------------------------- */

  .eyebrow {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cor-acento-ctx);
    margin-bottom: var(--sp-5);
  }

  .eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    background: currentColor;
    flex: none;
  }

  .selo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ciano);
    background: var(--ciano-12);
    border: 1px solid var(--ciano-24);
    border-radius: var(--r-pill);
  }

  .selo::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ciano);
    flex: none;
  }

  .tag {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 6px 12px;
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texto-claro-suave);
    border: 1px solid var(--linha-clara);
    border-radius: var(--r-pill);
  }

  .tag::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--elt-400);
    flex: none;
  }

  .tag--escura {
    color: var(--texto-escuro-suave-2);
    border-color: var(--elt-500);
  }

  .tag--escura::before {
    background: var(--ciano);
  }

  .lista-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
  }

  .numero-card {
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--numero-claro);
    font-variant-numeric: tabular-nums;
  }

  .divisor {
    height: 1px;
    background: var(--linha-clara);
    border: 0;
  }

  .sec--escuro .divisor {
    background: var(--linha-escura);
  }

  /* --- Botoes ---------------------------------------------------------- */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 16px 28px;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    transition: background-color var(--dur-padrao) var(--ease),
      border-color var(--dur-padrao) var(--ease),
      color var(--dur-padrao) var(--ease),
      transform var(--dur-padrao) var(--ease),
      box-shadow var(--dur-padrao) var(--ease);
  }

  .btn .icone {
    width: 16px;
    height: 16px;
    flex: none;
    transition: transform var(--dur-padrao) var(--ease);
  }

  .btn:hover .icone,
  .btn:focus-visible .icone {
    transform: translateX(4px);
  }

  .btn:active {
    transform: translateY(0);
    box-shadow: none;
  }

  .btn--primario {
    background: var(--ciano);
    color: var(--elt-700);
  }

  .btn--primario:hover {
    background: var(--ciano-hover);
    transform: translateY(-1px);
    box-shadow: var(--brilho-ciano);
  }

  .btn--secundario {
    background: var(--elt-700);
    color: var(--branco);
  }

  .btn--secundario:hover {
    background: var(--elt-600);
    transform: translateY(-1px);
  }

  .btn--fantasma {
    background: transparent;
    color: var(--branco);
    border-color: var(--elt-500);
  }

  .btn--fantasma:hover {
    border-color: var(--ciano);
    color: var(--ciano);
  }

  .btn--bloco {
    width: 100%;
  }

  .link-seta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--t-body-sm);
    font-weight: 600;
    color: var(--cor-acento-ctx);
    transition: gap var(--dur-padrao) var(--ease);
  }

  .link-seta .icone {
    width: 16px;
    height: 16px;
    flex: none;
    transition: transform var(--dur-padrao) var(--ease);
  }

  .link-seta:hover .icone,
  .link-seta:focus-visible .icone {
    transform: translateX(4px);
  }

  /* Variante que aponta para baixo: reaproveita o mesmo simbolo girado, em vez
     de acrescentar um icone so para isto. */
  .link-seta--baixo .icone {
    transform: rotate(90deg);
  }

  .link-seta--baixo:hover .icone,
  .link-seta--baixo:focus-visible .icone {
    transform: rotate(90deg) translateX(4px);
  }

  .form__microcopy {
    margin-top: var(--sp-4);
    font-size: var(--t-body-sm);
    color: var(--texto-escuro-suave-2);
  }

  /* Bloco de acao da secao de contato. A captacao acontece no YayForms, entao
     aqui fica o botao que leva para la, nao mais o formulario. */
  .contato__acao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  /* --- Cabecalho ------------------------------------------------------- */

  .cabecalho {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: var(--h-header);
    display: flex;
    align-items: center;
    transition: background-color var(--dur-padrao) var(--ease),
      backdrop-filter var(--dur-padrao) var(--ease);
  }

  .cabecalho.is-fixo {
    background: rgba(1, 45, 43, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .cabecalho__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
  }

  /* Marca: ondas + ELT / DIGITAL */
  .marca {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    flex: none;
    min-height: 44px;
  }

  .marca__ondas {
    width: 30px;
    height: 20px;
    flex: none;
    --b-ease: var(--ease);
  }

  /* Efeito "onda": um pulso de ciano percorre os tres tracos, escalonado.
     A 30x20px, deslocar geometria seria sub-pixel — o que le nesse tamanho e
     luminancia. As variaveis --b-* atravessam para dentro do <use> por heranca
     de custom property; a regra que as consome vive no proprio sprite.svg. */
  .marca:hover .marca__ondas,
  .marca:focus-visible .marca__ondas {
    --b-op: 1;
    /* O traco mede 319 unidades e o pulso 70 (mais 5 de ponta arredondada em
       cada lado). Sair em -330 faz a varredura inteira ser util: terminar mais
       longe gastaria parte da duracao com o pulso ja fora do traco. */
    --b-off: -330;
    --b-dur: var(--dur-lenta);
    --b-atraso-2: 70ms;
    --b-atraso-3: 140ms;
  }

  @media (prefers-reduced-motion: reduce) {
    .marca:hover .marca__ondas,
    .marca:focus-visible .marca__ondas {
      --b-op: 0;
    }
  }

  .marca__texto {
    display: flex;
    flex-direction: column;
    line-height: 1;
  }

  .marca__nome {
    font-family: var(--fonte-titulo);
    font-weight: 200;
    font-stretch: 112%;
    font-size: 1.125rem;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    color: var(--branco);
  }

  .marca__sufixo {
    font-family: var(--fonte-titulo);
    font-weight: 200;
    font-stretch: 112%;
    font-size: 0.5rem;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    color: var(--texto-escuro-suave);
    margin-top: 2px;
  }

  /* --- Navegacao ------------------------------------------------------- */

  .nav {
    display: none;
  }

  .nav__lista {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
  }

  .nav__link {
    position: relative;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--branco);
    padding-block: var(--sp-2);
    transition: color var(--dur-rapida) var(--ease);
  }

  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: var(--ciano);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-rapida) var(--ease);
  }

  .nav__link:hover,
  .nav__link[aria-current="true"] {
    color: var(--ciano);
  }

  .nav__link:hover::after,
  .nav__link[aria-current="true"]::after {
    transform: scaleX(1);
  }

  .cabecalho__cta {
    display: none;
  }

  .hamburguer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    color: var(--branco);
    border-radius: var(--r-sm);
  }

  .hamburguer .icone {
    width: 24px;
    height: 24px;
  }

  /* --- Drawer mobile --------------------------------------------------- */

  .drawer {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: flex;
    flex-direction: column;
    padding: var(--sp-5) var(--gutter) var(--sp-8);
    background: var(--elt-850);
    transform: translateX(100%);
    visibility: hidden;
    /* Ao FECHAR, `visibility` so muda depois que o deslize termina.
       Ao ABRIR (regra seguinte) ela muda em 0s — senao o drawer continua
       nao-focavel no primeiro quadro e o foco nao consegue entrar nele. */
    transition: transform var(--dur-padrao) var(--ease),
      visibility 0s linear var(--dur-padrao);
  }

  .drawer.is-aberto {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--dur-padrao) var(--ease), visibility 0s;
  }

  .drawer__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: calc(var(--h-header) - var(--sp-5));
  }

  .drawer__lista {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-8);
  }

  .drawer__link {
    display: block;
    padding: var(--sp-4) 0;
    font-family: var(--fonte-titulo);
    font-weight: 200;
    font-stretch: 112%;
    font-size: 1.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--branco);
    border-bottom: 1px solid var(--linha-escura);
    transition: color var(--dur-rapida) var(--ease);
  }

  .drawer__link:hover,
  .drawer__link[aria-current="true"] {
    color: var(--ciano);
  }

  .drawer__cta {
    margin-top: auto;
    padding-top: var(--sp-7);
  }

  /* --- Marquee de logos ------------------------------------------------ */

  .marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }

  .marquee__trilha {
    display: flex;
    width: max-content;
    animation: desliza 40s linear infinite;
  }

  .marquee:hover .marquee__trilha,
  .marquee:focus-within .marquee__trilha {
    animation-play-state: paused;
  }

  .marquee__grupo {
    display: flex;
    align-items: center;
    gap: clamp(var(--sp-7), 6vw, var(--sp-9));
    padding-right: clamp(var(--sp-7), 6vw, var(--sp-9));
    flex: none;
  }

  .marquee__item {
    font-size: var(--t-body-sm);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--texto-escuro-suave);
    opacity: 0.7;
    white-space: nowrap;
    transition: opacity var(--dur-padrao) var(--ease),
      color var(--dur-padrao) var(--ease);
  }

  .marquee__item:hover {
    opacity: 1;
    color: var(--branco);
  }

  /* Logos de clientes. specs/design.md §8: monocromaticos em --texto-escuro-suave,
     70% de opacidade indo a 100% no hover, altura normalizada em 28px, nunca em
     cor original. Os PNG sao mascaras de alfa: a cor vem do token via
     `background-color`, entao nao existe cor de cliente embutida no arquivo. */
  .marquee__logo {
    height: 28px;
    flex: none;
    background-color: var(--texto-escuro-suave);
    opacity: 0.7;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: opacity var(--dur-padrao) var(--ease);
  }

  .marquee__logo:hover {
    opacity: 1;
  }

  .marquee__logo--andrade {
    aspect-ratio: 377 / 112;
    -webkit-mask-image: url("../img/clientes/andrade-alves.png");
    mask-image: url("../img/clientes/andrade-alves.png");
  }

  .marquee__logo--nvj {
    aspect-ratio: 438 / 112;
    -webkit-mask-image: url("../img/clientes/nvj.png");
    mask-image: url("../img/clientes/nvj.png");
  }

  .marquee__logo--caroline {
    aspect-ratio: 651 / 112;
    -webkit-mask-image: url("../img/clientes/caroline-ramos.png");
    mask-image: url("../img/clientes/caroline-ramos.png");
  }

  .marquee__logo--karla {
    aspect-ratio: 743 / 112;
    -webkit-mask-image: url("../img/clientes/karla-facchini.png");
    mask-image: url("../img/clientes/karla-facchini.png");
  }

  @keyframes desliza {
    to {
      transform: translateX(-50%);
    }
  }

  /* --- Cards ----------------------------------------------------------- */

  .card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-6);
    background: var(--branco);
    border: 1px solid var(--linha-clara);
    border-radius: var(--r-md);
    transition: transform var(--dur-padrao) var(--ease),
      border-color var(--dur-padrao) var(--ease),
      box-shadow var(--dur-padrao) var(--ease);
  }

  .card:hover {
    transform: translateY(-2px);
    border-color: var(--elt-400);
    box-shadow: var(--sombra-card);
  }

  .card__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
  }

  .card__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    background: rgba(0, 150, 142, 0.08);
    border-radius: var(--r-xs);
    color: var(--elt-400);
  }

  .card__icone .icone {
    width: 20px;
    height: 20px;
  }

  .card__texto {
    font-size: var(--t-body-sm);
    color: var(--texto-claro-suave);
    flex: 1;
  }

  .card .lista-tags {
    margin-top: auto;
    padding-top: var(--sp-2);
  }

  /* --- Formulario ------------------------------------------------------ */

  .campo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }

  .campo__rotulo {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texto-escuro-suave-2);
  }

  .campo__rotulo[data-opcional]::after {
    content: " (opcional)";
    color: var(--texto-escuro-suave);
    letter-spacing: 0.06em;
    text-transform: none;
    font-weight: 400;
  }

  .campo__controle {
    width: 100%;
    min-height: 48px;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--t-body);
    color: var(--branco);
    background: var(--elt-700);
    border: 1px solid var(--elt-500);
    border-radius: var(--r-xs);
    transition: border-color var(--dur-padrao) var(--ease);
  }

  .campo__controle::placeholder {
    color: var(--texto-escuro-suave);
  }

  .campo__controle:hover {
    border-color: var(--elt-400);
  }

  .campo__controle:focus-visible {
    border-color: var(--ciano);
  }

  select.campo__controle {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--texto-escuro-suave-2) 50%),
      linear-gradient(135deg, var(--texto-escuro-suave-2) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: var(--sp-8);
  }

  textarea.campo__controle {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
  }

  .campo__erro {
    display: none;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--t-body-sm);
    color: var(--ciano);
  }

  .campo__erro .icone {
    width: 16px;
    height: 16px;
    flex: none;
  }

  .campo.is-invalido .campo__controle {
    border-color: var(--ciano);
  }

  .campo.is-invalido .campo__erro {
    display: flex;
  }

  .campo__contador {
    font-size: var(--t-micro);
    letter-spacing: 0.12em;
    color: var(--texto-escuro-suave);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* Consentimento */
  .consentimento {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    cursor: pointer;
  }

  .consentimento input {
    width: 24px;
    height: 24px;
    margin-top: 1px;
    flex: none;
    accent-color: var(--ciano);
  }

  .consentimento__texto {
    font-size: var(--t-body-sm);
    color: var(--texto-escuro-suave-2);
  }

  .consentimento__texto a {
    color: var(--ciano);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Honeypot — fora da tela, nunca oculto por display:none */
  .honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .form__aviso {
    display: none;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4);
    font-size: var(--t-body-sm);
    color: var(--branco);
    background: var(--elt-600);
    border-left: 2px solid var(--ciano);
    border-radius: var(--r-xs);
  }

  .form__aviso.is-visivel {
    display: flex;
  }

  .form__aviso .icone {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--ciano);
  }

  /* --- Flutuantes ------------------------------------------------------ */

  /* O bloco `.fab` do botao flutuante de WhatsApp foi removido em 25/08/2026,
     junto com o elemento: a captacao passa toda pelo formulario. */

  .cookies {
    position: fixed;
    inset: auto 0 0;
    z-index: 120;
    display: none;
    background: var(--elt-900);
    border-top: 1px solid var(--elt-500);
    padding: var(--sp-5) 0;
  }

  .cookies.is-visivel {
    display: block;
  }

  .cookies__interno {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .cookies__texto {
    font-size: var(--t-body-sm);
    color: var(--texto-escuro-suave-2);
    max-width: 70ch;
  }

  .cookies__texto a {
    color: var(--ciano);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .cookies__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }

  .cookies__acoes .btn {
    min-height: 44px;
    padding: 12px 22px;
  }

  /* --- Rodape ---------------------------------------------------------- */

  .rodape {
    background: var(--elt-900);
    padding-top: var(--sp-9);
    padding-bottom: var(--sp-7);
    --cor-foco: var(--ciano);
  }

  .rodape__grade {
    display: grid;
    gap: var(--sp-8);
  }

  .rodape__sobre {
    font-size: var(--t-body-sm);
    color: var(--texto-escuro-suave);
    margin-top: var(--sp-5);
    max-width: 34ch;
  }

  .rodape__titulo {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ciano);
    margin-bottom: var(--sp-4);
  }

  .rodape__lista {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .rodape__lista a {
    font-size: var(--t-body-sm);
    color: var(--texto-escuro-suave);
    transition: color var(--dur-rapida) var(--ease);
  }

  .rodape__lista a:hover {
    color: var(--branco);
  }

  .rodape__sociais {
    display: flex;
    gap: var(--sp-3);
  }

  .rodape__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--texto-escuro-suave);
    border: 1px solid var(--elt-500);
    border-radius: var(--r-sm);
    transition: color var(--dur-padrao) var(--ease),
      border-color var(--dur-padrao) var(--ease);
  }

  .rodape__social:hover {
    color: var(--ciano);
    border-color: var(--ciano);
  }

  .rodape__social .icone {
    width: 20px;
    height: 20px;
  }

  .rodape__base {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-6);
    justify-content: space-between;
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--linha-escura);
    font-size: var(--t-body-sm);
    color: var(--texto-escuro-suave);
  }

  .rodape__legais {
    display: flex;
    gap: var(--sp-5);
  }

  .rodape__legais a {
    transition: color var(--dur-rapida) var(--ease);
  }

  .rodape__legais a:hover {
    color: var(--branco);
  }
}

/* ============================ SECOES ==================================== */

@layer sections {
  /* --- Hero ------------------------------------------------------------ */

  .hero {
    position: relative;
    min-height: 92vh;
    min-height: 92svh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--h-header) + var(--sp-8));
    padding-bottom: var(--sp-9);
    background: linear-gradient(180deg, var(--elt-750) 0%, var(--elt-800) 55%, var(--elt-850) 100%);
    overflow: hidden;
  }

  .hero__interno {
    position: relative;
    z-index: 2;
    width: 100%;
  }

  .hero__titulo {
    margin-top: var(--sp-5);
    max-width: 16ch;
  }

  .hero__texto {
    margin-top: var(--sp-5);
    font-size: var(--t-body-lg);
    color: var(--texto-escuro-suave);
    max-width: 48ch;
  }

  .hero__acoes {
    margin-top: var(--sp-7);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
  }

  @media (min-width: 768px) {
    .hero__acoes {
      flex-direction: row;
      align-items: center;
      gap: var(--sp-7);
    }
  }

  /* Decorativos: ondas a direita, arco atravessando a base */
  /* specs/design.md §10 pede o desenho de entrada para os arcos E para as ondas.
     Os arcos ja tinham; as ondas nao. O traco vive dentro do symbol do sprite, e
     shadow tree de `use` nao e alcancada por seletor: medido, `stroke-dasharray`
     no hospedeiro nao atravessa. Custom property atravessa, entao o gatilho e
     `--d-anim`. Sem ela o valor e `none`, e por isso a marca do cabecalho, do
     drawer e do rodape continuam estaticas. */
  .hero__ondas {
    display: none;
    position: absolute;
    right: 8%;
    top: 42%;
    width: 190px;
    height: 130px;
    z-index: 1;
    opacity: 0.35;
    --d-anim: desenhar-onda;
    --d-dur: 1200ms;
    --d-ease: var(--ease);
    /* Mesmo escalonamento de 160ms usado entre os dois arcos. */
    --d-atraso-2: 160ms;
    --d-atraso-3: 320ms;
  }

  .hero__arco {
    position: absolute;
    left: 50%;
    bottom: -6%;
    width: 160%;
    max-width: 1800px;
    height: auto;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
  }

  /* specs/design.md §10: os arcos se desenham em 1,2s, uma vez, no carregamento. */
  .hero__arco path {
    fill: none;
    stroke: var(--ciano);
    stroke-width: 1;
    opacity: 0.35;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: desenhar-arco 1200ms var(--ease) forwards;
  }

  .hero__arco .traco--fraco {
    opacity: 0.18;
    animation-delay: 160ms;
  }

  @keyframes desenhar-arco {
    to {
      stroke-dashoffset: 0;
    }
  }

  /* Pulso de luz sobre os arcos.
     Nada se desloca e nada entra em laco infinito: a varredura de entrada roda
     uma vez, e depois a posicao passa a responder ao cursor. Mantem as regras
     "sem parallax" e "nada em laco infinito" de specs/design.md §10.
     Com pathLength="1" o dash trabalha em fracao do traco, entao 0.14 = 14%. */
  .hero__arco .arco-brilho {
    fill: none;
    stroke: var(--ciano);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 0.14 1;
    stroke-dashoffset: calc((0.07 - var(--luz-pos, 0.5)) * 1px);
    opacity: 0;
    transition: opacity var(--dur-padrao) var(--ease),
      stroke-dashoffset 420ms var(--ease);
    animation: varrer-arco 1800ms var(--ease) 1400ms 1;
  }

  .hero__arco .arco-brilho--2 {
    animation-delay: 1560ms;
  }

  /* Classe posta por reveal.js enquanto o ponteiro esta sobre o hero. */
  .hero.tem-luz .arco-brilho {
    opacity: 0.9;
  }

  .hero.tem-luz .arco-brilho--2 {
    opacity: 0.5;
    transition-delay: 0s, 90ms;
  }

  @keyframes varrer-arco {
    0% {
      opacity: 0;
      stroke-dashoffset: 0.07px;
    }
    18%,
    82% {
      opacity: 0.9;
    }
    100% {
      opacity: 0;
      stroke-dashoffset: -1.07px;
    }
  }

  /* --- Faixa de logos -------------------------------------------------- */

  .logos {
    background: var(--elt-850);
    padding-block: var(--sp-7);
  }

  .logos__rotulo {
    text-align: center;
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--texto-escuro-suave);
    margin-bottom: var(--sp-6);
  }

  .transicao {
    height: clamp(120px, 18vw, 180px);
    background: linear-gradient(180deg, var(--elt-850) 0%, var(--branco) 100%);
  }

  /* --- Servicos -------------------------------------------------------- */

  .servicos__cabecalho {
    max-width: 60ch;
  }

  .servicos__texto {
    margin-top: var(--sp-5);
    font-size: var(--t-body-lg);
  }

  .destaque {
    display: grid;
    gap: var(--sp-6);
    margin-top: var(--sp-8);
    padding: var(--sp-6);
    background: var(--branco);
    border: 1px solid var(--linha-clara);
    border-radius: var(--r-md);
  }

  .destaque__grafico {
    order: -1;
    height: 120px;
    width: 100%;
  }

  .destaque__grafico svg {
    width: 100%;
    height: 100%;
  }

  .destaque__conteudo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  .servicos__grade {
    display: grid;
    gap: var(--sp-5);
    margin-top: var(--sp-5);
    align-items: stretch;
  }

  .servicos__fecho {
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--linha-clara);
    font-size: var(--t-body-lg);
  }

  /* --- Metodo ---------------------------------------------------------- */

  .metodo__grade {
    display: grid;
    gap: var(--sp-6);
    margin-top: var(--sp-8);
  }

  .etapas {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .etapa {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    width: 100%;
    min-height: 56px;
    padding: var(--sp-4) var(--sp-5);
    text-align: left;
    color: var(--branco);
    background: transparent;
    border: 1px solid var(--elt-500);
    border-radius: var(--r-sm);
    transition: background-color var(--dur-padrao) var(--ease),
      color var(--dur-padrao) var(--ease),
      border-color var(--dur-padrao) var(--ease);
  }

  .etapa__num {
    font-family: var(--fonte-titulo);
    font-weight: 200;
    font-stretch: 112%;
    font-size: 1.25rem;
    letter-spacing: 0.06em;
    color: var(--ciano);
    flex: none;
    transition: color var(--dur-padrao) var(--ease);
  }

  .etapa__nome {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    flex: 1;
  }

  .etapa .icone {
    width: 16px;
    height: 16px;
    flex: none;
    opacity: 0.5;
    transition: transform var(--dur-padrao) var(--ease);
  }

  .etapa:hover {
    border-color: var(--ciano);
  }

  .etapa:hover .icone {
    transform: translateX(4px);
  }

  .etapa[aria-selected="true"] {
    background: var(--ciano);
    border-color: var(--ciano);
    color: var(--elt-700);
  }

  .etapa[aria-selected="true"] .etapa__num {
    color: var(--elt-700);
  }

  .painel {
    padding: var(--sp-6);
    background: var(--elt-600);
    border-radius: var(--r-lg);
    animation: aparece var(--dur-padrao) var(--ease);
  }

  .painel[hidden] {
    display: none;
  }

  .painel__num {
    font-family: var(--fonte-titulo);
    font-weight: 200;
    font-stretch: 112%;
    font-size: var(--t-metrica);
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--ciano);
  }

  .painel__titulo {
    margin-top: var(--sp-2);
  }

  .painel .lista-tags {
    margin-top: var(--sp-5);
  }

  .painel__chamada {
    margin-top: var(--sp-5);
    font-size: var(--t-h4);
    font-weight: 600;
    color: var(--branco);
    max-width: 42ch;
  }

  .painel__texto {
    margin-top: var(--sp-4);
    font-size: var(--t-body-sm);
    color: var(--texto-escuro-suave-2);
  }

  .painel__acao {
    margin-top: var(--sp-6);
  }

  /* Diagrama da etapa. O SVG e quadrado (880x880) e traz rotulos de 26 unidades:
     abaixo de ~450px de largura eles ficam ilegiveis, por isso o painel deixou de
     ser duas colunas e o diagrama ocupa a largura util, limitado a 520px. */
  .painel__figura {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin-top: var(--sp-7);
    border-radius: var(--r-md);
    border: 1px solid var(--linha-escura);
  }

  @keyframes aparece {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* --- Agencia --------------------------------------------------------- */

  .agencia__grade {
    display: grid;
    gap: var(--sp-6);
  }

  .agencia__narrativa {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
  }

  /* Filho direto: `.agencia__narrativa p` alcancaria tambem os paragrafos das
     metricas e, por ter especificidade maior que `.metrica__num`, roubaria o
     font-size delas dentro da mesma camada. */
  .agencia__narrativa > p {
    font-size: var(--t-body-lg);
  }

  .agencia__fecho {
    font-weight: 600;
    color: var(--texto-claro-forte);
  }

  .metricas {
    display: grid;
    gap: var(--sp-5);
    margin-top: var(--sp-7);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--linha-clara);
  }

  .metrica__num {
    font-family: var(--fonte-titulo);
    font-weight: 200;
    font-stretch: 112%;
    font-size: var(--t-metrica);
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--elt-400);
  }

  .metrica__desc {
    margin-top: var(--sp-2);
    font-size: var(--t-body-sm);
    color: var(--texto-claro-suave);
    max-width: 26ch;
  }

  .agencia__acao {
    margin-top: var(--sp-7);
  }

  /* --- Depoimentos ----------------------------------------------------- */

  .depoimentos__cabecalho {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
  }

  .depoimentos__cabecalho p {
    margin-inline: auto;
  }

  /* Card 1: dado de operacao. Ocupa a largura inteira acima dos outros tres,
     que e o que preserva o destaque (instrucao do deck de copy). Borda ciana
     em vez de fundo cheio — ciano e acento, nao preenchimento (design.md §13). */
  .caso {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    margin-top: var(--sp-8);
    padding: var(--sp-6);
    background: var(--elt-600);
    border: 1px solid var(--ciano-24);
    border-radius: var(--r-lg);
  }

  .caso__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  /* :not() exclui o numero em vez de deixar o seletor descendente sobrepor a
     classe dele — mesma armadilha de especificidade de `.agencia__narrativa p`. */
  .caso__corpo p:not(.caso__numero) {
    font-size: var(--t-body);
    color: var(--texto-escuro-suave-2);
  }

  .caso__numero {
    font-family: var(--fonte-titulo);
    font-weight: 200;
    font-stretch: 112%;
    font-size: var(--t-h3);
    line-height: 1.15;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ciano);
  }

  .caso__autor {
    padding-top: var(--sp-5);
    border-top: 1px solid var(--linha-escura);
  }

  .caso__nome {
    font-weight: 600;
    font-size: var(--t-body);
    color: var(--branco);
  }

  .caso__empresa {
    font-size: var(--t-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texto-escuro-suave-2);
    margin-top: var(--sp-1);
  }

  /* Selo de segmento do cliente. */
  .caso__segmento,
  .depoimento__segmento {
    align-self: flex-start;
    padding: 5px 12px;
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ciano);
    background: var(--ciano-12);
    border: 1px solid var(--ciano-24);
    border-radius: var(--r-pill);
  }

  .depoimentos__pista {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    gap: var(--sp-5);
    margin-top: var(--sp-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: var(--sp-2);
  }

  .depoimentos__pista::-webkit-scrollbar {
    display: none;
  }

  /* Enquanto arrasta: o scroll-snap atrapalharia o gesto e a selecao de texto
     deixaria o cursor "grudado" no paragrafo em vez de mover a pista. */
  .depoimentos__pista.is-arrastando {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
  }

  .depoimento {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-6);
    background: var(--elt-600);
    border-radius: var(--r-lg);
  }

  .depoimento__aspas {
    font-family: var(--fonte-titulo);
    font-size: 3rem;
    line-height: 0.7;
    color: var(--ciano);
    opacity: 0.3;
  }

  .depoimento__citacao {
    font-size: var(--t-body);
    color: var(--texto-escuro-suave-2);
    flex: 1;
  }

  .depoimento__autor {
    padding-top: var(--sp-4);
    border-top: 1px solid var(--linha-escura);
  }

  .depoimento__nome {
    font-weight: 600;
    font-size: var(--t-body-sm);
    color: var(--branco);
  }

  .depoimento__cargo {
    font-size: var(--t-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texto-escuro-suave-2);
    margin-top: var(--sp-1);
  }

  .pontos {
    display: flex;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
  }

  /* 44x44 de area de toque; o ponto visivel de 6px vive dentro dela. */
  .ponto {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--r-pill);
  }

  .ponto::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--elt-500);
    transition: background-color var(--dur-padrao) var(--ease),
      transform var(--dur-padrao) var(--ease);
  }

  .ponto[aria-current="true"]::before {
    background: var(--ciano);
    transform: scale(1.3);
  }

  .depoimentos__logos {
    margin-top: var(--sp-9);
    padding-top: var(--sp-7);
    border-top: 1px solid var(--linha-escura);
  }

  /* --- Contato --------------------------------------------------------- */

  .contato {
    position: relative;
    overflow: hidden;
  }

  .contato::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 900px;
    height: 500px;
    max-width: 140%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(2, 255, 244, 0.09), transparent 68%);
    pointer-events: none;
  }

  .contato__interno {
    position: relative;
    z-index: 1;
  }

  .contato__cabecalho {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
  }

  /* 20ch e o valor mais apertado que ainda quebra em "Descubra onde / a operação
     / está travando." — o 14ch anterior servia ao titulo curto de antes e
     espremia este em 5 linhas. Quem produz essas quebras e o `text-wrap: balance`
     herdado de .titulo. */
  .contato__titulo {
    max-width: 20ch;
  }

  .contato__cabecalho p {
    margin-inline: auto;
  }

  .contato__grade {
    display: grid;
    gap: var(--sp-8);
    margin-top: var(--sp-9);
  }

  .form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
  }

  .form__linha {
    display: grid;
    gap: var(--sp-5);
  }

  .form__acao {
    margin-top: var(--sp-2);
  }

  .contato__lado {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    padding: var(--sp-6);
    background: var(--elt-600);
    border-radius: var(--r-lg);
    height: fit-content;
  }

  .contato__item {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
  }

  .contato__item .icone {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--ciano);
    margin-top: 2px;
  }

  .contato__rotulo {
    font-size: var(--t-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--texto-escuro-suave-2);
  }

  .contato__valor {
    font-size: var(--t-body);
    color: var(--branco);
    margin-top: var(--sp-1);
  }

  a.contato__valor {
    transition: color var(--dur-rapida) var(--ease);
  }

  a.contato__valor:hover {
    color: var(--ciano);
  }

  /* --- Paginas de apoio ------------------------------------------------ */

  .pagina {
    padding-top: calc(var(--h-header) + var(--pad-secao));
  }

  .pagina__cabecalho {
    margin-bottom: var(--sp-8);
  }

  .pagina__data {
    margin-top: var(--sp-4);
    font-size: var(--t-micro);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--texto-escuro-suave);
  }

  .prosa {
    max-width: 68ch;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
  }

  .prosa h2 {
    font-size: var(--t-h3);
    margin-top: var(--sp-6);
  }

  .prosa h2:first-child {
    margin-top: 0;
  }

  .prosa p,
  .prosa li {
    font-size: var(--t-body);
    color: var(--texto-escuro-suave);
  }

  .prosa ul {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding-left: var(--sp-5);
  }

  .prosa li {
    list-style: disc;
  }

  .prosa a {
    color: var(--ciano);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .pendente {
    padding: var(--sp-5);
    background: var(--elt-600);
    border-left: 2px solid var(--ciano);
    border-radius: var(--r-xs);
    font-size: var(--t-body-sm);
    color: var(--texto-escuro-suave-2);
  }

  /* Confirmacao pos-envio */
  .confirmacao {
    min-height: 70svh;
    display: grid;
    place-items: center;
    text-align: center;
    padding-top: var(--h-header);
  }

  .confirmacao__interno {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
  }

  .confirmacao__marca {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: var(--r-pill);
    background: var(--ciano-12);
    border: 1px solid var(--ciano-24);
    color: var(--ciano);
  }

  .confirmacao__marca .icone {
    width: 32px;
    height: 32px;
  }

  .confirmacao p {
    margin-inline: auto;
  }

  /* ------------------------------ FAQ ---------------------------------- */

  /* Cabecalho em largura total, como em Servicos e Depoimentos. Em duas colunas
     o titulo nao caberia: "PERGUNTAS" mede 479px e "FREQUENTES." 558px a 64px,
     contra uma coluna de 417px, e as palavras vazavam por cima dos accordions.
     Medido, nao estimado. */
  .faq__titulo {
    margin-top: var(--sp-5);
    max-width: 20ch;
  }

  .faq__lista {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: var(--sp-7);
    /* Medida de leitura: uma pergunta de 1240px de largura seria dificil de
       varrer com o olho. */
    max-width: 860px;
  }

  /* Card sobre fundo claro, conforme design.md §7. */
  .faq__item {
    background: var(--branco);
    border: 1px solid var(--linha-clara);
    border-radius: var(--r-md);
    transition: border-color var(--dur-padrao) var(--ease);
  }

  .faq__item:hover,
  .faq__item[open] {
    border-color: var(--elt-400);
  }

  /* `display: flex` ja tira o marcador nativo (o elemento deixa de ser
     `list-item`); as duas linhas seguintes cobrem WebKit antigo. */
  .faq__pergunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 44px;
    padding: var(--sp-4) var(--sp-5);
    font-family: var(--fonte-corpo);
    font-size: var(--t-body);
    font-weight: 600;
    line-height: 1.45;
    color: var(--texto-claro-forte);
    cursor: pointer;
    list-style: none;
  }

  .faq__pergunta::-webkit-details-marker {
    display: none;
  }

  .faq__seta {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--elt-400);
    transform: rotate(90deg);
    transition: transform var(--dur-padrao) var(--ease);
  }

  .faq__item[open] .faq__seta {
    transform: rotate(-90deg);
  }

  /* A abertura anima so `opacity`: design.md §10 proibe animar height. */
  .faq__resposta {
    padding: 0 var(--sp-5) var(--sp-5);
    animation: faq-abre var(--dur-padrao) var(--ease);
  }

  /* Filho direto, para nao alcancar conteudo aninhado — mesma armadilha de
     especificidade que `.agencia__narrativa > p` resolve. */
  .faq__resposta > p {
    font-size: var(--t-body-sm);
    max-width: 60ch;
  }

  .faq__resposta > p + p {
    margin-top: var(--sp-4);
  }

  @keyframes faq-abre {
    from {
      opacity: 0;
    }
  }
}

/* =========================== UTILITARIOS ================================ */

@layer utilities {
  .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;
  }

  .icone {
    display: inline-block;
    fill: currentColor;
  }

  /* Entrada por IntersectionObserver — .reveal e ativado por reveal.js.
     O estado inicial invisivel so vale quando ha JavaScript: sem o guard `.js`
     uma falha de script deixaria o conteudo dessas secoes invisivel para sempre. */
  .js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-lenta) var(--ease),
      transform var(--dur-lenta) var(--ease);
  }

  .reveal.is-visivel {
    opacity: 1;
    transform: none;
  }

  /* --------------------- MOBILE / TABLET (<=1023px) -------------------- */

  /* Mobile pequeno (bancada de teste de specs/site.md §11 comeca em 320px).
     "Agência de marketing digital" precisa de 308px numa linha com o tracking
     padrao de .18em, e a 320px so ha 280px uteis — o selo quebraria em duas
     linhas e deixaria de ler como selo. Apertar o entreletramento so aqui
     resolve em uma linha (273px) e mantem o tracking POSITIVO, que e o que a
     assinatura tipografica de specs/design.md §3 exige. */
  @media (max-width: 359px) {
    .selo {
      letter-spacing: 0.1em;
      padding-inline: var(--sp-3);
    }
  }

  @media (max-width: 767px) {
    /* specs/design.md §6: botao em largura total ate 767px. */
    .btn {
      width: 100%;
    }

    .hero__acoes,
    .agencia__acao,
    .painel__acao {
      display: flex;
    }
  }

  @media (max-width: 1023px) {
    /* Alvos de toque de 44px em listas de link (specs/site.md §11). */
    .rodape__lista {
      gap: 0;
    }

    .rodape__lista a,
    .rodape__legais a,
    .link-seta {
      display: flex;
      align-items: center;
      min-height: 44px;
    }

    .rodape__legais {
      gap: var(--sp-5);
    }
  }

  /* ------------------------- TABLET (>=768px) ------------------------- */

  @media (min-width: 768px) {
    .servicos__grade {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--sp-6);
    }

    .form__linha {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .metricas {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rodape__grade {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cookies__interno {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-6);
    }

    .cookies__acoes {
      flex: none;
    }

    .depoimentos__pista {
      grid-auto-columns: 60%;
    }
  }

  /* ------------------------ DESKTOP (>=1024px) ------------------------ */

  @media (min-width: 1024px) {
    .nav,
    .cabecalho__cta {
      display: block;
    }

    .cabecalho__cta {
      min-height: 44px;
      padding: 12px 22px;
    }

    .hamburguer {
      display: none;
    }

    .hero {
      min-height: min(88vh, 900px);
      padding-top: calc(var(--h-header) + var(--sp-9));
    }

    .hero__interno > * {
      max-width: 60%;
    }

    .hero__ondas {
      display: block;
    }

    .hero__texto {
      max-width: 44ch;
    }

    .destaque {
      grid-template-columns: 1fr 1fr;
      align-items: center;
      padding: var(--sp-7);
    }

    .destaque__grafico {
      order: 0;
      height: 100%;
      min-height: 200px;
    }

    /* minmax(0,1fr) impede que o conteudo alargue uma coluna — com `1fr` puro
       o minimo e auto e a coluna de tags mais longas rouba largura das outras. */
    .servicos__grade {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .metodo__grade {
      grid-template-columns: 34fr 66fr;
      align-items: start;
      gap: var(--sp-7);
    }

    .painel {
      padding: var(--sp-7);
    }

    /* Uma coluna tambem no desktop: o diagrama precisa da largura util inteira
       para os rotulos internos serem legiveis. */
    .painel__conteudo {
      display: block;
    }

    .agencia__grade {
      grid-template-columns: 40fr 60fr;
      gap: var(--sp-8);
    }

    .depoimentos__pista {
      grid-auto-flow: row;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      grid-auto-columns: auto;
      overflow: visible;
      align-items: stretch;
      gap: var(--sp-6);
    }

    .depoimento {
      padding: var(--sp-7);
    }

    .pontos {
      display: none;
    }

    .contato__grade {
      grid-template-columns: 1.4fr 1fr;
      align-items: start;
    }

    .rodape__grade {
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: var(--sp-6);
    }
  }

  /* ------------------------- MOVIMENTO REDUZIDO ------------------------ */

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      /* Zerar tambem o atraso: o drawer usa `transition-delay` para adiar a
         troca de visibility, e so a duracao nao alcanca isso. */
      transition-delay: 0s !important;
      scroll-behavior: auto !important;
    }

    .marquee__trilha {
      animation: none;
    }

    /* O `!important` global acima nao alcanca a shadow tree do `use`, entao o
       desenho das ondas precisa ser desligado pelo mesmo canal que o liga. */
    .hero__ondas {
      --d-anim: none;
    }

    .reveal {
      opacity: 1;
      transform: none;
    }
  }
}