/* ===========================================================
   Miber Sistemas — estilo das páginas legais (políticas)
   Identidade visual idêntica ao site (mibersistemas.com.br)
   =========================================================== */
:root{
  --navy:#0F172A;  --blue:#2563EB;  --cyan:#38BDF8;  --green:#10B981;
  --bg:#FFFFFF;    --bgSoft:#F8FAFC; --bgAlt:#F1F5F9;
  --border:rgba(15,23,42,0.08); --textDim:#475569; --muted:#94A3B8;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bgSoft);
  color:var(--navy);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Header (igual ao do site) ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 20px;
  background:rgba(15,23,42,0.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(56,189,248,0.18);
  box-shadow:0 8px 30px rgba(0,0,0,0.28);
  color:#fff;
}
.site-header .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; }
.site-header .brand img{ height:40px; width:40px; object-fit:contain; }
.site-header .brand-name{ display:flex; flex-direction:column; line-height:1; }
.site-header .brand-name b{ font-size:16px; font-weight:900; color:#fff; }
.site-header .brand-name small{
  font-size:10px; letter-spacing:0.15em; font-weight:700;
  color:var(--cyan); margin-top:3px;
}
.btn-site{
  background:var(--green); color:#fff; text-decoration:none;
  font-weight:700; font-size:14px; padding:9px 18px; border-radius:99px;
  white-space:nowrap; transition:background .2s;
}
.btn-site:hover{ background:#059669; }

/* ---------- Conteúdo ---------- */
.policy-wrap{ max-width:780px; margin:0 auto; padding:40px 20px 64px; }
.policy-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:20px;
  padding:40px 44px 32px;
  box-shadow:0 12px 40px rgba(15,23,42,0.06);
}
@media (max-width:600px){
  .policy-card{ padding:28px 22px; border-radius:16px; }
  .site-header .brand-name{ display:none; }
}

h1{ font-size:30px; font-weight:900; letter-spacing:-0.02em; margin:0 0 4px; color:var(--navy); }
h2{ font-size:19px; font-weight:800; margin:34px 0 8px; color:var(--blue); }
h3{ font-size:16px; font-weight:700; margin:22px 0 6px; color:var(--navy); }
p{ margin:10px 0; color:var(--textDim); }
p.sub{ color:var(--muted); margin-top:0; font-size:15px; }
ul{ padding-left:22px; margin:10px 0; }
li{ margin-bottom:8px; color:var(--textDim); }
li small{ color:var(--muted); display:block; margin-top:2px; }
a{ color:var(--blue); text-decoration:none; font-weight:600; }
a:hover{ text-decoration:underline; }
strong,b{ color:var(--navy); }

/* ---------- Link "Voltar" ---------- */
.back{ margin:0 0 20px; }
.back a{
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600; color:var(--textDim);
}
.back a:hover{ color:var(--blue); text-decoration:none; }

/* ---------- Caixa de destaque (avisos) ---------- */
.destaque{
  background:rgba(37,99,235,0.06);
  border:1px solid rgba(37,99,235,0.18);
  border-left:4px solid var(--blue);
  border-radius:12px;
  padding:14px 18px; margin:18px 0;
}
.destaque p:first-child{ margin-top:0; }
.destaque p:last-child{ margin-bottom:0; }

/* ---------- Bloco / passos ---------- */
.box{
  background:var(--bgAlt);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 20px; margin:16px 0;
}

/* ---------- Lista de apps (página índice) ---------- */
ul.apps{ list-style:none; padding-left:0; margin:18px 0 0; }
ul.apps li{
  background:var(--bgSoft);
  border:1px solid var(--border);
  border-left:4px solid var(--blue);
  border-radius:12px;
  padding:14px 18px; margin-bottom:12px;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
ul.apps li:hover{
  border-color:rgba(37,99,235,0.35);
  box-shadow:0 6px 20px rgba(15,23,42,0.07);
  transform:translateY(-1px);
}
ul.apps li a{ font-size:16px; font-weight:800; color:var(--navy); }
ul.apps li a:hover{ color:var(--blue); text-decoration:none; }
ul.apps li small{ color:var(--muted); margin-top:4px; }

/* ---------- Rodapé ---------- */
footer{
  color:var(--muted); font-size:13px; margin-top:36px;
  border-top:1px solid var(--border); padding-top:18px;
}
footer a{ color:var(--textDim); }