/* =========================================================
   CASCA v12 — paleta azul-noite + dourado para o site todo
   Carregada depois do CSS de cada página: só sobrescreve.
   ========================================================= */
:root{
  --petro:#0B0E14;--petro2:#111621;--petro3:#070A10;
  --creme:#EFECE5;--tinta:#EFECE5;
  --cinzaC:#B7BECA;--cinza:#8A93A0;
  --agua:#5E6672;--aguaC:#C9D2DD;--aguaE:#2A313D;
  --brasa:#E0B268;--ouro:#E0B268;--ouroC:#F2CE8F;
  --linhaE:rgba(183,190,202,.15);--linhaC:rgba(183,190,202,.09);
}
html{background-color:#0B0E14;background-image:none;overflow-x:clip}
body{background-color:transparent}

/* fundo animado (casca.js cria o canvas) */
#casca-fundo{position:absolute;left:0;top:0;width:100%;height:110vh;max-height:1100px;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.casca-luz{position:absolute;left:0;top:0;width:100%;height:900px;z-index:0;pointer-events:none;
  background:radial-gradient(45% 55% at 82% 18%,rgba(224,178,104,.13),rgba(224,178,104,0) 70%),
             radial-gradient(40% 50% at 8% 4%,rgba(94,140,168,.12),rgba(94,140,168,0) 70%)}
.cab,main,section,footer{position:relative;z-index:1}

/* cabeçalho com vidro */
.cab{background:none;border-bottom:1px solid var(--linhaE)}
body.sem-retrato .cab .folha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:14px}
body.sem-retrato .marca{padding:4px 0}
body.sem-retrato .creds{margin-top:0;padding-top:0;max-width:none;text-align:right}
body.sem-retrato .creds::before{display:none}
body.sem-retrato .volta{order:3;flex-basis:100%;min-height:30px}
@media(max-width:680px){body.sem-retrato .creds{display:none}}
.creds::before{background:var(--ouro)}
.selo,.rot,.rotR{color:var(--ouro)}

/* títulos maiores e mais leves */
h1 i{font-style:italic;background:linear-gradient(100deg,var(--ouroC),#C9D6E3 70%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.1em;margin-right:-.1em}

/* botões: dourado como nos simuladores */
.acao,.form button,.meio a,.barra a{background:linear-gradient(180deg,var(--ouroC),var(--ouro))!important;color:#1A1205!important;border-radius:10px;
  box-shadow:0 10px 26px -12px rgba(224,178,104,.55);border:0}
.acao:hover,.form button:hover,.meio a:hover,.barra a:hover{filter:brightness(1.06)}

/* cartões e caixas com cantos e vidro */
.ferr-p,.ferr-s,.conta,.alerta,.meio,.card,.painel{border-radius:14px}
.ferr-p,.ferr-s{background:linear-gradient(180deg,rgba(22,29,44,.72),rgba(14,18,28,.72));border-color:rgba(183,190,202,.14)}
.ferr-p:hover,.ferr-s:hover{border-color:rgba(224,178,104,.4);background:linear-gradient(180deg,rgba(26,34,51,.8),rgba(16,21,32,.8))}
.ferr-p .sel,.ferr-s .sel{color:var(--ouro)}
.meio{background:linear-gradient(180deg,#F3EEE4,#E9E2D4)!important;color:#141821}
.meio h3{color:#141821}

/* links do texto */
.artigo a{color:var(--ouroC);border-bottom-color:rgba(224,178,104,.35)}
.realce,b.realce{color:var(--ouroC)}

/* páginas sem foto: o topo não precisa reservar espaço para o retrato */
body.sem-retrato .marca .retrato{display:none}
body.sem-retrato h1{margin-bottom:22px}

/* artigos: coluna centrada no computador, sem buraco à direita */
@media(min-width:901px){
  body.sem-retrato .artigo .folha,
  body.sem-retrato .captura .folha{max-width:860px}
  body.sem-retrato .artigo h1{font-size:clamp(38px,4.4vw,56px);letter-spacing:-.025em;max-width:22ch}
  body.sem-retrato .artigo{padding-top:72px}
}

/* entrada suave */
@keyframes casca-sobe{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
main>section:first-child .folha>*{animation:casca-sobe .7s cubic-bezier(.22,.61,.36,1) both}
@media(prefers-reduced-motion:reduce){main>section:first-child .folha>*{animation:none}}

/* inicial e Sobre: a foto se dissolve no fundo animado, sem retângulo */
body:not(.sem-retrato) .marca .retrato{background:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 30%,#000 62%),linear-gradient(to top,transparent 0,#000 38%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 30%,#000 62%),linear-gradient(to top,transparent 0,#000 38%);
  mask-composite:intersect}
body:not(.sem-retrato) .marca .retrato::after{background:linear-gradient(to bottom,rgba(11,14,20,.55) 0,rgba(11,14,20,0) 140px)!important}
body:not(.sem-retrato) .marca .retrato img{filter:grayscale(1) contrast(1.08) brightness(.9) sepia(.12) hue-rotate(185deg)}