/* =====================================================================
   FLIRTT — TELAS DE ACESSO (entrar e criar conta).
   Extraído dos três protótipos de design/ em 07/09/2026.
   O contrato visual e o porquê de cada decisão estão no CLAUDE.md 11.7.

   ⚠️ CSS puro, NÃO Tailwind. O Play CDN compila a partir do que vê no
   DOM na carga inicial, e estas telas trocam estado por JS (aba ativa,
   tipo de conta, etapa visível). Classe que só aparece por JS pode não
   ter regra nenhuma gerada.

   ⚠️ NÃO trocar as fontes por Inter "para padronizar" (11.7).
   ⚠️ NÃO pintar o botão primário de laranja — ele é CREME (11.7).
   ⚠️ NÃO medir a atmosfera em % — só vmax (11.7).
   ===================================================================== */

:root{
  --noite:#0a0706;        /* preto QUENTE — preto puro é frio e chapado */
  --creme:#f2ece4;        /* o claro não é branco: branco puro sobre preto vibra */
  --creme-2:#b3a99e;
  --creme-3:#7a716a;
  --brasa:#ff4d00;
  --brasa-alta:#ff8a3d;
  --brasa-funda:#a81f00;
  --linha:rgba(242,236,228,.13);
  --linha-forte:rgba(242,236,228,.28);
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--noite); color:var(--creme); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; min-height:100vh; min-height:100dvh; overflow-x:hidden;
}
[hidden]{display:none !important}

/* ══ ATMOSFERA — fixa ao viewport, medida em vmax ════════════════════
   vmax e não %: em 1440×900 e em 390×844 a luz ocupa a mesma fração da
   maior dimensão, então a temperatura não muda de aparelho para aparelho.
   Com % do container, o celular (que rola e passa de 2000px de altura)
   empurrava as luzes para as pontas e o miolo virava preto puro. */
.atmosfera{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.luz{position:absolute; border-radius:50%}
.luz-1{
  width:115vmax; height:115vmax; left:-38vmax; top:-52vmax;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,77,0,.38) 0%, rgba(255,77,0,.16) 26%,
    rgba(255,138,61,.06) 45%, transparent 67%);
  animation:respirar 13s ease-in-out infinite;
}
.luz-2{
  width:88vmax; height:88vmax; right:-30vmax; bottom:-40vmax;
  background:radial-gradient(circle at 50% 50%,
    rgba(168,31,0,.44) 0%, rgba(255,77,0,.12) 34%, transparent 64%);
  animation:respirar 17s ease-in-out infinite reverse;
}
.luz-3{
  width:72vmax; height:72vmax; left:26vmax; bottom:-44vmax;
  background:radial-gradient(circle at 50% 50%, rgba(255,77,0,.16) 0%, transparent 62%);
  animation:respirar 21s ease-in-out infinite;
}
/* 13 / 17 / 21 são primos entre si de propósito: nunca sincronizam, e o
   loop não fica perceptível. Não "arredondar" para 15/20/25. */
@keyframes respirar{
  0%,100%{transform:scale(1);opacity:.9}
  50%    {transform:scale(1.11);opacity:1}
}
.vinheta{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 120% 88% at 50% 45%, transparent 40%, rgba(0,0,0,.60) 100%);
}
/* Grão de filme: sem ele o gradiente vira banding em monitor grande. */
.grao{
  position:absolute; inset:0; opacity:.44; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E");
}
.f-parede{position:absolute; left:-14vmax; bottom:-22vmax; height:128vmax; width:auto;
  color:var(--creme); opacity:.032}

/* ══ GRADE ═══════════════════════════════════════════════════════════
   CELULAR: logo → formulário → texto. Quem abre no celular quer entrar;
   o argumento fica abaixo, para quem rolar. NÃO inverter (11.7). */
.palco{
  position:relative; min-height:100vh; min-height:100dvh;
  max-width:1440px; margin:0 auto; padding:26px 20px 52px;
  display:grid; grid-template-columns:1fr;
  grid-template-areas:"topo" "painel" "editorial";
  align-content:start; gap:30px;
}
.topo{grid-area:topo} .painel{grid-area:painel} .editorial{grid-area:editorial}

.topo{display:flex; align-items:center; justify-content:space-between; gap:16px}
/* O logo é o SVG inline com currentColor — sem PNG e sem
   filter:brightness(0) invert(1). A cor vem daqui. */
.logo{display:inline-flex; align-items:flex-end; gap:2px; color:var(--creme);
  text-decoration:none}
.logo svg{display:block}
.logo span{font-family:var(--sans); font-weight:700; font-size:23px;
  letter-spacing:-.045em; line-height:.84}
.selo{font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--creme-3); display:none}

/* ══ EDITORIAL ═══════════════════════════════════════════════════════
   Padrão = telas de CADASTRO: alinhado à esquerda, porque a lista
   numerada precisa de margem de leitura.
   `.editorial-centro` = LOGIN: sem a lista o bloco fica curto, e à
   esquerda sobraria um vazio à direita sem função. Centrado vira pôster. */
.editorial{max-width:640px}
.olho-secao{display:flex; align-items:center; gap:12px; margin-bottom:20px;
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--brasa)}
.olho-secao::after{content:""; flex:1; height:1px; background:var(--linha); max-width:120px}

.editorial-centro{margin:0 auto; text-align:center}
.editorial-centro .olho-secao{justify-content:center}
/* Filete dos DOIS lados: com o texto centrado, uma linha só ficaria torta. */
.editorial-centro .olho-secao::before{content:""; flex:1; height:1px;
  background:var(--linha); max-width:96px}
.editorial-centro .olho-secao::after{max-width:96px}
.editorial-centro .apoio{margin-left:auto; margin-right:auto; max-width:46ch}

/* ⚠ O TETO ACOMPANHA A CAIXA, NAO A TELA. `.editorial` para de crescer
   em 640px; se o teto do `clamp` ficar acima disso, a letra continua
   subindo com o viewport dentro de uma caixa parada — era o 6.8rem, que
   so era alcancado em 1088px e por isso nunca aparecia em notebook. */
.frase{font-family:var(--serif); font-weight:400; font-size:clamp(2.9rem,10vw,4.6rem);
  line-height:.94; letter-spacing:-.022em; color:var(--creme)}
.frase em{font-style:italic; color:var(--brasa-alta)}
.apoio{margin-top:20px; max-width:44ch; color:var(--creme-2);
  font-size:clamp(.94rem,2.4vw,1.05rem); line-height:1.68; font-weight:300}
.pilares{list-style:none; margin-top:32px}
.pilar{display:grid; grid-template-columns:34px 1fr; gap:16px; align-items:baseline;
  padding:15px 0; border-top:1px solid var(--linha)}
.pilar:last-child{border-bottom:1px solid var(--linha)}
.pilar-n{font-family:var(--serif); font-size:1rem; color:var(--brasa);
  font-style:italic; line-height:1}
.pilar-t{font-size:.91rem; font-weight:500; color:var(--creme); line-height:1.5}
.pilar-t small{display:block; font-weight:300; color:var(--creme-3);
  font-size:.82rem; margin-top:3px}

/* ══ PAINEL ══════════════════════════════════════════════════════════ */
.painel{
  position:relative;
  background:linear-gradient(168deg, rgba(255,255,255,.058), rgba(255,255,255,.015));
  border:1px solid var(--linha); border-top-color:var(--linha-forte);
  border-radius:4px; padding:28px 22px 26px;
  backdrop-filter:blur(22px) saturate(120%); -webkit-backdrop-filter:blur(22px) saturate(120%);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.92);
}
.abas{display:flex; gap:26px; border-bottom:1px solid var(--linha); margin-bottom:26px}
.aba{position:relative; text-decoration:none; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--creme-3); padding:0 0 15px; transition:color .28s ease}
.aba::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--brasa); transform:scaleX(0); transform-origin:left;
  transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.aba[aria-current="page"]{color:var(--creme)}
.aba[aria-current="page"]::after{transform:scaleX(1)}

/* ── Escolha do tipo de conta ──
   Dois caminhos com peso visual IGUAL: a plataforma não empurra ninguém,
   e quem vem assinar não é público de segunda. */
.tipos{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:26px}
.tipo{background:rgba(255,255,255,.03); border:1px solid var(--linha); border-radius:3px;
  padding:13px 12px; text-align:left; text-decoration:none; display:block;
  font-family:var(--sans); color:var(--creme-2); cursor:pointer; width:100%;
  transition:border-color .3s ease, background .3s ease}
.tipo b{display:block; font-size:.86rem; font-weight:600; color:var(--creme); margin-bottom:2px}
.tipo small{font-size:.72rem; font-weight:300; line-height:1.4; display:block}
.tipo[aria-current='true']{border-color:var(--brasa); background:rgba(255,77,0,.09)}
.tipo:hover{border-color:var(--linha-forte)}
.tipo:focus-visible{outline:2px solid var(--brasa); outline-offset:2px}

.campo-wrap{position:relative; margin-bottom:24px}
.rotulo{display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--creme-3); margin-bottom:9px}
/* Campo com LINHA, não caixa: caixa com borda é vocabulário de formulário
   administrativo; a linha custa o mesmo e é editorial. */
.campo{width:100%; background:transparent; border:0; border-bottom:1px solid var(--linha-forte);
  padding:6px 30px 12px 0; font-family:var(--sans);
  font-size:16px;            /* <16px faz o Safari do iPhone dar zoom ao focar */
  color:var(--creme); outline:none}
.campo::placeholder{color:var(--creme-3); font-weight:300}
.campo-wrap::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--brasa); transform:scaleX(0); transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.campo-wrap:focus-within::after{transform:scaleX(1)}
.olho{position:absolute; right:0; bottom:6px; background:none; border:0; cursor:pointer;
  color:var(--creme-3); padding:4px; line-height:0; transition:color .2s ease}
.olho:hover{color:var(--creme)}

/* Sexo — o campo já existia no cadastro e continua obrigatório: é lido
   pelo filtro do Flertar e pelo painel admin. Só ganhou a roupa nova. */
.escolhas{display:flex; gap:22px; margin:-10px 0 24px}
.escolha{display:flex; align-items:center; gap:8px; cursor:pointer;
  font-size:.86rem; color:var(--creme-2); font-weight:300}
.escolha input{width:15px; height:15px; accent-color:var(--brasa); cursor:pointer}

.btn{width:100%; height:52px; border:0; border-radius:3px; cursor:pointer;
  font-family:var(--sans); font-size:.84rem; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:11px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), background .3s ease, border-color .3s ease}
/* ⚠️ O primário é CREME, não laranja: 17:1 de contraste, e é o ponto mais
   claro da tela. Devolve o laranja ao papel de brasa. Branco sobre
   #ff4d00 dá 3,33:1 e reprova AA (11.6). */
.btn-primario{background:var(--creme); color:var(--noite)}
.btn-primario:hover:not(:disabled){background:#fff; transform:translateY(-2px)}
.btn-primario svg{transition:transform .34s cubic-bezier(.2,.7,.3,1)}
.btn-primario:hover:not(:disabled) svg{transform:translateX(5px)}
.btn-primario:focus-visible{outline:2px solid var(--brasa); outline-offset:3px}
.btn:disabled{opacity:.5; cursor:default}
.btn-google{background:transparent; color:var(--creme); border:1px solid var(--linha-forte);
  text-transform:none; letter-spacing:0; font-size:.9rem; font-weight:500; margin-bottom:24px}
.btn-google:hover:not(:disabled){border-color:var(--creme-2); background:rgba(255,255,255,.04)}

.ou{display:flex; align-items:center; gap:14px; margin-bottom:24px; font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--creme-3)}
.ou::before,.ou::after{content:""; flex:1; height:1px; background:var(--linha)}
.opcoes{display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:-4px 0 26px; font-size:.83rem}
.lembrar{display:flex; align-items:center; gap:9px; color:var(--creme-2);
  cursor:pointer; font-weight:300}
.lembrar input{width:15px; height:15px; accent-color:var(--brasa); cursor:pointer}
.link{color:var(--creme-2); text-decoration:none; transition:color .2s ease;
  background:none; border:0; font-family:var(--sans); font-size:inherit; cursor:pointer}
.link:hover{color:var(--brasa-alta)}
.rodape{margin-top:24px; padding-top:20px; border-top:1px solid var(--linha);
  text-align:center; font-size:.84rem; color:var(--creme-3); font-weight:300}
.rodape a{color:var(--creme); text-decoration:none; font-weight:500}
.rodape a:hover{color:var(--brasa-alta)}

.termos{display:flex; gap:12px; align-items:flex-start; margin:-2px 0 24px}
.termos input{width:16px; height:16px; margin-top:2px; accent-color:var(--brasa);
  flex:none; cursor:pointer}
.termos label{font-size:.79rem; color:var(--creme-3); line-height:1.6; font-weight:300}
.termos b{color:var(--creme-2); font-weight:600}
.termos a{color:var(--creme-2); text-decoration:underline; text-underline-offset:3px}

/* Aviso do plano ANTES de criar a conta: portão se diz antes, não depois.
   Mesma lógica do "sem reembolso" na página do Fundador. */
.aviso-plano{font-size:.76rem; color:var(--creme-3); line-height:1.55; font-weight:300;
  border-left:1px solid var(--brasa); padding-left:12px; margin:-8px 0 24px}

/* ── avisos de erro e sucesso ── */
.aviso{font-size:.82rem; line-height:1.5; font-weight:300; margin-top:18px;
  padding:11px 13px; border-radius:3px; border-left:2px solid}
.aviso-erro{color:#ffb4a0; background:rgba(168,31,0,.16); border-color:var(--brasa)}
.aviso-ok{color:#bfe8cf; background:rgba(60,140,90,.14); border-color:#54b37a}
.carregando{text-align:center; font-size:.84rem; color:var(--creme-3); font-weight:300;
  padding:18px 0}

/* ── etapa de complemento (volta do Google) ── */
.etapa-conta{display:flex; align-items:center; gap:10px; margin-bottom:20px;
  padding:10px 12px; border:1px solid var(--linha); border-radius:3px;
  font-size:.82rem; color:var(--creme-2); font-weight:300}
.etapa-conta img{width:30px; height:30px; border-radius:50%; flex:none}
.etapa-conta span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ══ POPUP +18 ═══════════════════════════════════════════════════════
   Mesma lógica e MESMO TEXTO LEGAL de antes — só a roupa mudou. */
.pop-fundo{position:fixed; inset:0; background:rgba(10,7,6,.86);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:60}
.pop-caixa{
  background:linear-gradient(168deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), var(--noite);
  border:1px solid var(--linha-forte); border-radius:4px;
  padding:28px 24px 24px; width:100%; max-width:430px;
  box-shadow:0 50px 110px -30px rgba(0,0,0,.95);
}
.pop-caixa h2{font-family:var(--serif); font-weight:400; font-size:1.6rem;
  line-height:1.1; margin-bottom:12px; color:var(--creme)}
.pop-intro{font-size:.84rem; color:var(--creme-2); line-height:1.62;
  font-weight:300; margin-bottom:16px}
.pop-intro b{color:var(--brasa-alta); font-weight:600}
.pop-lista{list-style:none; margin-bottom:22px}
.pop-lista li{font-size:.78rem; color:var(--creme-3); line-height:1.5; font-weight:300;
  padding:8px 0 8px 16px; border-top:1px solid var(--linha); position:relative}
.pop-lista li::before{content:""; position:absolute; left:0; top:15px;
  width:5px; height:1px; background:var(--brasa)}
.pop-recusar{width:100%; margin-top:11px; height:44px; background:none;
  border:1px solid var(--linha); border-radius:3px; color:var(--creme-3);
  font-family:var(--sans); font-size:.78rem; cursor:pointer;
  transition:color .2s, border-color .2s}
.pop-recusar:hover{color:var(--creme-2); border-color:var(--linha-forte)}

@keyframes surgir{from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:none}}
.anima{opacity:0; animation:surgir .95s cubic-bezier(.16,.8,.3,1) forwards}
.d1{animation-delay:.05s} .d2{animation-delay:.15s} .d3{animation-delay:.28s}
/* Não é opcional: as três luzes e a entrada param. */
@media (prefers-reduced-motion:reduce){
  .anima{animation:none; opacity:1} .luz{animation:none} *{transition-duration:.01ms !important}
}

/* ══ DESKTOP ══ No amplo a ordem volta a ser texto → formulário.
   UM breakpoint só, em 1024px: dois foi o que abriu a faixa cega de
   640–1023px em 03/09/2026 (13.2). */
@media (min-width:1024px){
  .palco{grid-template-columns:1.15fr .85fr;
    grid-template-areas:"topo topo" "editorial painel";
    align-content:center; align-items:center; gap:18px 78px; padding:26px 56px}
  /* ⚠ O 18px de gap de LINHA nao e enfeite. Com 0, o olho-secao do
     editorial encostava na logo — no cadastro os dois sao alinhados a
     esquerda e a legenda "PLANO FUNDADOR · VAGAS LIMITADAS" lia como
     subtitulo da marca, nao como seção. Custa 18px do orçamento vertical e
     cabe: em 1366×768 o conteudo real e 741px. */
  .topo{align-self:start; margin-bottom:auto}

  /* ⚠ O EDITORIAL SE ALINHA AO TOPO DA PRÓPRIA LINHA, e isso não é
     detalhe: `align-items:center` acima centraliza CADA item na linha, e
     a linha é alta por causa do formulário ao lado (872px na aba da
     criadora). O texto, com 535px, sobrava centralizado e nascia 168px
     abaixo da logo — um vão que parecia erro de espaçamento e era
     alinhamento. Medido em 1440×900 antes da correção.

     `align-self` só nele: o `center` do `.palco` continua valendo para o
     painel, que é quem deve ficar centrado quando a janela é alta. */
  .editorial{align-self:start}
  .painel{max-width:452px; justify-self:end}   /* padding: ver o bloco de compressao abaixo */
  .selo{display:block}
  .logo span{font-size:26px}
  /* ⚠ O DESKTOP PRECISA DA PROPRIA MEDIDA, e sem depender da ALTURA.
     Aqui a coluna do editorial cai para ~480px em 1024 e so chega a 640
     por volta de 1310 — e menor que a caixa do celular, entao a letra
     tambem tem de cair. Ate 07/09/2026 a unica regra de desktop morava
     no bloco `max-height:780px` abaixo: notebook 1366x768 pegava 67px e
     ficava certo, monitor 1920x1080 caia no valor do celular e ficava com
     109px numa caixa de 640. Era a ALTURA decidindo o tamanho da letra. */
  .frase{font-size:clamp(3.2rem,5.1vw,4.6rem)}

  /* ⚠ CABER NA PRIMEIRA DOBRA — e quem estoura é o PAINEL, não o texto.
     Medido em 1440×900 na aba da criadora: 986px de conteúdo para 900px
     de janela. A conta é `painel 872 + topo 26 + padding 88`, e o
     editorial (535) nem entra — ele é o item mais BAIXO da linha.
     Comprimir o editorial não resolveria nada; o aperto tem de ser no
     formulário e nas margens do palco. */
  .painel{padding:24px 30px 22px}
  .abas{margin-bottom:16px}
  .tipos{margin-bottom:16px}
  .btn-google{margin-bottom:14px}
  .ou{margin-bottom:14px}
  .campo-wrap{margin-bottom:15px}
  .escolhas{margin:-8px 0 15px}
  .aviso-plano{margin:-6px 0 14px}
  .termos{margin:-2px 0 15px}
  .rodape{margin-top:14px; padding-top:14px}
}
@media (min-width:1024px) and (max-height:780px){
  .frase{font-size:clamp(2.7rem,5.4vw,4.2rem)}
  .pilares{margin-top:22px} .pilar{padding:11px 0}

  /* ⚠ 1366×768 É O CASO DURO: sobram 654px para um painel de 872. O
     bloco de cima já tira ~120; o resto sai daqui, e SÓ aqui — em tela
     alta esse aperto deixaria o formulário desnecessariamente denso. */
  .palco{padding:16px 56px}
  .painel{padding:18px 28px 16px}
  .abas{margin-bottom:12px}
  .tipos{margin-bottom:12px}
  .btn-google{margin-bottom:10px}
  .ou{margin-bottom:10px}
  .campo-wrap{margin-bottom:11px}
  .escolhas{margin:-8px 0 11px}
  .aviso-plano{margin:-6px 0 10px}
  .termos{margin:-2px 0 11px}
  .rodape{margin-top:10px; padding-top:10px}
}