/* ============================================================
   shared/v2.css · componentes do site v2 (dono: Fundação, onda 0)
   ------------------------------------------------------------
   Entra em toda página logo depois de shared/refino.css (build-chrome.py garante).
   Base: o plano do site v2 e as decisões do Pedro de 28/09. Página não redefine
   estes componentes: CSS próprio fica no <style> dela; componente novo que sirva
   a duas páginas vira pedido à Fundação.

   Design system intocado: Bai Jamjuree, verde #1ABF6E, raio 10px (8 e 6 nos
   menores, pílula nos selos), shadow-sm parado, -4px e shadow-lg no hover,
   entrada 12px ease-out, sem mola. Ícone: Lucide 0.556.0 de data/icones.json.

   Componentes:
    0. Cores de família novas: .f-floresta (Ativos Ambientais), .f-ardosia (Leitura completa)
    1. Selo ............ .selo.disp · .selo.disp.time · .selo.breve · .selo.fora
    2. Card de área .... .card-area (foto golden-hour + ladrilho branco saindo da borda)
    3. Card de módulo .. .card-modulo (topo pintado da família; .breve = névoa)
    4. Linha de catálogo .tabela-modulos (tabela real; vira cartão no celular)
    5. Trilho .......... .trilho · .parada · .parada.breve (névoa) · .fronteira · .trilho.rico
    6. Abas ............ .abas · .aba · .painel + shared/abas.js
    7. Fluxo pronto .... .fluxo
    8. Entradas ........ .entradas (por onde se entra, com o status verdadeiro)
    9. Norma ........... .norma-datas · .norma-tabela · .norma-checklist · .norma-fontes · .autoria · .ressalva
   10. Interesse ....... .cta-interesse ("Fale com a gente" já preenchido)
   11. Tamanhos do ladrilho (.ld-mini.t-20 a .ld.t-120)        · pacote visual, 28/09
   12. Vidro e resposta (.vidro, .res.s/.c/.p)                 · pacote visual, 28/09
   13. Trilho que acende, números, abas, hover, calmo (html.mv-on, shared/v2-movimento.js)
   14. BRILHO: luz de sol (tokens --sol-*, .sol-luz, .brilho-atras, fotos quentes, ladrilho dourado)
   15. Botão principal no AA e chamada final clara (.cta-final)
   Passada final (P1, 28/09 noite): 11 a 15 são deste arquivo; as outras páginas usam as classes e os
   tokens, sem redefinir (PEDIDOS.md lista os nomes).
   ============================================================ */


/* ---------- 0 · Famílias novas (ladrilho da direção B) ---------- */
/* floresta: Ativos Ambientais, em tons de #19C6A1 com luz dourada */
.f-floresta{--h0:#cdeee3;--paint:radial-gradient(40% 52% at 78% 16%,rgba(255,226,160,.9),transparent 70%),radial-gradient(58% 66% at 20% 82%,rgba(25,198,161,.62),transparent 72%),radial-gradient(46% 50% at 86% 92%,rgba(15,122,63,.42),transparent 72%),linear-gradient(180deg,#e2f5ee 0%,#b5e6d4 55%,#7fd2b8 100%)}
/* ardósia: Leitura completa da terra (História da Terra), em tons de #588293 com luz dourada */
.f-ardosia{--h0:#d3dfe5;--paint:radial-gradient(42% 54% at 80% 18%,rgba(255,228,176,.88),transparent 70%),radial-gradient(60% 66% at 20% 80%,rgba(88,130,147,.62),transparent 72%),radial-gradient(46% 50% at 88% 94%,rgba(58,96,112,.45),transparent 72%),linear-gradient(180deg,#e6edf0 0%,#bccdd6 55%,#8faab8 100%)}
.f-floresta,.f-ardosia{--ld-ink:var(--ink);--ld-ring:none}


/* ---------- 1 · Selo ---------- */
/* só três selos de módulo: Disponível · Disponível · com o nosso time · Em breve (névoa).
   .fora é só para entrada que não fazemos hoje ("Ainda não"), nunca para módulo. */
.selo{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1;white-space:nowrap;vertical-align:middle}
.selo svg{width:12px;height:12px;flex:none}
.selo.disp{background:#e6f6ec;color:var(--green-dd)}
.selo.disp.time{background:#e3f5f1;color:#0f6b56;box-shadow:inset 0 0 0 1px rgba(25,198,161,.35)}
.selo.breve{background:#fff;color:var(--ink3);box-shadow:inset 0 0 0 1px var(--line2)}
.selo.fora{background:transparent;color:var(--ink3);box-shadow:inset 0 0 0 1px var(--line)}


/* ---------- 2 · Card de área ---------- */
/* foto é propósito (golden-hour do brand-bank, nada gerado); pintura é produto (card de módulo) */
.card-area{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .3s ease-out,box-shadow .3s ease-out,border-color .3s ease-out}
.card-area:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line2)}
.card-area .ca-foto{position:relative;display:block;height:clamp(150px,16vw,196px);background:var(--h0,#e8ece7)}
.card-area .ca-foto picture{display:block;height:100%}
.card-area .ca-foto img{width:100%;height:100%;object-fit:cover;display:block}
.card-area .ca-foto .ld{left:24px;top:auto;bottom:0;transform:translateY(50%);width:64px;height:64px}
.card-area .ca-foto .ld svg{width:28px;height:28px}
.card-area .ca-corpo{display:flex;flex-direction:column;flex:1;padding:46px 24px 22px}
.card-area .ca-sob{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.card-area h3{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-top:8px}
.card-area .ca-linha{font-size:14px;font-weight:600;line-height:1.4;color:var(--green-dd);margin-top:4px}
.card-area .ca-tx{font-size:15px;line-height:1.55;color:var(--ink2);margin-top:8px}
.card-area .ca-lista{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
/* ladrilho, nome (quebra se precisar) e selo à direita; o selo longo "com o nosso time" desce para baixo do nome */
.card-area .ca-lista li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;column-gap:10px;font-size:14px;font-weight:500;color:var(--ink)}
.card-area .ca-lista li .selo{margin-left:0}
.card-area .ca-lista li .selo.time{grid-column:2;justify-self:start;margin-top:4px}
.card-area .ca-link{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;color:var(--green-dd);text-decoration:none}
.card-area .ca-link:hover{color:var(--green-d)}


/* ---------- 3 · Card de módulo ---------- */
.card-modulo{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .3s ease-out,box-shadow .3s ease-out,border-color .3s ease-out}
.card-modulo:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line2)}
.card-modulo .ld-top{display:block;height:96px;flex:none}
.card-modulo .ld{width:56px;height:56px}
.card-modulo .ld svg{width:24px;height:24px}
.card-modulo .cm-corpo{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.card-modulo .cm-corpo .selo{align-self:flex-start}
.card-modulo h3{font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin-top:12px}
.card-modulo .cm-pergunta{font-size:15px;line-height:1.5;color:var(--ink);margin-top:6px}
.card-modulo .cm-volta{font-size:14px;line-height:1.55;color:var(--ink2);margin-top:8px}
.card-modulo .cm-nota{font-size:13px;line-height:1.5;color:var(--ink3);margin-top:8px}
.card-modulo .cm-acao{margin-top:auto;padding-top:16px}
.card-modulo .cm-acao a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;font-size:14.5px;color:var(--green-dd);text-decoration:none}
.card-modulo .cm-acao a:hover{color:var(--green-d)}
.card-modulo.breve{background:linear-gradient(180deg,#fbfbfa,#f5f6f4)}
.card-modulo.breve h3,.card-modulo.breve .cm-pergunta{color:var(--ink2)}
.card-modulo.breve .cm-volta{color:var(--ink3)}


/* ---------- 4 · Linha de catálogo (tabela de módulos) ---------- */
.tabela-modulos{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);font-size:14px;line-height:1.5}
.tabela-modulos caption{text-align:left;font-size:13px;color:var(--ink3);padding:0 2px 10px;caption-side:top}
.tabela-modulos th,.tabela-modulos td{text-align:left;vertical-align:top;padding:14px 16px;border-bottom:1px solid var(--line)}
.tabela-modulos thead th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);font-weight:600;background:var(--bg)}
.tabela-modulos thead th:first-child{border-top-left-radius:var(--radius)}
.tabela-modulos thead th:last-child{border-top-right-radius:var(--radius)}
.tabela-modulos tbody tr:last-child>*{border-bottom:0}
.tabela-modulos .tm-grupo th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);background:#fafbfa;padding:10px 16px}
.tabela-modulos .tm-mod{display:flex;align-items:flex-start;gap:12px;font-weight:400}
.tabela-modulos .tm-mod b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.tabela-modulos .tm-perg{display:block;font-size:13.5px;color:var(--ink2);margin-top:2px}
.tabela-modulos td{color:var(--ink2)}
.tabela-modulos .tm-acao{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--green-dd);text-decoration:none;white-space:nowrap}
.tabela-modulos .tm-acao:hover{color:var(--green-d)}
.tabela-modulos tr.breve .tm-mod b{color:var(--ink2)}
.tabela-modulos tr.breve td,.tabela-modulos tr.breve .tm-perg{color:var(--ink3)}
@media(max-width:880px){
  /* no celular cada linha vira cartão empilhado; o rótulo da coluna vem de data-rotulo */
  .tabela-modulos,.tabela-modulos tbody,.tabela-modulos tr,.tabela-modulos th,.tabela-modulos td{display:block;width:100%}
  .tabela-modulos{border:0;box-shadow:none;background:transparent}
  .tabela-modulos caption{display:block;width:100%}
  .tabela-modulos thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tabela-modulos tbody tr{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin-bottom:12px;padding:6px 0}
  .tabela-modulos tbody tr.tm-grupo{background:transparent;border:0;box-shadow:none;margin:18px 0 6px;padding:0}
  .tabela-modulos th,.tabela-modulos td{border-bottom:0;padding:8px 16px}
  .tabela-modulos td[data-rotulo]::before{content:attr(data-rotulo);display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:600;margin-bottom:2px}
}


/* ---------- 5 · Trilho de jornada ---------- */
/* horizontal no desktop (paradas lado a lado, ligadas por um fio), vertical até 960px.
   Em breve: névoa no mesmo trilho, no ponto certo da jornada, com o selo "Em breve · fale com a gente".
   .trilho.rico: sempre vertical, para paradas com muito conteúdo (páginas de setor). Nunca rolagem lateral. */
.trilho{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:14px;position:relative}
.trilho::before{content:"";position:absolute;left:0;right:0;top:34px;height:2px;background:linear-gradient(90deg,var(--green),var(--teal));opacity:.35;z-index:0}
.parada{position:relative;z-index:1;flex:1 1 0;display:flex;flex-direction:column;gap:6px;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px 14px 16px}
.parada .p-num{font-family:var(--mono);font-size:11px;color:var(--ink3);letter-spacing:.06em}
.parada .p-cab{display:flex;align-items:center;gap:10px}
.parada .p-cab .ld-mini{width:36px;height:36px;border-radius:9px;flex:none}
.parada .p-cab .ld-mini svg{width:18px;height:18px}
.parada .p-nome{font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.parada .p-quem{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.parada .p-dor{font-size:13.6px;line-height:1.5;color:var(--ink2)}
.parada .p-mod{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:auto;padding-top:8px;font-size:13.2px;font-weight:600;color:var(--ink)}
.parada .p-norma{display:inline-flex;align-self:flex-start;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--ink2);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:3px 9px;text-decoration:none}
a.p-norma:hover{border-color:var(--green);color:var(--green-dd)}
.parada .p-entrega{font-size:13.4px;line-height:1.5;color:var(--ink)}
.parada .p-limite{font-size:12.6px;line-height:1.5;color:var(--ink3)}
.parada details.p-mais>summary{cursor:pointer;font-size:12.8px;font-weight:600;color:var(--green-dd);list-style:none;min-height:32px;display:flex;align-items:center}
.parada details.p-mais>summary::-webkit-details-marker{display:none}
.parada details.p-mais p{font-size:13.2px;line-height:1.5;color:var(--ink2)}
/* névoa: o que vem depois fica no trilho, apagado, sem esconder */
.parada.breve{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(243,244,241,.92));border-style:dashed;border-color:var(--line2);box-shadow:none}
.parada.breve .p-nome,.parada.breve .p-mod{color:var(--ink2)}
.parada.breve .p-dor{color:var(--ink3)}
.parada.breve .cta-interesse,.parada>.cta-interesse{align-self:flex-start;margin-top:4px}
/* selo longo ("Disponível · com o nosso time") quebra dentro da parada, sem vazar; numa linha só, mantém 24px */
.parada .selo{white-space:normal;height:auto;min-height:24px;padding:5px 10px;line-height:1.25}
/* fronteira: onde termina o que respondemos hoje */
.trilho .fronteira{position:relative;z-index:1;flex:0 0 auto;display:flex;align-items:center;justify-content:center;list-style:none}
.trilho .fronteira span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:600;background:var(--bg);padding:4px 8px;border:1px dashed var(--line2);border-radius:999px;white-space:nowrap}
.trilho.rico{flex-direction:column;gap:12px;padding-left:28px}
.trilho.rico .parada{flex:0 0 auto}
.trilho.rico::before{left:10px;right:auto;top:8px;bottom:8px;width:2px;height:auto;background:linear-gradient(180deg,var(--green),var(--teal))}
.trilho.rico .parada::before{content:"";position:absolute;left:-23px;top:22px;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--bg)}
.trilho.rico .parada.breve::before{background:var(--line2)}
.trilho.rico .fronteira{justify-content:flex-start}
@media(max-width:960px){
  .trilho{flex-direction:column;gap:10px;padding-left:28px}
  .trilho .parada{flex:0 0 auto}
  .trilho::before{left:10px;right:auto;top:8px;bottom:8px;width:2px;height:auto;background:linear-gradient(180deg,var(--green),var(--teal))}
  .trilho .parada::before{content:"";position:absolute;left:-23px;top:22px;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--bg)}
  .trilho .parada.breve::before{background:var(--line2)}
  .trilho .fronteira{justify-content:flex-start}
}


/* ---------- 6 · Abas (shared/abas.js) ---------- */
/* sem JS, a lista de abas some e todos os painéis aparecem empilhados, cada um com o seu título */
.abas .aba-lista{display:none}
.abas.js-on .aba-lista{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.abas .aba{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink2);background:var(--card);border:1px solid var(--line);border-radius:999px;cursor:pointer;transition:background-color .2s ease-out,color .2s ease-out,border-color .2s ease-out}
.abas .aba .ld-mini{width:24px;height:24px;border-radius:6px}
.abas .aba .ld-mini svg{width:14px;height:14px}
.abas .aba:hover{color:var(--ink);border-color:var(--line2)}
.abas .aba[aria-selected="true"]{color:var(--green-dd);border-color:var(--green);background:#eef9f2}
.abas .aba:focus-visible{outline:2px solid var(--green-d);outline-offset:3px}
.abas .painel+.painel{margin-top:40px}
.abas.js-on .painel+.painel{margin-top:0}
.abas.js-on .painel[hidden]{display:none}
.abas.js-on .painel .painel-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:560px){
  .abas.js-on .aba-lista{display:grid;grid-template-columns:1fr 1fr}
  .abas .aba{justify-content:center;padding:0 10px}
}


/* ---------- 7 · Fluxo pronto ---------- */
.fluxo{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px 24px}
.fluxo .fl-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.fluxo .fl-nome{font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.fluxo .fl-lema{font-size:15px;color:var(--ink2)}
.fluxo .fl-passos{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 0;align-items:center}
.fluxo .fl-passo{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink);padding:6px 10px 6px 6px;background:var(--bg);border:1px solid var(--line);border-radius:999px}
.fluxo .fl-passo+.fl-passo{margin-left:26px;position:relative}
.fluxo .fl-passo+.fl-passo::before{content:"";position:absolute;left:-27px;top:50%;width:26px;height:2px;background:linear-gradient(90deg,var(--green),var(--teal));opacity:.5}
.fluxo .fl-passo.breve{background:#fff;border-style:dashed;border-color:var(--line2);color:var(--ink2)}
.fluxo .fl-passo.breve+.fl-passo::before,.fluxo .fl-passo+.fl-passo.breve::before{background:var(--line2);opacity:1}
.fluxo .fl-pe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.fluxo .fl-pe dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.fluxo .fl-pe dd{font-size:14px;line-height:1.5;color:var(--ink2);margin:4px 0 0}
@media(max-width:880px){
  .fluxo .fl-passos{flex-direction:column;align-items:flex-start;gap:12px}
  .fluxo .fl-passo+.fl-passo{margin-left:0}
  .fluxo .fl-passo+.fl-passo::before{left:18px;top:-13px;width:2px;height:12px}
  .fluxo .fl-pe{grid-template-columns:1fr}
  /* o selo longo ("Disponível · com o nosso time") desce para a linha de baixo e o nome quebra ao lado do ícone:
     a pílula não empurra a página para o lado a 375px (passada final, base, 28/09) */
  .fluxo .fl-passo{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;max-width:100%;border-radius:14px}
  .fluxo .fl-passo .selo{grid-column:1/-1;justify-self:start;white-space:normal;height:auto;min-height:24px;padding:5px 10px;line-height:1.25}
}


/* ---------- 8 · Entradas: por onde se entra ---------- */
.entradas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.entradas li{display:flex;align-items:flex-start;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.entradas li b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.entradas li .en-nota{display:block;font-size:13px;line-height:1.5;color:var(--ink2);margin-top:2px}
.entradas li>span{min-width:0}
.entradas li .selo{margin-top:8px;white-space:normal;height:auto;min-height:24px;padding:5px 10px;line-height:1.25}
.entradas li.breve,.entradas li.fora{background:transparent;border-style:dashed}
.entradas li.breve b,.entradas li.fora b{color:var(--ink2)}
/* entrada que não fazemos hoje: uma frase embaixo da lista, sem selo (V02 do cético de voz) */
.entradas-fora{margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--ink2);max-width:62ch}


/* ---------- 9 · Norma (guias em /normas) ---------- */
.autoria{font-size:13.5px;line-height:1.6;color:var(--ink3)}
.autoria b{color:var(--ink2);font-weight:600}
.norma-datas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.norma-datas>div{background:var(--card);padding:16px 18px}
.norma-datas dt,.norma-datas .nd-rot{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.norma-datas dd,.norma-datas .nd-data{font-family:var(--mono);font-size:20px;font-weight:500;color:var(--ink);margin:6px 0 0}
.norma-datas .nd-o-que{display:block;font-size:13.5px;line-height:1.5;color:var(--ink2);margin-top:4px;font-family:'Bai Jamjuree',sans-serif;font-weight:400}
.norma-tabela{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.norma-tabela caption{text-align:left;font-size:13px;color:var(--ink3);padding-bottom:8px}
.norma-tabela th,.norma-tabela td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.norma-tabela thead th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:600;background:var(--bg)}
.norma-tabela tbody tr:last-child>*{border-bottom:0}
.norma-checklist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.norma-checklist li{position:relative;padding-left:32px;font-size:15px;line-height:1.55;color:var(--ink)}
.norma-checklist li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:6px;border:2px solid var(--green);background:#fff}
.norma-fontes{margin:0;padding-left:22px;font-size:14px;line-height:1.6;color:var(--ink2)}
.norma-fontes li+li{margin-top:6px}
.norma-fontes a{color:var(--green-dd);font-weight:500;overflow-wrap:anywhere}
.ressalva{border-left:3px solid var(--line2);background:var(--bg);border-radius:0 var(--radius) var(--radius) 0;padding:14px 18px;font-size:14px;line-height:1.6;color:var(--ink2)}
@media(max-width:560px){
  /* tabela de norma no celular: cada linha vira bloco, sem rolagem lateral */
  .norma-tabela,.norma-tabela tbody,.norma-tabela tr,.norma-tabela th,.norma-tabela td{display:block;width:100%}
  .norma-tabela thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .norma-tabela tbody tr{border-bottom:1px solid var(--line)}
  .norma-tabela td{border-bottom:0;padding:6px 14px}
  .norma-tabela td[data-rotulo]::before{content:attr(data-rotulo);display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:600}
  .norma-tabela caption{display:block;width:100%;padding:12px 14px 6px}
}


/* ---------- 10 · Interesse: "Fale com a gente" já preenchido ---------- */
/* href estático no HTML (o portão confere e o robô lê); data-interesse e data-origem contam a procura */
.cta-interesse{display:inline-flex;align-items:center;gap:6px;min-height:40px;white-space:nowrap;padding:0 14px;border-radius:var(--radius);border:1px solid var(--line2);background:#fff;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .2s ease-out,color .2s ease-out}
.cta-interesse:hover{border-color:var(--green);color:var(--green-dd)}


/* ---------- movimento ---------- */
@media(prefers-reduced-motion:reduce){
  .card-area,.card-modulo,.abas .aba,.cta-interesse{transition:none}
  .card-area:hover,.card-modulo:hover{transform:none}
}


/* ============================================================
   11 a 15 · passada final (P1, 28/09 noite)
   Pacote visual da direção de arte (visual/codigo/v2-visual.css) e o BRILHO pedido pelo Pedro:
   "cor do sol, nascer do sol, na floresta... bem com brilho certo... Pode manter do mesmo jeito,
   só brilho a mais." Layout, tipografia e sobriedade ficam. Sem neon, contraste AA medido.
   Gradiente só nos quatro lugares da DIRECAO-VISUAL E3 (faixa de propósito, capa de guia e og,
   fios de 2 px, pintura do topo de card), mais a luz sobre foto que o Pedro pediu.
   ============================================================ */
:root{
  /* luz de sol: nascer e pôr do sol. Só as duas últimas servem de texto. */
  --sol-luz:#fff4dc;         /* brilho, nunca texto */
  --sol-claro:#f4d198;       /* dourado claro: texto só sobre fundo escuro (12,3:1 sobre #0c1a12) */
  --sol-ambar:#e9b474;       /* âmbar: fio, ladrilho, luz; nunca texto sobre claro */
  --sol-fundo:#c98a2b;       /* âmbar de fim de tarde: fio e ícone grande, nunca texto pequeno */
  --sol-texto:#8a5a00;       /* dourado de texto sobre claro: 5,55:1 no off-white, 5,93:1 no branco */
  --fio-sol:linear-gradient(90deg,var(--green) 0%,#8fd07a 58%,var(--sol-ambar) 100%);
  --mv-passo:140ms;--mv-parada:.42s;--mv-hover:.3s;--mv-menu:.2s;
  --ease-saida:ease-out;--ease-estado:cubic-bezier(.4,0,.2,1);
}

/* ---------- 11 · Tamanhos do ladrilho (um desenho, oito medidas) ---------- */
.ld-mini.t-20{width:20px;height:20px;border-radius:5px}.ld-mini.t-20 svg{width:12px;height:12px}
.ld-mini.t-24{width:24px;height:24px;border-radius:6px}.ld-mini.t-24 svg{width:14px;height:14px}
.ld-mini.t-28{width:28px;height:28px;border-radius:8px}.ld-mini.t-28 svg{width:16px;height:16px}
.ld-mini.t-36{width:36px;height:36px;border-radius:9px}.ld-mini.t-36 svg{width:18px;height:18px}
.ld.t-56{width:56px;height:56px}.ld.t-56 svg{width:24px;height:24px}
.ld.t-64{width:64px;height:64px}.ld.t-64 svg{width:28px;height:28px}
.ld.t-76{width:76px;height:76px}.ld.t-76 svg{width:32px;height:32px}
.ld.t-120{width:120px;height:120px;border-radius:16px}.ld.t-120 svg{width:52px;height:52px}

/* ---------- 12 · Vidro sobre foto e resposta (sem restrição · com restrição · dados insuficientes) ---------- */
.vidro{color:#fff;border-radius:var(--radius);border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04)),rgba(8,22,14,.56);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:0 32px 70px -36px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,236,200,.22)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.vidro{background:rgba(8,22,14,.9)}}
.vidro .selo.disp{background:rgba(26,191,110,.26);color:#c9f7e0}
.vidro .selo.disp.time{background:rgba(25,198,161,.22);color:#c6f5ea;box-shadow:inset 0 0 0 1px rgba(25,198,161,.45)}
.vidro .selo.breve{background:transparent;color:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.vidro .cta-interesse{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.42)}
.vidro .cta-interesse:hover{background:rgba(255,255,255,.16);border-color:var(--sol-claro);color:#fff}
.res{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.res svg{width:14px;height:14px;flex:none}
.res.s{background:#e6f6ec;color:var(--green-dd)}
.res.c{background:#fbeedb;color:#8a4b06}
.res.p{background:#fff;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line2)}
.vidro .res.s{background:rgba(26,191,110,.26);color:#c9f7e0}
.vidro .res.c{background:rgba(233,180,116,.26);color:#ffe2bd}
.vidro .res.p{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}

/* ---------- 13 · Movimento (só com html.mv-on, posto por shared/v2-movimento.js) ---------- */
/* Trilho: cada parada disponível acende em sequência e o fio aceso para na última disponível.
   Névoa nunca acende. Horizontal acima de 960 px; vertical até 960 px e sempre no .trilho.rico,
   no mesmo lugar do ::before do .trilho (§5). A página que desloca o fio declara --fio-esq, --fio-dir,
   --fio-topo (horizontal) e --fio-v-esq, --fio-v-topo (vertical), iguais ao ::before dela. */
.mv-on .trilho::after{content:"";position:absolute;z-index:0;pointer-events:none;
  left:var(--fio-esq,0);right:var(--fio-dir,0);top:var(--fio-topo,34px);height:2px;background:var(--fio-sol);
  transform-origin:0 50%;transform:scaleX(0);transition:transform var(--dur-fio,1s) var(--ease-saida)}
.mv-on .trilho.aceso::after{transform:scaleX(var(--fim,1))}
.mv-on .trilho.rico::after{left:var(--fio-v-esq,10px);right:auto;top:var(--fio-v-topo,8px);bottom:var(--fio-v-topo,8px);width:2px;height:auto;
  background:linear-gradient(180deg,var(--green),#8fd07a 58%,var(--sol-ambar));transform-origin:50% 0;transform:scaleY(0)}
.mv-on .trilho.rico.aceso::after{transform:scaleY(var(--fim,1))}
@media(max-width:960px){
  .mv-on .trilho::after{left:var(--fio-v-esq,10px);right:auto;top:var(--fio-v-topo,8px);bottom:var(--fio-v-topo,8px);width:2px;height:auto;
    background:linear-gradient(180deg,var(--green),#8fd07a 58%,var(--sol-ambar));transform-origin:50% 0;transform:scaleY(0)}
  .mv-on .trilho.aceso::after{transform:scaleY(var(--fim,1))}
}
.mv-on .trilho>.parada:not(.breve){transition:opacity var(--mv-parada) var(--ease-saida) calc(var(--i,0) * var(--mv-passo)),transform var(--mv-parada) var(--ease-saida) calc(var(--i,0) * var(--mv-passo))}
.mv-on .trilho>.parada:not(.breve) .ld-mini{transition:filter var(--mv-parada) var(--ease-saida) calc(var(--i,0) * var(--mv-passo) + 120ms),opacity var(--mv-parada) var(--ease-saida) calc(var(--i,0) * var(--mv-passo) + 120ms)}
.mv-on .trilho:not(.aceso)>.parada:not(.breve){opacity:.42;transform:translateY(8px)}
.mv-on .trilho:not(.aceso)>.parada:not(.breve) .ld-mini{filter:grayscale(1);opacity:.6}
/* números: o valor é fixo no HTML; só o fio de 2 px cresce, do verde ao dourado */
.nums .stat-c{position:relative}
.mv-on .nums .stat-c::after{content:"";position:absolute;left:30px;right:30px;bottom:0;height:2px;border-radius:2px;background:var(--fio-sol);
  transform-origin:0 50%;transform:scaleX(0);transition:transform .6s var(--ease-saida) calc(var(--i,0) * 80ms + 150ms)}
.mv-on .nums.aceso .stat-c::after{transform:scaleX(1)}
/* troca de aba: o painel novo sobe 10 px */
@keyframes mv-painel{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mv-on .abas.js-on .painel:not([hidden]){animation:mv-painel .3s var(--ease-saida)}
/* card: teclado igual ao mouse */
.card-modulo:focus-within,.card-area:focus-within{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line2)}
.card-modulo,.card-area{transition:transform var(--mv-hover) var(--ease-estado),box-shadow var(--mv-hover) var(--ease-estado),border-color var(--mv-hover) var(--ease-estado)}
/* mega-menu: colunas em cascata de 40 ms (a seta parada e o fio verde moram no styles.css) */
@keyframes mv-cai{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mv-on .mm[data-open="true"] .mv-col{animation:mv-cai .24s var(--ease-saida) both;animation-delay:calc(var(--i,0) * 40ms)}
/* calmo: "reduzir movimento" vê o estado final, e a impressão também */
.mv-calmo .trilho::after,.mv-calmo .trilho>.parada,.mv-calmo .trilho .ld-mini,.mv-calmo .nums .stat-c::after{transition:none!important}
.mv-calmo .abas.js-on .painel,.mv-calmo .mm .mv-col{animation:none!important}
.mv-calmo .card-modulo:hover,.mv-calmo .card-area:hover,.mv-calmo .card-modulo:focus-within,.mv-calmo .card-area:focus-within{transform:none}
@media print{.trilho>.parada{opacity:1!important;transform:none!important}.trilho .ld-mini{filter:none!important;opacity:1!important}}

/* ---------- 14 · BRILHO: luz de sol ---------- */
/* fotos do banco mais quentes e luminosas: a mesma cena, com luz de fim de tarde por cima (CSS, nada gerado) */
.hero .bg img,.card-area .ca-foto img,.foto-sol img{filter:saturate(1.08) brightness(1.04) contrast(1.02)}
.hero .bg::after,.card-area .ca-foto picture::after,.foto-sol::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 80% at 86% 8%,rgba(255,206,138,.5),rgba(255,190,110,.16) 46%,transparent 72%);mix-blend-mode:soft-light}
.card-area .ca-foto picture{position:relative;overflow:hidden}
/* luz atrás de um bloco que flutua sobre foto (card do topo): mora sobre a foto, não no fundo da seção */
.brilho-atras{position:relative;isolation:isolate}
/* a luz nasce na borda direita do bloco e se abre para fora dele: debaixo do vidro ela derrubava o AA do texto
   pequeno do card em /terra-intelligence e nos setores (P1 do cético de design, 28/09). Medido por pixel com o
   texto apagado: com a luz em 70% da largura o selo e os artigos da coluna direita caíam para 3,3 a 3,9:1; a
   partir de 92%, tudo passa de 4,5:1 nas três páginas, a 375 e a 1440 px. A home tem luz própria (home.tpl). */
.brilho-atras::before{content:"";position:absolute;z-index:-1;inset:-20% -34% -20% 92%;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,206,138,.46),rgba(255,186,104,.16) 58%,transparent 100%);filter:blur(28px)}
/* luz de sol numa faixa de foto (propósito, manifesto): um só ponto de luz, no alto, do lado da cena */
.sol-luz{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(46% 70% at 84% 4%,rgba(255,214,150,.62),rgba(255,190,110,.2) 44%,transparent 72%);mix-blend-mode:screen}
/* ladrilho: toque dourado na pintura (luz vinda do alto à direita) e no ladrilho branco */
.ld-top::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(34% 64% at 86% 6%,rgba(255,226,166,.62),rgba(255,214,150,.18) 52%,transparent 74%)}
.f-nevoa.ld-top::before,.f-neutro.ld-top::before,.f-mata.ld-top::before{display:none}
.ld{background:linear-gradient(180deg,#fff 0%,#fffaf0 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(233,180,116,.22),0 10px 26px -12px rgba(120,80,20,.3),0 2px 6px -2px rgba(16,25,19,.12)}
.f-nevoa .ld{background:#fff;box-shadow:0 6px 16px -10px rgba(16,25,19,.2)}
.ld-mini.f-verde,.ld-mini.f-ambar,.ld-mini.f-ceu,.ld-mini.f-terra,.ld-mini.f-floresta,.ld-mini.f-ardosia{
  box-shadow:inset 0 1px 0 rgba(255,246,226,.9),inset 0 0 0 1px rgba(233,180,116,.18)}
/* números: o número segue verde; a unidade ganha o dourado de texto (AA) */
.stat-c .v small,.stat .n small{color:var(--sol-texto)}

/* ---------- 15 · Botão principal no AA e chamada final clara ---------- */
/* #1ABF6E com texto branco dava 2,41:1 (pendência de produção 8). O verde da marca fica no fundo;
   o texto vira tinta: 7,45:1 no #1ABF6E e 4,87:1 no hover (#15994f). */
.btn-p{color:var(--ink)}
.btn-p:hover{color:var(--ink)}
.btn-p:focus-visible{outline-color:var(--ink)}
/* chamada final das páginas internas: fundo claro, sem foto, igual à da home (DECISOES 16, acabamento).
   Uso: <section class="sec cta-final" id="comecar"><div class="wrap-narrow"><h2>..</h2><p class="lead">..</p>
   <div class="cta"><a class="btn btn-p btn-lg">..</a><a class="btn btn-o btn-lg">..</a></div><p class="offer">..</p></div></section> */
.cta-final{padding:var(--sec-y) 0!important;text-align:center;border-top:1px solid var(--line)}
.cta-final h2{max-width:24ch;margin:0 auto;color:var(--ink);font-weight:600}
.cta-final .lead{margin:18px auto 0!important;max-width:54ch;text-wrap:balance}
.cta-final .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.cta-final .btn-o{background:var(--card)}
.cta-final .offer{margin-top:18px;font-size:14px;line-height:1.6;color:var(--ink2)}
.cta-final .offer a{color:var(--ink);font-weight:600;text-underline-offset:4px}
@media(max-width:560px){.cta-final{text-align:left}.cta-final h2,.cta-final .lead{margin-left:0!important}.cta-final .cta{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){.card-area,.card-modulo{transition:none}}
@media print{.brilho-atras::before,.sol-luz,.hero .bg::after{display:none}}

/* ---------- 16 · Correção final (28/09, noite): AA e acabamento ---------- */
/* selo em coluna estreita: cada parte do rótulo inteira (build-chrome.selo põe .sp em cada parte) */
.selo .sp{white-space:nowrap}
/* sobrancelha do topo sobre foto no celular: o teal de 11 px ficava abaixo de 4,5:1 (P2-3 do design) */
@media(max-width:560px){.hero .eyebrow{color:#7ef0c0}}
/* verde de texto pequeno: #15994f dá 3,3 a 3,7:1 no claro; texto pequeno usa --green-dd (DIRECAO-VISUAL A5) */
.pill.mint,.door .go,.mm .mm-more,.foot-mark .contact a,#como-funciona .num,.tr .tr-tag,.tr-more>summary{color:var(--green-dd)}
/* foto do card do Conecta: a porteira ao pôr do sol já vem no limite de saturação, fica sem o filtro quente (P2-7) */
.card-area.ca-conecta .ca-foto img{filter:none}
.card-area.ca-conecta .ca-foto picture::after{display:none}