/* ============================================================
   MOLDURA FLORAL — geometria medida em pixel.
   O elemento de continuidade é o PAINEL AZUL com filete dourado.
   Canto: painel do braço = 10,1% (hor) e 14,0% (vert) dele.
   Tiras escaladas para que o painel case exatamente:
     canto 260px -> tira hor 56px de altura, tira vert 51px de largura.
   Tiras costuram sozinhas (caule entra e sai no mesmo ponto).
   ============================================================ */
:root{
  color-scheme: light only;
  /* Geometria medida: canto 250px -> braço hor 35,7px / braço vert 40,5px.
     Tiras escaladas para casar esses painéis (52% da tira = painel). */
  --CT:250px; --FH:69px; --FV:78px;

  /* PALETA — revivida com o valor que o site JÁ RENDERIZA hoje (o fallback
     atual), só para matar a fragilidade de var() indefinida (que virava
     transparente/cinza por acaso). NÃO muda a aparência. Onde o valor diverge
     do design pretendido é intencional: "acender" a cor certa é fase separada,
     peça por peça, com prova visual de cada uma.
     Ficam INDEFINIDAS de propósito (defini-las mudaria a aparência agora):
       --ouro, --azul, --azul-esc  (texto + fundo/hover: misto, sem valor único)
       --perg                      (painéis .cartela: o gradiente #fffdf9->creme
                                    hoje cai para transparente; definir o acende)
       --perg-2                    (fundos de painel hoje transparentes)
       --azul-nev                  (sublinhado hoje ausente: qualquer cor o acende)
       --linha                     (bordas hoje inexistentes; decisão visual à parte) */
  --tinta:#1b2732;     /* texto principal — já é este tom (herda do body) */
  --tinta-fr:#1b2732;  /* texto secundário — hoje idêntico ao principal */
  --ouro-cl:#ffffff;   /* R$ do resultado e rótulos do painel escuro — hoje brancos */
}
/* Trava o esquema claro sem cascatear sobre os painéis internos. */
@media (prefers-color-scheme: dark){
  :root{ color-scheme: light only; }
  html{ background:#f4efe8 !important; }
  body{ background:#f3ece0 !important; }
}

/* ===== BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;scroll-padding-top:64px;
  background:#f4efe8 !important;   /* tom da arte do celular (moldura alta): mata a faixa branca no overscroll do iPhone */
}
body{
  background:#f3ece0 !important;
  color:#1b2732;
  font-family:'Inter',system-ui,sans-serif;font-weight:300;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding:26px 20px;
}
img{max-width:100%;display:block}

.folha{
  --pad-h:clamp(66px,8vw,96px);   /* padding lateral; usado também no breakout das seções */
  max-width:1080px;margin:0 auto;
  background:#faf6ee;
  box-shadow:0 16px 60px rgba(0,48,79,.14),0 2px 8px rgba(0,48,79,.06);
  position:relative;
  padding:clamp(70px,8.5vw,104px) var(--pad-h);
  isolation:isolate;
}

/* TIRAS — correm POR BAIXO das cantoneiras (z-index 1 vs 2).
   Avançam 55% para dentro delas: não sobra vão. */
.fr{position:absolute;pointer-events:none;z-index:1}
.fr-t,.fr-b{
  left:calc(var(--CT) * 0.55);right:calc(var(--CT) * 0.55);height:var(--FH);
  background:url('../assets/ornamentos/moldura-horizontal.webp') repeat-x left top/auto var(--FH);
}
.fr-t{top:0}
.fr-b{bottom:0;transform:scaleY(-1)}

.fr-l,.fr-r{
  top:calc(var(--CT) * 0.55);bottom:calc(var(--CT) * 0.55);width:var(--FV);
  background:url('../assets/ornamentos/moldura-vertical.webp') repeat-y left top/var(--FV) auto;
}
.fr-l{left:0}
.fr-r{right:0;transform:scaleX(-1)}

/* CANTONEIRAS — tamanho fixo, cobrem a junção */
.kc{
  position:absolute;width:var(--CT);height:var(--CT);
  background:url('../assets/ornamentos/moldura-canto.webp') no-repeat left top/100% 100%;
  pointer-events:none;z-index:2;
}
.kc-tl{top:0;left:0}
.kc-tr{top:0;right:0;transform:scaleX(-1)}
.kc-bl{bottom:0;left:0;transform:scaleY(-1)}
.kc-br{bottom:0;right:0;transform:scale(-1,-1)}

.miolo{position:relative;z-index:3}

/* ============================================================
   PAINÉIS INTERNOS — cantoneira floral leve nos dois cantos
   diagonais (sup. esq. e inf. dir.). A moldura da folha
   permanece intacta.
   ============================================================ */
.cartela{
  position:relative;
  border-radius:7px;
  overflow:hidden;
  background:linear-gradient(180deg,#fffdfa,#faf6ee);
  /* A LINHA — é a borda do painel. Corre de canto a canto por definição:
     não há vão nem degradê possível. As cantoneiras (z-index 2) pousam
     sobre ela nas quatro pontas e a interrompem. Ouro antigo #AA8B60. */
  border:1px solid rgba(170,139,96,.68);
  box-shadow:
    inset 0 0 0 1px #fffdfa,
    inset 0 0 0 2px rgba(170,139,96,.18),
    0 2px 12px rgba(0,70,128,.05);
}
/* As cantoneiras internas dos painéis foram removidas — com as cantoneiras
   diagonais grandes na seção, as pequenas viravam sujeira. Fica só o filete
   duplo em ouro (border + box-shadow acima). */
.cartela > *{position:relative;z-index:1}

/* linhas retas suavizadas — sem tocar na moldura */
.campo select,.campo input,.im-linha input{
  border:1px solid rgba(170,139,96,.5) !important;
  border-radius:7px !important;
  background:#fffdfa !important;
}
.campo select:focus,.campo input:focus,.im-linha input:focus{
  border-color:#004680 !important;
  box-shadow:0 0 0 3px rgba(0,70,128,.08);
  outline:none;
}
.btn,.chk{
  display:flex;align-items:center;gap:11px;
  padding:13px 15px;margin-top:4px;
  border:1px solid rgba(170,139,96,.5);border-radius:7px;
  background:#fffdfa;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--tinta);
  transition:border-color .2s,background .2s;
}
.btn-add{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;margin-top:12px;padding:13px 16px;
  border:1px solid rgba(170,139,96,.5);
  border-radius:7px;
  background:#fffdfa;
  color:#004680;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:500;letter-spacing:.02em;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.btn-add .mais{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;flex:none;
  border:1px solid rgba(170,139,96,.7);border-radius:50%;
  color:#aa8b60;font-size:14px;line-height:1;font-weight:400;
  transition:.2s;
}
.im-linha .rm{border-radius:50% !important;width:30px;height:30px}

/* listas e contato: pontilhado, marcador circular */
.classe li{border-bottom:1px dotted rgba(170,139,96,.42) !important}
.classe li::before{
  width:5px !important;height:5px !important;top:15px !important;
  border-radius:50%;opacity:.75;
}
.ct-l{border-bottom:1px dotted rgba(170,139,96,.42) !important}
.calc-f{border-right:1px dotted rgba(170,139,96,.45) !important}
.calc-o .mem{border-top:1px dotted rgba(215,186,134,.5) !important}
.calc-o{
  margin:22px 0 24px;padding:26px 24px;
  background:#00304f;color:#fff;border-radius:7px;
  position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(215,186,134,.5);
}


/* ============ CABEÇALHO ============ */
.topo{text-align:center;padding:10px 0 30px;border-bottom:1px solid var(--linha);position:relative}
.topo::after{
  content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
  width:120px;height:1px;background:var(--ouro);
}
.selo{width:clamp(108px,15vw,146px);margin:0 auto 16px;filter:drop-shadow(0 10px 26px rgba(0,70,128,.18))}
/* cartela horizontal do cabeçalho — RGBA sem fundo, dissolve no pergaminho como
   as vinhetas. Sem box-shadow nem border-radius: o creme opaco foi removido por
   flood fill, então sombra e cantos arredondados só desenhariam um cartão fantasma. */
.cartela-topo{
  display:block;width:100%;max-width:940px;height:auto;
  margin:4px auto 22px;
}
.wordmark{
  font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:clamp(25px,4.2vw,42px);line-height:1.06;
  color:var(--azul);letter-spacing:.02em;text-transform:uppercase;
}
.subwordmark{
  font-family:'Cormorant Garamond',serif;font-size:clamp(12px,1.6vw,15px);
  letter-spacing:.34em;text-transform:uppercase;color:var(--ouro);
  margin-top:10px;font-weight:500;
}
.cns-topo{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;
  color:var(--tinta-fr);margin-top:9px;text-transform:uppercase;
}

/* menu — fixo no topo ao rolar (sticky), fundo pergaminho opaco.
   Sentinela de 1px logo acima: quando ela sai do topo, a barra "descola"
   e ganha sombra (classe .stuck via IntersectionObserver em js/ui.js). */
.menu-sent{height:1px}
.menu{
  position:sticky;top:0;z-index:50;background:#faf6ee;
  display:flex;justify-content:safe center;flex-wrap:nowrap;gap:0;
  overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid rgba(170,139,96,.28);transition:box-shadow .24s;
}
.menu::-webkit-scrollbar{display:none}
.menu.stuck{box-shadow:0 8px 20px -10px rgba(0,48,79,.30)}
.menu a{
  font-family:'Cormorant Garamond',serif;font-size:15px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--azul-esc);white-space:nowrap;
  text-decoration:none;padding:15px 17px;position:relative;transition:color .22s;
}
.menu a+a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:13px;background:var(--linha)}
.menu a:hover{color:var(--ouro)}

/* ============ HERÓI ============ */
.hero{text-align:center;padding:52px 0 46px}
.lema{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--ouro);margin-bottom:20px;
}
h1{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(30px,5.2vw,50px);line-height:1.1;
  color:var(--azul-esc);letter-spacing:.03em;text-transform:uppercase;
  margin-bottom:22px;
}
h1 em{font-style:italic;text-transform:none;color:var(--azul);font-weight:500;letter-spacing:.01em}
.hero .intro{font-size:15.5px;color:var(--tinta-fr);max-width:55ch;margin:0 auto 30px;line-height:1.85}
.acoes{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

/* ============ BOTÕES ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:13px 24px;border-radius:3px;
  font-family:'Cormorant Garamond',serif;font-size:15.5px;font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;
  text-decoration:none;transition:.24s;cursor:pointer;
  line-height:1.2;text-align:center;
  white-space:nowrap;               /* não quebra o rótulo */
}
.btn img{width:20px;flex:none}
.btn-p{background:#004680;color:#fff;border:1px solid var(--ouro);box-shadow:inset 0 0 0 1px rgba(215,186,134,.3)}
.btn-p:hover{background:var(--azul-esc);box-shadow:inset 0 0 0 1px rgba(215,186,134,.55),0 6px 18px rgba(0,48,79,.22);transform:translateY(-1px)}
.btn-p img{
  opacity:1;
  background:var(--perg);border-radius:50%;
  box-shadow:0 0 0 1px var(--ouro);
}
/* Botão do WhatsApp da subpágina: medalhão ACIMA do texto, centrado sob o
   painel de resultado, largura do próprio conteúdo (decisão do titular 17/07). */
.btn-wa{
  background:#00304f;color:#fff;border:1px solid var(--ouro);box-shadow:inset 0 0 0 3px rgba(215,186,134,.30);
  display:flex;flex-direction:column;align-items:center;
  width:max-content;margin:18px auto 0;      /* fit-content, centralizado */
  gap:9px;padding:16px 30px;
}
.btn-wa:hover{box-shadow:inset 0 0 0 3px rgba(215,186,134,.5),0 6px 18px rgba(0,48,79,.28);transform:translateY(-1px)}
/* Foco visível próprio: a regra global :focus-visible usa var(--ouro), que é
   deixada indefinida no :root (outline cai para none). Cor literal navy sobre
   o pergaminho — mesmo padrão do foco das portas da landing (linha ~889). */
.btn.btn-wa:focus-visible{outline:2px solid #00304f;outline-offset:3px}
.btn.btn-wa img{width:56px;height:56px;flex:none}   /* .btn.btn-wa vence o .btn img{18px} do ≤600 */
.btn-s{background:transparent;color:var(--azul);border:1px solid var(--ouro);box-shadow:inset 0 0 0 1px rgba(170,139,96,.2)}
.btn-s:hover{background:#fff;border-color:var(--azul);transform:translateY(-1px)}

/* ============ TÍTULOS DE SEÇÃO ============ */
.tit-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0 0 30px}
/* vinheta de cabeça: exibe a 440px; width/height reais no <img> reservam a altura (CLS 0) */
.tit-vinheta{display:block;width:440px;max-width:100%;height:auto}
.tit{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin:0;flex-wrap:nowrap;
}
.tit::before,.tit::after{content:"";height:1px;flex:1;min-width:14px;max-width:120px;background:linear-gradient(90deg,transparent,var(--ouro))}
.tit::after{background:linear-gradient(90deg,var(--ouro),transparent)}
.tit h2, .tit h1{   /* h1 nas subpáginas do portal (template de Emolumentos) */
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(19px,2.8vw,29px);color:#00304f;
  letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;line-height:1.2;
}

section{padding:46px 0;border-top:1px solid var(--linha)}
.sub-sec{text-align:center;color:var(--tinta-fr);font-size:14.5px;max-width:60ch;margin:-16px auto 32px;line-height:1.8}

/* ============ SERVIÇOS ============ */
.svc-lista{display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto}
.svc{
  display:flex;align-items:flex-start;gap:18px;
  padding:26px 32px;border-radius:3px;text-decoration:none;color:inherit;
  border:1px solid var(--linha);
  box-shadow:inset 0 0 0 1px var(--perg);
  background:linear-gradient(180deg,#fffdf9,var(--perg));
  transition:.24s;
}
.svc:hover{transform:translateX(4px);border-color:var(--azul);box-shadow:inset 0 0 0 1px var(--perg),0 6px 20px rgba(0,70,128,.08)}
.svc .ic{
  width:46px;height:46px;flex:none;
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.svc .ic img{width:46px;height:46px;display:block}
.svc > span:nth-child(2){flex:1;min-width:0}
.svc h3{
  font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;
  color:#004680;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:5px;line-height:1.25;
}
.svc p{font-size:13px;color:var(--tinta-fr);line-height:1.6}
.svc .seta{margin-left:auto;color:var(--ouro);font-size:22px;flex:none;transition:.24s}
.svc:hover .seta{color:var(--azul);transform:translateX(3px)}

/* ============ VIRTUDES ============ */
.virtudes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:790px;margin:0 auto;text-align:center}
.vt .emb{
  width:72px;height:72px;margin:0 auto 15px;
  display:flex;align-items:center;justify-content:center;
}
.vt .emb img{width:72px;height:72px;display:block}
.vt h3{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;color:var(--azul-esc);letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px}
.vt .sub{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ouro);margin-bottom:9px}
.vt .sub em{font-style:italic}
.vt p{font-size:12.5px;color:var(--tinta-fr);line-height:1.65}

/* ============ CLASSES ============ */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:860px;margin:0 auto}
.classe{
  padding:38px 34px;border:1px solid var(--linha);border-radius:3px;
  box-shadow:inset 0 0 0 1px var(--perg);background:linear-gradient(180deg,#fffdf9,var(--perg));
  display:flex;flex-direction:column;
}
.classe .num{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--ouro);margin-bottom:10px}
.classe h3{font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:600;color:var(--azul-esc);margin-bottom:12px;letter-spacing:.06em;text-transform:uppercase}
.classe>p{font-size:13.5px;color:var(--tinta-fr);line-height:1.75;margin-bottom:18px}
.classe ul{list-style:none;margin-bottom:22px;flex:1}
.classe li{font-size:13px;padding:7px 0 7px 17px;border-bottom:1px solid rgba(170,139,96,.18);position:relative}
.classe li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:1px;background:var(--ouro)}
.classe li:last-child{border-bottom:none}
.classe .btn{align-self:flex-start;font-size:14px;padding:10px 20px 10px 13px}
.classe .btn img{width:18px}

/* ============ CALCULADORA ============ */
.calc{
  display:block;max-width:640px;margin:0 auto;
  border:1px solid var(--linha);box-shadow:inset 0 0 0 1px var(--perg);border-radius:3px;overflow:hidden;
}
.calc-f{padding:30px 26px;background:linear-gradient(180deg,#fffdf9,var(--perg));border-right:1px solid var(--linha)}
.calc-o{padding:32px 28px;background:#00304f;color:#fff;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.calc-o::before{content:"";position:absolute;right:-56px;top:-56px;width:200px;height:200px;background:url('../assets/brasao/brasao.webp') center/contain no-repeat;opacity:.05}
.campo{margin-bottom:18px}
.campo label{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro);margin-bottom:7px}
.campo select,.campo input{width:100%;padding:11px 12px;border:1px solid var(--linha);background:#fff;font-family:inherit;font-size:14px;color:var(--tinta);border-radius:2px}
.campo select:focus,.campo input:focus{outline:none;border-color:var(--azul)}
.campo .dica{font-size:11px;color:var(--tinta-fr);margin-top:6px;line-height:1.55}
.campo .dica strong{color:var(--tinta);font-weight:500}
.chk{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;margin-top:4px;
  border:1px solid rgba(170,139,96,.5);border-radius:7px;
  background:#fffdfa;cursor:pointer;font-size:13.5px;color:var(--tinta);
  transition:border-color .2s,background .2s;
}
.btn-add{
  margin-top:10px;padding:9px 14px;border:1px dashed var(--ouro);
  background:transparent;color:var(--azul);border-radius:2px;cursor:pointer;
  font-family:inherit;font-size:12.5px;letter-spacing:.03em;transition:.2s;width:100%;
}
.btn-add:hover{background:#fff;border-style:solid}
.im-linha{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.im-linha .im-rot{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-fr);width:62px;flex:none;
}
.im-linha input{flex:1;padding:10px 11px;border:1px solid var(--linha);background:#fff;font-family:inherit;font-size:13.5px;border-radius:2px}
.im-linha input:focus{outline:none;border-color:var(--azul)}
.im-linha .rm{
  width:28px;height:28px;flex:none;border:1px solid var(--linha);background:transparent;
  color:var(--tinta-fr);border-radius:2px;cursor:pointer;font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.im-linha .rm:hover{border-color:#a33;color:#a33}
.calc-o .rot{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ouro-cl);margin-bottom:11px}
.calc-o .nome{font-family:'Cormorant Garamond',serif;font-size:20px;font-weight:600;line-height:1.25;margin-bottom:6px}
.calc-o .item{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:rgba(255,255,255,.62);margin-bottom:20px}
.calc-o .valor{font-family:'Cormorant Garamond',serif;font-size:clamp(32px,4vw,44px);font-weight:700;color:var(--ouro-cl);line-height:1;margin-bottom:6px}
.calc-o .vrot{font-size:12px;color:rgba(255,255,255,.68);margin-bottom:18px}
.calc-o .mem{font-size:12px;color:rgba(255,255,255,.78);line-height:1.7;padding-top:16px;border-top:1px solid rgba(215,186,134,.25)}
.calc-o .mem strong{color:rgba(255,255,255,.92);font-weight:500}
/* Expansíveis: recolhem a fundamentação normativa (art. 190/191, memória do
   cálculo); o resultado simples fica em primeiro plano. Só reorganiza a
   apresentação — nenhuma citação removida. */
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary:focus-visible{outline:2px solid var(--ouro);outline-offset:2px}
.entenda{margin-top:16px;padding-top:14px;border-top:1px solid rgba(215,186,134,.25)}
.entenda>summary{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ouro-cl);display:flex;align-items:center;gap:8px}
.entenda>summary::after{content:"+";margin-left:auto;font-size:14px;opacity:.75}
.entenda[open]>summary::after{content:"\2013"}
.entenda .mem{padding-top:12px;border-top:none}
.det-calc{border:1px solid var(--linha);border-radius:3px;background:#fffdfa;margin-bottom:18px}
.det-calc>summary{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro);padding:13px 14px;display:flex;align-items:center}
.det-calc>summary::after{content:"+";margin-left:auto;font-size:15px;color:var(--azul)}
.det-calc[open]>summary::after{content:"\2013"}
.det-calc .det-corpo{padding:0 14px 14px}
.nota-legal{max-width:860px;margin:16px auto 0;padding:16px 20px;border-left:3px solid var(--ouro);background:var(--perg-2);font-size:12px;color:var(--tinta-fr);line-height:1.75}
.nota-legal strong{color:var(--tinta);font-weight:500}
.fonte{max-width:860px;margin:10px auto 0;font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--tinta-fr);line-height:1.7}
.fonte a{color:var(--azul);text-decoration:none;border-bottom:1px solid var(--azul-nev)}

/* ============ ONLINE ============ */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:860px;margin:0 auto}
.ac{
  padding:30px 28px;border:1px solid var(--linha);border-radius:3px;
  box-shadow:inset 0 0 0 1px var(--perg);background:linear-gradient(180deg,#fffdf9,var(--perg));
  text-decoration:none;color:inherit;display:block;transition:.24s;
}
.ac:hover{transform:translateY(-3px);border-color:var(--azul);box-shadow:inset 0 0 0 1px var(--perg),0 8px 20px rgba(0,70,128,.08)}
.ac h3{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;color:var(--azul-esc);margin-bottom:7px;display:flex;justify-content:space-between;gap:8px;letter-spacing:.06em;text-transform:uppercase}
.ac h3 span{color:var(--ouro);font-size:13px;font-family:'Inter',sans-serif;text-transform:none}
.ac p{font-size:12.5px;color:var(--tinta-fr);line-height:1.6}

/* ============ GALERIA ============ */
.gal{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;max-width:860px;margin:0 auto}
.gi{border:1px solid var(--linha);box-shadow:inset 0 0 0 1px var(--perg);padding:5px;background:var(--perg)}
.gi:first-child{grid-row:span 2}
.gi img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.gi:first-child img{aspect-ratio:auto;min-height:100%}
.gi figcaption{padding:8px 4px 2px;font-size:11px;color:var(--tinta-fr);font-style:italic;text-align:center}
.ph{position:relative;overflow:hidden}
.ph::after{
  content:"PROVISÓRIA — NÃO PUBLICAR";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;
  background:repeating-linear-gradient(45deg,rgba(170,0,0,.16) 0 12px,rgba(170,0,0,.28) 12px 24px);
  color:#fff;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;
  text-shadow:0 1px 3px rgba(0,0,0,.8);border:2px solid rgba(170,0,0,.6);
}

/* ============ CONTATO ============ */
.ct{max-width:760px;margin:0 auto;padding:22px 40px;}
.ct-l{display:flex;align-items:flex-start;gap:16px;padding:18px 0;border-bottom:1px solid rgba(170,139,96,.2)}
.ct-l:last-child{border-bottom:none}
.ct-l .ic{width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--linha);background:var(--perg-2);display:flex;align-items:center;justify-content:center;color:var(--azul)}
.ct-l .ic svg{width:17px;height:17px}
.ct-l .k{
  display:block;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ouro);margin-bottom:5px;
}
.ct-l .v{display:block;font-size:14px;color:var(--tinta);line-height:1.65}
.ct-l .v a{color:var(--azul);text-decoration:none;border-bottom:1px solid var(--azul-nev)}
.ct-l .v small{color:var(--tinta-fr);font-size:11.5px}
.mapa{max-width:760px;margin:20px auto 0;border:1px solid var(--linha);box-shadow:inset 0 0 0 1px var(--perg);padding:5px;background:var(--perg)}
.mapa iframe{width:100%;height:280px;border:0;display:block;filter:grayscale(.3) contrast(1.04)}

/* ============ PÉ ============ */
.pe{text-align:center;padding:40px 0 6px;border-top:1px solid var(--linha)}
.pe img.selo-pe{width:96px;margin:0 auto 14px;opacity:.9}
.pe .nm{font-family:'Cormorant Garamond',serif;font-size:17px;font-weight:600;color:var(--azul-esc);letter-spacing:.06em;text-transform:uppercase;line-height:1.35;margin-bottom:8px}
.pe .info{font-size:12.5px;color:var(--tinta-fr);line-height:1.8;margin-bottom:16px}
.pe .links{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin-bottom:18px}
.pe .links a{font-size:12px;color:var(--azul);text-decoration:none;padding:0 14px;position:relative}
.pe .links a+a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:11px;background:var(--linha)}
.pe .links a:hover{color:var(--ouro)}
.pe .lema-pe{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ouro);margin-bottom:8px}
.pe .cr{font-size:11px;color:var(--tinta-fr);opacity:.8}

.zap{position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:50%;box-shadow:0 8px 26px rgba(0,48,79,.32);text-decoration:none;transition:.24s;display:block}
.zap img{width:100%;height:100%;display:block;border-radius:50%}
.zap:hover{transform:scale(1.06)}
/* Botão flutuante de MÚSICA — espelho do .zap, canto inferior ESQUERDO. É
   <button> (dispara JS), injetado por js/musica.js. Foco visível próprio. */
.fab-musica{position:fixed;left:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:50%;
  border:none;padding:0;background:transparent;cursor:pointer;
  box-shadow:0 8px 26px rgba(0,48,79,.32);transition:transform .24s,box-shadow .24s;display:block}
.fab-musica img{width:100%;height:100%;display:block;border-radius:50%;pointer-events:none;filter:grayscale(.65);transition:transform .3s,filter .3s}  /* C2: dorme quando desligada */
.fab-musica:hover{transform:scale(1.06)}
.fab-musica:focus-visible{outline:2px solid #00304f;outline-offset:3px}
.fab-musica.tocando{box-shadow:0 8px 26px rgba(0,48,79,.32),0 0 0 3px rgba(215,186,134,.6)}
.fab-musica.tocando img{filter:grayscale(0)}                  /* C2: acende quando tocando — indicador de ESTADO (vale desktop e toque) */
.fab-musica:active img{transform:translateY(3px) scale(.965)} /* K1 · carimbo — as duas versões */
@media (hover:hover){ .fab-musica:hover img{filter:grayscale(0)} }  /* bônus no desktop: hover também revela */

/* ============ RESPONSIVO ============ */
@media(max-width:900px){
  :root{--CT:170px;--FH:47px;--FV:53px}
  body{padding:14px 10px}
  .folha{padding:78px 54px 84px;--pad-h:54px}
  .g2,.g3,.calc{grid-template-columns:1fr}
  .calc-f{border-right:none;border-bottom:1px solid var(--linha)}
  .virtudes{grid-template-columns:1fr;gap:30px}
  .gal{grid-template-columns:1fr 1fr}
  .gi:first-child{grid-row:auto;grid-column:span 2}
  .menu a{font-size:14px;padding:13px 14px}
  .btn{font-size:14px;letter-spacing:.08em}
}
@media(max-width:600px){
  :root{--CT:104px;--FH:29px;--FV:32px}
  body{padding:8px 6px}
  .folha{padding:56px 34px 60px;--pad-h:34px}
  .miolo{padding:0}

  /* menu: empilhado, legível */
  /* barra compacta em linha única, rola horizontalmente (safe center cuida
     de não cortar o primeiro item quando estoura a largura) */
  .menu a{font-size:12.5px;padding:11px 12px;letter-spacing:.05em}

  /* cabeçalho */
  .selo{width:104px;margin-bottom:14px}
  .wordmark{font-size:20px;line-height:1.15}
  .subwordmark{font-size:10px;letter-spacing:.18em;margin-top:8px}
  .cns-topo{font-size:9px;letter-spacing:.1em;margin-top:8px}

  /* herói */
  .hero{padding:32px 0 30px}
  h1{font-size:26px;letter-spacing:.02em;line-height:1.2}
  .hero .intro{font-size:14px;line-height:1.75}
  .lema{font-size:9px;letter-spacing:.3em}

  /* botões: largura total, uma linha, texto que cabe */
  .acoes{flex-direction:column;align-items:stretch;gap:10px}
  .btn{
    width:100%;justify-content:center;
    font-size:13px;letter-spacing:.06em;
    padding:14px 12px;white-space:normal;line-height:1.3;
  }
  .btn img{width:18px}
  .classe .btn{width:100%;font-size:12.5px}

  /* títulos: filete curto — evita quebra feia; vinheta cai por max-width:100% */
  section{padding:34px 0}
  .tit-wrap{gap:10px;margin-bottom:24px}
  .tit::before,.tit::after{max-width:22px;min-width:12px}
  .tit h2, .tit h1{font-size:17px;letter-spacing:.08em;white-space:normal}
  .sub-sec{font-size:13.5px;margin-top:-10px;margin-bottom:24px}

  /* cartões de serviço: ícone e texto lado a lado */
  .svc{gap:14px;padding:16px 14px;align-items:flex-start}
  .svc .ic{width:40px;height:40px}
  .svc .ic img{width:40px;height:40px}
  .svc h3{font-size:15px;letter-spacing:.04em}
  .svc p{font-size:12.5px;line-height:1.55}
  .svc .seta{display:none}

  /* grids em coluna */
  .g2,.g3,.calc{grid-template-columns:1fr}
  .calc-f{border-right:none;border-bottom:1px solid var(--linha)}
  .calc-f,.calc-o{padding:22px 18px}
  .calc-o .valor{font-size:32px}
  .calc-o .nome{font-size:18px}
  .virtudes{grid-template-columns:1fr;gap:26px}
  .gal{grid-template-columns:1fr}
  .gi:first-child{grid-column:auto}

  /* classes */
  .classe{padding:24px 18px}
  .classe h3{font-size:20px;letter-spacing:.04em}
  .classe li{font-size:12.5px}

  /* contato */
  .ct{padding:6px 16px}
  .ct-l{gap:12px;padding:15px 0}
  .ct-l .v{font-size:13.5px}
  .mapa iframe{height:220px}

  /* rodapé */
  .pe .links{flex-direction:column;gap:10px}
  .pe .links a+a::before{display:none}
  .nota-legal{padding:14px 16px;font-size:11.5px}
  .fonte{font-size:9px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px}
/* ============================================================
   CANTONEIRAS EM DIAGONAL (Fase 2) — duas cantoneiras em L por seção:
   superior-esquerda + inferior-direita. As outras duas diagonais ficam
   vazias: o quadro é sugerido, não fechado (assimetria art nouveau).
   Tamanho fixo relativo, ancorado no canto; a seção pode ter qualquer
   altura — o vão do meio apenas cresce, nada estica.
   ============================================================ */
.section-mold{
  position:relative;
  /* estende a seção até a borda da folha; o conteúdo mantém sua largura */
  margin-inline:calc(-1 * var(--pad-h));
  padding-inline:var(--pad-h);
  /* respiro em cima e embaixo: o texto clareia das cantoneiras */
  padding-top:clamp(24px,3.5vw,60px);
  padding-bottom:clamp(96px,12vw,210px);
}
/* QUATRO cantoneiras, cada uma desenhada para o seu canto (não espelhadas,
   não rotacionadas). Uma só camada (::before) carrega as quatro como imagens
   de fundo, ancoradas nos quatro cantos. Largura fixa, altura auto (preserva
   o aspecto de cada peça). */
.section-mold::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.9;
  background-repeat:no-repeat;
  background-position:left top, right top, left bottom, right bottom;   /* TL, TR, BL, BR */
  --cw:340px;
  background-size:var(--cw) auto, var(--cw) auto, var(--cw) auto, var(--cw) auto;
}
.section-mold > *{position:relative;z-index:1}

/* três conjuntos irmãos de quatro cantos, alternados entre seções */
.mA::before{background-image:
  url('../assets/moldura/moldura-canto-tl.webp'),
  url('../assets/moldura/moldura-canto-tr.webp'),
  url('../assets/moldura/moldura-canto-bl.webp'),
  url('../assets/moldura/moldura-canto-br.webp')}
.mB::before{background-image:
  url('../assets/moldura/moldura-canto-tl-2.webp'),
  url('../assets/moldura/moldura-canto-tr-2.webp'),
  url('../assets/moldura/moldura-canto-bl-2.webp'),
  url('../assets/moldura/moldura-canto-br-2.webp')}
.mC::before{background-image:
  url('../assets/moldura/moldura-canto-tl-3.webp'),
  url('../assets/moldura/moldura-canto-tr-3.webp'),
  url('../assets/moldura/moldura-canto-bl-3.webp'),
  url('../assets/moldura/moldura-canto-br-3.webp')}

@media(max-width:900px){ .section-mold::before{--cw:250px} }

/* No celular (≤600px) o texto ocupa a largura toda; as cantoneiras encostariam
   nele. Legibilidade primeiro: somem e a seção volta à largura normal. */
@media(max-width:600px){
  .section-mold{margin-inline:0;padding-inline:0;padding-bottom:0}
  .section-mold::before{display:none}
}

/* Seção de credenciais: conteúdo curto (3 colunas baixas). Iguala o padding
   de cima ao de baixo para centralizar o bloco verticalmente entre as
   cantoneiras — sem isso o conteúdo fica no terço superior. Só onde as
   cantoneiras aparecem (>600px); no mobile o layout empilha e não se mexe. */
@media(min-width:601px){
  .sec-cred{padding-top:clamp(96px,12vw,210px)}
  /* Rodapé: conteúdo curto. padding simétrico (top=bottom) centraliza o bloco
     entre as cantoneiras — o .section-mold impunha 45/154, deixando o vazio
     embaixo. Só onde as cantoneiras aparecem; no mobile o layout empilha. */
  .pe{padding-top:clamp(48px,8vw,120px);padding-bottom:clamp(48px,8vw,120px)}
}

/* ============================================================
   LANDING v2 — moldura alta (retrato) como fundo full-bleed, ancorada
   no topo (teto de 1400px, centrada); brasão sobreposto na clareira em
   camada própria; conteúdo assenta no corredor livre, dentro do vão
   central — nunca sobre ramo. SEM fade: o ornamento termina por desenho.
   Fundo da página no tom exato da arte (245,240,233): emenda invisível.
   Rótulos em tinta escura (ouro reprova AA em texto pequeno).
   ============================================================ */
body.landing{ background:#f9f2e8 !important; padding:0; }  /* tom da arte 4:3 (desktop) */

/* Teto 1400px, centrado (laterais no tom da arte). overflow:hidden recorta o
   pergaminho puro do pé (abaixo dos ramos: 96,6% no desktop, 86% no mobile) e
   estabelece BFC (a margem do corredor não colapsa). A página termina no rodapé.
   Arte por tela via <picture> (4:3 no desktop; quadrada no ≤760px). */
.lp{
  position:relative; overflow:hidden;
  max-width:1400px; margin:0 auto;
  background:#f9f2e8;   /* tom da arte 4:3 (desktop); mobile sobrescreve */
}

/* Camada de arte: moldura + brasão, ancorada no topo, atrás do conteúdo.
   Absoluta: NÃO estica a página (a altura vem do conteúdo em fluxo). */
.lp-art{ position:absolute; top:0; left:0; width:100%; z-index:0; }

/* >1400px: laterais da moldura coladas nas bordas da tela, em camadas próprias
   (protótipo v3). O <picture> serve o miolo com faixas TRANSPARENTES; o .lp
   vira transparent para não tapar as laterais (o body é o mesmo creme, Δ1/255).
   435×1018 = 450×1053 na escala 1400/1448 do miolo exibido. */
.lp-laterais{ position:absolute; top:0; left:0; right:0; height:0; z-index:0; }
.lp-lateral{ display:none; position:absolute; top:0; width:435px; height:1018px;
  background-size:100% 100%; background-repeat:no-repeat; pointer-events:none; }
@media (min-width:1401px){
  .lp{ background:transparent; }
  .lp-lateral{ display:block; }
  .lp-lateral-esq{ left:0; background-image:url('../assets/brasao/lateral-esq.webp'); }
  .lp-lateral-dir{ right:0; background-image:url('../assets/brasao/lateral-dir.webp'); }
}
.lp-moldura{ display:block; }
.lp-moldura img{ width:100%; height:auto; display:block; }   /* natural, sem corte de ramo */

/* Brasão na clareira, sob a estrela. Desktop (4:3): ~14% da altura, ~30% da largura. */
.lp-brasao{
  position:absolute; z-index:1; top:14.5%; left:50%; width:22.5%;
  transform:translateX(-50%); display:block;   /* brasão -25% (era 30%), reassentado sob a estrela */
}
.lp-brasao img{ width:100%; height:auto; display:block; }

/* Estrela do topo em camada própria — recorte pixel-perfeito da arte 4:3
   (centro medido em 723,72 da arte de 1448×1086; box de 128px → percentuais).
   Hover — receita do titular (16/07/2026): Z1 brilho que varre + Z7 flash +
   C1 acende + C6 contraste + K2 pulso de clique. Em REPOUSO a camada é
   indistinguível da arte por baixo: nada de filtro nem sombra de base. */
.lp-estrela{
  position:absolute; z-index:1; top:6.63%; left:49.93%; width:8.84%;
  transform:translate(-50%,-50%); aspect-ratio:1; display:block;
  cursor:pointer;
}
.lp-estrela:focus-visible{ outline:2px solid #00304f; outline-offset:6px;
  border-radius:50%; }
.lp-estrela-pic{ display:block; width:100%; height:100%; }
.lp-estrela img{
  width:100%; height:100%; display:block;
  transition:filter .3s;
}
.lp-estrela:hover img{ filter:saturate(1.3) brightness(1.07) contrast(1.18); }  /* C1+C6 */
/* Z1 · brilho que varre: janela circular com banda diagonal de luz */
.est-brilho{
  position:absolute; inset:4.7%; border-radius:50%; overflow:hidden;
  pointer-events:none;
}
.est-brilho::after{
  content:""; position:absolute; top:-30%; left:-70%; width:38%; height:160%;
  transform:rotate(18deg); opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,251,238,.75),transparent);
}
.lp-estrela:hover .est-brilho::after{ animation:est-varre .9s ease-out; }
@keyframes est-varre{0%{left:-70%; opacity:0} 12%{opacity:1} 100%{left:130%; opacity:0}}
/* Z7 · flash */
.est-flash{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,253,245,.95) 30%, transparent 72%);
  opacity:0;
}
.lp-estrela:hover .est-flash{ animation:est-flash .55s ease-out; }
@keyframes est-flash{0%{opacity:.9} 100%{opacity:0}}
/* K2 · pulso de clique */
.est-pulso{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible;
}
.est-pulso circle{
  fill:none; stroke:#aa8b60; stroke-width:2.5; opacity:0;
  transform-origin:50% 50%;
}
.lp-estrela:active .est-pulso circle{ animation:est-onda .45s ease-out; }
@keyframes est-onda{0%{opacity:.7; transform:scale(.84)} 100%{opacity:0; transform:scale(1.24)}}

/* Peças do brasão em camadas próprias — receita ÚNICA do titular (16/07/2026):
   T2 crescer + Z1 brilho que varre + Z2 glow de ouro + C1 acende + H4 raios +
   K1 carimbo, igual nas três (leão, cruz, sinal do filactério). Espelho do
   .lp-brasao; percentuais do box de 900 medidos por TM_SQDIFF. REPOUSO sem
   filtro/sombra: pixel-perfeito. Empilhamento: raios (z auto, atrás) < img
   (z1) < brilho (z2 — na 1fa7e2f a luz ficava ~80% atrás do img). */
.lp-brasao-pecas{
  position:absolute; z-index:1; top:14.5%; left:50%; width:22.5%;
  transform:translateX(-50%); aspect-ratio:1; display:block;
  pointer-events:none;   /* as peças reativam */
}
.bpc{ position:absolute; pointer-events:auto; display:block; cursor:default; }
.bpc img{
  width:100%; display:block; position:relative; z-index:1;
  transition:transform .3s, filter .3s;
}
.bpc:hover img{
  transform:scale(1.07);                               /* T2 · crescer */
  filter:saturate(1.3) brightness(1.07)                /* C1 · acende */
         drop-shadow(0 0 16px rgba(215,186,134,.85));  /* Z2 · glow segue o alfa */
}
.bpc:active img{ transform:translateY(3px) scale(1.033); }  /* K1 · carimbo (1.07×.965) */
.bpc-leao{ left:27.33%; top:25.11%; width:47.56%; }
.bpc-cruz{ left:45.00%; top:19.44%; width:10.22%; }
.bpc-sinal{ left:45.78%; top:73.22%; width:8.11%; }
.bpc-divisa{ left:26.67%; top:12.44%; width:48.44%; }
.bpc-listel{ left:18.78%; top:74.67%; width:61.56%; }   /* arte reaparada: termina nas dobras da fita */

/* Z1 · brilho que varre, POR CIMA do img e RECORTADO À SILHUETA da peça */
.bpc-brilho{
  position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.bpc-leao .bpc-brilho{
  -webkit-mask-image:url('../assets/brasao/brasao-peca-leao.webp');
  mask-image:url('../assets/brasao/brasao-peca-leao.webp');
}
.bpc-cruz .bpc-brilho{
  -webkit-mask-image:url('../assets/brasao/brasao-peca-cruz.webp');
  mask-image:url('../assets/brasao/brasao-peca-cruz.webp');
}
.bpc-sinal .bpc-brilho{
  -webkit-mask-image:url('../assets/brasao/brasao-peca-sinal.webp');
  mask-image:url('../assets/brasao/brasao-peca-sinal.webp');
}
.bpc-divisa .bpc-brilho, .bpc-divisa .bpc-flash{
  -webkit-mask-image:url('../assets/brasao/brasao-peca-divisa.webp');
  mask-image:url('../assets/brasao/brasao-peca-divisa.webp');
}
.bpc-listel .bpc-brilho, .bpc-listel .bpc-flash{
  -webkit-mask-image:url('../assets/brasao/brasao-peca-listel.webp');
  mask-image:url('../assets/brasao/brasao-peca-listel.webp');
}
.bpc-brilho::after{
  content:""; position:absolute; top:-30%; left:-70%; width:38%; height:160%;
  transform:rotate(18deg); opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,251,238,.75),transparent);
}
.bpc:hover .bpc-brilho::after{ animation:bra-varre .9s ease-out; }
@keyframes bra-varre{0%{left:-70%; opacity:0} 12%{opacity:1} 100%{left:130%; opacity:0}}

/* Z7 · flash (só divisa e listel) — mascarado à silhueta como o brilho */
.bpc-flash{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  background:radial-gradient(circle, rgba(255,253,245,.95) 30%, transparent 72%);
  opacity:0;
}
.bpc-divisa:hover .bpc-flash, .bpc-listel:hover .bpc-flash{ animation:bra-flash .55s ease-out; }
@keyframes bra-flash{0%{opacity:.9} 100%{opacity:0}}

/* Filtros por peça: divisa C1+C3, listel C1+C3+C6 — sobrescrevem o filter
   global do hover (sem o drop-shadow do Z2); T2/K1/Z1 globais valem. */
.bpc-divisa:hover img{ filter:saturate(1.755) brightness(1.07) hue-rotate(-10deg); transform:none; }  /* divisa sem T2 */
.bpc-divisa:active img{ transform:translateY(3px) scale(.965); }  /* K1 sem o crescer (não há 1.07 a compor) */
.bpc-listel:hover img{ filter:saturate(1.755) brightness(1.07) hue-rotate(-10deg) contrast(1.18); }

/* H4 · raios nas três peças — leque ≈1,55× o box (proporção do misturador) */
.bpc-raios{
  position:absolute; inset:-27%; border-radius:50%; pointer-events:none;
  background:repeating-conic-gradient(rgba(215,186,134,.32) 0 5deg, transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle closest-side, #000 22%, transparent 66%);
  mask:radial-gradient(circle closest-side, #000 22%, transparent 66%);
  opacity:0; transform:scale(.7);
  transition:opacity .5s ease, transform .5s ease;
}
.bpc:hover .bpc-raios{ opacity:1; transform:scale(1); }

/* Conteúdo EM FLUXO no corredor livre: a margem-topo (% da largura) o assenta
   logo sob o brasão; ele define a altura da página. Largura ≤63% (vão central):
   nunca toca ramo. z-index:1 pinta sobre a arte. */
.lp-corredor{
  position:relative; z-index:1;
  width:63%; max-width:900px; margin:35% auto 0;   /* subiu (era 41%): brasão -25% liberou espaço */
  text-align:center;
}

.lp-marca{ margin-bottom:clamp(14px,1.8vw,26px); }
.lp-nome{
  font-family:'Cormorant Garamond',serif; font-weight:700;
  font-size:clamp(34px,4vw,58px); line-height:1.03;
  color:#00304f; letter-spacing:.02em; text-transform:uppercase;
}
/* Wordmark usa a MARCA CURTA "Cartório Boa Esperança" (exceção REGRAS 15/07,
   agora também no desktop). A denominação completa fica nos rodapés/stubs.
   No desktop a marca fica em UMA linha (spans inline); no ≤760px quebra em duas. */
.lp-nome .nome-full{ display:none; }
.lp-nome .nome-curta{ display:block; }
.lp-atrib{
  font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(11px,1.35vw,14px); letter-spacing:.24em; text-transform:uppercase;
  color:#7a5f2e; margin-top:7px;
}
.lp-cns{
  font-family:'JetBrains Mono',monospace; font-size:clamp(9px,1vw,10px); letter-spacing:.14em;
  text-transform:uppercase; color:#1b2732; margin-top:6px;
}

/* Cinco medalhões em FILEIRA ÚNICA (o corredor de 63% comporta). Anel próprio.
   Hover — receita do titular (16/07/2026), provada no misturador de protótipo:
   T2 crescer + C1 acende + C2 revelação (repouso dessaturado) + RA anel que se
   desenha + RD filete + RR traço superior + X3 subtítulo + G1 vizinhos esmaecem
   + K1 carimbo. Um canal por propriedade: transform e filter em cadeia única
   com variáveis (os efeitos compõem, nunca se atropelam). */
.lp-portas{
  display:flex; flex-wrap:nowrap; justify-content:center; align-items:flex-start;
  gap:clamp(8px,1.5vw,22px); margin:0 auto;
}
.porta{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center;
  text-decoration:none; color:inherit; transition:opacity .28s; }
/* G1 · vizinhos esmaecem — porta inteira (medalhão + rótulo); foco espelha hover */
.lp-portas:hover .porta:not(:hover),
.lp-portas:has(.porta:focus-visible) .porta:not(:focus-visible){ opacity:.3; }
.porta-ic{ position:relative; width:100%; max-width:118px; margin:0 auto; aspect-ratio:1; }
.porta-ic img{
  width:100%; height:100%; object-fit:contain; display:block;
  /* transform: T2 × K1 · filter: sombra + C1 (acende) + C2 (repouso a 65% de cinza) */
  transform:translateY(var(--p-ty,0px)) scale(calc(var(--p-sc,1) * var(--p-sck,1)));
  filter:drop-shadow(0 var(--p-shy,4px) var(--p-shb,12px) rgba(0,48,79,var(--p-sho,.20)))
         saturate(var(--p-sat,1)) brightness(var(--p-bri,1)) grayscale(var(--p-gs,.65));
  transition:transform .3s, filter .3s;
}
.porta:hover .porta-ic img, .porta:focus-visible .porta-ic img{
  --p-sc:1.07;                  /* T2 · crescer */
  --p-sat:1.3; --p-bri:1.07;    /* C1 · acende */
  --p-gs:0;                     /* C2 · revelação */
}
.porta:active .porta-ic img{
  --p-ty:3px; --p-sck:.965;     /* K1 · carimbo (com T2 compõe 1.07 × .965) */
  --p-shy:2px; --p-shb:7px; --p-sho:.32;
}
/* RA · anel que se desenha, do topo: r 64 no box de 118 = 5px além da borda do
   medalhão (que preenche o box — bbox sólido medido a 98–99%). */
.porta-anel{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.porta-anel circle{
  fill:none; stroke:#aa8b60; stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100;
  transform:rotate(-90deg); transform-origin:50% 50%;
  transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1);
}
.porta:hover .porta-anel circle, .porta:focus-visible .porta-anel circle{ stroke-dashoffset:0; }
.porta:focus-visible{ outline:none; }
.porta:focus-visible .porta-ic{ outline:2px solid #00304f; outline-offset:3px; border-radius:50%; }
.porta-rot{
  font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:clamp(11px,1.15vw,14.5px); letter-spacing:.03em; text-transform:uppercase;
  color:#00304f; margin-top:9px; line-height:1.14;
  position:relative; padding-bottom:9px;   /* leito do filete (RD) */
}
/* RD · filete sob o rótulo e RR · traço superior: desenham a partir do centro */
.porta-filete, .porta-traco{
  position:absolute; left:14%; right:14%; height:1.5px;
  background:linear-gradient(90deg,transparent,#aa8b60 25%,#aa8b60 75%,transparent);
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.porta-filete{ bottom:3px; }
.porta-traco{ top:-3px; }
.porta:hover .porta-filete, .porta:hover .porta-traco,
.porta:focus-visible .porta-filete, .porta:focus-visible .porta-traco{ transform:scaleX(1); }
/* X3 · subtítulo revelado — sempre em fluxo: a altura fica reservada (CLS 0) */
.porta-sub{
  font-size:clamp(9.5px,.85vw,11px); color:#4a5866; line-height:1.35; margin-top:4px;
  min-height:15px; opacity:0; transform:translateY(-3px);
  transition:opacity .35s, transform .35s;
}
.porta:hover .porta-sub, .porta:focus-visible .porta-sub{ opacity:1; transform:none; }

.faixa-contato{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:10px 26px;
  max-width:820px; margin:clamp(20px,3vw,34px) auto 0; padding:16px 20px;
  border-top:1px solid rgba(170,139,96,.42); border-bottom:1px solid rgba(170,139,96,.42);
}
.fc-item{display:flex;flex-direction:column;gap:3px;text-decoration:none;color:inherit}
.fc-k{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#7a5f2e}
.fc-v{font-size:clamp(11.5px,1.1vw,13px);color:#1b2732;line-height:1.4}
a.fc-item:hover .fc-v,a.fc-item:focus-visible .fc-v{color:#004680}

/* Convite discreto ao Instagram — entre a faixa de contato e o rodapé. Discreto:
   não compete com as cinco portas nem com a faixa. Foco visível próprio (a regra
   global :focus-visible usa var(--ouro) indefinida). */
/* Par de contato no pé — e-mail + Instagram lado a lado, irmãos (mesma regra
   compartilhada). O e-mail herda a receita C1+C2+K1 já aprovada no Instagram. */
.lp-contato-social{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:clamp(12px,3vw,46px); margin:clamp(18px,2.4vw,30px) auto 0; }
.lp-contato-social .lp-instagram{ margin:0; }   /* a margem de topo vive no contêiner */

.lp-instagram, .lp-email{ text-align:center; }
.lp-instagram a, .lp-email a{ display:inline-flex; align-items:center; gap:13px; text-decoration:none; padding:6px 12px; border-radius:8px; }
.lp-instagram img, .lp-email img{ width:48px; height:48px; display:block; flex:none;
  filter:grayscale(.65);                                              /* C2 · revelação (repouso dessaturado) */
  transition:transform .3s, filter .3s; }
.lp-instagram a:hover img, .lp-email a:hover img{ filter:saturate(1.3) brightness(1.07) grayscale(0); }  /* C1 acende + C2 revela */
.lp-instagram a:active img, .lp-email a:active img{ transform:translateY(3px) scale(.965); }              /* K1 · carimbo */
.lp-instagram .ig-txt, .lp-email .ig-txt{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; }
.lp-instagram .ig-conv, .lp-email .ig-conv{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:16px; letter-spacing:.11em; text-transform:uppercase; color:#004680; }
.lp-instagram a:hover .ig-conv, .lp-email a:hover .ig-conv{ border-bottom:1px solid #aa8b60; }
.lp-instagram .ig-perfil, .lp-email .ig-perfil{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em; color:#4a5866; margin-top:3px; overflow-wrap:anywhere; }
.lp-instagram a:focus-visible, .lp-email a:focus-visible{ outline:2px solid #00304f; outline-offset:3px; }
@media(max-width:600px){
  .lp-contato-social{ flex-direction:column; align-items:center; gap:14px; }
  .lp-instagram a, .lp-email a{ flex-direction:column; gap:7px; padding:8px 12px; }
  .lp-instagram .ig-txt, .lp-email .ig-txt{ align-items:center; }
  .lp-instagram img, .lp-email img{ width:44px; height:44px; }
}

.rodape-min{
  position:relative; z-index:1;   /* sobre a camada de arte */
  max-width:920px; margin:0 auto; padding:20px 24px 26px; text-align:center;
  display:flex; flex-direction:column; gap:6px;
}
.rodape-min span:first-child{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.3em;color:#7a5f2e}
.rodape-min span:last-of-type{font-size:11px;color:#4a5866}
/* Link discreto da Política de Privacidade no rodapé (tom do rodapé, foco visível) */
.rodape-min .rp-priv{font-size:11px;color:#4a5866;text-decoration:none;border-bottom:1px solid rgba(170,139,96,.45);padding-bottom:1px;transition:.2s}
.rodape-min .rp-priv:hover{color:#004680;border-bottom-color:#aa8b60}
.rodape-min .rp-priv:focus-visible{outline:2px solid #00304f;outline-offset:3px}

/* ---- LANDING responsivo ---- */
/* ≤760px: arte ALTA/retrato (via <picture>); ramos a 79%. O conteúdo SOBE para
   o corredor: margem-topo ~86% assenta o wordmark logo sob o brasão; a coluna
   central fica em ~68% (os rabos finos ocupam ~12% de cada borda), nunca sobre
   caule. A faixa de contato alarga após os ramos (fora da coluna estreita). */
@media(max-width:760px){
  body.landing{ background:#f4efe8 !important; }   /* tom da moldura alta */
  .lp{ max-width:none; background:#f4efe8; }
  .lp-brasao{ width:45%; top:13.5%; }   /* encaixado no topo, logo abaixo da estrela (como no desktop) */
  /* Estrela na arte ALTA (recorte próprio via <picture>): centro medido em
     (513,90) da arte de 1024×1536, box de 144px → percentuais. */
  .lp-estrela{ left:50.1%; top:5.86%; width:14.06%; }
  .lp-brasao-pecas{ width:45%; top:13.5%; }   /* espelha o brasão mobile */
  /* Marca curta "Cartório Boa Esperança" (exceção REGRAS 15/07): grande no vão.
     Bloco do wordmark centrado verticalmente entre a base do brasão (encaixado
     no topo) e o topo dos medalhões — margem-topo e margem-base iguais (medido
     30/30 px a 390; margin-bottom em vw no .lp-marca). */
  .lp-corredor{ width:66%; max-width:none; margin:73% auto 0; padding:0; }
  .lp-nome{ font-size:6.6vw; }            /* ~26px a 390, ~24px a 360 — vw puro (sem piso de clamp) */
  .lp-nome .nome-curta .ln{ display:block; }   /* marca curta em 2 linhas no celular */
  .lp-marca{ margin-bottom:7.7vw; }       /* = vão acima (7,7vw) → centra o bloco (vw, não %: % seria da coluna) */
  /* atrib/CNS ficam como estão (1 linha cada): vw puro p/ não quebrar a 360 */
  .lp-atrib{ font-size:2.2vw; letter-spacing:.12em; margin-top:2.5%; }
  .lp-cns{ font-size:2.05vw; letter-spacing:.08em; margin-top:2%; }
  .lp-portas{ flex-wrap:wrap; gap:4vw 6vw; margin-top:0; }
  .porta{ flex:0 0 44%; }
  .porta-ic{ max-width:94px; }   /* medalhões −10% (era 104px) */
  .porta-rot{ font-size:clamp(11px,2.9vw,14px); }
  /* faixa alarga após os ramos, saindo da coluna de 68% */
  .lp-corredor .faixa-contato{ width:132%; margin-left:-16%; max-width:none;
    flex-direction:column; align-items:center; text-align:center; gap:14px; }
    /* align-items:center: em coluna, o flex-start herdado do desktop colava
       cada bloco à esquerda (desvios medidos de até 105px) — eixo único agora */
  .fc-item{ align-items:center; }
  /* copyright respira acima do FAB fixo (52px + 20px de offset = zona de 72px;
     print do titular 16/07: o CNS ficava sob o botão) */
  .rodape-min{ padding-bottom:92px; }
}

/* Subpáginas do portal — template nascido em Emolumentos: folha de pergaminho,
   vinheta de cabeça + h1, "Voltar ao início" no topo, rodapé completo, FAB. */
.volta-sub{display:block;margin:0 0 26px}
.volta-sub a{
  display:inline-block;font-family:'Cormorant Garamond',serif;font-size:15px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#004680;
  text-decoration:none;border-bottom:1px solid rgba(170,139,96,.5);padding-bottom:2px;
}
.volta-sub a:hover{ color:#004680; border-bottom:2px solid #aa8b60; padding-bottom:1px; }
  /* hover sinalizado pela LINHA (ouro cheio, 2px; padding compensa: zero shift).
     Texto segue azul: ouro sobre pergaminho = 2,99:1, reprova AA em texto pequeno. */
/* Foco visível do "Voltar" (a regra global :focus-visible usa var(--ouro) indefinida) */
.volta-sub a:focus-visible{ outline:2px solid #00304f; outline-offset:3px; }

/* Faixa média (~521-1080px): .nota-legal e .fonte recuam das cantoneiras da
   seção — texto nunca sobre ornamento (avaliação de UX de 14/07). O defeito
   não existe em 390 (cantos menores) nem ≥1081 (folha no teto de 1080). */
@media (min-width:521px) and (max-width:1080px){
  .nota-legal, .fonte{ margin-left:clamp(70px,11vw,120px); margin-right:clamp(70px,11vw,120px); }
}
#lista-imoveis{margin-top:14px}   /* era style inline no v1; movido p/ validar (no-inline-style) */

/* ============================================================
   SUBPÁGINA FULL-BLEED — só Emolumentos (decisão do titular 17/07/2026).
   A subpágina deixa de ser "folha sobre mesa": o pergaminho (#faf6ee) toca
   os QUATRO lados da tela e as quatro cantoneiras de lírios vão para os
   cantos da PÁGINA (não da seção). O texto segue numa coluna central e
   legível. Isolado por body.sub-bleed — não afeta os outros stubs nem a
   landing. Só >600px tem cantoneira; no celular empilha, sem margem escura.
   ============================================================ */
body.sub-bleed{ padding:0; background:#faf6ee !important; min-height:100vh; }   /* vence o !important da mesa; body garante pergaminho na viewport */
body.sub-bleed .folha{
  max-width:none; margin:0; box-shadow:none; padding:0;
  background:#faf6ee; position:relative;   /* SEM min-height: a folha abraça o conteúdo (cantoneiras inferiores rentes ao fim) */
}
/* a seção não estoura mais para fora da folha; largura e recuos vêm do miolo */
body.sub-bleed .section-mold{ margin-inline:0; padding-inline:0; padding-top:0; padding-bottom:0; }
body.sub-bleed .section-mold::before{ display:none; }   /* cantos saem da seção... */
/* ...e vão para os quatro cantos da página, em camada própria sobre a folha */
body.sub-bleed .folha::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.9;
  background-repeat:no-repeat;
  background-position:left top, right top, left bottom, right bottom;   /* TL, TR, BL, BR */
  --cw:340px;
  background-size:var(--cw) auto, var(--cw) auto, var(--cw) auto, var(--cw) auto;
  background-image:
    url('../assets/moldura/moldura-canto-tl.webp'),
    url('../assets/moldura/moldura-canto-tr.webp'),
    url('../assets/moldura/moldura-canto-bl.webp'),
    url('../assets/moldura/moldura-canto-br.webp');
}
@media(max-width:900px){ body.sub-bleed .folha::before{ --cw:250px } }

/* coluna de leitura: centralizada, largura de folha; padding vertical generoso
   afasta o conteúdo dos buquês dos cantos (a peça do canto tem ~150px de arte
   densa a partir da quina; abaixo/à direita dela o miolo já está limpo). */
body.sub-bleed .miolo{
  position:relative; z-index:3;
  max-width:1080px; margin:0 auto;
  padding:clamp(44px,5vw,68px) clamp(28px,4vw,72px) clamp(56px,5vw,88px);
}
/* "Voltar ao início" agora no PÉ (movido do topo): centralizado, na clareira
   central longe dos buquês dos cantos inferiores; foco visível próprio (a regra
   global :focus-visible usa var(--ouro) indefinida). */
body.sub-bleed .volta-sub{ text-align:center; margin:clamp(30px,5vw,52px) 0 0; }
body.sub-bleed .volta-sub a:focus-visible{ outline:2px solid #00304f; outline-offset:3px; }

/* ≤600px: comportamento atual — sem cantoneiras, empilha, sem margem escura. */
@media(max-width:600px){
  body.sub-bleed .folha::before{ display:none; }
  body.sub-bleed .miolo{ max-width:none; padding:clamp(20px,6vw,30px) clamp(16px,5vw,22px) 44px; }
}

/* ============================================================
   GABINETE DE ESTUDOS — duas portas com a estrutura da landing
   (.lp-portas/.porta), herdando a receita de hover inteira.
   ============================================================ */
.gab-portas{ max-width:560px; }
.gab-portas .porta{ flex:0 1 240px; }
@media (max-width:760px){
  .gab-portas{ max-width:none; }
  .gab-portas .porta{ flex:0 0 44%; }
}
/* X3 permanece no hover para as OUTRAS portas do site; aqui o subtítulo é
   informação essencial e fica sempre legível (celular não tem hover). */
.gab-portas .porta-sub{ opacity:1; transform:none; }
/* o flex centra a CAIXA; a LINHA precisa de text-align quando o texto quebra */
.gab-portas .porta-rot, .gab-portas .porta-sub{ text-align:center; }

/* texto corrido justificado, com hifenização (o <html lang="pt-BR"> guia a
   quebra). Escopado ao #gabinete: .sub-sec e .nota-legal são classes globais
   (emolumentos.html as usa centradas) e não podem justificar fora daqui. */
#gabinete .sub-sec, #gabinete .gab-chamada, #gabinete .nota-legal{
  text-align:justify; text-justify:inter-word;
  hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word;
}
#gabinete .gab-gratis{ text-align:center; hyphens:none; -webkit-hyphens:none; }  /* destaque: centrado e sem hifenizar */
.gab-chamada{
  color:#4a5866; font-size:13.5px; line-height:1.8;
  max-width:56ch; margin:0 auto clamp(22px,3vw,34px);
}
.gab-chamada strong{ color:#00304f; font-weight:500; }
.gab-gratis{
  display:block; font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:clamp(15px,1.5vw,18px); letter-spacing:.06em; text-transform:uppercase;
  color:#004680; margin-bottom:10px;
}

/* Stubs das subpáginas do portal (destinos provisórios). */
.stub{max-width:620px;margin:0 auto;text-align:center;padding:70px 20px}
.stub .selo-stub{width:96px;margin:0 auto 22px;opacity:.9}
.stub h1{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,5vw,42px);font-weight:700;color:#00304f;text-transform:uppercase;letter-spacing:.05em;line-height:1.1;margin-bottom:18px}
.stub p{color:#1b2732;line-height:1.75;margin-bottom:14px}
.stub p a{color:#004680;text-decoration:none;border-bottom:1px solid rgba(170,139,96,.5);white-space:nowrap}
.stub p a:hover{color:#aa8b60}
.stub .voltar{display:inline-block;margin-top:10px;font-family:'Cormorant Garamond',serif;font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#004680;text-decoration:none;border-bottom:1px solid rgba(170,139,96,.5);padding-bottom:2px}
.stub .voltar:hover{color:#aa8b60}

/* ============================================================
   DOCUMENTO JURÍDICO (Política de Privacidade, Código de Ética) — prioriza LEGIBILIDADE:
   coluna estreita de leitura, hierarquia clara de títulos, prosa arejada.
   Tipografia do site (Cormorant nos títulos, Inter no corpo). Escopo .doc.
   ============================================================ */
.doc{max-width:66ch;margin:0 auto;color:var(--tinta,#1b2732)}
.doc h1{font-family:'Cormorant Garamond',serif;font-weight:700;color:#00304f;
  font-size:clamp(25px,3.4vw,36px);line-height:1.18;letter-spacing:.01em;margin:0 0 8px;text-wrap:balance}
.doc .doc-vigencia{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#7a5f2e;margin:0 0 26px}
.doc .doc-intro{font-size:16px;line-height:1.8;color:#1b2732;margin:0}
.doc .doc-sec{margin-top:30px}
.doc h2{font-family:'Cormorant Garamond',serif;font-weight:600;color:#00304f;
  font-size:clamp(19px,2.3vw,23px);text-transform:uppercase;letter-spacing:.045em;line-height:1.25;margin:0 0 10px}
.doc p{font-size:15px;line-height:1.85;color:#1b2732;margin:0 0 13px}
.doc p:last-child{margin-bottom:0}
.doc a{color:#004680;text-decoration:none;border-bottom:1px solid rgba(170,139,96,.5)}
.doc a:hover{color:#aa8b60}
.doc a:focus-visible{outline:2px solid #00304f;outline-offset:2px}
/* Créditos musicais — acréscimo ao fim, separado do texto jurídico por um filete */
.doc-creditos{margin-top:40px;padding-top:28px;border-top:1px solid rgba(170,139,96,.4)}
.doc-creditos ul{margin:0 0 13px;padding-left:1.15em}
.doc-creditos li{font-size:15px;line-height:1.8;color:#1b2732;margin:0 0 9px}
/* Código de Ética — caixa de citação literal da norma e lista dos endereços oficiais */
.doc-norma{
  margin:14px 0 18px; padding:14px 20px;
  border-left:3px solid #aa8b60; background:#faf6ee;
  font-size:13.5px; line-height:1.8; color:#33404d;
}
.doc-norma cite{ display:block; margin-top:8px; font-style:normal;
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.04em; color:#7a5f2e; }
.doc-links{ margin:10px 0 16px; padding-left:22px; }
.doc-links li{ margin:6px 0; }
/* Ouvidoria — bloco de canal de atendimento */
.doc-canal{
  margin:12px 0; padding:16px 20px; border:1px solid rgba(170,139,96,.38);
  background:#fffdf9; border-radius:3px;
}
.doc-canal h3{
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:17px;
  letter-spacing:.05em; text-transform:uppercase; color:#00304f; margin:0 0 8px;
}
.doc-canal p{ margin:4px 0; font-size:14.5px; }
.doc-canal .rot{
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:#7a5f2e; display:block; margin-top:10px;
}
@media(max-width:600px){ .doc p{font-size:15px} .doc h1{font-size:clamp(23px,7vw,30px)} }

/* ============================================================
   TELAS DE TOQUE (sem hover) — regra do titular: NENHUM efeito em NENHUM ícone.
   Todos os ornamentos ESTÁTICOS e em COR CHEIA: sem filtro (nem o grayscale .65
   do C2), sem transform de efeito, sem animação — nem no toque (:active). Os
   transforms de POSICIONAMENTO (centragem, rotação do anel) NÃO são tocados; o
   foco de teclado (:focus-visible) é preservado (acessibilidade). No desktop
   (hover:hover) este bloco não vale, e todas as receitas seguem como estão.
   ============================================================ */
@media (hover: none) {
  /* E-mail e Instagram — cor cheia, sem grayscale de repouso, sem C1/K1 */
  .lp-instagram img, .lp-instagram a:hover img, .lp-instagram a:active img,
  .lp-email img, .lp-email a:hover img, .lp-email a:active img{ filter:none; transform:none; transition:none; }

  /* Portas — filtro/transform montados por variáveis na base: none na base
     resolve repouso (mata o grayscale .65) + hover (C1/C2/T2) + active (K1) */
  .porta-ic img{ filter:none; transform:none; transition:none; }
  .lp-portas:hover .porta:not(:hover){ opacity:1; }                              /* sem G1 (vizinhos esmaecem) */
  .porta-anel circle{ transition:none; }
  .porta:hover .porta-anel circle{ stroke-dashoffset:100; }                      /* sem anel que se desenha */
  .porta-filete, .porta-traco{ transition:none; }
  .porta:hover .porta-filete, .porta:hover .porta-traco{ transform:scaleX(0); }  /* sem filete/traço */
  .porta-sub{ transition:none; }
  .porta:hover .porta-sub{ opacity:0; transform:translateY(-3px); }              /* subtítulo permanece oculto */

  /* Peças do brasão — repouso já é limpo; mata hover/active/animações/raios */
  .bpc img, .bpc:hover img, .bpc:active img,
  .bpc-divisa:hover img, .bpc-divisa:active img, .bpc-listel:hover img{ filter:none; transform:none; transition:none; }
  .bpc-brilho::after, .bpc:hover .bpc-brilho::after{ animation:none; }
  .bpc-flash, .bpc-divisa:hover .bpc-flash, .bpc-listel:hover .bpc-flash{ animation:none; opacity:0; }
  .bpc-raios, .bpc:hover .bpc-raios{ opacity:0; transition:none; }

  /* Estrela do topo — overlays estáticos (o transform de posição não é tocado) */
  .lp-estrela img, .lp-estrela:hover img, .lp-estrela:has(.est-hit:hover) img{ filter:none; transition:none; }
  .est-brilho::after, .lp-estrela:hover .est-brilho::after, .lp-estrela:has(.est-hit:hover) .est-brilho::after{ animation:none; }
  .est-flash{ animation:none; opacity:0; }
  .est-pulso circle{ animation:none; }

  /* Botões flutuantes — sem scale no hover. EXCEÇÃO: .fab-musica NÃO entra aqui —
     o C2 dele é indicador de ESTADO (tocando/desligada), precisa valer no toque. */
  .zap{ transition:none; }
  .zap:hover{ transform:none; }
}

/* ============ BRASÃO DO MUNICÍPIO ============ */
.doc-brasao{ max-width:70ch; }

/* Linha de crédito sob o título */
.doc-brasao .bm-credito{
  font-family:'Cormorant Garamond',serif; font-size:clamp(16px,2.1vw,19px);
  font-style:italic; color:#33404d; margin:0 0 6px;
}

/* Peça de honra: o brasão, centrado, com filete de ouro sob ele */
.bm-hero{ margin:26px auto 34px; text-align:center; }
.bm-hero img{ width:min(340px,66%); height:auto; margin:0 auto; }
.bm-hero figcaption{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:#7a5f2e; margin-top:16px;
}
.bm-hero::after{
  content:""; display:block; width:120px; height:1px; margin:18px auto 0;
  background:linear-gradient(90deg,transparent,#aa8b60,transparent);
}

/* Figura corrida (bandeira, versão monocromática) */
.bm-fig{ margin:22px 0 8px; }
.bm-fig img{ width:100%; height:auto; border:1px solid rgba(170,139,96,.5); }
.bm-fig.bm-fig-pb img{ width:min(240px,55%); margin:0 auto; border:0; }
.bm-fig figcaption{
  font-size:12.5px; line-height:1.7; color:#4a5866; margin-top:10px; text-align:center;
}

/* Resultado da votação: dois números em painel de pergaminho */
.bm-placar{
  display:flex; gap:clamp(16px,4vw,44px); justify-content:center; flex-wrap:wrap;
  margin:22px 0 20px; padding:22px 20px;
  background:#faf6ee; border-top:1px solid rgba(170,139,96,.55); border-bottom:1px solid rgba(170,139,96,.55);
}
.bm-placar div{ text-align:center; min-width:130px; }
.bm-placar b{
  display:block; font-family:'Cormorant Garamond',serif; font-weight:700;
  font-size:clamp(30px,5.2vw,44px); line-height:1; color:#004680;
}
.bm-placar span{
  display:block; margin-top:9px; font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:#7a5f2e; line-height:1.6;
}

/* Simbologia: rótulo em versalete + explicação */
.bm-simb{ list-style:none; margin:14px 0 0; padding:0; }
.bm-simb li{
  padding:13px 0 13px 18px; border-left:2px solid rgba(170,139,96,.45);
  margin-bottom:10px; font-size:14.5px; line-height:1.8; color:#1b2732;
}
.bm-simb b{
  display:block; font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:17px; letter-spacing:.045em; text-transform:uppercase; color:#00304f;
  margin-bottom:3px;
}

/* Paleta normativa */
.bm-paleta{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:12px; margin:16px 0 6px; list-style:none; padding:0;
}
.bm-paleta li{ font-size:12px; line-height:1.55; color:#33404d; }
.bm-paleta i{
  display:block; height:42px; border:1px solid rgba(27,39,50,.18); margin-bottom:7px;
}
.bm-paleta code{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.05em; color:#7a5f2e;
}

/* Amostras da paleta: a cor É o dado, por isso classe por cor */
.bm-paleta .bmc-campo{ background:#02374F; }
.bm-paleta .bmc-estrela{ background:#E6B407; }
.bm-paleta .bmc-oliveira{ background:#DEA91E; }
.bm-paleta .bmc-milho{ background:#B59E47; }
.bm-paleta .bmc-sinople{ background:#193626; }
.bm-paleta .bmc-tenne{ background:#655D41; }
.bm-paleta .bmc-coroa{ background:#A69B85; }
.bm-paleta .bmc-listel{ background:#FAF3E9; }
.bm-paleta .bmc-negro{ background:#222214; }

/* Downloads */
.bm-dl{ list-style:none; margin:14px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:10px; }
.bm-dl a{
  display:block; padding:13px 16px; background:#faf6ee;
  border:1px solid rgba(170,139,96,.45); border-left:3px solid #aa8b60;
  text-decoration:none; transition:.2s;
}
.bm-dl a:hover{ background:#f3ece0; border-left-color:#004680; }
.bm-dl a:focus-visible{ outline:2px solid #00304f; outline-offset:2px; }
.bm-dl strong{
  display:block; font-family:'Cormorant Garamond',serif; font-weight:600; font-size:16px;
  letter-spacing:.03em; color:#00304f;
}
.bm-dl em{
  display:block; font-style:normal; font-family:'JetBrains Mono',monospace;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#7a5f2e; margin-top:4px;
}

/* Rótulo de grupo dentro dos downloads */
.bm-grupo{
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:17px;
  text-transform:uppercase; letter-spacing:.05em; color:#00304f; margin:24px 0 0;
}
.bm-grupo:first-of-type{ margin-top:22px; }

/* Parágrafo de fecho da lista de simbologia */
.bm-fecho{ margin-top:18px; }

.bm-nota{ margin-top:26px; }

/* Divisa em pé de página de secção */
.bm-lema{
  text-align:center; font-family:'Cormorant Garamond',serif; font-size:clamp(19px,3vw,26px);
  letter-spacing:.22em; color:#aa8b60; margin:34px 0 0;
}

@media (max-width:520px){
  .bm-hero img{ width:78%; }
  .bm-simb li{ font-size:13.5px; padding-left:14px; }
  .bm-placar{ gap:18px; padding:18px 14px; }
}

/* Acordeão das seções. Nativo, sem JS: <details>/<summary> já trazem
   teclado, foco e estado anunciado. O chevron em ouro gira 90 graus ao
   abrir e é a única indicação de que o título é clicável. */
details.doc-sec{
  border-top:1px solid rgba(170,139,96,.4);
  margin-top:0; padding:4px 0 2px;
}
details.doc-sec:last-of-type{ border-bottom:1px solid rgba(170,139,96,.4); }
details.doc-sec > summary{
  list-style:none; cursor:pointer; display:flex; align-items:baseline; gap:14px;
  padding:16px 2px; transition:.2s;
}
details.doc-sec > summary::-webkit-details-marker{ display:none; }
details.doc-sec > summary::before{
  content:""; flex:none; width:9px; height:9px; margin-top:2px;
  border-right:2px solid #aa8b60; border-bottom:2px solid #aa8b60;
  transform:rotate(-45deg); transform-origin:60% 60%;
  transition:transform .28s ease, border-color .2s;
}
details.doc-sec[open] > summary::before{ transform:rotate(45deg); }
details.doc-sec > summary:hover::before{ border-color:#004680; }
details.doc-sec > summary:hover h2{ color:#004680; }
details.doc-sec > summary h2{ margin:0; }
details.doc-sec > summary:focus-visible{ outline:2px solid #00304f; outline-offset:3px; }
details.doc-sec > *:not(summary){ margin-left:23px; }
details.doc-sec[open]{ padding-bottom:22px; }
@media (prefers-reduced-motion: reduce){
  details.doc-sec > summary::before{ transition:none; }
}

/* No papel, o acordeão não faz sentido: quem imprime quer o documento
   inteiro. O conteúdo fechado é escondido por content-visibility no slot
   interno, e só o pseudo-elemento ::details-content o alcança — display:block
   nos filhos não funciona (medido em PDF: continua 2 páginas). */
@media print{
  details.doc-sec::details-content{
    content-visibility:visible !important;
    block-size:auto !important;
  }
  details.doc-sec > summary::before{ display:none; }
  details.doc-sec{ break-inside:auto; }
  details.doc-sec > summary{ break-after:avoid; }
}