/* Conectland — site público.
   Estrutura: Stitch "Conectland Precision Industrial System" (cabeçalho fixo com ticker, herói 7/5 com painel
   Fast-Track, seções claras e escuras, contato 5/7).
   Linguagem visual: a do SISTEMA da Petra (DESIGN.md, "A Mesa de Despacho"): painéis marinho-noite sobre papel
   frio, cantos vivos (raio 0), campos só com linha embaixo, rótulos de instrumento em caixa-alta espaçada,
   Unbounded em títulos, números e botões, Onest no resto, verde-sinal só para a ação principal, plano em
   repouso (sombra só em quem flutua). Cores: tokens do DESIGN.md (paleta do site oficial da Petra).
   CSS puro: o CSP do domínio do site só libera Google Fonts, unpkg (Leaflet) e os tiles do OpenStreetMap.

   Layout (passada "layout" do Impeccable): leitura = título → painel de cadastro (a ação) → o resto. No celular
   o painel sobe para logo depois do título; no desktop a coluna da narrativa fica fixa enquanto o painel rola. */

/* Fallbacks com métrica compatível: a Unbounded é ~28% mais larga que a Arial (medido: 3712/2903 em 600,
   3529/2881 em 300) e a Onest ~5% (3820/3641). Com size-adjust a troca de fonte não desloca o layout. */
@font-face { font-family: 'Unbounded Fallback'; src: local('Arial'); font-weight: 600; size-adjust: 128%; }
@font-face { font-family: 'Unbounded Fallback'; src: local('Arial'); font-weight: 300; size-adjust: 122%; }
@font-face { font-family: 'Onest Fallback'; src: local('Arial'); font-weight: 400 500; size-adjust: 105%; }
:root {
  --verde-sinal: #5BC24A; --verde-petra: #1B870F;
  /* derivado do verde Petra só para TEXTO sobre papel frio (5,1:1; o #1B870F dá 4,26:1 e não passa AA em corpo pequeno) */
  --verde-texto: #18790D;
  --marinho-noite: #051230; --marinho-petra: #06163A;
  --papel: #F3F5F9; --branco: #FFFFFF; --cinza: #5F6877; --filete: #DDE1EA; --filete-escuro: rgba(243, 245, 249, .14);
  --vermelho: #D9534F; --ambar: #E0B04A; --erro: #B4453A;
  --texto-claro: rgba(243, 245, 249, .78); --texto-claro-2: rgba(243, 245, 249, .66);
  --fonte: 'Onest', 'Onest Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titulo: 'Unbounded', 'Unbounded Fallback', var(--fonte);
  /* papéis tipográficos do site público (rem: respeitam a fonte escolhida pelo visitante). Estende a escala do
     sistema (DESIGN.md, 14px de corpo para operadora): aqui a prosa é 16px e nada fica abaixo de 11px. */
  --t-micro: .6875rem;   /* 11px: rótulos e metadados em caixa-alta */
  --t-label: .75rem;     /* 12px: botões, rótulos que levam informação, notas */
  --t-small: .875rem;    /* 14px: texto de card, apoio, formulário */
  --t-body: 1rem;        /* 16px: prosa e campos (16px evita o zoom do iOS) */
  --t-h4: 1rem;          /* Unbounded 600: título de card */
  --t-h3: 1.25rem;       /* Unbounded 600: título de etapa, perfil e formulário */
  --t-h2: clamp(1.75rem, 3.5vw, 2.5rem);
  --t-display: clamp(1.75rem, 4vw, 3.25rem);
  --t-lead: clamp(1rem, 1.3vw, 1.125rem);
  --t-painel: 1.5rem;       /* título do painel de cadastro */
  --t-passo: 1.425rem;      /* passos, tipo e faixa de volume do painel */
  --t-campo: 1.3rem;        /* campos do painel */
  --t-passo-m: 1.25rem; --t-campo-m: 1.125rem;   /* o mesmo, no celular */
  --t-num-s: 1.125rem; --t-num-m: clamp(1.625rem, 2.6vw, 2.25rem); --t-num-l: clamp(2.125rem, 3.6vw, 2.875rem);
  /* escala de espaçamento (DESIGN.md: 6, 8, 12, 16, 24) estendida para seções */
  --e1: 6px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px;
  --gutter: clamp(18px, 3vw, 36px);
  --topo: 56px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo) + var(--e5)); }
body { margin: 0; font-family: var(--fonte); color: var(--marinho-petra); background: var(--papel); line-height: 1.5; font-size: var(--t-body); -webkit-font-smoothing: antialiased; caret-color: var(--verde-petra); }
::selection { background: var(--verde-sinal); color: var(--marinho-noite); }
p, li { text-wrap: pretty; }
@media (max-width: 560px) { .etapas p, .perfil p, .sub-sec, .texto-longo p, .texto-longo li { hyphens: auto; } }
h3, h4, .t4 { text-wrap: balance; }
.t4 { display: block; }
h1, h2, h3, .num { font-kerning: normal; }
a { color: var(--verde-texto); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; }
.sr { position: absolute; left: -9999px; }
[hidden] { display: none !important; }  /* o atributo hidden vence display: grid/flex das classes */
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.g { width: 22px; height: 22px; }
.ico.p { width: 16px; height: 16px; }
:focus-visible { outline: 2px solid var(--marinho-petra); outline-offset: 2px; }  /* sobre claro: marinho (17:1); o verde-sinal dá 2,1:1 */
.topo :focus-visible, .esq :focus-visible, section.escuro :focus-visible, footer :focus-visible, .dock-topo :focus-visible { outline-color: var(--verde-sinal); }  /* sobre escuro */
::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--marinho-noite); } ::-webkit-scrollbar-thumb { background: var(--cinza); }
.num { font-variant-numeric: tabular-nums; }

/* rótulo de instrumento: caixa-alta, curto, espaçado */
label, .rot-passo { font-family: var(--fonte); font-weight: 400; text-transform: uppercase; letter-spacing: .16em; }

/* ---------- faixa do topo (fixa) ----------
   Desktop: marca | (ticker, só com obras e em tela larga) | links | Cadastrar obra.
   Celular: marca | Cadastrar obra | Menu; os links abrem num painel (a ação principal nunca sai da tela). */
.topo { position: fixed; inset: 0 0 auto 0; z-index: 50; background: var(--marinho-noite); border-bottom: 1px solid var(--filete-escuro); color: var(--papel); padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
.topo .barra { max-width: 1720px; margin: 0 auto; min-height: var(--topo); padding: 0 var(--gutter); display: flex; align-items: center; gap: var(--e5); }
.marca { display: flex; align-items: center; gap: var(--e4); color: var(--papel); flex: none; min-height: 44px; }
.marca:hover { text-decoration: none; }
.marca b { font-family: var(--titulo); font-weight: 600; font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; }
/* o logo da Petra (negativo sobre o marinho) + filete + o produto */
.logo-petra { display: block; height: 40px; width: auto; flex: none; }
.marca-sep { width: 1px; height: 28px; background: var(--filete-escuro); flex: none; }
.ticker { display: none; align-items: center; border: 1px solid var(--filete-escuro); font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-claro); white-space: nowrap; margin-inline: auto; }
.ticker span.it { display: inline-flex; align-items: center; gap: var(--e2); padding: 7px var(--e4); }
.ticker span.it + span.it { border-left: 1px solid var(--filete-escuro); }
.ticker b { font-family: var(--titulo); font-weight: 600; letter-spacing: 0; color: var(--papel); font-variant-numeric: tabular-nums; }
.pt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.pt.x { background: var(--vermelho); } .pt.i { background: var(--verde-sinal); }
.nav { display: flex; align-items: stretch; align-self: stretch; gap: 2px; margin-left: auto; }
.nav a { display: flex; align-items: center; white-space: nowrap; color: var(--texto-claro-2); font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; padding: 0 14px; position: relative; }
.nav a:hover, .nav a.on { color: var(--papel); text-decoration: none; }
.nav a.on::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; background: var(--verde-sinal); }
.topo .cta { flex: none; display: inline-flex; align-items: center; gap: .4em; height: 40px; padding: 0 18px; background: var(--verde-sinal); color: var(--marinho-noite); font-family: var(--titulo); font-weight: 600; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; }
.topo .cta:hover { background: var(--papel); text-decoration: none; }
.menu-bt { display: none; height: 44px; padding: 0 14px; background: transparent; color: var(--papel); border: 1px solid var(--filete-escuro); font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.menu-bt[aria-expanded="true"] { background: var(--papel); color: var(--marinho-noite); }
body.rede-viva .ticker { display: none; }
@media (min-width: 1640px) { body.rede-viva .ticker { display: inline-flex; } .nav { margin-left: 0; } }
@media (max-width: 860px) {
  .marca small { display: none; }
  .topo .barra { gap: var(--e3); }
  .topo .cta { margin-left: auto; padding: 0 12px; font-size: var(--t-micro); }
  .so-desk { display: none; }
  .marca b { letter-spacing: .1em; }
  .logo-petra { height: 34px; }
  .marca { gap: var(--e3); }
  .menu-bt { display: inline-flex; align-items: center; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-self: auto; gap: 0; margin: 0; background: var(--marinho-noite); border-bottom: 1px solid var(--filete-escuro); padding: var(--e2) var(--gutter) var(--e4); }
  .nav.aberto { display: flex; }
  .nav a { min-height: 48px; padding: 0; border-bottom: 1px solid var(--filete-escuro); font-size: var(--t-label); }
  .nav a.on::after { display: none; }
  .nav a.on { color: var(--verde-sinal); }
}
.pular { position: absolute; left: var(--e3); top: -60px; z-index: 60; background: var(--verde-sinal); color: var(--marinho-noite); padding: 12px var(--e4); font-family: var(--titulo); font-weight: 600; font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; }
.pular:focus { top: var(--e3); text-decoration: none; }

/* ---------- palco (herói) ----------
   Desktop: narrativa à esquerda (fixa) e painel de cadastro à direita (rola).
   Celular: título → diagrama → painel de cadastro (a ação vem antes da explicação). */
main { padding-top: var(--topo); position: relative; overflow: hidden; background: var(--marinho-noite); }
section#conteudo { padding-top: calc(var(--topo) + var(--e7)); }
main::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 100% 0%, rgba(27, 135, 15, .5), transparent 60%), radial-gradient(ellipse at 0% 100%, rgba(27, 135, 15, .16), transparent 55%); pointer-events: none; }
.palco { position: relative; z-index: 1; max-width: 1720px; margin: 0 auto; padding: var(--e6) var(--gutter) var(--e8); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e6); align-items: start; }
.esq { color: var(--papel); display: flex; flex-direction: column; gap: var(--e6); padding-right: clamp(0px, 1.5vw, 24px); }
@media (max-width: 1020px) {
  .palco { grid-template-columns: 1fr; gap: var(--e6); padding-top: var(--e5); }
  .esq { display: contents; }
  .intro { order: 1; } .corte-aterro { order: 2; } .dock { order: 3; } .garantias { order: 4; }
}
h1 { font-family: var(--titulo); font-weight: 600; font-size: var(--t-display); line-height: 1.1; letter-spacing: 0; margin: 0; color: var(--papel); text-transform: uppercase; text-wrap: balance; }
h1 .verde { color: var(--verde-sinal); }
.lead { margin: var(--e5) 0 0; font-size: var(--t-lead); color: var(--texto-claro); max-width: 62ch; line-height: 1.65; letter-spacing: .005em; }



/* ---------- painel de cadastro (flutua sobre o herói) ---------- */
.dock { background: var(--branco); color: var(--marinho-petra); box-shadow: 0 30px 60px rgba(0, 0, 0, .4); min-width: 0; }
.dock-topo { background: var(--marinho-noite); color: var(--papel); padding: 14px var(--e5); position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--e3); border-bottom: 1px solid var(--filete-escuro); }
.dock-topo::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--verde-sinal); transform: scaleX(var(--prog, 0)); transform-origin: left; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.dock-topo .t { margin: 0; font-family: var(--fonte); font-weight: 400; display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; }
.dock-topo .t i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde-sinal); flex: none; }
.dock-corpo { padding: clamp(18px, 2.4vw, 28px); }
/* roteiro do formulário: links para cada passo; o atual acompanha a rolagem */
.passos-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e1); border-bottom: 1px solid var(--filete); padding-bottom: 14px; margin-bottom: var(--e5); font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; }
.passos-topo a.p { display: inline-flex; align-items: center; gap: var(--e2); color: var(--cinza); min-height: 36px; }
.passos-topo a.p:hover { text-decoration: none; color: var(--marinho-petra); }
.passos-topo a.p b { width: 20px; height: 20px; display: grid; place-items: center; font-family: var(--titulo); font-weight: 600; font-size: var(--t-micro); letter-spacing: 0; background: var(--papel); color: var(--cinza); border: 1px solid var(--filete); }
.passos-topo a.p.on { color: var(--marinho-petra); } .passos-topo a.p.on b { background: var(--marinho-noite); color: var(--papel); border-color: var(--marinho-noite); }
.passos-topo .lin { position: relative; overflow: hidden; height: 1px; flex: 1; max-width: 40px; background: var(--filete); }
.passos-topo .lin::after { content: ''; position: absolute; inset: 0; background: var(--verde-petra); transform: scaleX(var(--f, 0)); transform-origin: left; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.passos-topo a.p.feito b { position: relative; background: var(--verde-petra); border-color: var(--verde-petra); color: transparent; }
.passos-topo a.p.feito b::after { content: ''; position: absolute; left: 50%; top: 42%; width: 5px; height: 9px; border: solid var(--branco); border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg); }
@media (max-width: 400px) { .passos-topo a.p span { display: none; } .passos-topo a.p.on span { display: inline; } }
.rot-passo { display: block; font-size: var(--t-label); color: var(--cinza); margin: 0 0 var(--e3); }
.bloco-passo + .bloco-passo { margin-top: var(--e6); }
.papel-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
@media (max-width: 480px) { .papel-toggle { grid-template-columns: 1fr; } }
.papel-toggle button { position: relative; text-align: left; padding: var(--e4); border: 1px solid var(--filete); border-top-width: 3px; background: var(--branco); cursor: pointer; color: var(--marinho-petra); transition: border-color .15s, background .15s; }
.papel-toggle button:hover { border-color: var(--marinho-petra); }
.papel-toggle .topo-btn { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--e2); }
.papel-toggle .cx { color: var(--cinza); display: grid; place-items: center; }
.papel-toggle .ck { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--cinza); }
.papel-toggle .t4 { margin: 0; font-family: var(--titulo); font-weight: 600; font-size: var(--t-h4); line-height: 1.3; }
.papel-toggle p { margin: var(--e1) 0 0; font-size: var(--t-small); line-height: 1.45; color: var(--cinza); }
.papel-toggle .tg { display: block; margin-top: 10px; font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--cinza); }
.papel-toggle button.on[data-papel="X"] { border-color: var(--vermelho); background: rgba(217, 83, 79, .08); }
.papel-toggle button.on[data-papel="X"] .ck { border-color: var(--vermelho); background: var(--vermelho); }
.papel-toggle button.on[data-papel="X"] .cx, .papel-toggle button.on[data-papel="X"] .tg { color: #A93B37; }
.papel-toggle button.on[data-papel="I"] { border-color: var(--verde-petra); background: rgba(27, 135, 15, .08); }
.papel-toggle button.on[data-papel="I"] .ck { border-color: var(--verde-petra); background: var(--verde-petra); }
.papel-toggle button.on[data-papel="I"] .cx, .papel-toggle button.on[data-papel="I"] .tg { color: var(--verde-texto); }
.vol-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--e3); gap: var(--e2); }
.vol-cab .rot-passo { margin: 0; }
.vol-cab em { font-style: normal; font-family: var(--titulo); font-weight: 600; font-size: var(--t-label); color: var(--marinho-petra); background: var(--papel); border: 1px solid var(--filete); padding: 4px 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fichas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e2); margin-bottom: var(--e2); }
@media (max-width: 480px) { .fichas { grid-template-columns: 1fr 1fr; } }
.fichas button { padding: 10px var(--e1); border: 1px solid var(--filete); background: var(--papel); cursor: pointer; font-size: var(--t-small); color: var(--marinho-petra); text-align: center; }
.fichas button:hover { border-color: var(--marinho-petra); }
.fichas button.on { border-color: var(--marinho-petra); background: var(--branco); box-shadow: inset 0 -3px 0 var(--verde-sinal); }

/* campos: só a linha de 2px embaixo (como no sistema) */
label { display: block; font-size: var(--t-micro); color: var(--cinza); margin-bottom: 2px; }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], select, textarea {
  width: 100%; border: none; border-bottom: 2px solid var(--marinho-petra); border-radius: 0; background: transparent; padding: 10px 0; font-size: var(--t-body); color: var(--marinho-petra); outline: none; }
select { padding-right: 4px; cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--cinza); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--marinho-petra); outline-offset: 1px; }
textarea { min-height: 84px; resize: vertical; border: 1px solid var(--marinho-petra); border-bottom-width: 2px; padding: 10px; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4) 18px; }
.grade2 .cheio { grid-column: 1 / -1; }
@media (max-width: 520px) { .grade2 { grid-template-columns: 1fr; } }
.linha-end { display: flex; gap: var(--e2); align-items: flex-end; margin-bottom: var(--e3); }
.linha-end input { flex: 1; min-width: 0; }
.bt-ico { flex: none; width: 44px; height: 44px; border: 1px solid var(--marinho-petra); background: var(--marinho-petra); color: var(--papel); display: grid; place-items: center; cursor: pointer; }
.bt-ico:hover { background: var(--verde-petra); border-color: var(--verde-petra); }
.bt-loc { flex: none; height: 44px; padding: 0 14px; border: 1px solid var(--marinho-petra); background: var(--branco); color: var(--marinho-petra); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.bt-loc:hover { background: var(--marinho-petra); color: var(--papel); }
#mapa, #mapa-acomp { height: 210px; border: 1px solid var(--filete); background: #E9ECF2; }
.ajuda { font-size: var(--t-small); color: var(--cinza); margin-top: var(--e2); }
.contato-rapido { margin-top: var(--e5); padding-top: var(--e5); border-top: 1px solid var(--filete); }
details.opcionais { margin-top: var(--e5); border-top: 1px solid var(--filete); padding-top: var(--e4); }
details.opcionais summary { cursor: pointer; font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--cinza); list-style: none; display: flex; align-items: center; gap: 10px; min-height: 36px; }
details.opcionais summary::-webkit-details-marker { display: none; }
details.opcionais summary::before { content: '+'; width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid var(--filete); font-family: var(--titulo); font-size: var(--t-label); letter-spacing: 0; color: var(--marinho-petra); }
details.opcionais[open] summary::before { content: '−'; }
details.opcionais summary:hover { color: var(--marinho-petra); }
details.opcionais .grade2 { margin-top: var(--e4); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-small); letter-spacing: 0; text-transform: none; color: var(--cinza); margin-top: var(--e5); }
.consent input { width: auto; margin-top: 3px; accent-color: var(--verde-petra); }
.btn-enviar { width: 100%; height: 52px; margin-top: var(--e5); padding: 0 26px; border: 1px solid var(--marinho-petra); background: var(--papel); color: var(--marinho-noite); font-family: var(--titulo); font-weight: 600; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background .25s, border-color .25s, color .25s; }
/* o botão "acende" quando tudo está pronto; antes disso continua clicável (o envio mostra o resumo do que falta) */
.btn-enviar.pronto { background: var(--verde-sinal); border-color: var(--verde-sinal); animation: anel 2.4s ease-out infinite; }
.btn-enviar .faltam { font-family: var(--fonte); font-weight: 400; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; opacity: .72; border-left: 1px solid currentColor; padding-left: var(--e3); white-space: nowrap; }
.btn-enviar .faltam:empty { display: none; }
@keyframes anel { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 194, 74, .6); } 70% { box-shadow: 0 0 0 10px rgba(91, 194, 74, 0); } }
.btn-enviar:hover { background: var(--marinho-noite); border-color: var(--marinho-noite); color: var(--papel); animation: none; }
.btn-enviar:disabled { opacity: .55; cursor: wait; animation: none; }
.nota-dock { text-align: center; font-size: var(--t-label); letter-spacing: .04em; color: var(--cinza); margin: 14px 0 0; }
.msg { margin-top: 14px; padding: 12px 14px; font-size: var(--t-small); border: 1px solid var(--ambar); background: rgba(224, 176, 74, .16); display: none; }
.msg.erro { border-color: var(--erro); background: rgba(180, 69, 58, .08); color: var(--erro); display: block; }
.msg.ok { border-color: var(--verde-petra); background: rgba(27, 135, 15, .08); display: block; }
.sucesso { display: none; }
.sucesso .rotulo { font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--verde-texto); }
.sucesso .protocolo { font-family: var(--titulo); font-weight: 600; font-size: var(--t-num-m); color: var(--marinho-petra); margin: 10px 0; }
.sucesso ol { padding-left: 18px; color: var(--cinza); font-size: var(--t-small); }
.botao { height: 52px; padding: 0 26px; border: none; background: var(--verde-sinal); color: var(--marinho-noite); font-family: var(--titulo); font-weight: 600; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.botao:hover { background: var(--marinho-noite); color: var(--papel); }
.botao.grande { width: 100%; margin-top: var(--e4); }

/* ---------- seções ----------
   Ritmo: cabeçalho de seção (título + apoio) colado ao conteúdo por 32px; seções separadas por 72–88px. */
section.sec { padding: clamp(48px, 7vw, 96px) var(--gutter); border-top: 1px solid var(--filete); }
section.sec > .in { max-width: 1440px; margin: 0 auto; }
section.sec.claro { background: var(--papel); }
section.sec.tinto { background: var(--branco); }
section.sec.escuro { background: var(--marinho-noite); color: var(--papel); border-top-color: var(--filete-escuro); position: relative; overflow: hidden; }
section.sec.escuro::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 90% 100%, rgba(27, 135, 15, .45), transparent 60%); pointer-events: none; }
section.sec.escuro > .in { position: relative; }
h2.titulo { font-family: var(--titulo); font-weight: 600; font-size: var(--t-h2); line-height: 1.1; letter-spacing: 0; margin: 0; color: var(--marinho-petra); text-wrap: balance; }
.escuro h2.titulo { color: var(--papel); }
.sub-sec { max-width: 62ch; margin: var(--e4) 0 0; font-size: var(--t-body); color: var(--cinza); line-height: 1.6; }
.escuro .sub-sec { color: var(--texto-claro-2); }
.cab-sec { margin-bottom: var(--e7); }

/* etapas: uma faixa de três colunas separadas por filete (sequência que importa), sem caixas */
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--marinho-petra); }
.etapas li { padding: var(--e5) var(--e6) 0 0; display: flex; flex-direction: column; }
.etapas li + li { border-left: 1px solid var(--filete); padding-left: var(--e6); }
.etapas .n { font-family: var(--titulo); font-weight: 300; font-size: var(--t-num-m); line-height: 1; color: var(--verde-texto); margin-bottom: var(--e5); }
.etapas h3 { font-family: var(--titulo); font-weight: 600; font-size: var(--t-h3); line-height: 1.25; margin: 0 0 var(--e3); color: var(--marinho-petra); }
.etapas p { font-size: var(--t-body); line-height: 1.6; color: var(--cinza); margin: 0; max-width: 38ch; }
.pe { margin-top: var(--e5); padding-top: 14px; border-top: 1px solid var(--filete); display: flex; justify-content: space-between; gap: var(--e2); font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--cinza); }
.etapas .pe { margin-top: auto; }
.etapas p { margin-bottom: var(--e5); }
.pe b { font-weight: 400; color: var(--verde-texto); }
@media (max-width: 800px) {
  .etapas { grid-template-columns: 1fr; }
  .etapas li { padding: var(--e5) 0 var(--e5); }
  .etapas li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--filete); }
  .etapas p { max-width: none; }
}
.legenda { margin-top: var(--e7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e6); font-size: var(--t-small); color: var(--cinza); }
.legenda b { font-weight: 400; font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--marinho-petra); }
.legenda span { display: inline-flex; align-items: center; gap: var(--e2); }
.legenda i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* perfis: um livro-razão (nome | o que muda | resultado), não quatro cartões iguais */
.livro { border-bottom: 1px solid var(--filete); }
.perfil { display: grid; grid-template-columns: minmax(10rem, 2fr) minmax(0, 5fr) minmax(9rem, 2fr); gap: var(--e5) var(--e6); align-items: baseline; padding: var(--e5) 0; border-top: 1px solid var(--filete); }
.perfil h3 { font-family: var(--titulo); font-weight: 600; font-size: var(--t-h3); line-height: 1.25; margin: 0; color: var(--marinho-petra); }
.perfil p { margin: 0; font-size: var(--t-body); line-height: 1.6; color: var(--cinza); max-width: 62ch; }
.perfil .res { font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--cinza); display: flex; flex-direction: column; gap: var(--e1); }
.perfil .res b { font-weight: 400; color: var(--verde-texto); font-size: var(--t-label); }
@media (max-width: 860px) { .perfil { grid-template-columns: 1fr; gap: var(--e2); } .perfil .res { margin-top: var(--e1); } }

/* balanço: totais à esquerda, quadro por estado à direita (dados reais; nada de número decorativo) */
.cab-medidor { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e5); margin-bottom: var(--e7); }
.balanco { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--e7); align-items: start; }
@media (max-width: 960px) { .balanco { grid-template-columns: 1fr; gap: var(--e6); } }
.totais { margin: 0; border-top: 1px solid var(--filete-escuro); }
.totais > div { padding: var(--e5) 0; border-bottom: 1px solid var(--filete-escuro); }
.totais dt { display: flex; align-items: center; gap: 10px; font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--texto-claro-2); margin-bottom: var(--e2); }
.totais dd { margin: 0; display: flex; align-items: baseline; gap: var(--e4); flex-wrap: wrap; }
.totais dd b { font-family: var(--titulo); font-weight: 300; font-size: var(--t-num-l); line-height: 1.05; color: var(--papel); font-variant-numeric: tabular-nums; }
.totais dd span { font-size: var(--t-small); line-height: 1.6; font-weight: 500; color: var(--texto-claro-2); max-width: 34ch; }
.totais dd span strong { color: var(--papel); font-weight: 500; }
.por-uf { border-top: 1px solid var(--filete-escuro); }
.uf-cab, .uf-lin { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr); gap: var(--e5); align-items: center; }
.uf-cab { padding: var(--e3) 0; border-bottom: 1px solid var(--filete-escuro); font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--texto-claro-2); }
.uf-lin { padding: var(--e4) 0; border-bottom: 1px solid var(--filete-escuro); }
.uf-lin .uf { font-family: var(--titulo); font-weight: 600; font-size: var(--t-small); color: var(--papel); }
.uf-lin .cel { display: flex; align-items: center; gap: var(--e3); font-family: var(--titulo); font-weight: 300; font-size: var(--t-num-s); color: var(--papel); font-variant-numeric: tabular-nums; }
.uf-lin .cel i { display: block; height: 2px; flex: 1; max-width: 100%; transform-origin: left; }
.uf-lin .cel.x i { background: var(--vermelho); } .uf-lin .cel.i i { background: var(--verde-sinal); }
@media (max-width: 520px) { .uf-cab, .uf-lin { grid-template-columns: 3rem 1fr 1fr; gap: var(--e3); } }

/* contato */
.contato { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e8); align-items: start; }
@media (max-width: 960px) { .contato { grid-template-columns: 1fr; gap: var(--e6); } }
.sede { border-top: 1px solid var(--filete); margin-top: var(--e6); padding-top: var(--e5); }
.sede .id { display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; }
.sede .logo-cor { display: block; height: 52px; width: auto; flex: none; }
.sede h3 { margin: 0; font-family: var(--titulo); font-weight: 600; font-size: var(--t-h4); }
.sede p { font-size: var(--t-small); color: var(--cinza); margin: var(--e4) 0; }
.sede .lin { border-top: 1px solid var(--filete); padding-top: 14px; display: grid; gap: var(--e2); font-size: var(--t-small); }
.sede .lin span { display: flex; align-items: center; gap: 10px; }
.sede .lin a { display: inline-block; padding: 8px 0; }
.sede .lin .ico { color: var(--verde-petra); width: 16px; height: 16px; }
.nota-contato { margin: var(--e5) 0 0; font-size: var(--t-small); color: var(--cinza); line-height: 1.6; display: flex; gap: var(--e3); align-items: flex-start; }
.nota-contato .ico { color: var(--verde-petra); width: 18px; height: 18px; margin-top: 2px; }
.cartao-form { background: var(--branco); border: 1px solid var(--filete); padding: clamp(22px, 3vw, 34px); }
.cartao-form h3 { font-family: var(--titulo); font-weight: 600; font-size: var(--t-h3); line-height: 1.2; margin: 0 0 var(--e1); }
.cartao-form .sub { font-size: var(--t-small); color: var(--cinza); margin: 0 0 var(--e5); }
.cartao-form .grade2 { margin-bottom: var(--e4); }
.btn-marinho { width: 100%; height: 52px; margin-top: 18px; padding: 0 26px; border: none; background: var(--marinho-petra); color: var(--papel); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-marinho:hover { background: var(--verde-petra); }
.btn-marinho .ico { color: var(--verde-sinal); width: 16px; height: 16px; }
.btn-marinho:hover .ico { color: var(--papel); }

/* acompanhar e páginas de texto */
.pagina { max-width: 760px; margin: 0 auto; padding: var(--e7) 20px var(--e8); }
.pagina .intro { color: var(--cinza); margin: var(--e4) 0 var(--e6); }
.linha-tempo { list-style: none; padding: 0; margin: var(--e5) 0 0; display: grid; gap: var(--e2); }
.linha-tempo li { display: flex; gap: 14px; align-items: center; padding: var(--e3) 14px; border: 1px solid var(--filete); background: var(--branco); color: var(--cinza); }
.linha-tempo li i { width: 10px; height: 10px; border-radius: 50%; background: var(--filete); flex: none; }
.linha-tempo li.feito { color: var(--marinho-petra); } .linha-tempo li.feito i { background: var(--verde-petra); }
.linha-tempo li.atual { border-color: var(--marinho-petra); color: var(--marinho-petra); font-weight: 600; background: var(--papel); }
.linha-tempo li.atual i { background: var(--verde-sinal); outline: 2px solid var(--marinho-petra); outline-offset: 2px; }
.linha-tempo li.cancel.atual i { background: var(--vermelho); }
.resumo-acomp { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--e3); margin-top: var(--e5); }
.resumo-acomp div { background: var(--branco); border: 1px solid var(--filete); padding: var(--e4); }
.resumo-acomp div b { display: block; font-weight: 400; font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--cinza); margin-bottom: var(--e1); }
.pagina .aviso-dados { font-size: var(--t-label); color: var(--cinza); margin-top: 18px; }
.texto-longo { max-width: 68ch; }
.texto-longo h3 { font-family: var(--titulo); font-weight: 600; font-size: var(--t-h4); margin-top: var(--e6); }
.texto-longo p, .texto-longo li { color: var(--marinho-petra); font-size: var(--t-body); line-height: 1.65; }
.aviso-dados { margin: var(--e5) 0 0; font-size: var(--t-label); color: var(--texto-claro-2); }

/* rodapé */
footer { background: var(--marinho-noite); color: var(--texto-claro-2); padding: var(--e6) var(--gutter); border-top: 1px solid var(--filete-escuro); font-size: var(--t-label); letter-spacing: .02em; }
footer .in { max-width: 1720px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e4); }
footer b { font-family: var(--titulo); font-weight: 600; font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--papel); }
footer .pt-esq { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;  }
footer .pt-esq .logo-petra { height: 36px; }
footer .pt-esq > span:last-child { font-size: var(--t-label); }
footer a { color: var(--papel); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 10px 0; }
footer a:hover { color: var(--verde-sinal); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* garantias: o que a pessoa precisa saber antes de entregar o contato (esquerda no desktop, junto do envio no celular) */
.garantias { border-top: 1px solid var(--filete-escuro); padding-top: var(--e5); max-width: 40rem; }
.garantias h2 { margin: 0 0 var(--e4); font-family: var(--fonte); font-weight: 400; font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-claro-2); }
.garantias ul { list-style: none; margin: 0 0 var(--e4); padding: 0; display: grid; gap: var(--e4); }
.garantias li { font-size: var(--t-body); line-height: 1.6; color: var(--texto-claro); padding-left: var(--e5); position: relative; }
.garantias li::before { content: ''; position: absolute; left: 0; top: .62em; width: 10px; height: 1px; background: var(--verde-sinal); }
.garantias a { color: var(--verde-sinal); font-size: var(--t-small); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 10px 0; }
.nota-dados { margin: var(--e5) 0 0; padding: var(--e3) var(--e4); border: 1px solid var(--filete); background: var(--papel); font-size: var(--t-small); line-height: 1.55; color: var(--marinho-petra); }
@media (min-width: 1021px) { .nota-dados { display: none; } }
@media (max-width: 1020px) { .garantias { display: none; } }
.nota-form { margin: 0 0 var(--e5); font-size: var(--t-small); color: var(--cinza); }
.nota-form span { color: var(--marinho-petra); font-weight: 500; }

/* erros de campo: junto do campo, em texto (não só em cor) */
.erro-campo { margin: var(--e1) 0 0; font-size: var(--t-small); line-height: 1.4; color: var(--erro); font-weight: 500; }
.erro-campo::before { content: 'Corrigir: '; font-weight: 600; }
[aria-invalid="true"] { border-bottom-color: var(--erro) !important; }
.msg ul { margin: var(--e2) 0 0; padding-left: 18px; }
.msg li a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* balanço sem obras: rede em formação (sem zeros) */
.rede-formacao { border-top: 1px solid var(--filete-escuro); padding-top: var(--e6); max-width: 46rem; }
.rede-formacao p { margin: 0 0 var(--e5); font-size: var(--t-lead); line-height: 1.6; color: var(--texto-claro); }
.botao-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--e5); border: 1px solid var(--papel); color: var(--papel); font-family: var(--titulo); font-weight: 600; font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; }
.botao-link:hover { background: var(--papel); color: var(--marinho-noite); text-decoration: none; }

/* mapa: no toque começa parado (o polegar rola a página); "Mover o mapa" liga o arrasto */
.mapa-caixa { position: relative; }
.mapa-mover { position: absolute; z-index: 500; right: var(--e2); bottom: calc(var(--e2) + 18px); min-height: 44px; padding: 0 var(--e4); background: var(--branco); color: var(--marinho-petra); border: 1px solid var(--marinho-petra); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.mapa-mover[aria-pressed="true"] { background: var(--marinho-petra); color: var(--papel); }
.mapa-mover[hidden] { display: none; }

/* alvos de toque: 44px onde o dedo é a entrada */
.consent input { width: 22px; height: 22px; margin-top: 0; flex: none; }
.consent { align-items: center; min-height: 44px; }
@media (max-width: 860px), (pointer: coarse) { .passos-topo a.p, details.opcionais summary { min-height: 44px; } .passos-topo a.p { min-width: 44px; justify-content: center; } }
@media (pointer: coarse) {
  .leaflet-bar a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
  .passos-topo a.p { min-width: 44px; justify-content: center; }
  .bt-ico, .bt-loc { height: 48px; }
  .passos-topo a.p b { width: 28px; height: 28px; }
}

/* ---------- corte e aterro: o único momento de movimento da página ----------
   Estado-base = diagrama pronto (corte feito, aterro feito, rota traçada). Com rolagem ligada ao tempo
   (animation-timeline: scroll), as três peças voltam ao "antes" e se desfazem na ordem em que a obra acontece:
   o solo sai da esquerda, a rota se desenha, o solo entra na direita. Sem suporte ou com movimento reduzido,
   fica o diagrama pronto. Só transform e stroke-dashoffset: sem layout, sem JS. */
.corte-aterro { margin: 0; max-width: 40rem; }
.corte-aterro svg { display: block; width: 100%; height: auto; overflow: visible; }
.corte-aterro figcaption { margin-top: var(--e3); font-size: var(--t-small); line-height: 1.55; color: var(--texto-claro-2); max-width: 46ch; }
.corte-aterro .base { stroke: var(--filete-escuro); stroke-width: 1; }
.corte-aterro .orig-a { fill: none; stroke: var(--vermelho); stroke-width: 1; stroke-dasharray: 4 4; }
.corte-aterro .meta-b { fill: none; stroke: var(--verde-sinal); stroke-width: 1; stroke-dasharray: 4 4; }
.corte-aterro .solo { transform-box: fill-box; transform-origin: 50% 100%; }
.corte-aterro .solo-a { fill: rgba(217, 83, 79, .30); transform: scaleY(.32); }
.corte-aterro .solo-b { fill: rgba(91, 194, 74, .30); transform: scaleY(3.14); }
.corte-aterro .rota { fill: none; stroke: var(--papel); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.corte-aterro .ponta-a { fill: var(--vermelho); } .corte-aterro .ponta-b { fill: var(--verde-sinal); }
.corte-aterro .rot { fill: var(--texto-claro-2); font-family: var(--fonte); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
@keyframes ca-corte { from { transform: scaleY(1); } to { transform: scaleY(.32); } }
@keyframes ca-aterro { from { transform: scaleY(1); } to { transform: scaleY(3.14); } }
@keyframes ca-rota { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .corte-aterro .solo-a, .corte-aterro .solo-b, .corte-aterro .rota { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root block); }
    .corte-aterro .solo-a { animation-name: ca-corte; animation-range: 0px 140px; }
    .corte-aterro .rota { animation-name: ca-rota; animation-range: 100px 260px; }
    .corte-aterro .solo-b { animation-name: ca-aterro; animation-range: 220px 380px; }
  }
}

/* ---------- raio curto + o que o motor cruza: o que fica ao lado do cadastro depois dos diagramas ----------
   A coluna da narrativa é mais curta que o painel de cadastro (que cresce com os três passos e o mapa). Em vez de
   deixar o vão, ela continua: um esquema de relevo (curvas de nível) com a rota entre duas obras e cargas de terra
   em trânsito, e a lista do que o motor cruza em cada conexão. Mesma gramática do corte e aterro: traço fino,
   vermelho = exportação, verde = importação, nada de sombra, sem foto (não há foto da Petra autorizada, e foto de
   banco sugeriria obra real). Esquema ILUSTRATIVO, e a legenda diz isso. Só aparece no desktop (como as garantias). */
.raio-curto { margin: 0; max-width: 40rem; }
.raio-curto svg { display: block; width: 100%; height: auto; overflow: hidden; }
.raio-curto figcaption { margin-top: var(--e3); font-size: var(--t-small); line-height: 1.55; color: var(--texto-claro-2); max-width: 46ch; }
.raio-curto .relevo path { fill: none; stroke: var(--papel); stroke-opacity: .09; stroke-width: 1; }
.raio-curto .raio { fill: rgba(243, 245, 249, .025); stroke: var(--filete-escuro); stroke-width: 1; stroke-dasharray: 3 5; }
.raio-curto .via { fill: none; stroke: var(--papel); stroke-opacity: .35; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2 6; }
.raio-curto .viagem { fill: none; stroke: var(--papel); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1.2 98.8; }
.raio-curto .v1 { stroke-dashoffset: -26; } .raio-curto .v2 { stroke-dashoffset: -52; } .raio-curto .v3 { stroke-dashoffset: -78; }
.raio-curto .ponta-a { fill: var(--vermelho); } .raio-curto .ponta-b { fill: var(--verde-sinal); }
.raio-curto .obra-fora { fill: none; stroke: var(--texto-claro-2); stroke-width: 1; }
.raio-curto .rot { fill: var(--texto-claro-2); font-family: var(--fonte); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; paint-order: stroke; stroke: var(--marinho-noite); stroke-width: 4px; stroke-linejoin: round; }
.raio-curto .rot-raio { fill: var(--texto-claro); }
@keyframes rc-viagem { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: no-preference) {
  .raio-curto .viagem { animation: rc-viagem 7s linear infinite; }
  .raio-curto .v2 { animation-delay: -2.33s; } .raio-curto .v3 { animation-delay: -4.66s; }
}
.cruza { border-top: 1px solid var(--filete-escuro); padding-top: var(--e5); max-width: 40rem; }
.cruza h2 { margin: 0 0 var(--e4); font-family: var(--fonte); font-weight: 400; font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-claro-2); }
.cruza dl { margin: 0; }
.cruza dl > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--e4); padding: var(--e3) 0; border-top: 1px solid var(--filete-escuro); }
.cruza dl > div:first-child { border-top: 0; padding-top: 0; }
.cruza dt { margin: 0; font-size: var(--t-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--papel); line-height: 1.6; }
.cruza dd { margin: 0; font-size: var(--t-body); line-height: 1.6; color: var(--texto-claro); }
@media (max-width: 1020px) { .raio-curto, .cruza { display: none; } }

/* campo válido ao sair dele: a linha vira verde e aparece uma marca (sem texto; o estado também vai no aria do campo vazio de erro) */
.campo { position: relative; display: block; }
.campo-ok input { border-bottom-color: var(--verde-petra); }
.campo-ok::after { content: ''; position: absolute; right: 2px; bottom: 15px; width: 5px; height: 10px; border: solid var(--verde-petra); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.campo-ok .ajuda { margin-top: var(--e2); }

/* ---------- painel Cadastro da obra em escala grande (variante aceita via /impeccable generate: "Escala", 0,95 e tipo preenchido) ----------
   O painel grita pelo tamanho: título e passos em Unbounded grande, cartões de tipo altos e o escolhido PREENCHIDO
   (vermelho = exportação, verde Petra = importação). Os rótulos em caixa-alta ficam só nos metadados. */
.dock { box-shadow: 0 40px 80px rgba(0, 0, 0, .4); }  /* a sombra grande do sistema, só em quem flutua */
.dock .dock-topo { padding: 22px var(--e6); }
.dock .dock-topo .t { font-family: var(--titulo); font-weight: 600; font-size: var(--t-painel); letter-spacing: .02em; text-transform: none; }
.dock .dock-corpo { padding: var(--e6); }
.dock .passos-topo { margin-bottom: var(--e6); }
.dock .rot-passo { font-family: var(--titulo); font-weight: 600; font-size: var(--t-passo); line-height: 1.12; letter-spacing: 0; text-transform: none; color: var(--marinho-petra); margin-bottom: var(--e4); }
.dock .bloco-passo + .bloco-passo { margin-top: var(--e7); padding-top: var(--e6); border-top: 1px solid var(--marinho-petra); }
.dock .papel-toggle .t4 { font-size: var(--t-passo); line-height: 1.12; }
.dock .papel-toggle p { font-size: var(--t-body); }
.dock .papel-toggle .cx .ico { width: 40px; height: 40px; }
.dock .papel-toggle button { padding: var(--e5); }
@media (min-width: 481px) { .dock .papel-toggle button { min-height: 190px; } }
.dock .vol-cab em { font-size: var(--t-passo); padding: 6px 14px; }
.dock .fichas button { font-size: var(--t-body); font-weight: 500; padding: 18px 8px; }
.dock input[type=text], .dock input[type=email], .dock input[type=tel], .dock input[type=number], .dock input[type=date] { font-size: var(--t-campo); padding: 12px 0; }
.dock .btn-enviar { height: 68px; font-size: var(--t-small); }
/* o tipo escolhido enche o cartão (texto branco sobre vermelho-alerta e sobre verde Petra) */
.dock .papel-toggle button.on[data-papel="X"] { background: var(--erro); border-color: var(--erro); color: var(--branco); }  /* vermelho-alerta: branco sobre ele passa 4,5:1; o coral do mapa dá 4,0:1 */
.dock .papel-toggle button.on[data-papel="I"] { background: var(--verde-petra); border-color: var(--verde-petra); color: var(--branco); }
.dock .papel-toggle button.on p, .dock .papel-toggle button.on .cx, .dock .papel-toggle button.on .tg { color: var(--branco); }
.dock .papel-toggle button.on .ck { background: var(--branco); border-color: var(--branco); }
/* celular: a mesma ousadia com menos rolagem (o painel grande somava ~700px a mais) */
@media (max-width: 520px) {
  .dock .dock-corpo { padding: var(--e5) var(--e4); }
  .dock .rot-passo, .dock .papel-toggle .t4 { font-size: var(--t-passo-m); }
  .dock .bloco-passo + .bloco-passo { margin-top: var(--e6); padding-top: var(--e5); }
  .dock input[type=text], .dock input[type=email], .dock input[type=tel], .dock input[type=number], .dock input[type=date] { font-size: var(--t-campo-m); padding: 10px 0; }
  .dock .vol-cab em { font-size: var(--t-campo-m); }
  .dock .btn-enviar { height: 60px; }
}
@media (max-width: 520px) {
  .logo-petra { height: 28px; }
  .marca { gap: var(--e2); }
  .marca-sep { height: 22px; }
  .marca b { font-size: var(--t-micro); letter-spacing: .04em; }
  .topo .barra { gap: var(--e2); padding-inline: var(--e4); }
  .topo .cta { padding: 0 10px; }
  .menu-bt { position: relative; flex: none; width: 44px; padding: 0; font-size: 0; }   /* só o ícone: o nome acessível vem do aria-label */
  .menu-bt::before { content: ''; position: absolute; left: 12px; right: 12px; top: 15px; height: 2px; background: currentColor; box-shadow: 0 7px 0 currentColor, 0 14px 0 currentColor; }
  .topo .cta { letter-spacing: .08em; }
}
@media (max-width: 400px) {
  .marca b { letter-spacing: 0; }
  .topo .cta { padding: 0 8px; letter-spacing: 0; }
  .topo .barra { padding-inline: var(--e3); }
}