/* ========================================================================== Reset e variáveis Nenhuma fonte externa é carregada (ver comentário no do index.html): isso evita uma requisição de rede, elimina FOUT/FOIT e ajuda a manter o CLS em zero. ========================================================================== */ :root { --color-bg: #000000; --color-bg-alt: #0d0d0d; --color-gold: #cda44e; --color-gold-light: #e8c97a; --color-text: #f3e7dd; --color-text-muted: #cbb3a8; --color-border: rgba(205, 164, 78, 0.25); --font-serif: Georgia, "Times New Roman", Times, serif; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --radius-md: 14px; --container-width: 720px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); line-height: 1.55; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 20px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } h1, h2 { font-family: var(--font-serif); line-height: 1.25; } .section { padding: 48px 0; } /* ========================================================================== Imagens de conteúdo width/height no HTML já reservam o espaço (proporção real de cada arquivo); aqui apenas garantimos responsividade sem alterar essa proporção. ========================================================================== */ .content-img { width: 100%; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--radius-md); } /* ========================================================================== Hero (banner + vídeo) ========================================================================== */ .hero { position: relative; overflow: hidden; background: var(--color-bg); padding: 44px 0 40px; text-align: center; } .hero::before { content: ""; position: absolute; top: -70px; right: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(205, 164, 78, 0.22), transparent 70%); pointer-events: none; } .hero .container { position: relative; z-index: 1; } .hero .content-img { margin-bottom: 24px; } /* Espaço reservado para o vídeo: proporção 16:9 fixa evita CLS quando o embed real for inserido. */ .video-placeholder { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius-md); background: linear-gradient(150deg, #452028, #1c0c0e); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: pointer; } .video-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .video-placeholder::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); } .video-placeholder iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .play-btn { position: relative; z-index: 1; width: 62px; height: 62px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold)); color: #2a1207; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } .play-btn svg { margin-left: 3px; } /* ========================================================================== Oferta (botões de upsell/downsell da Kiwify) ========================================================================== */ .offer { text-align: center; } /* ========================================================================== Footer ========================================================================== */ .footer { background: var(--color-bg-alt); padding: 24px 0 40px; text-align: center; font-size: 0.78rem; color: var(--color-text-muted); } /* ========================================================================== Responsivo — tablet e desktop ========================================================================== */ @media (min-width: 600px) { .content-img { max-width: 480px; } }