* {
box-sizing: border-box;
}
html {
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family:
Arial,
Helvetica,
sans-serif;
background: #020617;
color: #f8fafc;
line-height: 1.6;
}
img {
max-width: 100%;
}
a {
text-decoration: none;
}
.container {
width: 100%;
max-width: 1120px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
/* =====================================================
HERO
===================================================== */
.hero {
width: 100%;
min-height: 720px;
display: flex;
align-items: center;
background:
radial-gradient(
circle at 80% 20%,
rgba(34,197,94,.30),
transparent 35%
),
radial-gradient(
circle at 15% 80%,
rgba(74,222,128,.14),
transparent 30%
),
linear-gradient(
135deg,
#020617,
#0f172a,
#052e16
);
}
.hero-grid {
width: 100%;
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
gap: 70px;
align-items: center;
}
.hero-content {
min-width: 0;
}
.categoria {
display: inline-block;
margin-bottom: 20px;
padding:
7px 16px;
border:
1px solid #22c55e;
border-radius: 30px;
color: #4ade80;
font-size: 13px;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.hero h1 {
margin:
0 0 20px;
max-width: 900px;
font-size:
clamp(42px, 6vw, 76px);
line-height: 1.02;
}
.hero-description {
max-width: 600px;
margin:
0 0 18px;
font-size: 20px;
color: #cbd5e1;
}
.hero-publico {
max-width: 700px;
margin:
10px 0;
color: #86efac;
}
.hero-dor {
max-width: 700px;
margin:
10px 0;
color: #bbf7d0;
}
.hero-image {
width: 100%;
max-width: 520px;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
overflow: hidden;
box-shadow:
0 30px 80px rgba(0,0,0,.55);
border:
1px solid rgba(34,197,94,.30);
}
.hero-image img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
/* =====================================================
CTA
===================================================== */
.cta {
display: inline-block;
margin-top: 25px;
padding:
16px 30px;
background: #22c55e;
color: #020617;
border-radius: 9px;
font-weight: 900;
transition: .2s;
box-shadow:
0 10px 30px rgba(34,197,94,.25);
}
.cta:hover {
transform:
translateY(-3px);
background: #4ade80;
box-shadow:
0 15px 35px rgba(34,197,94,.35);
}
.cta.large {
padding:
18px 36px;
font-size: 17px;
}
/* =====================================================
BENEFÍCIOS
===================================================== */
.beneficios-section {
width: 100%;
padding:
110px 0;
background: #0f172a;
text-align: center;
}
.section-label {
display: block;
margin-bottom: 12px;
color: #4ade80;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.beneficios-section h2,
.oferta-section h2,
.video-section h2,
.cta-final-section h2 {
font-size:
clamp(34px, 5vw, 54px);
line-height: 1.1;
max-width: 800px;
margin:
15px auto 40px;
}
.beneficios-grid {
display: grid;
grid-template-columns:
repeat(
auto-fit,
minmax(220px, 1fr)
);
gap: 20px;
}
.beneficio-card {
padding: 30px;
background: #052e16;
border:
1px solid #166534;
border-radius: 16px;
text-align: left;
transition: .2s;
}
.beneficio-card:hover {
transform:
translateY(-4px);
border-color: #22c55e;
}
.beneficio-icon {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-bottom: 15px;
border-radius: 50%;
background: #22c55e;
color: #020617;
font-size: 20px;
font-weight: bold;
}
.beneficio-card p {
margin: 0;
color: #dcfce7;
}
/* =====================================================
IMAGENS
===================================================== */
.imagens-section {
width: 100%;
padding:
100px 0;
background: #020617;
}
.imagens-grid {
display: grid;
grid-template-columns:
repeat(
auto-fit,
minmax(280px, 1fr)
);
gap: 25px;
justify-items: center;
}
.imagem-card {
width: 100%;
display: flex;
justify-content: center;
}
.imagem-card img {
display: block;
width: 100%;
max-width: 520px;
height: auto;
border-radius: 18px;
border:
1px solid #166534;
box-shadow:
0 20px 50px rgba(0,0,0,.35);
}
/* =====================================================
VÍDEO
===================================================== */
.video-section {
width: 100%;
padding:
110px 0;
background: #0f172a;
text-align: center;
}
.video-wrapper {
position: relative;
width: 100%;
max-width: 900px;
aspect-ratio: 16 / 9;
margin:
40px auto 0;
overflow: hidden;
border-radius: 18px;
background: #000;
box-shadow:
0 25px 70px rgba(0,0,0,.50);
border:
1px solid #166534;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* =====================================================
OFERTA
===================================================== */
.oferta-section {
width: 100%;
padding:
110px 0;
background: #020617;
}
.oferta-card {
width: min(
720px,
100%
);
margin:
0 auto;
padding:
50px 30px;
text-align: center;
background:
linear-gradient(
145deg,
#052e16,
#0f172a
);
border:
1px solid #166534;
border-radius: 22px;
box-shadow:
0 25px 70px rgba(0,0,0,.35);
}
.oferta-card h2 {
margin-bottom: 20px;
}
.preco {
margin:
30px 0;
}
.moeda {
margin-right: 8px;
color: #86efac;
}
.valor {
font-size: 48px;
font-weight: bold;
color: #ffffff;
}
/* =====================================================
CTA FINAL
===================================================== */
.cta-final-section {
width: 100%;
padding:
120px 0;
text-align: center;
background:
linear-gradient(
135deg,
#166534,
#052e16,
#0f172a
);
}
.cta-final-section p {
max-width: 700px;
margin:
20px auto;
color: #dcfce7;
font-size: 18px;
}
/* =====================================================
FOOTER
===================================================== */
.footer {
width: 100%;
padding:
40px 0;
text-align: center;
color: #64748b;
background: #020617;
border-top:
1px solid #052e16;
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 800px) {
.hero {
min-height: auto;
padding:
80px 0;
}
.hero-grid {
grid-template-columns: 1fr;
gap: 45px;
}
.hero-content {
text-align: center;
}
.hero-description,
.hero-publico,
.hero-dor {
margin-left: auto;
margin-right: auto;
}
.hero-image {
max-width: 600px;
}
.hero h1 {
font-size: 46px;
}
.beneficios-section,
.imagens-section,
.video-section,
.oferta-section,
.cta-final-section {
padding:
70px 0;
}
.video-wrapper {
width: 100%;
max-width: 100%;
border-radius: 10px;
}
.oferta-card {
padding:
35px 25px;
}
.valor {
font-size: 38px;
}
}