:root{

--primary:#c05cff;
--secondary:#ff8fb8;
--gold:#ffd166;
--dark:#24152f;
--text:#62556d;
--bg:#fff9fc;
--white:#ffffff;

--shadow:0 25px 60px rgba(36,21,47,.12);

--radius:28px;

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

}

.container{

width:min(1180px,92%);

margin:auto;

}

img{

width:100%;

display:block;

}

/* HEADER */

.header{

position:fixed;

top:0;

width:100%;

z-index:999;

background:rgba(255,255,255,.75);

backdrop-filter:blur(20px);

}

.header .container{

height:90px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

font-size:1.6rem;

font-weight:800;

color:var(--primary);

}

.menu{

display:flex;

gap:22px;

}

.menu a{

text-decoration:none;

color:var(--dark);

font-weight:500;

}

.menu a:hover{

color:var(--primary);

}

/* HERO */

.hero{

padding-top:160px;

min-height:100vh;

background:
radial-gradient(circle at top right,#ffd8ed,transparent 35%),
linear-gradient(120deg,#fff,#fff7fb);

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.badge{

background:white;

padding:10px 22px;

border-radius:50px;

color:var(--primary);

font-weight:600;

display:inline-block;

margin-bottom:25px;

box-shadow:var(--shadow);

}

.hero h1{

font-size:3.8rem;

line-height:1.1;

color:var(--dark);

margin-bottom:25px;

}

.hero p{

font-size:1.15rem;

margin-bottom:35px;

}

.hero-image img{

border-radius:40px;

box-shadow:var(--shadow);

}

/* BOTÕES */

.btn-primary,
.btn-whatsapp{

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:white;

padding:16px 35px;

border-radius:50px;

text-decoration:none;

font-weight:700;

display:inline-block;

transition:.3s;

}

.btn-primary:hover,
.btn-whatsapp:hover{

transform:translateY(-5px);

}

/* SEÇÕES */

.section{

padding:120px 0;

}

.section h2{

text-align:center;

font-size:2.6rem;

color:var(--dark);

margin-bottom:55px;

}

/* GRID */

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}

.card{

background:white;

border-radius:var(--radius);

padding:30px;

box-shadow:var(--shadow);

transition:.4s;

}

.card:hover{

transform:translateY(-12px);

}

.card img{

border-radius:20px;

margin-bottom:20px;

}

/* SOBRE */

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}

/* GALERIA */

.gallery-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

}

.gallery-grid img{

height:320px;

object-fit:cover;

border-radius:30px;

box-shadow:var(--shadow);

transition:.4s;

}

.gallery-grid img:hover{

transform:scale(1.04);

}

/* CTA */

.cta{

background:
linear-gradient(135deg,var(--primary),var(--secondary));

color:white;

text-align:center;

}

.cta h2{

color:white;

}

/* FOOTER */

.footer{

background:#171020;

color:white;

padding:70px 0;

text-align:center;

}

/* ANIMAÇÃO */

.section,
.card,
.hero-text,
.hero-image{

animation:fade .8s ease;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:none;

}

}

/* ===== PREMIUM UPGRADE 3 ===== */

/* Diferenciais */

#diferenciais-premium .card{

text-align:center;

position:relative;

overflow:hidden;

}

#diferenciais-premium .card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

}

/* Cards premium */

.card h3{

font-size:1.25rem;

color:var(--dark);

margin-bottom:15px;

}

.card p{

line-height:1.7;

}

/* Footer social */

.social{

margin-top:35px;

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

.social a{

color:white;

text-decoration:none;

font-weight:600;

padding:10px 22px;

border-radius:50px;

border:1px solid rgba(255,255,255,.3);

transition:.3s;

}

.social a:hover{

background:white;

color:var(--dark);

}

/* WhatsApp flutuante */

.floating-whatsapp{

position:fixed;

right:25px;

bottom:25px;

z-index:1000;

background:#25D366;

color:white;

text-decoration:none;

font-weight:700;

padding:16px 28px;

border-radius:50px;

box-shadow:0 15px 35px rgba(37,211,102,.35);

transition:.3s;

}

.floating-whatsapp:hover{

transform:translateY(-8px);

}

/* destaque CTA */

.cta{

position:relative;

overflow:hidden;

}

.cta::before{

content:"";

position:absolute;

width:300px;

height:300px;

background:rgba(255,255,255,.15);

border-radius:50%;

top:-120px;

right:-80px;

}

/* ===== DESIGN PREMIUM FINAL ===== */

/* Hero refinado */

.hero{

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:linear-gradient(
135deg,
rgba(192,92,255,.18),
rgba(255,143,184,.18)
);

border-radius:50%;

top:-200px;

left:-200px;

filter:blur(20px);

}

.hero-image{

position:relative;

}

.hero-image::after{

content:"";

position:absolute;

inset:20px;

border:2px solid rgba(255,255,255,.5);

border-radius:35px;

pointer-events:none;

}

/* Produtos premium */

.products .card{

padding:0;

overflow:hidden;

}

.products .card img{

height:260px;

object-fit:cover;

margin:0;

transition:.5s;

}

.products .card:hover img{

transform:scale(1.08);

}

.products .card h3,
.products .card p{

padding-left:25px;

padding-right:25px;

}

.products .card h3{

margin-top:20px;

}

/* Processo criativo */

.processo{

background:#fff;

}

.processo .card{

text-align:center;

border-top:5px solid var(--primary);

}

/* Destaques */

#diferenciais-premium .card{

background:
linear-gradient(
145deg,
#ffffff,
#fff4fa
);

}

/* Depoimentos */

#depoimentos .card{

max-width:700px;

margin:auto;

text-align:center;

font-size:1.1rem;

}

/* FAQ */

#faq .card{

cursor:pointer;

}

#faq .card:hover{

background:#fff0f8;

}

/* Títulos */

.section h2{

position:relative;

}

.section h2::after{

content:"";

display:block;

width:80px;

height:4px;

margin:18px auto 0;

border-radius:10px;

background:linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

}

/* Botão flutuante */

.floating-whatsapp{

animation:pulseWhatsapp 2s infinite;

}

@keyframes pulseWhatsapp{

0%{

box-shadow:0 0 0 0 rgba(37,211,102,.5);

}

70%{

box-shadow:0 0 0 20px rgba(37,211,102,0);

}

100%{

box-shadow:0 0 0 0 rgba(37,211,102,0);

}

}

/* Entrada suave */

.card{

will-change:transform;

}

/* ===== REFINAMENTO PREMIUM FINAL ===== */

/* Tipografia e espaçamento */

body{
letter-spacing:.1px;
}

.hero h1{

font-weight:800;

letter-spacing:-1.5px;

}

.hero p{

max-width:550px;

}

/* Botões */

.btn-primary,
.btn-whatsapp{

box-shadow:
0 15px 35px rgba(192,92,255,.25);

}

.btn-primary:hover,
.btn-whatsapp:hover{

box-shadow:
0 20px 45px rgba(192,92,255,.35);

}

/* Cards mais premium */

.card{

border:1px solid rgba(0,0,0,.04);

}

.card:hover{

box-shadow:
0 30px 70px rgba(36,21,47,.18);

}

/* Produtos */

.products .card{

background:white;

}

.products .card h3{

font-size:1.35rem;

color:#24152f;

}

.products .card p{

padding-bottom:25px;

}

/* Galeria */

.gallery-grid{

gap:30px;

}

.gallery-grid img{

filter:saturate(1.05);

}

/* Sobre */

.about-grid p{

font-size:1.05rem;

line-height:1.9;

}

/* CTA */

.cta{

padding:100px 20px;

}

.cta h2{

font-size:2.8rem;

}

/* Footer */

.footer{

margin-top:0;

}

.footer p{

opacity:.85;

}

/* Header */

.header.scrolled{

background:white;

box-shadow:
0 15px 40px rgba(0,0,0,.12);

}

/* Mobile acabamento */

@media(max-width:900px){

.hero h1{

letter-spacing:-.5px;

}

.cta h2{

font-size:2rem;

}

.section{

padding:90px 0;

}

}

/* ===== PREMIUM 4 ===== */

/* Benefícios */

.benefits{

background:
linear-gradient(
180deg,
#fff7fb,
#ffffff
);

}

.benefits .card{

text-align:center;

padding:40px 30px;

}

.benefits .card h3{

font-size:1.35rem;

margin-bottom:18px;

}

/* Orçamento */

.quote{

padding:100px 0;

}

.quote-box{

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:white;

padding:70px 40px;

border-radius:40px;

text-align:center;

box-shadow:
0 30px 70px rgba(192,92,255,.25);

}

.quote-box h2{

color:white;

font-size:2.8rem;

margin-bottom:20px;

}

.quote-box p{

font-size:1.15rem;

margin-bottom:35px;

}

.quote-box .btn-primary{

background:white;

color:var(--primary);

}

.quote-box .btn-primary:hover{

transform:translateY(-5px);

}

/* Mais destaque nos títulos */

.benefits h2,
.products h2,
.gallery h2{

font-weight:800;

}

/* Efeito premium nos cards */

.benefits .card:hover{

transform:translateY(-15px);

}

/* Mobile */

@media(max-width:900px){

.quote-box{

padding:45px 25px;

}

.quote-box h2{

font-size:2rem;

}

}

/* ===== PREMIUM 5 - PRODUTOS E GALERIA ===== */

/* Produtos catálogo */

.products .cards{

align-items:stretch;

}

.products .card{

position:relative;

overflow:hidden;

}

.products .card::after{

content:"";

position:absolute;

bottom:0;

left:0;

width:100%;

height:4px;

background:linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

transform:scaleX(0);

transition:.4s;

}

.products .card:hover::after{

transform:scaleX(1);

}

.products .card img{

height:280px;

object-fit:cover;

}

/* Galeria estilo portfólio */

.gallery-grid{

columns:3;

column-gap:25px;

}

.gallery-grid img{

margin-bottom:25px;

break-inside:avoid;

border-radius:30px;

transition:.5s;

}

.gallery-grid img:hover{

transform:translateY(-10px);

box-shadow:
0 30px 60px rgba(36,21,47,.2);

}

/* Imagens premium */

.hero-image img,
.products img,
.gallery-grid img{

background:#f7f2f8;

}

/* Mobile */

@media(max-width:900px){

.gallery-grid{

columns:1;

}

.products .card img{

height:240px;

}

}

/* ===== PREMIUM 6 - HEADER E HERO ===== */

/* Header premium */

.header{

transition:.4s;

}

.header.scrolled{

padding-top:5px;

padding-bottom:5px;

}

.logo{

position:relative;

}

.logo::after{

content:"";

display:block;

width:45px;

height:3px;

background:linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

border-radius:10px;

margin-top:5px;

}

/* Menu */

.menu a{

position:relative;

transition:.3s;

}

.menu a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

.menu a:hover::after{

width:100%;

}

/* Hero refinado */

.hero-text{

position:relative;

z-index:2;

}

.hero h1 span{

background:linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero-image img{

animation:floatImage 6s ease-in-out infinite;

}

@keyframes floatImage{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

/* Badge */

.badge{

border:1px solid rgba(192,92,255,.15);

}

/* Botões */

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.btn-primary{

position:relative;

overflow:hidden;

}

.btn-primary::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:rgba(255,255,255,.25);

transition:.5s;

}

.btn-primary:hover::before{

left:100%;

}

/* Mobile */

@media(max-width:900px){

.menu{

background:white;

padding:15px;

border-radius:20px;

box-shadow:var(--shadow);

}

.hero-image img{

animation:none;

}

}

/* ===== PREMIUM 7 - FOOTER INSTITUCIONAL ===== */

/* Footer */

.footer{

text-align:left;

background:
linear-gradient(
135deg,
#171020,
#2b1838
);

}

.footer .container{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:40px;

}

.footer h3{

color:white;

margin-bottom:20px;

font-size:1.3rem;

}

.footer p{

line-height:1.8;

color:rgba(255,255,255,.75);

}

.footer a{

color:rgba(255,255,255,.85);

text-decoration:none;

display:block;

margin-bottom:12px;

transition:.3s;

}

.footer a:hover{

color:white;

transform:translateX(5px);

}

/* Barra final */

.footer-bottom{

margin-top:50px;

padding-top:25px;

border-top:

1px solid rgba(255,255,255,.15);

text-align:center;

}

/* WhatsApp */

.floating-whatsapp{

font-size:.95rem;

font-weight:800;

}

/* Responsivo */

@media(max-width:900px){

.footer .container{

grid-template-columns:1fr;

text-align:center;

}

.footer a:hover{

transform:none;

}

}