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

:root{

--gold:#d4af37;
--gold-soft:#b08d57;
--black:#050505;
--wa:#1f9d54;

--font-main:"Comfortaa",sans-serif;

}

html{

scroll-behavior:smooth;
scroll-padding-top:90px;

}

body{

background:var(--black);
font-family:var(--font-main);
color:white;
overflow-x:hidden;

}

#scrollProgress{

position:fixed;

top:0;
left:0;

height:4px;

width:0%;

background:
linear-gradient(
90deg,
#8f6f2c 0%,
#d4af37 20%,
#fff0a6 50%,
#d4af37 80%,
#8f6f2c 100%
);

box-shadow:
0 0 6px rgba(212,175,55,.25);
z-index:999999;

transition:width .08s linear;

}


/* LOADER */

#loader{

position:fixed;
inset:0;

background:black;

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

z-index:99999;

transition:
opacity .9s ease,
transform .9s ease;

}

#loader img{

width:min(540px,78vw);

transform:scale(.25);

}

#welcomeText{

position:absolute;

font-size:clamp(2rem,5vw,4rem);

font-weight:700;

letter-spacing:4px;

color:white;

opacity:0;

transform:scale(.6);

text-align:center;

}

#loaderLogo{

opacity:0;

}

@keyframes loaderZoom{

0%{

opacity:0;
transform:scale(.20);

}

60%{

opacity:1;
transform:scale(.82);

}

100%{

opacity:1;
transform:scale(1);

}

}

@keyframes welcomeIn{

0%{

opacity:0;
transform:scale(1.4);

}

100%{

opacity:1;
transform:scale(1);

}

}

@keyframes welcomeOut{

0%{

opacity:1;
transform:scale(1);

}

100%{

opacity:0;
transform:scale(.85);

}

}

/* NAVBAR */

#navbar{

position:fixed;

top:0;
left:0;

width:100%;
height:67px;

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

border-bottom:1px solid rgb(212 175 55 / 40%);

z-index:9999;

}

nav{

height:75px;

display:flex;

justify-content:center;

align-items:center;

padding:0 3%;

position:relative;

}

.left,
.right{

display:flex;

align-items:center;

gap:14px;

flex:1;

}

.left{

justify-content:flex-end;

padding-right:40px;

}

.right{

justify-content:flex-start;

padding-left:40px;

}

.logo img{

width:125px;

margin-top:15px;

}

.nav-btn{

padding:9px 12px;

border:1px solid #d4af37;

background:rgba(0,0,0,.18);

color:var(--gold);

text-decoration:none;

transition:.35s;

white-space:nowrap;

}

.nav-btn.active{

border:1px solid #fff6b5;

color:#fff6b5;

}

.nav-btn:hover{

background:rgba(212,175,55,.10);

}

/* HERO */

.hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

position:relative;

overflow:hidden;
padding-top:50px;

}

.hero-bg{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

transform:scale(1.08) translateY(0);

transition:transform .15s linear;

}

#particles{

position:absolute;

inset:0;

pointer-events:none;

overflow:hidden;

z-index:2;

}

.particle{

position:absolute;

width:3px;
height:3px;

border-radius:50%;

background:rgba(255,235,170,.6);

animation:
floatParticle linear infinite;

}

@keyframes floatParticle{

0%{

transform:
translateY(120vh);

opacity:0;

}

15%{

opacity:.6;

}

85%{

opacity:.6;

}

100%{

transform:
translateY(-20vh);

opacity:0;

}

}

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

90deg,

rgba(0,0,0,.84),

rgba(0,0,0,.48),

rgba(0,0,0,.1)

);

}

.hero-centered{

position:relative;

z-index:5;

max-width:920px;

width:90%;

text-align:center;

padding:60px;

background:rgba(0,0,0,.62);

}

.hero-centered h1{

font-size:3.1rem;

margin-bottom:25px;

}

.hero-centered p{

font-size:1rem;
line-height:1.5;

}

.hero-line{

height:10px;

width:340px;

margin:40px auto 0;

background:

linear-gradient(

90deg,

transparent,

var(--gold),

transparent

);

}

/* CTA */

.cta{

display:flex;

justify-content:center;

gap:16px;

margin-top:35px;

flex-wrap:wrap;

}

.cta a{

padding:14px 26px;

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

text-decoration:none;

color:white;

transition:.25s;

}

.cta a:hover{

background:rgba(212,175,55,.10);

}

.wa-link{

background:transparent;

border-color:#25D366!important;

}

.wa-link:hover{

background:rgba(37,211,102,.12)!important;

box-shadow:

0 0 14px rgba(37,211,102,.16);

}


/* SECCIONES */

.section{

min-height:85vh;

padding:140px 7%;

display:flex;

align-items:center;

position:relative;

background-size:cover;

background-position:center;

overflow:hidden;

}

.reverse{

justify-content:flex-end;

}

.overlay{

position:absolute;

inset:0;

background:

linear-gradient(

90deg,

rgba(0,0,0,.82),

rgba(0,0,0,.42),

rgba(0,0,0,.10)

);

}

.content-box{

position:relative;

z-index:5;

max-width:730px;

padding:50px;

background:rgba(0,0,0,.60);

border-left:4px solid var(--gold);

}

.content-box p{

margin-top:25px;

line-height:1.8;

}

/* CARDS */

.cards{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-top:20px;

}

.cards span{

padding:10px 18px;

background:rgba(212,175,55,.10);

border:1px solid rgba(212,175,55,.32);

color:white;

}

/* SERVICIOS */

.service-list{

margin-top:35px;

display:grid;

gap:15px;

list-style:none;

}

.service-list li{

padding-bottom:12px;

border-bottom:1px solid rgba(212,175,55,.12);

}

/* SEPARADORES */

.separator-block{

padding:160px 20px;

background:black;

display:flex;

justify-content:center;

}

.separator-inner{

width:min(900px,95%);

text-align:center;

}

.separator-line{

height:1px;

max-width:520px;

margin:auto;

background:

linear-gradient(

90deg,

transparent,

var(--gold),

transparent

);

}

.separator-text{

padding:50px 30px;

line-height:1.9;

font-size:1.08rem;

opacity:0;

transform:

scale(.88);

transition:

opacity 1.2s ease,

transform 1.2s ease;

}

.separator-text.visible{

opacity:1;

transform:

scale(1);

}

/* FOOTER */

footer{

padding-top:140px;

background:black;

}

.footer-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));

gap:35px;

padding:60px 7%;

}

.footer-box{

padding:40px;

border:1px solid rgba(212,175,55,.85);

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

}

.contact-box{

display:flex;

align-items:center;

gap:14px;

padding:14px 18px;

margin-top:14px;

background:rgba(212,175,55,.08);

border:1px solid rgba(212,175,55,.85);

color:white;

text-decoration:none;

transition:.25s;


}

.contact-box:hover{

background:rgb(212 175 55 / 40%);

}

.zone-box{

cursor:default;

}

.zone-whatsapp{

border-color:#25D366;

background:rgba(37,211,102,.08);

}

.zone-whatsapp:hover{

background:rgb(37 211 102 / 39%);

border-color:#25D366;

box-shadow:

0 0 14px rgba(37,211,102,.12);

}

.contact-box img{

width:22px;
height:22px;

object-fit:contain;

}

.contact-box span{

flex:1;

text-align:center;

}

.footer-logo{

width:180px;

display:block;

margin:0 auto 25px auto;

}

.footer-box:last-child{

text-align:center;

}



iframe{

width:100%;

height:500px;

border:0;

margin-top:40px;

}


.copy{

padding:35px;

text-align:center;

}

/* WHATSAPP */

.floating-wa{

position:fixed;

right:20px;

bottom:20px;

z-index:9999;

transition:.25s;

}

.floating-wa:hover{

transform:scale(1.12);

filter:brightness(1.15);

}

.floating-wa img{

width:62px;

}

/* MOVIL */

#menuBtn{

display:none;

}

#mobileMenu{

position:fixed;

top:0;

right:-100%;

width:300px;

height:100vh;

background:#0a0a0a;

padding:110px 30px;

display:flex;

flex-direction:column;

gap:18px;

transition:.35s;

z-index:99999;

}

.mobile-btn{

padding:14px;

border:1px solid rgba(212,175,55,.35);

text-decoration:none;

color:var(--gold);

}

#closeMenu{

position:absolute;

right:25px;

top:25px;

background:none;

border:none;

font-size:34px;

color:white;

}

@media(max-width:992px){

.left,
.right{

display:none;

}

#menuBtn{

display:block;

position:absolute;

right:20px;

background:none;

border:none;

font-size:34px;

color:var(--gold);

}

.logo img{

width:90px;

margin-top:5px;

}

.hero-centered{

padding:20px;

width:95%;

}

.hero-centered h1{

font-size:1.8rem;

}

.section{

padding:120px 25px;

min-height:auto;

}

.separator-block{

padding:120px 25px;

}

}


.reveal-smoke{

position:absolute;
inset:0;

overflow:hidden;
pointer-events:none;

z-index:4;

}

.cannon{

position:absolute;

bottom:-80px;

width:250px;
height:100%;

}

.cannon.left{
left:38%;
}

.cannon.right{
left:58%;
}

@media(max-width:992px){

.cannon.left{
left:18%;
}

.cannon.right{
left:62%;
}

}

.cannon .puff{

position:absolute;

bottom:0;

border-radius:50% 50% 40% 40%;

filter:blur(22px);

animation:
smokeBlast 8s linear infinite;

}

.cannon .puff:nth-child(odd){
left:46%;
}

.cannon .puff:nth-child(even){
left:54%;
}

/* ROSAS */

.cannon.left .puff:nth-child(5n+1){
background:#ff66c8;
}

.cannon.left .puff:nth-child(5n+2){
background:#ff84d6;
}

.cannon.left .puff:nth-child(5n+3){
background:#ff4fbe;
}

.cannon.left .puff:nth-child(5n+4){
background:#ff9be0;
}

.cannon.left .puff:nth-child(5n){
background:#ff74cf;
}

/* AZULES */

.cannon.right .puff:nth-child(5n+1){
background:#4fa8ff;
}

.cannon.right .puff:nth-child(5n+2){
background:#7cc3ff;
}

.cannon.right .puff:nth-child(5n+3){
background:#3098ff;
}

.cannon.right .puff:nth-child(5n+4){
background:#9fd6ff;
}

.cannon.right .puff:nth-child(5n){
background:#63b5ff;
}

/* TAMAÑOS Y RETRASOS */

.cannon .puff:nth-child(1){
width:90px;
height:170px;
animation-delay:0s;
}

.cannon .puff:nth-child(2){
width:110px;
height:190px;
animation-delay:.4s;
}

.cannon .puff:nth-child(3){
width:100px;
height:180px;
animation-delay:.8s;
}

.cannon .puff:nth-child(4){
width:130px;
height:220px;
animation-delay:1.2s;
}

.cannon .puff:nth-child(5){
width:120px;
height:200px;
animation-delay:1.6s;
}

.cannon .puff:nth-child(6){
width:95px;
height:170px;
animation-delay:2s;
}

.cannon .puff:nth-child(7){
width:140px;
height:240px;
animation-delay:2.4s;
}

.cannon .puff:nth-child(8){
width:110px;
height:190px;
animation-delay:2.8s;
}

.cannon .puff:nth-child(9){
width:150px;
height:260px;
animation-delay:3.2s;
}

.cannon .puff:nth-child(10){
width:120px;
height:210px;
animation-delay:3.6s;
}

.cannon .puff:nth-child(11){
width:100px;
height:180px;
animation-delay:4s;
}

.cannon .puff:nth-child(12){
width:130px;
height:230px;
animation-delay:4.4s;
}

.cannon .puff:nth-child(13){
width:115px;
height:200px;
animation-delay:4.8s;
}

.cannon .puff:nth-child(14){
width:145px;
height:250px;
animation-delay:5.2s;
}

.cannon .puff:nth-child(15){
width:160px;
height:280px;
animation-delay:5.6s;
}

.cannon .puff:nth-child(16){
width:105px;
height:190px;
animation-delay:6s;
}

.cannon .puff:nth-child(17){
width:135px;
height:230px;
animation-delay:6.4s;
}

.cannon .puff:nth-child(18){
width:115px;
height:200px;
animation-delay:6.8s;
}

.cannon .puff:nth-child(19){
width:150px;
height:260px;
animation-delay:7.2s;
}

.cannon .puff:nth-child(20){
width:170px;
height:300px;
animation-delay:7.6s;
}



@keyframes smokeBlast{

0%{

transform:
translateX(-50%)
translateY(0)
scale(.20);

opacity:.75;

}

15%{

opacity:.65;

}

40%{

opacity:.40;

}

70%{

opacity:.18;

}

100%{

transform:
translateX(-50%)
translateY(-120vh)
scale(2.8);

opacity:0;

}

}



/* DJ SET */
.beam{

position:absolute;

top:-200px;

width:220px;
height:120vh;

background:
linear-gradient(
to bottom,
rgba(255,255,255,.35),
transparent
);

filter:blur(20px);

transform-origin:top center;

animation:
beamMove 7s ease-in-out infinite,
beamPulse 3s ease-in-out infinite;

}

.beam1{
left:10%;
}

.beam2{

left:45%;

background:
linear-gradient(
to bottom,
rgba(255,235,170,.55),
rgba(212,175,55,.20),
transparent
);

animation-delay:-3s;

}

.beam3{
left:75%;
animation-delay:-6s;
}

@keyframes beamMove{

0%{
transform:rotate(-18deg);
}

50%{
transform:rotate(18deg);
}

100%{
transform:rotate(-18deg);
}

}
.dj-lights{

position:absolute;
inset:0;

overflow:hidden;
pointer-events:none;

z-index:2;

}

.spotlight{

position:absolute;

width:800px;
height:800px;

border-radius:50%;

filter:blur(10px);

opacity:.28;

animation:
moveLight 12s ease-in-out infinite;

}

.spotlight1{

background:#d4af37;

top:-150px;
left:-150px;

}

.spotlight2{

background:#d4af37;

top:20%;
right:-250px;

animation-delay:-5s;

}

.spotlight3{

background:#ffffff;

bottom:-200px;
left:30%;

animation-delay:-10s;

}

@media(max-width:992px){

.spotlight{

width:450px;
height:450px;

}

.beam{

width:120px;

}

}


@keyframes moveLight{

0%{

transform:
translate(0,0)
scale(1);

}

50%{

transform:
translate(120px,80px)
scale(1.2);

}

100%{

transform:
translate(0,0)
scale(1);

}

}





@media(max-width:992px){

.logo img{
width:90px;
margin-top:5px;
}

.hero-centered{
padding:20px;
width:94%;
margin-top:40px;
}

font-size:1.8rem;
margin-bottom:15px;
}

.section{
padding:120px 25px;
min-height:auto;
}

.separator-block{
padding:120px 25px;
}

iframe{
height:350px;
}

}





/* BODAS */

.wedding-sparkles{

position:absolute;
inset:0;

overflow:hidden;
pointer-events:none;

z-index:2;

}

.spark{

position:absolute;

width:4px;
height:4px;

border-radius:50%;

background:white;

box-shadow:
0 0 10px rgba(255,255,255,.9),
0 0 20px rgba(255,220,120,.6);

animation:
sparkle 5s linear infinite;

}


.spark::before{

content:"";

position:absolute;

left:50%;
top:50%;

width:60px;
height:2px;

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

background:
linear-gradient(
90deg,
transparent,
rgba(255,245,210,.9),
transparent
);

filter:blur(1px);

}

.spark::after{

content:"";

position:absolute;

left:50%;
top:50%;

width:2px;
height:60px;

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

background:
linear-gradient(
180deg,
transparent,
rgba(255,245,210,.9),
transparent
);

filter:blur(1px);

}
.spark::before,
.spark::after{

content:"";

position:absolute;

left:50%;
top:50%;

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

}
.spark::before{

width:70px;
height:2px;

background:
linear-gradient(
90deg,
transparent,
rgba(255,245,210,.95),
transparent
);

filter:blur(1px);

}

.spark::after{

width:2px;
height:70px;

background:
linear-gradient(
180deg,
transparent,
rgba(255,245,210,.95),
transparent
);

filter:blur(1px);

}

.spark::after{

width:2px;
height:40px;

filter:blur(.8px);

}

.spark{

transform:rotate(45deg);

}


.bokeh{

position:absolute;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,220,120,.25),
transparent 70%
);

filter:blur(10px);

animation:
bokehFloat 18s linear infinite;

}

.spark:nth-child(1){
top:15%;
left:20%;
animation-delay:0s;
transform:scale(.7);
}

.spark:nth-child(2){
top:25%;
left:70%;
animation-delay:.5s;
transform:scale(1.3);
}

.spark:nth-child(3){
top:40%;
left:35%;
animation-delay:1s;
transform:scale(.8);
}

.spark:nth-child(4){
top:55%;
left:80%;
animation-delay:1.5s;
transform:scale(1.6);
}

.spark:nth-child(5){
top:70%;
left:15%;
animation-delay:2s;
transform:scale(.6);
}

.spark:nth-child(6){
top:80%;
left:60%;
animation-delay:2.5s;
transform:scale(1.1);
}

.spark:nth-child(7){
top:30%;
left:50%;
animation-delay:3s;
transform:scale(.9);
}

.spark:nth-child(8){
top:65%;
left:45%;
animation-delay:3.5s;
transform:scale(1.4);
}

@keyframes sparkle{

0%{
opacity:0;
transform:scale(.2);
}

2%{
opacity:.9;
transform:scale(1.4);
}

6%{
opacity:.15;
transform:scale(.8);
}

100%{
opacity:0;
transform:scale(.2);
}

}

@keyframes beamPulse{

0%{
opacity:.20;
}

25%{
opacity:.35;
}

50%{
opacity:.25;
}

75%{
opacity:.40;
}

100%{
opacity:.20;
}

}


@keyframes bokehFloat{

0%{

transform:
translateY(120px)
scale(.5);

opacity:0;

}

20%{

opacity:.35;

}

80%{

opacity:.35;

}

100%{

transform:
translateY(-120px)
scale(1.3);

opacity:0;

}

}


.bokeh:nth-child(16){
top:20%;
left:15%;
width:80px;
height:80px;
animation-delay:0s;
}

.bokeh:nth-child(17){
top:60%;
left:25%;
width:120px;
height:120px;
animation-delay:-3s;
}

.bokeh:nth-child(18){
top:35%;
left:55%;
width:90px;
height:90px;
animation-delay:-6s;
}

.bokeh:nth-child(19){
top:70%;
left:75%;
width:140px;
height:140px;
animation-delay:-9s;
}

.bokeh:nth-child(20){
top:25%;
left:85%;
width:70px;
height:70px;
animation-delay:-12s;
}

.bokeh:nth-child(21){
top:80%;
left:50%;
width:110px;
height:110px;
animation-delay:-15s;
}

.diag{

position:absolute;

left:50%;
top:50%;

width:70px;
height:2px;

background:
linear-gradient(
90deg,
transparent,
rgba(255,245,210,.9),
transparent
);

filter:blur(1px);

}

.d1{

transform:
translate(-50%,-50%)
rotate(45deg);

}

.d2{

transform:
translate(-50%,-50%)
rotate(-45deg);

}

/* ANIMACIONES INFANTILES */

.bubble-zone{

position:absolute;
inset:0;

overflow:hidden;
pointer-events:none;

z-index:2;

}

.bubble{

position:absolute;
backdrop-filter:blur(2px);
bottom:-120px;

border-radius:50%;

background:
radial-gradient(
circle at 30% 30%,
rgba(255,255,255,.85),
rgba(255,255,255,.20) 30%,
transparent 70%
),

conic-gradient(
from 0deg,
rgba(255,0,180,.35),
rgba(0,180,255,.35),
rgba(120,255,120,.35),
rgba(255,255,120,.35),
rgba(255,120,255,.35),
rgba(255,0,180,.35)
);

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

box-shadow:
inset 0 0 20px rgba(255,255,255,.35),
0 0 12px rgba(255,255,255,.15);

animation:
bubbleFloat linear infinite,
bubbleShimmer 8s linear infinite;

}

.bubble::before{

content:"";

position:absolute;

top:15%;
left:20%;

width:25%;
height:25%;

border-radius:50%;

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

filter:blur(2px);

}

@keyframes bubbleShimmer{

0%{
filter:hue-rotate(0deg);
}

100%{
filter:hue-rotate(360deg);
}

}


.bubble:nth-child(1){
left:8%;
width:40px;
height:40px;
animation-duration:14s;
animation-delay:0s;
}

.bubble:nth-child(2){
left:18%;
width:60px;
height:60px;
animation-duration:18s;
animation-delay:-3s;
}

.bubble:nth-child(3){
left:30%;
width:35px;
height:35px;
animation-duration:12s;
animation-delay:-6s;
}

.bubble:nth-child(4){
left:42%;
width:75px;
height:75px;
animation-duration:20s;
animation-delay:-4s;
}

.bubble:nth-child(5){
left:55%;
width:45px;
height:45px;
animation-duration:15s;
animation-delay:-8s;
}

.bubble:nth-child(6){
left:65%;
width:55px;
height:55px;
animation-duration:17s;
animation-delay:-5s;
}

.bubble:nth-child(7){
left:75%;
width:80px;
height:80px;
animation-duration:22s;
animation-delay:-10s;
}

.bubble:nth-child(8){
left:85%;
width:40px;
height:40px;
animation-duration:14s;
animation-delay:-7s;
}

.bubble:nth-child(9){
left:92%;
width:65px;
height:65px;
animation-duration:19s;
animation-delay:-2s;
}

.bubble:nth-child(10){
left:50%;
width:30px;
height:30px;
animation-duration:11s;
animation-delay:-9s;
}

@keyframes bubbleFloat{

0%{

transform:
translateY(0)
translateX(0)
scale(.8);

opacity:0;

}

10%{
opacity:.7;
}

50%{

transform:
translateY(-50vh)
translateX(30px)
scale(1);

}

100%{

transform:
translateY(-120vh)
translateX(-40px)
scale(1.15);

opacity:0;

}

}