/* =====================================================================
   6-janelas.css  |  JANELAS (TERMOS, PRIVACIDADE, ZOOM) E AVISOS
   ===================================================================== */

/* ---------- JANELAS (dialog) ---------- */

/* a janela em si: centralizada, cantos redondos, mesmo estilo do site */
dialog{margin:auto;border:1px solid var(--linha-forte);border-radius:24px;background:var(--card);color:var(--ink);padding:0;width:calc(100% - 32px);max-width:440px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}

/* as janelas de termos e privacidade são mais largas */
dialog.larga{max-width:640px}

/* fundo escurecido atrás da janela */
dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}

/* conteúdo de dentro (o texto dos termos) */
.conteudo{position:relative;padding:30px 28px 28px}

/* botão ✕ no canto da janela */
.fechar{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--linha);background:var(--card);color:var(--ink);cursor:pointer;font-size:15px;z-index:2}
.fechar:hover{border-color:var(--accent)}

.conteudo h2{font-size:26px;padding-right:36px}
.conteudo .sub{margin-bottom:8px;font-size:15px}


/* ---------- TEXTO DOS TERMOS E DA PRIVACIDADE ---------- */

/* área de texto com rolagem */
.termos-corpo{max-height:55vh;overflow:auto;padding-right:8px;margin:12px 0 18px;font-size:14px;color:var(--muted)}
.termos-corpo h3{color:var(--ink);font-size:15px;margin:16px 0 4px}
.termos-corpo ul{margin:6px 0 0 18px}
.termos-corpo a{color:var(--accent);text-decoration:underline}

/* botões de baixo (Fechar / Li e aceito) */
.termos-botoes{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}


/* ---------- ZOOM DA IMAGEM DO PORTFÓLIO ---------- */
dialog.zoom{max-width:min(1000px,calc(100% - 32px))}
dialog.zoom img{display:block;width:100%;height:auto;border-radius:24px}
dialog.zoom .legenda{padding:14px 20px 18px;font-size:14px;color:var(--muted)}
dialog.zoom .legenda b{color:var(--ink)}


/* ---------- AVISO FLUTUANTE (ex: "Avaliação enviada!") ---------- */

/* aparece no topo da tela e some sozinho */
.aviso{position:fixed;top:78px;left:50%;transform:translate(-50%,-20px);background:var(--card);color:var(--ink);border:1px solid var(--linha-forte);padding:12px 20px;border-radius:999px;font-weight:600;font-size:14px;box-shadow:0 14px 40px -10px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:.3s;z-index:50;max-width:calc(100% - 32px);text-align:center}
.aviso.mostrar{opacity:1;transform:translate(-50%,0)}