/* Alertha — CSS compartilhado para páginas legais (privacy, terms) */
:root {
  --laranja: #FF8906;
  --laranja-hover: #E57A05;
  --laranja-deep: #C8620A;
  --laranja-claro: #FFF1E0;
  --azul: #0C1325;
  --azul-claro: #16213D;
  --azul-medio: #111A30;
  --azul-info: #3B82F6;
  --branco: #FFFFFF;
  --paper: #F5F1E8;
  --paper-2: #ECE6D8;
  --paper-3: #FBF8F2;
  --cinza-claro: #FBF8F2;
  --cinza-medio: #6B6359;
  --cinza-escuro: #1A1916;
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  --max-width: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cinza-escuro);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
@media (min-width: 768px) { .container { padding: 0 40px; } }

/* HEADER (mesmo do index) */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  z-index: 100;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
}
.logo { display: flex; align-items: center; gap: 8px; }
.logo-img { height: 38px; width: auto; display: block; }
@media (max-width: 480px) { .logo-img { height: 32px; } }
.btn-header {
  background: var(--laranja);
  color: white !important;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}
.btn-header:hover { background: var(--laranja-hover); transform: translateY(-1px); }

/* NAV DESKTOP (mesmo da home) */
.nav-desktop { display: none; gap: 28px; align-items: center; }
.nav-desktop a {
  font-size: 14px;
  font-weight: 500;
  color: var(--cinza-escuro);
  transition: color 0.2s;
}
.nav-desktop a:hover { color: var(--laranja); }

.btn-login {
  border: 1px solid rgba(0,0,0,0.15);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.btn-login:hover { border-color: var(--azul); color: var(--azul); }

.menu-mobile-btn { background: none; border: none; cursor: pointer; padding: 8px; }
.menu-mobile-btn svg { width: 26px; height: 26px; color: var(--azul); }

@media (min-width: 968px) {
  .nav-desktop { display: flex; }
  .menu-mobile-btn { display: none; }
}

/* NAV MOBILE (dropdown ao clicar no hambúrguer) */
.nav-mobile {
  display: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: white;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  padding: 14px 20px 18px;
  flex-direction: column;
  gap: 4px;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--cinza-escuro);
}
.nav-mobile a:hover { background: var(--paper-3); }
.nav-mobile .btn-login,
.nav-mobile .btn-header {
  display: inline-flex;
  justify-content: center;
  margin-top: 6px;
}
@media (min-width: 968px) {
  .nav-mobile, .nav-mobile.open { display: none; }
}

/* HERO DA PÁGINA */
.pagina-hero {
  background: var(--azul);
  color: white;
  padding: 140px 0 60px;
  position: relative;
  overflow: hidden;
}
.pagina-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(255,137,6,0.12), transparent 50%);
  pointer-events: none;
}
.pagina-hero-content { position: relative; z-index: 2; max-width: 760px; }
.pagina-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 18px;
}
.pagina-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: white;
  margin-bottom: 18px;
}
.pagina-hero p {
  font-size: 17px;
  color: rgba(255,255,255,0.82);
  max-width: 600px;
  line-height: 1.55;
}

/* CONTEÚDO PRINCIPAL */
.pagina-conteudo {
  padding: 60px 0 100px;
  background: var(--paper);
}
.pagina-artigo {
  max-width: 760px;
  margin: 0 auto;
}
.pagina-artigo h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--azul);
  margin: 48px 0 16px;
}
.pagina-artigo h2:first-child { margin-top: 0; }
.pagina-artigo h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  color: var(--azul);
  margin: 28px 0 10px;
}
.pagina-artigo p, .pagina-artigo li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--cinza-escuro);
  margin-bottom: 14px;
}
.pagina-artigo ul, .pagina-artigo ol {
  padding-left: 22px;
  margin-bottom: 18px;
}
.pagina-artigo li { margin-bottom: 8px; }
.pagina-artigo strong { color: var(--azul); font-weight: 600; }
.pagina-artigo a { color: var(--laranja); font-weight: 500; }
.pagina-artigo a:hover { text-decoration: underline; }
.pagina-artigo .meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cinza-medio);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.pagina-artigo .bloco-destaque {
  background: var(--paper-3);
  border-left: 4px solid var(--laranja);
  padding: 18px 22px;
  margin: 24px 0;
  border-radius: 4px;
}
.pagina-artigo .bloco-destaque p { margin-bottom: 0; }

/* LOGIN — wrapper do iframe Rastreamos */
.login-wrap {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.login-iframe {
  width: 100%;
  height: 540px;
  border: none;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.08);
  display: block;
  background: white;
}

/* Overlay com logo Alertha cobrindo a logo Rastreamos do iframe.
   A logo Rastreamos aparece nos primeiros ~150px do card branco do iframe.
   Ajuste top/height se Rastreamos mudar layout. */
.login-alertha-overlay {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 86%;
  max-width: 380px;
  height: 160px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
  border-radius: 12px 12px 0 0;
}
.login-alertha-overlay img {
  max-width: 70%;
  max-height: 65%;
  width: auto;
  height: auto;
  display: block;
}
@media (max-width: 520px) {
  .login-alertha-overlay { top: 20px; height: 140px; }
}
.login-helper {
  margin-top: 24px;
  font-size: 14px;
  color: var(--cinza-medio);
}
.login-helper a {
  color: var(--laranja);
  font-weight: 600;
}
.login-helper a:hover { text-decoration: underline; }

/* VOLTAR */
.voltar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
  color: var(--laranja);
  font-weight: 600;
  font-size: 14px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.voltar-link:hover { color: var(--laranja-deep); }

/* FOOTER simplificado */
.footer {
  background: var(--azul);
  color: rgba(239,233,222,0.65);
  padding: 50px 0 20px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 32px;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer h4 { color: white; font-size: 14px; margin-bottom: 14px; font-weight: 700; }
.footer ul { list-style: none; }
.footer ul li { padding: 3px 0; font-size: 13px; }
.footer a:hover { color: var(--laranja); }
.footer-logo p { font-size: 13px; max-width: 280px; line-height: 1.5; margin-top: 14px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}
.footer-bottom a { color: rgba(255,255,255,0.5); }
.footer-bottom a:hover { color: var(--laranja); }