/* app.css · Calculadora do fim da escala 6x1 · Dotte Ponto
   Estrutura da landing original (jornal, cartões com borda e sombra) com a identidade do Manual de Marca. */

/* Fontes servidas pelo próprio site (licença OFL em /fontes): nenhum acesso ao Google antes do aceite de cookies */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fontes/space-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fontes/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fontes/space-grotesk-latin-700-normal.woff2') format('woff2'); }
/* Open Sans (texto): a mesma família de texto do g1; letras abertas e espaçadas para ler no celular. Space Grotesk fica nos títulos. */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fontes/open-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fontes/open-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fontes/open-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fontes/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fontes/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  --amarelo: #FFD400;
  --amarelo-claro: #FFF4B8;
  --preto: #1D1D1B;
  --tinta: #2B2D2F;
  --cinza: #5C5B56;
  --cinza-claro: #E8E6DF;
  --papel: #FBFAF7;
  --branco: #FFFFFF;
  --vermelho: #D6453A;
  --vermelho-claro: #FBE7E5;
  --laranja: #9A5B00;
  --laranja-claro: #FFF1D6;
  --verde: #1F7A47;
  --verde-claro: #E3F4EA;
  --raio: 12px;
  --sombra: 4px 4px 0 var(--preto);
  --fonte: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --titulo: 'Space Grotesk', 'Open Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--fonte); color: var(--tinta); background: var(--papel); line-height: 1.6; font-size: 16px; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--preto); }
h1, h2, h3 { font-family: var(--titulo); color: var(--preto); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .5em; }
p { line-height: 1.6; }
p { margin: 0 0 .75em; }
[hidden] { display: none !important; }
.caixa { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -9999px; top: 0; background: var(--amarelo); padding: 8px 12px; z-index: 50; }
.pular:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--preto); outline-offset: 2px; }

/* rótulo com o ponto amarelo, como no Painel */
.rotulo { font-family: var(--fonte); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); margin-bottom: .5em; }
.rotulo::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amarelo); border: 1px solid var(--preto); margin-right: 6px; vertical-align: 1px; }
.marca { background: var(--amarelo); padding: 0 .2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.titulo-secao { font-size: clamp(28px, 6.5vw, 42px); font-weight: 700; margin-bottom: .4em; }
.subtitulo { color: var(--cinza); font-size: 17px; margin-bottom: 1.25em; }

/* botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 16px/1.25 var(--fonte); color: var(--preto); background: var(--amarelo); border: 2px solid var(--preto); border-radius: 999px; padding: 13px 24px; box-shadow: var(--sombra); text-decoration: none; cursor: pointer; transition: transform .08s, box-shadow .08s; }
.botao:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--preto); }
.botao:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--preto); }
.botao[disabled] { opacity: .6; cursor: progress; }
.botao-pequeno { font-size: 14px; padding: 8px 14px; box-shadow: 2px 2px 0 var(--preto); }
.botao-secundario { background: var(--branco); }
.botao-escuro { background: var(--preto); color: var(--amarelo); }
.botao-contorno { background: transparent; }
.botao-largo { width: 100%; }
.link-botao { background: none; border: 0; padding: 0; font: inherit; color: var(--preto); text-decoration: underline; cursor: pointer; }

/* topo */
.topo { position: sticky; top: 0; z-index: 20; background: var(--branco); border-bottom: 2px solid var(--preto); }
.topo-linha { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.topo-logo img { width: 104px; height: auto; }
.topo-nav { display: flex; align-items: center; gap: 14px; }
.topo-nav > a:not(.botao) { display: none; text-decoration: none; font-weight: 500; }
.faixa-vendedor { background: var(--preto); color: var(--amarelo); font: 500 13px/1.4 var(--fonte); padding: 6px 0; }

/* capa */
.capa { padding: 22px 0 26px; }
.jornal { display: none; }
.capa-grade { display: grid; gap: 28px; }
.jornal { background: var(--branco); border: 2px solid var(--preto); box-shadow: 6px 6px 0 var(--preto); padding: 18px 18px 14px; transform: rotate(-1deg); }
.jornal-topo { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; border-bottom: 3px double var(--preto); padding-bottom: 8px; margin-bottom: 12px; }
.jornal-nome { font: 700 22px/1 var(--titulo); letter-spacing: .14em; }
.jornal-edicao { font: 500 11px/1.6 var(--mono); text-transform: uppercase; color: var(--cinza); }
.jornal-manchete { font-family: var(--titulo); color: var(--preto); font-size: clamp(28px, 8vw, 44px); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; margin-bottom: .4em; }
.jornal-linha { font-size: 16px; border-top: 1px solid var(--cinza-claro); padding-top: 10px; }
.jornal-fonte { font: 400 11px/1.4 var(--mono); color: var(--cinza); margin: 0; }
.capa-titulo { font-size: clamp(30px, 7.6vw, 48px); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; margin-bottom: .45em; }
.capa-texto p { font-size: 18px; line-height: 1.55; color: var(--tinta); }

/* prazos */
.prazos { background: var(--preto); color: var(--branco); padding: 18px 0; }
.contador { font-size: 16px; margin: 0 0 10px; }
.contador strong { font-family: var(--titulo); font-size: 34px; color: var(--amarelo); font-weight: 700; vertical-align: -4px; margin-right: 4px; }
.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.linha-tempo li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.lt-quando { font: 700 12px/1.5 var(--fonte); letter-spacing: .04em; color: #B9B7AF; min-width: 92px; text-transform: uppercase; }
.lt-destaque .lt-quando { color: var(--amarelo); }
.lt-destaque .lt-o-que { font-weight: 700; }

/* cartões */
.cartao { background: var(--branco); border: 2px solid var(--preto); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px; }
.cartao-destaque { background: var(--amarelo); }
.cartao-destaque .rotulo { color: var(--preto); }

/* formulários */
.campo { margin: 0 0 14px; border: 0; padding: 0; min-width: 0; }
.campo label, .campo legend { display: block; font-weight: 600; font-size: 15px; line-height: 1.4; margin-bottom: 8px; }
input, select { font: 400 16px/1.3 var(--fonte); color: var(--preto); background: var(--branco); border: 1.5px solid #B9B7AF; border-radius: 8px; padding: 10px 12px; width: 100%; min-height: 44px; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--preto); flex: none; }
input:focus, select:focus { border-color: var(--preto); outline: 2px solid var(--amarelo); outline-offset: 0; }
input[aria-invalid=true] { border-color: var(--vermelho); background: var(--vermelho-claro); }
.ajuda { font-size: 14px; line-height: 1.5; color: var(--cinza); margin: 8px 0 0; }
.opcoes-linha { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; font-size: 15px; line-height: 1.4; border: 1.5px solid #B9B7AF; border-radius: 999px; padding: 8px 14px; background: var(--branco); cursor: pointer; }
.opcao:has(input:checked) { border-color: var(--preto); background: var(--amarelo-claro); }
.opcao-pequena { border: 0; padding: 6px 0 0; background: none; font-size: 14px; }
.opcao-pequena:has(input:checked) { background: none; }
.erro { color: var(--vermelho); font-weight: 600; font-size: 15px; line-height: 1.45; }

/* calculadora */
.calculadora { padding: 40px 0; }
.opcoes-gerais { margin-bottom: 20px; }
.setores { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 16px; }
.setores > *, .dia > *, .duas-colunas > *, .grade-vendedor > *, .contato-grade > *, .capa-grade > * { min-width: 0; }
input[type=time] { min-width: 0; }
.setor-cabeca { display: flex; gap: 10px; align-items: flex-end; }
.setor-cabeca .campo { flex: 1; }
.setor-remover { flex: none; margin-bottom: 16px; }
.duas-colunas { display: grid; gap: 0 12px; grid-template-columns: 1fr 1fr; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip { font: 600 14px/1.25 var(--fonte); border: 1.5px solid var(--preto); background: var(--branco); border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.chip.ativo { background: var(--preto); color: var(--amarelo); }
.dias { display: grid; gap: 8px; margin-bottom: 8px; }
.dia { display: grid; grid-template-columns: 58px 1fr 1fr 64px; gap: 6px; align-items: center; }
.dia-nome { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
.dia input[type=time], .dia input[type=number] { padding: 8px 6px; font-size: 15px; min-height: 40px; }
.dia.desligado input[type=time], .dia.desligado input[type=number] { opacity: .35; }
.dia-cab { display: grid; grid-template-columns: 58px 1fr 1fr 64px; gap: 6px; font: 500 11px/1.2 var(--fonte); color: var(--cinza); text-transform: uppercase; }
.total-semana { font: 500 14px/1.4 var(--fonte); margin: 4px 0 12px; }
.bloco { border-top: 1px dashed #B9B7AF; padding-top: 12px; margin-top: 12px; }
.bloco-titulo { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.dias-func .dia { grid-template-columns: 58px 1fr 1fr; }
.dias-func .dia-cab { grid-template-columns: 58px 1fr 1fr; }
.grade-vendedor { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.grade-vendedor label { font: 500 11px/1.2 var(--fonte); text-align: center; display: block; margin-bottom: 2px; }
.grade-vendedor input { padding: 8px 2px; text-align: center; font-size: 14px; min-height: 40px; }
details.mais summary { cursor: pointer; font-weight: 500; margin: 10px 0; }
.selo-vendedor { font: 500 11px/1 var(--fonte); background: var(--preto); color: var(--amarelo); border-radius: 4px; padding: 3px 6px; margin-left: 6px; vertical-align: 2px; }

/* resultado */
.resultado { padding: 40px 0; background: var(--branco); border-top: 2px solid var(--preto); border-bottom: 2px solid var(--preto); }
.fases-abas { display: inline-flex; border: 2px solid var(--preto); border-radius: 999px; overflow: hidden; margin-bottom: 18px; flex-wrap: wrap; }
.aba { font: 700 14px/1.25 var(--fonte); background: var(--branco); border: 0; padding: 10px 14px; cursor: pointer; color: var(--preto); }
.aba.ativa { background: var(--preto); color: var(--amarelo); }
.totais { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.total { border: 2px solid var(--preto); border-radius: var(--raio); padding: 12px; background: var(--papel); }
.total strong { display: block; font-family: var(--titulo); color: var(--preto); font-size: 24px; line-height: 1.2; margin-bottom: 2px; }
.total span { font-size: 14px; line-height: 1.4; color: var(--cinza); }
.res-setor { margin-bottom: 26px; }
.res-titulo { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 10px; }
.res-titulo h3 { font-size: 24px; margin: 0; }
.res-titulo .rotulo { margin: 0; }
.recomendacao { background: var(--amarelo); border: 2px solid var(--preto); border-radius: var(--raio); padding: 14px; box-shadow: var(--sombra); margin-bottom: 14px; }
.recomendacao strong { font-size: 19px; line-height: 1.35; display: block; margin-bottom: 6px; color: var(--preto); }
.metricas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.metrica { border: 1.5px solid var(--cinza-claro); border-radius: 10px; padding: 10px; }
.metrica strong { display: block; font-family: var(--titulo); color: var(--preto); font-size: 21px; line-height: 1.2; margin-bottom: 2px; }
.metrica span { font-size: 13px; line-height: 1.4; color: var(--cinza); }
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 14px; border: 1.5px solid var(--cinza-claro); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
th, td { padding: 9px 10px; line-height: 1.45; text-align: left; border-bottom: 1px solid var(--cinza-claro); vertical-align: top; }
th { font: 700 12px/1.3 var(--fonte); letter-spacing: .04em; text-transform: uppercase; color: var(--cinza); background: var(--papel); }
td.num, th.num { text-align: right; white-space: nowrap; }
tr.recomendado td { background: var(--amarelo-claro); font-weight: 500; }
.inviavel { color: var(--cinza); }
.avisos { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.avisos li { border-radius: 10px; padding: 12px 14px; font-size: 15px; line-height: 1.55; border: 1.5px solid; }
.avisos .risco { background: var(--vermelho-claro); border-color: var(--vermelho); }
.avisos .atencao { background: var(--laranja-claro); border-color: #E3B341; }
.avisos .info { background: var(--papel); border-color: var(--cinza-claro); }
.avisos .dica { background: var(--verde-claro); border-color: #8CCBA6; }
.regra { font: 500 11px/1 var(--fonte); border: 1px solid currentColor; border-radius: 4px; padding: 2px 5px; margin-left: 6px; white-space: nowrap; }
.nivel { font: 700 11px/1 var(--fonte); text-transform: uppercase; margin-right: 6px; }
.risco .nivel { color: var(--vermelho); }
.atencao .nivel { color: var(--laranja); }
.dica .nivel { color: var(--verde); }

/* grade de escala */
.grade-escala { margin: 6px 0 14px; position: relative; }
.grade-semana { margin-bottom: 12px; }
.grade-semana-titulo { font: 700 12px/1.3 var(--fonte); letter-spacing: .04em; text-transform: uppercase; color: var(--cinza); margin: 0 0 6px; }
.tabela-grade { font-size: 11px; table-layout: fixed; }
.tabela-grade th, .tabela-grade td { padding: 5px 1px; text-align: center; border: 1px solid var(--cinza-claro); }
.tabela-grade th:first-child, .tabela-grade td:first-child { width: 108px; text-align: left; padding-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-trab { background: var(--preto); color: var(--amarelo); font-weight: 700; }
.c-folga { background: var(--amarelo-claro); }
.c-fech { background: repeating-linear-gradient(45deg, #F1EFE8, #F1EFE8 4px, #E2DFD5 4px, #E2DFD5 8px); color: var(--cinza); }
.linha-nova td:first-child { font-weight: 700; }
.linha-presenca td { background: var(--papel); font-weight: 700; }
.bloqueio { position: relative; }
.bloqueio > .borrado { filter: blur(4px); pointer-events: none; user-select: none; }
.bloqueio-aviso { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; }
.bloqueio-aviso .cartao { max-width: 320px; text-align: center; }
.legenda { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; margin: 4px 0 8px; }
.legenda span { display: inline-flex; align-items: center; gap: 4px; }
.legenda i { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--cinza-claro); }

/* contato */
.contato { padding: 40px 0; }
.contato-grade { display: grid; gap: 24px; }
.lista-check { padding: 0; list-style: none; }
.lista-check li { padding-left: 32px; position: relative; margin-bottom: 10px; line-height: 1.5; }
.lista-check li::before { content: '✓'; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--amarelo); border: 1.5px solid var(--preto); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.campo-armadilha { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consentimento { border: 0; padding: 0; align-items: flex-start; font-size: 14px; line-height: 1.5; margin: 6px 0 14px; background: none; }
.consentimento:has(input:checked) { background: none; }
.turnstile { margin: 4px 0 10px; min-height: 0; }
.status-envio { margin-top: 12px; border-radius: 10px; padding: 12px 14px; font-size: 15px; line-height: 1.5; border: 1.5px solid; }
.status-envio.enviando { border-color: var(--cinza-claro); background: var(--papel); }
.status-envio.ok { border-color: var(--verde); background: var(--verde-claro); }
.status-envio.falha { border-color: var(--vermelho); background: var(--vermelho-claro); }
.girando { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--cinza-claro); border-top-color: var(--preto); border-radius: 50%; animation: gira .8s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes gira { to { transform: rotate(360deg); } }

/* recursos e chamada */
.recursos { padding: 40px 0; background: var(--papel); }
.grade-recursos { display: grid; gap: 14px; }
.grade-recursos h3 { font-size: 19px; margin-bottom: .35em; }
.grade-recursos p { margin: 0; color: var(--cinza); }
.chamada { background: var(--amarelo); border-top: 2px solid var(--preto); padding: 40px 0; text-align: center; }
.chamada h2 { font-size: clamp(26px, 6vw, 38px); }
.chamada-botoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 14px; }

/* rodapé */
.rodape { background: var(--preto); color: #D8D6CF; padding: 32px 0 90px; font-size: 14px; line-height: 1.6; }
.rodape a { color: var(--amarelo); }
.rodape img { margin-bottom: 14px; }
.premissas { margin: 12px 0; }
.premissas summary { cursor: pointer; color: var(--amarelo); font-weight: 500; }
.premissas div { margin-top: 10px; color: #D8D6CF; }
.premissas li { margin-bottom: 6px; }
.rodape-versao { font: 400 12px/1.4 var(--fonte); color: #9C9A92; }

/* cookies */
.aviso-cookies { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; background: var(--branco); border: 2px solid var(--preto); border-radius: var(--raio); box-shadow: var(--sombra); padding: 12px 14px; font-size: 14px; max-width: 560px; margin: 0 auto; }
.aviso-cookies p { margin-bottom: 8px; }
.aviso-botoes { display: flex; gap: 8px; }

@media (min-width: 720px) {
  .topo-nav > a:not(.botao) { display: inline; }
  .topo-logo img { width: 120px; }
  .capa { padding: 44px 0 48px; }
  .jornal { display: block; }
  .linha-tempo { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .linha-tempo li { flex-direction: column; gap: 2px; border-left: 3px solid #4A4944; padding-left: 10px; }
  .linha-tempo li.lt-destaque { border-color: var(--amarelo); }
  .capa-grade { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 48px; }
  .totais { grid-template-columns: repeat(4, 1fr); }
  .metricas { grid-template-columns: repeat(4, 1fr); }
  .contato-grade { grid-template-columns: 1fr 1fr; align-items: start; }
  .grade-recursos { grid-template-columns: repeat(3, 1fr); }
  .setores { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .tabela-grade { font-size: 13px; }
  .tabela-grade th:first-child, .tabela-grade td:first-child { width: 170px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print {
  .topo, .aviso-cookies, .calculadora, .contato, .recursos, .chamada { display: none; }
}

/* ================================================================ v1.1: passo a passo
   Uma pergunta por tela, com ícone, dica do que a resposta significa no negócio e "não sei" que usa o padrão do setor. */
.ic { display: inline-flex; width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.ic svg { width: 100%; height: 100%; }
label .ic, legend .ic, summary .ic, .rot .ic { margin-right: 8px; }
.selos { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.selos li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; background: var(--branco); border: 1.5px solid var(--preto); border-radius: 999px; padding: 6px 12px; }
.capa-texto .botao .ic { width: 20px; height: 20px; }

.assistente { max-width: 680px; margin: 0 auto; }
#calculadora, #resultado, #contato { scroll-margin-top: 72px; }
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; padding: 0; list-style: none; }
.passos li { font: 700 12px/1.3 var(--fonte); letter-spacing: .04em; text-transform: uppercase; color: var(--cinza); }
.passos li::before { content: ''; display: block; height: 6px; border-radius: 3px; background: var(--cinza-claro); margin-bottom: 6px; border: 1px solid #CFCCC2; }
.passos li.feito::before, .passos li.atual::before { background: var(--amarelo); border-color: var(--preto); }
.passos li.atual { color: var(--preto); font-weight: 700; }
.pergunta { padding: 22px 18px 24px; }
.pergunta-cab { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.pergunta-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--amarelo); border: 2px solid var(--preto); display: flex; align-items: center; justify-content: center; flex: none; }
.pergunta-ic .ic { width: 26px; height: 26px; }
.pergunta-cab h3 { font-size: clamp(23px, 5.8vw, 30px); line-height: 1.2; margin: 2px 0 6px; }
.pergunta-cab p { margin: 0; color: var(--cinza); font-size: 16px; line-height: 1.5; }

.op-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.op-grade.uma { grid-template-columns: minmax(0, 1fr); }
.op-cartao { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; font: inherit; color: var(--preto); background: var(--branco); border: 2px solid var(--preto); border-radius: var(--raio); padding: 14px 12px; cursor: pointer; min-height: 100%; transition: transform .08s, box-shadow .08s, background .08s; }
.op-cartao:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--preto); }
.op-cartao[aria-pressed=true] { background: var(--amarelo); box-shadow: var(--sombra); }
.op-cartao .op-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--amarelo-claro); border: 1.5px solid var(--preto); display: flex; align-items: center; justify-content: center; }
.op-cartao[aria-pressed=true] .op-ic { background: var(--branco); }
.op-cartao .op-ic .ic { width: 22px; height: 22px; }
.op-cartao strong { font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--preto); }
.op-cartao span.op-desc { font-size: 14px; color: var(--cinza); line-height: 1.45; }
.op-emoji { font-size: 34px; line-height: 1; font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; }
.op-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.op-selos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.op-selo { font: 600 12px/1.3 var(--fonte); border-radius: 6px; padding: 3px 7px; background: var(--papel); border: 1px solid var(--cinza-claro); color: #4A4944; }
.op-cartao[aria-pressed=true] .op-selo { background: var(--branco); }
.op-selo.impacto-alto { background: var(--vermelho-claro); border-color: #E9A39C; color: #8E2A22; }
.op-selo.impacto-medio { background: var(--laranja-claro); border-color: #E3B341; color: #6B4000; }
.op-selo.impacto-baixo { background: var(--verde-claro); border-color: #8CCBA6; color: #145A33; }
.fonte-selos { font: 400 12px/1.5 var(--fonte); color: var(--cinza); margin: 8px 0 0; }
.remover-setor { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; font-size: 14px; }
.op-grade.uma .op-cartao { flex-direction: row; align-items: center; gap: 12px; }
.op-grade.uma .op-cartao .op-texto { display: flex; flex-direction: column; gap: 2px; }

.dica-campo { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--tinta); background: var(--amarelo-claro); border-radius: 10px; padding: 12px 14px; margin: 10px 0 0; line-height: 1.55; }
.dica-campo .ic { color: var(--preto); margin-top: 2px; }
.campo-assist { margin-bottom: 22px; }
.campo-assist > label, .campo-assist > .rot { display: flex; align-items: center; font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--preto); margin-bottom: 10px; }
.dias-chips { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.dia-chip { font: 700 14px/1.1 var(--fonte); border: 2px solid var(--preto); background: var(--branco); color: var(--preto); border-radius: 10px; padding: 12px 0; cursor: pointer; }
.dia-chip[aria-pressed=true] { background: var(--preto); color: var(--amarelo); }
.horas-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.horas-par label { font-size: 14px; font-weight: 600; color: var(--cinza); display: block; margin-bottom: 6px; }
.chips-escolha { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-escolha .chip { font-size: 14px; padding: 9px 14px; }
.chips-escolha .chip[aria-pressed=true] { background: var(--preto); color: var(--amarelo); }
.interruptor { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; line-height: 1.4; cursor: pointer; margin: 4px 0 12px; }
.sub-bloco { border-left: 3px solid var(--amarelo); padding-left: 12px; margin: 6px 0 12px; }
.resumo-ao-vivo { font: 600 15px/1.55 var(--fonte); color: var(--tinta); background: var(--papel); border: 1.5px dashed #B9B7AF; border-radius: 10px; padding: 10px 12px; margin: 4px 0 14px; }
.resumo-ao-vivo.alerta { border-color: #E3B341; background: var(--laranja-claro); }
.contador-pessoas { display: grid; grid-template-columns: 56px 1fr 56px; gap: 8px; max-width: 280px; }
.contador-pessoas button { font: 700 24px/1 var(--fonte); border: 2px solid var(--preto); border-radius: 12px; background: var(--branco); cursor: pointer; min-height: 52px; display: flex; align-items: center; justify-content: center; }
.contador-pessoas button .ic { width: 22px; height: 22px; }
.contador-pessoas input { text-align: center; font-size: 22px; font-weight: 700; min-height: 52px; }
.nao-sei { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font: 600 15px/1.35 var(--fonte); background: var(--branco); border: 1.5px dashed var(--preto); border-radius: 999px; padding: 8px 12px; cursor: pointer; color: var(--preto); text-align: left; }
.nao-sei[aria-pressed=true] { background: var(--amarelo-claro); border-style: solid; }
.selo-padrao { display: inline-block; font: 500 11px/1.2 var(--fonte); text-transform: uppercase; background: var(--amarelo-claro); border: 1px solid #E3B341; border-radius: 4px; padding: 3px 6px; margin-left: 8px; vertical-align: 2px; }
.nav-passos { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.nav-passos .botao { flex: 1; max-width: 320px; margin-left: auto; }
.nav-passos .botao[aria-disabled=true] { opacity: .45; }
.erro-passo { margin: 10px 0 0; }
.lista-setores { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.lista-setores .chip { display: inline-flex; align-items: center; gap: 6px; }
.lista-setores .chip.ativo { background: var(--amarelo); color: var(--preto); }
.outro-setor { margin-top: 14px; border-top: 1px dashed #B9B7AF; padding-top: 14px; }
.outro-setor p { font-size: 15px; line-height: 1.5; color: var(--cinza); margin-bottom: 10px; }
.link-detalhado { text-align: center; margin: 18px 0 0; font-size: 15px; line-height: 1.5; }
.detalhado-rodape { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* resultado em linguagem simples */
.resumo-frase { background: var(--amarelo); border: 2px solid var(--preto); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px; margin-bottom: 18px; color: var(--preto); }
.resumo-frase p { margin: 0 0 8px; line-height: 1.55; }
.resumo-frase .horario-novo { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; background: var(--branco); border: 1.5px solid var(--preto); border-radius: 10px; padding: 8px 10px; margin: 8px 0; }
.resumo-frase .horario-novo .ic { margin-top: 3px; }
.resumo-frase .grande { font-size: clamp(19px, 4.8vw, 23px); font-weight: 700; line-height: 1.35; }
.aviso-estimativa { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; background: var(--branco); border: 1.5px solid #E3B341; border-radius: 10px; padding: 10px 12px; margin: 0 0 16px; }
.aviso-estimativa .ic { margin-top: 2px; }
.aviso-estimativa .link-botao { font-weight: 700; }
details.detalhes-setor { border: 1.5px solid var(--cinza-claro); border-radius: 10px; padding: 0 12px; margin-bottom: 14px; }
details.detalhes-setor > summary { cursor: pointer; font-weight: 700; padding: 12px 0; }
details.detalhes-setor[open] > summary { border-bottom: 1px dashed #B9B7AF; margin-bottom: 12px; }
.ajustes { margin-top: 10px; box-shadow: none; }
.ajustes > summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; }
.ajustes[open] > summary { margin-bottom: 14px; }
.ajustes legend, .ajustes label[for] { display: flex; align-items: flex-start; }

@media (min-width: 720px) {
  .op-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .op-grade.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-grade.uma { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-grade.uma .op-cartao { flex-direction: column; align-items: flex-start; }
  .assistente { max-width: 860px; }
  .pergunta { padding: 26px 28px; }
}