/* ==========================================================================
   Recarga iUniTV — páginas de conteúdo (institucional, legal, FAQ)
   --------------------------------------------------------------------------
   No pacote original estas páginas usavam as classes .header-new / .footer-new
   / .top-bar-new / .logo-box / .nav-new, que não existiam em nenhum CSS —
   ficavam sem estilo nenhum. Agora usam o header/rodapé padrão do site mais
   os estilos de conteúdo abaixo.
   ========================================================================== */

/* ===== FAIXA DE TÍTULO ===== */
.page-hero {
  background:
    radial-gradient(760px 320px at 50% -80px, rgba(var(--brand-rgb), .2), transparent 68%),
    linear-gradient(160deg, var(--ink-950) 0%, var(--ink-800) 100%);
  color: #fff; padding: 52px 0 46px; text-align: center;
}
.page-hero h1 { color: #fff; font-size: 2.1rem; margin-bottom: 12px; }
.page-hero p {
  color: rgba(255, 255, 255, .72);
  font-size: 1rem; max-width: 620px; margin: 0 auto;
}
.page-breadcrumb {
  font-size: .8rem; color: rgba(255, 255, 255, .5); margin-bottom: 16px;
}
.page-breadcrumb a { color: var(--brand-300); }
.page-breadcrumb a:hover { text-decoration: underline; }

/* ===== CONTEÚDO EM PROSA ===== */
.page-content { padding: 56px 0 72px; background: var(--white); }
.policy-content { max-width: 800px; margin: 0 auto; }
.policy-content > p,
.policy-content li { color: var(--text-body); line-height: 1.8; font-size: .95rem; }
.policy-content > p { margin-bottom: 18px; }
.policy-content h2 {
  font-size: 1.2rem; margin: 36px 0 14px;
  padding-left: 14px; border-left: 3px solid var(--brand-500);
}
.policy-content h2:first-child { margin-top: 0; }
.policy-content h3 { font-size: 1.02rem; margin: 26px 0 10px; }
.policy-content strong { color: var(--text-main); }
.policy-content a { color: var(--brand-700); font-weight: 600; }
.policy-content a:hover { text-decoration: underline; }
.policy-content ul { margin: 0 0 18px; padding: 0; }
.policy-content ul li {
  position: relative; padding-left: 22px; margin-bottom: 9px;
}
.policy-content ul li::before {
  content: ''; position: absolute; left: 2px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-500);
}
.policy-updated {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-muted); font-size: .82rem; font-weight: 600;
  padding: 8px 16px; border-radius: var(--radius-pill); margin-bottom: 28px;
}
.policy-updated i { color: var(--brand-600); }

/* bloco de destaque no fim das páginas legais */
.policy-callout {
  margin-top: 36px; padding: 24px 26px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--brand-500); border-radius: var(--radius);
}
.policy-callout h3 { margin: 0 0 8px; font-size: 1rem; }
.policy-callout p { margin: 0 0 6px; font-size: .9rem; color: var(--text-body); line-height: 1.7; }
.policy-callout p:last-child { margin-bottom: 0; }

/* ===== CARTÕES DE PERGUNTA (FAQ / suporte) ===== */
.qa-grid { display: grid; gap: 14px; max-width: 800px; margin: 0 auto 44px; }
.qa-card {
  background: var(--white); border: 1px solid var(--border);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--radius); padding: 24px 26px;
  transition: var(--transition);
}
.qa-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.qa-card h3 {
  font-size: 1rem; margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.qa-card h3 i { color: var(--brand-600); font-size: .95rem; }
.qa-card p { color: var(--text-body); font-size: .9rem; line-height: 1.7; margin: 0; }

/* ===== PASSOS NUMERADOS (como funciona) ===== */
.steps-list { display: grid; gap: 16px; max-width: 800px; margin: 0 auto; }
.step-row {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px 26px;
  transition: var(--transition);
}
.step-row:hover { box-shadow: var(--shadow); border-color: var(--brand-soft-2); }
.step-row .step-num {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-gradient); color: var(--on-brand);
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 800;
}
.step-row.is-final .step-num {
  background: linear-gradient(135deg, var(--whatsapp), var(--whatsapp-dark)); color: #fff;
}
.step-row h3 { font-size: 1.02rem; margin-bottom: 7px; }
.step-row p { color: var(--text-body); font-size: .9rem; line-height: 1.7; margin: 0; }

/* ===== CARTÕES DE CONTATO ===== */
.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; max-width: 800px; margin: 0 auto 36px;
}
.contact-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px 24px; text-align: center;
  transition: var(--transition);
}
.contact-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--brand-soft-2); }
.contact-icon {
  width: 48px; height: 48px; margin: 0 auto 14px;
  border-radius: 14px; display: grid; place-items: center; font-size: 1.2rem;
}
.contact-card h3 { font-size: .98rem; margin-bottom: 6px; }
.contact-card p { color: var(--text-body); font-size: .88rem; line-height: 1.6; margin: 0 0 4px; }
.contact-card a { color: var(--brand-700); font-weight: 700; font-size: .95rem; }
.contact-card a:hover { text-decoration: underline; }

/* ===== CTA DE WHATSAPP ===== */
.page-wa-cta {
  max-width: 800px; margin: 0 auto; text-align: center;
  background: linear-gradient(150deg, var(--ink-950), var(--ink-800));
  border-radius: var(--radius-xl); padding: 44px 32px; color: #fff;
}
.page-wa-cta h3 { color: #fff; font-size: 1.4rem; margin-bottom: 10px; }
.page-wa-cta p { color: rgba(255, 255, 255, .72); font-size: .95rem; margin-bottom: 24px; }
.page-wa-cta .wa-btn {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 34px; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--whatsapp), var(--whatsapp-dark));
  color: #fff; font-weight: 800; font-size: 1rem;
  transition: var(--transition);
}
.page-wa-cta .wa-btn:hover { transform: translateY(-2px); color: #fff; }
.page-wa-cta .wa-hours { margin: 20px 0 0; font-size: .82rem; color: rgba(255, 255, 255, .55); }

/* ===== DADOS DA EMPRESA ===== */
.company-box {
  max-width: 800px; margin: 40px auto 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px 26px;
}
.company-box h3 {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-muted); margin-bottom: 12px;
}
.company-box p { font-size: .87rem; color: var(--text-body); line-height: 1.75; margin: 0 0 4px; }
.company-box strong { color: var(--text-main); }

@media (max-width: 620px) {
  .page-hero { padding: 38px 0 34px; }
  .page-hero h1 { font-size: 1.6rem; }
  .page-content { padding: 40px 0 56px; }
  .qa-card, .step-row, .policy-callout, .company-box { padding: 20px; }
  .step-row { gap: 14px; }
  .page-wa-cta { padding: 32px 22px; }
}