/* ====================== A VERSÃO FEIA ======================
 *
 * Segunda versão de DESIGN da mesma página, para rodar contra a bonita num
 * fatorial 2x2 com o teste de headline. Não substitui nada: entra só quando o
 * sorteio põe `var-feia` no <html>, e a bonita continua igual.
 *
 * O que ela é, de propósito: fundo branco, preto, vermelho, nada mais. Zero
 * vidro, zero desfoque, zero sombra, zero degradê, zero canto arredondado.
 * Tudo 2D, borda preta grossa, Montserrat em tudo, do título ao placeholder.
 *
 * A tese que ela testa: página que parece feita por agência vende agência.
 * Página que parece um panfleto de empreiteiro parece um anúncio honesto. Não
 * é piada: é o visual de direct response que roda há décadas, e o nosso
 * comprador tem 50 anos e vinte de estrada.
 *
 * Regra de manutenção: NADA aqui fora do escopo `.var-feia`. Se um seletor
 * daqui vazar, ele estraga a bonita, que é o controle do teste.
 * =========================================================== */

/* Os tokens primeiro: html.var-feia (0,1,1) ganha de :root (0,1,0), então
   trocar aqui reescreve a página inteira sem caçar seletor por seletor. */
html.var-feia {
  --bg: #FFFFFF;
  --text: #000000;
  --text-soft: #1A1A1A;
  --text-mute: #4A4A4A;
  --accent: #FF261C;
  --accent-hi: #FF261C;   /* sem variação de brilho: não existe hover bonito aqui */
  --accent-lo: #D4120A;
  --line: #000000;
  --fill: #FFFFFF;
  --fill-hi: #F2F2F2;
}

/* A faxina. Tudo que dá profundidade sai de uma vez, inclusive o que vier a
   ser adicionado na bonita depois: é por isso que é `*` e é `!important`. */
.var-feia *,
.var-feia *::before,
.var-feia *::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;
  transition: none !important;
  animation: none !important;
}

/* Montserrat em tudo, inclusive no corpo e no campo de formulário, que na
   bonita são Inter. É metade do que faz ela parecer outra empresa. */
.var-feia,
.var-feia * {
  font-family: 'Montserrat', system-ui, sans-serif !important;
}

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

/* A atmosfera inteira (dois orbes desfocados e o grão) some. */
.var-feia .atmos { display: none !important; }

/* ---------------- cabeçalho ---------------- */
.var-feia .faixa-topo {
  background: #FF261C; color: #FFFFFF;
  border-bottom: 4px solid #000000;
  letter-spacing: 0.06em;
}
/* A logo branca sumiria no branco: a marcação carrega as duas e cada design
   mostra a sua. */
.var-feia .logo-clara { display: none !important; }
.var-feia .logo-escura { display: inline-block !important; }

.var-feia .trust {
  background: #FFFFFF; border: 3px solid #000000; color: #000000;
  font-weight: 600;
}
.var-feia .trust b { color: #000000; }
.var-feia .trust .dots i { background: #FF261C; border-color: #FFFFFF; }

/* ---------------- herói ---------------- */
.var-feia h1 { color: #000000; letter-spacing: -0.01em; }
.var-feia h1 .accent { color: #FF261C; }
.var-feia h1 .cauda { color: #000000; text-transform: uppercase; font-size: 0.42em; letter-spacing: 0.02em; font-weight: 600; }
/* A cauda aqui ja e caixa alta e pesada, entao o negrito da promessa so
   aparece com um degrau de verdade: 600 no resto, 900 no que importa. */
.var-feia h1 .cauda .forte { font-weight: 900; }

/* ---------------- cartão do formulário ---------------- */
/* Na bonita o cartão é uma moldura de vidro com degradê. Aqui é uma caixa. */
.var-feia .card-shell { background: #000000; padding: 4px; }
.var-feia .card-core { background: #FFFFFF; border: none; }

.var-feia .bars i { background: #D9D9D9; height: 10px; }
.var-feia .bars i.done { background: #FF261C; }

.var-feia .q { color: #000000; text-transform: uppercase; }
.var-feia .help { color: #4A4A4A; }
.var-feia label.lbl { color: #000000; font-weight: 800; }

.var-feia .fld input,
.var-feia .tel-wrap {
  background: #FFFFFF; border: 3px solid #000000; color: #000000;
  font-weight: 600;
}
.var-feia .fld input::placeholder { color: #8A8A8A; font-weight: 500; }
.var-feia .fld input:focus { border-color: #FF261C; outline: none; }
.var-feia .fld input.invalid { border-color: #FF261C; background: #FFECEB; }
.var-feia .tel-wrap input { border: none; }
.var-feia .tel-cc { color: #000000; border-right: 3px solid #000000; font-weight: 800; }

.var-feia .opt {
  background: #FFFFFF; border: 3px solid #000000; color: #000000;
  font-weight: 700;
}
.var-feia .opt.sel { background: #FF261C; color: #FFFFFF; border-color: #000000; }

.var-feia .cta {
  background: #FF261C; color: #FFFFFF; border: 3px solid #000000;
  text-transform: uppercase; font-weight: 900; letter-spacing: 0.02em;
}
.var-feia .cta:disabled { background: #B0B0B0; color: #FFFFFF; }
.var-feia .cta .arrow { background: transparent; border: none; }

.var-feia .back { color: #000000; font-weight: 700; text-decoration: underline; }
.var-feia .privacy, .var-feia .under { color: #4A4A4A; }

/* ---------------- seções de baixo ---------------- */
.var-feia section.block { background: #FFFFFF; border-top: 4px solid #000000; }
.var-feia h2 { color: #000000; text-transform: uppercase; }
.var-feia .eyebrow { color: #FF261C; font-weight: 800; }
.var-feia .lede { color: #1A1A1A; }

.var-feia .fit li,
.var-feia .case,
.var-feia .road-item {
  background: #FFFFFF; border: 3px solid #000000; color: #000000;
}
.var-feia .fit li::before { color: #FF261C; }
.var-feia .case .who { color: #4A4A4A; }
.var-feia .case .big { color: #FF261C; }
.var-feia .case p, .var-feia .road-item p { color: #1A1A1A; }
.var-feia .case p b { color: #000000; }
.var-feia .road-num { background: #FF261C; color: #FFFFFF; border: 3px solid #000000; }
.var-feia .case-logo { filter: none !important; }

.var-feia .cta-inline {
  background: #FF261C; color: #FFFFFF; border: 3px solid #000000;
  text-transform: uppercase; font-weight: 900;
}
.var-feia .sticky { background: #FFFFFF; border-top: 4px solid #000000; }

.var-feia .veil { background: rgba(0,0,0,0.75); }
.var-feia .veil-box { background: #FFFFFF; border: 4px solid #000000; }
.var-feia .veil-box h3, .var-feia .veil-box p { color: #000000; }
.var-feia .veil-alt { color: #000000; text-decoration: underline; }

.var-feia .done { background: #FFFFFF; }
.var-feia .done .mark { background: #FF261C; color: #FFFFFF; border: 3px solid #000000; }
.var-feia .done h3 { color: #000000; }
.var-feia .done p { color: #1A1A1A; }

/* ---------------- agenda dentro do cartão ---------------- */
.var-feia .ag-painel { background: #FFFFFF; border: 3px solid #000000; }
.var-feia .ag-mes h4 { color: #000000; text-transform: uppercase; }
.var-feia .ag-seta { background: #FFFFFF; border: 3px solid #000000; color: #000000; }
.var-feia .ag-seta:disabled { opacity: 0.3; }
.var-feia .ag-cab { color: #4A4A4A; font-weight: 800; }
.var-feia .ag-dia { color: #B0B0B0; }
.var-feia .ag-dia.livre { color: #000000; border: 2px solid #000000; font-weight: 800; }
.var-feia .ag-dia.livre i { background: #FF261C; }
.var-feia .ag-dia.sel { background: #FF261C; color: #FFFFFF; border-color: #000000; }
.var-feia .ag-dia.sel i { background: #FFFFFF; }
.var-feia .ag-dia-titulo h4 { color: #000000; }
.var-feia .ag-pill { background: #FFFFFF; border: 2px solid #000000; color: #000000; }
.var-feia .ag-periodo { color: #4A4A4A; font-weight: 800; }
.var-feia .ag-hora { background: #FFFFFF; border: 3px solid #000000; color: #000000; font-weight: 700; }
.var-feia .ag-hora.sel { background: #FF261C; color: #FFFFFF; }
.var-feia .ag-vazio, .var-feia .ag-aviso, .var-feia .ag-fallback { color: #1A1A1A; }
.var-feia .ag-fallback a { color: #FF261C; font-weight: 800; }

/* ---------------- a dobra ----------------
 * A bonita desenha a borda dos campos com `box-shadow: inset`, que não ocupa
 * altura. Aqui a borda é borda de verdade, 3px em cima e embaixo de cada
 * campo, e isso sozinho empurrava o botão 41px para fora da dobra do celular.
 * A borda grossa é o ponto do design, então quem cede é o respiro interno.
 * 98% do tráfego é celular: formulário fora da primeira tela invalida a
 * comparação, porque aí o teste mede dobra e não design. */
.var-feia .fld { margin-bottom: 11px; }
.var-feia .fld input,
.var-feia .tel-wrap { padding-top: 10px; padding-bottom: 10px; }
.var-feia .tel-wrap input { padding-top: 0; padding-bottom: 0; }

@media (max-width: 560px) {
  .var-feia .card-shell { padding: 3px; }
  .var-feia .card-core { padding: 15px 14px; }
  .var-feia .faixa-topo { border-bottom-width: 3px; }
  /* Em 360px de largura (Android comum) a bonita já termina colada na dobra,
     então aqui não sobra um pixel: o respiro do campo vai ao mínimo que ainda
     dá alvo de toque confortável. */
  .var-feia .fld { margin-bottom: 9px; }
  .var-feia .fld input,
  .var-feia .tel-wrap { padding-top: 8px; padding-bottom: 8px; }

  /* Montserrat é mais larga que Inter no mesmo corpo, então a pílula de prova
     quebrava numa linha a mais só na feia, e essa linha ia direto da dobra. */
  .var-feia .trust { font-size: 10.5px; padding: 6px 12px; }
}

/* Passo do contato (28/09/2026): botão apagado até os 4 campos estarem certos,
   contador "1 of 2" e mensagem embaixo de cada campo, no fundo branco. */
.var-feia .cta.espera { background: #D9D9D9; color: #6B6B6B; border-color: #9A9A9A; }
.var-feia .prog-topo { color: #6B6B6B; }
.var-feia .prog-topo b { color: #000000; }
.var-feia .fld-erro { color: #D11A12; font-weight: 700; }


/* ═══════════ 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-feia .atmos, .var-feia .grain { display: none !important; }
.var-feia body { background: #FFFFFF; color: #000000; }

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