/* RESET */

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

body{
font-family:Arial, Helvetica, sans-serif;
background:#FFF5F8;
color:#111;
}


/* HEADER */

.header{

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

padding:20px 40px;

background:#111;
color:white;

position:relative;

/* NUEVO */
border-bottom:2px solid #D4AF37;

}


/* LOGO */

.logo{

font-size:22px;
font-weight:bold;

/* TIPOGRAFIA COSMETICA */
font-family:'Playfair Display', serif;
letter-spacing:1px;

}


/* MENU */

.menu{

display:flex;
gap:25px;

}

.menu a{

text-decoration:none;
color:white;
font-size:16px;
transition:0.3s;

}

/* NUEVO HOVER ELEGANTE */

.menu a:hover{

color:#D4AF37;

}


/* HAMBURGER */

.hamburger{

display:none;
font-size:30px;
cursor:pointer;

}


/* HERO */

.hero{

text-align:center;
padding:120px 20px;

background:linear-gradient(135deg,#E91E63,#F8BBD0);
color:white;

}

.hero h1{

font-size:40px;
margin-bottom:15px;

/* TIPOGRAFIA COSMETICA */
font-family:'Playfair Display', serif;
letter-spacing:1px;

}

.hero p{

margin-bottom:25px;

}


/* BOTON */

.btn{

background:#D4A373;
padding:15px 30px;

color:white;
text-decoration:none;

border-radius:6px;

/* NUEVO */
transition:0.3s;

}

/* HOVER BOTON */

.btn:hover{

background:#C3925F;
transform:scale(1.05);

}


/* CATEGORIAS */

.categorias{

padding:60px 40px;
text-align:center;

}

.grid{

margin-top:40px;

display:grid;

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

}


/* CARD */

.card{

background:white;

padding:40px;

border-radius:10px;

text-decoration:none;
color:#111;

box-shadow:0 8px 20px rgba(0,0,0,0.1);

transition:0.3s;

/* NUEVO BORDE DORADO */
border:2px solid #D4AF37;

/* NECESARIO PARA EL BRILLO */
position:relative;
overflow:hidden;

}

/* TITULO CARD COSMETICO */

.card h3{

font-family:'Playfair Display', serif;
letter-spacing:0.5px;

}

/* HOVER CARD */

.card:hover{

transform:translateY(-5px);

/* NUEVO EFECTO PREMIUM */
box-shadow:0 12px 28px rgba(0,0,0,0.18);
border-color:#F1C40F;

}


/* BRILLO DORADO ANIMADO */

.card::before{

content:"";

position:absolute;

top:-50%;
left:-50%;

width:200%;
height:200%;

background:linear-gradient(
120deg,
transparent,
rgba(212,175,55,0.45),
transparent
);

transform:rotate(25deg);

opacity:0;

}

/* ACTIVAR BRILLO */

.card:hover::before{

animation:goldShine 1.2s ease;
opacity:1;

}


/* ANIMACION */

@keyframes goldShine{

0%{
transform:translateX(-120%) rotate(25deg);
}

100%{
transform:translateX(120%) rotate(25deg);
}

}


/* MOBILE */

@media (max-width:768px){

.menu{

display:none;

flex-direction:column;

position:absolute;

top:70px;
left:0;

width:100%;

background:#111;

padding:20px;

}

.menu.active{

display:flex;

}

.hamburger{

display:block;

}

}