/* ========================================================================== 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, priorizando velocidade sobre estética conforme o briefing. ========================================================================== */ :root { --color-bg: #1f0d10; --color-bg-alt: #291317; --color-card: #34171c; --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-sm: 6px; --radius-md: 14px; --radius-lg: 22px; --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%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } .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, h3 { font-family: var(--font-serif); line-height: 1.25; } .section { padding: 48px 0; } .section--alt { background: var(--color-bg-alt); } /* ========================================================================== Imagens de conteúdo (mapa de imagens do briefing) 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); } .offer .content-img { margin-bottom: 24px; } /* ========================================================================== Botão CTA ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; font-family: var(--font-sans); font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; padding: 17px 20px; border-radius: 999px; border: none; cursor: pointer; } .btn--cta { background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold)); color: #2a1207; box-shadow: 0 8px 20px rgba(205, 164, 78, 0.3); } .btn--cta:active { transform: scale(0.98); } .btn--large { font-size: 1.1rem; padding: 20px; } /* ========================================================================== Hero Fundo em gradiente vinho/marrom escuro com formas geométricas douradas (nenhuma imagem externa) por trás da imagem principal. ========================================================================== */ .hero { position: relative; overflow: hidden; background: radial-gradient(circle at 20% 0%, #3a1a20 0%, var(--color-bg) 60%); 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; margin-bottom: 24px; } .play-btn { 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 e preço ========================================================================== */ .offer { text-align: center; } /* ========================================================================== CTA final ========================================================================== */ .offer--final { padding: 40px 0 64px; } /* ========================================================================== Footer ========================================================================== */ .footer { background: var(--color-bg-alt); padding: 24px 0 90px; text-align: center; font-size: 0.78rem; color: var(--color-text-muted); } .footer__disclaimer { margin-top: 8px; font-size: 0.72rem; opacity: 0.75; } /* ========================================================================== Barra fixa de CTA (mobile) position: fixed remove o elemento do fluxo normal, então mostrar/ocultar não desloca o restante da página (CLS zero). ========================================================================== */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--color-bg-alt); border-top: 1px solid var(--color-border); transform: translateY(100%); transition: transform 0.25s ease; } .sticky-cta.is-visible { transform: translateY(0); } /* ========================================================================== Responsivo — tablet e desktop ========================================================================== */ @media (min-width: 600px) { .btn { width: auto; padding: 18px 48px; } .content-img { max-width: 480px; } } @media (min-width: 900px) { .sticky-cta { display: none; } }