/* =========================================================================
   CADEIRA 100K — FORMULÁRIO DE INSCRIÇÃO
   Tokens copiados na íntegra do style.css da landing (identidade-visual/
   tokens.json). Nada de cor, gradiente, radius ou fonte foi inventado aqui:
   o que é novo são só os componentes de formulário, montados a partir
   desses mesmos tokens.
   ========================================================================= */

/* Termina Test — fonte display real do cliente */
@font-face{
  font-family:'Termina Test'; src:url('fonts/TerminaTest-Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Termina Test'; src:url('fonts/TerminaTest-Demi.otf') format('opentype');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Termina Test'; src:url('fonts/TerminaTest-Bold.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}

/* A Raleway desenha os algarismos em estilo antigo: 3, 4, 5, 7 e 9 descem
   abaixo da linha de base e nenhum alcança a altura das maiúsculas. Num
   botão em caixa alta — "QUERO FAZER 100 MIL EM 3 MESES" — o número parece
   ter escorregado para baixo.
   unicode-range troca SÓ os dígitos pela Termina, cujos algarismos assentam
   na base e têm altura de maiúscula. Todo o resto do texto segue Raleway. */
@font-face{
  font-family:'Algarismos'; src:url('fonts/TerminaTest-Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range: U+0030-0039;
}
@font-face{
  font-family:'Algarismos'; src:url('fonts/TerminaTest-Demi.otf') format('opentype');
  font-weight:500 600; font-style:normal; font-display:swap;
  unicode-range: U+0030-0039;
}
@font-face{
  font-family:'Algarismos'; src:url('fonts/TerminaTest-Bold.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range: U+0030-0039;
}

:root{
  /* Indigo/Navy — estrutura, fundos escuros */
  --primary-50:#eff3fa; --primary-100:#dbe3f5; --primary-200:#b5c7ee; --primary-300:#80a0e5;
  --primary-400:#2f65da; --primary-500:#133996; --primary-600:#123278; --primary-700:#112a5f;
  --primary-800:#0f2248; --primary-900:#0b1933;

  /* Celeste/Cyan — ação, destaque, CTA */
  --accent-50:#f3faff; --accent-100:#e0f5ff; --accent-200:#ccf0ff; --accent-300:#b8ebff;
  --accent-400:#ade9ff; --accent-500:#a4e7ff; --accent-600:#4dc3ff; --accent-700:#0081ce;
  --accent-800:#005e99; --accent-900:#003d66;

  --text-on-dark:#d7e0e6;

  --grad-estrutura: linear-gradient(180deg, var(--primary-500), var(--primary-900));
  --grad-credencial: linear-gradient(135deg, var(--accent-500), var(--accent-50));
  --grad-cta: linear-gradient(90deg, var(--accent-700), var(--accent-500));

  --radius:999px;
  --radius-card:10px;

  --font-display:'Termina Test', 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body:'Raleway', sans-serif;

  --wrap: 1200px;
  --pad: clamp(1.25rem, 4vw, 3.5rem);

  --fs-section-title: clamp(2rem, 1.5vw + 1.5rem, 2.75rem);

  --ease: cubic-bezier(.22,1,.36,1);

  /* estado de erro — único token novo. Vermelho escolhido pra ter contraste
     AA sobre o navy do card e não brigar com o ciano da marca. */
  --danger:#ff9a9a;
}

*,*::before,*::after{ box-sizing:border-box; }
/* o atributo hidden precisa vencer os display:flex/grid declarados abaixo —
   sem isso, .form{display:flex} sobrescreve o display:none do navegador e o
   formulário continua na tela junto da mensagem de sucesso */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  background:var(--primary-900);
  color:var(--text-on-dark);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
}
/* grain sutil no fundo — idêntico ao da landing */
body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}
main{ flex:1 0 auto; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
p{ margin:0; }
h1,h2,h3{ margin:0; font-family:var(--font-display); font-weight:600; text-wrap:balance; }
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); position:relative; }
.section{ padding-block: clamp(2.5rem, 6vw, 5rem); position:relative; }

/* foco visível e consistente em tudo que é interativo */
:focus-visible{ outline:2px solid var(--accent-500); outline-offset:3px; }

/* ---------- buttons & pills ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-body); font-weight:600; font-size:clamp(.95rem, 1vw + .6rem, 1.15rem);
  padding: 1.1em 1.7em;
  border-radius:var(--radius);
  border:none; cursor:pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), opacity .3s var(--ease);
}
.btn--cta{
  background:var(--grad-cta); color:var(--primary-900);
  box-shadow: 0 8px 30px -8px rgba(0,129,206,.55);
}
.btn--cta:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 14px 34px -6px rgba(0,129,206,.7); }
.btn__arrow{ width:1.1em; height:1.1em; flex:0 0 auto; transition:transform .35s var(--ease); }
.btn--cta:hover .btn__arrow{ transform:translate(2px,-2px); }
.btn[disabled]{ cursor:not-allowed; opacity:.6; transform:none; box-shadow:none; }
.btn[disabled]:hover{ transform:none; }

.pill{
  display:inline-flex; align-items:center; padding:.55em 1.2em;
  border-radius:var(--radius); font-size:.85rem; font-weight:500;
}
.pill--ghost{ background:rgba(164,231,255,.08); border:1px solid rgba(164,231,255,.25); color:var(--text-on-dark); }

.glow-breathe{ animation:glowBreathe 4.5s ease-in-out infinite; }
@keyframes glowBreathe{
  0%,100%{ box-shadow:0 8px 30px -8px rgba(0,129,206,.45); }
  50%{ box-shadow:0 8px 46px -4px rgba(164,231,255,.75); }
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; height:60px; flex:0 0 auto;
  background:rgba(11,25,51,.9); border-bottom:1px solid rgba(164,231,255,.12);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.site-header__inner{ height:60px; display:flex; align-items:center; justify-content:center; gap:1rem; }
.site-header__logo{ height:26px; width:auto; opacity:.9; }
.site-header__eyebrow{ display:none; font-size:.78rem; letter-spacing:.06em; color:var(--text-on-dark); opacity:.85; text-transform:uppercase; white-space:nowrap; }
@media (min-width:720px){
  .site-header__inner{ justify-content:space-between; }
  .site-header__eyebrow{ display:block; }
}

/* =========================================================================
   SEÇÃO ÚNICA — INSCRIÇÃO
   Mesmo tratamento da hero da landing: fundo navy sólido + degradê de
   estrutura, conteúdo em duas colunas (copy | card).
   ========================================================================= */
.inscricao{
  background:var(--primary-900);
  background-image:
    radial-gradient(90rem 60rem at 15% -10%, rgba(47,101,218,.35), transparent 60%),
    radial-gradient(70rem 50rem at 100% 110%, rgba(0,129,206,.22), transparent 60%),
    var(--grad-estrutura);
  color:var(--text-on-dark);
  display:flex; align-items:center;
  min-height:calc(100svh - 60px);
  overflow:hidden;
}
.inscricao__grid{
  display:grid; grid-template-columns:1fr; gap:2.5rem;
  align-items:center; width:100%;
}

.eyebrow{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-400); margin-bottom:1.2rem; }

.inscricao__headline{
  font-weight:600; letter-spacing:-.01em;
  font-size:clamp(1.75rem, 2.4vw + 1rem, 2.9rem); line-height:1.2;
  color:var(--text-on-dark); margin-bottom:1.4rem;
}
/* .word sem overflow:hidden — o círculo à mão precisa vazar da caixa da
   palavra sem ser cortado (mesma regra da landing) */
.word{ display:inline-block; vertical-align:top; padding-bottom:.14em; }
.word-inner{ display:inline-block; will-change:transform; }
.word-circle{ position:relative; }
.circle-svg{ position:absolute; left:-10%; top:-34%; width:122%; height:176%; pointer-events:none; overflow:visible; z-index:5; }
.circle-svg path{ stroke-dasharray:640; stroke-dashoffset:640; }

.badge-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.3rem; }
.inscricao__body{ font-weight:300; font-size:1.02rem; line-height:1.55; color:var(--text-on-dark); opacity:.9; max-width:34em; }
.inscricao__rule{ border:none; border-top:1px solid rgba(164,231,255,.18); margin-block:1.6rem; }
.inscricao__urgency{ font-weight:300; font-size:.92rem; color:var(--accent-300); margin-top:1.4rem; }

/* preço da landing repetido aqui — quem chega direto no formulário precisa
   ver o valor antes de entregar os dados */
.inscricao__price{ display:flex; align-items:baseline; gap:.6rem; margin-top:1.6rem; }
.inscricao__price strong{ font-family:var(--font-display); font-weight:600; font-size:1.55rem; color:var(--accent-500); }
.inscricao__price span{ font-weight:300; font-size:.92rem; color:var(--text-on-dark); opacity:.8; }

.checklist{ display:flex; flex-direction:column; gap:.55rem; }
.checklist li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; line-height:1.4; color:var(--text-on-dark); }
.check{ color:var(--accent-500); font-weight:700; flex:0 0 auto; }

/* =========================================================================
   CARD DO FORMULÁRIO
   Mesma linguagem do .pilar-card (vidro ciano sobre navy + brackets nos
   cantos), no radius de card e com o glow pulsante do CTA da landing.
   ========================================================================= */
.form-card{
  position:relative;
  background:rgba(164,231,255,.05);
  border:1px solid rgba(164,231,255,.18);
  border-radius:var(--radius-card);
  padding:clamp(1.6rem, 3vw, 2.6rem);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  width:100%;
}
/* brackets nos cantos — assinatura visual dos cards da landing */
.pilar-card__bracket{ position:absolute; width:18px; height:18px; opacity:.9; }
.pilar-card__bracket::before,.pilar-card__bracket::after{ content:""; position:absolute; background:var(--accent-500); }
.bracket--tl{ top:-1px; left:-1px; }
.bracket--tl::before{ width:100%; height:2px; top:0; left:0; }
.bracket--tl::after{ width:2px; height:100%; top:0; left:0; }
.bracket--br{ bottom:-1px; right:-1px; }
.bracket--br::before{ width:100%; height:2px; bottom:0; right:0; }
.bracket--br::after{ width:2px; height:100%; bottom:0; right:0; }

.form-card__title{
  font-size:clamp(1.35rem, 1.4vw + 1rem, 1.7rem); line-height:1.2;
  color:var(--text-on-dark); margin-bottom:.5rem;
}
.form-card__desc{ font-weight:300; font-size:.92rem; line-height:1.5; color:var(--accent-200); opacity:.85; margin-bottom:1.8rem; }

/* ---------- campos ---------- */
.form{ display:flex; flex-direction:column; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field__label{
  font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent-400);
}
.field__hint{ font-weight:400; letter-spacing:.02em; text-transform:none; opacity:.6; }
.field__input{
  width:100%;
  font-family:var(--font-body); font-size:1rem; font-weight:400;
  color:var(--text-on-dark);
  background:rgba(11,25,51,.55);
  border:1px solid rgba(164,231,255,.22);
  border-radius:var(--radius-card);
  padding:.95em 1.1em;
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.field__input::placeholder{ color:var(--text-on-dark); opacity:.34; font-weight:300; }
.field__input:hover{ border-color:rgba(164,231,255,.38); }
.field__input:focus{
  outline:none;
  border-color:var(--accent-500);
  background:rgba(11,25,51,.75);
  box-shadow:0 0 0 3px rgba(164,231,255,.16);
}
/* o estado de erro é dirigido pelo JS (data-invalid), não por :invalid —
   assim o campo só fica vermelho depois que a pessoa tentou enviar ou saiu
   dele, nunca enquanto ainda está digitando pela primeira vez */
.field__input[data-invalid]{ border-color:var(--danger); }
.field__input[data-invalid]:focus{ box-shadow:0 0 0 3px rgba(255,154,154,.18); }
.field__error{
  font-size:.8rem; line-height:1.35; color:var(--danger);
  min-height:0; opacity:0; max-height:0; overflow:hidden;
  transition:opacity .25s var(--ease), max-height .25s var(--ease);
}
.field__error.is-visible{ opacity:1; max-height:3em; }

/* Só aqui os dígitos vêm da Termina. Em caixa alta, os algarismos
   old-style da Raleway ficam com altura de minúscula e escorregam abaixo
   da linha — "100 MIL EM 3 MESES" parecia desalinhado. O resto da página
   segue com os números da Raleway, como estava. */
.form__submit{
  width:100%; margin-top:.6rem; font-size:1rem; padding:1.15em 1.5em;
  font-family:'Algarismos', var(--font-body);
}
/* trava a largura durante o "ENVIANDO..." pra o botão não pular de tamanho */
.form__submit[data-loading] .btn__arrow{ display:none; }

.form__status{ font-size:.88rem; line-height:1.45; color:var(--danger); text-align:center; min-height:0; }
.form__status:empty{ display:none; }
.form__legal{ font-size:.75rem; line-height:1.5; color:var(--text-on-dark); opacity:.5; font-weight:300; text-align:center; }

/* ---------- estado de sucesso ---------- */
/* recebe foco por JS só pra leitor de tela anunciar a troca de conteúdo —
   não é elemento interativo, então não deve exibir anel de foco */
.form-success{ text-align:center; padding-block:1.5rem; }
.form-success:focus, .form-success:focus-visible{ outline:none; }
.form-success__icon{
  width:3.6rem; height:3.6rem; margin:0 auto 1.2rem;
  border-radius:50%; background:var(--grad-cta); color:var(--primary-900);
  display:flex; align-items:center; justify-content:center;
}
.form-success__icon svg{ width:1.9rem; height:1.9rem; }
.form-success__title{
  font-size:clamp(1.4rem, 1.4vw + 1rem, 1.8rem); color:var(--text-on-dark); margin-bottom:.7rem;
}
.form-success__text{ font-weight:300; font-size:1rem; line-height:1.6; color:var(--text-on-dark); opacity:.85; max-width:30em; margin-inline:auto; }
.form-success__text strong{ font-weight:600; color:var(--accent-400); white-space:nowrap; }
.form-success__wpp{
  margin-top:1.5rem; font-size:1rem; padding:1.05em 1.6em;
  font-family:'Algarismos', var(--font-body);
}
.form-success__wpp-icon{ width:1.25em; height:1.25em; flex:0 0 auto; }

@media (max-width:520px){
  .form-success__wpp{ width:100%; font-size:.92rem; padding:1em .9em; }
}

/* ---------- footer ---------- */
.site-footer{ background:var(--primary-900); color:var(--text-on-dark); padding-block:2rem; flex:0 0 auto; border-top:1px solid rgba(164,231,255,.1); }
.site-footer__inner{ display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center; }
.site-footer__logo{ height:28px; width:auto; opacity:.9; }
.site-footer__text{ opacity:.6; font-size:.82rem; letter-spacing:.02em; line-height:1.6; }
.site-footer__text a{
  color:inherit; text-decoration:underline; text-decoration-color:var(--accent-500);
  text-underline-offset:.12em; text-decoration-thickness:.06em; transition:opacity .25s var(--ease);
}
.site-footer__text a:hover{ opacity:.75; }

/* =========================================================================
   BREAKPOINTS
   ========================================================================= */
@media (min-width:640px){
  .site-footer__inner{ flex-direction:row; justify-content:space-between; text-align:left; }
}

@media (min-width:960px){
  .inscricao__grid{ grid-template-columns:1.05fr .95fr; gap:4rem; }
  .inscricao__content{ max-width:34em; }
  .form-card{ max-width:520px; margin-left:auto; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  /* sem GSAP rodando, os elementos de entrada precisam nascer visíveis */
  [data-reveal],[data-reveal-scale],.word-inner{ opacity:1 !important; transform:none !important; }
  .circle-svg path{ stroke-dashoffset:0 !important; }
}

/* =========================================================================
   MOBILE
   A base do arquivo já é mobile-first — a grade nasce em uma coluna. O que
   vem aqui é o ajuste do que só aperta de verdade no estreito.
   ========================================================================= */
@media (max-width:640px){
  /* O círculo à mão vaza 10% para cada lado da palavra. No desktop já
     encosta em "na"; abaixo de 640px vira colisão e o traço corta a letra
     seguinte. Aperta o desenho e devolve um respiro à direita. */
  .circle-svg{ left:-6%; width:112%; top:-28%; height:164%; }
  .word-circle{ margin-right:.14em; }

  .badge-row{ gap:.4rem; margin-bottom:1.1rem; }
  .pill{ font-size:.8rem; padding:.5em 1em; }

  .inscricao__body{ font-size:.98rem; }
  .checklist li{ font-size:.92rem; }

  /* Preço e parcelamento lado a lado estouram em telas de 320px. Quebrar em
     duas linhas é melhor que empurrar a página para fora. */
  .inscricao__price{ flex-wrap:wrap; gap:.35rem .6rem; }

  /* O rótulo tem 30 caracteres. Com o padding do desktop ele não cabe numa
     linha e o botão fica desproporcional. Menos padding e quebra
     equilibrada em vez de uma órfã solta na segunda linha. */
  .form__submit{ padding:1em 1rem; font-size:.95rem; }
  .form__submit-label{ text-wrap:balance; }

  /* backdrop-filter custa GPU e aqui só decora. Em celular fraco ele
     engasga a rolagem, então sai e o fundo ganha opacidade no lugar. */
  .form-card{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:rgba(164,231,255,.07);
  }
  .site-header{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:rgba(11,25,51,.97);
  }
}

@media (max-width:380px){
  .form-card{ padding:1.3rem 1.1rem; }
  .form__submit{ font-size:.9rem; padding:1em .75rem; }
  .field__label{ font-size:.74rem; }
}