/* ================= RESET ================= */

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* ================= VARIÁVEIS ================= */

:root {

--bg-main: #070707;

--glass-bg: rgba(255,255,255,0.06);
--glass-border: rgba(255,255,255,0.15);

--gold: #d4af37;
--gold-soft: rgba(212,175,55,0.2);

--text-main: #f5f5f5;
--text-soft: #b8b8b8;

}

/* ================= BASE ================= */

body {

font-family: Inter, system-ui, sans-serif;

background:
radial-gradient(circle at 20% 10%, #1a1a1a, transparent 40%),
radial-gradient(circle at 80% 20%, #111, transparent 45%),
var(--bg-main);

color: var(--text-main);

line-height: 1.6;

padding-top: 100px;

overflow-x: hidden;
position: relative;

}

/* ================= PARTICLES ================= */

#goldParticles {

position: fixed;
top: 0;
left: 0;

width: 100%;
height: 100%;

z-index: -1;

}

/* ================= HEADER ================= */

header {

position: fixed;
top: 0;
width: 100%;

background: rgba(0,0,0,0.6);

display: flex;
justify-content: space-between;
align-items: center;

padding: 18px 30px;

border-bottom: 1px solid var(--glass-border);

z-index: 1000;

}

nav a {

color: var(--text-soft);
margin-left: 18px;
text-decoration: none;

transition: 0.25s;

}

nav a:hover {
color: var(--gold);
}

/* ================= SEÇÕES ================= */

section {

padding: 90px 22px;
max-width: 1100px;
margin: auto;

}

.section-title {

text-align: center;
font-size: 30px;

margin-bottom: 40px;

color: var(--gold);

}

/* ================= HERO ================= */

.hero {

text-align: center;

animation: heroEntrance 1.2s ease;

}

.hero h2 {
font-size: 38px;
margin-bottom: 15px;
}

.hero p {
color: var(--text-soft);
}

@keyframes heroEntrance {

from {
opacity: 0;
transform: translateY(40px);
}

to {
opacity: 1;
transform: none;
}

}

/* ================= GRID ================= */

.grid {

display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;

}

/* ================= CARDS ================= */

.card,
.price-card {

background: var(--glass-bg);

border: 1px solid var(--glass-border);

padding: 24px;

border-radius: 16px;

transition: 0.3s;

}

.card:hover,
.price-card:hover {

transform: translateY(-6px);

border-color: var(--gold);

box-shadow: 0 0 20px var(--gold-soft);

}

.destaque {
border: 2px solid var(--gold);
}

/* ================= PREÇOS ================= */

.price-value{

margin-top:18px;

font-size:30px;
font-weight:900;

text-align:center;

color:#111;

background:linear-gradient(135deg,#d4af37,#f6d97a);

padding:16px;

border-radius:14px;

box-shadow:
0 6px 20px rgba(0,0,0,.6),
inset 0 1px 0 rgba(255,255,255,.5);

}

/* complemento mensal — CONTRASTE TOTAL */

.price-value span{

display:block;

margin-top:10px;

font-size:15px;
font-weight:800;

color:#f5f5f5;

background:#111;

padding:8px 12px;

border-radius:8px;

letter-spacing:.3px;

box-shadow:0 2px 8px rgba(0,0,0,.7);

}


/* animações */

@keyframes pricePulse{

0%{transform:scale(1.02);}
50%{transform:scale(1.06);}
100%{transform:scale(1.02);}

}

@keyframes shine{

to{left:120%;}

}


.price-value span {

display: block;

font-size: 14px;

color: var(--text-soft);

margin-top: 6px;

}

/* ================= BOTÕES ================= */

.cta {

display: inline-block;

background: var(--gold);

border: none;

padding: 14px 28px;

border-radius: 12px;

font-weight: 800;

cursor: pointer;

transition: 0.25s;

color: #111;

}

.cta:hover {

transform: translateY(-2px);

box-shadow: 0 0 15px var(--gold-soft);

}

.cta-instagram {

background: linear-gradient(45deg,#fd5949,#d6249f,#285AEB);

padding: 14px 26px;

border-radius: 12px;

text-decoration: none;

color: white;

font-weight: 700;

}

/* ================= CTA CENTER ================= */

.cta-center {

width: 100%;

display: flex;
justify-content: center;

margin-top: 35px;

}

/* ================= CONTATO ================= */

.contact-actions {

display: flex;
gap: 18px;

flex-wrap: wrap;
justify-content: center;

}

/* ================= PORTFÓLIO ================= */

.portfolio-grid {

display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;

}

.portfolio-item {

position: relative;
overflow: hidden;

border-radius: 16px;

border: 1px solid var(--glass-border);

}

.portfolio-item img {

width: 100%;
display: block;

transition: 0.4s;

}

.portfolio-overlay {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

background: rgba(0,0,0,0.7);

display: flex;
align-items: center;
justify-content: center;

opacity: 0;

transition: 0.3s;

}

.portfolio-overlay h3 {

color: var(--gold);

}

.portfolio-item:hover img {

transform: scale(1.1);
filter: brightness(0.7);

}

.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}

/* ================= FOOTER ================= */

footer {

text-align: center;

padding: 40px;

background: #050505;

color: #777;

}

/* ================= REVEAL ================= */

.reveal {

opacity: 0;
transform: translateY(40px);

transition: 1s;

}

.reveal.active {

opacity: 1;
transform: none;

}

/* ================= RESPONSIVO ================= */

@media (max-width: 768px) {

.hero h2 {
font-size: 26px;
}

header {
flex-direction: column;
gap: 8px;
}

body {
padding-top: 130px;
}

.portfolio-grid {
grid-template-columns: 1fr;
}

}