/* ==========================================================
   LP MEGAFONE — estilos
   ----------------------------------------------------------
   Tudo que é cor, tamanho e espaçamento fica aqui.
   Para mudar cores, mexa só no bloco ":root" logo abaixo.
   ========================================================== */

:root{

  /* ---- CORES ---------------------------------------------- */
  --verde-escuro:      #2D8E22;   /* início do degradê verde  */
  --verde-claro:       #39C127;   /* fim do degradê verde     */
  --verde-fechado:     #0B650E;   /* degradê do "30 dias?"    */
  --verde-medio:       #18A01D;
  --vermelho:          #FF3034;   /* barra do topo            */
  --preto:             #000000;
  --cinza-escuro:      #1E1E1E;   /* faixa dos logos          */
  --cinza-etiqueta:    #F0F0F0;   /* fundo da etiqueta        */
  --cinza-fundo:       #F7F7F7;   /* fundo da página do form  */
  --linha-cinza:       #BEBEBE;   /* risco que liga os itens  */
  --linha-preco:       #909090;   /* traço entre os preços    */
  --vermelho-risco:    #FF0000;   /* risco sobre os preços    */
  --linha-card:        #ECECEC;   /* traço fino dos blocos    */
  --texto-suave:       #8A8A8A;   /* @usuario, textos menores */
  --borda-campo:       #DCDCDC;   /* borda dos campos do form */
  --anel-apagado:      #DEDEDE;   /* etapa ainda não cumprida */
  --branco:            #FFFFFF;

  --titulo-claro:      #656565;   /* degradê dos títulos      */
  --titulo-escuro:     #171717;
  --texto-corpo:       #464646;   /* parágrafos               */
  --texto-eyebrow:     #404040;   /* linha miúda do hero      */

  /* ---- DEGRADÊS ------------------------------------------- */
  --degrade-verde:  linear-gradient(to right, var(--verde-escuro), var(--verde-claro));

  /* verde fechado, mais sério, usado nos botões */
  --verde-botao:       #157A18;
  --verde-botao-fundo: #0C5410;
  --degrade-botao:  linear-gradient(95deg, #17761B 0%, #21931F 48%, #2BAE2A 100%);
  --degrade-botao-hover: linear-gradient(95deg, #1C8A20 0%, #26A625 48%, #32C031 100%);
  --degrade-titulo: linear-gradient(-90deg, var(--titulo-claro) 0%, var(--titulo-escuro) 100%);
  --preto-faixa:    #101010;   /* faixa dos logos, cor única */
  --degrade-numero: linear-gradient(170deg, rgba(70,70,70,.47) 8.79%, rgba(168,168,168,.47) 82.45%);
  --degrade-30dias: linear-gradient(to right, var(--verde-fechado) 0%, var(--verde-medio) 43.836%);
  --degrade-preto:  linear-gradient(to left, #121212, var(--preto));


  /* ---- FONTES --------------------------------------------- */
  --fonte-titulo: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fonte-corpo:  'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;


  /* ==========================================================
     O GRID
     ----------------------------------------------------------
     Seu grid no Figma: tela de 1920, margem de 320 de cada lado,
     10 colunas de 110 com 20 de espaço = 1280 de área útil.

     --util  é a área útil (o miolo, entre as duas margens).
     --u     é "1 pixel do Figma" já convertido para a tela atual.

     Numa tela de 1920, --u vale exatamente 1px: o site sai idêntico
     ao seu desenho. Numa tela menor, --u encolhe e TODO o layout
     encolhe junto, mantendo as proporções do seu grid.
     ========================================================== */

  --util: clamp(1040px, 66.7vw, 1280px);
  --u:    calc(var(--util) / 1280);

  /* A margem lateral é simplesmente o que sobra dos dois lados.
     Em 1920 dá exatamente os seus 320px. */
  --margem-lateral: max(24px, calc((100vw - var(--util)) / 2));
}


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

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--fonte-corpo);
  color:var(--texto-corpo);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;

  /* corta o que vaza para os lados.
     "hidden" criaria uma área de rolagem e quebraria a barra fixa
     do celular; "clip" corta sem esse efeito colateral.
     Navegador antigo ignora a segunda linha e usa a primeira. */
  overflow-x:hidden;
  overflow-x:clip;
}

/* O atributo "hidden" do HTML precisa vencer qualquer display do CSS,
   senão o que deveria estar escondido continua aparecendo. */
[hidden]{ display:none !important; }

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

/* <picture> é só um invólucro: não deve interferir no layout */
picture{ display:contents; }

/* E o <source> dentro dele também não. Sem isto, numa fila com
   espaçamento ele virava um item vazio e o espaço entre as imagens
   era contado duas vezes (foi o que descentralizou os selos). */
picture > source{ display:none; }

p,h1,h2,h3,ol{ margin:0; }

a{ text-decoration:none; }

/* Caixa central: respeita a margem lateral do grid */
.container{
  width:100%;
  max-width:calc(var(--util) + var(--margem-lateral) * 2);
  margin-inline:auto;
  padding-inline:var(--margem-lateral);
}


/* ==========================================================
   BARRA VERMELHA DO TOPO
   ========================================================== */

.barra-superior{
  /* efeito de vidro: fundo escuro translúcido que desfoca o que passa atrás */
  background-image:none;
  background-color:rgba(18,18,18,.62);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.12);
  min-height:calc(54 * var(--u));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(16 * var(--u)) var(--margem-lateral);
}

.barra-superior__texto{
  font-family:var(--fonte-titulo);
  font-weight:400;
  font-size:max(15px, calc(17 * var(--u)));
  line-height:1.3;
  letter-spacing:-0.045em;   /* letras mais juntas, como no seu desenho */
  color:rgba(255,255,255,.92);
  text-align:center;
}

.barra-superior__texto strong{ font-weight:600; }

/* Sobre uma seção preta a barra inverte: fundo branco, texto preto.
   Quem liga e desliga isso é o assets/js/barra.js */
.barra-superior{ background-color:var(--preto); transition:background-color .25s ease; }
.barra-superior__texto{ transition:color .25s ease; }

.barra-superior--clara{
  background-image:none;
  background-color:var(--branco);
  box-shadow:0 1px 0 rgba(0,0,0,.08);
}

.barra-superior--clara .barra-superior__texto{ color:#141414; }

/* quebra de linha que só existe no celular */
.so-celular{ display:none; }

/* quebra que só vale do tablet para cima */
.so-pc{ display:inline; }


/* ==========================================================
   DOBRA 1 — HERO
   ========================================================== */

.hero{
  position:relative;
  padding-top:calc(30 * var(--u));
  /* respiro antes da faixa preta dos logos */
  padding-bottom:calc(40 * var(--u));
  overflow:hidden;
}

.hero__grid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(8 * var(--u));
}

/* ---- Coluna de texto (639 de 1280 = 49,92%) -------------- */

.hero__texto{
  flex:1 1 auto;
  width:100%;
  padding-top:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:calc(26 * var(--u));
}

/* a tag com o símbolo sobe para cima da headline, como no celular */
.hero__prova{ order:-1; }

.certificados{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

/* larguras de leitura: só no computador, o celular fica como sempre foi */
@media (min-width:861px){
  .hero__titulo{ max-width:calc(900 * var(--u)); }
  .hero__subtitulo{ max-width:calc(640 * var(--u)); }
  .certificados{ max-width:calc(600 * var(--u)); }
}

/* Linha miúda: sai do ar, quem diz isso agora é a tag com o símbolo */
.hero__eyebrow{
  display:none;
  width:100%;
  justify-content:space-between;
  gap:calc(16 * var(--u));
  font-family:var(--fonte-titulo);
  font-weight:300;
  font-size:max(8px, calc(8.5 * var(--u)));
  line-height:1.5;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--texto-eyebrow);
  white-space:nowrap;
}

.hero__eyebrow strong{ font-weight:500; }

/* Título principal (degradê aplicado no próprio texto) */
.hero__titulo{
  font-family:var(--fonte-titulo);
  font-weight:500;
  font-size:max(30px, calc(50 * var(--u)));
  line-height:1.15;
  letter-spacing:-0.03em;
  background-image:var(--degrade-titulo);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* "Aumente as vendas" em verde */
/* ícone de gráfico no meio da headline, como no material de referência */
.hero__icone{
  display:inline-block;
  /* altura parecida com a das letras maiúsculas e centralizado
     na linha, como no material de referência */
  width:1.06em;
  height:1.06em;
  vertical-align:-0.16em;
  margin-inline:.1em .07em;
  color:var(--verde-botao);
}

.hero__subtitulo{
  font-family:var(--fonte-corpo);
  font-weight:500;
  font-size:max(16px, calc(21 * var(--u)));
  line-height:1.5;
  color:var(--texto-corpo);
}

.hero__subtitulo strong{ font-weight:700; }

/* ---- Prova social (3 fotinhas + nome) -------------------- */

.hero__prova{
  display:flex;
  align-items:center;
  gap:max(11px, calc(14 * var(--u)));
}

.hero__avatares{
  display:flex;
  flex:none;
}

/* O símbolo da Megafone, sem contorno */
.hero__avatares img{
  /* 4px a menos que antes: a borda ocupava esse espaço por dentro,
     então sem ela o desenho fica do mesmo tamanho de sempre */
  width:calc(34 * var(--u));
  height:calc(34 * var(--u));
  min-width:30px;
  min-height:30px;
  border-radius:50%;
}

/* O nome é o que importa aqui; a linha de baixo é apoio.
   Mesmo tamanho nas duas fazia elas competirem entre si — e as
   duas juntas competiam com a headline logo abaixo. */
.hero__prova-texto{
  font-family:var(--fonte-titulo);
  font-weight:400;
  font-size:max(11px, calc(12.5 * var(--u)));
  line-height:1.25;
  letter-spacing:0;
  color:var(--texto-suave);
}

.hero__prova-texto strong{
  display:block;
  margin-bottom:calc(1 * var(--u));
  font-weight:600;
  font-size:max(12px, calc(13.5 * var(--u)));
  line-height:1.2;
  letter-spacing:-0.02em;
  color:var(--titulo-escuro);
}

/* ---- Selos de parceria (só no celular) ------------------- */

/* ---- Coluna da imagem (638 de 1280 = 49,84%) ------------- */

.hero__visual{ display:none; }   /* o painel sai: o hero é uma coluna só */

/* Imagem do painel: ocupa a coluna toda, altura pela proporção */
.hero__painel{
  /* passa um pouco da coluna, avançando para a margem direita */
  width:106%;
  max-width:none;
  margin-right:-6%;
  height:auto;
}

/* ==========================================================
   TEXTO COM DEGRADÊ
   ----------------------------------------------------------
   O degradê só pinta dentro da caixa do elemento. A perna do "g",
   do "p" e do "y" passa por baixo dessa caixa e ficaria sem cor.
   Estico a caixa um pouco para baixo e puxo a margem de volta,
   assim o layout continua igual.
   ========================================================== */

.hero__titulo,
.entregas__titulo,
.entrega__titulo{
  padding-bottom:.16em;
  margin-bottom:-.16em;
}

/* ==========================================================
   DIVISOR ENTRE SEÇÕES
   ----------------------------------------------------------
   Uma abinha arredondada sobe para dentro da seção de cima,
   com uma setinha apontando para baixo. Ela usa o fundo da
   seção onde está, então a cor muda sozinha.
   ========================================================== */

.divisor{
  position:absolute;
  left:50%;
  /* 1px para cima: a pontinha de cima da curva fica meio transparente
     e virava um risco claro sobre o fundo; assim ela cai dentro da
     seção de cima, que já tem a mesma cor, e some */
  top:-1px;
  transform:translateX(-50%);
  width:calc(210 * var(--u));
  min-width:168px;
  height:calc(36 * var(--u) + 1px);
  min-height:29px;
  pointer-events:none;
}

/* A lombada é um recorte em forma de curva. Ela não usa cor
   chapada: mostra o MESMO fundo da seção de cima, então a
   emenda fica invisível. */
.divisor__forma{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:block;
  background-attachment:fixed;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0C36 0 44 24 100 24s64-24 100-24z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0C36 0 44 24 100 24s64-24 100-24z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* a setinha fica logo abaixo, já dentro da seção */
/* a setinha fica dentro da lombada */
.divisor__seta{
  position:absolute;
  left:50%;
  top:52%;
  transform:translate(-50%, -50%);
  width:calc(22 * var(--u));
  min-width:18px;
  height:auto;
}

/* seção clara: a aba pega o mesmo fundo claro da página */
.entregas, .faq{ position:relative; }

/* acima destas seções está o preto: a lombada desce com o preto da faixa */
/* desce o preto da faixa de logos */
.entregas > .divisor .divisor__forma{ background:var(--preto-faixa); }

/* desce o preto da seção de soluções */
.faq > .divisor .divisor__forma{
  background-color:var(--preto);
  background-image:var(--degrade-preto);
}

.entregas > .divisor .divisor__seta,
.faq > .divisor .divisor__seta{ color:var(--branco); }

/* seção escura: aba preta e seta branca */
.executa{ position:relative; }

/* acima desta está o fundo claro: a lombada desce com ele */
.executa > .divisor .divisor__forma{ background:var(--branco); }

.executa > .divisor .divisor__seta{ color:var(--titulo-escuro); }


/* ==========================================================
   BOTÃO VERDE (usado em várias dobras)
   ========================================================== */

.botao-verde{
  /* O navegador dá borda e fundo próprios a <button>.
     Na landing page os botões são links e isso não aparecia;
     no formulário são <button> e a borda preta vazava. */
  appearance:none;
  border:0;
  font:inherit;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:calc(15 * var(--u));
  width:calc(425 * var(--u));
  max-width:100%;
  height:calc(70 * var(--u));
  padding-inline:calc(20 * var(--u));
  border-radius:5px;
  background-image:var(--degrade-botao);
  box-shadow:0 1px 2px rgba(6,60,10,.10), 0 3px 8px rgba(6,60,10,.07);
  font-family:var(--fonte-corpo);
  font-weight:600;
  font-size:max(16px, calc(22 * var(--u)));
  line-height:1.2;
  letter-spacing:-0.03em;
  color:var(--branco);
  text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  position:relative;
  overflow:hidden;
}

.botao-verde:hover{
  background-image:var(--degrade-botao-hover);
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(6,60,10,.14), 0 5px 12px rgba(6,60,10,.10);
}

.botao-verde:active{ transform:translateY(0); }

.botao-verde:focus-visible{
  outline:3px solid var(--verde-escuro);
  outline-offset:3px;
}

.botao-verde__seta{
  flex:none;
  width:calc(25 * var(--u));
  height:calc(25 * var(--u));
  min-width:20px;
  min-height:20px;
  color:var(--branco);
}

/* ---- Botão + notinha "Leva menos de 2 minutos" ------------ */

.cta{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:calc(10 * var(--u));
}

.cta__nota{
  font-family:var(--fonte-corpo);
  font-weight:400;
  font-size:max(12px, calc(14 * var(--u)));
  line-height:1.3;
  color:var(--texto-suave);
}

/* sobre fundo preto a nota clareia, mas continua discreta */
.executa .cta__nota{ color:rgba(255,255,255,.48); }

/* Variante maior, usada na DOBRA 2 */
.botao-verde--grande{
  width:calc(483 * var(--u));
  height:calc(80 * var(--u));
  gap:calc(10 * var(--u));
  font-family:var(--fonte-titulo);
}

/* Reflexo: uma faixa clara atravessa o botão e some. Volta a cada 7s.
   Sutil de propósito: chama o olho sem virar enfeite. */
.botao-verde::after{
  content:'';
  position:absolute;
  top:-60%;
  bottom:-60%;
  left:0;
  width:28%;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.26) 50%, rgba(255,255,255,0) 100%);
  transform:translateX(-160%) skewX(-18deg);
  animation:brilho-botao 7s ease-in-out infinite;
  pointer-events:none;
}

@keyframes brilho-botao{
  0%   { transform:translateX(-160%) skewX(-18deg); }
  14%  { transform:translateX(420%)  skewX(-18deg); }
  100% { transform:translateX(420%)  skewX(-18deg); }
}

/* quem pede menos animação no aparelho não vê o reflexo */
@media (prefers-reduced-motion:reduce){
  .botao-verde::after{ animation:none; opacity:0; }
}

.botao-verde__seta--direita{ transform:rotate(-90deg); }


/* Enquanto envia: uma barra clara enche o próprio botão,
   da esquerda para a direita, em 3 segundos. */
.botao-verde--enviando{
  position:relative;
  overflow:hidden;
  cursor:progress;
  opacity:1;          /* não esmaece: a barra precisa ficar visível */
}

.botao-verde--enviando::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0;
  background:rgba(255,255,255,.26);
  animation:enche-botao 2s linear forwards;
}

.botao-verde--enviando > *{
  position:relative;   /* o texto fica por cima da barra */
  z-index:1;
}

@keyframes enche-botao{
  to{ width:100%; }
}

@media (prefers-reduced-motion:reduce){
  .botao-verde--enviando::before{ animation:none; width:100%; }
}

/* ==========================================================
   FAIXA PRETA COM OS LOGOS — desliza em loop
   ----------------------------------------------------------
   Como funciona: a lista de logos aparece DUAS vezes seguidas.
   O trilho desliza para a esquerda até -50% (ou seja, até a
   segunda cópia ocupar o lugar da primeira) e volta ao zero.
   Como as duas cópias são iguais, o olho não vê o corte.
   ========================================================== */

.faixa-logos{
  background:var(--preto-faixa);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:calc(28 * var(--u));
  padding-block:calc(34 * var(--u)) calc(38 * var(--u));
  overflow:hidden;
}

.faixa-logos__titulo{
  font-family:var(--fonte-corpo);
  font-weight:400;
  font-size:max(11px, calc(14 * var(--u)));
  letter-spacing:.16em;
  text-transform:uppercase;
  text-align:center;
  color:rgba(255,255,255,.5);
  padding-inline:var(--margem-lateral);
}

.faixa-logos__trilho{
  display:flex;
  flex:none;
  width:max-content;
  animation:desliza-logos 40s linear infinite;
}

.faixa-logos:hover .faixa-logos__trilho{ animation-play-state:paused; }

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

.faixa-logos__grupo{
  display:flex;
  flex:none;
  align-items:center;
  gap:calc(96 * var(--u));
  padding-right:calc(96 * var(--u));
  /* em telas largas o grupo cabia inteiro e a mesma logo aparecia
     duas vezes ao mesmo tempo; assim cada volta ocupa a tela toda */
  min-width:112vw;
  justify-content:space-evenly;
}

.faixa-logos__item{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* A altura vem do design; a largura sai sozinha, pela proporção real
   do arquivo. Assim nenhuma logo de cliente aparece esticada. */
.faixa-logos__item img{
  width:auto;
  height:calc(var(--alt) * .82 * var(--u));
  max-width:none;
  object-fit:contain;
}

/* Quem prefere menos animação vê a faixa parada */
@media (prefers-reduced-motion:reduce){
  .faixa-logos__trilho{ animation:none; }
}


/* ==========================================================
   DOBRA 2 — "O que vamos entregar em 30 dias?"
   ========================================================== */

.entregas{
  padding-block:calc(100 * var(--u));
  /* no celular a barra vermelha fica fixa no topo:
     a rolagem precisa parar abaixo dela */
  scroll-margin-top:calc(60 * var(--u));
}

.entregas__grid{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.entregas__intro{ width:100%; }

/* o botão fica embaixo do vídeo */
.entregas__grid > .cta{ margin-top:calc(28 * var(--u)); }

/* Etiqueta cinza arredondada */
.etiqueta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:calc(8 * var(--u)) calc(22 * var(--u));
  border-radius:999px;
  /* mesma pílula, só que vazada com traço preto (igual à escura, invertida) */
  background:transparent;
  border:1px solid rgba(0,0,0,.55);
  font-family:var(--fonte-corpo);
  font-weight:400;
  font-size:max(12px, calc(13.5 * var(--u)));
  line-height:1.4;
  color:var(--texto-corpo);
}

.entregas__titulo{
  margin-top:calc(19.5 * var(--u));
  font-family:var(--fonte-titulo);
  font-weight:500;
  font-size:max(30px, calc(50 * var(--u)));
  line-height:1.15;
  letter-spacing:-0.03em;
  background-image:var(--degrade-titulo);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* "30 dias?" em verde */
.entregas__titulo-destaque{
  background-image:var(--degrade-verde);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.entregas__texto{
  margin-top:calc(30 * var(--u));
  font-family:var(--fonte-corpo);
  font-weight:400;
  font-size:max(15px, calc(21 * var(--u)));
  line-height:1.5;
  color:var(--texto-corpo);
}

.entregas__intro .cta{ margin-top:calc(30 * var(--u)); }

/* ---- O vídeo --------------------------------------------- */

.entregas__video{
  position:relative;
  width:fit-content;          /* a caixa acompanha o vídeo, senão o botão e a barra fogem para fora */
  margin-top:calc(28 * var(--u));
}

.video-diag{
  display:block;          /* sem isso sobra um vão embaixo do vídeo */
  width:auto;
  max-width:100%;
  height:calc(620 * var(--u));
  border-radius:10px;
  background:#000;
  object-fit:cover;
  cursor:pointer;
}

/* botão de som, por cima do vídeo */
.video-som{
  position:absolute;
  left:max(16px, calc(22 * var(--u)));
  top:max(16px, calc(22 * var(--u)));
  display:inline-flex;
  align-items:center;
  gap:calc(8 * var(--u));
  height:calc(40 * var(--u));
  min-height:36px;
  padding-inline:calc(16 * var(--u));
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
  font-family:var(--fonte-corpo);
  font-weight:600;
  font-size:max(12px, calc(14 * var(--u)));
  color:var(--branco);
  cursor:pointer;
  transition:background-color .18s ease;
}

.video-som:hover{ background:rgba(0,0,0,.78); }

.video-som:focus-visible{
  outline:2px solid var(--branco);
  outline-offset:3px;
}

/* ícone de som: barrinhas simples, viram "mudo" quando desligado */
.video-som__icone{
  width:16px;
  height:16px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4zm12.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.video-som--ligado{ background:#111; }

/* barra de progresso, colada na base do vídeo */
.video-barra{
  position:absolute;
  left:max(16px, calc(22 * var(--u)));
  right:max(16px, calc(22 * var(--u)));
  bottom:max(16px, calc(22 * var(--u)));
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.65);
  overflow:hidden;
  cursor:pointer;
}

.video-barra__cheio{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:#111;
}


/* ---- Coluna da direita: os 5 itens (640 de 1280 = 50%) --- */

.entregas__lista{
  --col-numero:18.594%;            /* 119 de 640 */
  --vao:calc(60 * var(--u));       /* espaço entre um item e o próximo */
  position:relative;
  flex:0 1 50%;
  padding:0;
  list-style:none;
}

.entrega{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:calc(20 * var(--u));
  padding-left:var(--col-numero);
}

.entrega + .entrega{ margin-top:var(--vao); }

/* Risco cinza que liga um check ao próximo */
.entrega:not(:last-child)::before{
  content:'';
  position:absolute;
  left:calc(var(--col-numero) + 20 * var(--u));   /* bem no meio do check */
  top:calc(26 * var(--u));
  bottom:calc(-1 * (var(--vao) + 26 * var(--u)));
  border-left:1px solid var(--linha-cinza);
}

/* O degradê só é pintado dentro da caixa do elemento. Por isso a caixa
   precisa ser mais alta que a letra (line-height 1.2), senão o topo e a
   base dos números ficam sem degradê e somem. */
.entrega__numero{
  position:absolute;
  left:0;
  top:calc(36 * var(--u));      /* mesma altura do centro do número no Figma */
  transform:translateY(-50%);
  width:var(--col-numero);
  font-family:var(--fonte-corpo);
  font-weight:700;
  font-size:max(52px, calc(95 * var(--u)));
  line-height:1.2;
  letter-spacing:-0.04em;
  background-image:var(--degrade-numero);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  user-select:none;
}

/* position + z-index garantem que o check fique POR CIMA do risco cinza */
.entrega__check{
  position:relative;
  z-index:1;
  flex:none;
  width:calc(40 * var(--u));
  height:calc(40 * var(--u));
  min-width:28px;
  min-height:28px;
}

.entrega__conteudo{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:calc(10 * var(--u));
}

.entrega__titulo{
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:max(18px, calc(24 * var(--u)));
  line-height:1.406;
  background-image:var(--degrade-verde);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.entrega__texto{
  font-family:var(--fonte-corpo);
  font-weight:400;
  font-size:max(15px, calc(18 * var(--u)));
  line-height:1.5;
  color:var(--texto-corpo);
}


/* ==========================================================
   DOBRA 3 — "O que executamos"
   ----------------------------------------------------------
   Fundo preto, como antes. 5 cards com borda fina: os 3 de
   cima dividem a linha em 3, os 2 de baixo dividem em 2.
   ========================================================== */

.executa{
  background-image:var(--degrade-preto);
  padding-block:calc(120 * var(--u));
  color:var(--branco);
}

/* a etiqueta sobre fundo escuro vira contorno */
.etiqueta--escura{
  border-color:rgba(255,255,255,.55);
  color:var(--branco);
}

.executa__interno{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.executa__titulo{
  background-image:linear-gradient(-90deg, #D6D6D6 0%, #FFFFFF 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding-bottom:.16em;
  margin-bottom:-.16em;
  max-width:calc(820 * var(--u));
  margin-top:calc(26 * var(--u));
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:max(28px, calc(50 * var(--u)));
  line-height:1.15;
  letter-spacing:-0.03em;
  text-wrap:balance;
}

.executa__lista{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:calc(56 * var(--u)) calc(44 * var(--u));
  width:100%;
  margin:calc(56 * var(--u)) 0 0;
  padding:0;
  list-style:none;
  text-align:left;
}

.executa__card{
  grid-column:span 2;
  display:flex;
  flex-direction:column;
  gap:calc(10 * var(--u));
  padding:calc(32 * var(--u)) calc(30 * var(--u));
  border:1px solid rgba(255,255,255,.14);
  border-radius:15px;
  background:rgba(255,255,255,.02);
}

/* 3 em cima, 2 embaixo centralizados, todos do mesmo tamanho */
.executa__card:nth-child(4){ grid-column:2 / span 2; }
.executa__card:nth-child(5){ grid-column:4 / span 2; }

/* Os cards são imagens prontas do Figma: sem borda nem fundo aqui.
   Alinhados pela base, porque os mockups vazam para cima. */
.executa__lista{ align-items:end; }

.executa__card{
  padding:0;
  border:0;
  background:none;
}

/* Em vários cards os mockups vazam para fora do quadro.
   Cada imagem diz, no próprio HTML, quanto ela é mais larga
   que o corpo do card (--larg) e quanto precisa deslocar
   (--deslocar), para todos os quadros ficarem iguais. */
.executa__imagem{
  width:var(--larg, 100%);
  max-width:none;
  margin-left:var(--deslocar, 0);
  height:auto;
  user-select:none;
  -webkit-user-drag:none;
}

/* texto que só o Google e os leitores de tela veem */
.so-leitor{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.executa__nome{
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:max(18px, calc(23 * var(--u)));
  line-height:1.35;
  background-image:var(--degrade-verde);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.executa__texto{
  font-family:var(--fonte-corpo);
  font-weight:400;
  font-size:max(15px, calc(17 * var(--u)));
  line-height:1.55;
  color:rgba(255,255,255,.72);
}

.executa__fecho{
  max-width:calc(760 * var(--u));
  margin-top:calc(48 * var(--u));
  font-family:var(--fonte-corpo);
  font-size:max(15px, calc(20 * var(--u)));
  line-height:1.5;
  color:rgba(255,255,255,.9);
}

.executa__interno .cta{ margin-top:calc(30 * var(--u)); }


/* ==========================================================
   FORMULÁRIO
   ----------------------------------------------------------
   Uma pergunta por tela. A ordem de leitura é sempre a mesma:
   onde estou -> chapéu -> pergunta -> resposta -> continuar.
   ========================================================== */

.formulario{
  background:var(--branco);
  padding-block:calc(100 * var(--u));
}

.form__caixa{
  --respiro:calc(56 * var(--u));      /* respiro interno do cartão */
  position:relative;
  max-width:calc(820 * var(--u));
  margin-inline:auto;
  padding:var(--respiro);
  border-radius:calc(22 * var(--u));
  background:var(--branco);
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 32px rgba(16,24,40,.07);
}

/* marca acima da barra de progresso */
.form__marca{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(10 * var(--u));
  margin-bottom:calc(34 * var(--u));
}

.form__marca .hero__prova-texto{ text-align:left; }

/* a mesma tag aparece na tela de sucesso, acima do título */
.sucesso .form__marca{ justify-content:center; margin-bottom:calc(26 * var(--u)); }

.form__opcional{
  font-weight:400;
  color:var(--texto-suave);
}

/* ---- Onde estou ------------------------------------------ */

.form__topo{
  display:flex;
  align-items:center;
  gap:calc(18 * var(--u));
  margin-bottom:calc(40 * var(--u));
}

.form__barra{
  flex:1 1 auto;
  height:8px;
  border-radius:999px;
  background:var(--cinza-etiqueta);
  overflow:hidden;
}

.form__barra-fill{
  display:block;
  height:100%;
  width:8%;
  border-radius:999px;
  background-image:var(--degrade-verde);
  transition:width .35s cubic-bezier(.4,0,.2,1);
}

.form__contador{
  flex:none;
  font-family:var(--fonte-corpo);
  font-weight:600;
  font-size:max(12px, calc(14 * var(--u)));
  letter-spacing:.02em;
  color:var(--texto-suave);
  font-variant-numeric:tabular-nums;
}

/* ---- A pergunta ------------------------------------------ */

.form__passo{
  margin:0;
  padding:0;
  border:0;
  display:block;
  animation:form-entra .3s ease;
}

@keyframes form-entra{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}

.form__chapeu{
  margin-bottom:calc(10 * var(--u));
  font-family:var(--fonte-corpo);
  font-size:max(14px, calc(17 * var(--u)));
  line-height:1.4;
  color:var(--texto-suave);
}

.form__pergunta{
  margin:0 0 calc(32 * var(--u));
  max-width:calc(620 * var(--u));
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:max(22px, calc(34 * var(--u)));
  line-height:1.25;
  letter-spacing:-0.02em;
  color:var(--titulo-escuro);
  text-wrap:balance;
}

/* ---- Campos ---------------------------------------------- */

.form__campo{
  scroll-margin-top:110px;
  width:100%;
  height:calc(68 * var(--u));
  min-height:58px;
  padding-inline:calc(22 * var(--u));
  border:1.5px solid var(--borda-campo);
  border-radius:15px;
  background:var(--branco);
  font-family:var(--fonte-corpo);
  font-size:max(16px, calc(19 * var(--u)));
  color:var(--titulo-escuro);
  transition:border-color .18s ease, box-shadow .18s ease;
  appearance:none;
}

.form__campo--area{
  height:auto;
  min-height:calc(160 * var(--u));
  padding:calc(18 * var(--u)) calc(22 * var(--u));
  line-height:1.55;
  border-radius:15px;
  resize:vertical;
}

.form__campo::placeholder{ color:#AFAFAF; }

.form__campo:hover{ border-color:#C4C4C4; }

.form__campo:focus{
  outline:none;
  border-color:var(--verde-claro);
  box-shadow:0 0 0 4px rgba(57,193,39,.16);
}

.form__campo--erro,
.form__campo--erro:focus{
  border-color:var(--vermelho);
  box-shadow:0 0 0 4px rgba(255,48,52,.14);
}

select.form__campo{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--texto-corpo) 50%),
    linear-gradient(135deg, var(--texto-corpo) 50%, transparent 50%);
  background-position:
    calc(100% - 26px) calc(50% + 2px),
    calc(100% - 20px) calc(50% + 2px);
  background-size:7px 7px, 7px 7px;
  background-repeat:no-repeat;
  padding-right:calc(56 * var(--u));
  cursor:pointer;
}

select.form__campo:invalid{ color:#AFAFAF; }

/* ---- Sim / Não ------------------------------------------- */

.form__escolhas{
  display:flex;
  gap:calc(16 * var(--u));
}

.form__escolha{
  flex:1 1 0;
  height:calc(68 * var(--u));
  min-height:58px;
  border:1.5px solid var(--borda-campo);
  border-radius:5px;
  background:var(--branco);
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:max(16px, calc(19 * var(--u)));
  color:var(--titulo-escuro);
  cursor:pointer;
  transition:border-color .18s ease, color .18s ease, background-color .18s ease;
}

.form__escolha:hover{ border-color:#C4C4C4; }

.form__escolha--ativa,
.form__escolha--ativa:hover{
  border-color:var(--verde-escuro);
  background:rgba(57,193,39,.09);
  color:var(--verde-escuro);
}

/* Várias escolhas: uma opção por linha, com quadradinho de marcar */
.form__escolhas--varias{
  flex-direction:column;
  gap:calc(10 * var(--u));
}

.form__escolhas--varias .form__escolha{
  flex:none;
  display:flex;
  align-items:center;
  gap:max(12px, calc(14 * var(--u)));
  height:auto;
  min-height:54px;
  padding:calc(14 * var(--u)) calc(20 * var(--u));
  font-weight:500;
  font-size:max(15px, calc(17 * var(--u)));
  text-align:left;
}

.form__escolhas--varias .form__escolha::before{
  content:'';
  flex:none;
  width:20px;
  height:20px;
  border:1.5px solid var(--borda-campo);
  border-radius:6px;
  background:var(--branco) no-repeat center / 70%;
  transition:background-color .18s ease, border-color .18s ease;
}

.form__escolhas--varias .form__escolha--ativa::before{
  border-color:transparent;
  background-color:var(--verde-escuro);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.7'/%3E%3C/svg%3E");
}

/* ---- Aviso de erro --------------------------------------- */

.form__erro{
  display:flex;
  align-items:center;
  gap:calc(8 * var(--u));
  margin-top:calc(12 * var(--u));
  font-family:var(--fonte-corpo);
  font-size:max(13px, calc(15 * var(--u)));
  line-height:1.4;
  color:var(--vermelho);
}

.form__erro::before{
  content:'!';
  flex:none;
  display:grid;
  place-items:center;
  width:calc(18 * var(--u));
  min-width:16px;
  height:calc(18 * var(--u));
  min-height:16px;
  border-radius:50%;
  background:var(--vermelho);
  font-size:max(10px, calc(12 * var(--u)));
  font-weight:700;
  color:var(--branco);
}

/* ---- Continuar / voltar ---------------------------------- */

.form__acoes{
  display:flex;
  align-items:center;
  gap:calc(24 * var(--u));
  margin-top:calc(32 * var(--u));
}

.form__avancar{
  flex:none;
  width:auto;
  min-width:calc(260 * var(--u));
  height:calc(66 * var(--u));
}

.form__avancar:disabled{ opacity:.65; cursor:wait; }
.form__avancar.botao-verde--enviando:disabled{ opacity:1; cursor:progress; }

.form__voltar{
  padding:calc(8 * var(--u)) 0;
  border:0;
  background:transparent;
  font-family:var(--fonte-corpo);
  font-weight:600;
  font-size:max(14px, calc(16 * var(--u)));
  color:var(--texto-suave);
  cursor:pointer;
  transition:color .18s ease;
}

.form__voltar:hover{ color:var(--verde-escuro); }

.form__aviso{
  margin-top:calc(36 * var(--u));
  padding-top:calc(24 * var(--u));
  border-top:1px solid var(--linha-card);
  font-family:var(--fonte-corpo);
  font-size:max(11px, calc(13 * var(--u)));
  line-height:1.5;
  color:var(--texto-suave);
}


/* ==========================================================
   DEPOIMENTO ABAIXO DO FORMULÁRIO
   ========================================================== */


/* ==========================================================
   TELA DE SUCESSO
   ========================================================== */

.sucesso{
  max-width:calc(1100 * var(--u));
  margin-inline:auto;
  text-align:center;
}

.sucesso__titulo{
  margin:0;
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:max(30px, calc(58 * var(--u)));
  line-height:1.15;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  color:var(--titulo-escuro);
}

/* "realizado com sucesso" com fundo verde, igual à referência */
.sucesso__destaque{
  display:inline-block;
  margin-top:calc(10 * var(--u));
  padding:calc(4 * var(--u)) calc(20 * var(--u));
  border-radius:calc(8 * var(--u));
  background-image:var(--degrade-verde);
  color:var(--branco);
}

.sucesso__video{
  position:relative;
  width:fit-content;            /* a caixa acompanha o vídeo, senão o botão e a barra fogem */
  margin:calc(34 * var(--u)) auto 0;
}

.sucesso__video .video-diag{ height:calc(460 * var(--u)); }

.sucesso__cta{ margin-top:calc(26 * var(--u)); }

.sucesso__texto{
  margin-top:calc(26 * var(--u));
  font-family:var(--fonte-corpo);
  font-size:max(15px, calc(20 * var(--u)));
  color:var(--texto-corpo);
}


/* ---- Frase de cliente embaixo do formulário -------------- */
/* Sem caixa, sem nome, sem faixa: só a frase, bem discreta. */

.prova{
  max-width:calc(560 * var(--u));
  margin:calc(30 * var(--u)) auto 0;
  padding:0;
  text-align:center;
}

.prova__aspas{
  width:calc(22 * var(--u));
  min-width:18px;
  height:auto;
  color:var(--verde-botao);
  opacity:.5;
}

.prova__texto{
  margin:calc(10 * var(--u)) 0 0;
  font-family:var(--fonte-corpo);
  font-weight:400;
  font-size:max(14px, calc(16 * var(--u)));
  line-height:1.55;
  color:var(--texto-suave);
  transition:opacity .25s ease;
}

.prova--trocando .prova__texto{ opacity:0; }

/* na página inicial as aspas são pretas e o bloco respira mais */
.prova--loop{
  margin-top:calc(54 * var(--u));
  max-width:calc(620 * var(--u));
}

.prova--loop .prova__aspas{ color:var(--titulo-escuro); opacity:.35; }

.prova--loop .prova__texto{ min-height:calc(52 * var(--u)); }

@media (prefers-reduced-motion:reduce){
  .prova__texto{ transition:none; }
}

/* ---- Linha do tempo 01 → 04 ------------------------------ */

.linha-tempo{
  display:flex;
  margin:calc(56 * var(--u)) 0 0;
  padding:0;
  list-style:none;
}

.linha-tempo__etapa{
  position:relative;
  flex:1 1 0;
  padding-inline:calc(14 * var(--u));
}

/* o traço que liga um número ao próximo */
.linha-tempo__etapa:not(:last-child)::after{
  content:'';
  position:absolute;
  top:calc(37 * var(--u));
  left:calc(50% + 36 * var(--u));
  right:calc(-50% + 36 * var(--u));
  height:4px;
  border-radius:999px;
  background:var(--anel-apagado);
}

.linha-tempo__etapa--feita:not(:last-child)::after{ background:var(--verde-claro); }

/* Anel aberto, como na referência: um círculo com uma falha,
   e o número no centro. O anel usa currentColor, então basta
   trocar a cor do bloco para o anel e o número mudarem juntos. */
.linha-tempo__numero{
  position:relative;
  display:grid;
  place-items:center;
  width:calc(78 * var(--u));
  min-width:64px;
  height:calc(78 * var(--u));
  min-height:64px;
  margin-inline:auto;
  color:var(--anel-apagado);
}

.linha-tempo__anel{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.linha-tempo__digitos{
  position:relative;
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:max(21px, calc(27 * var(--u)));
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}

/* etapa já cumprida */
.linha-tempo__etapa--feita .linha-tempo__numero{ color:var(--verde-claro); }

.linha-tempo__titulo{
  margin:calc(18 * var(--u)) 0 0;
  font-family:var(--fonte-titulo);
  font-weight:400;
  font-size:max(15px, calc(20 * var(--u)));
  line-height:1.3;
  color:var(--titulo-escuro);
}

.linha-tempo__titulo strong{ font-weight:600; }

.linha-tempo__texto{
  margin-top:calc(12 * var(--u));
  font-family:var(--fonte-corpo);
  font-size:max(13px, calc(15 * var(--u)));
  line-height:1.5;
  color:var(--texto-corpo);
}


/* ==========================================================
   PÁGINA DO FORMULÁRIO (formulario.html)
   ----------------------------------------------------------
   O formulário mora numa página só dele. Estas regras valem
   apenas lá, por causa da classe "pagina-form" no <body>.
   ========================================================== */

.pagina-form{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--branco);
}

.pagina-form .formulario{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  background:transparent;
  padding-block:calc(56 * var(--u));
}

.pagina-form .formulario > .container{ width:100%; }

/* ---- Topo ------------------------------------------------ */

.topo-form{
  background:var(--branco);
  border-bottom:1px solid var(--linha-card);
  padding-block:calc(20 * var(--u));
}

.topo-form__interno{
  display:flex;
  align-items:center;
  justify-content:center;
}

.topo-form__voltar{
  display:inline-flex;
  align-items:center;
  gap:calc(8 * var(--u));
  font-family:var(--fonte-corpo);
  font-weight:600;
  font-size:max(13px, calc(16 * var(--u)));
  color:var(--verde-escuro);
  transition:opacity .2s ease;
}

.topo-form__voltar:hover{ opacity:.7; }

.topo-form__marca{
  display:inline-flex;
  flex:none;
}

.topo-form__marca img{
  width:auto;
  height:calc(30 * var(--u));
  min-height:22px;
}


/* ==========================================================
   BOTÃO FLUTUANTE DO WHATSAPP
   ----------------------------------------------------------
   A marca oficial: círculo verde do WhatsApp com o símbolo
   branco. Sem sombra, como pedido.
   ========================================================== */

.zap{
  position:fixed;
  right:clamp(16px, 2vw, 32px);
  bottom:clamp(16px, 2vw, 32px);
  z-index:60;
  display:grid;
  place-items:center;
  width:clamp(52px, 4.2vw, 62px);
  height:clamp(52px, 4.2vw, 62px);
  border-radius:50%;
  background:#25D366;
  transition:transform .18s ease, filter .18s ease;
}

.zap svg{
  width:56%;
  height:56%;
  fill:#FFFFFF;
}

.zap:hover{ transform:scale(1.06); filter:brightness(1.04); }

.zap:focus-visible{
  outline:3px solid #25D366;
  outline-offset:4px;
}

@media (prefers-reduced-motion:reduce){
  .zap{ transition:none; }
  .zap:hover{ transform:none; }
}

@media (prefers-reduced-motion:reduce){}


/* ---- Números da agência (hero e formulário) -------------- */

.numeros{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(20 * var(--u));
  width:100%;
}

.numero{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  flex:1 1 0;
  padding-inline:calc(12 * var(--u));
  text-align:center;
}

/* o risquinho fica entre um número e outro */
.numero + .numero{ border-left:1px solid var(--borda-campo); }

.numero strong{
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:max(18px, calc(22 * var(--u)));
  line-height:1.1;
  letter-spacing:-0.02em;
  color:var(--titulo-escuro);
  white-space:nowrap;
}

.numero span{
  font-family:var(--fonte-corpo);
  font-weight:500;
  font-size:max(11px, calc(12 * var(--u)));
  line-height:1.25;
  color:var(--texto-suave);
}


/* ----------------------------------------------------------
   Selos embaixo do formulário: prova de credibilidade no
   lugar dos depoimentos, que voltam quando houver reais
   ---------------------------------------------------------- */

.selos-form{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:calc(24 * var(--u));
  max-width:calc(560 * var(--u));
  margin:calc(36 * var(--u)) auto 0;
  padding:calc(22 * var(--u)) calc(28 * var(--u));
  border:1px solid var(--borda-campo);
  border-radius:15px;
  background:var(--branco);
}

/* ==========================================================
   FAQ — perguntas que abrem e fecham (+ / −)
   ========================================================== */

.faq{
  background:transparent;
  padding-block:calc(110 * var(--u));
}

.faq__interno{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.faq__titulo{
  margin-top:calc(19.5 * var(--u));
  font-family:var(--fonte-titulo);
  font-weight:500;
  font-size:max(30px, calc(50 * var(--u)));
  line-height:1.15;
  letter-spacing:-0.03em;
  background-image:var(--degrade-titulo);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding-bottom:.16em;
  margin-bottom:-.16em;
}

.faq__lista{
  width:100%;
  max-width:calc(860 * var(--u));
  margin-top:calc(48 * var(--u));
  text-align:left;
  border-top:1px solid var(--borda-campo);
}

.faq__item{ border-bottom:1px solid var(--borda-campo); }

.faq__pergunta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(24 * var(--u));
  padding:calc(26 * var(--u)) 0;
  list-style:none;
  cursor:pointer;
  font-family:var(--fonte-titulo);
  font-weight:600;
  font-size:max(16px, calc(20 * var(--u)));
  line-height:1.4;
  letter-spacing:-0.01em;
  color:var(--titulo-escuro);
}

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

.faq__pergunta:focus-visible{
  outline:2px solid var(--verde-escuro);
  outline-offset:4px;
  border-radius:4px;
}

/* o + é feito de dois tracinhos; aberto, o de pé deita e vira − */
.faq__icone{
  position:relative;
  flex:none;
  width:calc(34 * var(--u));
  height:calc(34 * var(--u));
  min-width:30px;
  min-height:30px;
  border:1.5px solid var(--borda-campo);
  border-radius:50%;
  transition:background-color .2s ease, border-color .2s ease;
}

.faq__icone::before,
.faq__icone::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:12px;
  height:1.8px;
  border-radius:2px;
  background:var(--titulo-escuro);
  transform:translate(-50%, -50%);
  transition:transform .2s ease, background-color .2s ease;
}

.faq__icone::after{ transform:translate(-50%, -50%) rotate(90deg); }

.faq__pergunta:hover .faq__icone{ border-color:#C4C4C4; }

.faq__item[open] .faq__icone{
  border-color:transparent;
  background-image:none;
  background-color:var(--titulo-escuro);
}

.faq__item[open] .faq__icone::before,
.faq__item[open] .faq__icone::after{ background:var(--branco); }

.faq__item[open] .faq__icone::after{ transform:translate(-50%, -50%) rotate(0deg); }

.faq__resposta{
  padding:0 calc(60 * var(--u)) calc(28 * var(--u)) 0;
  font-family:var(--fonte-corpo);
  font-weight:400;
  font-size:max(16px, calc(19 * var(--u)));
  line-height:1.65;      /* texto longo pede mais respiro entre as linhas */
  color:var(--texto-corpo);
}


/* ==========================================================
   RODAPÉ
   ========================================================== */

.rodape{
  background-image:var(--degrade-preto);
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(36 * var(--u)) var(--margem-lateral);
}

.rodape__interno{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(14 * var(--u));
}

.rodape__logo{
  width:auto;
  height:calc(34 * var(--u));
  min-height:26px;
}

/* Nota de rodapé: precisa estar ali, não precisa ser lida.
   Menor e apagada, para não competir com a logo nem com o resto. */
.rodape__texto{
  font-family:var(--fonte-corpo);
  font-weight:400;
  font-size:max(11px, calc(13 * var(--u)));
  line-height:1.5;
  letter-spacing:.02em;
  text-align:center;
  color:rgba(255,255,255,.45);
}


/* ==========================================================
   TELAS MENORES
   ----------------------------------------------------------
   Até aqui o layout inteiro encolhe sozinho, mantendo as
   proporções do grid. Daqui pra baixo são as mudanças de
   arranjo: o que deixa de ficar lado a lado e passa a empilhar.
   ========================================================== */

/* Notebook menor: a margem de 16,7% apertaria demais o texto,
   então abrimos a área útil e usamos uma margem fixa. */
@media (max-width:1200px){
  :root{
    --margem-lateral:48px;
    --util:calc(100vw - 96px);
  }
}

/* Tablet em pé e celular — tudo empilhado */
@media (max-width:860px){
  :root{
    --margem-lateral:32px;
    --util:calc(100vw - 64px);
  }

  /* ---- DOBRA 1 ---- */

  .so-celular{ display:inline; }
  .so-pc{ display:none; }

  /* a barra acompanha a rolagem */
  .barra-superior{
    position:sticky;
    top:0;
    z-index:50;
  }

  .hero{ padding-top:28px; }

  /* a etiqueta diminuiu só no computador; no celular fica como era */
  .etiqueta{ padding:calc(13 * var(--u)) calc(34 * var(--u)); font-size:13px; }

  /* no lugar da linha miúda "AGÊNCIA MEGAFONE" entra o bloco das
     três fotinhas, que diz a mesma coisa e tem mais presença */
  .hero__eyebrow{ display:none; }
  .hero__prova{ order:-1; margin-bottom:4px; }

  .hero__grid{
    flex-direction:column;
    align-items:center;
    gap:8px;
  }

  .hero__texto{
    flex:1 1 auto;
    width:100%;
    padding-top:0;
    gap:20px;
    text-align:center;
    align-items:center;
  }

  .hero__eyebrow{
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 18px;
    font-size:9px;
    letter-spacing:.2em;
    white-space:normal;
  }

  .hero__titulo{ font-size:clamp(28px, 6.6vw, 40px); text-wrap:balance; }
  .hero__subtitulo{ font-size:clamp(16px, 4.3vw, 18px); }

  .hero__avatares img{ width:34px; height:34px; }

  /* no celular a foto e os círculos saem; no lugar entram os selos */
  .hero__visual{ display:none; }
  .hero{ padding-bottom:44px; }

  .certificados{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    width:100%;
    margin-top:14px;
  }

  /* as duas logos são largas; o Google um pouco mais alto
     porque é menos comprido que o Meta */
  .numeros{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    width:100%;
  }

  .numero{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1px;
    flex:1 1 0;
    padding-inline:8px;
    text-align:center;
  }

  .numero + .numero{ border-left:1px solid #DCDCDC; }

  .numero strong{
    font-family:var(--fonte-titulo);
    font-weight:600;
    font-size:18px;
    line-height:1.1;
    letter-spacing:-0.02em;
    color:var(--titulo-escuro);
    white-space:nowrap;
  }

  .numero span{
    font-family:var(--fonte-corpo);
    font-weight:500;
    font-size:11px;
    line-height:1.25;
    color:var(--texto-suave);
  }

  .botao-verde,
  .botao-verde--grande{
    width:100%;
    max-width:425px;
    height:64px;
    gap:12px;
    border-radius:5px;
    font-size:clamp(15px, 3.9vw, 19px);
  }

  .botao-verde__seta{ width:24px; height:24px; }

  .cta{
    display:flex;
    width:100%;
    max-width:425px;
    gap:9px;
  }
  .cta__nota{ font-size:13px; }

  /* ---- Faixa de logos ---- */
  .faixa-logos{ gap:24px; padding-block:30px 34px; }
  .faixa-logos__grupo{ gap:52px; padding-right:52px; }
  .faixa-logos__item img{ height:calc(var(--alt) * .52px); }

  /* ---- DOBRA 2 ---- */
  .entregas{ padding-block:56px; scroll-margin-top:62px; }

  .entregas__grid{
    grid-template-columns:1fr;
    gap:0;                 /* os espaços vêm das margens de cada bloco */
  }

  .entregas__intro{
    flex:1 1 auto;
    width:100%;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .entregas__titulo{ margin-top:16px; font-size:clamp(24px, 6.3vw, 40px); }
  .entregas__texto{ margin-top:18px; font-size:clamp(14px, calc(3.9vw - 1px), 17px); }
  .entregas__grid > .cta{ grid-column:1; grid-row:auto; margin-top:18px; }

  .entregas__video{ grid-column:1; grid-row:auto; margin-top:16px; width:min(340px, 100%); margin-inline:auto; }
  .video-diag{ height:auto; width:100%; max-width:340px; border-radius:10px; }
  .video-som{ left:16px; top:16px; height:34px; padding-inline:12px; font-size:12.5px; }
  .video-barra{ left:16px; right:16px; bottom:16px; }

  .entregas__lista{
    flex:1 1 auto;
    width:100%;
    --col-numero:0px;
    --vao:12px;
  }

  /* Sem o risco vertical: no celular ele atrapalharia mais do que ajuda */
  .entrega:not(:last-child)::before{ display:none; }

  /* No celular cada etapa vira um card: borda fina e cantos
     arredondados iguais aos botões, para não parecer texto solto */
  .entrega{
    flex-wrap:wrap;
    align-items:center;
    gap:10px 14px;
    padding:18px 20px 22px;
    background:#fff;
    border:1px solid rgba(0,0,0,.09);
    border-radius:15px;
  }

  .entrega__numero{
    position:static;
    transform:none;
    width:auto;
    font-size:44px;
  }

  /* check vai para o canto direito do card */
  .entrega__check{ width:28px; height:28px; min-width:28px; min-height:28px; margin-left:auto; }

  .entrega__conteudo{ flex:1 1 100%; gap:6px; }
  .entrega__titulo{ font-size:19px; }
  .entrega__texto{ font-size:15px; }

  /* ---- DOBRA 3 ---- */
  .executa{ padding-block:56px; }
  .executa__titulo{ max-width:none; margin-top:18px; font-size:clamp(26px, 6.6vw, 38px); }

  .executa__lista{
    grid-template-columns:1fr;
    gap:28px;
    margin-top:32px;
    /* os cards não vão mais de ponta a ponta: sobra respiro dos lados */
    max-width:300px;
    margin-inline:auto;
  }

  .executa__card,
  .executa__card:nth-child(n){ grid-column:auto; }

  .executa__fecho{ max-width:none; margin-top:32px; font-size:clamp(15px, 3.9vw, 18px); }
  .executa__interno .cta{ margin-top:24px; }

  /* ---- PÁGINA DO FORMULÁRIO ---- */
  .topo-form{ padding-block:14px; }
  .topo-form__voltar{ font-size:13px; }
  .topo-form__marca img{ height:22px; }
  .rodape__logo{ height:26px; }
  .rodape__interno{ gap:12px; }
  .pagina-form .formulario{ align-items:flex-start; padding-block:18px 28px; }

  /* ---- FORMULÁRIO ---- */
  .formulario{ padding-block:28px 40px; }

  /* Sem cartão: o conteúdo respira direto na página, como você pediu.
     Sem fundo, sem sombra, sem borda — só o respiro das laterais. */
  .form__caixa{
    --respiro:0px;
    max-width:none;
    padding:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .form__marca{ margin-bottom:20px; }
  .form__topo{ gap:14px; margin-bottom:24px; }
  .form__chapeu{ font-size:17px; margin-bottom:10px; }
  .form__pergunta{ font-size:clamp(24px, 7vw, 30px); margin-bottom:26px; max-width:none; }

  .form__campo,
  .form__escolha{
    height:60px;
    font-size:16px;
    border-radius:5px;
    padding-inline:18px;   /* o texto precisa respirar da borda */
  }
  .form__campo--area{ height:auto; min-height:140px; padding:16px 18px; }
  .form__escolhas{ gap:12px; }

  .form__acoes{
    flex-direction:column;   /* Prosseguir por cima, Voltar embaixo */
    align-items:stretch;
    gap:6px;
    margin-top:26px;
  }

  .form__avancar{ width:100%; min-width:0; height:60px; }
  .form__voltar{ padding:10px 0; }

  .form__aviso{
    order:2;
    margin-top:28px;
    padding-top:0;
    border-top:0;
    text-align:center;
  }

/* ---- TELA DE SUCESSO ---- */
  .sucesso{ max-width:none; }
  .sucesso .form__marca{ margin-bottom:20px; }   /* estava travado em ~300px e forçava 3 linhas */
  /* 6vw é o maior tamanho em que "REALIZADO COM SUCESSO!" ainda
     cabe numa linha só — medido, não chutado. */
  .sucesso__titulo{ font-size:clamp(20px, 6vw, 32px); }
  .sucesso__destaque{ padding:4px 14px; }
  .sucesso__video{ margin-top:24px; width:min(280px, 100%); }
  .sucesso__video .video-diag{ height:auto; width:100%; }

  .prova{ max-width:none; margin-top:22px; }
  .prova--loop{ margin-top:34px; }
  .prova--loop .prova__texto{ min-height:72px; }
  .prova__texto{ font-size:15px; }

  .sucesso__texto{ font-size:16px; }
  .sucesso__cta{ margin-top:22px; }

  /* no celular a linha do tempo vira uma coluna */
  .linha-tempo{
    flex-direction:column;
    gap:26px;
    margin-top:36px;
    text-align:left;
  }

  .linha-tempo__etapa{
    display:grid;
    grid-template-columns:64px 1fr;
    column-gap:18px;
    padding:0;
  }

  /* A bolinha e o título dividem a mesma linha da grade e ficam
     os dois centralizados nela. Assim a bolinha acompanha o título
     tendo ele uma linha ou duas, sem medida chumbada. */
  .linha-tempo__numero{ grid-row:1; align-self:center; margin:0; }
  .linha-tempo__titulo{ margin-top:-8px; align-self:center; font-size:17px; }
  /* a descrição fica na coluna do texto, não na da bolinha */
  /* texto um pouco maior e com folga na direita, para não
     encostar na borda da tela */
  .linha-tempo__texto{ grid-column:2; margin-top:6px; font-size:15px; padding-right:22px; }

  /* o traço passa a ser vertical */
  .linha-tempo__etapa:not(:last-child)::after{
    top:60px;
    bottom:-26px;
    left:30px;
    right:auto;
    width:4px;
    height:auto;
  }

  .selos-form{
    max-width:none;
    gap:0;
    margin-top:28px;
    padding:18px 10px;
  }

  .selos-form .numero{ padding-inline:6px; }

  /* ---- FAQ ---- */
  .faq{ padding-block:56px; }
  .faq__titulo{ margin-top:16px; font-size:clamp(28px, 6.6vw, 40px); }
  .faq__lista{ max-width:none; margin-top:28px; }
  .faq__pergunta{ gap:16px; padding:18px 0; font-size:16px; }
  .faq__resposta{ padding:0 0 20px; font-size:16px; line-height:1.65; }

  /* ---- RODAPÉ ---- */
  .rodape{ min-height:0; padding-block:26px; }
  .rodape__texto{ font-size:11px; }
}

/* Celular pequeno */
@media (max-width:480px){
  :root{
    --margem-lateral:32px;
    --util:calc(100vw - 64px);
  }

  .barra-superior{ padding-block:14px; }
  .barra-superior__texto{ font-size:15px; }

  /* deixa só "AGÊNCIA MEGAFONE": as pontas ficariam ilegíveis */
  .hero__eyebrow span:first-child,
  .hero__eyebrow span:last-child{ display:none; }

  .botao-verde,
  .botao-verde--grande{ gap:10px; height:60px; }

  /* a hierarquia da tag precisa se manter no celular:
     o nome maior, a linha de apoio menor */
  .hero__prova-texto{ font-size:12px; text-align:left; }
  .hero__prova-texto strong{ font-size:13.5px; }

  .faixa-logos{ gap:20px; padding-block:26px 30px; }
  .faixa-logos__grupo{ gap:44px; padding-right:44px; }
  .faixa-logos__item img{ height:calc(var(--alt) * .44px); }

  .entrega__numero{ font-size:46px; }
}

/* Para quem prefere menos animação no sistema */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .botao-verde{ transition:none; }
  .botao-verde:hover{ transform:none; }
}