/* =========================================================================
   FLYT Soluções Digitais — estilos
   Fonte da verdade: Pessoal/FLYT/projeto/guia.md
   Ordem: tokens → fontes → base → componentes → seções → movimento
   ========================================================================= */

/* ===== Tokens (guia, seção 3) ===== */
:root {
  /* ===== Cores de marca (kit 08/10/2026) ===== */
  --laranja: #FF6500;
  --laranja-hover: #FF7A1F;      /* hover clareia (escurecer derruba contraste com grafite) */
  --laranja-ativo: #E85C00;
  --laranja-texto: #B84500;      /* ÚNICO laranja permitido como texto em fundo claro */
  --grafite: #191919;
  --grafite-profundo: #101010;   /* rodapé */
  --gelo: #F5F5F2;
  --branco: #FFFFFF;             /* cards em seção clara */

  /* ===== Neutros auxiliares ===== */
  --superficie: #232323;         /* cards e campos no escuro */
  --superficie-2: #2C2C2C;       /* hover de card escuro */
  --linha-escura: #333333;       /* divisórias decorativas no escuro */
  --linha-clara: #DADAD4;        /* divisórias decorativas no claro */
  --borda-campo: #767676;        /* contorno de input (>=3:1) */
  --gelo-suave: #B5B5B0;         /* texto secundário no escuro */
  --grafite-suave: #55554F;      /* texto secundário no claro */
  --placeholder: #8E8E89;
  --grade: rgba(245, 245, 242, 0.06); /* linhas do grid de fundo do hero */
  --grade-escura: rgba(25, 25, 25, 0.08); /* grid de fundo do CTA final (guia 9.11) */
  --header-fundo: rgba(25, 25, 25, 0.92); /* guia 7.1 */

  /* ===== Estados ===== */
  --erro-escuro: #FF8A80;
  --erro-claro: #B3261E;
  --sucesso: var(--laranja);     /* sucesso = barra laranja + texto gelo; sem verde */

  /* ===== Tipografia ===== */
  --fonte-titulo: "Inter Tight", "Inter Tight Fallback", "Arial Narrow", Arial, sans-serif;
  --fonte-texto: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --peso-titulo: 800;
  --peso-regular: 400;
  --peso-forte: 600;

  /* escala fluida 360px -> 1440px */
  --fs-display: clamp(2.75rem, 1.5rem + 5.6vw, 6.5rem);     /* H1 hero: 44 -> 104px */
  --fs-h2: clamp(2rem, 1.25rem + 3.33vw, 4rem);              /* 32 -> 64px */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.67vw, 1.625rem);        /* 20 -> 26px */
  --fs-numero: clamp(3rem, 2rem + 4.4vw, 5.5rem);            /* "01" dos passos */
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);   /* 17 -> 21px */
  --fs-corpo: clamp(1rem, 0.96rem + 0.19vw, 1.0625rem);      /* 16 -> 17px */
  --fs-pequeno: 0.875rem;                                    /* 14px */
  --fs-eyebrow: clamp(0.6875rem, 0.66rem + 0.14vw, 0.8125rem); /* 11 -> 13px */
  --fs-faixa: clamp(1rem, 0.85rem + 0.67vw, 1.375rem);       /* marquee */
  --fs-cta-final: clamp(2.25rem, 1.2rem + 4.6vw, 5.25rem);   /* guia 9.11 */

  --lh-display: 0.95;
  --lh-titulo: 1.02;
  --lh-h3: 1.2;
  --lh-corpo: 1.6;
  --ls-display: -0.04em;
  --ls-h2: -0.03em;
  --ls-h3: -0.015em;
  --ls-eyebrow: 0.32em;

  /* ===== Espaçamento (base 4px) ===== */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;
  --secao-y: clamp(4.5rem, 3rem + 6.67vw, 9rem);   /* 72 -> 144px */
  --secao-y-faixa: clamp(1rem, 0.8rem + 0.9vw, 1.5rem);
  --gutter: clamp(1.25rem, 0.5rem + 3.33vw, 3rem); /* 20 -> 48px */
  --gap-grid: clamp(1rem, 0.6rem + 1.8vw, 2rem);
  --degrau: clamp(1.5rem, 0.8rem + 3vw, 3.5rem);   /* altura/largura dos degraus do fluxo */

  /* ===== Layout ===== */
  --container: 1240px;
  --container-texto: 40rem;      /* ~65 caracteres */
  --header-h: 64px;              /* 72px a partir de 1024 (ver media query) */

  /* ===== Forma ===== */
  --raio: 0;                     /* a marca é de canto vivo */
  --raio-campo: 2px;
  --chanfro: 20px;               /* corte 45° no canto superior direito dos cards */
  --chanfro-sm: 12px;
  --borda-fina: 1px;
  --borda-media: 1.5px;
  --barra: 6px;                  /* barra laranja do fluxo/cards */

  /* ===== Sombra (só elementos flutuantes) ===== */
  --sombra-flutuante: 0 10px 30px rgba(0, 0, 0, 0.35);
  --sombra-flutuante-claro: 0 10px 30px rgba(25, 25, 25, 0.18);

  /* ===== Movimento ===== */
  --ease-saida: cubic-bezier(0.22, 1, 0.36, 1);       /* entradas */
  --ease-entrada-saida: cubic-bezier(0.65, 0, 0.35, 1);/* abrir/fechar */
  --ease-linear: linear;
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);      /* pop do ponto do H1 */
  --dur-micro: 150ms;
  --dur-curta: 250ms;
  --dur-media: 450ms;
  --dur-longa: 700ms;
  --dur-hero: 1100ms;
  --stagger: 70ms;
  --reveal-dist: 24px;

  /* ===== v2: movimento (guia 12.4) ===== */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);         /* ≈ gsap "expo.out" */
  --ease-power3: cubic-bezier(0.215, 0.61, 0.355, 1); /* ≈ gsap "power3.out" */
  --dur-fx-curta: 400ms;
  --dur-fx: 900ms;
  --dur-fx-longa: 1200ms;
  --stagger-linha: 80ms;
  --stagger-letra: 20ms;

  /* ===== v2: microinterações ===== */
  --tilt-max: 8deg;
  --spot-tamanho: 360px;
  --spot-claro: rgba(255, 101, 0, 0.10);    /* MÁXIMO 10% (contraste do laranja-texto) */
  --spot-escuro: rgba(255, 101, 0, 0.10);
  --progresso-h: 2px;

  /* ===== v2: camadas ===== */
  --z-canvas: 0;
  --z-lamina: 40;

  /* ===== Camadas ===== */
  --z-decor: 0;
  --z-conteudo: 1;
  --z-header: 50;
  --z-whatsapp: 60;
  --z-cookies: 70;
  --z-menu: 80;
}

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

/* ===== Temas por seção: cada <section> recebe data-tema ===== */
[data-tema="escuro"] {
  --bg: var(--grafite); --fg: var(--gelo); --fg-suave: var(--gelo-suave);
  --destaque-texto: var(--laranja); --ponto: var(--laranja);
  --foco: var(--laranja); --linha: var(--linha-escura); --erro: var(--erro-escuro);
  background: var(--bg); color: var(--fg);
}
[data-tema="claro"] {
  --bg: var(--gelo); --fg: var(--grafite); --fg-suave: var(--grafite-suave);
  --destaque-texto: var(--laranja-texto); --ponto: var(--laranja);
  --foco: var(--grafite); --linha: var(--linha-clara); --erro: var(--erro-claro);
  background: var(--bg); color: var(--fg);
}
[data-tema="laranja"] {
  --bg: var(--laranja); --fg: var(--grafite); --fg-suave: var(--grafite);
  --destaque-texto: var(--grafite); --ponto: var(--gelo);
  --foco: var(--grafite); --linha: var(--grafite); --erro: var(--grafite);
  background: var(--bg); color: var(--fg);
}
[data-tema="rodape"] {
  --bg: var(--grafite-profundo); --fg: var(--gelo); --fg-suave: var(--gelo-suave);
  --destaque-texto: var(--laranja); --ponto: var(--laranja);
  --foco: var(--laranja); --linha: var(--linha-escura);
  background: var(--bg); color: var(--fg);
}

:focus-visible { outline: 3px solid var(--foco, var(--laranja)); outline-offset: 3px; }

/* ===== Fontes auto-hospedadas (guia, seção 4) ===== */
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/inter-tight-800-latin.woff2") format("woff2");
  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"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  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;
}
/* Fallbacks métricos contra CLS no swap */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 107%; ascent-override: 90%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: "Inter Tight Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); font-weight: 800; size-adjust: 96%; ascent-override: 100%; descent-override: 25%; line-gap-override: 0%; }

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--fonte-texto);
  font-weight: var(--peso-regular);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  background: var(--grafite);
  color: var(--gelo);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.trava { overflow: hidden; }

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
main:focus { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular {
  position: absolute; left: var(--sp-3); top: -200px; z-index: calc(var(--z-menu) + 10);
  background: var(--laranja); color: var(--grafite); font-weight: var(--peso-forte);
  padding: var(--sp-3) var(--sp-4); text-decoration: none;
}
.pular:focus { top: var(--sp-3); outline: 3px solid var(--gelo); outline-offset: 0; }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

/* Placeholder de dado que só o Henrique tem: visível de propósito */
.preencher {
  outline: 1px dashed var(--laranja);
  outline-offset: 2px;
}
[data-tema="laranja"] .preencher, [data-tema="claro"] .preencher { outline-color: currentColor; }

/* ===== Tipografia ===== */
.titulo-display, .titulo, .titulo-3 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  text-wrap: balance;
}
.titulo-display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.titulo {
  font-size: var(--fs-h2);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-h2);
  max-width: 16ch;
}
.titulo-3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}
.ponto { color: var(--ponto, var(--laranja)); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--fg-suave);
  max-width: 34rem;
}
[data-tema="claro"] .lead { color: var(--fg); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--fonte-texto);
  font-weight: var(--peso-forte);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--destaque-texto);
}
[data-tema="claro"] .eyebrow:not(.eyebrow--tarja) { color: var(--grafite); }
[data-tema="claro"] .eyebrow:not(.eyebrow--tarja)::before {
  content: ""; width: 8px; height: 8px; background: var(--laranja); flex: none;
}
.eyebrow--tarja {
  background: var(--laranja);
  color: var(--grafite);
  padding: 0.55em calc(0.9em - var(--ls-eyebrow)) 0.55em 0.9em;
}
[data-tema="laranja"] .eyebrow--tarja { background: var(--grafite); color: var(--laranja); }

.secao {
  position: relative;
  padding-block: var(--secao-y);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.secao__cabeca { margin-bottom: var(--sp-7); }
.secao__cabeca .titulo { margin-top: var(--sp-4); }
.secao__cabeca .lead { margin-top: var(--sp-5); }
.secao__cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-7);
}

/* ===== Botões (guia 7.2) ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 48px;
  padding: 0.875rem 1.5rem;
  font-family: var(--fonte-texto);
  font-weight: var(--peso-forte);
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: var(--borda-media) solid transparent;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background-color var(--dur-micro), color var(--dur-micro),
              border-color var(--dur-micro), transform var(--dur-micro);
}
.btn svg { flex: none; }
.btn .seta { transition: transform var(--dur-micro) var(--ease-saida); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn--primario { background: var(--laranja); color: var(--grafite); }
.btn--primario:active { background: var(--laranja-ativo); }

.btn--secundario { background: transparent; border-color: var(--fg, var(--gelo)); color: var(--fg, var(--gelo)); }

.btn--escuro { background: var(--grafite); color: var(--gelo); }

.btn--pequeno { min-height: 44px; padding: 0.625rem 1.125rem; font-size: 0.9375rem; }
.btn--grande { min-height: 60px; padding: 1.125rem 2rem; font-size: 1.125rem; }

@media (hover: hover) {
  .btn:hover .seta { transform: translate(3px, -3px); }
  .btn--primario:hover:not([disabled]) { background: var(--laranja-hover); }
  .btn--secundario:hover { background: var(--fg, var(--gelo)); color: var(--bg, var(--grafite)); }
  .btn--escuro:hover { background: var(--gelo); color: var(--grafite); }
}

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-weight: var(--peso-forte);
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--laranja);
  text-underline-offset: 5px;
}
[data-tema="laranja"] .link-seta { text-decoration-color: var(--grafite); }
.link-seta .seta { flex: none; transition: transform var(--dur-micro) var(--ease-saida); }
@media (hover: hover) {
  .link-seta:hover { text-decoration-thickness: 3px; }
  .link-seta:hover .seta { transform: translate(3px, -3px); }
}

/* ===== Header (guia 7.1) ===== */
.header {
  position: fixed;
  inset: 0 0 auto;
  height: var(--header-h);
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-curta);
}
.header[data-tema] { background: var(--header-fundo); }
.header--rolado { border-bottom-color: var(--linha-escura); }
.header.menu-aberto { z-index: var(--z-menu); }
.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
.logo-link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--gelo);
}
.logo-link svg { height: 28px; width: auto; }

.burger {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: -12px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--gelo);
}
.burger__barras { position: relative; width: 24px; height: 14px; }
.burger__barras::before, .burger__barras::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 3px;
  background: currentColor;
  transition: transform var(--dur-curta) var(--ease-entrada-saida);
}
.burger__barras::before { top: 0; }
.burger__barras::after { bottom: 0; transform: translateX(-4px) scaleX(0.6667); }
.burger[aria-expanded="true"] .burger__barras::before { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__barras::after { transform: translateY(-5.5px) rotate(-45deg); }

/* Painel do menu: mobile = tela cheia */
.menu {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-7);
  padding: calc(var(--header-h) + var(--sp-7)) var(--gutter) var(--sp-6);
  background: var(--grafite);
  overflow: hidden auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-media) var(--ease-entrada-saida), visibility 0s linear var(--dur-media);
}
.menu-aberto .menu {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-media) var(--ease-entrada-saida), visibility 0s;
}
.menu__lista { counter-reset: menu; position: relative; z-index: 1; }
.menu__lista li { counter-increment: menu; }
.menu__lista li:nth-child(1) { --i: 0; }
.menu__lista li:nth-child(2) { --i: 1; }
.menu__lista li:nth-child(3) { --i: 2; }
.menu__lista li:nth-child(4) { --i: 3; }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: clamp(2rem, 8vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: var(--ls-h2);
  color: var(--gelo);
  text-decoration: none;
}
.menu__link::before {
  content: counter(menu, decimal-leading-zero);
  font-family: var(--fonte-texto);
  font-weight: var(--peso-forte);
  font-size: var(--fs-pequeno);
  letter-spacing: 0.1em;
  color: var(--laranja);
}
.menu__cta { position: relative; z-index: 1; width: 100%; }
.menu__marca {
  position: absolute;
  right: -18vh;
  bottom: -8vh;
  height: 60vh;
  width: auto;
  color: var(--superficie);
  pointer-events: none;
}

@media (max-width: 1023.98px) {
  .menu__lista li, .menu__cta {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-media) var(--ease-saida), transform var(--dur-media) var(--ease-saida);
  }
  .menu-aberto .menu__lista li, .menu-aberto .menu__cta {
    opacity: 1;
    transform: none;
    transition-delay: calc(150ms + var(--i, 4) * 60ms);
  }
}

@media (min-width: 1024px) {
  .logo-link svg { height: 32px; }
  .burger { display: none; }
  .menu {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-6);
    padding: 0;
    background: none;
    overflow: visible;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .menu__lista { display: flex; gap: var(--sp-6); }
  .menu__link {
    position: relative;
    display: inline-flex;
    padding-block: 0.75rem;
    font-family: var(--fonte-texto);
    font-weight: var(--peso-forte);
    font-size: 0.9375rem;
    line-height: 1;
    letter-spacing: 0;
  }
  .menu__link::before { content: none; }
  .menu__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0.25rem;
    height: 2px;
    background: var(--laranja);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-curta) var(--ease-saida);
  }
  .menu__link[aria-current]::after { transform: scaleX(1); }
  .menu__cta { width: auto; min-height: 44px; padding: 0.625rem 1.125rem; font-size: 0.9375rem; }
  .menu__marca { display: none; }
}
@media (min-width: 1024px) and (hover: hover) {
  .menu__link:hover::after { transform: scaleX(1); }
}

.sentinela { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }

/* ===== Hero (guia 9.2) ===== */
.hero {
  position: relative;
  padding-top: var(--header-h);
  overflow: hidden;
  background-image:
    linear-gradient(var(--grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--grade) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: -1px -1px;
}
.hero__texto {
  position: relative;
  z-index: var(--z-conteudo);
  padding-block: var(--sp-8) var(--sp-7);
}
.hero__titulo { margin-top: var(--sp-5); }
.hero__titulo br { display: none; }
.hero__lead { margin-top: var(--sp-5); }
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
@media (max-width: 479.98px) {
  .hero__ctas .btn, .cta-final .btn--grande { width: 100%; }
  .hero__ctas .btn--primario .seta, .cta-final .btn--grande .seta { display: none; }
}

.hero__geo { position: relative; height: 240px; }
.hero__geo svg { width: 100%; height: 100%; }
.hero__geo--desk svg { overflow: visible; } /* diagonais continuam até a base do hero (que corta) */
.hero__geo--desk { display: none; }
.hero__geo .hero-seta-m { display: none; }
@media (min-width: 480px) {
  .hero__geo { height: 300px; }
  .hero__geo .hero-seta-m { display: inline; }
}

@media (min-width: 1024px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: min(100svh, 920px);
  }
  .hero__texto { padding-block: var(--sp-9); }
  .hero__texto > * { max-width: 46rem; }
  .hero__titulo br { display: inline; }
  .hero__geo--mob { display: none; }
  .hero__geo--desk {
    display: block;
    position: absolute;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    width: 46%;
    height: auto;
  }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .hero__geo--desk { width: 42%; }
  .hero__texto > * { max-width: 34rem; }
  .hero__texto > .hero__ctas { max-width: none; } /* CTAs numa linha só: a barra de cookies não encosta */
}

/* ===== Faixa "O que entregamos" (guia 9.3) ===== */
.faixa {
  position: relative;
  z-index: 2;
  padding-block: var(--secao-y-faixa);
}
.faixa__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
}
.faixa__rotulo { flex: none; }
.faixa__linha {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.marquee {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.marquee__trilho {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee__lista { display: flex; flex-wrap: nowrap; flex: none; }
.marquee__lista li {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-right: var(--sp-5);
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-faixa);
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--grafite);
}
.marquee__lista li::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--grafite);
  transform: rotate(45deg);
  flex: none;
}
.marquee:hover .marquee__trilho,
.faixa:focus-within .marquee__trilho,
.faixa.is-pausada .marquee__trilho,
.faixa.is-fora .marquee__trilho { animation-play-state: paused; }
.marquee__pausa {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
}
.marquee__pausa span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--grafite);
  color: var(--laranja);
}
.marquee__pausa .ic-play { display: none; }
.faixa.is-pausada .marquee__pausa .ic-pausa { display: none; }
.faixa.is-pausada .marquee__pausa .ic-play { display: block; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (min-width: 768px) {
  .faixa__inner { flex-wrap: nowrap; }
  .faixa__linha { flex: 1 1 auto; }
  .marquee__trilho { animation-duration: 40s; }
}
@media (min-width: 1024px) {
  .faixa {
    padding-bottom: calc(var(--secao-y-faixa) + 16px);
    margin-bottom: -16px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, calc(55% - 16px) calc(100% - 16px), 0 calc(100% - 16px));
  }
}

/* ===== Serviços (guia 7.3 e 9.4) ===== */
.servicos { overflow: hidden; }
.servicos__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-grid);
}
.servicos__grid > li { display: flex; }
.card-servico {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-5);
  background: var(--branco);
  color: var(--grafite);
  clip-path: polygon(0 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% 100%, 0 100%);
  transition: transform var(--dur-media) var(--ease-saida);
}
.card-servico::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--barra);
  background: var(--laranja);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-media) var(--ease-saida);
}
.card-servico:focus-within::before { transform: scaleX(1); }
@media (hover: hover) {
  .card-servico:hover { transform: translateY(-4px); }
  .card-servico:hover::before { transform: scaleX(1); }
}
.card-servico__icone {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--sp-2);
  background: var(--grafite);
}
.card-servico__icone svg { width: 32px; height: 32px; }
.card-servico__resultado { font-weight: var(--peso-forte); line-height: 1.45; }
.card-servico__desc { color: var(--grafite-suave); }
.card-servico .link-seta { margin-top: auto; align-self: flex-start; padding-top: var(--sp-3); }

@media (min-width: 768px) {
  .servicos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-servico { padding: var(--sp-6); }
}
@media (min-width: 1024px) {
  .servicos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .servicos .secao__cabeca { max-width: 46rem; }
  .servicos::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: var(--laranja);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }
}

/* ===== Uma solução conectada (guia 9.5) ===== */
.fluxo {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  padding-left: var(--sp-5);
}
.fluxo::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--laranja);
  transform-origin: top;
  transition: transform 900ms var(--ease-saida);
}
.etapa {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-left: calc(var(--i, 0) * 0.75rem);
  padding-top: var(--barra);
}
.etapa::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--barra);
  background: var(--laranja);
  transform-origin: left;
  transition: transform 500ms var(--ease-saida) calc(var(--i, 0) * 300ms);
}
.etapa__corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--superficie);
  clip-path: polygon(0 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% 100%, 0 100%);
  transition: opacity var(--dur-longa) var(--ease-saida) calc(var(--i, 0) * 300ms),
              transform var(--dur-longa) var(--ease-saida) calc(var(--i, 0) * 300ms);
}
.etapa__num {
  font-weight: var(--peso-forte);
  font-size: var(--fs-pequeno);
  letter-spacing: 0.1em;
  color: var(--laranja);
}
.etapa__frase { color: var(--gelo); }
.etapa__servicos { margin-top: var(--sp-2); }
.etapa__servicos li {
  padding-block: var(--sp-2);
  border-top: 1px solid var(--linha-escura);
  font-size: var(--fs-pequeno);
  color: var(--gelo-suave);
}

.solucao__fecho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--linha-escura);
}
.solucao__frase {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: var(--ls-h3);
  max-width: 28ch;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .fluxo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); padding-left: 0; }
  .fluxo::before { display: none; }
  .etapa { margin-left: 0; }
}
@media (min-width: 1024px) {
  .solucao .secao__cabeca { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-grid); align-items: end; }
  .solucao .secao__cabeca .lead { margin-top: 0; }
  .fluxo {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--degrau);
    align-items: stretch;
  }
  .etapa { margin-top: calc((3 - var(--i, 0)) * var(--degrau)); }
  .etapa:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 100%;
    bottom: calc(100% - var(--barra));
    width: var(--degrau);
    height: calc(var(--degrau) + var(--barra));
    background: var(--laranja);
    clip-path: polygon(0 calc(100% - var(--barra)), 0 100%, 100% var(--barra), 100% 0);
    transform-origin: left bottom;
    transition: transform 500ms var(--ease-saida) calc(var(--i, 0) * 300ms + 200ms);
  }
}

/* ===== Como trabalhamos (guia 9.6) ===== */
.passos {
  position: relative;
  display: grid;
  gap: var(--sp-7);
  padding-left: var(--sp-7);
}
.passos::before {
  content: "";
  position: absolute;
  left: 6px; top: 0.5rem; bottom: 0.5rem;
  width: 2px;
  background: var(--grafite);
  transform-origin: top;
  transition: transform 900ms var(--ease-saida);
}
.passo { position: relative; }
.passo::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-7));
  top: 1.25rem;
  width: 14px;
  height: 14px;
  background: var(--laranja);
  transition: transform 300ms var(--ease-pop) calc(300ms + var(--i, 0) * 150ms);
}
.passo:first-child::before { background: var(--grafite); box-shadow: inset 0 0 0 3px var(--laranja); }
.passo__num {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-numero);
  line-height: 1;
  letter-spacing: var(--ls-display);
  font-variant-numeric: tabular-nums;
  color: var(--grafite);
}
.passo .titulo-3 { margin-top: var(--sp-3); }
.passo p { margin-top: var(--sp-2); color: var(--grafite-suave); max-width: 30ch; }

@media (min-width: 768px) {
  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--gap-grid); padding-left: 0; padding-top: var(--sp-6); }
  .passos::before { display: none; }
  .passo::before { left: 0; top: calc(-1 * var(--sp-6)); }
}
@media (min-width: 1024px) {
  .passos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .passos::before {
    display: block;
    left: 0; right: 0; top: 6px; bottom: auto;
    width: auto; height: 2px;
    transform-origin: left;
  }
}

/* ===== Diferenciais (guia 9.7) ===== */
.dif {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-7);
}
.dif__lista { display: grid; gap: var(--sp-6); }
.dif__item { border-top: 2px solid var(--grafite); padding-top: var(--sp-4); }
.dif__num { font-weight: var(--peso-forte); font-size: var(--fs-pequeno); letter-spacing: 0.1em; }
.dif__item .titulo-3 { margin-top: var(--sp-2); }
.dif__item p { margin-top: var(--sp-2); }
.dif .secao__cabeca { margin-bottom: 0; }
.dif__geo { width: 100%; max-width: 320px; }
.dif__geo svg { width: 100%; height: auto; overflow: visible; }
.geo-forma {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity var(--dur-longa) var(--ease-saida), transform var(--dur-longa) var(--ease-saida);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.dif__cta { margin-top: 0; }

@media (min-width: 768px) {
  .dif__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--gap-grid); }
}
@media (min-width: 1024px) {
  .dif {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "cab cab cab cab cab . lis lis lis lis lis lis"
      "geo geo geo geo geo . lis lis lis lis lis lis"
      "geo geo geo geo geo . cta cta cta cta cta cta";
    column-gap: var(--gap-grid);
    row-gap: var(--sp-7);
  }
  .dif .secao__cabeca { grid-area: cab; }
  .dif__lista { grid-area: lis; align-self: start; }
  .dif__geo { grid-area: geo; max-width: 300px; }
  .dif__cta { grid-area: cta; align-self: end; }
}

/* ===== Projetos (guia 7.4 e 9.8) ===== */
.projetos__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-grid); }
.projetos__grid > li { display: flex; }
.card-projeto {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--superficie);
  clip-path: polygon(0 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% 100%, 0 100%);
  transition: background-color var(--dur-media), transform var(--dur-media) var(--ease-saida);
}
@media (hover: hover) {
  .card-projeto:hover { background: var(--superficie-2); transform: translateY(-4px); }
}
.card-projeto[data-placeholder]::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 2px dashed var(--laranja);
  pointer-events: none;
}
.card-projeto__img { position: relative; aspect-ratio: 16 / 10; background: var(--grafite); overflow: hidden; }
.card-projeto__img svg { width: 100%; height: 100%; }
.card-projeto__tarja {
  position: absolute; left: var(--sp-5); top: var(--sp-5);
  background: var(--laranja); color: var(--grafite);
  font-weight: var(--peso-forte); font-size: var(--fs-pequeno);
  padding: 0.25rem 0.625rem;
}
.card-projeto__corpo { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-6); flex: 1; }
.card-projeto dl { margin: 0; display: grid; gap: var(--sp-3); }
.card-projeto dt { font-weight: var(--peso-forte); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--laranja); }
.card-projeto dd { margin: var(--sp-1) 0 0; color: var(--gelo-suave); }
.card-projeto .link-seta { margin-top: auto; align-self: flex-start; }

.projetos__convite { display: grid; gap: var(--sp-6); align-items: center; }
.projetos__convite .titulo-display { max-width: 12ch; margin-top: var(--sp-4); }
.projetos__convite p { margin-top: var(--sp-5); max-width: var(--container-texto); color: var(--fg-suave); }
.projetos__seta { width: min(100%, 320px); color: var(--laranja); justify-self: end; }

@media (min-width: 768px) {
  .projetos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .projetos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .projetos__convite { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}

/* ===== FAQ (guia 7.5 e 9.10) ===== */
.faq__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
.faq__item { border-top: var(--borda-media) solid var(--grafite); }
.faq__lista > li:last-child .faq__item { border-bottom: var(--borda-media) solid var(--grafite); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  font-weight: var(--peso-forte);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline-offset: 2px; }
.faq__icone {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  background: var(--grafite);
  transition: background-color var(--dur-curta), transform var(--dur-micro) var(--ease-saida);
}
.faq__icone::before, .faq__icone::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 2.5px;
  margin: -1.25px 0 0 -7px;
  background: var(--laranja);
  transition: transform var(--dur-curta) var(--ease-entrada-saida), background-color var(--dur-curta);
}
.faq__icone::after { transform: rotate(90deg); }
.faq__item[open] .faq__icone { background: var(--laranja); }
.faq__item[open] .faq__icone::before { transform: rotate(45deg); background: var(--grafite); }
.faq__item[open] .faq__icone::after { transform: rotate(135deg); background: var(--grafite); }
@media (hover: hover) {
  .faq__item summary:hover .faq__icone { transform: translate(2px, -2px); }
}
.faq__resposta {
  padding-bottom: var(--sp-5);
  max-width: var(--container-texto);
  color: var(--grafite-suave);
}
.faq__resposta p + p { margin-top: var(--sp-3); }
.faq__item[open] .faq__resposta { animation: faq-abre var(--dur-curta) var(--ease-saida); }
@keyframes faq-abre { from { opacity: 0; transform: translateY(-8px); } }
.faq__mais { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.faq__mais p { font-weight: var(--peso-forte); }

@media (min-width: 1024px) {
  .faq__layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); }
  .faq__cabeca { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--header-h) + 2rem); }
  .faq__conteudo { grid-column: 6 / 13; }
}

/* ===== CTA final (guia 9.11) ===== */
.cta-final {
  z-index: 2;
  margin-top: -48px;
  padding-block: calc(var(--secao-y) * 1.1);
  text-align: center;
  overflow: hidden;
  clip-path: polygon(0 48px, 48px 0, 100% 0, 100% 100%, 0 100%);
  background-image:
    linear-gradient(var(--grade-escura) 1px, transparent 1px),
    linear-gradient(90deg, var(--grade-escura) 1px, transparent 1px);
  background-size: 80px 80px;
}
.cta-final__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.cta-final__titulo {
  margin-top: var(--sp-5);
  font-size: var(--fs-cta-final);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-display);
  max-width: 16ch;
}
.cta-final__corpo { margin-top: var(--sp-5); max-width: 36rem; font-size: var(--fs-lead); line-height: 1.5; }
.cta-final__acoes { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); margin-top: var(--sp-7); width: 100%; }
.cta-final__link {
  font-weight: var(--peso-forte);
  color: var(--grafite);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.cta-final__geo { display: none; }
@media (min-width: 768px) {
  .cta-final__geo {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(160px, 18vw, 240px);
    height: auto;
    color: var(--grafite);
  }
}

/* ===== Contato e formulário (guia 7.6 e 9.12) ===== */
.contato__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
.form { display: grid; gap: var(--sp-5); }
.form__legenda { font-size: var(--fs-pequeno); color: var(--gelo-suave); }
.form__legenda span, .req { color: var(--laranja); }
.form__resumo {
  border-left: var(--barra) solid var(--erro-escuro);
  padding: var(--sp-3) var(--sp-4);
  background: var(--superficie);
  color: var(--erro-escuro);
  font-weight: var(--peso-forte);
}
.form__resumo:empty { display: none; }
.form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.campo { display: grid; gap: var(--sp-2); min-width: 0; }
.campo label { font-weight: var(--peso-forte); font-size: var(--fs-pequeno); color: var(--gelo); }
.campo input:not([type="checkbox"]), .campo select, .campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 1rem;
  font-family: var(--fonte-texto);
  font-size: 1rem;
  color: var(--gelo);
  background: var(--superficie);
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio-campo);
  transition: border-color var(--dur-micro);
}
.campo textarea { min-height: 140px; padding-block: 0.875rem; resize: vertical; line-height: 1.5; }
.campo ::placeholder { color: var(--placeholder); opacity: 1; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  border-color: var(--laranja);
  outline: 2px solid var(--laranja);
  outline-offset: 2px;
}
.campo [aria-invalid="true"] { border-color: var(--erro-escuro) !important; }
.campo__select { position: relative; }
.campo__select select { appearance: none; -webkit-appearance: none; padding-right: 3rem; cursor: pointer; }
.campo__select select option { background: var(--superficie); color: var(--gelo); }
.campo__select::after {
  content: "";
  position: absolute;
  right: 1.125rem;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--gelo);
  border-bottom: 2px solid var(--gelo);
  transform: rotate(45deg);
  pointer-events: none;
}
.campo__erro {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-pequeno);
  line-height: 1.4;
  color: var(--erro-escuro);
}
.campo__erro svg { flex: none; margin-top: 2px; }
.campo--check { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: var(--sp-3); }
.campo--check input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--laranja);
  cursor: pointer;
}
.campo--check label { font-weight: var(--peso-regular); font-size: var(--fs-pequeno); line-height: 1.5; color: var(--gelo-suave); }
.campo--check .campo__erro { grid-column: 1 / -1; }
.texto-link { color: var(--fg, var(--gelo)); text-decoration: underline; text-decoration-color: var(--laranja); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
[data-tema="claro"] .texto-link { text-decoration-color: var(--laranja-texto); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__acoes { display: grid; gap: var(--sp-3); }
.form__acoes .btn { width: 100%; }
.form__micro { font-size: var(--fs-pequeno); color: var(--gelo-suave); }
.spinner { display: none; width: 10px; height: 10px; background: currentColor; animation: gira 800ms linear infinite; }
.btn.is-enviando .seta { display: none; }
.btn.is-enviando .spinner { display: block; }
@keyframes gira { to { transform: rotate(360deg); } }

.form__sem-canal {
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--superficie);
  color: var(--gelo);
  font-size: var(--fs-pequeno);
}
.form__falha {
  border-left: var(--barra) solid var(--erro-escuro);
  padding-left: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}
.form__falha p { color: var(--gelo); }
.form__sucesso {
  border-left: var(--barra) solid var(--sucesso);
  padding-left: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}
.form__sucesso .titulo-3:focus { outline: none; }
.form__sucesso .titulo-3:focus-visible { outline: 3px solid var(--laranja); }
.form__sucesso p { color: var(--gelo-suave); max-width: 34rem; }

.canais .titulo-3 { margin-bottom: var(--sp-4); }
.canal {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--linha-escura);
}
.canal:last-child { border-bottom: 1px solid var(--linha-escura); }
.canal__icone { display: grid; place-items: center; flex: none; width: 40px; height: 40px; background: var(--superficie); color: var(--laranja); }
.canal__icone svg { width: 20px; height: 20px; }
.canal__info { display: grid; gap: var(--sp-1); min-width: 0; }
.canal__rotulo { font-weight: var(--peso-forte); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--laranja); }
.canal__valor { color: var(--gelo); overflow-wrap: anywhere; }
a.canal__valor[href] { text-decoration: underline; text-decoration-color: var(--laranja); text-underline-offset: 3px; }

@media (min-width: 768px) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__grid .campo--largo { grid-column: 1 / -1; }
  .form__acoes { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--sp-5); }
  .form__acoes .btn { width: auto; }
}
@media (min-width: 1024px) {
  .contato__layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-grid); }
  .contato__form { grid-column: 1 / 8; }
  .canais { grid-column: 9 / 13; align-self: start; }
}

/* ===== Rodapé (guia 7.9) ===== */
.rodape {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-9) var(--sp-6);
}
.rodape__topo { display: grid; gap: var(--sp-5); }
.rodape__logo { display: inline-flex; color: var(--gelo); width: 200px; }
.rodape__logo svg { width: 200px; height: auto; }
.rodape__frase {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: var(--ls-h3);
}
.rodape__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6) var(--gap-grid);
  margin-top: var(--sp-8);
}
.rodape__col h2 {
  font-family: var(--fonte-texto);
  font-weight: var(--peso-forte);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--laranja);
  margin-bottom: var(--sp-3);
}
.rodape__col ul, .canais ul { list-style: none; margin: 0; padding: 0; }
.rodape__col li { padding-block: 0.125rem; }
.rodape__col a, .rodape__col button, .rodape__col span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 0.9375rem;
  color: var(--gelo-suave);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.rodape__col button { padding: 0; background: none; border: 0; text-align: left; }
@media (hover: hover) {
  .rodape__col a[href]:hover, .rodape__col button:hover {
    color: var(--gelo);
    text-decoration: underline;
    text-decoration-color: var(--laranja);
    text-underline-offset: 3px;
  }
}
.rodape__legal {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--linha-escura);
  font-size: 0.8125rem;
  color: var(--gelo-suave);
}
.rodape__marca-wrap { position: relative; margin-top: var(--sp-6); height: 0; padding-bottom: 14.8%; }
.rodape__marca {
  position: absolute;
  left: 0; right: 0; top: 0;
  width: 100%;
  height: auto;
  color: var(--grafite);
  pointer-events: none;
}
@media (min-width: 768px) {
  .rodape__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .rodape__topo { grid-template-columns: auto 1fr; align-items: end; column-gap: var(--sp-8); }
  .rodape__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* o wordmark gigante é cortado em ~40% da altura pela base do rodapé */
.rodape { padding-bottom: 0; }

/* ===== Botão flutuante de WhatsApp (guia 7.7) ===== */
.wa-flutuante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--z-whatsapp);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: var(--laranja);
  color: var(--grafite);
  box-shadow: 0 0 0 2px var(--grafite), var(--sombra-flutuante);
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(12px - var(--wa-offset, 0px)));
  transition: opacity var(--dur-media) var(--ease-saida), transform var(--dur-media) var(--ease-saida),
              background-color var(--dur-curta), color var(--dur-curta);
}
.wa-flutuante svg { width: 28px; height: 28px; }
.wa-flutuante.is-visivel { opacity: 1; pointer-events: auto; transform: translateY(calc(-1 * var(--wa-offset, 0px))); }
.wa-flutuante.is-visivel.is-escondido { opacity: 0; pointer-events: none; }
.wa-flutuante.no-laranja { background: var(--grafite); color: var(--laranja); box-shadow: 0 0 0 2px var(--gelo), var(--sombra-flutuante); }
.wa-flutuante:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gelo), 0 0 0 6px var(--grafite), var(--sombra-flutuante); }
.wa-flutuante__rotulo {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  margin-top: -1.125rem;
  padding: 0 0.875rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  white-space: nowrap;
  background: var(--grafite);
  color: var(--gelo);
  font-weight: var(--peso-forte);
  font-size: var(--fs-pequeno);
  box-shadow: 0 0 0 1px var(--linha-escura);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--dur-curta), transform var(--dur-curta) var(--ease-saida);
  pointer-events: none;
}
@media (min-width: 1024px) {
  .wa-flutuante { right: 24px; bottom: 24px; }
}
@media (min-width: 1024px) and (hover: hover) {
  .wa-flutuante:hover { transform: translateY(calc(-3px - var(--wa-offset, 0px))); }
  .wa-flutuante:hover .wa-flutuante__rotulo, .wa-flutuante:focus-visible .wa-flutuante__rotulo { opacity: 1; transform: none; }
}

/* ===== Aviso de cookies (guia 7.8) ===== */
.cookies {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: var(--z-cookies);
  padding: var(--sp-5);
  border: 1px solid var(--linha-escura);
  border-top: 4px solid var(--laranja);
  box-shadow: var(--sombra-flutuante);
  font-size: var(--fs-pequeno);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(16px);
  visibility: hidden;
  transition: opacity var(--dur-media) var(--ease-saida), transform var(--dur-media) var(--ease-saida), visibility 0s linear var(--dur-media);
}
.cookies[data-tema] { background: var(--superficie); }
.cookies.is-visivel { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.cookies__acoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.cookies__acoes .btn { min-height: 44px; padding: 0.625rem 1rem; font-size: 0.9375rem; }
/* tablet/desktop: barra fina colada na base, pra não cobrir os CTAs do hero */
@media (min-width: 768px) {
  .cookies {
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-2) var(--gutter);
    border-width: 4px 0 0;
    box-shadow: none;
  }
  .cookies p { flex: 1; min-width: 0; }
  .cookies__acoes { flex: none; grid-template-columns: repeat(2, 7.5rem); margin-top: 0; }
}
.aviso-status {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: var(--z-cookies);
  width: max-content;
  max-width: calc(100% - 24px);
  padding: var(--sp-3) var(--sp-5);
  background: var(--grafite);
  color: var(--gelo);
  border-left: 4px solid var(--laranja);
  box-shadow: var(--sombra-flutuante);
  font-size: var(--fs-pequeno);
  transform: translateX(-50%);
}
.aviso-status:empty { display: none; }

/* ===== Política de privacidade (guia 9.14) ===== */
.pagina-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--sp-8));
  padding-bottom: var(--sp-8);
}
.pagina-hero::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: clamp(140px, 28vw, 380px);
  height: 100%;
  background: var(--laranja);
  clip-path: polygon(100% 0, 100% 45%, 55% 100%, 0 100%);
  opacity: 1;
}
/* mobile: a faixa vira um canto pequeno no topo, longe do texto */
@media (max-width: 767.98px) {
  .pagina-hero::after { top: var(--header-h); bottom: auto; width: 96px; height: 96px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
}
.pagina-hero .container { position: relative; z-index: 1; }
.pagina-hero .titulo { margin-top: var(--sp-4); max-width: 14ch; }
.pagina-hero p { margin-top: var(--sp-4); color: var(--gelo-suave); max-width: 30rem; }
.pagina-hero .btn { margin-top: var(--sp-6); }
.texto-legal { max-width: var(--container-texto); }
.texto-legal h2 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  margin-top: var(--sp-7);
}
.texto-legal > :first-child { margin-top: 0; }
.texto-legal p, .texto-legal ul { margin-top: var(--sp-4); }
.texto-legal ul { padding-left: 1.25rem; }
.texto-legal li + li { margin-top: var(--sp-2); }
.texto-legal li::marker { color: var(--laranja-texto); }
.texto-legal .resumo { border-left: var(--barra) solid var(--laranja); padding-left: var(--sp-5); }
.texto-legal .secao__cta { margin-top: var(--sp-8); }

/* ===== Movimento (guia 8) ===== */
/* 1–4: hero no load. O H1 não anima (é o LCP), só o ponto. */
.hero-faixa, .hero-corte, .hero-seta { transform-box: fill-box; }
.hero-faixa { animation: geo-entra var(--dur-hero) var(--ease-saida) both; }
.hero-corte { animation: geo-entra var(--dur-hero) var(--ease-saida) 150ms both; }
.hero-seta {
  animation: seta-entra var(--dur-hero) var(--ease-saida) 500ms both,
             seta-respira 3.2s ease-in-out 1.6s infinite alternate;
}
.hero.is-fora .hero-seta { animation-play-state: paused; }
@keyframes geo-entra { from { opacity: 0; transform: translate(-12%, 12%); } }
@keyframes seta-entra { from { opacity: 0; transform: translate(-24px, 24px); } }
@keyframes seta-respira { from { transform: translate(0, 0); } to { transform: translate(6px, -6px); } }

.hero__titulo .ponto {
  display: inline-block;
  transform-origin: 50% 85%;
  animation: ponto-pop 400ms var(--ease-pop) 700ms both;
}
@keyframes ponto-pop { from { transform: scale(0); } }

.hero__lead { animation: sobe var(--dur-longa) var(--ease-saida) 150ms both; }
.hero__ctas { animation: sobe var(--dur-longa) var(--ease-saida) 250ms both; }
@keyframes sobe { from { opacity: 0; transform: translateY(16px); } }

/* 5: faixa do hero com a rolagem (só onde há scroll-driven animations) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-faixa-scroll {
      transform-box: fill-box;
      animation: faixa-rola linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }
}
@keyframes faixa-rola { to { transform: translate(60px, -60px); } }

/* 6: reveal (estado inicial só com JS) */
[data-reveal] {
  transition: opacity var(--dur-longa) var(--ease-saida), transform var(--dur-longa) var(--ease-saida);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
html.js [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(var(--reveal-dist)); }
html.js [data-reveal="diagonal"]:not(.is-visible) { transform: translate(-24px, 24px); }

/* 8: fluxo */
html.js .fluxo:not(.is-visible)::before { transform: scaleY(0); }
html.js .fluxo:not(.is-visible) .etapa::before { transform: scaleX(0); }
html.js .fluxo:not(.is-visible) .etapa::after { transform: scale(0); }
html.js .fluxo:not(.is-visible) .etapa__corpo { opacity: 0; transform: translate(-24px, 24px); }

/* 9: linha do processo */
html.js .passos:not(.is-visible)::before { transform: scaleY(0); }
@media (min-width: 1024px) {
  html.js .passos:not(.is-visible)::before { transform: scaleX(0); }
}
html.js .passos:not(.is-visible) .passo::before { transform: scale(0); }

/* 10: grid geométrico */
html.js .js-geo:not(.is-visible) .geo-forma { opacity: 0; transform: scale(0.6) rotate(-90deg); }

/* Reduced motion: tudo montado, sem deslizar */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  html.js .fluxo::before, html.js .fluxo .etapa::before, html.js .fluxo .etapa::after,
  html.js .fluxo .etapa__corpo, html.js .passos::before, html.js .passos .passo::before,
  html.js .js-geo .geo-forma { opacity: 1 !important; transform: none !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__trilho { animation: none; width: auto; }
  .marquee__lista { flex-wrap: wrap; justify-content: center; row-gap: var(--sp-1); }
  .marquee__lista[aria-hidden="true"], .marquee__pausa { display: none; }
}


/* ===== v2: camada de efeitos ===== */
/* Tudo sob html.fx (posta pelo js/fx.js) ou html.fx-3d (posta pelo js/hero3d.js).
   Sem essas classes (nível 0, reduced-motion, vendor fora do ar) nada aqui vale. */

/* Peças que só existem com a v2 */
.header__progresso, .lamina, .fluxo__linha, .fluxo__numeral { display: none; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* GSAP assume as transições: desliga as transições CSS do v1 que brigariam com ele */
html.fx [data-reveal],
html.fx .etapa__corpo,
html.fx .geo-forma { transition: none; }
html.fx .marquee__trilho { animation: none; }

/* Máscara pros números (odômetro) */
.fx-mask { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: inherit; }
.fx-mask > span { display: inline-block; }

/* F2: barra de progresso colada na base do header */
html.fx .header__progresso {
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: var(--progresso-h);
  background: var(--laranja);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* F4: eyebrow decode (o texto real fica no .sr-only) */
.eyebrow__fx { display: inline-block; white-space: nowrap; }

/* F7: lâmina diagonal */
html.fx .lamina {
  position: fixed;
  inset: 0;
  z-index: var(--z-lamina);
  overflow: hidden;
  pointer-events: none;
}
html.fx .lamina.is-ativa { display: block; }
.lamina__faixa {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70vmax;
  height: 300vmax;
  margin: -150vmax 0 0 -35vmax;
  background: var(--cor-lamina, var(--laranja));
}
.lamina__faixa::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  right: calc(100% + 40px);
  width: 12px;
  background: var(--gelo);
}

/* F10: triângulo de Serviços com parallax (variáveis animadas pelo GSAP) */
@media (min-width: 1024px) {
  html.fx .servicos::before {
    transform: translateY(calc(var(--tri-y, 0) * 1%)) rotate(calc(var(--tri-r, 0) * 1deg));
    transform-origin: 100% 0;
  }
}

/* 12.8: escada — linha em degrau em SVG no desktop */
.fluxo-palco { position: relative; }
html.fx .fluxo-palco { z-index: 0; }
html.fx .fluxo--fx .etapa::before,
html.fx .fluxo--fx .etapa::after { opacity: 0; }
html.fx .fluxo--fx ~ .fluxo__linha {
  display: block;
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
html.fx .fluxo--fx ~ .fluxo__numeral {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  height: 0.82em;
  overflow: hidden;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: 28vw;
  line-height: 0.82;
  letter-spacing: var(--ls-display);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--linha-escura);
  pointer-events: none;
  user-select: none;
}
.fluxo__numeral span { display: block; }
html.fx .etapa__corpo { transition: background-color var(--dur-fx-curta) var(--ease-power3); }
html.fx .etapa.is-ativa .etapa__corpo { background: var(--superficie-2); }
/* tablet/mobile: barras de topo e barra vertical guiadas por variável */
html.fx .fluxo.fx-barras .etapa::before { transform: scaleX(var(--barra-p, 1)); transition: none; }
/* mobile: a barra vertical cresce com a rolagem */
html.fx .fluxo.fx-scrub::before { transform: scaleY(var(--fluxo-p, 0)); transition: none; }

/* F12: linha do processo ligada à rolagem + marcadores girando */
html.fx .passos.fx-scrub::before { transition: none; transform: scaleY(var(--linha-p, 0)); }
@media (min-width: 1024px) {
  html.fx .passos.fx-scrub::before { transform: scaleX(var(--linha-p, 0)); }
}
html.fx .passos.fx-scrub .passo::before {
  transform: scale(0) rotate(-90deg);
  transition: transform 400ms cubic-bezier(0.34, 1.8, 0.64, 1);
}
html.fx .passos.fx-scrub .passo.is-marcado::before { transform: none; }
html.fx .passos.fx-scrub .passo:first-child.is-marcado::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-7));
  top: 1.25rem;
  width: 14px;
  height: 14px;
  border: 2px solid var(--laranja);
  opacity: 0;
  animation: fx-pulso 800ms var(--ease-power3) 1;
  pointer-events: none;
}
@media (min-width: 768px) {
  html.fx .passos.fx-scrub .passo:first-child.is-marcado::after { left: 0; top: calc(-1 * var(--sp-6)); }
}
@keyframes fx-pulso { from { transform: scale(1); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

/* F13: linha superior dos diferenciais vira peça animável */
html.fx .dif__item { position: relative; border-top-color: transparent; }
html.fx .dif__item::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 2px;
  background: var(--grafite);
  transform: scaleX(var(--l, 1));
  transform-origin: left;
}

/* 12.7: microinterações (desktop com mouse) */
html.fx-desk .card-servico, html.fx-desk .card-projeto { transition: none; }
.fx-spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(var(--spot-tamanho) circle at var(--mx, 50%) var(--my, 50%), var(--spot-claro), transparent 60%);
  transition: opacity var(--dur-curta) var(--ease-power3);
}
.card-projeto .fx-spot { background: radial-gradient(var(--spot-tamanho) circle at var(--mx, 50%) var(--my, 50%), var(--spot-escuro), transparent 60%); }
.fx-spot.is-on { opacity: 1; }
html.fx-desk .card-servico__icone [fill="#F5F5F2"],
html.fx-desk .card-servico__icone [stroke="#F5F5F2"] { transition: transform var(--dur-curta) var(--ease-expo); }
html.fx-desk .card-servico:hover .card-servico__icone [fill="#F5F5F2"],
html.fx-desk .card-servico:hover .card-servico__icone [stroke="#F5F5F2"] { transform: translate(2px, -2px); }
html.fx .btn .seta, html.fx .link-seta .seta { transition-timing-function: var(--ease-expo); }
.btn__mag { display: inline-flex; align-items: center; justify-content: center; gap: inherit; pointer-events: none; }

/* 12.5: hero 3D */
.hero__3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-canvas);
  pointer-events: none;
  opacity: 0;
}
@media (min-width: 1024px) {
  html.fx-3d .hero { background-image: none; }
}
.hero__pausa3d {
  position: absolute;
  z-index: 2;
  left: 12px; /* mobile: canto esquerdo da faixa, longe do WhatsApp flutuante */
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gelo);
  transition: transform var(--dur-fx-curta) var(--ease-power3);
}
.hero__pausa3d span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--grafite);
  border: 1.5px solid var(--gelo);
}
.hero__pausa3d .ic-play { display: none; }
.hero__pausa3d.is-pausado .ic-pausa { display: none; }
.hero__pausa3d.is-pausado .ic-play { display: block; }
@media (min-width: 1024px) {
  .hero__pausa3d { left: auto; right: 96px; bottom: 24px; transform: translateY(calc(-1 * var(--cookies-h, 0px))); }
}

/* F5: o ponto do título pula (precisa ser caixa) */
html.fx .titulo .ponto { display: inline-block; }
/* F15: grid de fundo do CTA final desliza */
html.fx .cta-final { background-position: 0 var(--grid-y, 0px); }
/* hero: texto liberado pro GSAP (depois do load + 1 s) */
html.fx-hero-livre .hero__lead, html.fx-hero-livre .hero__ctas { animation: none; }
/* âncoras movem o foco pro destino: sem anel quando o foco veio do mouse */
html.fx section[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }