/* xpert.css
 * @proposito  Folha unica da pagina de cadastro da palestra XPert. Marca XPert inteira
 *             (cores, Montserrat, pilula verde) numa tela so: no celular de 360x640 o
 *             formulario e o botao cabem SEM rolagem, porque quem escaneia o QR esta de pe
 *             no meio de uma plateia e nao procura botao.
 * @invariantes
 *   - Nenhuma cor, fonte ou componente do fornecedor aqui: a folha e XPert inteira. Todo
 *     hex da marca vive no :root e em lugar nenhum mais, inclusive o fundo de erro.
 *   - O nome do fornecedor tambem nao entra neste arquivo. Comentario de CSS viaja no fio
 *     e esta no "exibir codigo-fonte" de qualquer celular.
 *   - Alturas em clamp(min, Nsvh, max): em tela baixa a pagina se comprime em vez de rolar;
 *     no desktop assume os 60px de campo do site da XPert.
 *   - A foto de fundo so existe dentro de @media (min-width: 760px). Celular NAO baixa
 *     imagem nenhuma alem da logo. O portao mede isso.
 *   - `[hidden]` vence qualquer display proprio (regra !important abaixo). Sem ela o
 *     formulario continuaria na tela POR BAIXO da confirmacao.
 *   - Em calc/clamp o `+` precisa de espaco dos dois lados. Sem espaco o navegador descarta
 *     a declaracao inteira e o h1 volta a 2em (32px), estourando a primeira tela.
 * @dependencias  assets/fonts/montserrat-latin.woff2, assets/img/topo-900.webp (so desktop)
 */

/* Montserrat variavel, subset latin: o portugues cabe inteiro em U+0000-00FF.
   O latin-ext seriam mais 70.688 bytes que esta pagina nunca usaria. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --c-ink: #132429; --c-ink-2: #1B333A; --c-ink-3: #264852;
  --c-teal-950: #0E1B1F; --c-teal-900: #10262C;
  --c-green: #44725F; --c-green-2: #4C806C; --c-green-3: #5E9A82;
  --c-sage: #94B8A8; --c-mint: #E4EFE9; --c-mint-2: #F0F6F3;
  --c-paper: #F9FCFB; --c-text: #1F2F34; --c-muted: #5C6E73;
  --c-line: rgba(19, 36, 41, .10); --c-line-2: rgba(19, 36, 41, .18);
  --c-danger: #B4423C; --c-success: #2F7D5B;
  /* Fundo do campo e da caixa de erro. Mora aqui como os outros: hex solto no meio da
     folha e cor de marca que ninguem acha no dia em que a paleta mudar. */
  --c-danger-bg: #FFF8F7;
  --ff-display: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
  /* O que a pessoa DIGITA usa a fonte do proprio celular: ja esta carregada, e a que ela
     le o dia inteiro, e poupa os 28.740 bytes da segunda familia da marca. */
  --ff-campo: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: .28s;
  --shadow-card: 0 30px 60px -22px rgba(0, 0, 0, .55);
  --shadow-green: 0 12px 26px -10px rgba(68, 114, 95, .55);
  --h-campo: clamp(46px, 7.6svh, 58px);
  --h-botao: clamp(48px, 7.4svh, 56px);
  --gap: clamp(7px, 1.4svh, 12px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
/* Nos DOIS: so no html o Chrome de Android ainda "impulsiona" o texto por conta propria e
   a pagina passa a rolar. */
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  min-height: 100svh;
  color: var(--c-text);
  font-family: var(--ff-display);
  font-size: 16px;
  line-height: 1.45;
  background: var(--c-teal-950);
  -webkit-font-smoothing: antialiased;
}

.tela {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  background: radial-gradient(125% 85% at 50% 0%, var(--c-ink-3) 0%, var(--c-teal-900) 46%, var(--c-teal-950) 100%);
}

.pular { position: absolute; left: -9999px; top: 0; padding: .7rem 1rem; background: #fff; color: var(--c-ink); font-weight: 700; border-radius: 0 0 12px 0; z-index: 9; }
.pular:focus { left: 0; }
:focus-visible { outline: 3px solid var(--c-green-3); outline-offset: 3px; }

.marca {
  display: block;
  height: clamp(22px, 3.6svh, 28px);
  width: auto;
  margin: 0 auto clamp(8px, 1.6svh, 18px);
}

.folha {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: clamp(12px, 2.3svh, 26px) clamp(16px, 4.4vw, 26px);
  background: #fff;
  border-radius: 24px;
  box-shadow: var(--shadow-card);
}

.titulo { margin: 0; font-size: clamp(1.18rem, 1.02rem + 1vw, 1.5rem); font-weight: 800; line-height: 1.18; letter-spacing: -.01em; color: var(--c-ink); }
.linha { margin: .3rem 0 clamp(10px, 1.9svh, 20px); font-family: var(--ff-campo); font-size: .89rem; line-height: 1.38; color: var(--c-muted); }

.form { display: grid; gap: var(--gap); }

/* ---------- campo com rotulo flutuante (CSS puro, sem JavaScript) ---------- */
.campo { position: relative; }
.campo__ctrl {
  width: 100%;
  min-height: var(--h-campo);
  padding: 1.15rem .95rem .38rem;
  /* 16px e o piso: abaixo disso o Safari do iPhone da zoom sozinho ao focar e desalinha
     o formulario inteiro no meio do preenchimento. */
  font-family: var(--ff-campo);
  font-size: 16px;
  color: var(--c-ink);
  background: #fff;
  border: 1.5px solid var(--c-line-2);
  border-radius: 14px;
  appearance: none;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.campo__ctrl::placeholder { color: transparent; }
.campo__ctrl:focus { outline: none; border-color: var(--c-green); box-shadow: 0 0 0 4px rgba(68, 114, 95, .14); }
.campo__rotulo {
  position: absolute; left: .95rem; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--c-muted);
  font-family: var(--ff-campo); font-size: 1rem;
  transition: top .2s var(--ease-out), transform .2s var(--ease-out), font-size .2s, color .2s;
}
.campo__ctrl:focus ~ .campo__rotulo,
.campo__ctrl:not(:placeholder-shown) ~ .campo__rotulo {
  top: .55rem; transform: none; font-size: .66rem;
  font-family: var(--ff-display); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-green);
}
.campo__rotulo i { font-style: normal; margin-left: 3px; color: var(--c-green-3); }
.campo__dica { display: block; margin: .18rem 0 0 .35rem; font-family: var(--ff-campo); font-size: .74rem; line-height: 1.2; color: var(--c-muted); }
.campo__erro { display: none; margin: .25rem 0 0 .35rem; font-family: var(--ff-campo); font-size: .78rem; line-height: 1.25; font-weight: 600; color: var(--c-danger); }

/* Borda vermelha sozinha nao e acessivel (daltonismo): vem texto E rotulo em vermelho.
   A dica some para o erro ocupar o lugar dela e a caixa nao pular de altura. */
.campo.is-invalid .campo__ctrl { border-color: var(--c-danger); background: var(--c-danger-bg); }
.campo.is-invalid .campo__ctrl:focus { box-shadow: 0 0 0 4px rgba(180, 66, 60, .14); }
.campo.is-invalid .campo__rotulo, .campo.is-invalid .campo__rotulo i { color: var(--c-danger); }
.campo.is-invalid .campo__dica { display: none; }
.campo.is-invalid .campo__erro { display: block; }

/* Isca anti-robo: nome neutro para o preenchimento automatico nao reconhecer. */
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- caixinha obrigatoria ---------- */
.aceite {
  margin-top: calc(var(--gap) / 2);
  padding: .55rem .72rem;
  background: var(--c-mint-2);
  border: 1.5px solid rgba(68, 114, 95, .22);
  border-radius: 14px;
  transition: border-color var(--dur), background var(--dur);
}
/* "Obrigatorio para enviar" ANTES da frase: ninguem preenche quatro campos para so entao
   descobrir a condicao. Pegadinha e o consentimento que se descobre depois. */
.aceite__selo { display: block; margin-bottom: .4rem; font-family: var(--ff-display); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-green); }
.aceite__linha { display: flex; gap: .65rem; align-items: flex-start; cursor: pointer; }
.aceite__caixa { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--c-green); cursor: pointer; }
.aceite__texto { font-family: var(--ff-campo); font-size: .85rem; line-height: 1.32; font-weight: 600; color: var(--c-text); }
/* A porta de saida fica no ponto do consentimento, nao numa politica linkada - e sem recuo,
   para caber numa linha so e nao custar altura da primeira tela. */
.aceite__saida { margin: .3rem 0 0; font-family: var(--ff-campo); font-size: .72rem; line-height: 1.25; color: var(--c-muted); }
.aceite:has(.aceite__caixa:checked) { border-color: var(--c-green-3); background: var(--c-mint); }
.aceite:has(.aceite__caixa:focus-visible) { border-color: var(--c-green); box-shadow: 0 0 0 4px rgba(68, 114, 95, .14); }
.aceite.is-invalid { border-color: var(--c-danger); background: var(--c-danger-bg); }
.aceite.is-invalid .aceite__selo { color: var(--c-danger); }
.aceite .campo__erro { margin-left: 1.87rem; }
.aceite.is-invalid .campo__erro { display: block; }

/* ---------- botao: pilula da XPert, cortina de baixo para cima ---------- */
.btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; min-height: var(--h-botao); margin-top: calc(var(--gap) / 2);
  padding: .85rem 1.3rem;
  font-family: var(--ff-display); font-size: clamp(.85rem, .8rem + .3vw, .95rem); font-weight: 700;
  letter-spacing: .02em; color: #fff; background: var(--c-green);
  border: 1.5px solid transparent; border-radius: 999px; box-shadow: var(--shadow-green);
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--c-ink); transform: translateY(101%); transition: transform .5s var(--ease-out); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn__seta { width: 17px; height: 17px; flex: none; transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__seta { transform: translateX(4px); }
.btn__giro { display: none; width: 17px; height: 17px; flex: none; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(1turn); } }
/* O botao nao some e nao muda de tamanho: a pagina pularia embaixo do dedo. */
.form.is-loading .btn { pointer-events: none; background: var(--c-green-2); box-shadow: none; transform: none; }
.form.is-loading .btn__seta { display: none; }
.form.is-loading .btn__giro { display: block; }
.form.is-loading .campo__ctrl, .form.is-loading .aceite__caixa { opacity: .7; pointer-events: none; }

.nota { margin: .5rem 0 0; font-family: var(--ff-campo); font-size: .73rem; line-height: 1.32; color: var(--c-muted); text-align: center; }

/* Falha de envio: nunca apaga o que foi digitado. */
.falha { display: flex; gap: .55rem; align-items: flex-start; margin-top: .6rem; padding: .65rem .8rem; border: 1.5px solid rgba(180, 66, 60, .35); border-radius: 12px; background: var(--c-danger-bg); font-family: var(--ff-campo); font-size: .82rem; line-height: 1.32; color: var(--c-danger); }
.semjs { margin: 0 0 var(--gap); padding: .55rem .75rem; border-radius: 12px; background: var(--c-mint); border: 1px solid rgba(68, 114, 95, .25); font-family: var(--ff-campo); font-size: .78rem; color: var(--c-ink-3); }

/* ---------- sucesso: tem de bastar um olhar, de pe, com alguem esperando atras ---------- */
.ok { text-align: center; padding: clamp(10px, 2.4svh, 22px) 2px; }
.ok__selo { width: clamp(68px, 11svh, 84px); height: clamp(68px, 11svh, 84px); margin: 0 auto clamp(12px, 2.2svh, 20px); border-radius: 50%; display: grid; place-items: center; background: var(--c-mint); border: 2px solid var(--c-green-3); }
.ok__selo svg { width: 46%; height: 46%; fill: none; stroke: var(--c-green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: riscar .5s .12s var(--ease-out) forwards; }
@keyframes riscar { to { stroke-dashoffset: 0; } }
.ok__titulo { margin: 0; font-size: clamp(1.4rem, 1.15rem + 1.5vw, 2rem); font-weight: 800; line-height: 1.14; color: var(--c-ink); }
.ok__texto { margin: .55rem auto 0; max-width: 30ch; font-family: var(--ff-campo); font-size: .93rem; color: var(--c-muted); }
.ok__dado { display: inline-block; margin-top: .8rem; padding: .4rem .85rem; border-radius: 999px; background: var(--c-mint-2); border: 1px solid var(--c-line); font-family: var(--ff-campo); font-size: .8rem; font-weight: 600; color: var(--c-ink); word-break: break-all; }
.ok__protocolo { display: block; margin-top: .7rem; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-green); }
/* No evento o celular passa de mao em mao na fila. Sem este botao a segunda pessoa
   recarrega a pagina e baixa tudo de novo. */
.ok__outro { margin-top: clamp(12px, 2.2svh, 18px); background: transparent; color: var(--c-ink); border-color: var(--c-line-2); box-shadow: none; }
.ok__outro::before { background: var(--c-mint); }
.ok__outro:hover { color: var(--c-ink); }

/* ---------- dados-incompletos.html: o que o servidor recusou, SEM JavaScript ----------
   O pedaco do campo recusado aparece pelo `:target` do fragmento que o 303 mandou. Sem
   JavaScript isto e a UNICA maneira de a pagina dizer qual campo foi recusado, e e por isso
   que o estado padrao e `display: none` e nao `visibility`: quatro paragrafos invisiveis
   ocupando espaco empurrariam o botao para fora da primeira tela. */
.recusa { text-align: center; padding: clamp(10px, 2.4svh, 22px) 2px; }
.recusa__geral { margin: .55rem auto 0; max-width: 32ch; font-family: var(--ff-campo); font-size: .93rem; color: var(--c-muted); }
.recusa__campo { display: none; margin: .9rem auto 0; max-width: 34ch; padding: .65rem .8rem; border: 1.5px solid rgba(180, 66, 60, .35); border-radius: 12px; background: var(--c-danger-bg); font-family: var(--ff-campo); font-size: .88rem; line-height: 1.34; color: var(--c-danger); }
.recusa__campo:target { display: block; }
.recusa__voltar { margin: 1rem auto 0; max-width: 32ch; font-family: var(--ff-campo); font-size: .82rem; line-height: 1.34; color: var(--c-ink-3); }

/* ---------- desktop: mesma folha, foto da marca atras ---------- */
@media (min-width: 760px) {
  :root { --h-campo: 60px; --h-botao: 58px; --gap: 12px; }
  /* A foto vive SO aqui dentro: o celular nunca a pede. 34 KB que o desktop paga e o
     telefone nao. */
  .tela::before {
    content: ''; position: fixed; inset: 0; z-index: 0;
    background: url(../img/topo-900.webp) center / cover no-repeat;
    opacity: .22;
  }
  /* Veu por cima da foto: sem ele as vigas competem com o cartao e a logo fica presa no
     meio de um X. Com ele a foto vira textura e o cartao continua sendo o assunto. */
  .tela::after {
    content: ''; position: fixed; inset: 0; z-index: 0;
    background: radial-gradient(72% 62% at 50% 46%, rgba(14, 27, 31, .86) 0%, rgba(14, 27, 31, .55) 55%, rgba(14, 27, 31, .9) 100%);
  }
  .tela { padding: 32px; }
  .tela > * { position: relative; z-index: 1; }
  .marca { height: 40px; margin-bottom: 20px; }
  .folha { max-width: 520px; padding: 30px 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .ok__selo svg { stroke-dashoffset: 0; }
}