/* Tokens do Design System da Midie (tokens.css) */
:root {
  --grafite: #2d2d2d;
  --amarelo: #ffe86d;
  --off-white: #f4f3f3;
  --branco: #ffffff;
  --fundo-sutil: #e9e7e4;
  --linha: #d9d7d4;
  --texto-suave: #5c5b59;
  --amarelo-suave: #fff4b8;
  --negativo: #b3261e;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --font-sans: "Poppins", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; background: var(--off-white); color: var(--grafite); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul { margin: 0; }
a { color: inherit; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-4); }
.secao { padding: var(--space-12) 0; }
.secao-branca { background: var(--branco); }
.secao-escura { background: var(--grafite); color: var(--branco); }
.estreito { max-width: 720px; }

/* Tipografia */
h1 { font-size: clamp(30px, 6vw, 48px); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: clamp(26px, 4.5vw, 36px); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--space-6); }
h3 { font-size: 20px; line-height: 1.3; font-weight: 600; margin-bottom: var(--space-2); }
.sub { font-size: 18px; color: var(--texto-suave); max-width: 640px; }
.secao-escura .sub, .secao-escura p { color: #d9d7d4; }
p + p { margin-top: var(--space-4); }
.texto { max-width: 65ch; }

/* Destaque: a barra marca-texto */
.destaque { background-image: linear-gradient(var(--amarelo), var(--amarelo)); background-repeat: no-repeat; background-size: calc(100% + 0.12em) 0.24em; background-position: -0.08em 100%; padding-bottom: 0.12em; }

/* Etiqueta */
.etiqueta { display: inline-block; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--space-1) var(--space-2); background: var(--amarelo); color: var(--grafite); margin-bottom: var(--space-4); }

/* Botão */
.btn { font-family: var(--font-sans); font-weight: 600; font-size: 16px; min-height: 52px; padding: 0 var(--space-6); border: 2px solid var(--amarelo); background: var(--amarelo); color: var(--grafite); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.btn:hover { filter: brightness(0.94); }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--grafite); outline-offset: 3px; }
.secao-escura .btn:focus-visible { outline-color: var(--amarelo); }
.btn:disabled { opacity: 0.6; cursor: wait; }
.cta { margin-top: var(--space-8); }
.micro { font-size: 14px; color: var(--texto-suave); margin-top: var(--space-3); }

/* Topo */
.topo { padding: var(--space-6) 0; }
.topo img { width: 120px; }

/* Botão largo: ocupa a largura toda no celular */
.btn-largo { width: 100%; }
@media (min-width: 640px) { .btn-largo { width: auto; } }

/* Primeira dobra: curta, o formulário aparece logo abaixo */
.hero { padding: var(--space-6) 0 var(--space-8); }
.hero h1 { max-width: 820px; margin-bottom: var(--space-4); }
.hero .sub { margin-bottom: var(--space-6); }

/* Formulário na 2ª dobra */
.secao-form { padding: var(--space-8) 0; }
.secao-form h2 { margin-bottom: var(--space-2); }

/* Logos */
.logos { background: var(--branco); padding: var(--space-6) 0; border-bottom: 1px solid var(--linha); }
.logos p { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: var(--space-3); }
.logos ul { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); font-weight: 600; font-size: 15px; }
@media (min-width: 768px) { .logos ul { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); font-size: 17px; } }

/* Espelho */
.frases { list-style: none; padding: 0; display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
.frases li { background: var(--off-white); border-left: 4px solid var(--amarelo); padding: var(--space-3) var(--space-4); font-weight: 500; font-size: 18px; }


/* Lista com marcador reto */
.lista { list-style: none; padding: 0; display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.lista li { padding-left: var(--space-6); position: relative; }
.lista li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 12px; height: 4px; background: var(--amarelo); }
.lista.nao li::before { background: var(--texto-suave); }

/* Provas */
.provas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.prova { background: var(--branco); border: 1px solid var(--linha); padding: var(--space-6); }
.prova .cliente { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); }
.prova .numero { font-size: clamp(32px, 6vw, 44px); line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; margin: var(--space-2) 0; }
.prova .print { display: block; margin-top: var(--space-4); border: 1px solid var(--linha); }
.nota { font-size: 14px; color: var(--texto-suave); margin-top: var(--space-6); max-width: 65ch; }

/* Quem somos */
.dupla { display: grid; gap: var(--space-8); align-items: center; }
.foto { aspect-ratio: 4 / 3; background: var(--fundo-sutil); display: flex; align-items: center; justify-content: center; color: var(--texto-suave); font-size: 14px; text-align: center; padding: var(--space-4); }
@media (min-width: 768px) { .dupla:has(.foto) { grid-template-columns: 1fr 1fr; } }
.dupla:not(:has(.foto)) { max-width: 720px; }

/* Para quem é */
.colunas { display: grid; gap: var(--space-8); }
@media (min-width: 768px) { .colunas { grid-template-columns: 1fr 1fr; } }

/* Risco */
.risco { background: var(--amarelo-suave); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--linha); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 17px; padding: var(--space-4) var(--space-8) var(--space-4) 0; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: var(--space-4); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: var(--space-4); color: var(--texto-suave); max-width: 65ch; }

/* Formulário */
.form { background: var(--branco); color: var(--grafite); padding: var(--space-4); display: grid; gap: var(--space-4); max-width: 640px; margin-top: var(--space-6); }
.campo { display: grid; gap: var(--space-1); }
.campo label, .campo legend { font-weight: 600; font-size: 15px; padding: 0; }
.campo input, .campo select { font-family: var(--font-sans); font-size: 16px; min-height: 48px; padding: 0 var(--space-3); border: 1.5px solid var(--linha); border-radius: 4px; background: var(--branco); color: var(--grafite); width: 100%; }
fieldset.campo { border: 0; margin: 0; padding: 0; }
.opcoes { display: flex; gap: var(--space-6); }
.opcoes label { font-weight: 400; display: flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.opcoes input { width: 20px; min-height: 20px; accent-color: var(--grafite); }
.erro { font-size: 13px; color: var(--negativo); min-height: 0; }
.invalido input, .invalido select { border-color: var(--negativo); }
.form .btn { width: 100%; margin-top: var(--space-2); }
.form .micro { margin-top: 0; }
.aviso-envio { display: none; background: var(--amarelo-suave); padding: var(--space-3); font-size: 14px; }
.duas { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .form { padding: var(--space-8); } .duas { grid-template-columns: 1fr 1fr; } }

/* Rodapé */
.rodape { background: var(--grafite); color: #b9b7b4; font-size: 14px; padding: var(--space-8) 0; border-top: 1px solid #4a4a4a; }
.rodape .wrap { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; }
.rodape img { width: 100px; }

/* Páginas internas (obrigado, privacidade) */
.pagina { padding: var(--space-12) 0 var(--space-16); }
.pagina h2 { font-size: 22px; margin: var(--space-8) 0 var(--space-3); }
.pagina ul { padding-left: var(--space-6); }
.pagina li + li { margin-top: var(--space-2); }

@media (min-width: 768px) { .secao { padding: 96px 0; } .hero { padding: var(--space-12) 0 var(--space-16); } .secao-form { padding: var(--space-16) 0; } }

/* Landing centralizada (o formulário e o FAQ ficam alinhados à esquerda para facilitar a leitura) */
.lp { text-align: center; }
.lp h1, .lp .sub, .lp .texto, .lp .nota, .lp .estreito { margin-left: auto; margin-right: auto; }
.lp .lista { width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; text-align: left; }
.lp .frases li { border-left: 0; border-bottom: 4px solid var(--amarelo); }
.lp .logos ul { justify-items: center; }
@media (min-width: 768px) { .lp .logos ul { justify-content: center; } }
.lp .form { text-align: left; margin-left: auto; margin-right: auto; }
.lp .faq details { text-align: left; }
.topo-centro img { margin: 0 auto; }
.lp .hero h1, .lp .hero .sub, .lp .hero .btn { text-transform: uppercase; }
.lp .hero .sub { font-weight: 700; font-size: 15px; color: var(--texto-suave); }
/* "Pouco lead ou lead sem perfil?" sempre em uma linha: a fonte encolhe para caber na largura da tela.
   17 = largura do texto em caixa alta dividida pelo tamanho da fonte (medido: 16,6), com folga. */
.linha-fixa { display: block; white-space: nowrap; letter-spacing: -0.02em; font-size: min(1em, calc((100vw - 32px) / 16.8)); margin-bottom: var(--space-1); }

/* Hero: headline maior e textura de pontos (grafite bem leve, sem degradê visível) */
.topo-centro, .lp .hero { background-color: var(--off-white); background-image: radial-gradient(rgba(45, 45, 45, 0.14) 1.2px, transparent 1.4px); background-size: 16px 16px; }
.lp .hero h1 { font-size: clamp(36px, 9.5vw, 56px); line-height: 1.1; }
/* Marca-texto atrás da metade de baixo da palavra (componente Destaque, forma "fundo") */
.marca { background-image: linear-gradient(var(--amarelo), var(--amarelo)); background-repeat: no-repeat; background-size: calc(100% + 0.16em) 0.5em; background-position: -0.08em 88%; }

/* Botões: cantos arredondados e tamanho mais enxuto (pedido do Nathan, sobrepõe o radius-0 do Design System) */
.btn { border-radius: 12px; min-height: 48px; font-size: 15px; padding: 0 28px; }
.btn-largo { width: auto; }

/* Carrossel de clientes: duas cópias da lista rodando em loop */
.clientes { background: var(--branco); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); padding: var(--space-4) 0; overflow: hidden; text-align: center; }
.clientes-titulo { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: var(--space-3); }
.clientes-faixa { display: flex; width: max-content; animation: rolar 30s linear infinite; }
.clientes-trilho { list-style: none; margin: 0; padding: 0; display: flex; }
.clientes-trilho li { padding: 0 var(--space-6); display: flex; align-items: center; }
.clientes-trilho img { height: 56px; width: auto; max-width: none; }
@keyframes rolar { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .clientes-faixa { animation: none; } }
.clientes-titulo { font-weight: 700; }
.secao-escura .form .micro-form { color: var(--grafite); }

/* Funil de Expansão desenhado: cada etapa mais estreita que a anterior */
.funil { list-style: none; padding: 0; margin: var(--space-8) auto 0; display: grid; gap: var(--space-2); justify-items: center; }
.funil li { width: var(--w); background: #383838; padding: var(--space-4); display: grid; gap: var(--space-1); }
.funil strong { color: var(--amarelo); font-size: 20px; }
.funil span { color: var(--branco); font-size: 15px; }

/* Simulador */
.simulador { background: var(--branco); color: var(--grafite); padding: var(--space-6) var(--space-4); margin-top: var(--space-8); }
.simulador h3 { font-size: 22px; }
.secao-escura .simulador p { color: var(--grafite); }
.sim-campos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: var(--space-4) 0; text-align: left; }
.sim-campos label { font-size: 14px; font-weight: 600; display: grid; gap: var(--space-1); }
.sim-campos input { font-family: var(--font-sans); font-size: 18px; min-height: 48px; width: 100%; padding: 0 var(--space-2); border: 1.5px solid var(--linha); border-radius: 4px; text-align: center; }
.sim-barras { display: grid; gap: var(--space-1); justify-items: center; margin-bottom: var(--space-4); }
.sim-barra { width: 100%; height: 12px; background: var(--fundo-sutil); display: flex; justify-content: center; }
.sim-barra span { display: block; height: 100%; width: 0; background: var(--grafite); transition: width 0.3s ease; }
.sim-barra:nth-child(3) span { background: var(--amarelo); }
.sim-resultado { font-weight: 600; margin-bottom: var(--space-4); }
@media (prefers-reduced-motion: reduce) { .sim-barra span { transition: none; } }

/* Formulário estilizado: campos preenchidos e arredondados, escolhas em botões (melhor para o polegar) */
.lp .form { border-radius: 16px; padding: var(--space-6) var(--space-4); gap: var(--space-6); }
@media (min-width: 640px) { .lp .form { padding: var(--space-8); } }
.lp .form .campo { gap: var(--space-2); }
.lp .form .campo label, .lp .form .campo legend { font-size: 15px; font-weight: 600; color: var(--grafite); }
.lp .form .campo input:not([type="radio"]) { min-height: 52px; padding: 0 var(--space-4); background: var(--off-white); border: 2px solid transparent; border-radius: 12px; font-size: 16px; transition: border-color 0.15s, background 0.15s; }
.lp .form .campo input::placeholder { color: #9a9896; }
.lp .form .campo input:not([type="radio"]):focus { outline: none; border-color: var(--grafite); background: var(--branco); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); background: var(--off-white); border: 2px solid transparent; border-radius: 12px; font-size: 15px; font-weight: 500; transition: background 0.15s, color 0.15s; }
.chip:hover span { border-color: var(--linha); }
.chip input:checked + span { background: var(--grafite); color: var(--branco); }
.chip input:focus-visible + span { outline: 2px solid var(--grafite); outline-offset: 2px; }
.lp .form .invalido input:not([type="radio"]), .lp .form .invalido .chip span { border-color: var(--negativo); }
.lp .form .erro:empty { display: none; }
.lp .form .btn { min-height: 56px; font-size: 16px; margin-top: 0; }
.lp .form .micro-form { text-align: center; }
@media (prefers-reduced-motion: reduce) { .chip span, .lp .form .campo input { transition: none; } }
/* Dropdowns no mesmo estilo dos campos de texto, com seta própria */
.lp .form .campo select { appearance: none; -webkit-appearance: none; min-height: 52px; padding: 0 44px 0 var(--space-4); background: var(--off-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232d2d2d' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat right 16px center; border: 2px solid transparent; border-radius: 12px; font-size: 16px; color: var(--grafite); cursor: pointer; }
.lp .form .campo select:focus { outline: none; border-color: var(--grafite); background-color: var(--branco); }
.lp .form .campo select:has(option[value=""]:checked) { color: #9a9896; }
.lp .form .invalido select { border-color: var(--negativo); }
.caixa-alta { text-transform: uppercase; }
.sem-quebra { white-space: nowrap; }
.prova-logo { height: 48px; width: auto; margin: 0 auto var(--space-4); }