:root{--black:#0b0908;--gold:#c6a46c;--white:#f5f1e8;}

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

html{scroll-behavior:smooth;}

body{background:radial-gradient(circle at top,#1a120d 0%,#0d0907 45%,#050505 100%);color:var(--white);font-family:'Montserrat',sans-serif;overflow-x:hidden;}

/* HERO */

.hero{position:relative;width:100%;height:78vh;min-height:620px;background:#0b0908;overflow:hidden;}

.slider{position:absolute;top:0;left:150px;width:calc(100% - 150px);height:100%;overflow:hidden;}

.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.5s ease;}

.slide.active{opacity:1;}

.slide img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:#0b0908;filter:brightness(.88) contrast(1.02) saturate(.92);}

/* DOTS */

.slider-dots{position:absolute;top:50%;right:42px;transform:translateY(-50%);display:flex;flex-direction:column;gap:18px;z-index:20;}

.dot{width:13px;height:13px;border-radius:50%;border:1px solid rgba(198,164,108,.75);background:transparent;transition:.45s;}

.dot.active{background:rgba(198,164,108,.85);box-shadow:0 0 12px rgba(198,164,108,.45);}

/* SIDEBAR */

.sidebar{position:absolute;top:0;left:0;width:150px;height:100%;background:rgba(5,5,5,.72);backdrop-filter:blur(6px);border-right:1px solid rgba(198,164,108,.28);display:flex;flex-direction:column;align-items:center;padding-top:34px;padding-bottom:34px;z-index:30;}

.menu{margin-top:auto;margin-bottom:auto;display:flex;flex-direction:column;gap:54px;}

.menu a{display:flex;flex-direction:column;align-items:center;gap:12px;color:#b9b9b9;text-decoration:none;font-size:12px;letter-spacing:2px;transition:.35s;}

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

.menu img{width:60px;height:70px;object-fit:contain;opacity:.9;}

.logo{width:80px;display:flex;justify-content:center;align-items:center;}

.logo img{width:100%;height:auto;object-fit:contain;opacity:.95;}

.socials{display:flex;flex-direction:column;gap:24px;}

.socials a{width:18px;height:18px;display:flex;align-items:center;justify-content:center;opacity:.78;transition:.35s;}

.socials a:hover{opacity:1;transform:scale(1.08);}

.socials img{width:100%;height:100%;object-fit:contain;filter:brightness(.88) sepia(18%) saturate(80%);}
/* BUTTON */

.btn{display:inline-flex;align-items:center;justify-content:center;margin-top:30px;width:230px;height:54px;border:1px solid rgba(198,164,108,.7);color:var(--gold);text-decoration:none;text-transform:uppercase;font-size:12px;letter-spacing:3px;transition:.35s;}

.btn:hover{background:var(--gold);color:#000;}

/* MARQUEE */

.marquee{width:100%;overflow:hidden;white-space:nowrap;padding:15px 0;background:#090807;border-top:1px solid rgba(198,164,108,.22);border-bottom:1px solid rgba(198,164,108,.22);}

.marquee-track{display:inline-block;color:rgba(198,164,108,.88);font-size:13px;letter-spacing:2px;animation:marquee 30s linear infinite;}

@keyframes marquee{from{transform:translateX(100%);}to{transform:translateX(-100%);}}

/* UNIVERSO */

.universo{position:relative;padding:48px 4% 70px;text-align:center;background:radial-gradient(circle at center,rgba(198,164,108,.05) 0%,rgba(10,10,10,0) 42%),linear-gradient(to bottom,#060606 0%,#090909 100%);overflow:hidden;}

.universo::before{content:"";position:absolute;inset:0;background:url("../img/smoke.webp");background-size:cover;background-position:center;opacity:.035;pointer-events:none;}

.universo h2{font-family:'Cinzel',serif;font-size:42px;font-weight:400;color:var(--gold);letter-spacing:3px;margin-bottom:10px;}

.subtitle{margin-top:14px;color:rgba(255,255,255,.65);font-size:15px;}

.cards{margin-top:38px;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;align-items:start;}

.card{position:relative;height:460px;border:1px solid rgba(198,164,108,.16);overflow:hidden;background-size:cover;background-position:center;cursor:pointer;transition:transform .45s ease,border .45s ease;text-decoration: none; color: inherit;}

.card:hover{transform:translateY(-10px);border:1px solid rgba(198,164,108,.48);}

.card::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 8%,rgba(0,0,0,.28) 48%,rgba(0,0,0,.02) 100%);}

.card span{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:2;width:80%;color:var(--gold);font-family:'Cinzel',serif;font-size:21px;letter-spacing:2px;text-align:center;}

.card:nth-child(1){background-image:url("../img/universo-perfume.webp");}

.card:nth-child(2){background-image:url("../img/universo-crema.webp");}

.card:nth-child(3){background-image:url("../img/universo-vela.webp");}

.card:nth-child(4){background-image:url("../img/universo-jabon.webp");}

.card:nth-child(5){background-image:url("../img/universo-aromatizante.webp");}

/* NOSOTROS */

.nosotros{width:100%;padding:0;background:#050505;overflow:hidden;}

.nosotros img{width:100%;display:block;object-fit:cover;}

/* FOOTER */

footer{border-top:1px solid rgba(198,164,108,.14);padding:40px 20px;text-align:center;}

.footer-logo{font-family:'Cinzel',serif;color:var(--gold);font-size:40px;letter-spacing:6px;}

footer p{margin-top:14px;color:rgba(255,255,255,.45);font-size:12px;}

/* RESPONSIVE */

@media(max-width:1200px){.cards{grid-template-columns:repeat(2,1fr);}}

@media(max-width:768px){.hero{height:58vh;min-height:420px;}.sidebar{width:58px;}.slider-dots{right:18px;gap:12px;}.dot{width:10px;height:10px;}.cards{grid-template-columns:1fr;}.perfumes{grid-template-columns:1fr;}.featured h2,.universo h2,.nosotros h2{font-size:36px;}}