/* Portfolio de exemplos da Trevenzoli: base comum a todos os modelos novos.
   So funcao (acessibilidade, aviso de exemplo, janela de demonstracao, formulario, menu do celular).
   O desenho de cada modelo fica no estilo.css dele; aqui so ha variaveis com valor padrao. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4{text-wrap:balance;overflow-wrap:break-word}
p{text-wrap:pretty}
:focus-visible{outline:3px solid var(--pf-foco,#1a5fd0);outline-offset:3px;border-radius:2px}
.pf-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pf-pular{position:absolute;left:12px;top:-60px;z-index:100;padding:12px 16px;background:#111;color:#fff;font:600 15px/1.2 system-ui,sans-serif;border-radius:8px;text-decoration:none}
.pf-pular:focus{top:12px}

/* faixa de exemplo: sempre no topo, nunca fixa, nunca cobre o conteudo */
.pf-demo{position:relative;z-index:60;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;padding:7px 14px;background:#0c1022;color:#d7dbe8;font:500 12.5px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center}
.pf-demo b{color:#fff;font-weight:700}
.pf-demo a{color:#8fe0dc;font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;padding:4px 0}
.pf-demo a:focus-visible{outline-color:#8fe0dc}

/* imagens: fundo enquanto carrega e se falhar */
.pf-img{background:var(--pf-img-bg,rgba(127,127,127,.18));overflow:hidden}
.pf-img img{width:100%;height:100%;object-fit:cover}

/* janela de demonstracao: igual em todo modelo, clara, legivel */
.pf-dlg{width:min(460px,calc(100% - 28px));max-height:calc(100dvh - 28px);overflow:auto;margin:auto;padding:0;border:0;border-radius:18px;background:#fff;color:#16192a;font:400 16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.pf-dlg::backdrop{background:rgba(8,10,22,.62)}
.pf-dlg-in{padding:24px 22px 22px}
.pf-dlg-selo{display:inline-block;margin:0 0 10px;padding:4px 10px;border-radius:999px;background:#eef1f8;color:#3a4160;font-size:12.5px;font-weight:700;letter-spacing:.02em}
.pf-dlg h2{margin:0 0 8px;font:700 20px/1.25 system-ui,-apple-system,"Segoe UI",sans-serif;color:#16192a}
.pf-dlg p{margin:0 0 18px;color:#3a4160}
.pf-dlg-bts{display:grid;gap:10px}
.pf-dlg-bts a,.pf-dlg-bts button{display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;border-radius:12px;font-weight:700;font-size:15.5px;text-decoration:none;cursor:pointer;border:0}
.pf-dlg-fecha{background:#16192a;color:#fff}
.pf-dlg-trev{background:#eef1f8;color:#16192a}
.pf-dlg-pe{margin:14px 0 0!important;font-size:13px;color:#5d6482!important}
.pf-dlg :focus-visible{outline-color:#1a5fd0}

/* formularios: mensagens de erro e resumo */
.pf-erro{display:block;min-height:0;font-size:13.5px;font-weight:600;color:var(--pf-erro,#b3261e)}
.pf-erro:empty{display:none}
[aria-invalid="true"]{border-color:var(--pf-erro,#b3261e)!important}
.pf-resumo{margin:0;font-weight:700;color:var(--pf-erro,#b3261e)}
.pf-resumo:empty{display:none}
.pf-nota{font-size:13.5px;opacity:.85}

/* menu do celular: o modelo desenha; aqui so a mecanica */
.pf-menu-bt{display:none}
.pf-menu-bt svg{flex:none}
@media (max-width:860px){
  .pf-menu-bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;cursor:pointer}
  [data-pf-topo] .pf-nav{display:none}
  /* enquanto a fonte do modelo nao chega, a letra reserva e mais larga: a marca encolhe em vez de empurrar o
     botao Menu para a linha de baixo (era um deslocamento de layout medido pelo Lighthouse) */
  [data-pf-topo] .marca{min-width:0;flex:1 1 0;overflow:hidden}
  [data-pf-topo] .marca b,[data-pf-topo] .marca small{white-space:nowrap}
  [data-pf-topo] .pf-menu-bt,[data-pf-topo] .pf-tema{flex:none}
  [data-pf-topo][data-aberto] .pf-nav{display:block}
}

/* botao de tema: o icone mostra o modo para onde vai */
.pf-tema{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;background:transparent;border:1px solid currentColor;color:inherit}
.pf-tema svg{width:19px;height:19px}
.pf-tema .pf-sol,html[data-tema="escuro"] .pf-tema .pf-lua{display:none}
html[data-tema="escuro"] .pf-tema .pf-sol{display:block}

/* mapa ilustrativo (sem endereco real) */
.pf-mapa{position:relative;margin:0}
.pf-mapa svg{width:100%;height:auto}
.pf-mapa figcaption{font-size:13.5px;margin-top:8px;opacity:.85}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}