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

html{
scroll-behavior:smooth;
}

body{
background:#050505;
color:#F3EFE8;
font-family:'Montserrat', sans-serif;
line-height:1.7;
overflow-x:hidden;
}

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

header{
position:fixed;
top:0;
left:0;
width:100%;


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

padding:20px 6%;

background:rgba(5,5,5,.92);

backdrop-filter:blur(10px);

border-bottom:1px solid rgba(209,160,74,.15);

z-index:1000;


}

.logo img{
height:80px;
}

nav{
display:flex;
gap:30px;
}

nav a{
color:#F3EFE8;
text-decoration:none;
font-weight:500;
transition:.3s;
}

nav a:hover

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

.hero{
    min-height:100vh;

    display:grid;

    grid-template-columns:55% 45%;

    align-items:center;

    padding:180px 8% 100px;

    gap:40px;

    position:relative;
}

.hero::before{


content:"";

position:absolute;

top:0;
left:0;
right:0;
bottom:0;

background-image:url("../images/dragon.png");
background-repeat:no-repeat;
background-position:center center;
background-size:75%;

opacity:.15;

pointer-events:none;


}

.hero-content{
width:55%;
position:relative;
z-index:2;

padding-top:120px;
}

.hero-content h1{


font-family:'Cinzel', serif;

font-size:3rem;

line-height:1.15;

margin-bottom:25px;


}

.hero-content p{


font-size:1.15rem;

max-width:650px;

color:#d9d4cc;


}

.hero-buttons{


display:flex;

gap:20px;

margin-top:40px;


}

.btn-primary,
.btn-secondary{


padding:15px 30px;

border-radius:50px;

text-decoration:none;

font-weight:600;

transition:.3s;


}

.btn-primary{


background:#D1A04A;

color:#050505;


}

.btn-primary:hover{


transform:translateY(-3px);


}

.btn-secondary{


border:1px solid #D1A04A;

color:#D1A04A;


}

.btn-secondary:hover{


background:#D1A04A;

color:#050505;


}

.hero-product{


width:45%;

text-align:center;

position:relative;

z-index:2;


}

.hero-product img{


width:100%;
max-width:520px;

filter:drop-shadow(0 0 35px rgba(209,160,74,.25));


}

/* =========================
SECCIONES
========================= */

section{
padding:100px 8%;
}

section h2{


font-family:'Cinzel', serif;

font-size:2.6rem;

text-align:center;

color:#D1A04A;

margin-bottom:50px;


}

/* =========================
BENEFICIOS
========================= */

.benefits-grid{


display:grid;

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

gap:25px;


}

.card{


background:#101010;

border:1px solid rgba(209,160,74,.2);

border-radius:20px;

padding:30px;

transition:.3s;


}

.card:hover{


transform:translateY(-8px);

border-color:#D1A04A;


}

.card h3{


color:#D1A04A;

margin-bottom:15px;


}

/* =========================
INGREDIENTES
========================= */

.ingredients-grid{


display:grid;

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

gap:25px;


}

.ingredient-card{


background:#101010;

border:1px solid rgba(209,160,74,.15);

border-radius:18px;

padding:30px;

transition:.3s;


}

.ingredient-card:hover{


border-color:#1F8A78;

transform:translateY(-5px);


}

.ingredient-card h3{


color:#D1A04A;

margin-bottom:15px;


}

/* =========================
VITAMINAS
========================= */

.vitamin-complex{


text-align:center;

background:linear-gradient(
    135deg,
    rgba(31,138,120,.10),
    rgba(209,160,74,.10)
);


}

.vitamin-complex h3{


font-size:5rem;

color:#D1A04A;

margin:20px 0;


}

/* =========================
DAILY CARE
========================= */

#dailycare{


display:flex;

align-items:center;

gap:80px;


}

.dailycare-image{


width:40%;

text-align:center;


}

.dailycare-image img{


width:300px;


}

.dailycare-content{


width:60%;


}

.dailycare-content h2{


text-align:left;


}

/* =========================
FORMULA PREMIUM
========================= */

.formula-premium{


background:#0d0d0d;


}

.formula-premium ul{


list-style:none;

display:grid;

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

gap:18px;

max-width:1000px;

margin:auto;


}

.formula-premium li{


background:#151515;

border-left:4px solid #D1A04A;

padding:18px;

border-radius:12px;


}

/* =========================
CONTACTO
========================= */

#contacto{


text-align:center;


}

#contacto p{


margin-bottom:12px;

font-size:1.1rem;


}

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

footer{


text-align:center;

padding:80px 20px;

border-top:1px solid rgba(209,160,74,.15);

position:relative;


}

footer img{


position:absolute;

width:350px;

top:50%;
left:50%;

transform:translate(-50%,-50%);

opacity:.04;


}

footer p{


position:relative;

z-index:2;

margin-bottom:10px;


}

/* =========================
WHATSAPP
========================= */

.whatsapp-float{


position:fixed;

right:25px;
bottom:25px;

background:#25D366;

color:#fff;

text-decoration:none;

padding:15px 20px;

border-radius:50px;

font-weight:600;

z-index:9999;


}

/* =========================
RESPONSIVE
========================= */

@media(max-width:900px){


nav{
    display:none;
}

.hero{
    flex-direction:column;
    text-align:center;
    padding-top:160px;
}

.hero-content,
.hero-product{
    width:100%;
}

.hero-content h1{
    font-size:2.6rem;
}

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

#dailycare{
    flex-direction:column;
}

.dailycare-image,
.dailycare-content{
    width:100%;
}

.dailycare-content h2{
    text-align:center;
}

.formula-premium ul{
    grid-template-columns:1fr;
}

.vitamin-complex h3{
    font-size:3rem;
}


}