/* Página pública (home.php): vitrine leve, mobile primeiro, mesmas cores do app */
body.site { background: radial-gradient(120% 60% at 50% 0%, #2a1a66 0%, #120d2b 60%) fixed, #120d2b; }
.site-topo { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: calc(var(--safe-top, 0px) + 10px) 16px 10px; background: rgba(18, 13, 43, .85); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.site-marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.site-marca img { width: 40px; height: 40px; border-radius: 10px; }
.site-marca b { font: 700 22px 'Fredoka', sans-serif; letter-spacing: 1px; color: #ffd24a; }
.site-topo nav { display: flex; align-items: center; gap: 14px; }
.site-topo nav a:not(.btn) { color: var(--texto-2); font-weight: 800; text-decoration: none; font-size: 14px; }
.site-main { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

.site-hero { display: grid; gap: 28px; align-items: center; padding: 34px 0 20px; }
.site-selo { display: inline-block; margin: 0 0 12px; padding: 6px 14px; border-radius: 99px; background: rgba(255, 200, 61, .14); color: #ffd24a; font-weight: 900; font-size: 13px; }
.site-hero h1 { margin: 0; font: 700 clamp(34px, 8vw, 58px)/1.05 'Fredoka', sans-serif; color: #fff; }
.site-hero h1 span { background: linear-gradient(180deg, #fff6c9, #ffd24a 50%, #ff9d00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-lead { margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: var(--texto-2); font-weight: 700; }
.site-lead b { color: #fff; }
.site-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.site-btn { min-height: 54px; padding: 0 26px; font-size: 17px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.site-checks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; color: var(--texto-2); font-weight: 800; font-size: 14px; }
.site-checks i { color: #4ade80; margin-right: 4px; }
.site-hero-midia { display: grid; justify-items: center; }
.site-video, .site-print { width: min(100%, 360px); aspect-ratio: 9 / 16; border-radius: 28px; background: #000; object-fit: cover;
    box-shadow: 0 0 0 6px #0b0b14, 0 0 0 8px #2a2a3a, 0 30px 70px rgba(0, 0, 0, .55), 0 0 60px rgba(255, 200, 61, .25); }
.site-print { aspect-ratio: auto; height: auto; }

.site-secao { padding: 40px 0 10px; }
.site-secao h2, .site-final h2 { margin: 0 0 18px; font: 700 clamp(26px, 6vw, 38px)/1.1 'Fredoka', sans-serif; color: #fff; }
.site-passos { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.site-passos li, .site-recursos article { position: relative; padding: 18px 18px 18px 74px; border-radius: 6px 20px 6px 20px; background: var(--card); border: 1px solid var(--card-borda); }
.site-passos li > span { position: absolute; left: 16px; top: 16px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px;
    background: linear-gradient(180deg, #ffe48a, #ffb020); color: #3b2400; font: 700 24px 'Fredoka', sans-serif; box-shadow: 0 4px 0 #b45309; }
.site-passos h3, .site-recursos h3 { margin: 0 0 6px; font: 700 20px 'Fredoka', sans-serif; color: #fff; }
.site-passos p, .site-recursos p { margin: 0; color: var(--texto-2); font-weight: 700; line-height: 1.5; font-size: 15px; }
.site-recursos { display: grid; gap: 12px; }
.site-recursos article > i { position: absolute; left: 18px; top: 18px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px;
    background: rgba(255, 200, 61, .15); color: #ffd24a; font-size: 20px; }
.site-prints { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory; }
.site-prints figure { flex: 0 0 min(70%, 260px); margin: 0; scroll-snap-align: center; text-align: center; }
.site-prints img { width: 100%; height: auto; border-radius: 22px; box-shadow: 0 0 0 5px #0b0b14, 0 18px 40px rgba(0, 0, 0, .5); }
.site-prints figcaption { margin-top: 10px; color: var(--texto-2); font-weight: 800; font-size: 14px; }
.site-faq { display: grid; gap: 10px; }
.site-faq details { padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-borda); }
.site-faq summary { cursor: pointer; font: 700 18px 'Fredoka', sans-serif; color: #fff; list-style: none; }
.site-faq summary::after { content: '+'; float: right; color: #ffd24a; }
.site-faq details[open] summary::after { content: '−'; }
.site-faq p { margin: 10px 0 0; color: var(--texto-2); font-weight: 700; line-height: 1.55; }
.site-final { margin: 40px 0; padding: 30px 20px; text-align: center; border-radius: 8px 28px 8px 28px; border: 1px solid rgba(255, 200, 61, .45);
    background: linear-gradient(120deg, rgba(255, 176, 32, .2), rgba(124, 58, 237, .2)), var(--card); }
.site-final p { margin: 0 0 18px; color: var(--texto-2); font-weight: 800; }
.site-rodape { padding: 20px 16px 40px; text-align: center; color: var(--texto-3); font-size: 13px; font-weight: 700; }
.site-rodape a { color: var(--texto-2); }
.site-aviso { max-width: 640px; margin: 8px auto 0; font-size: 12px; opacity: .8; }

@media (min-width: 820px) {
    .site-hero { grid-template-columns: 1.15fr .85fr; padding-top: 60px; }
    .site-passos { grid-template-columns: repeat(3, 1fr); }
    .site-recursos { grid-template-columns: repeat(3, 1fr); }
    .site-prints { justify-content: center; overflow: visible; }
    .site-prints figure { flex-basis: 260px; }
}

/* Páginas legais (Privacidade / Termos) */
.legal { max-width: 780px; padding-top: 28px; padding-bottom: 20px; }
.legal h1 { margin: 0; font: 700 clamp(30px, 7vw, 42px)/1.1 'Fredoka', sans-serif; color: #fff; }
.legal-data { margin: 6px 0 18px; color: var(--texto-3); font-weight: 800; font-size: 13px; }
.legal-indice { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 14px 16px; margin-bottom: 10px; border-radius: 16px; background: var(--card); border: 1px solid var(--card-borda); }
.legal-indice a { color: var(--texto-2); font-weight: 800; font-size: 13px; text-decoration: none; }
.legal section { padding-top: 18px; scroll-margin-top: 80px; }
.legal h2 { margin: 0 0 10px; font: 700 21px 'Fredoka', sans-serif; color: #ffd24a; }
.legal p { margin: 0 0 12px; color: var(--texto-2); font-weight: 700; line-height: 1.65; font-size: 15px; }
.legal p b { color: #fff; }
.legal a, .site-rodape a { color: #a5b4fc; }