/* ═══ Daniel Urbano Advogados — Diagnóstico de Blindagem Jurídica ═══════
   A paleta e a tipografia foram lidas do CSS do site institucional:
     navy  #00152B  — cor de todos os títulos e do cabeçalho
     ciano #61D0E1  — cor de ação (botão "entre em contato")
     texto #333333
     Crimson Pro Light (no site, sob o apelido "Crimson Nova") nos títulos
     — o site carrega só essa face; aqui vão 300 e 600, e nada mais
     IBM Plex Sans no corpo · Open Sans 600 caixa-alta nos botões

   ⚠️ O ciano rende 1.81:1 sobre branco — reprova qualquer critério de
   contraste. Por isso ele nunca aparece como texto sobre fundo claro: só
   como preenchimento de botão com texto navy (10.17:1) e sobre o navy.
   Onde o ciano precisa virar texto sobre branco, entra o --ciano-esc
   (#1F7C8C, 4.86:1). Ver README > "Identidade visual".                  */

:root {
  --navy:      #00152B;
  --navy-2:    #062744;
  --ciano:     #61D0E1;
  --ciano-cl:  #96D2E1;
  --ciano-esc: #1F7C8C;   /* único ciano legível sobre branco */
  --tinta:     #333333;
  --tinta-2:   #5A6572;   /* 5.93:1 sobre branco */
  --papel:     #FFFFFF;
  --papel-2:   #F4F7F9;
  --linha:     #DDE5EA;   /* decorativa: nunca carrega texto */
  --linha-f:   #C3D0D9;

  /* faixas do índice — todas conferidas em AA sobre branco e sobre papel-2 */
  --critica:     #B3261E;
  --alta:        #A34A05;
  --parcial:     #7A5D00;
  --consolidada: #16704A;

  --raio-pill: 35px;
  --raio:      10px;
  --t:         260ms;
  --toque:     48px;
  --largura:   1140px;   /* mesma largura de contêiner do site */
}

@media (prefers-reduced-motion: reduce) {
  :root { --t: 1ms; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important;
      scroll-behavior: auto !important; }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 16px/1.6 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.em-tela { background: var(--papel-2); }

h1, h2, h3, h4 { margin: 0; color: var(--navy); font-weight: 400; }
a { color: var(--ciano-esc); }
img { max-width: 100%; }

.kicker {
  margin: 0 0 10px;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-2); font-weight: 600;
}

/* ─── botões ────────────────────────────────────────────────────────
   Formato do site: pílula de 35px, caixa-alta, Open Sans 600, ls 1px. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--toque); padding: 15px 30px;
  border: 0; border-radius: var(--raio-pill);
  font: 600 14px/1.2 'Open Sans', 'IBM Plex Sans', sans-serif;
  letter-spacing: 1px; text-transform: uppercase; text-decoration: none;
  text-align: center; cursor: pointer;
  transition: background var(--t), transform var(--t), box-shadow var(--t);
}
.btn-acao { background: var(--ciano); color: var(--navy); }
.btn-acao:hover { background: var(--ciano-cl); transform: translateY(-1px); }
.btn-acao:active { transform: none; }
.btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.btn[disabled] { opacity: .55; cursor: progress; transform: none; }

/* ═══════════════════════════════════════════════════════════════════
   SEÇÃO 1 — HERO
   ═══════════════════════════════════════════════════════════════════ */
.hero {
  position: relative; overflow: hidden;
  background: var(--navy); color: #fff;
  padding: 0 0 clamp(48px, 9vw, 96px);
}
/* Colunata: eco do grafismo de pilares que o site usa no rodapé do herói.
   Puramente decorativa e em opacidade muito baixa — não compete com o texto. */
.hero-fundo {
  position: absolute; inset: auto 0 0 0; height: 58%;
  pointer-events: none; opacity: .22;
  background: repeating-linear-gradient(90deg,
      var(--ciano) 0 22px, transparent 22px 54px);
  /* a máscara faz as colunas nascerem do rodapé e sumirem antes do texto */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 78%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 78%);
}
.hero > * { position: relative; z-index: 1; }

.faixa {
  max-width: var(--largura); margin: 0 auto;
  padding: 22px 20px 0;
}
.logo { width: 152px; height: auto; display: block; }

.hero-in {
  max-width: var(--largura); margin: 0 auto;
  padding: clamp(40px, 7vw, 80px) 20px 0;
  display: grid; gap: 48px; align-items: center;
}
@media (min-width: 900px) {
  .hero-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

/* ─── cartão de amostra do resultado ────────────────────────────────
   Só no desktop: no celular ele empurraria o botão para baixo da dobra,
   que é justamente onde a conversão morre. */
.hero-demo {
  display: none;
  padding: 30px 26px 26px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(150,210,225,.28);
  border-radius: 14px;
  text-align: center;
}
@media (min-width: 900px) { .hero-demo { display: block; } }
.demo-rot {
  margin: 0 0 18px; font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: #93A6B7;
}
.demo-anel { position: relative; width: 132px; height: 132px; margin: 0 auto; display: grid; place-items: center; }
.demo-anel svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.demo-anel .t { fill: none; stroke: rgba(255,255,255,.15); stroke-width: 8; }
.demo-anel .v {
  fill: none; stroke: var(--ciano); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 326.7; stroke-dashoffset: 137.2;   /* 58 de 100 */
}
.demo-num { position: absolute; display: flex; align-items: baseline; gap: 2px; }
.demo-num strong {
  font-family: 'Crimson Pro', Georgia, serif; font-size: 46px; font-weight: 600;
  line-height: 1; color: #fff;
}
.demo-num span { font-size: 13px; color: #93A6B7; }
.demo-faixa {
  margin: 14px 0 20px; font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 300; font-size: 20px; color: var(--ciano-cl);
}
.demo-lista { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.12); }
.demo-lista li {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; font-size: 13.5px; color: #C9D6E1; text-align: left;
}
.demo-lista i {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-size: 11px;
  background: rgba(97,208,225,.16); color: var(--ciano);
}
.hero .kicker { color: var(--ciano); }
.hero h1 {
  max-width: 18ch;
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 300;
  font-size: clamp(32px, 6.2vw, 58px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: #fff;
}
.hero .sub {
  max-width: 56ch; margin: 22px 0 0;
  font-size: clamp(15px, 1.9vw, 18px);
  color: #C9D6E1;
}
.hero .btn { margin: 32px 0 0; }
.credibilidade {
  margin: 18px 0 0; font-size: 12.5px; color: #93A6B7; max-width: 60ch;
}

/* ═══════════════════════════════════════════════════════════════════
   SEÇÃO 2 — O QUE VOCÊ VAI DESCOBRIR
   ═══════════════════════════════════════════════════════════════════ */
.descobrir {
  max-width: var(--largura); margin: 0 auto;
  padding: clamp(48px, 8vw, 90px) 20px;
}
.titulo-secao {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 300; font-size: clamp(26px, 4vw, 40px); line-height: 1.15;
  margin-bottom: 34px;
}
.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cards li {
  padding: 28px 24px;
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  border-top: 3px solid var(--ciano);
}
.cards .ico { width: 30px; height: 30px; color: var(--ciano-esc); display: block; }
.cards h3 {
  margin: 16px 0 8px;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 22px; font-weight: 600; line-height: 1.2;
}
.cards p { margin: 0; font-size: 14.5px; color: var(--tinta-2); }

.segundo-cta { margin-top: 40px; }
.segundo-cta .nota { margin: 12px 0 0; font-size: 13px; color: var(--tinta-2); }

/* ═══════════════════════════════════════════════════════════════════
   RODAPÉ DA LANDING
   ═══════════════════════════════════════════════════════════════════ */
.rodape {
  background: var(--navy); color: #B9C6D2;
  padding: clamp(40px, 6vw, 64px) 20px;
}
.logo-rodape { width: 138px; height: auto; display: block; margin: 0 auto 32px; opacity: .9; }
.rodape-cols {
  max-width: var(--largura); margin: 0 auto;
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.rodape-cols h4 {
  color: var(--ciano); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600; margin-bottom: 8px;
}
.rodape-cols p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.55; }
.rodape-cols a { color: #fff; text-decoration: none; }
.rodape-cols a:hover { text-decoration: underline; }
.rodape-legal {
  max-width: var(--largura); margin: 32px auto 0;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: 12px; line-height: 1.7; color: #93A6B7;
}
.rodape-legal a { color: var(--ciano-cl); }

/* ═══════════════════════════════════════════════════════════════════
   SEÇÃO 3 — QUIZ (substitui a tela inteira)
   ═══════════════════════════════════════════════════════════════════ */
#progresso {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: 4px; background: var(--linha);
}
#progresso i {
  display: block; height: 100%; width: 0;
  /* preenchimento navy, não ciano: sobre o trilho claro o ciano rende 1.4:1
     e some. O navy rende 14.7:1. */
  background: var(--navy);
  transition: width var(--t) ease;
}

.entra { animation: entra var(--t) cubic-bezier(.22,.61,.36,1) both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.quiz {
  min-height: 100dvh;
  max-width: 760px; margin: 0 auto;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
.quiz-topo {
  display: flex; align-items: center; gap: 14px;
  min-height: 40px; flex: 0 0 auto;
}
.voltar {
  margin-left: -8px; padding: 10px 8px; min-height: 40px;
  border: 0; background: transparent; color: var(--tinta-2);
  font: 500 13.5px 'IBM Plex Sans', sans-serif; cursor: pointer;
  border-radius: 6px;
}
.voltar:hover { color: var(--navy); background: #fff; }
.voltar:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.contador {
  margin-left: auto; font-size: 10.5px; color: var(--tinta-2);
  letter-spacing: .18em; text-transform: uppercase;
}

.quiz-corpo {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center;
  padding: 24px 0;
}
/* O numeral da pergunta saiu junto com o contador: qualquer número na tela
   vira denominador na cabeça de quem responde. */
.q-txt {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 300;
  font-size: clamp(23px, 4.4vw, 38px);
  line-height: 1.22;
  letter-spacing: -.005em;
  max-width: 22ch;
}

/* SIM/NÃO: dois alvos iguais, meia largura cada, à altura do polegar.
   A simetria é deliberada — dar destaque visual a um dos dois enviesaria
   a resposta e o índice inteiro perderia o sentido. */
.quiz-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 0 0 auto; }
.resposta {
  min-height: 62px; padding: 16px 12px;
  border: 1.5px solid var(--linha-f); border-radius: var(--raio-pill);
  background: #fff; color: var(--navy);
  font: 600 16px 'Open Sans', 'IBM Plex Sans', sans-serif;
  letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.resposta:hover { border-color: var(--navy); }
.resposta:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.resposta.marcada { background: var(--navy); border-color: var(--navy); color: #fff; }

.quiz-pe {
  margin: 18px 0 0; font-size: 12.5px; color: var(--tinta-2); text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   SEÇÕES 4 e 5 — FORMULÁRIO E RESULTADO
   ═══════════════════════════════════════════════════════════════════ */
.form-tela, .resultado {
  min-height: 100dvh;
  padding: clamp(24px, 5vw, 56px) 20px calc(40px + env(safe-area-inset-bottom));
}
.caixa {
  max-width: 720px; margin: 0 auto;
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: clamp(24px, 4.5vw, 44px);
}
.titulo {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 300; font-size: clamp(26px, 4.4vw, 40px); line-height: 1.15;
}
.sub { margin: 10px 0 0; color: var(--tinta-2); font-size: 15px; }
.texto { margin: 16px 0 0; font-size: 15.5px; line-height: 1.65; }
.texto.grande { font-size: 16.5px; }

/* Duas colunas fixas no desktop: com seis campos são três linhas exatas,
   sem sobra nem campo órfão. O cliente reclamou do tamanho do formulário —
   metade do ganho veio de tirar campos, metade de encurtar a grade. */
.grade {
  display: grid; gap: 13px 14px; margin: 22px 0 0;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .grade { grid-template-columns: 1fr 1fr; } }
.campo label {
  display: block; margin-bottom: 4px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-2); font-weight: 600;
}
.campo input, .campo select {
  width: 100%; min-height: var(--toque); padding: 10px 13px;
  border: 1px solid var(--linha-f); border-radius: 6px;
  background: #fff; color: var(--tinta);
  font: 400 16px 'IBM Plex Sans', sans-serif;   /* 16px evita o zoom do iOS */
  transition: border-color var(--t), box-shadow var(--t);
}
.campo select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6572' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  padding-right: 34px;
}
.campo input:focus, .campo select:focus {
  outline: 0; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(97, 208, 225, .35);
}
.campo input::placeholder { color: #8C99A5; }
.campo.invalido input, .campo.invalido select { border-color: var(--critica); }

.check {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--tinta-2);
  cursor: pointer;
}
.check input {
  flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0;
  accent-color: var(--navy); cursor: pointer;
}
.check.invalido { color: var(--critica); }
.check.invalido input { outline: 2px solid var(--critica); outline-offset: 2px; }

.erro { margin: 14px 0 0; min-height: 20px; color: var(--critica); font-size: 13.5px; }
.erro:empty { min-height: 0; margin: 0; }

.acoes { margin: 20px 0 0; }
.acoes .btn { width: 100%; }

/* ─── placar ───────────────────────────────────────────────────────── */
.placar {
  position: relative; width: 150px; height: 150px; margin: 0 auto 22px;
  display: grid; place-items: center;
}
.anel { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel .trilho { fill: none; stroke: var(--linha); stroke-width: 9; }
.anel .valor {
  fill: none; stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(.22,.61,.36,1);
}
.anel.cor-critica     .valor { stroke: var(--critica); }
.anel.cor-alta        .valor { stroke: var(--alta); }
.anel.cor-parcial     .valor { stroke: var(--parcial); }
.anel.cor-consolidada .valor { stroke: var(--consolidada); }

.placar-num {
  position: absolute; display: flex; align-items: baseline; gap: 2px;
  font-variant-numeric: tabular-nums;
}
.placar-num strong {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 54px; font-weight: 600; line-height: 1; color: var(--navy);
}
.placar-num span { font-size: 15px; color: var(--tinta-2); }

.resultado .kicker { text-align: center; }
.rotulo-faixa { text-align: center; }
.faixa-critica     ~ .rotulo-faixa { color: var(--critica); }
.faixa-alta        ~ .rotulo-faixa { color: var(--alta); }
.faixa-parcial     ~ .rotulo-faixa { color: var(--parcial); }
.faixa-consolidada ~ .rotulo-faixa { color: var(--consolidada); }

/* ─── gatilho vermelho ─────────────────────────────────────────────── */
.alerta {
  margin: 24px 0 0; padding: 18px 20px;
  border-left: 3px solid var(--critica);
  background: #FDF3F2; border-radius: 0 var(--raio) var(--raio) 0;
}
.alerta-rot {
  display: block; margin-bottom: 6px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--critica);
}
.alerta p { margin: 0; font-size: 15px; line-height: 1.6; }

/* ─── trilhas ──────────────────────────────────────────────────────── */
.titulo-bloco {
  margin: 38px 0 0;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 24px; font-weight: 600;
  padding-bottom: 10px; border-bottom: 1px solid var(--linha);
}
.trilhas { list-style: none; margin: 0; padding: 0; }
.trilhas li { padding: 22px 0; border-bottom: 1px solid var(--linha); }
.trilhas li:last-child { border-bottom: 0; padding-bottom: 4px; }
.trilha-cab { display: flex; align-items: center; gap: 12px; }
.trilha-n {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--papel-2); border: 1px solid var(--linha-f);
  color: var(--tinta-2); font-size: 13px; font-weight: 600;
}
.trilhas .destaque .trilha-n { background: var(--navy); border-color: var(--navy); color: var(--ciano); }
.trilha-cab h4 {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 21px; font-weight: 600; line-height: 1.2;
}
.areas {
  margin: 10px 0 0; font-size: 12.5px; color: var(--tinta-2);
  letter-spacing: .01em;
}

.passos { margin: 20px 0 0; padding: 0; list-style: none; }
.passos li {
  position: relative; padding: 0 0 0 26px; margin-bottom: 12px;
  font-size: 15px; line-height: 1.6;
}
.passos li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 14px; height: 2px; background: var(--ciano-esc);
}

/* ─── CTA final ────────────────────────────────────────────────────── */
.cta {
  margin: 30px 0 0; padding: 28px 24px;
  background: var(--navy); border-radius: var(--raio); text-align: center;
}
.cta .btn { width: 100%; }
.cta-nota { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: #B9C6D2; }

/* A repetição do fim não pode ter o mesmo peso do painel de cima: dois blocos
   navy idênticos na mesma tela viram parede. */
.cta-leve {
  margin: 30px 0 0; padding: 0; background: none;
  border-top: 1px solid var(--linha); padding-top: 26px; border-radius: 0;
}
.cta-leve .cta-nota { margin-top: 10px; color: var(--tinta-2); font-size: 12.5px; }

/* ─── artigos ──────────────────────────────────────────────────────── */
.artigos ul { margin: 16px 0 0; padding: 0; list-style: none; }
.artigos li { margin-bottom: 12px; }
.artigos a {
  font-size: 14.5px; line-height: 1.45; color: var(--navy);
  text-decoration: none; border-bottom: 1px solid var(--linha-f);
  padding-bottom: 1px;
}
.artigos a:hover { color: var(--ciano-esc); border-bottom-color: var(--ciano-esc); }

/* ─── trava do gate parcial ────────────────────────────────────────── */
.trava {
  margin: 34px 0 0; padding: 26px 22px;
  background: var(--papel-2); border: 1px solid var(--linha); border-radius: var(--raio);
}
.trava .titulo-bloco { margin-top: 0; }

/* ─── rodapé mínimo do resultado ───────────────────────────────────── */
.rodape-min {
  margin: 36px 0 0; padding-top: 20px; border-top: 1px solid var(--linha);
  font-size: 12px; line-height: 1.65; color: var(--tinta-2);
}
.rodape-min p { margin: 0 0 4px; }
.rodape-min b { color: var(--navy); font-weight: 600; }
.rodape-min .tels { margin-top: 8px; }
.rodape-min .legal { margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — a maior parte do tráfego vem de Instagram e LinkedIn no
   celular (seção 9.2). Alvo: 360x640 sem rolagem na tela de pergunta.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* logo menor: em 360x640 cada pixel gasto aqui empurra o botão para
     baixo da dobra, que é onde a conversão morre */
  .logo { width: 124px; }
  .faixa { padding-top: 18px; }
  .caixa { padding: 22px 18px; border-radius: 0; border-left: 0; border-right: 0; margin: 0 -20px; }
  .form-tela, .resultado { padding-left: 20px; padding-right: 20px; }
  .grade { grid-template-columns: 1fr; }
  .q-txt { max-width: none; }
  .quiz-corpo { padding: 18px 0; }
  .resposta { min-height: 58px; font-size: 15px; }
  .cta { padding: 22px 18px; }
  .cta .btn { padding: 15px 18px; font-size: 12.5px; letter-spacing: .6px; }
  .titulo-bloco { font-size: 21px; }
  .placar { width: 128px; height: 128px; }
  .placar-num strong { font-size: 46px; }
}

/* telas muito baixas: o texto da pergunta cede antes dos botões */
@media (max-height: 620px) {
  .q-txt { font-size: clamp(20px, 5.2vw, 26px); }
  .quiz-corpo { padding: 14px 0; }
  .quiz-pe { display: none; }
}