/* ============================================================
   CONTATO / CTA FINAL — seção ESCURA: headline, escassez,
   e-mail e formulário em glassmorphism sobre preto.
   ============================================================ */
.contact{position:relative;overflow:hidden;background:var(--black);color:var(--off-white)}
.contact__head{
  font-family:var(--font-display);font-stretch:78%;font-weight:900;text-transform:uppercase;
  font-size:clamp(2.4rem,11vw,6.5rem);line-height:.92;letter-spacing:-.035em;margin-top:clamp(20px,4vw,28px);
}
.contact__intro{margin-top:clamp(24px,4vw,32px);max-width:54ch;font-size:clamp(1rem,4vw,1.15rem);line-height:1.4;color:rgba(255,255,255,.6)}
.contact__scarcity{margin-top:16px;max-width:48ch;font-size:clamp(1rem,4vw,1.15rem);color:var(--off-white);font-weight:500;line-height:1.5}
.contact__email{
  display:inline-flex;gap:12px;align-items:center;margin-top:clamp(28px,5vw,40px);
  font-family:var(--font-mono);font-size:clamp(1rem,4vw,1.25rem);font-weight:700;
}
.contact__email:hover{color:var(--emerald)}
.contact__email .arrow{color:var(--emerald)}

/* —— Brilho atrás do vidro (neutro: é ele que o blur revela) —— */
.contact__glow{position:absolute;inset:0;pointer-events:none}
/* Os borrões coloridos de 90px de desfoque atrás da seção saíram: brilho
   difuso é textura de tela, e esta página é papel e tinta. O elemento
   segue no HTML e não pinta. */
.contact__glow{display:none}
.contact__glow span:first-child{
  width:560px;height:560px;left:-8%;bottom:12%;
  background:rgba(255,255,255,.07);
}
.contact__glow span:last-child{
  width:480px;height:480px;right:0;bottom:-6%;
  background:rgba(255,255,255,.12);
}

/* —— Bloco de garantia (risco reverso) — destaque esmeralda antes do formulário —— */
.guarantee{
  position:relative;display:block;margin-top:clamp(40px,7vw,64px);max-width:1080px;
  /* Era um bloco menta de canto 24px flutuando sobre o grafite: doce,
      arredondado e sem material nenhum. Agora é um cartão de PAPEL com
      filete de tinta e sombra dura esmeralda, o mesmo objeto do cartão do
      hero. Sobre grafite a sombra tem que ser esmeralda: tinta sobre
      tinta some, e é a faixa dos 30% da paleta fazendo estrutura. */
  background:var(--paper);color:var(--ink);
  border:1.5px solid var(--ink);
  padding:clamp(24px,5vw,44px);
  /* Havia um segundo `box-shadow` depois deste, sobra do bloco menta
     antigo (um desfoque esmeralda de 60px). Como as duas declarações
     estavam na mesma regra, a de baixo vencia e a sombra dura nunca
     apareceu: o bloco vinha com filete de tinta e brilho difuso, que são
     dois materiais que não convivem. */
  box-shadow:8px 8px 0 var(--green);
}
.guarantee__label{
  display:inline-block;font-family:var(--font-mono);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--emerald-dark);
}
.guarantee__title{
  margin-top:12px;font-family:var(--font-display);font-stretch:78%;font-weight:900;text-transform:uppercase;
  font-size:clamp(1.6rem,6.5vw,2.8rem);line-height:.98;letter-spacing:-.03em;
}
.guarantee__text{
  margin-top:16px;max-width:58ch;
  font-size:clamp(1rem,4vw,1.15rem);line-height:1.5;color:rgba(10,10,10,.72);
}
.guarantee__text b{color:var(--black);font-weight:600}

/* Microcopy de investimento — âncora de preço logo acima do formulário */
.contact__pricing{
  margin-top:clamp(24px,4vw,32px);
  font-family:var(--font-mono);font-size:clamp(13px,3.4vw,15px);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);
}
.contact__pricing b{color:var(--off-white);font-weight:700}
/* Por que "a partir de": o que faz o valor variar */
.contact__pricing-note{
  margin-top:10px;max-width:52ch;
  font-size:clamp(.9rem,3.4vw,1rem);line-height:1.5;color:rgba(255,255,255,.5);
}


/* —— Card do formulário: vidro escuro —— */
.form-card{
  position:relative;margin-top:clamp(16px,3vw,24px);max-width:1080px;
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
  backdrop-filter:blur(24px) saturate(140%);
  border:1px solid rgba(255,255,255,.14);
  padding:clamp(20px,5vw,40px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
}

/* Stepper visual 01 → 02 */
.stepper{
  display:flex;gap:8px;padding:6px;margin-bottom:clamp(28px,5vw,40px);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
}
.step{
  flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:12px 18px;line-height:1.3;font-family:var(--font-body);
}
.step small{display:block;font-weight:700;font-size:11px;letter-spacing:.08em}
.step span{font-size:clamp(11px,3vw,13px);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.step--active{background:var(--off-white);color:var(--black)}
.step--muted{color:rgba(255,255,255,.4)}
.step--muted small{color:rgba(255,255,255,.4)}

/* —— Formulário em 2 passos —— */
.fstep{border:none;margin:0;padding:0;display:none}
.fstep.is-active{display:block}
.fstep .btn-submit{margin-top:clamp(8px,2vw,12px)}

/* Erro inline por campo */
.field__err{
  margin-top:8px;font-size:13px;font-weight:500;color:#FCA5A5;
}
.field input.is-invalid{
  border-color:rgba(248,113,113,.75);
  box-shadow:0 0 0 4px rgba(248,113,113,.15);
}

/* Voltar (link discreto no passo 2) */
.btn-voltar{
  display:block;margin:14px auto 0;background:none;border:none;
  font-family:var(--font-mono);font-weight:700;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45);
  transition:color .2s;
}
.btn-voltar:hover{color:var(--off-white)}

.form-note--erro{color:#FCA5A5}

/* Campos */
.field{margin-bottom:clamp(18px,3.5vw,26px)}
.field label{display:block;font-size:clamp(.95rem,3.6vw,1.1rem);font-weight:600;margin-bottom:10px;color:var(--off-white)}
.field input{
  width:100%;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:16px;font-family:inherit;font-size:16px;color:var(--off-white);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.field input::placeholder{color:rgba(255,255,255,.35)}
.field input:focus{
  outline:none;border-color:var(--emerald);background:rgba(255,255,255,.12);
  box-shadow:0 0 0 4px rgba(16,185,129,.2);
}

/* Textarea (campo livre de detalhes) — mesma receita dos inputs */
.field textarea{
  width:100%;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:16px;font-family:inherit;font-size:16px;color:var(--off-white);
  resize:none;min-height:96px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.field textarea::placeholder{color:rgba(255,255,255,.35)}
.field textarea:focus{
  outline:none;border-color:var(--emerald);background:rgba(255,255,255,.12);
  box-shadow:0 0 0 4px rgba(16,185,129,.2);
}

/* —— Seleção única em pills (tipo de projeto) — mesma receita de vidro
      dos inputs; selecionada segue o .dd__opt.is-selected.
      (".choice" e não ".pill": .pill já é o CTA flutuante em base.css) —— */
.choices{display:flex;flex-wrap:wrap;gap:10px}
.choice{position:relative;display:block;cursor:pointer}
.choice input{position:absolute;inset:0;opacity:0;pointer-events:none}
.choice span{
  display:inline-block;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:12px 16px;font-size:15px;color:var(--off-white);
  transition:border-color .2s,box-shadow .2s,background .2s,color .2s;
}
.choice:hover span{background:rgba(16,185,129,.22)}
.choice input:checked + span{background:var(--off-white);border-color:var(--off-white);color:var(--black)}
.choice input:focus-visible + span{border-color:var(--emerald);box-shadow:0 0 0 4px rgba(16,185,129,.2)}
.choices.is-invalid .choice span{border-color:rgba(248,113,113,.75)}
@media (max-width:520px){.choice{width:100%}.choice span{display:block}}

/* —— Dropdown customizado (vidro ao abrir as perguntas) —— */
.dd{position:relative}
.dd__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:16px;font-family:inherit;font-size:16px;color:var(--off-white);text-align:left;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.dd__btn:focus-visible{outline:none;border-color:var(--emerald);box-shadow:0 0 0 4px rgba(16,185,129,.2)}
.dd__chev{width:18px;height:18px;flex:none;color:rgba(255,255,255,.6);transition:transform .25s}
.dd.open .dd__chev{transform:rotate(180deg)}
.dd.open .dd__btn{border-color:var(--emerald);background:rgba(255,255,255,.12)}

.dd__list{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;
  list-style:none;margin:0;padding:8px;max-height:300px;overflow:auto;
  background:rgba(24,24,24,.72);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 24px 48px -12px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .22s,transform .22s,visibility .22s;
}
.dd.open .dd__list{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.dd__opt{
  padding:13px 14px;font-size:15px;cursor:pointer;color:var(--paper);
  transition:background .15s,color .15s;
}
.dd__opt:hover{background:rgba(16,185,129,.22)}
.dd__opt.is-selected{background:var(--off-white);color:var(--black)}

/* Botão enviar (esmeralda) */
.btn-submit{
  /* ---------- rosa, e não esmeralda ----------
      Este é o envio: a única coisa que a página inteira pede. O esmeralda
      é a cor de MARCA (filetes, sinais, grifos) e está em dezenas de
      lugares; se o envio usa a mesma tinta do resto, ele não aponta para
      nada. O rosa é a faixa dos 10%, reservada à ação, e aqui ele fecha o
      caminho que começou no botão do cartão do hero e no pill flutuante.
      Branco sobre rosa dá 4,57:1. */
  width:100%;border:none;background:var(--rosa);color:#fff;padding:21px;
  box-shadow:4px 4px 0 var(--paper);
  transition:background .2s,transform .1s,box-shadow .1s;
  font-family:var(--font-display);font-stretch:78%;font-weight:900;font-size:clamp(14px,3.8vw,16px);
  letter-spacing:.03em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
}
/* guarda de toque: no celular o hover gruda depois do toque e o botão fica
   preso na cor de hover bem na hora em que ele precisa responder */
@media(hover:hover) and (pointer:fine){
  .btn-submit:hover{background:var(--rosa-dark)}
}
/* o mesmo carimbo dos outros botões da casa: afunda 4px e a sombra some */
.btn-submit:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--paper)}
.btn-submit[disabled]{opacity:.7;cursor:progress}
.form-note{margin-top:16px;text-align:center;font-family:var(--font-body);font-size:12px;font-weight:500;color:rgba(255,255,255,.4)}

/* Sucesso */
.form-success{display:none;text-align:center;padding:clamp(28px,6vw,48px) 12px}
.form-success.show{display:block}
.form-success h3{font-family:var(--font-display);font-stretch:78%;font-weight:900;text-transform:uppercase;font-size:clamp(1.6rem,7vw,2.6rem);letter-spacing:-.02em}
.form-success p{margin-top:12px;color:rgba(255,255,255,.6);max-width:40ch;margin-inline:auto}
.form-success__cta{margin-top:clamp(24px,4vw,32px);width:auto;padding:18px 36px}
.form-card form.hide{display:none}

/* —— Mobile: card mais enxuto, toques maiores —— */
@media(max-width:640px){
  .form-card{padding:16px}
  .stepper{padding:5px;gap:6px;margin-bottom:24px}
  .step{padding:10px 14px}
  .field{margin-bottom:16px}
  .dd__opt{padding:14px}          /* alvo de toque maior */
  .btn-submit{padding:19px}
  .form-success__cta{width:100%}
}

/* honeypot escondido */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- POR QUE ESTE BLOCO MORA NO FIM DO ARQUIVO ----------
   Ele nasceu logo acima da regra `.form-card` e não pintava nada: as
   duas têm a mesma especificidade (uma classe), então quem vencia era a
   que vinha DEPOIS, e o cartão continuava com o vidro escuro mesmo com
   os campos já claros. Variante de componente precisa vir depois do
   componente, ou subir de especificidade. Aqui a ordem resolve, e é a
   solução mais simples de ler. */
/* ============================================================
   A INVERSÃO DA SALA ESCURA (só na /landing-page)

   A seção é grafite e tinha DOIS blocos dentro: o argumento ("o que você
   recebe") em papel cheio, e o formulário num retângulo de vidro escuro
   sobre o escuro. A lógica estava ao contrário: numa sala apagada, o que
   ilumina é o que se deve tocar, e a única coisa que esta página quer
   que aconteça é o envio.

   Os dois trocaram de lugar. O argumento vira CONTORNO esmeralda, que dá
   presença sem roubar a luz; o formulário vira a ETIQUETA DE PAPEL, o
   mesmo objeto do cartão do hero desta página e da etiqueta de preço da
   /vitrine-digital. Ele passa a ser a única superfície clara da seção, e
   isso resolve a hierarquia sem precisar de mais cor.

   E resolve junto uma incoerência que a página tinha: o cartão do hero
   já usava campo de LINHA com rótulo em mono esmeralda, e o formulário
   de baixo usava campo de CAIXA com rótulo em Inter. Duas gramáticas de
   formulário na mesma página, a dois mil pixels uma da outra. Agora é
   uma só.

   Escopo estreito de propósito: só o formulário de um passo cai aqui. O
   briefing da /estudio tem dropdown de vidro, radio em pílula e
   textarea, e todos teriam que ser reestilizados no claro.
   ============================================================ */
.form-card--claro{
  background:#FBF9F3;
  border:1.5px solid var(--ink);
  /* sombra dura ESMERALDA porque o chão é grafite: tinta sobre tinta
     seria invisível, e é a faixa dos 30% fazendo estrutura */
  box-shadow:8px 8px 0 var(--green);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.form-card--claro .field{margin-bottom:clamp(14px,2.6vw,20px)}
.form-card--claro .field label{
  display:block;margin-bottom:4px;
  font-family:var(--font-mono);font-weight:700;font-size:8.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--green-dark);
}
/* campo de LINHA, não de caixa: dentro de um objeto que já tem borda,
   caixa dentro de caixa vira moldura em moldura */
.form-card--claro .field input{
  background:transparent;border:0;border-bottom:1.5px solid var(--linha);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding:6px 0 7px;
  font-size:16px;font-weight:500;color:var(--ink);
  transition:border-color .18s,border-width .18s;
}
.form-card--claro .field input::placeholder{color:#a8ada6}
.form-card--claro .field input:focus{
  outline:none;border-bottom-color:var(--rosa);border-bottom-width:2.5px;padding-bottom:6px;
}
.form-card--claro .field input.is-invalid{
  border-bottom-color:var(--rosa);box-shadow:none;
}
.form-card--claro .field__err{
  margin-top:5px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.06em;color:var(--rosa-dark);font-weight:400;
}
/* o botão mantém o rosa e o carimbo, mas a sombra volta a ser TINTA:
   aqui o chão dele é papel, não grafite */
.form-card--claro .btn-submit{
  margin-top:clamp(14px,2.6vw,20px);
  box-shadow:4px 4px 0 var(--ink);
  font-family:var(--font-mono);font-stretch:100%;font-weight:700;
  font-size:clamp(10.5px,3.2vw,12.5px);letter-spacing:.06em;
  padding:17px 18px;
}
.form-card--claro .btn-submit:active{box-shadow:0 0 0 var(--ink)}
.form-card--claro .form-note{
  margin-top:12px;font-family:var(--font-mono);font-size:9.5px;
  line-height:1.6;letter-spacing:.04em;color:var(--ink-40);font-weight:400;
}
.form-card--claro .form-note--erro{color:var(--rosa-dark)}
.form-card--claro .form-success h3{color:var(--ink)}
.form-card--claro .form-success p{color:var(--ink-soft)}

/* ---------- o argumento vira contorno ----------
   Ele era o bloco de papel da seção. Perdeu o preenchimento para o
   formulário e ficou com o filete esmeralda e a sombra dura da mesma
   cor: continua sendo um objeto, e deixa de disputar a atenção com o
   único lugar da página onde se pode agir. */
.guarantee--contorno{
  background:transparent;color:var(--paper);
  border:1.5px solid var(--green);
  box-shadow:8px 8px 0 rgba(12,145,89,.28);
}
.guarantee--contorno .guarantee__label{color:var(--green-live)}
.guarantee--contorno .guarantee__title{color:var(--paper)}
.guarantee--contorno .guarantee__text{color:#C9CDC6}
.guarantee--contorno .guarantee__text b{color:#fff}