/* =========================================================
   CFx Brasil — site institucional
   Sistema de medidas: escala de tipografia fluida (clamp),
   container de 1240px e espaçamento de seção padronizado.
   ========================================================= */

:root {
  /* Cores */
  --laranja: #fd9002;
  --laranja-claro: #ffa526;
  --preto: #000;
  --hero: #0e0e0e;
  --painel: #1c1c1c;
  --superficie: #161616;
  --borda: #262626;
  --texto: #d9d9d9;
  --texto-suave: #9a9a9a;
  --texto-claro: #d0d0d0;
  --campo: #d9d9d9;
  --circulo: #c2c2c2;

  /* Fontes: Inter para títulos e textos, K2D para subtítulos de cards e itens */
  --fonte-ui: "Inter", system-ui, sans-serif;
  --fonte-titulo: "K2D", system-ui, sans-serif;

  /* Escala de tipografia */
  --fs-display: clamp(2.25rem, 1.25rem + 2.5vw, 3.75rem); /* 36 → 60px  título principal */
  --fs-h2: clamp(1.875rem, 1rem + 1.8vw, 2.75rem);        /* 30 → 44px  títulos de seção */
  --fs-h3: clamp(1.25rem, 1.15rem + .35vw, 1.5rem);       /* 20 → 24px  títulos de cards */
  --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);      /* 17 → 20px  subtítulos */
  --fs-body: 1rem;                                        /* 16px */
  --fs-small: .9375rem;                                   /* 15px */
  --fs-xs: .8125rem;                                      /* 13px */

  /* Layout */
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --secao: clamp(72px, 9vw, 128px);
  --raio: 24px;
  --raio-campo: 12px;

  /* Identidade do Figma: faixa cinza à esquerda do hero */
  --g: max(0px, calc((100vw - 1920px) / 2));   /* margem extra em telas > 1920px */
  --painel-w: min(22.6vw, 434px);
  --hero-h: 100vh;               /* hero ocupa a tela inteira */

  /* Cabeçalho fixo */
  --topo-h: 88px;
  --topo-h-rolado: 68px;
}

/* Links internos param abaixo do cabeçalho fixo */
section[id],
footer[id] { scroll-margin-top: calc(var(--topo-h-rolado) + 16px); }

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--preto);
  color: #fff;
  font-family: var(--fonte-ui);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

:focus-visible { outline: 2px solid var(--laranja); outline-offset: 4px; border-radius: 4px; }

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

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--laranja); color: #000; padding: 10px 16px; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 16px; }

/* Container padrão das seções */
.servicos,
.tambem,
.orcamento,
.rodape__colunas,
.rodape__copy {
  width: min(calc(100% - 2 * var(--gutter)), var(--container));
  margin-inline: auto;
}

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px;
  padding: 0 28px;
  border-radius: 50px;
  background: var(--laranja);
  border: 1.5px solid var(--laranja);
  color: #0e0e0e;
  font-family: var(--fonte-ui);
  font-weight: 600;
  font-size: var(--fs-body);
  white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.botao:hover { background: var(--laranja-claro); border-color: var(--laranja-claro); transform: translateY(-2px); }
.botao i { font-size: .85em; transition: transform .2s; }
.botao:hover i { transform: translateX(3px); }

.botao--contorno {
  background: transparent;
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
.botao--contorno:hover { background: transparent; border-color: var(--laranja); color: var(--laranja); }

/* ---------- Títulos de seção ---------- */
.chamada {
  color: var(--laranja);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.titulo-secao {
  font-weight: 900;
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: -.01em;
}
.servicos__sub {
  margin-top: 16px;
  max-width: 60ch;
  color: var(--texto-suave);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

/* ---------- Selos (local / Brasil) ---------- */
.selo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50px;
  font-size: var(--fs-xs);
  color: var(--texto);
  white-space: nowrap;
}
.selo i { color: var(--laranja); font-size: .9em; }
.selo--discreto { border-color: rgba(255, 255, 255, .14); margin-top: 12px; }

/* ---------- Cabeçalho ---------- */
/* Fixo no topo: transparente sobre o hero, com fundo depois que a página rola */
.topo {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  height: var(--topo-h);
  padding-inline: calc(var(--g) + var(--gutter));
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid transparent;
  transition: height .3s ease, background-color .3s ease, border-color .3s ease;
}
.topo--rolado {
  height: var(--topo-h-rolado);
  background: rgba(14, 14, 14, .85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(255, 255, 255, .07);
}
.topo__logo img { height: 44px; width: auto; transition: height .3s ease; }
.topo--rolado .topo__logo img { height: 36px; }
.topo__direita { display: flex; align-items: center; gap: 40px; }
.topo__nav { display: flex; gap: 32px; }
.topo__nav a,
.topo__menu span {
  font-size: var(--fs-small);
  font-weight: 500;
  color: #e6e6e6;
  transition: color .2s;
}
.topo__nav a:hover,
.topo__menu:hover span { color: var(--laranja); }
.topo__menu { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.topo__menu img { width: 26px; height: auto; }

/* ---------- Menu lateral ---------- */
.menu-fundo {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
}
.menu-lateral {
  position: fixed; z-index: 50; top: 0; right: 0; bottom: 0;
  width: min(400px, 100%);
  background: var(--hero);
  border-left: 1px solid var(--borda);
  padding: 88px 40px 40px;
  overflow-y: auto;
}
.menu-lateral[hidden], .menu-fundo[hidden] { display: none; }
.menu-lateral__fechar {
  position: absolute; top: 22px; right: 24px;
  width: 44px; height: 44px; font-size: 24px;
  display: grid; place-items: center;
}
.menu-lateral__fechar:hover { color: var(--laranja); }
.menu-lateral__links { display: flex; flex-direction: column; }
.menu-lateral__links a {
  font-family: var(--fonte-titulo); font-weight: 500;
  font-size: 1.5rem; padding: 10px 0;
  border-bottom: 1px solid #1f1f1f;
  transition: color .2s, padding-left .2s;
}
.menu-lateral__links a:hover { color: var(--laranja); padding-left: 8px; }

/* ---------- Palco (hero + serviços com padrão ao fundo) ---------- */
.palco { position: relative; isolation: isolate; overflow-x: clip; }

/* ---------- Hero ---------- */
.hero {
  position: relative;            /* sem z-index: painel e texto ficam acima do padrão */
  height: var(--hero-h);
  min-height: 560px;             /* telas muito baixas: o conteúdo nunca é cortado */
  display: flex; align-items: center;
}
/* "svh" desconta as barras do navegador no celular, para o hero não passar da tela */
@supports (height: 100svh) {
  :root { --hero-h: 100svh; }
}
.hero::before {                  /* fundo do hero fica abaixo do padrão */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--hero);
}
.hero__painel {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: 0;
  width: calc(var(--g) + var(--painel-w));
  background: var(--painel);
}
/* Padrão de logos (2618 × 1536, o grupo inteiro do Figma).
   O trecho do quadro de 1920px fica centralizado na tela e as sobras laterais
   cobrem telas mais largas. Até 1920px ele encolhe junto com a tela; acima de
   2266px cresce o necessário para nunca deixar laterais vazias. */
.hero__padrao {
  --padrao-w: max(min(2618px, 136.35vw), 115.53vw);
  position: absolute; z-index: 0;
  top: calc(100% - var(--padrao-w) * .1795);   /* começa 470px (no Figma) antes do fim do hero */
  left: 50%;
  transform: translateX(-56.72%);              /* centro do quadro (x = 1485 de 2618) no meio da tela */
  width: var(--padrao-w);
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.hero__conteudo {
  position: relative; z-index: 3;
  margin-left: calc(var(--g) + var(--painel-w) + clamp(32px, 3.9vw, 74px));
  padding-right: var(--gutter);
  max-width: calc(640px + var(--gutter));
  padding-top: 40px;             /* compensa o cabeçalho */
}
.hero__conteudo::before {        /* traço branco do Figma */
  content: ""; display: block;
  width: min(340px, 60%);
  height: 4px;
  background: #fff;
  border-radius: 2px;
  margin-bottom: 28px;
}
.hero__titulo {
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.hero__texto {
  margin-top: 20px;
  max-width: 54ch;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--texto);
}
.hero__acoes { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px 16px; }

/* traços laranja do Figma */
.traco {
  position: absolute; z-index: 3;
  height: 6px;
  background: var(--laranja);
  --traco-x: min(5vw, 96px);
}
.traco--a,
.traco--b {
  left: calc(var(--g) + var(--traco-x));
  width: calc(var(--painel-w) - var(--traco-x));
}
.traco--a { bottom: 16px; }
.traco--b { bottom: -22px; }
.traco--c {
  bottom: -63px;
  left: calc(var(--g) + min(50vw, 961px));
  width: min(45.4vw, 872px);
}

/* ---------- Serviços (4 linhas principais) ---------- */
.servicos {
  position: relative; z-index: 1;
  padding-top: clamp(140px, 13vw, 220px);
}
.servicos__cabeca { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.card {
  display: flex; flex-direction: column;
  padding: 28px 26px 26px;
  border-radius: var(--raio);
  background: rgba(100, 100, 100, .2);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), background-color .35s;
}
/* estado laranja: o card em destaque, ou o card sob o mouse */
.cards:not(:hover) .card--destaque,
.card:hover,
.card:focus-within {
  background: rgba(253, 144, 2, .2);
  transform: translateY(-6px);
}
.card__topo {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px;
}
.card__num { font-family: var(--fonte-titulo); font-size: .875rem; color: var(--texto-suave); }
.card__icone { font-size: 32px; color: var(--laranja); }
.card__nome {
  font-family: var(--fonte-titulo); font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.2;
}
.card__desc {
  margin-top: 8px;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--texto);
}
.card__itens {
  margin-top: 20px;
  display: flex; flex-direction: column; gap: 10px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: #bdbdbd;
}
.card__itens li { position: relative; padding-left: 18px; }
.card__itens li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--laranja);
}
.card__base {
  margin-top: auto;
  padding-top: 28px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.card__link {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-small);
  font-weight: 600;
  transition: color .2s;
}
.card__link i { font-size: .8em; transition: transform .2s; }
.card__link:hover { color: var(--laranja); }
.card__link:hover i { transform: translateX(4px); }

/* ---------- Também fazemos ---------- */
.tambem {
  padding-top: var(--secao);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.tambem__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
}
.item {
  display: flex; gap: 18px;
  padding: 24px 0;
  border-top: 1px solid var(--borda);
}
.item__icone {
  flex: none;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--superficie);
  color: var(--laranja);
  font-size: 18px;
}
.item h3 {
  font-family: var(--fonte-titulo); font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
}
.item p {
  margin-top: 6px;
  color: var(--texto-suave);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* ---------- Orçamento ---------- */
.orcamento {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding-block: var(--secao);
}
.orcamento__titulo {
  display: flex; flex-direction: column;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin-bottom: 20px;
}
.orcamento__titulo strong { font-weight: 900; color: #fff; }
.orcamento__titulo span { font-weight: 400; color: var(--texto-claro); }
.orcamento__apoio {
  max-width: 46ch;
  color: var(--texto-suave);
  font-size: var(--fs-lead);
  line-height: 1.55;
}

.formulario {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: clamp(24px, 3vw, 40px);
  background: rgba(47, 47, 47, .39);
  border-radius: 0 var(--raio) var(--raio) var(--raio);
}
.campo {
  width: 100%;
  height: 52px;
  border: 2px solid transparent;
  border-radius: var(--raio-campo);
  background: var(--campo);
  color: #141414;
  font-family: var(--fonte-ui);
  font-size: var(--fs-body);
  padding: 0 18px;
  transition: border-color .2s, background-color .2s;
}
.campo::placeholder { color: #6d6d6d; }
.campo:focus { outline: none; border-color: var(--laranja); background: #eee; }
.campo[aria-invalid="true"] { border-color: #ff5a4f; }
.campo--cheio { grid-column: 1 / -1; }
.campo--select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23141414' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
.campo--select:invalid { color: #6d6d6d; }
.campo--select option { color: #141414; }
.campo--area {
  height: 140px;
  padding-top: 14px;
  resize: vertical;
}
.formulario__erro {
  grid-column: 1 / -1;
  color: #ff7a70;
  font-size: .875rem;
}
.formulario__enviar { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }

/* ---------- Rodapé ---------- */
.rodape {
  border-top: 6px solid var(--laranja);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--texto);
}
.rodape__colunas {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: 40px;
  padding-block: 64px 48px;
}
.rodape__marca img { height: 48px; width: auto; }
.rodape__marca p { margin-top: 16px; max-width: 30ch; color: var(--texto-suave); }

.rodape__links,
.rodape__contato {
  border-left: 1px solid rgba(255, 255, 255, .15);
  padding-left: clamp(24px, 3vw, 48px);
}
.rodape__links nav { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rodape__links nav a,
.rodape__contato a {
  font-size: var(--fs-body);
  color: #fff;
  transition: color .2s;
}
.rodape__links nav a:hover,
.rodape__contato a:hover { color: var(--laranja); }

.rodape__sociais { display: flex; gap: 12px; margin-top: 20px; }
.rodape__sociais a {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--circulo);
  color: #111;
  font-size: 18px;
  transition: background-color .2s, transform .2s;
}
.rodape__sociais a:hover { background: var(--laranja); transform: translateY(-2px); }

.rodape__contato {
  font-style: normal;
  display: flex; flex-direction: column; gap: 20px;
}
.rodape__contato p { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rodape__contato span {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.rodape__contato a { overflow-wrap: anywhere; }

.rodape__copy {
  border-top: 1px solid var(--borda);
  padding: 24px 0 32px;
  text-align: center;
  font-size: .875rem;
  color: var(--texto-suave);
}

/* ---------- Aviso de confirmação ---------- */
.aviso {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, .7);
  backdrop-filter: blur(4px);
}
.aviso[hidden] { display: none; }
.aviso__caixa {
  width: min(440px, 100%);
  padding: 36px 32px 32px;
  border-radius: 0 var(--raio) var(--raio) var(--raio);
  background: var(--superficie);
  border: 1px solid #2a2a2a;
  text-align: center;
}
.aviso__caixa h2 { font-size: 1.75rem; font-weight: 900; margin-bottom: 12px; }
.aviso__caixa p { color: var(--texto); line-height: 1.6; margin-bottom: 24px; overflow-wrap: anywhere; }
.aviso__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.aviso__acoes [hidden] { display: none; }

/* ---------- Animações ---------- */

/* Itens que aparecem conforme a rolagem.
   "translate" é usado em vez de "transform" para não brigar com o hover dos cards. */
.js-anim [data-revelar] {
  opacity: 0;
  translate: 0 28px;
  transition: opacity .7s ease, translate .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--atraso, 0ms);
}
.js-anim [data-revelar].revelado { opacity: 1; translate: 0 0; }

/* Traços do hero se desenham ao abrir a página */
@keyframes crescer {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.js-anim .hero__conteudo::before,
.js-anim .traco {
  transform-origin: left center;
  animation: crescer 1s cubic-bezier(.2, .7, .2, 1) both;
}
.js-anim .hero__conteudo::before { animation-delay: .1s; }
.js-anim .traco--a { animation-delay: .35s; }
.js-anim .traco--b { animation-delay: .45s; }
.js-anim .traco--c { animation-delay: .6s; }

/* Destaque do formulário ao chegar pela rolagem */
@keyframes chegada {
  0%   { box-shadow: 0 0 0 0 rgba(253, 144, 2, .55); }
  100% { box-shadow: 0 0 0 20px rgba(253, 144, 2, 0); }
}
.formulario.chegou { animation: chegada 1s ease-out 2; }

[tabindex="-1"]:focus { outline: none; }

/* =========================================================
   Telas menores
   ========================================================= */
@media (max-width: 1199px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tambem { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 1100px) {
  .topo__nav { display: none; }
}

@media (max-width: 900px) {
  :root { --topo-h: 72px; --topo-h-rolado: 60px; }
  .topo__logo img { height: 36px; }
  .topo--rolado .topo__logo img { height: 30px; }

  .hero {
    height: auto;
    min-height: var(--hero-h);   /* tela inteira; cresce só se o texto não couber */
    padding: 104px var(--gutter) 72px calc(14vw + 20px);
  }
  .hero__painel { width: 14vw; }
  .hero__padrao { --padrao-w: 1773px; top: calc(100% - 140px); }
  .hero__conteudo { margin-left: 0; padding: 0; max-width: 560px; }
  .hero__conteudo::before { margin-bottom: 22px; }
  .hero__acoes { margin-top: 28px; }
  .botao { height: 48px; padding: 0 22px; }

  .traco { height: 4px; }
  .traco--a,
  .traco--b { left: 16px; width: calc(14vw + 24px); }
  .traco--a { bottom: 10px; }
  .traco--b { bottom: -12px; }
  .traco--c { bottom: -34px; left: auto; right: 16px; width: 55vw; }

  .servicos { padding-top: 112px; }

  .tambem__lista { grid-template-columns: 1fr; }
  .item { padding: 20px 0; }

  .orcamento { grid-template-columns: 1fr; gap: 32px; }

  .rodape__colunas { grid-template-columns: 1fr; gap: 28px; padding-block: 48px 32px; }
  .rodape__links,
  .rodape__contato { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .15); padding: 24px 0 0; }
}

@media (max-width: 639px) {
  .cards { grid-template-columns: 1fr; gap: 16px; }
  .cards:not(:hover) .card--destaque,
  .card:hover,
  .card:focus-within { transform: none; }
  .card { padding: 24px 22px 22px; }
}

@media (max-width: 480px) {
  .formulario { grid-template-columns: 1fr; }
  .formulario__enviar { justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}