/* ==========================================================================
   NOVREN — LP v2 · COMPONENTES
   Cada medida e o numero que esta no Figma, em unidades --px.
   ========================================================================== */

/* ---------- Nav ----------
   Dois estados, um so elemento. No topo a capsula ocupa a coluna de conteudo
   (1520) e e transparente, porque ali embaixo esta o cartao preto do hero. Ao
   rolar ela encolhe para 640, ganha fundo escuro e passa a flutuar sobre o
   conteudo claro — que e o segundo estado da referencia.

   A largura anima porque os dois valores sao comprimentos (1520 -> 640):
   `width: auto` nao animaria. */
/* z-index acima do overlay (110) de proposito: e a mesma capsula que abre e
   fecha o menu. Deixando-a por baixo, o hamburguer virava X e sumia, e so
   sobrava o Esc para sair. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 120;
  display: grid; place-items: center;
  padding-block: calc(20 * var(--px));
  pointer-events: none;
}
.nav__capsula {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(30 * var(--px));
  width: var(--w-conteudo);
  padding: calc(12 * var(--px)) calc(14 * var(--px)) calc(12 * var(--px)) calc(20 * var(--px));
  border-radius: var(--r-pilula);
  color: var(--c-cinza-20);
  background: transparent;
  transition: width var(--dur-lento) var(--ease),
              background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
/* Estado rolado — a capsula flutuante. */
.nav.is-fixa .nav__capsula {
  width: calc(640 * var(--px));
  background: rgba(22, 22, 22, .82);
  backdrop-filter: blur(calc(18 * var(--px)));
  -webkit-backdrop-filter: blur(calc(18 * var(--px)));
  box-shadow: 0 calc(10 * var(--px)) calc(40 * var(--px)) rgba(0, 0, 0, .18);
}
@media (prefers-reduced-motion: reduce) { .nav__capsula { transition: none; } }

.nav__logo { display: flex; align-items: center; gap: calc(10 * var(--px)); }
.nav__logo img {
  width: calc(140 * var(--px)); height: calc(17.816 * var(--px));
  filter: invert(1) brightness(2);          /* o SVG e preto; a capsula e escura */
}
.nav__acoes { display: flex; align-items: center; gap: calc(14 * var(--px)); }
.nav__orcamento { padding: calc(11 * var(--px)) calc(20 * var(--px)); font-size: var(--t-15); }

.nav__ic {
  display: grid; place-items: center; flex: none;
  width: calc(38 * var(--px)); height: calc(38 * var(--px));
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  transition: background-color var(--dur) var(--ease);
}
.nav__ic:hover { background: rgba(255, 255, 255, .2); }
.nav__ic img { width: calc(14 * var(--px)); height: auto; filter: invert(1) brightness(2); }

.nav__sep { width: 1px; height: calc(20 * var(--px)); background: currentColor; opacity: .25; }

/* PT | EN — o par existe no menu, mas so o PT esta ligado: nao ha uma linha
   de copy em ingles no projeto, e traduzir aqui seria inventar. O EN fica
   desabilitado e anunciado como tal, com o gancho pronto. */
.nav__idioma { display: flex; align-items: center; gap: calc(10 * var(--px)); }
.nav__idioma button {
  font-size: calc(13 * var(--px)); line-height: 1; font-weight: 500;
  letter-spacing: .02em; color: var(--c-cinza-70);
  transition: color var(--dur) var(--ease);
}
.nav__idioma button.is-ativo { color: var(--c-branco); }
.nav__idioma button[disabled] { cursor: not-allowed; opacity: .55; }

.nav__burger {
  display: grid; align-content: center; gap: calc(5 * var(--px));
  flex: none; width: calc(30 * var(--px)); height: calc(30 * var(--px));
  padding: 0 calc(4 * var(--px));
}
.nav__burger span[aria-hidden] {
  display: block; height: calc(1.6 * var(--px)); background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__burger span[aria-hidden]:first-of-type { width: 100%; }
.nav__burger span[aria-hidden]:last-of-type  { width: 68%; margin-left: auto; }
.nav__burger[aria-expanded="true"] span:first-of-type { transform: translateY(calc(3.3 * var(--px))) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-of-type  { width: 100%; transform: translateY(calc(-3.3 * var(--px))) rotate(-45deg); }

/* Paginas de fundo claro (contato, projeto, cases) nascem com a capsula
   escura ja aplicada — sem isso a marca branca cairia sobre branco. */
.nav--solida .nav__capsula {
  width: calc(640 * var(--px));
  background: rgba(22, 22, 22, .82);
  backdrop-filter: blur(calc(18 * var(--px)));
  -webkit-backdrop-filter: blur(calc(18 * var(--px)));
}

/* ---------- Menu de tela cheia ---------- */
/* O respiro de cima e a altura da capsula (72 + 20 de topo + 20 de folga):
   sem ele, em janela baixa os links sobem por baixo do menu e cruzam com a
   marca. `overflow-y: auto` cobre o caso de a lista nao caber. */
.menu {
  position: fixed; inset: 0; z-index: 110;
  display: grid; align-items: center;
  padding-block: calc(112 * var(--px)) calc(60 * var(--px));
  overflow-y: auto;
  background: rgba(10, 10, 10, .97);
  backdrop-filter: blur(calc(20 * var(--px)));
  -webkit-backdrop-filter: blur(calc(20 * var(--px)));
  color: var(--c-cinza-20);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.menu.is-aberto { opacity: 1; visibility: visible; }
.menu__inner {
  display: flex; flex-direction: column; gap: calc(60 * var(--px));
  width: var(--w-conteudo); margin-inline: auto;
}
.menu__links { display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.menu__links a {
  font-size: calc(72 * var(--px)); line-height: calc(84 * var(--px));
  font-weight: 500; letter-spacing: -.02em;
  opacity: 0; transform: translateY(calc(20 * var(--px)));
  transition: opacity var(--dur-lento) var(--ease), transform var(--dur-lento) var(--ease), color var(--dur) var(--ease);
}
.menu.is-aberto .menu__links a { opacity: 1; transform: none; }
.menu__links a:nth-child(2) { transition-delay: .05s; }
.menu__links a:nth-child(3) { transition-delay: .1s; }
.menu__links a:nth-child(4) { transition-delay: .15s; }
.menu__links a:nth-child(5) { transition-delay: .2s; }
.menu__links a:hover { color: var(--c-cinza-70); }
.menu__pe { display: flex; gap: calc(40 * var(--px)); font-size: var(--t-18); color: var(--c-cinza-70); }
.menu__pe a:hover { color: var(--c-cinza-20); }
@media (prefers-reduced-motion: reduce) {
  .menu, .menu__links a { transition: none; }
}

/* ---------- Botoes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(13.167 * var(--px));
  padding: calc(15 * var(--px)) calc(22.5 * var(--px));
  border-radius: var(--r-pilula);
  background: var(--c-preto); color: var(--c-branco);
  font-size: var(--t-15); font-weight: 500; letter-spacing: -.01em;
  line-height: normal; white-space: nowrap;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); opacity: .88; }
.btn--claro { background: var(--c-branco); color: var(--c-tinta); }
.btn--cinza { background: var(--c-cinza-35); color: var(--c-preto); }
/* "Vamos comecar?" — Figma: h-58, px-30 py-18, corpo 18. */
.btn--g {
  height: calc(58 * var(--px));
  padding-inline: calc(30 * var(--px));
  border-radius: calc(50 * var(--px));
  font-size: var(--t-18); line-height: calc(21.6 * var(--px));
}
.btn img { width: calc(21.945 * var(--px)); height: calc(21.945 * var(--px)); }

/* Botao circular do acordeao. Figma: 46px, borda #313131, sinal 16x2. */
.btn-mais {
  position: relative; flex: none;
  width: calc(46 * var(--px)); height: calc(46 * var(--px));
  border: 1px solid var(--c-borda-esc);
  border-radius: 50%;
  transition: border-color var(--dur) var(--ease);
}
.btn-mais::before, .btn-mais::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn-mais::before { width: calc(16 * var(--px)); height: calc(2 * var(--px)); transform: translate(-50%, -50%); }
.btn-mais::after  { width: calc(2 * var(--px)); height: calc(16 * var(--px)); transform: translate(-50%, -50%); }
[aria-expanded="true"] .btn-mais::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.btn-mais:hover { border-color: currentColor; }

/* ---------- Pilulas ---------- */
/* Area de atuacao (acordeao escuro): Figma px-12 py-9, 12px, raio 50. */
.tag {
  display: inline-flex; align-items: center; justify-content: center;
  padding: calc(9 * var(--px)) calc(12 * var(--px));
  border-radius: calc(50 * var(--px));
  background: var(--c-branco); color: var(--c-tinta-alt);
  font-size: var(--t-12); line-height: var(--t-12); font-weight: 500;
  white-space: nowrap;
}
/* Tag sobre case — Figma 67:10293.
   Pilula de 36 de altura exatos: 12 de respiro + 12 de caixa de texto + 12.

   O texto vive num <span> proprio, e nao solto dentro da pilula. Nao e
   enfeite de marcacao: `text-box-trim` so age sobre bloco que contem linha
   de texto, e texto solto dentro de um flex vira item anonimo, que o corte
   nao alcanca. Com o corte no lugar errado a caixa ia a 20 e a pilula saia
   com 44 em vez de 36 — medido, nao suposto.
   Espelha a estrutura do arquivo, onde o texto tambem tem frame proprio. */
.tag--case {
  gap: calc(3 * var(--px));
  padding: calc(12 * var(--px)) calc(17 * var(--px));
  background: var(--c-cinza-5); color: var(--c-preto);
  font-size: var(--t-16-4); line-height: normal;
  border-radius: var(--r-pilula);
}
.tag--case .tag__t {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
@supports not (text-box-trim: trim-both) {
  .tag--case .tag__t { line-height: calc(12 * var(--px)); }
}
.tag--case img { flex: none; width: calc(18.075 * var(--px)); height: calc(12 * var(--px)); }

/* ---------- Regua de logos ----------
   Figma 67:10250 desenha uma grade 6x2 estatica; aqui e uma regua em loop.
   Duas pistas identicas correndo lado a lado: quando a primeira sai por
   inteiro (-100%), a segunda esta exatamente onde ela comecou, entao a volta
   nao tem salto. Cada pista carrega as nove marcas.

   O cartao (183.78 de altura, raio 14, gap 10) continua o do arquivo.

   LARGURA: sangra ate as bordas da janela, em qualquer tela. Ela vivia presa
   na coluna de texto de 1520 enquanto o hero e a faixa de cases ocupavam
   quase a largura inteira — tres reguas diferentes na mesma pagina, e a do
   meio cortando cartao pela metade. Medido a 1920: hero em 20, cases em 35,
   logos em 193.

   Regua que anda nao e coluna de leitura: ela e faixa, e faixa vai de ponta a
   ponta. O `margin-inline: calc(50% - 50vw)` faz o bloco escapar de qualquer
   contêiner centralizado sem precisar sair dele na marcacao. */
.logos {
  display: flex;
  gap: var(--gap-10);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logos__pista {
  display: flex; flex: none; gap: var(--gap-10); padding-right: var(--gap-10);
  animation: desfilar 46s linear infinite;
}
.logos:hover .logos__pista { animation-play-state: paused; }
@keyframes desfilar { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .logos__pista { animation: none; } }

.logos__item {
  flex: none;
  width: calc(245 * var(--px));
  display: grid; place-items: center;
  height: calc(183.78 * var(--px));
  padding: calc(30 * var(--px));
  background: var(--c-branco);
  border-radius: var(--r-14);
}
/* Altura definida no involucro: `max-height: 100%` nao resolve contra pai
   de altura automatica, e ai um PNG de 1223px entra no tamanho natural. */
.logos__item img { max-height: 100%; max-width: 100%; width: auto; height: auto; }

/* Os logos vieram da regua do Framer, que roda sobre preto — logo, brancos.
   Aqui o cartao e branco. Os sete em SVG foram repintados no arquivo
   (#0A0A0A); o de ricardo.eletro e PNG branco em transparente, entao inverte
   por filtro. O do SBT Premios e colorido e fica como esta. */
.logos__item img[src$="ricardo-eletro.webp"] { filter: invert(1); }

/* ---------- Cartao branco ---------- */
.cartao { background: var(--superficie); border-radius: var(--r-18); padding: calc(30 * var(--px)); }
.cartao--14 { border-radius: var(--r-14); }

/* ---------- Acordeao ----------
   Um componente para Servicos (escuro) e FAQ (claro). A altura anima por
   grid-template-rows 0fr -> 1fr, sem medir nada em JS. */
.acc__item { border-bottom: 1px solid var(--linha); }
.acc__topo {
  display: flex; align-items: center; gap: calc(40 * var(--px));
  width: 100%; padding-block: calc(20 * var(--px));
  text-align: left;
}
.acc__n { flex: none; width: var(--w-aside); font-size: var(--t-16); line-height: var(--lh-22-4); opacity: .6; }
.acc__titulo { flex: 1; min-width: 0; }
.acc__painel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-lento) var(--ease); }
.acc__item.is-open .acc__painel { grid-template-rows: 1fr; }
.acc__painel > div { overflow: hidden; }
.acc__corpo { padding-bottom: calc(70 * var(--px)); }
.acc__item.is-open > .acc__topo .acc__n { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .acc__painel { transition: none; } }

/* ---------- Estrelas ---------- */
.estrelas { width: calc(56 * var(--px)); height: calc(12 * var(--px)); }

/* ==========================================================================
   CURSOR DOS CASES
   Bolha que segue o ponteiro sobre um cartao de case e diz o que o clique faz.
   So existe onde ha ponteiro fino de verdade: em toque, o elemento nunca
   apareceria e ainda roubaria eventos.
   ========================================================================== */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 90;
  display: grid; place-items: center;
  width: calc(104 * var(--px)); height: calc(104 * var(--px));
  margin: calc(-52 * var(--px)) 0 0 calc(-52 * var(--px));
  border-radius: 50%;
  background: var(--c-tinta); color: var(--c-branco);
  font-size: var(--t-12); font-weight: 500; letter-spacing: .02em;
  text-transform: uppercase; text-align: center;
  pointer-events: none;
  opacity: 0; transform: scale(.4);
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.cursor.is-vis { opacity: 1; transform: scale(1); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
@media (prefers-reduced-motion: reduce) { .cursor { transition: opacity .2s linear; } }

/* `difference` em vez de cor fixa: sobre foto clara a bolha fica escura, sobre
   foto escura fica clara. Uma regra resolve o contraste em nove capas com
   fundos diferentes — nenhuma delas precisa ser levada em conta. */
.cursor {
  mix-blend-mode: difference;
  background: var(--c-branco); color: var(--c-preto);
}

/* ---------- Botao magnetico ----------
   O deslocamento vem de duas variaveis que o JS escreve; o CSS so soma ao
   levantar do hover, que ja existia. */
.btn { --mx: 0px; --my: 0px; }
.btn:hover { transform: translate(var(--mx), var(--my)) translateY(-2px); }
.btn { transform: translate(var(--mx), var(--my)); }
@media (prefers-reduced-motion: reduce) { .btn { --mx: 0px; --my: 0px; } }

/* ---------- Botao com sinal ----------
   Figma 39:275 — "Explorar todos os cases": caixa 286x55, respiro lateral
   22.5, texto 20/24, circulo de 25 com o "+" a 15 do texto. */
.btn--sinal {
  gap: calc(15 * var(--px));
  height: calc(55 * var(--px));
  padding-inline: calc(22.5 * var(--px));
  font-size: var(--t-20); line-height: calc(24 * var(--px));
}
.btn--sinal .btn__sinal {
  position: relative; flex: none;
  width: calc(25 * var(--px)); height: calc(25 * var(--px));
  border-radius: 50%; background: rgba(255, 255, 255, .14);
}
.btn--sinal .btn__sinal::before,
.btn--sinal .btn__sinal::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: currentColor;
}
.btn--sinal .btn__sinal::before { width: calc(9.08 * var(--px)); height: calc(1.4 * var(--px)); transform: translate(-50%, -50%); }
.btn--sinal .btn__sinal::after  { width: calc(1.4 * var(--px)); height: calc(9.3 * var(--px)); transform: translate(-50%, -50%); }

/* ==========================================================================
   FORMULARIO
   Campo de linha (borda so embaixo), como na referencia da Berriel e da
   Dinamite. Serve tanto ao popup quanto a pagina de contato.
   ========================================================================== */
.campo { display: flex; flex-direction: column; gap: calc(10 * var(--px)); }
.campo--largo { grid-column: 1 / -1; }
.campo > label {
  font-size: var(--t-15); line-height: var(--lh-21); font-weight: 500;
  color: var(--c-tinta);
}
.campo .obrig { color: #c0392b; margin-left: calc(3 * var(--px)); }

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: calc(10 * var(--px)) 0;
  border: 0; border-bottom: 1px solid var(--c-cinza-35);
  border-radius: 0; background: transparent;
  font: inherit; font-size: var(--t-18); line-height: var(--lh-23-4);
  color: var(--c-tinta);
  transition: border-color var(--dur) var(--ease);
}
.campo textarea { min-height: calc(72 * var(--px)); resize: vertical; }
.campo select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right calc(6 * var(--px)) center, right calc(1 * var(--px)) center;
  background-size: calc(6 * var(--px)) calc(6 * var(--px)), calc(6 * var(--px)) calc(6 * var(--px));
  background-repeat: no-repeat;
  padding-right: calc(24 * var(--px));
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--c-cinza-70); }
.campo select:invalid { color: var(--c-cinza-70); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { outline: 0; border-bottom-color: var(--c-tinta); }
.campo.tem-erro input,
.campo.tem-erro select,
.campo.tem-erro textarea { border-bottom-color: #c0392b; }
.campo__erro { font-size: var(--t-12); line-height: var(--lh-15-6); color: #c0392b; }
.campo:not(.tem-erro) .campo__erro { display: none; }

/* Telefone com o prefixo +55 fixo na frente, como na referencia. */
.campo__tel { display: flex; align-items: center; gap: calc(8 * var(--px)); border-bottom: 1px solid var(--c-cinza-35); }
.campo__tel:focus-within { border-bottom-color: var(--c-tinta); }
.campo__tel input { border-bottom: 0; }
.campo__ddi { display: flex; align-items: center; gap: calc(6 * var(--px)); flex: none; font-size: var(--t-18); color: var(--c-tinta); }
.campo__ddi img { width: calc(18.075 * var(--px)); height: calc(12 * var(--px)); }

/* ==========================================================================
   POPUP DE ORCAMENTO  (referencia: Dinamite Criativa)
   Fica em <dialog> para herdar foco, Esc e inerte de fundo do proprio
   navegador, em vez de reimplementar as tres coisas em JS.
   ========================================================================== */
.pop::backdrop { background: rgba(10, 10, 10, .55); backdrop-filter: blur(calc(6 * var(--px))); }
.pop {
  width: calc(1100 * var(--px)); max-width: calc(100vw - calc(40 * var(--px)));
  max-height: calc(100vh - calc(60 * var(--px)));
  margin: auto;
  padding: calc(46 * var(--px)) calc(50 * var(--px));
  border: 0; border-radius: calc(24 * var(--px));
  background: var(--c-branco); color: var(--c-tinta);
  overflow: auto;
}
.pop__x {
  position: absolute; top: calc(30 * var(--px)); right: calc(34 * var(--px));
  display: grid; place-items: center;
  width: calc(30 * var(--px)); height: calc(30 * var(--px));
  font-size: calc(24 * var(--px)); line-height: 1; color: var(--c-tinta);
}
.pop__x:hover { opacity: .55; }
.pop__olho { font-size: var(--t-18); line-height: var(--lh-23-4); color: var(--c-cinza-70); }
.pop__cabeca {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: calc(40 * var(--px));
  margin-top: calc(22 * var(--px));
}
.pop__titulo { font-size: calc(38 * var(--px)); line-height: calc(44 * var(--px)); font-weight: 500; letter-spacing: -.02em; }
.pop__apoio {
  flex: none; width: calc(300 * var(--px));
  padding-left: calc(20 * var(--px));
  border-left: calc(2 * var(--px)) solid var(--c-cinza-35);
  font-size: var(--t-18); line-height: calc(28 * var(--px)); color: var(--c-tinta);
}
/* Tres circulos no lugar dos retratos da equipe. Nao ha foto de equipe no
   projeto, e as fotos que existem sao de clientes (depoimentos) — usa-las
   aqui seria dizer que sao especialistas da casa. Placeholder rotulado. */
.pop__equipe { display: flex; margin-bottom: calc(18 * var(--px)); }
.pop__equipe span {
  display: grid; place-items: center; flex: none;
  width: calc(56 * var(--px)); height: calc(56 * var(--px));
  margin-right: calc(-14 * var(--px));
  border: calc(3 * var(--px)) solid var(--c-branco); border-radius: 50%;
  background: var(--c-cinza-20); color: var(--c-cinza-70);
  font-size: var(--t-12); line-height: 1;
}
.pop__regua { height: 1px; margin: calc(30 * var(--px)) 0; background: var(--c-cinza-35); }
.pop__campos {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: calc(28 * var(--px)) calc(44 * var(--px));
}
.pop__pe {
  display: flex; align-items: center; gap: calc(30 * var(--px));
  margin-top: calc(36 * var(--px));
}
.pop__nota { font-size: var(--t-15); line-height: var(--lh-21); color: var(--c-cinza-70); }
.pop__nota a { text-decoration: underline; }
.pop__enviar { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pop__ok {
  display: none;
  padding: calc(20 * var(--px)) 0 0;
  font-size: var(--t-18); line-height: var(--lh-23-4);
}
.pop.is-enviado .pop__ok { display: block; }
.pop.is-enviado form { display: none; }

/* ==========================================================================
   Queda abaixo de 1280
   ========================================================================== */
@media (max-width: 1280px) {
  .nav { padding-block: 14px; padding-inline: clamp(12px, 3vw, 28px); }
  .nav__capsula,
  .nav.is-fixa .nav__capsula,
  .nav--solida .nav__capsula { width: 100%; max-width: 620px; gap: 14px; padding: 10px 12px 10px 16px; }
  .nav__logo { gap: 8px; }
  .nav__logo img { width: auto; height: 16px; }
  .nav__acoes { gap: 10px; }
  .nav__orcamento { padding: 10px 16px; font-size: 14px; }
  .nav__ic { width: 34px; height: 34px; }
  .nav__ic img { width: 13px; }
  .nav__sep { height: 18px; }
  .nav__idioma { gap: 8px; }
  .nav__idioma button { font-size: 12px; }
  .nav__burger { width: 28px; height: 28px; gap: 5px; }
  .nav__burger span[aria-hidden] { height: 1.6px; }
  .nav__burger[aria-expanded="true"] span:first-of-type { transform: translateY(3.3px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:last-of-type  { transform: translateY(-3.3px) rotate(-45deg); }
  @media (max-width: 560px) {
    .nav__sep, .nav__idioma { display: none; }
  }

  .menu__inner { width: 100%; padding-inline: var(--gutter); gap: 40px; }
  .menu__links a { font-size: clamp(34px, 8vw, 60px); line-height: 1.16; }
  .menu__pe { flex-direction: column; gap: 8px; font-size: 15px; }


  .btn { gap: 10px; padding: 14px 20px; font-size: 15px; }
  .btn--sinal { height: 50px; padding-inline: 20px; font-size: 17px; gap: 12px; }
  .btn--sinal .btn__sinal { width: 22px; height: 22px; }
  .btn--sinal .btn__sinal::before { width: 8px; height: 1.4px; }
  .btn--sinal .btn__sinal::after  { width: 1.4px; height: 8px; }
  .btn--g { height: 52px; padding-inline: 26px; font-size: 17px; }
  .btn img { width: 20px; height: 20px; }
  .btn-mais { width: 40px; height: 40px; }
  .btn-mais::before { width: 14px; height: 2px; }
  .btn-mais::after  { width: 2px; height: 14px; }

  .tag { padding: 9px 12px; font-size: 12px; line-height: 12px; }
  .tag--case { gap: 3px; padding: 10px 14px; font-size: 14px; }
  .tag--case img { width: 18px; height: 12px; }

  /* A sangria ja vem da regra base. Aqui so o desvanecimento fica mais largo:
     em tela estreita, 6% sao poucos pixels e a borda corta seco. */
  .logos {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  }
  .logos, .logos__pista { gap: 8px; }
  .logos__pista { padding-right: 8px; }
  .logos__item { width: clamp(150px, 32vw, 220px); height: clamp(84px, 13vw, 140px); padding: 20px; border-radius: 14px; }

  .cartao { border-radius: 18px; padding: 24px; }
  .acc__topo { gap: 16px; padding-block: 18px; }
  .acc__n { width: 56px; font-size: 14px; }
  .acc__corpo { padding-bottom: 32px; }
  .estrelas { width: 56px; height: 12px; }

  .campo { gap: 8px; }
  .campo > label { font-size: 14px; }
  .campo input, .campo select, .campo textarea { font-size: 16px; padding: 9px 0; }
  .campo__ddi { font-size: 16px; }

  .pop { width: 100%; max-width: none; padding: 32px 22px; border-radius: 18px; }
  .pop__x { top: 18px; right: 20px; width: 28px; height: 28px; font-size: 22px; }
  .pop__cabeca { flex-direction: column; align-items: flex-start; gap: 20px; }
  .pop__titulo { font-size: clamp(24px, 5vw, 34px); line-height: 1.15; }
  .pop__apoio { width: 100%; padding-left: 16px; font-size: 16px; line-height: 1.5; }
  .pop__equipe span { width: 46px; height: 46px; margin-right: -12px; }
  .pop__campos { grid-template-columns: 1fr; gap: 22px; }
  .pop__regua { margin: 24px 0; }
  .pop__pe { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 28px; }
  .pop__nota { font-size: 14px; }
}