/* ============================================================================
   shark-web · CONVERSAO
   ----------------------------------------------------------------------------
   Botao, par de CTA, bloco final, planos, FAQ e formulario.

   A lei da cor vale inteira aqui, e e onde ela mais custa quando quebrada:
   VERDE SIGNIFICA DINHEIRO. Num produto de trading, um "✓ Salvo" verde corroi
   o unico sinal que o usuario le rapido. Confirmacao neutra e azul ou texto
   apagado. Verde e CTA e lucro, nada mais.
   ========================================================================== */

/* ============================================================================
   BOTAO
   ========================================================================== */

.sw-btn {
  --sw-btn-y: 13px;
  --sw-btn-x: 26px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: var(--sw-btn-y) var(--sw-btn-x);
  border: 0;
  border-radius: var(--ds-r-pill, 999px);
  font-family: var(--ds-display, "Space Grotesk", system-ui, sans-serif);
  font-size: var(--sw-fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  color: var(--sw-tinta-1);
  transition: background var(--sw-dur-1) var(--sw-ease),
              color var(--sw-dur-1) var(--sw-ease),
              box-shadow var(--sw-dur-1) var(--sw-ease),
              opacity var(--sw-dur-1) var(--sw-ease);
}

/* PRIMARIO
   A pill do registro. Em repouso ela e branca sobre preto; em conversao vira
   verde neon com tinta escura. As duas combinacoes passam AAA, e nenhuma das
   duas usa texto branco sobre verde: #00ff5f com branco da 1,3:1 e some. */
.sw-btn--primario {
  background: var(--sw-btn-fundo);
  color: var(--sw-btn-tinta);
}

.sw-btn--primario:hover {
  box-shadow: 0 12px 34px -14px var(--sw-acento-glow),
              0 0 0 1px color-mix(in srgb, var(--sw-btn-fundo) 60%, transparent);
}

.sw-btn--fantasma {
  box-shadow: inset 0 0 0 1px var(--sw-veu-3);
  color: var(--sw-tinta-1);
}

.sw-btn--fantasma:hover {
  background: var(--sw-veu-1);
  box-shadow: inset 0 0 0 1px var(--sw-veu-4);
}

.sw-btn--texto {
  padding-inline: 0;
  color: var(--sw-acento);
}

.sw-btn--texto:hover { opacity: 0.75; }

/* ROLL — o rotulo rola para cima e uma copia entra por baixo.

   E o botao do /copy, trazido para o acervo. O mecanismo depende de tres coisas
   que parecem detalhe: `overflow: hidden` no envelope, a copia em `position:
   absolute` no MESMO lugar, e 105% em vez de 100% no deslocamento — em 100% a
   ponta do descendente (o "g", o "p") aparece por um quadro na troca.

   A copia leva aria-hidden: sem isso o leitor de tela le o rotulo duas vezes. */
.sw-btn-roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}

.sw-btn-roll > span,
.sw-btn-roll > b {
  display: block;
  transition: transform var(--sw-dur-2) var(--sw-ease);
  font-weight: inherit;
}

.sw-btn-roll > b {
  position: absolute;
  inset: 0;
  transform: translateY(105%);
}

.sw-btn:hover .sw-btn-roll > span,
.sw-btn:focus-visible .sw-btn-roll > span { transform: translateY(-105%); }

.sw-btn:hover .sw-btn-roll > b,
.sw-btn:focus-visible .sw-btn-roll > b { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sw-btn-roll > span,
  .sw-btn-roll > b { transition: none; }
  .sw-btn-roll > b { display: none; }
}

/* CHAMATIVO — o CTA que precisa saltar aos olhos, no espirito do botao do
   calendario de resultados do /copy. Nao e so maior: tem seta em quadro
   separado, halo por baixo e levantamento no hover.

   Um por dobra. Dois botoes chamativos na mesma tela e nenhum chamativo. */
.sw-btn--chamativo {
  --sw-btn-y: 0;
  --sw-btn-x: 0;
  padding: 0;
  gap: 0;
  border-radius: var(--ds-r-md, 14px);
  overflow: hidden;
  background: var(--sw-btn-fundo);
  color: var(--sw-btn-tinta);
  box-shadow: 0 18px 46px -18px var(--sw-acento-glow);
  transition: transform var(--sw-dur-2) var(--sw-ease),
              box-shadow var(--sw-dur-2) var(--sw-ease);
}

.sw-btn--chamativo:hover {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 26px 60px -20px var(--sw-acento-glow);
}

.sw-btn-corpo {
  padding: 17px 26px;
  font-size: var(--sw-fs-body);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* O quadro da seta, separado por um fio. A seta e desenhada. */
.sw-btn-seta {
  display: grid;
  place-items: center;
  width: 56px;
  align-self: stretch;
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--sw-btn-tinta) 22%, transparent);
  transition: background var(--sw-dur-1) var(--sw-ease);
}

.sw-btn--chamativo:hover .sw-btn-seta {
  background: color-mix(in srgb, var(--sw-btn-tinta) 12%, transparent);
}

.sw-btn-seta::before {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--sw-dur-1) var(--sw-ease);
}

.sw-btn--chamativo:hover .sw-btn-seta::before { transform: rotate(45deg) translate(2px, -2px); }

@media (prefers-reduced-motion: reduce) {
  .sw-btn--chamativo:hover { transform: none; }
}

/* FLUTUANTE — acompanha a rolagem e aparece depois da primeira dobra.

   Respeita a area segura do aparelho e cede o lugar para a barra do celular
   quando ela existe, senao os dois se empilham no mesmo canto. */
.sw-btn-flutuante {
  position: fixed;
  right: var(--sw-gutter);
  bottom: calc(var(--sw-gutter) + env(safe-area-inset-bottom, 0px));
  z-index: var(--sw-z-mobar);
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.96);
  pointer-events: none;
  transition: opacity var(--sw-dur-2) var(--sw-ease),
              transform var(--sw-dur-2) var(--sw-ease);
}

.sw-btn-flutuante.is-visivel {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (max-width: 767px) {
  .sw-btn-flutuante { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

.sw-btn--lg { --sw-btn-y: 17px; --sw-btn-x: 34px; font-size: var(--sw-fs-body); }
.sw-btn--sm { --sw-btn-y: 9px;  --sw-btn-x: 18px; font-size: var(--sw-fs-xs); }
.sw-btn--bloco { display: flex; width: 100%; }

.sw-btn[disabled],
.sw-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* Brilho que atravessa o botao. So no registro de conversao: e um recurso de
   chamar atencao, e chamar atencao numa pagina de leitura e ruido.
   Fica escondido em prefers-reduced-motion junto com o resto. */
[data-registro="conversao"] .sw-btn--primario {
  overflow: hidden;
  isolation: isolate;
}

[data-registro="conversao"] .sw-btn--primario::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, var(--sw-brilho) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: sw-shine 3.2s var(--sw-ease-soft) infinite;
  pointer-events: none;
}

@keyframes sw-shine {
  0%, 62% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
  [data-registro="conversao"] .sw-btn--primario::after { animation: none; display: none; }
}

/* PAR DE CTA
   Primario e fantasma lado a lado, na mesma ordem em toda a pagina. Trocar a
   ordem entre secoes faz o visitante reprocessar a escolha toda vez. */
.sw-cta-par {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Linha de garantia embaixo do botao. Curta, apagada, sem ponto final. */
.sw-cta-nota {
  font-size: var(--sw-fs-xs);
  color: var(--sw-tinta-3);
}

/* ============================================================================
   BLOCO DE CTA FINAL
   ========================================================================== */

.sw-cta-bloco {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sw-gap);
  text-align: center;
  padding: var(--sw-secao-y) var(--sw-gutter);
  border-radius: var(--ds-r-2xl, 32px);
  background: var(--sw-superficie);
  overflow: hidden;
  isolation: isolate;
}

/* A luz nasce DENTRO da cena e vaza por baixo, com spread negativo. E a
   assinatura da casa: sombra que circunda o bloco vira drop-shadow de
   bootstrap, e e exatamente o que estamos deixando para tras. */
.sw-cta-bloco::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -55%;
  width: 120%;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--sw-acento) 26%, transparent),
    transparent 62%);
  z-index: -1;
  pointer-events: none;
}

/* ============================================================================
   FAQ
   ----------------------------------------------------------------------------
   details/summary nativo. Funciona sem JS, e pesquisavel pelo localizar do
   navegador e ja vem acessivel pelo teclado. A animacao de altura e enfeite
   por cima, nunca requisito.
   ========================================================================== */

.sw-faq { border-top: 1px solid var(--sw-linha); }

.sw-faq-item {
  border-bottom: 1px solid var(--sw-linha);
}

.sw-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sw-gap);
  padding: var(--sw-gap-sm) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--ds-display, "Space Grotesk", system-ui, sans-serif);
  font-size: var(--sw-fs-lead);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--sw-tinta-1);
}

.sw-faq-item > summary::-webkit-details-marker { display: none; }

/* O sinal de mais gira 45 graus e vira um X.

   A primeira versao tentava virar um MENOS: rotacionava 90 graus e trocava o
   fundo por so a haste horizontal. As duas coisas juntas se anulam — a haste
   que sobrou e justamente a que a rotacao poe em pe, e o indicador aberto
   virava uma barrinha vertical. Alem disso background nao e animavel, entao
   metade da transicao nunca acontecia.

   O X resolve os dois: uma transformacao so, totalmente animavel, e sem
   ambiguidade de leitura. */
.sw-faq-item > summary::after {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  color: var(--sw-tinta-3);
  transition: transform var(--sw-dur-2) var(--sw-ease), color var(--sw-dur-2) var(--sw-ease);
}

.sw-faq-item[open] > summary::after {
  transform: rotate(45deg);
  color: var(--sw-acento);
}

.sw-faq-resposta {
  padding-bottom: var(--sw-gap);
  max-width: var(--sw-medida);
  font-size: var(--sw-fs-sm);
  line-height: var(--sw-lh-body);
  color: var(--sw-tinta-2);
}

/* ============================================================================
   FORMULARIO
   ========================================================================== */

.sw-form {
  display: flex;
  flex-direction: column;
  gap: var(--sw-gap-sm);
}

.sw-campo { display: flex; flex-direction: column; gap: 6px; }

.sw-label {
  font-family: var(--ds-mono, ui-monospace, monospace);
  font-size: var(--sw-fs-micro);
  font-weight: 600;
  letter-spacing: var(--sw-track-kicker);
  text-transform: uppercase;
  color: var(--sw-tinta-3);
}

.sw-input {
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-radius: var(--ds-r-md, 14px);
  background: var(--sw-poco);
  box-shadow: inset 0 0 0 1px var(--sw-linha);
  color: var(--sw-tinta-1);
  font-family: inherit;
  font-size: var(--sw-fs-sm);
  transition: box-shadow var(--sw-dur-1) var(--sw-ease);
}

.sw-input::placeholder { color: var(--sw-tinta-4); }

.sw-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--sw-acento),
              0 0 0 3px color-mix(in srgb, var(--sw-acento) 18%, transparent);
}

/* Erro em vermelho porque vermelho e erro. E o unico uso legitimo da cor no
   acervo: vermelho nunca e destaque nem badge decorativo. */
.sw-campo.is-invalido .sw-input {
  box-shadow: inset 0 0 0 1px var(--sw-erro);
}

.sw-erro {
  font-size: var(--sw-fs-xs);
  /* --sw-erro, nao --ds-red: o vermelho da marca sobre papel da 3,59:1 e
     reprova AA. O registro claro aponta o token para um vermelho profundo do
     mesmo matiz. Vermelho continua significando erro; muda so a luminosidade. */
  color: var(--sw-erro);
}

/* --- campos que faltavam ---------------------------------------------------
   Um formulario de acervo que so tem input de texto obriga o proximo projeto a
   inventar o resto — e inventar select e checkbox e onde o visual se perde
   primeiro, porque os dois tem aparencia nativa forte. */

.sw-select {
  width: 100%;
  padding: 13px 40px 13px 16px;
  border: 0;
  border-radius: var(--ds-r-md, 14px);
  background: var(--sw-poco);
  box-shadow: inset 0 0 0 1px var(--sw-linha);
  color: var(--sw-tinta-1);
  font-family: inherit;
  font-size: var(--sw-fs-sm);
  cursor: pointer;
  /* A seta nativa e feia e muda em cada plataforma; appearance:none tira ela e a
     nossa entra como background, o que mantem o <select> nativo por baixo — com
     teclado, busca por digitacao e a roda do sistema no celular. */
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: right 20px center, right 14px center;
  background-repeat: no-repeat;
}

.sw-select:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--sw-acento),
              0 0 0 3px color-mix(in srgb, var(--sw-acento) 18%, transparent);
}

.sw-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--sw-lh-body);
}

/* Caixa e radio: o controle nativo continua ali, so escondido do olho. Trocar
   por <div> quebraria teclado, leitor de tela e o envio do formulario. */
.sw-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  font-size: var(--sw-fs-sm);
  color: var(--sw-tinta-2);
}

.sw-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.sw-check-marca {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border-radius: 6px;
  background: var(--sw-poco);
  box-shadow: inset 0 0 0 1px var(--sw-linha);
  display: grid;
  place-items: center;
  transition: background var(--sw-dur-1) var(--sw-ease),
              box-shadow var(--sw-dur-1) var(--sw-ease);
}

.sw-check input:focus-visible + .sw-check-marca {
  box-shadow: inset 0 0 0 1px var(--sw-acento),
              0 0 0 3px color-mix(in srgb, var(--sw-acento) 20%, transparent);
}

.sw-check input:checked + .sw-check-marca {
  background: var(--sw-acento);
  box-shadow: none;
}

.sw-check-marca::before {
  content: "";
  width: 5px;
  height: 9px;
  border-right: 1.8px solid var(--sw-acento-tinta);
  border-bottom: 1.8px solid var(--sw-acento-tinta);
  transform: rotate(45deg) scale(0);
  transition: transform var(--sw-dur-1) var(--sw-ease);
}

.sw-check input:checked + .sw-check-marca::before { transform: rotate(45deg) scale(1); }

.sw-check--radio .sw-check-marca { border-radius: 50%; }
.sw-check--radio .sw-check-marca::before {
  width: 7px; height: 7px; border: 0; border-radius: 50%;
  background: var(--sw-acento-tinta); transform: scale(0);
}
.sw-check--radio input:checked + .sw-check-marca::before { transform: scale(1); }

/* Dois campos na mesma linha, virando um no celular. */
.sw-form-linha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sw-gap-sm);
}

@media (max-width: 560px) { .sw-form-linha { grid-template-columns: minmax(0, 1fr); } }

/* Prova ao lado do botao: avatares e uma linha curta. Em pagina de venda o que
   mais move a agulha e alguem ja ter feito, nao mais um adjetivo. */
.sw-prova-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--sw-fs-xs);
  color: var(--sw-tinta-3);
}

.sw-avatares { display: flex; }

.sw-avatares img,
.sw-avatares span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--sw-superficie-2);
  box-shadow: 0 0 0 2px var(--sw-fundo);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--sw-tinta-2);
}

.sw-avatares > * + * { margin-left: -9px; }

/* ============================================================================
   CAMPO COM MASCARA
   ----------------------------------------------------------------------------
   O JS (data-sw-mascara) formata enquanto se digita. O CSS aqui existe para o
   que a mascara sozinha nao resolve.

   TRES DECISOES QUE MUDAM O RESULTADO, e nenhuma e visual:

   1. `inputmode` E O QUE ABRE O TECLADO CERTO NO CELULAR, nao `type="number"`.
      `type="number"` num CPF ou num telefone e um erro que parece acerto: ele
      recusa parenteses, ponto e traco (que a mascara insere), corta zero a
      esquerda de CEP, e no desktop ganha aquelas setinhas que ninguem quer. A
      marcacao certa e sempre `type="text"` mais `inputmode="numeric"`.

   2. FONTE TABULAR NO CAMPO MASCARADO. Digito de largura variavel faz o texto
      escorregar a cada caractere que a mascara insere, e a sensacao e de campo
      instavel.

   3. `autocomplete` VALE MAIS QUE MASCARA. Um telefone que o navegador
      preenche sozinho e melhor que qualquer formatacao. Os nomes certos estao
      no comentario de cada campo do index.html.

   O JS nunca deixa o campo passar do tamanho da mascara, entao `maxlength` na
   marcacao e redundante — mas continua valendo escrever, porque e ele que
   segura o caso do JS nao carregar.
   ========================================================================== */

.sw-input[data-sw-mascara] {
  font-family: var(--ds-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* A dica de formato, do lado do rotulo. Some quando o campo tem conteudo — o
   formato ja esta visivel, entao repetir vira ruido. */
.sw-campo-dica {
  font-family: var(--ds-mono, ui-monospace, monospace);
  font-size: var(--sw-fs-micro);
  letter-spacing: 0.08em;
  color: var(--sw-tinta-3);
  margin-left: auto;
}

.sw-label-linha { display: flex; align-items: baseline; gap: 10px; }

.sw-campo.is-preenchido .sw-campo-dica { opacity: 0; }
.sw-campo-dica { transition: opacity var(--sw-dur-1) var(--sw-ease); }

/* O campo com icone dentro. O padding a esquerda abre espaco; o icone fica
   absoluto e SEM pointer-events, senao clicar nele nao foca o campo. */
.sw-campo-ico { position: relative; display: block; }

.sw-campo-ico > .sw-ico,
.sw-campo-ico > i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sw-tinta-3);
  pointer-events: none;
  font-size: 14px;
  transition: color var(--sw-dur-1) var(--sw-ease);
}

.sw-campo-ico > .sw-input { padding-left: 44px; }
.sw-campo-ico:focus-within > .sw-ico,
.sw-campo-ico:focus-within > i { color: var(--sw-acento); }

/* O campo validado. Um "certo" discreto a direita: e a confirmacao que evita a
   pessoa reler o que digitou. Cinza, nao verde — verde e dinheiro. */
.sw-campo.is-valido .sw-campo-ico::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 6px;
  height: 11px;
  border-right: 1.8px solid var(--sw-tinta-2);
  border-bottom: 1.8px solid var(--sw-tinta-2);
  transform: translateY(-62%) rotate(45deg);
}

/* ============================================================================
   CAPTCHA
   ----------------------------------------------------------------------------
   O QUE ISTO E: a caixa, os estados e o lugar dela no formulario, para o
   formulario nascer com espaco reservado em vez de ganhar um remendo depois.

   O QUE ISTO NAO E: protecao. Marcar uma caixa no proprio navegador nao para
   robo nenhum — a validacao tem que acontecer no SERVIDOR, contra um servico
   que emite e confere um token.

   NO DIA DE VALER DE VERDADE, troque o miolo por Cloudflare Turnstile ou
   hCaptcha. Os dois entregam widget proprio; esta caixa vira a moldura dele, e
   os estados abaixo continuam servindo. O reCAPTCHA do Google fica de fora por
   uma razao concreta e ja medida neste ambiente: o DNS da maquina do Daniel
   bloqueia dominio do Google e o widget morre em silencio.

   A DEFESA QUE FUNCIONA E BARATA, e essa da para ligar hoje mesmo, no PHP:

     1. HONEYPOT — um campo escondido do olho (mas NAO com `display:none`, que
        alguns robos ja detectam; use `.sw-honeypot` abaixo) e com
        `tabindex="-1"` e `autocomplete="off"`. Se ele voltar preenchido, e robo.
     2. RELOGIO — um campo com o timestamp de quando o formulario foi entregue.
        Envio em menos de ~3 segundos e robo.
     3. TOKEN DE SESSAO — um valor unico por formulario, conferido no envio.
        Tambem resolve CSRF, que e o problema maior.

   As tres juntas custam 20 linhas e param a quase totalidade do que chega.
   ========================================================================== */

.sw-captcha {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--ds-r-md, 14px);
  background: var(--sw-poco);
  box-shadow: inset 0 0 0 1px var(--sw-linha);
  cursor: pointer;
  user-select: none;
  /* Explicito porque o captcha costuma cair dentro de um `.sw-cta-bloco`, que
     e' centralizado — e ali o rotulo saia centralizado ao lado de uma caixa
     alinhada a esquerda, que le como desalinho e nao como centro. */
  text-align: left;
  transition: box-shadow var(--sw-dur-1) var(--sw-ease);
}

.sw-captcha:hover { box-shadow: inset 0 0 0 1px var(--sw-veu-3); }

.sw-captcha:focus-visible {
  outline: 2px solid var(--sw-acento);
  outline-offset: 2px;
}

/* A caixa de marcar. Tres estados no mesmo elemento: vazia, girando, marcada. */
.sw-captcha-caixa {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--sw-superficie);
  box-shadow: inset 0 0 0 1.5px var(--sw-tinta-4);
  transition: box-shadow var(--sw-dur-1) var(--sw-ease), background var(--sw-dur-1) var(--sw-ease);
}

/* Girando: o anel de carregando ocupa a mesma caixa, entao nada salta. */
.sw-captcha.is-verificando .sw-captcha-caixa {
  box-shadow: inset 0 0 0 1.5px transparent;
  background: transparent;
}

.sw-captcha.is-verificando .sw-captcha-caixa::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--sw-veu-3);
  border-top-color: var(--sw-acento);
}

@media (prefers-reduced-motion: no-preference) {
  .sw-captcha.is-verificando .sw-captcha-caixa::before {
    animation: sw-ico-gira 780ms linear infinite;
  }
}

/* Marcada. O "certo" e desenhado com duas bordas, e nao com fonte de icone: o
   captcha e o ultimo passo antes de enviar e nao pode depender de webfont. */
.sw-captcha.is-ok .sw-captcha-caixa {
  background: var(--sw-acento);
  box-shadow: inset 0 0 0 1.5px var(--sw-acento);
}

.sw-captcha.is-ok .sw-captcha-caixa::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 4px;
  width: 6px;
  height: 12px;
  border-right: 2px solid var(--sw-acento-tinta);
  border-bottom: 2px solid var(--sw-acento-tinta);
  transform: rotate(45deg);
}

.sw-captcha-texto {
  flex: 1;
  font-size: var(--sw-fs-sm);
  color: var(--sw-tinta-2);
  line-height: 1.3;
}

/* --sw-tinta-2 e nao --sw-tinta-3, e o motivo vale para todo texto que cair
   dentro de um poco: o piso de 48% do acervo foi calibrado contra
   --sw-superficie, e o --sw-poco e um degrau MAIS ESCURO que ela. No registro
   editorial isso derrubou estas duas linhas para 4,46:1 — quatro centesimos
   abaixo do piso, que e o tipo de falha que so uma medicao encontra. */
.sw-captcha-texto small {
  display: block;
  margin-top: 3px;
  font-family: var(--ds-mono, ui-monospace, monospace);
  font-size: var(--sw-fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-tinta-2);
}

/* A marca do servico, na direita. Fica ali porque o olho ja aprendeu a procurar
   ali — e a posicao do reCAPTCHA e do Turnstile. */
.sw-captcha-marca {
  flex: none;
  display: grid;
  place-items: center;
  gap: 2px;
  text-align: center;
  color: var(--sw-tinta-3);
  font-family: var(--ds-mono, ui-monospace, monospace);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Mesma correcao do <small> acima: dentro do poco, --sw-tinta-3 nao alcanca o
   piso no registro claro. */
.sw-captcha-marca { color: var(--sw-tinta-2); }

.sw-captcha-marca .sw-logo-icone { height: 15px; }

/* O HONEYPOT. NAO usa display:none nem hidden — robo que le CSS pula os dois.
   Isto tira do olho e do teclado sem tirar da arvore, que e o ponto: o robo
   preenche e se entrega. */
.sw-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ============================================================================
   O RODAPE DO FORMULARIO
   ----------------------------------------------------------------------------
   Onde ficam a marca, o botao e a linha de seguranca. A marca aqui nao e
   enfeite: formulario que pede dado sem dizer para quem esta indo e o padrao
   que mais derruba conversao em pagina de venda.
   ========================================================================== */

.sw-form-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sw-gap-sm);
  padding-top: var(--sw-gap-sm);
  margin-top: 4px;
  box-shadow: inset 0 1px 0 var(--sw-linha);
  flex-wrap: wrap;
}

.sw-form-pe .sw-logo { opacity: 0.72; }

.sw-form-seguro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sw-fs-micro);
  font-family: var(--ds-mono, ui-monospace, monospace);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sw-tinta-3);
}

/* O cabecalho do formulario, com o logo. Mesma razao do rodape. */
.sw-form-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--sw-gap-sm);
}

.sw-form-topo .sw-logo { flex: none; }

.sw-form-topo p {
  margin: 0;
  font-size: var(--sw-fs-xs);
  color: var(--sw-tinta-3);
  line-height: 1.4;
}

/* ============================================================================
   ALVO DE TOQUE
   ----------------------------------------------------------------------------
   `pointer: coarse` e nao `max-width`: largura de tela nao diz nada sobre o
   dedo. Janela estreita no desktop continua tendo mouse; tablet de 1024px e
   dedo puro. Ver a secao "O dedo" do README.
   ========================================================================== */

@media (pointer: coarse) {
  /* 44px de ALTURA, e nao de padding: o botao ja tem 13px em cima e embaixo, e
     somar mais empurraria o texto para longe da borda e mudaria o desenho. O
     `min-height` cresce so o que falta e o `align-items: center` do bloco base
     mantem o rotulo no meio. */
  .sw-btn { min-height: 44px; }

  /* O --sm existe para caber em barra e em card apertado. No dedo ele nao pode
     ficar menor que o piso, entao ele para de ser menor — o que muda e a
     tipografia, nao a area. */
  .sw-btn--sm { min-height: 44px; }

}

@media (pointer: coarse) {
  /* O botao de TEXTO nao tem chao, entao a caixa dele e exatamente a palavra:
     medi 37x44 e 36x44 — a altura ja vinha do `.sw-btn`, faltava a largura.
     Rotulo curto ("Ver", "Mais") e justamente o mais comum aqui. */
  .sw-btn--texto { min-width: 44px; }
}