/* ==========================================================================
   RI Itapema — Landing "RI Digital: Tutorial Avançado"
   Mesma identidade do site (azul-marinho / azul / dourado, fonte Ubuntu).
   ========================================================================== */
:root{
  --rit-navy:#000C38; --rit-navy-escuro:#000826;
  --rit-azul:#0058A0; --rit-azul-claro:#4898D0;
  --rit-ouro:#D8B000; --rit-creme:#FBF3D6;
  --rit-fundo:#F5F6F8; --rit-branco:#fff;
  --rit-tinta:#131A2C; --rit-texto:#3E4657; --rit-cinza:#697182; --rit-borda:#E2E7EF;
  --rit-fonte:'Ubuntu', Helvetica, Arial, sans-serif;
  --rit-raio:16px;
  --rit-sombra:0 2px 5px rgba(0,12,56,.06), 0 14px 34px rgba(0,12,56,.09);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.rit{ margin:0; font-family:var(--rit-fonte); font-size:16px; line-height:1.7; color:var(--rit-texto); background:var(--rit-branco); -webkit-font-smoothing:antialiased; }
.rit h1,.rit h2,.rit h3{ color:var(--rit-tinta); line-height:1.22; margin:0; font-weight:700; }
.rit a{ color:var(--rit-azul); text-decoration:none; }
.rit img{ max-width:100%; height:auto; }
.rit-ico{ flex-shrink:0; vertical-align:middle; }

/* ---------- Botões (pílula, como no site) ---------- */
.rit .rit-botao{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 28px; border-radius:100px;
  border:0; cursor:pointer; font:inherit; font-size:13.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background:var(--rit-navy); color:#fff; transition:filter .15s, transform .12s; text-align:center; }
.rit .rit-botao:hover{ filter:brightness(1.22); transform:translateY(-1px); }
.rit .rit-botao-ouro{ background:var(--rit-ouro); color:var(--rit-navy); }
.rit .rit-botao-ouro:hover{ filter:brightness(1.07); }
.rit .rit-botao-azul{ background:var(--rit-azul); color:#fff; }
.rit .rit-botao-claro{ background:rgba(255,255,255,.14); color:#fff; border:1.5px solid rgba(255,255,255,.55); }
.rit .rit-botao-claro:hover{ background:rgba(255,255,255,.24); }
.rit .rit-botao-borda{ background:#fff; border:2px solid var(--rit-navy); color:var(--rit-navy); }
.rit .rit-botao-grande{ padding:16px 34px; font-size:14.5px; }

/* ---------- Topo ---------- */
.rit-topo{ background:#fff; border-bottom:4px solid var(--rit-navy); position:sticky; top:0; z-index:60; box-shadow:0 2px 10px rgba(0,12,56,.08); }
.rit-topo-in{ max-width:1160px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:20px; }
.rit-marca img{ height:56px; width:auto; display:block; }
.rit-topo-nav{ margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; }
.rit .rit-topo-nav a{ padding:9px 12px; border-radius:9px; color:var(--rit-navy); font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.rit .rit-topo-nav a:hover{ background:var(--rit-navy); color:#fff; }
.rit-topo-cta{ white-space:nowrap; }

/* ---------- Hero ---------- */
.rit-hero{ background:linear-gradient(125deg, var(--rit-navy-escuro) 0%, var(--rit-navy) 45%, var(--rit-azul) 130%); color:#D7E2EF; position:relative; overflow:hidden; }
.rit-hero::before{ content:""; position:absolute; right:-180px; top:-180px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(72,152,208,.35), transparent 65%); }
.rit-hero::after{ content:""; position:absolute; left:-140px; bottom:-220px; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle, rgba(216,176,0,.16), transparent 65%); }
.rit-hero-in{ position:relative; z-index:2; max-width:1160px; margin:0 auto; padding:64px 20px 74px; display:grid; grid-template-columns:1.15fr .85fr; gap:46px; align-items:center; }
.rit-selo-topo{ display:inline-block; background:rgba(216,176,0,.15); border:1px solid rgba(216,176,0,.5); color:var(--rit-ouro); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-radius:100px; padding:6px 14px; margin-bottom:18px; }
.rit-hero h1{ color:#fff; font-size:42px; margin-bottom:16px; }
.rit-hero h1 em{ font-style:normal; color:var(--rit-ouro); }
.rit-hero-sub{ font-size:17px; max-width:520px; margin:0 0 26px; }
.rit-hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
.rit-chips{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:8px 18px; }
.rit-chips li{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:#C9D6E6; }
.rit-chips .rit-ico{ color:var(--rit-ouro); }
.rit-hero-borda{ height:10px; background:var(--rit-ouro); }

/* Arte do hero */
.rit-hero-arte{ position:relative; }
.rit-flutua{ position:absolute; display:flex; align-items:center; gap:8px; background:#fff; color:var(--rit-tinta); font-size:13px; font-weight:700; border-radius:100px; padding:9px 16px; box-shadow:0 14px 30px rgba(0,8,38,.35); animation:ritFlutua 5s ease-in-out infinite; }
.rit-flutua .rit-ico{ color:#14713F; }
.rit-flutua-1{ top:-18px; right:8px; }
.rit-flutua-2{ bottom:-16px; left:-6px; animation-delay:2.5s; }
.rit-flutua-2 .rit-ico{ color:var(--rit-azul); }
@keyframes ritFlutua{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }

/* ---------- Mockups ilustrativos ---------- */
.rit-mock{ background:#fff; border-radius:14px; box-shadow:0 22px 55px rgba(0,8,38,.35); overflow:hidden; border:1px solid var(--rit-borda); }
.rit-mock-bar{ display:flex; align-items:center; gap:6px; background:#EEF2F8; border-bottom:1px solid var(--rit-borda); padding:10px 14px; }
.rit-mock-bar i{ width:10px; height:10px; border-radius:50%; background:#C9D2DE; }
.rit-mock-bar i:first-child{ background:#E8938A; } .rit-mock-bar i:nth-child(2){ background:#EFC96D; } .rit-mock-bar i:nth-child(3){ background:#8FCf9F; }
.rit-mock-url{ margin-left:8px; background:#fff; border:1px solid var(--rit-borda); border-radius:100px; font-size:11.5px; color:var(--rit-cinza); padding:3px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rit-mock-corpo{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; }
.rit-mock-titulo{ font-weight:700; color:var(--rit-tinta); font-size:15px; }
.rit-mock-texto{ font-size:12.5px; color:var(--rit-cinza); line-height:1.5; }
.rit-mock-linha-forte{ font-weight:700; color:var(--rit-tinta); font-size:15.5px; text-align:center; }
.rit-mock-campo{ border:1.5px solid var(--rit-borda); border-radius:9px; padding:9px 13px; font-size:13px; color:#9AA5B5; }
.rit-mock-campo.cheio{ color:var(--rit-tinta); }
.rit-mock-campo small{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--rit-cinza); }
.rit-mock-botao{ background:var(--rit-navy); color:#fff; border-radius:100px; text-align:center; font-size:13px; font-weight:700; padding:10px 14px; }
.rit-mock-botao-alt{ background:#1351B4; } /* azul institucional de botão de login gov */
.rit-mock-ou{ text-align:center; font-size:11px; color:var(--rit-cinza); }
.rit-mock-card-btn{ display:flex; align-items:center; gap:10px; border:1.5px solid var(--rit-borda); border-radius:11px; padding:11px 14px; font-size:13.5px; font-weight:600; color:var(--rit-tinta); }
.rit-mock-card-btn b{ margin-left:auto; color:var(--rit-azul); }
.rit-mock-card-btn .rit-ico{ color:var(--rit-azul); }
.rit-mock-card-btn.ativo{ border-color:var(--rit-ouro); background:#FFFDF3; box-shadow:0 0 0 3px rgba(216,176,0,.18); }
.rit-mock-radio{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--rit-tinta); flex-wrap:wrap; }
.rit-mock-radio i{ width:14px; height:14px; border-radius:50%; border:2px solid #C9D2DE; display:inline-block; }
.rit-mock-radio i.on{ border-color:var(--rit-azul); box-shadow:inset 0 0 0 3px #fff; background:var(--rit-azul); }
.rit-mock-doc{ display:flex; align-items:center; gap:8px; background:var(--rit-fundo); border:1px solid var(--rit-borda); border-radius:9px; padding:9px 12px; font-size:12.5px; font-weight:600; color:var(--rit-tinta); }
.rit-mock-doc em{ margin-left:auto; font-style:normal; color:#14713F; font-weight:800; }
.rit-mock-doc .rit-ico{ color:var(--rit-azul); }
.rit-mock-upload{ display:flex; align-items:center; justify-content:center; gap:9px; border:2px dashed var(--rit-azul-claro); border-radius:11px; padding:16px 12px; font-size:12.5px; color:var(--rit-azul); font-weight:600; background:#F3F8FD; }
.rit-mock-check{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:#14713F; }
.rit-mock-check .rit-ico{ color:#14713F; }
.rit-mock-sucesso{ width:46px; height:46px; border-radius:50%; background:#E2F3E9; color:#14713F; display:grid; place-items:center; margin:2px auto 0; }
.rit-mock-etapa{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--rit-cinza); padding:7px 10px; border-radius:8px; }
.rit-mock-etapa .rit-ico{ color:#B8C2CF; }
.rit-mock-etapa.done{ color:var(--rit-tinta); }
.rit-mock-etapa.done .rit-ico{ color:#14713F; }
.rit-mock-etapa.atual{ background:var(--rit-creme); color:#5C4A00; font-weight:700; }
.rit-mock-etapa.atual .rit-ico{ color:#8A6A00; }

/* ---------- Seções ---------- */
.rit-sec{ padding:64px 20px; background:var(--rit-branco); }
.rit-sec-in{ max-width:1100px; margin:0 auto; }
.rit-sec-estreita{ max-width:880px; }
.rit-sec-titulo{ text-align:center; font-size:24px; letter-spacing:.1em; margin-bottom:14px; }
.rit-sec-sub{ text-align:center; max-width:720px; margin:0 auto 40px; color:var(--rit-cinza); }
.rit-sec-clara{ background:var(--rit-fundo); }
.rit-sec-navy{ background:linear-gradient(160deg, var(--rit-navy) 0%, var(--rit-navy-escuro) 100%); }
.rit-sec-navy .rit-sec-titulo{ color:#fff; }
.rit-sec-navy .rit-sec-sub{ color:#B9C8DA; }
.rit-rotulo-caminho{ display:table; margin:0 auto 10px; background:var(--rit-ouro); color:var(--rit-navy); font-size:12px; font-weight:700; letter-spacing:.14em; border-radius:100px; padding:5px 16px; }
.rit-rotulo-azul{ background:var(--rit-azul); color:#fff; }

/* ---------- Vantagens ---------- */
.rit-vantagens{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.rit-vant{ background:#fff; border:1px solid var(--rit-borda); border-top:4px solid var(--rit-ouro); border-radius:var(--rit-raio); box-shadow:var(--rit-sombra); padding:26px 22px; }
.rit-vant-ico{ width:52px; height:52px; border-radius:14px; background:var(--rit-navy); color:var(--rit-azul-claro); display:grid; place-items:center; margin-bottom:14px; }
.rit-vant h3{ font-size:16.5px; margin-bottom:8px; }
.rit-vant p{ margin:0; font-size:14px; }

/* ---------- Antes de começar ---------- */
.rit-prepara{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.rit-prep{ position:relative; background:#fff; border:1px solid var(--rit-borda); border-radius:var(--rit-raio); box-shadow:var(--rit-sombra); padding:30px 22px 24px; }
.rit-prep-num{ position:absolute; top:-16px; left:22px; width:34px; height:34px; border-radius:50%; background:var(--rit-navy); color:var(--rit-ouro); font-weight:700; display:grid; place-items:center; border:3px solid var(--rit-fundo); }
.rit-prep h3{ font-size:16.5px; margin-bottom:8px; }
.rit-prep p{ margin:0; font-size:14px; }
.rit-nota-tempo{ text-align:center; margin:30px 0 0; color:var(--rit-cinza); font-size:14px; }
.rit-nota-tempo .rit-ico{ color:var(--rit-ouro); }

/* ---------- Passo a passo ---------- */
.rit-passos{ display:flex; flex-direction:column; gap:26px; position:relative; max-width:980px; margin:0 auto; }
.rit-passo{ display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13); border-radius:var(--rit-raio); padding:30px 32px;
  opacity:0; transform:translateY(24px); transition:opacity .5s ease, transform .5s ease; }
.rit-passo.visivel{ opacity:1; transform:none; }
.rit-passo:nth-child(even){ grid-template-columns:.9fr 1.1fr; }
.rit-passo:nth-child(even) .rit-passo-txt{ order:2; }
.rit-passo:nth-child(even) .rit-passo-arte{ order:1; }
.rit-passo-badge{ display:inline-block; background:var(--rit-ouro); color:var(--rit-navy); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-radius:100px; padding:4px 13px; margin-bottom:12px; }
.rit-badge-azul{ background:var(--rit-azul); color:#fff; }
.rit-sec-navy .rit-passo h3{ color:#fff; }
.rit-passo h3{ font-size:20px; margin-bottom:10px; }
.rit-passo p{ margin:0 0 10px; font-size:14.5px; }
.rit-sec-navy .rit-passo p{ color:#C9D6E6; }
.rit-sec-navy .rit-passo a{ color:var(--rit-azul-claro); text-decoration:underline; }
.rit-ui{ display:inline-block; background:rgba(72,152,208,.16); border:1px solid rgba(72,152,208,.4); color:inherit; border-radius:7px; padding:0 7px; font-weight:700; font-size:.92em; white-space:nowrap; }
.rit-dica{ background:var(--rit-creme); border-left:4px solid var(--rit-ouro); border-radius:0 10px 10px 0; padding:10px 14px; color:#5C4A00 !important; font-size:13.5px !important; }
.rit-dica a{ color:#7A5F00 !important; text-decoration:underline; }
.rit-dica .rit-ico{ color:#8A6A00; }

/* passos na seção clara (protocolo) */
.rit-passos-claro .rit-passo{ background:#fff; border:1px solid var(--rit-borda); box-shadow:var(--rit-sombra); }
.rit-passos-claro .rit-passo .rit-mock{ box-shadow:0 14px 34px rgba(0,12,56,.14); }

/* ---------- Faixa CTA ---------- */
.rit-cta-faixa{ text-align:center; margin-top:38px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.rit-cta-nota{ font-size:12.5px; color:#8A9AB0; }
.rit-cta-faixa-clara .rit-cta-nota{ color:var(--rit-cinza); }

/* ---------- Comparativo ---------- */
.rit-tabela-wrap{ overflow-x:auto; background:#fff; border:1px solid var(--rit-borda); border-radius:var(--rit-raio); box-shadow:var(--rit-sombra); }
.rit-tabela{ width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
.rit-tabela th{ background:var(--rit-navy); color:#fff; text-align:left; padding:13px 18px; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; }
.rit-tabela th .rit-ico{ color:var(--rit-ouro); margin-right:6px; }
.rit-tabela .rit-th-destaque{ background:var(--rit-azul); }
.rit-tabela td{ padding:13px 18px; border-bottom:1px solid var(--rit-borda); vertical-align:top; }
.rit-tabela tr:last-child td{ border-bottom:0; }
.rit-tabela td:first-child{ font-weight:700; color:var(--rit-tinta); }
.rit-td-destaque{ background:#F3F8FD; font-weight:700; color:var(--rit-azul); }
.rit-td-destaque small{ font-weight:400; color:var(--rit-cinza); }

/* ---------- FAQ ---------- */
.rit-faq{ display:flex; flex-direction:column; gap:10px; }
.rit-faq-item{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:11px; overflow:hidden; }
.rit-faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 20px; color:#fff; font-weight:500; font-size:15px; }
.rit-faq-item summary::-webkit-details-marker{ display:none; }
.rit-faq-item summary span{ color:var(--rit-ouro); font-size:20px; font-weight:700; transition:transform .15s; }
.rit-faq-item[open] summary span{ transform:rotate(45deg); }
.rit-faq-item > div{ padding:0 20px 16px; color:#C9D6E6; font-size:14px; }
.rit-faq-item p{ margin:0 0 8px; }
.rit-faq-item a{ color:var(--rit-azul-claro); text-decoration:underline; }

/* ---------- Ajuda ---------- */
.rit-ajuda{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.rit-ajuda-card{ background:#fff; border:1px solid var(--rit-borda); border-radius:var(--rit-raio); box-shadow:var(--rit-sombra); padding:26px; }
.rit-ajuda-card h3{ display:flex; align-items:center; gap:9px; font-size:16.5px; margin-bottom:12px; }
.rit-ajuda-card h3 .rit-ico{ color:var(--rit-ouro); }
.rit-ajuda-card p{ font-size:14px; margin:0 0 16px; }
.rit-ajuda-card-alt{ background:var(--rit-navy); border-color:var(--rit-navy); }
.rit-ajuda-card-alt h3{ color:#fff; }
.rit-ajuda-card-alt p{ color:#C9D6E6; }
.rit-ajuda-card-alt .rit-botao-borda{ background:transparent; border-color:rgba(255,255,255,.6); color:#fff; }

/* ---------- CTA final + rodapé ---------- */
.rit-final{ background:linear-gradient(125deg, var(--rit-navy) 0%, var(--rit-azul) 140%); border-top:8px solid var(--rit-ouro); text-align:center; padding:64px 20px; }
.rit-final h2{ color:#fff; font-size:28px; margin-bottom:8px; }
.rit-final p{ color:#C9D6E6; margin:0 0 24px; }
.rit-final .rit-hero-ctas{ justify-content:center; }
.rit-final-links{ margin-top:20px !important; font-size:13.5px; }
.rit-final-links a{ color:var(--rit-ouro); text-decoration:underline; }
.rit-rodape{ background:var(--rit-navy-escuro); color:#8A9AB0; padding:34px 20px; }
.rit-rodape-in{ max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.rit-marca-placa{ display:inline-block; background:#fff; border-radius:12px; padding:8px 14px; }
.rit-marca-placa img{ height:48px; width:auto; display:block; }
.rit-rodape p{ margin:0; font-size:13px; flex:1; min-width:260px; }
.rit-rodape small{ font-size:11.5px; line-height:1.5; display:block; margin-top:6px; }
.rit .rit-rodape-volta{ color:var(--rit-ouro); font-weight:700; font-size:13.5px; }

/* ---------- Responsivo ---------- */
@media (max-width:960px){
  .rit-hero-in{ grid-template-columns:1fr; padding:44px 20px 60px; }
  .rit-hero h1{ font-size:32px; }
  .rit-hero-arte{ max-width:430px; margin:0 auto; width:100%; }
  .rit-passo,.rit-passo:nth-child(even){ grid-template-columns:1fr; padding:24px 20px; }
  .rit-passo:nth-child(even) .rit-passo-txt{ order:1; }
  .rit-passo:nth-child(even) .rit-passo-arte{ order:2; }
  .rit-topo-nav{ display:none; }
  .rit-sec{ padding:48px 16px; }
}
@media print{
  .rit-topo,.rit-hero-arte,.rit-flutua,.rit-final,.rit-cta-faixa,.rit-topo-cta{ display:none !important; }
  .rit-sec,.rit-sec-navy{ background:#fff !important; padding:18px 0; }
  .rit-sec-navy *{ color:#111 !important; }
  .rit-passo{ opacity:1 !important; transform:none !important; border:1px solid #ccc; page-break-inside:avoid; grid-template-columns:1fr !important; }
  .rit-mock{ display:none; }
  .rit-faq-item > div{ display:block; }
}