/* Materiais complementares da coluna · visual da marca Mariana Bertevello
   Tokens do brandbook: B6 cor, B7 tipografia (Playfair só a partir de 28px), raios 4px e 16px, linha de base.
   Serve para todo material: uma pergunta por tela, pensado primeiro para o celular. */
:root{
  --papel:#FAF8F4; --linho:#E5D8C4; --azul:#284474; --marinho:#001F40;
  --rosa:#D692A7; --dourado:#CAA134; --suave:#5b6577; --erro:#8a2433;
  --f-titulo:"Playfair Display",Georgia,serif;
  --f-curta:"Poppins",Arial,sans-serif;
  --f-texto:"Lato",Arial,sans-serif;
  --raio:4px; --raio-medio:16px;
  --margem:24px; --coluna:600px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--papel);color:var(--marinho);font:400 17px/1.6 var(--f-texto);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
a{color:var(--azul)}
p,li{text-wrap:pretty}
h1,h2{color:var(--azul);font-family:var(--f-titulo);font-weight:500;letter-spacing:-.01em;line-height:1.1;text-wrap:balance}
strong{font-weight:700}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--dourado);outline-offset:3px}

/* topo e rodapé */
.topo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px var(--margem) 0;max-width:calc(var(--coluna) + 2*var(--margem));width:100%;margin:0 auto}
.marca{font:600 13px var(--f-curta);letter-spacing:.12em;text-transform:uppercase;color:var(--azul);text-decoration:none}
.voltar{background:none;border:0;cursor:pointer;font:500 14px var(--f-curta);color:var(--azul);padding:10px 4px;margin:-10px -4px}
.voltar[hidden]{display:none}
.progresso{height:3px;background:var(--linho);max-width:var(--coluna);margin:16px auto 0;width:calc(100% - 2*var(--margem));border-radius:2px;overflow:hidden}
.progresso span{display:block;height:100%;width:0;background:var(--azul);transition:width .25s ease}
.rodape{margin-top:auto;padding:32px var(--margem) calc(28px + env(safe-area-inset-bottom));text-align:center;font:500 12px/1.8 var(--f-curta);color:var(--suave)}
.rodape a{color:var(--suave)}

/* tela */
.tela{width:100%;max-width:calc(var(--coluna) + 2*var(--margem));margin:0 auto;padding:32px var(--margem) 24px}
.tela h1{font-size:clamp(30px,8vw,44px);outline:none}
.tela h1.pergunta{font-size:clamp(28px,7vw,36px)}
.rotulo{font:500 12px var(--f-curta);letter-spacing:.08em;text-transform:uppercase;color:var(--azul);margin-bottom:14px}
.linha-base::after{content:"";display:block;width:clamp(44px,14vw,120px);height:3px;margin-top:.35em;background:var(--azul)}
.tela p{margin-top:16px}
.tela .apoio{font:500 16px/1.45 var(--f-curta);color:var(--azul);margin-top:14px}
.ajuda{display:block;color:var(--suave);font-size:15px;margin-top:8px}

/* botões */
.botao{display:block;width:100%;background:var(--azul);color:var(--papel);font:600 16px var(--f-curta);text-decoration:none;
  padding:17px 24px;border-radius:var(--raio);border:0;cursor:pointer;text-align:center;margin-top:28px}
.botao:hover{background:var(--marinho)}
.botao[disabled]{opacity:.45;cursor:default}
@media (min-width:640px){ .botao{display:inline-block;width:auto;min-width:240px} }

/* opções de toque rápido */
.opcoes{list-style:none;margin-top:24px;display:grid;gap:10px}
.opcao{display:flex;align-items:center;gap:14px;width:100%;min-height:58px;padding:14px 16px;text-align:left;cursor:pointer;
  background:#fff;border:1px solid rgba(40,68,116,.28);border-radius:var(--raio);font:400 17px/1.35 var(--f-texto);color:var(--marinho);
  transition:background .12s ease,border-color .12s ease;-webkit-tap-highlight-color:transparent}
.opcao:hover{border-color:var(--azul)}
.opcao .marcador{flex:0 0 22px;width:22px;height:22px;border:1.5px solid var(--azul);border-radius:50%;display:grid;place-items:center}
.opcao.multipla .marcador{border-radius:var(--raio)}
.opcao[aria-pressed="true"],.opcao[aria-checked="true"]{background:var(--azul);border-color:var(--azul);color:var(--papel)}
.opcao[aria-pressed="true"] .marcador,.opcao[aria-checked="true"] .marcador{border-color:var(--papel)}
.opcao[aria-pressed="true"] .marcador::after,.opcao[aria-checked="true"] .marcador::after{content:"";width:10px;height:10px;background:var(--papel);border-radius:inherit}
.opcao.multipla[aria-checked="true"] .marcador::after{width:11px;height:6px;background:none;border:solid var(--papel);border-width:0 0 2px 2px;border-radius:0;transform:rotate(-45deg) translate(1px,-1px)}

/* campos */
.campo{margin-top:22px}
.campo label{display:block;font:600 15px var(--f-curta);color:var(--azul)}
.campo input[type=text],.campo input[type=email],.campo input[type=tel]{width:100%;margin-top:8px;padding:14px 16px;font:400 18px var(--f-texto);color:var(--marinho);
  background:#fff;border:1px solid rgba(40,68,116,.4);border-radius:var(--raio)}
.campo input:focus-visible{outline:3px solid var(--dourado);outline-offset:1px}
.consentimento{display:flex;gap:14px;align-items:flex-start;margin-top:24px;padding:16px;background:var(--linho);border-radius:var(--raio);cursor:pointer;font-size:16px;line-height:1.45}
.consentimento input{flex:0 0 22px;width:22px;height:22px;margin-top:1px;accent-color:var(--azul)}
.aviso-gratis{margin-top:20px;font-size:16px}
.erro{color:var(--erro);font-size:15px;margin-top:14px}
.escondido{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.miuda{font-size:14px;color:var(--suave);margin-top:14px}

/* resultado */
.resultado .resumo{font-size:18px}
.legenda{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:28px;font:500 13px var(--f-curta);color:var(--marinho)}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.ponto{display:inline-block;width:12px;height:12px;border-radius:50%;flex:0 0 12px}
.c-inteira{background:var(--azul)} .c-invisivel{background:var(--rosa)} .c-dono{background:var(--linho)} .c-fora{background:var(--papel);box-shadow:inset 0 0 0 1px rgba(40,68,116,.35)}
.mapa{display:grid;gap:14px;margin-top:16px}
@media (min-width:640px){ .mapa{grid-template-columns:1fr 1fr} }
.area{border-radius:var(--raio-medio);overflow:hidden;background:#fff;border:1px solid rgba(40,68,116,.14)}
.area header{padding:12px 16px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.area header b{font:600 16px var(--f-curta)}
.area header small{font:500 12px var(--f-curta);letter-spacing:.04em}
.area.inteira header{background:var(--azul);color:var(--papel)}
.area.invisivel header{background:var(--rosa);color:var(--marinho)}
.area.dono header{background:var(--linho);color:var(--azul)}
.area.fora header{background:var(--papel);color:var(--azul);border-bottom:1px solid rgba(40,68,116,.14)}
.area ul{list-style:none;padding:6px 16px 12px}
.area li{display:flex;gap:10px;align-items:flex-start;padding:8px 0;font-size:15px;line-height:1.4}
.area li+li{border-top:1px solid rgba(40,68,116,.08)}
.area li .ponto{margin-top:4px}
.area li em{display:block;font-style:normal;font-size:13px;color:var(--suave);margin-top:2px}
.secao{margin-top:44px}
.secao h2{font-size:clamp(28px,6.5vw,34px)}
.secao h2+p{margin-top:14px}
.secao .bloco-linho{background:var(--linho);border-radius:var(--raio-medio);padding:20px;margin-top:20px}
.secao .bloco-linho p:first-child{margin-top:0}
.primeira{margin-top:44px;padding:24px 20px;border:1px solid var(--azul);border-radius:var(--raio-medio);background:#fff}
.primeira h2{font-size:clamp(28px,6.5vw,32px)}
.primeira ol{margin:16px 0 0 1.2em}
.primeira li{margin-top:10px}
.copia{margin-top:36px;padding-top:20px;border-top:1px solid var(--linho)}
.fecho{margin-top:20px}

@media (prefers-reduced-motion:reduce){ .progresso span,.opcao{transition:none} }