/* ====================== A VERSÃO CRUA ======================
 *
 * Terceira versão de design, rodando contra a `feia` desde 15/10/2026.
 *
 * Por que ela existe: a `feia` ganhou da `bonita`, mas ela não é ausência de
 * design, é OUTRO design. Montserrat em tudo, borda preta de 3px, peso 900,
 * caixa alta no botão: isso é direct response clássico, um estilo com opinião
 * forte. O Pedro notou isso e pediu "mais feia ainda, menos agitada".
 *
 * A tese que esta aqui testa é diferente da da `feia`. A `feia` aposta que
 * panfleto de empreiteiro vende mais que página de agência. Esta aposta que
 * NADA vende mais que panfleto: que a página que não parece peça de marketing
 * nenhuma, e sim um formulário interno que a empresa usa, baixa a guarda de
 * quem já foi perseguido por agência.
 *
 * O que muda em relação à feia, e é só isto:
 *   - Arial, a fonte que vem no computador, no lugar de Montserrat
 *   - borda de 1px cinza no lugar de 3px preta
 *   - pesos normais (400 e 700), nada de 800/900
 *   - sem caixa alta, sem letter-spacing, sem botão vermelho gritando
 *   - botão cinza de sistema, do tamanho do texto
 *
 * O vermelho da marca fica só no que precisa ser achado. O resto é preto no
 * branco.
 *
 * Regra de manutenção, igual à da feia: NADA aqui fora do escopo `.var-crua`.
 * Seletor que vazar estraga a feia, que é o controle deste teste.
 * =========================================================== */

html.var-crua {
  --bg: #FFFFFF;
  --text: #000000;
  --text-soft: #222222;
  --text-mute: #555555;
  --accent: #CC1100;
  --accent-hi: #CC1100;
  --accent-lo: #AA0E00;
  --line: #BBBBBB;
  --fill: #FFFFFF;
  --fill-hi: #F7F7F7;
}

/* Mesma faxina da feia: nada de profundidade, nada de canto redondo. */
.var-crua *,
.var-crua *::before,
.var-crua *::after {
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  filter: none !important;
  background-image: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Arial em tudo. É a fonte que já está na máquina de quem abre: nenhuma
   escolha tipográfica, que é justamente o ponto. */
.var-crua,
.var-crua * {
  font-family: Arial, Helvetica, sans-serif !important;
}

.var-crua body { background: #FFFFFF; color: #000000; }

/* Títulos: pesados o suficiente para hierarquia, longe do 900 da feia. */
.var-crua h1,
.var-crua h2,
.var-crua h3 { color: #000000; font-weight: 700; }
.var-crua h1 { font-size: clamp(27px, 5.6vw, 40px); line-height: 1.2; }
.var-crua h1 .accent { color: #000000; }   /* nem o destaque é colorido */
.var-crua h1 .cauda {
  display: block; color: #333333; font-weight: 400;
  font-size: 0.46em; line-height: 1.4; margin-top: 10px;
}

.var-crua .eyebrow { color: #555555; font-weight: 700; font-size: 12px; }
.var-crua .lede, .var-crua p { color: #222222; }

/* O cartão do formulário deixa de ser cartão: vira um bloco com um fio. */
.var-crua .card-shell { background: #FFFFFF; border: 1px solid #BBBBBB; }
.var-crua .card-core { background: #FFFFFF; border: none; }

.var-crua label.lbl { color: #000000; font-weight: 700; font-size: 13px; }
.var-crua .fld input,
.var-crua .fld select,
.var-crua .fld textarea {
  background: #FFFFFF; border: 1px solid #767676; color: #000000;
  font-weight: 400; font-size: 16px;   /* 16px evita o zoom do iOS ao focar */
}
.var-crua .fld input::placeholder { color: #767676; font-weight: 400; }
.var-crua .tel-wrap { border: 1px solid #767676; }
.var-crua .tel-wrap input { border: none; }
.var-crua .tel-cc { color: #000000; border-right: 1px solid #767676; font-weight: 400; }

.var-crua .opt,
.var-crua .opcao { background: #FFFFFF; border: 1px solid #767676; color: #000000; font-weight: 400; }
.var-crua .opt.sel,
.var-crua .opcao.sel { background: #EFEFEF; border-color: #000000; font-weight: 700; }

/* O botão vira botão de sistema: cinza, fino, do tamanho do texto. Sem
   vermelho, sem caixa alta, sem seta crescendo. */
.var-crua .cta {
  background: #E8E8E8; color: #000000; border: 1px solid #767676;
  font-weight: 700; font-size: 15px; padding: 12px 18px;
}
.var-crua .cta:hover { background: #DCDCDC; }
.var-crua .cta.espera { opacity: .55; }
.var-crua .cta .arrow { background: transparent; border: none; color: #000000; }

.var-crua .under { color: #555555; font-size: 12px; }
.var-crua .fld-erro { color: #CC1100; font-weight: 400; }

/* Prova e números: sem caixa, sem cor, só o fio separando. */
.var-crua .case,
.var-crua .road-item,
.var-crua .tudo-item { background: #FFFFFF; border: 1px solid #DDDDDD; }
.var-crua .tudo-item.destaque { background: #F7F7F7; border-color: #767676; }
.var-crua .big,
.var-crua .tudo-num,
.var-crua .road-num { color: #CC1100; font-weight: 700; }

.var-crua .block { border-top: 1px solid #DDDDDD; }

/* A logo vermelha, igual a feia faz: a branca sumiria neste fundo. Sem isto a
   pagina abre sem marca nenhuma, que foi o que o Pedro viu no celular. */
.var-crua .logo-clara { display: none !important; }
.var-crua .logo-escura { display: inline-block !important; }

/* ─────────────────── Tamanho de texto ───────────────────
 *
 * Correcao de 15/10/2026. Na primeira versao eu encolhi as fontes achando que
 * "cru" era sinonimo de pequeno. Nao e: formulario interno de verdade usa texto
 * de tamanho normal, as vezes grande. E o comprador desta pagina tem 50 anos e
 * esta no celular.
 *
 * O que estava no ar: H1 em 27px e a cauda em 12px num telefone de 390px.
 * Pequeno demais para ler de primeira.
 *
 * A headline agora ocupa mais linhas de proposito: tres ou quatro no celular,
 * com letra maior, em vez de duas apertadas.
 */
.var-crua .faixa-topo { font-size: clamp(15px, 4vw, 18px); font-weight: 700; padding: 11px 16px; }

.var-crua h1 { font-size: clamp(34px, 8.6vw, 48px); line-height: 1.16; }
.var-crua h1 .cauda {
  font-size: clamp(16px, 4.2vw, 20px);
  line-height: 1.45; margin-top: 14px;
}
/* Na crua a cauda e peso 400, entao o negrito precisa ser declarado: o 700
   sozinho ja separa bem sem virar outra headline. */
.var-crua h1 .cauda .forte { font-weight: 700; color: #000000; }

.var-crua .eyebrow { font-size: clamp(13px, 3.4vw, 15px); }
.var-crua .lede { font-size: clamp(17px, 4.3vw, 19px); line-height: 1.55; }
.var-crua p, .var-crua li { font-size: clamp(16px, 4.1vw, 17px); }

.var-crua label.lbl { font-size: 15px; }
.var-crua .fld input,
.var-crua .fld select { font-size: 17px; padding: 14px 13px; }
/* O telefone tem o "+1" posicionado por cima do campo (.tel-wrap e relative, o
   base reserva 52px de padding-left). O padding generico acima sobrescrevia
   essa reserva e o prefixo caia em cima do placeholder. */
.var-crua .tel-wrap input { padding-left: 54px; }
.var-crua .under { font-size: 14px; }
.var-crua .fld-ajuda { font-size: 14px; }
.var-crua .cta { font-size: 17px; padding: 15px 20px; }

.var-crua h2 { font-size: clamp(26px, 6.6vw, 36px); line-height: 1.22; }
.var-crua h3 { font-size: clamp(18px, 4.6vw, 21px); }
.var-crua .trust { font-size: clamp(13px, 3.4vw, 15px); }


/* ═══════════ PÁGINA DE OBRIGADO ═══════════
 *
 * A thank you herda a variante que a pessoa viu na LP (cookie virtvs_dz).
 * Antes ela era sempre escura e polida: quem vinha da feia trocava de
 * identidade visual bem no momento de confiar que a reunião é real.
 *
 * As camadas decorativas (.atmos e .grain) saem aqui. São posicionadas fixas,
 * cobrindo a tela inteira, e pesavam no scroll: em 15/10/2026 a página marcava
 * CLS 0,135 e travava no celular. Fora que fundo atmosférico é exatamente o
 * oposto do que estas variantes propõem. */
.var-crua .atmos, .var-crua .grain { display: none !important; }
.var-crua body { background: #FFFFFF; color: #000000; }

.var-crua .ty-topo h1 { color: #000000; }
.var-crua .ty-topo h1 .accent { color: #CC1100; }
.var-crua .quando { background: #FFFFFF; border: 1px solid #BBBBBB; color: #000000; }
.var-crua .passo + .passo { border-top: 1px solid #BBBBBB; }
.var-crua .passo-num { background: #CC1100; color: #fff; }
.var-crua .convite { background: #FFFFFF; border: 1px solid #BBBBBB; }
.var-crua .convite-topo, .var-crua .convite-data, .var-crua .convite-txt { color: #000000; }
.var-crua .sim { background: #CC1100; color: #fff; border: 1px solid #BBBBBB; }
.var-crua .traga li { color: #000000; }
.var-crua .fone { color: #000000; }
/* O quadro do vídeo fica preto nas duas: é vídeo, não cartão. */
.var-crua .video-quadro { background: #000; border: 1px solid #BBBBBB; }
.var-crua .video-ph { background: #000; box-shadow: none; }