@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Caveat:wght@700&family=Permanent+Marker&display=swap');

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

body{
background:#f9d84a;
color:white;
font-family:'Montserrat',sans-serif;
overflow-x:hidden;
}

/* VIDEO INTRO */

#video-intro{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
z-index:999;
background:black;
transition:opacity 1s ease, visibility 1s ease;
}

#video-intro video{
width:100%;
height:100%;
object-fit:cover;
}

#video-intro.ocultar{
opacity:0;
visibility:hidden;
}


/* ---------------------------- un aplauso seccion ----------------- */

.aplauso{
background-color: #f9d84a;
background-image: radial-gradient(#eec413 1px, transparent 1px);
background-size: 20px 20px;

width: 100%;

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

gap: 50px; /* 👈 separación entre bloques */

text-align: center;
padding: 90px 20px;
padding-bottom: 50px;

font-family: 'Montserrat', sans-serif;
position: relative;
overflow: hidden;
}


/* TITULO */

.aplauso h1{
font-size: 2rem;
line-height: 1.1;
text-transform: none;
font-weight: 900;
color: #000;
letter-spacing: -1px;
}

.subtexto{
color:#ff3a2f;
font-size:28px;
margin-top:1px;
font-family:'Caveat',cursive;
}

/* CENTRO */

.aplauso-centro{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
gap: 30px;
}

.aplauso-centro img{
width:300px;
}


/* TOUCH */

.touch{
position:absolute;
top:-25px;
left:50%;
transform:translateX(-50%) rotate(-10deg);
font-weight:800;
color:#1a7f2e;
letter-spacing:3px;
}


/* BOTON */

.btn-detalles{
background:#ff3a3a;
color:white;
border:none;
padding:18px 35px;
font-size:18px;
font-weight:700;
border-radius:40px;
cursor:pointer;

margin-top:20px; /* 👈 separación extra */

box-shadow:0 6px 0 #d62828;
transition:all .15s ease;
}

.btn-detalles:active{
transform:translateY(3px);
box-shadow:0 3px 0 #d62828;
}


/* ---------------- SECCIÓN DOS ---------------- */

.save-date{

background:#3e7fb1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
text-align:center;
padding:60px 20px;
font-family:'Montserrat',sans-serif;
}

/* encabezado */

.save-top{
color:#ffd84a;
font-family:'Caveat',cursive;
font-size:28px;
margin-bottom:10px;
}

.nombre{
color:#ff3a3a;
font-size:32px;
font-weight:900;
letter-spacing:1px;
text-shadow:2px 2px 0 #ffd84a;
}


/* info del evento */
.evento-info{
margin-top:30px;
}

.dia{
color:#ffd84a;
font-size:34px;
font-weight:900;
margin-bottom:10px;

}

.fecha{
color:white;
font-size:28px;
font-weight:900;
margin-bottom:8px;
}

.hora{
color:white;
font-size:26px;
margin-bottom:12px;
font-weight:900;
}

.lugar{

color:#ffd84a;
font-family:'Caveat',cursive;
font-size:26px;
}


/* imagen */

.imagen-casa{
position:relative;
margin-top:40px;
}

.casita{
width:400px;
max-width:95%;
}

.flor{
position:absolute;
right:-10px;
top:-30px;
width:90px;
}


/* botones */
.botones{
width:100%;
display:flex;
justify-content:center;
gap:20px;
margin-top:40px;
flex-wrap:wrap;
}


/* boton rojo */

.btn-directions{
background:#ff3a3a;
color:white;
padding:16px 30px;
border-radius:40px;
font-weight:800;
text-decoration:none;
box-shadow:0 6px 0 #d62828;
}


/* boton outline */

.btn-rsvp{
border:2px solid rgba(255,255,255,0.5);
color:white;
padding:16px 30px;
border-radius:40px;
font-weight:800;
text-decoration:none;
}




/* ---------------- SECCION 3 ---------------- */

.rsvp-section{

background:#ef3b3b;

display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
text-align:center;
padding:50px 20px;
}


.rsvp-header{
display:flex;
flex-direction:column;
align-items:center;
gap:5px;

}

.rana{
width:90px;
}

.rsvp-header h2{
color:#fff;
font-size:32px;
font-weight:900;
line-height:1.1;

}


/* centro */

.rsvp-centro{
position:relative;
margin-top:40px;
width:100%;
height:320px;
}


/* BAD BUNNY pegado a la izquierda */

.badbunny{
position:absolute;
left:-40px;
bottom:0;
width:360px;
max-width:none;
}


/* TEXTO A LA DERECHA */

.rsvp-texto{
position:absolute;
right:10px;
top:-15px;
text-align:left;
}


/* textos */

.toca{
color:#ffd84a;
font-family:'Caveat',cursive;
font-size:22px;
}

.rsvp{
color:#ffd84a;
font-size:36px;
font-weight:900;
margin-top:5px;
}

.avion{
position:absolute;
right:0;
bottom:-10px;
width:80px;
}


/* footer */

.rsvp-footer{
margin-top:40px;
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
}


/* botón */

.btn-escuchar{
background:transparent;
border:2px solid rgba(255,255,255,0.6);
color:white;
padding:14px 35px;
border-radius:40px;
font-weight:800;
font-size:18px;
cursor:pointer;
}


/* texto final */
.espera{
color:white;
font-size:22px;
font-weight:800;
}

/* ---------------- DRESSCODE SECTION ---------------- */

.dresscode-section{

background-color:#f9d84a;
background-image: radial-gradient(#eec413 1px, transparent 1px);
background-size:20px 20px;

display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
text-align:center;
padding:60px 20px;
font-family:'Montserrat',sans-serif;
}


/* header */

.dresscode-header h2{
color:#000;
font-size:34px;
font-weight:900;
line-height:1.1;
}

.dresscode-sub{
color:#ff3a3a;
font-family:'Caveat',cursive;
font-size:24px;
margin-top:10px;
}


/* imagen */

.dresscode-centro{
margin-top:30px;
}

.dresscode-centro img{
width:350px;
max-width:90%;
}


/* texto */

.dresscode-texto{
margin-top:30px;
}

.dresscode-texto p{
color:#000;
font-size:20px;
font-weight:700;
}


/* botones */

.dresscode-botones{
margin-top:40px;
display:flex;
flex-direction:column;
gap:18px;
width:100%;
max-width:300px;
}


/* boton mujer */

.btn-mujer{
background:#ff3a3a;
color:white;
padding:16px;
border-radius:40px;
font-weight:900;
text-decoration:none;
box-shadow:0 6px 0 #d62828;
}


/* boton hombre */

.btn-hombre{
border:2px solid #000;
color:#000;
padding:16px;
border-radius:40px;
font-weight:900;
text-decoration:none;
background:transparent;
}

/* -------- BANNER FRASE BAD BUNNY -------- */

.banner-frase{
background:#2f7fb3;
padding:90px 20px;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
font-family:'Montserrat', sans-serif;
}

/* contenedor */

.frase-container{
max-width:600px;
}

/* frase */

.frase{
font-size:36px;
font-weight:900;
line-height:1.2;
color:#ffd84a;
text-shadow:
3px 3px 0 #ef3b3b,
6px 6px 0 rgba(0,0,0,0.2);
letter-spacing:2px;
}

/* -------- BANNER FRASE BAD BUNNY -------- */

.banner-frase{
background:#2f7fb3;
padding:90px 20px;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
font-family:'Montserrat', sans-serif;
}

/* contenedor */

.frase-container{
max-width:600px;
}

/* frase */

.frase{
font-size:36px;
font-weight:900;
line-height:1.2;
color:#ffd84a;
text-shadow:
3px 3px 0 #ef3b3b,
6px 6px 0 rgba(0,0,0,0.2);
letter-spacing:2px;
}


/* -------- CONTADOR -------- */

.contador{

display:flex;
justify-content:center;
gap:25px;

margin-top:40px;

flex-wrap:wrap;

}


/* bloque tiempo */

.tiempo{
display:flex;
flex-direction:column;
align-items:center;

}


/* numero */

.tiempo span{
font-size:40px;
font-weight:900;
color:#ffd84a;
text-shadow:
3px 3px 0 #ef3b3b,
6px 6px 0 rgba(0,0,0,0.2);
}


/* texto */

.tiempo p{
color:white;
font-weight:700;
margin-top:5px;
text-transform:uppercase;
font-size:14px;
letter-spacing:1px;
}