/*
 * inicio.css — página inicial. Usa o mesmo sistema de publico.css (tokens do
 * Stitch): bordô, dourado, creme, Playfair nos títulos.
 */
@import "./publico.css";

.ini-secao { padding: 56px 0; }
@media (min-width: 900px) { .ini-secao { padding: 88px 0; } }
.ini-rotulo { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ouro-700); }
.ini-rotulo::before { content: ""; width: 24px; height: 1px; background: var(--ouro-500); }
.ini-titulo { margin: 12px 0 0; font-family: var(--fonte-display); font-weight: 600; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; color: var(--texto); }
.ini-titulo em { color: var(--p-500); }
.ini-lead { margin: 14px 0 0; font-size: clamp(15px, 1.7vw, 18px); line-height: 1.65; color: var(--texto-soft); max-width: 620px; }
.ini-centro { text-align: center; }
.ini-centro .ini-lead { margin-left: auto; margin-right: auto; }

.ini-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ini-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: var(--raio-full); font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.ini-btn:hover { transform: translateY(-1px); text-decoration: none; }
.ini-btn-primario { background: var(--p-500); color: var(--p-texto); box-shadow: var(--sombra-primaria); }
.ini-btn-primario:hover { background: var(--p-600); color: var(--p-texto); }
.ini-btn-secundario { background: var(--superficie); color: var(--p-600); border: 1px solid var(--borda-ouro); }
.ini-btn-secundario:hover { border-color: var(--ouro-500); color: var(--p-600); }
@media (max-width: 480px) { .ini-botoes .ini-btn { flex: 1 1 100%; } }

/* ── Herói ─────────────────────────────────────────────────────────────── */
.ini-heroi { position: relative; overflow: hidden; background:
  radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--ouro-300) 28%, transparent), transparent 60%),
  radial-gradient(800px 400px at -10% 110%, color-mix(in srgb, var(--p-200) 60%, transparent), transparent 60%),
  var(--fundo); }
.ini-heroi-grade { display: grid; gap: 40px; padding-top: 40px; padding-bottom: 56px; align-items: center; }
@media (min-width: 960px) { .ini-heroi-grade { grid-template-columns: 1.05fr .95fr; gap: 56px; padding-top: 72px; padding-bottom: 96px; } }
.ini-heroi h1 { margin: 14px 0 0; font-family: var(--fonte-display); font-weight: 600; font-size: clamp(36px, 6vw, 64px); line-height: 1.05; letter-spacing: -.01em; }
.ini-heroi h1 em { display: block; color: var(--p-500); font-style: italic; }
.ini-heroi .ini-lead { font-size: clamp(16px, 1.9vw, 19px); }
.ini-garantia { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--texto-soft); }
.ini-garantia li { display: inline-flex; align-items: center; gap: 6px; }
.ini-garantia .material-symbols-outlined { font-size: 18px; color: var(--verde-500); }

/* Prévia do painel (exemplo) */
.ini-previa { position: relative; display: grid; gap: 14px; max-width: 520px; width: 100%; margin: 0 auto; }
.ini-previa-legenda { justify-self: center; font-size: 12px; color: var(--texto-muted); }
.ini-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-2xl); box-shadow: var(--sombra-lg); padding: 18px 20px; }
.ini-cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ini-cartao small { color: var(--texto-soft); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ini-cartao strong { display: block; margin-top: 4px; font-family: var(--fonte-display); font-size: 28px; line-height: 1.1; }
.ini-contagem { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; background: linear-gradient(135deg, var(--p-500), var(--p-700)); color: #fff; border: 0; }
.ini-contagem .material-symbols-outlined { width: 52px; height: 52px; font-size: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.ini-contagem small { color: rgba(255, 255, 255, .8); }
.ini-contagem strong { display: block; color: #fff; font-size: 34px; }
.ini-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ini-barra { height: 8px; border-radius: var(--raio-full); background: var(--superficie-2); overflow: hidden; margin-top: 12px; }
.ini-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--p-500), var(--ouro-500)); }
.ini-selo { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--raio-full); background: var(--verde-100); color: var(--verde-700); font-size: 12px; font-weight: 700; }
.ini-selo .material-symbols-outlined { font-size: 16px; }
.ini-linha { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--borda); font-size: 14px; }
.ini-linha:first-of-type { border-top: 0; }
.ini-linha b { font-weight: 700; }
@media (max-width: 420px) { .ini-cartao strong { font-size: 22px; } .ini-contagem strong { font-size: 28px; } }

/* ── Categorias ──────────────────────────────────────────────────────── */
.ini-categorias { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
@media (min-width: 640px) { .ini-categorias { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ini-categoria { display: grid; gap: 10px; justify-items: start; text-align: left; padding: 18px; border-radius: var(--raio-xl); background: var(--superficie); border: 1px solid var(--borda); text-decoration: none; color: var(--texto); font-weight: 700; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.ini-categoria:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); border-color: var(--borda-ouro); text-decoration: none; color: var(--texto); }
.ini-categoria .material-symbols-outlined { width: 44px; height: 44px; font-size: 24px; display: grid; place-items: center; border-radius: 12px; background: var(--p-100); color: var(--p-500); }
.ini-categoria span:last-child { font-size: 15px; }
.ini-mais { display: flex; justify-content: center; margin-top: 24px; }

/* ── Como funciona ───────────────────────────────────────────────────── */
.ini-fundo-claro { background: var(--superficie); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.ini-passos { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: passo; }
@media (min-width: 760px) { .ini-passos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ini-passos { grid-template-columns: repeat(4, 1fr); } }
.ini-passo { position: relative; padding: 24px 20px 20px; border-radius: var(--raio-2xl); background: var(--fundo); border: 1px solid var(--borda); counter-increment: passo; }
.ini-passo::before { content: counter(passo, decimal-leading-zero); font-family: var(--fonte-display); font-size: 30px; color: var(--ouro-500); line-height: 1; }
.ini-passo h3 { margin: 12px 0 6px; font-family: var(--fonte-display); font-size: 21px; }
.ini-passo p { margin: 0; color: var(--texto-soft); line-height: 1.6; font-size: 15px; }

/* ── Recursos ─────────────────────────────────────────────────────────── */
.ini-recursos { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 700px) { .ini-recursos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ini-recursos { grid-template-columns: repeat(3, 1fr); } }
.ini-recurso { padding: 24px; border-radius: var(--raio-2xl); background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra-sm); }
.ini-recurso .material-symbols-outlined { width: 48px; height: 48px; font-size: 26px; display: grid; place-items: center; border-radius: 14px; background: var(--ouro-100); color: var(--ouro-700); }
.ini-recurso h3 { margin: 16px 0 6px; font-family: var(--fonte-display); font-size: 21px; }
.ini-recurso p { margin: 0; color: var(--texto-soft); line-height: 1.6; font-size: 15px; }

/* ── Segurança (faixa bordô) ─────────────────────────────────────────── */
.ini-seguranca { background: linear-gradient(135deg, var(--p-700), var(--p-500)); color: #fff; }
.ini-seguranca .ini-rotulo { color: var(--ouro-300); }
.ini-seguranca .ini-rotulo::before { background: var(--ouro-300); }
.ini-seguranca .ini-titulo { color: #fff; }
.ini-seguranca .ini-lead { color: rgba(255, 255, 255, .82); }
.ini-garantias { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .ini-garantias { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ini-garantias { grid-template-columns: repeat(3, 1fr); } }
.ini-garantias li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px; border-radius: var(--raio-xl); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.ini-garantias .material-symbols-outlined { width: 44px; height: 44px; font-size: 24px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .14); color: var(--ouro-300); }
.ini-garantias strong { display: block; font-size: 16px; margin-bottom: 4px; }
.ini-garantias span:not(.material-symbols-outlined) { color: rgba(255, 255, 255, .8); font-size: 14px; line-height: 1.55; }

/* ── Profissionais ───────────────────────────────────────────────────── */
.ini-pro { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .ini-pro { grid-template-columns: 1fr 1fr; gap: 64px; } }
.ini-lista { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.ini-lista li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.ini-lista .material-symbols-outlined { color: var(--verde-500); }
.ini-pro-cartao { padding: 28px; border-radius: var(--raio-2xl); background: var(--superficie); border: 1px solid var(--borda-ouro); box-shadow: var(--sombra-md); display: grid; gap: 14px; }
.ini-pro-cartao h3 { margin: 0; font-family: var(--fonte-display); font-size: 24px; }
.ini-pro-cartao p { margin: 0; color: var(--texto-soft); line-height: 1.6; }

/* ── Chamada final ───────────────────────────────────────────────────── */
.ini-final { text-align: center; padding: 56px 24px; border-radius: 28px; background:
  radial-gradient(600px 240px at 50% 0%, color-mix(in srgb, var(--ouro-300) 30%, transparent), transparent 70%), var(--superficie);
  border: 1px solid var(--borda-ouro); }
.ini-final .ini-botoes { justify-content: center; }