@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Imperial+Script&display=swap');




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

body {
    overflow: hidden;
    
}

/*aca comienza la pantalla modal de inicio*/
.modal-inicio {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: #000;
    background-image: url("../imagenes/fondos042.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 150;
    color: #fff;
}

.cont-inicio {
    width: 50%;
    min-width: 300px;
    max-width: 1000px;
    margin: auto;
    *background-color: rgba(255, 255, 255, 0.2); 
    background-color: transparent;
    padding: 60px 0 60px 0;
    text-align: center;
    border: solid 1px rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    box-shadow: 5px 5px 8px rgb(0, 0, 0, 40%);
    backdrop-filter: blur(2px);
    position: relative;
}



.img-superpuesta {
    position: absolute;
    width: 75%;
    top: 50%;
    left: 50%;
    transform: translate(-90%, 5%);
    visibility: visible;
    pointer-events: none;
    filter: drop-shadow(7px 7px 7px rgba(0, 0, 0, 0.7));  
    
}

.btn-inicio {
display:inline-block;
width: auto;
font-family: "DM Serif Display", serif;
font-weight: 400;
font-style: italic;
font-size: calc(1vw + 0.9em);
margin-top: 10px;
padding: 10px 20px 10px 20px;
border: solid 1px rgba(255, 255, 255, 0.3);    
cursor: pointer;
border-radius: 15px;
box-shadow: 5px 5px 8px rgb(0, 0, 0, 40%);
background-color: #000;
background-image: url('../imagenes/fondo-boton.jpg');
background-size: cover;
position: relative;
color: #000;

}

.nombre-inicio {
 font-family: "DM Serif Display", serif;
font-weight: 400;
  font-style: normal;
  font-size: calc(5vw + 2em);
  line-height: 1;
  
}

.sp-nom-inicio {
    font-style: italic;
}

.evento-inicio {
font-family: "DM Serif Display", serif;
font-weight: 400;
font-style: italic;
    font-size: calc(2vw + 1em);
    text-shadow: 5px 5px 5px rgb(0, 0, 0, 10%);
    margin-top: 20px;
}
/*aca termina la pantalla de inicio*/

/* aca comienza el banner principal y la cuenta regresiva */

.cont-gral {
    width: 100%;
    height: 100vh;
    position: relative;
    background-color: #000;
    background-image: url(../imagenes/fondos042.jpg);
    overflow: hidden;
}
.iniciaranimacion {
    animation: efectodeinicio 2s linear;
}

.superpuesta {
    *position: absolute;
    display: block;
    padding: 15px;
    width: calc(100vw * 0.1 + 5.5em);
    height: calc(100vw * 0.1 + 5.5em);
    margin: auto;
    *margin-bottom: 20px;
   * top: 50%;
    *left: 50%;
    *transform: translate(-50%, -50%);
    filter: drop-shadow(7px 7px 7px rgba(0, 0, 0, 0.7));
    object-fit:contain;
}

@keyframes efectodeinicio {
    0%  {filter: blur(50px);}
    100% {filter: blur(0px);}
}

.img-banner {
    position: absolute;
   * top: 50%;
   * left: 50%;
    width: 100%;
    height: 100vh;
    object-fit: cover;
   * transform: translate(-50%, -50%);
    filter:brightness(50%) blur(1px);
    scale: 100%;
    display: none;
}

.left {
   position: absolute;
   width: 100%;
   top: -90%;
   z-index: 100;
   left: 20%;
   filter: blur(1px);
   pointer-events: none;
}

.leftdos {
    position: absolute;
    width: 100%;
    top: -90%;
    left: 20%;
    z-index: 50;
    filter: blur(1px);
    pointer-events: none;
}

.right {
    position: absolute;
    width: 40vh;
    bottom: 0;
    left: calc(100vw*.9);
    z-index: 75;
   *transform: rotate(5deg);
    *filter: blur(1px);
    *opacity: 0.9;
    transform: scaleX(-1);
    display: none;
    
}

/* aca arranca el movimiento de petalos*/

@keyframes mov-petalos {
    0% {
        top: -100%;
        left: 20%;
        transform: rotate(0deg);
        scale: 75%;
        opacity: 0;
    }
        50% {
            opacity: 1;
        }
        100% {
        top: 100%;
        left: -20%;
        transform: rotate(30deg);
        scale: 200%;
        opacity: 0;
    }
}

.left {
    animation: mov-petalos 20s ease-in-out infinite;
}

.leftdos {
   animation: mov-petalos 10s ease-in-out infinite;
   animation-delay: 1s;
}


/* fin del movimiento de petalos*/


.cont-abs {
    position: absolute;
    width: 100%;
    max-width: 1024px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 10;
    
}

.nombre {
  font-family: "Imperial Script", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: calc(5vw + 3em);
 color: #fff;
}

/*
  background-image: url("../imagenes/dorado.jpg");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
*/

.evento, .sp-evento {
 font-family: "DM Serif Display", serif;
font-weight: 400;
font-style: italic;
    font-size: calc(5vw + 1em);
   * text-shadow: 5px 5px 5px black;
    line-height: 0.5;
    color: #fff;
    
}

.sp-evento {
    font-size: calc(2vw + 2em);
    color: transparent;
    font-weight: 600;
    background-image: url(../imagenes/fondo-boton.jpg);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding-left: 10px;
    padding-right: 10px;
   filter: drop-shadow(0px 0px 5px rgba(0, 0, 0));
}

.txt {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: italic;
  font-size: calc(4vw + 1em);
  *text-shadow: 5px 5px 2px black;
 * margin-top: 100px;
  color: #fff;

}

.nro-reloj {
 font-family: "DM Serif Display", serif;
font-weight: 600;
font-style: italic;
    font-size: calc(3vw + 1.5em);
    *text-shadow: 5px 5px 2px black;
    width: calc(3vw + 1.5em);  
    color:  transparent;
        background-image: url(../imagenes/fondo-boton.jpg);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0));
}

.txt-reloj {
 font-family: "DM Serif Display", serif;
font-weight: 400;
font-style: normal;
    font-size: calc(2vw + 1em);
    *text-shadow: 5px 5px 2px black;
    line-height: 0.7;
     color:  transparent;
        background-image: url(../imagenes/fondo-boton.jpg);
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0));
}

.cont-reloj {
    display: flex;
    flex-wrap: nowrap;
    justify-content:space-evenly;
}

/* aca termina el banner */
/* aca comienza la frase */

.cont-frase {
    width: 100%;
    padding: 60px 0 60px 0;
    text-align: center;
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    background-color: #fff;
    background-image: url('../imagenes/fondos043.jpg');
    background-size: cover;
   position: relative;
   overflow:hidden;
}



.txt-frase {
    max-width: 1024px;
    margin: auto;
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: italic;
    font-size: calc(2vw + 0.75em);
    color: #fff;
    *border-top: solid goldenrod 2px;
    *border-bottom: solid goldenrod 2px;
    padding-top: 15px;
    padding-bottom: 15px;
    filter: none;
}

.separador {
    width: 90%;
    max-width: 500px;
    margin: auto;
    display: block;
}

.inf {
    transform: scaleY(-1);
}
/* aca termina la frase */
/* aca comienza la galeria de fotos */

.cont-gral-fotos {
    
    width: 100%;
    padding: 60px 0 60px 0;
    background-color: #d58cfc;
    background-image: url(../imagenes/fondo-boton.jpg);
    background-size: cover;
    overflow: hidden;

}



.cont-fotos {
    width: 100%;
    max-width: 1024px;
    margin: auto;
    overflow: hidden;
    padding: 10px;
}

.slider {
    width: 1004px;
    margin: auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 5.3%;  
    transition: all 1.5s;
}


.fotos {
    width: calc(100%/4);
    min-width: 300px;
    height: 500px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 1px 5px 10px rgb(0, 0, 0, 0.7);
}               

/* aca termina la galeria */

/* */

#slider-dos {
    *margin-top: 60px;
}

/* */

/* aca empieza cuando */

.cont-gral-info {
    width: 100%;
    padding: 60px 10px 60px 10px;
    background-color: #8f1fcf;
    background-image: url('../imagenes/fondos042.jpg');
    *background-size: cover;
    text-align: center;
    color: #fff;
    position: relative;

}

.esquina {
    bottom: 5px;
    width: calc(100vw * 0.25);
    position: absolute;
    right: 5px;
    transform: scaleY(-1);
}

.izq {
    left: 5px;
    transform: scale(-1);
}

.cuando {
 
}
.donde {
    *position: relative;
    overflow:hidden;
    *z-index: 300;
    background-color: #d58cfc;
    background-image: url('../imagenes/fondos043.jpg');
    background-size: cover;
}



.regalos {
 background-color: #8f1fcf;
}

.insta {
    *position: relative;
    overflow:hidden;
    z-index: 10;
    background-color: #d58cfc;
    background-image: url('../imagenes/fondos043.jpg');
    background-size: cover;
}

.icono {
    display: block;
    padding: 15px;
    width: calc(100vw * 0.1 + 5.5em);
    height: calc(100vw * 0.1 + 5.5em);
    margin: auto;
    margin-bottom: 20px;
    filter: drop-shadow(7px 7px 7px rgba(0, 0, 0, 0.7));
    object-fit:contain;
}

.donde .icono {
   * background-color: #fff;
}

.regalos .icono {
    *background-color: #fff;
}

.insta .icono {
    *background-color: #fff;
}


.titulo-info {
    font-family: "Racing Sans One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(2vw + 1.5em);
    margin-bottom: 10px;
    
  
}
.fecha {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: italic;
    font-size: calc(1vw + 1.2em);
    

}
.horario {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: italic;
    font-size: calc(1vw + 1.2em);
   

}

/* aca termina cuando */

/* aca arranca los botones */

.btn {
display:inline-block;
width: auto;
font-family: "DM Serif Display", serif;
font-weight: 400;
font-style: italic;
font-size: calc(1vw + 0.9em);
margin-top: 10px;
padding: 10px 20px 10px 20px;
border: solid 1px rgba(255, 255, 255, 0.3);    
cursor: pointer;
border-radius: 15px;
box-shadow: 5px 5px 8px rgb(0, 0, 0, 40%);
background-color: #000;
background-image: url('../imagenes/fondo-boton.jpg');
background-size: cover;
position: relative;
color: #000;
}

/* aca finaliza los botones */

/* aca comienza el modal del mapa*/

.modal-mapa{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: 60px 0 60px 0;
    background-color: #8f1fcf;
    background-image: url('../imagenes/fondos042.jpg');
    background-size: cover;
    text-align: center;
    color: #fff;
    z-index: 900;
}

.txt-modal {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: italic;
    font-size: calc(1.5vw + 0.9em);
    margin-bottom: 20px;

}
.mapa {
    display: block;
   width: 50%;
   min-width: 300px;
   max-width: 1000px;
   margin: auto;
}

/* aca termina el modal del mapa*/

/*aca comienza el modal de regalos*/
.modal-regalos {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding: 60px 5px 60px 5px;
    background-color: #fff;
    background-image: url('../imagenes/fondos042.jpg');
    background-size: cover;
    text-align: center;
    color: #fff;
    z-index: 5000;
}

.tt-deseos {
     font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: italic;
    font-size: calc(1.5vw + 1em);
}

.deseos {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(1vw + 1em);
}

.cbu-alias {
     font-family: "Permanent Marker", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: calc(1.5vw + 1em); 
}

.cont-deseos {
    background-color: #d58cfc;
    padding: 30px 0 30px 0;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    border-radius: 15px;
    border: solid 3px #fff;
    box-shadow: 5px 5px 8px rgb(0, 0, 0, 40%);
    background-image: url('../imagenes/fondos041.jpg');
    background-size: cover;
    display: none;
}

.cont-banco {
   width: 50%;
    min-width: 300px;
    max-width: 1000px;
    margin: auto;
    *background-color: rgba(255, 255, 255, 0.2); 
    background-color: transparent;
    padding: 60px 0 60px 0;
    text-align: center;
    border: solid 1px rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    box-shadow: 5px 5px 8px rgb(0, 0, 0, 40%);
    backdrop-filter: blur(2px);
    position: relative;
    
}

.volver {
    background-color: #F2A35E;
}

/*aca termina modal regalos*/

/* aca va conf asist*/

.cont-conf-asis {
    padding: 60px 0 60px 0;
    background-image: url("../imagenes/fondos042.jpg");
    *background-size: cover;
    background-color: #8f1fcf;
    background-position: top;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    
}

.img-asis1 {
    position: absolute;
    width: 300%;
    top: 75%;
    left: -50%;
    transform: translateX(-50%);
    z-index: -1;
    display: none;
    
}

.img-asis2 {
    position: absolute;
    width: 100%;
    top: 60%;
    left: -50%;
    z-index: -10;
    display: none;
   
}


.form {
    width: 50%;
    min-width: 300px;
    margin: auto;
    margin-top: 20px;
    padding: 40px 20px 40px 20px;
    position: relative;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    text-align:left ;
    z-index: 0;
    

}

.in-dato, .lb, .btn-form {
    display: block;
    width: 100%;
    font-size: 1.3em;
}
.btn-form {
    text-align: center;
    display: none;
    text-decoration: none;
    color: #000;
}

.in-dato {
    padding: 20px 15px 20px 15px;
    border: 1px solid rgba(0,0,0,0.3);
    margin-bottom: 40px;
    background-color: rgba(216, 224, 142, 0.3);
    border: 1px solid rgba(96, 83, 83, 0.3);
    color:#fff;
}

.in-dato:focus {
    outline: 1px solid rgba(255, 255, 255, 0.7);
}

.in-dato:focus + .lb {
    margin-top: -135px;
}

.lb {
    padding-left: 15px;
    position: absolute;
    margin-top: -85px;
    color: #fff;
    z-index: -20;
    transition: all 0.3s;
    font-size: calc(1vw + 0.9em);
    font-weight: 400;
}

.form .horario {
    margin-bottom: 25px;
}

.fijar {
    margin-top: -135px;
}

/* aca finaliza la confir asist*/

/* foto final */

.foto-cierre {
    width: 100%;
    background-image: url('../imagenes/fondo-boton.jpg');
    background-size: cover;
    padding: 30px 0 30px 0;
}

.ico-asis {
    *background-color: #fff;
}

.foto-final {
display: block;    
width: 100%;
*min-width: 300px;
max-width: 1000px;
margin: auto;
*box-shadow: 5px 5px 8px rgb(0, 0, 0, 40%);

}

/* fin de foto final */

/*boton play y pausa*/
.play {
    position: fixed;
    display: none;
    bottom:30px;
    right:30px;
    z-index: 2000;
    width: calc(100vw * 0.07 + 2em);
    height: calc(100vw * 0.07 + 2em);
    border-radius: 50%;
    filter: drop-shadow(7px 7px 7px rgba(0, 0, 0, 0.7));
     cursor: pointer;
     object-fit:contain;
}
/*fin del boton flotante*/



/* aca arranca el efecto*/

@keyframes show {
    from {
        opacity: 0;
        scale: 25%;
    }
    to {
        opacity: 1;
        scale: 100%;
    }
}

.frase-efecto, .cont-gral-fotos, .cont-gral-info, .foto-cierre, .cont-conf-asis {
    view-timeline-name: --image;
    view-timeline-axis: block;

    animation-timeline: --image;
    animation-name: show;

    animation-range: entry 10% cover 40%;
    animation-fill-mode: both;
}

/* fin del efecto*/


/* aca arranca el movimiento de iconos*/

@keyframes mov-iconos {
    0% {
        scale: 100%;
    }
    50% {
        scale: 90%;
    }
        100% {
        scale: 100%;
    }
}

.icono, .superpuesta {
    animation: mov-iconos 5s infinite;

}

/* fin del movimiento*/




/* aca arranca el movimiento de iconos*/

@keyframes mov-btn {
    0% {
        scale: 100%;
        color: #000;
    }
    50% {
        scale: 105%;
        color: #000;
    }
        100% {
        scale: 100%;
        color: #000;
    }
}

.btn, .btn-inicio {
    animation: mov-btn 3s infinite;

}

/* fin del movimiento*/

/*esto es para crear efecto neon en textos*/
.neon {
  *font-family: 'Monoton', cursive; /* Estilo neón */
  *font-size: 72px;
  color: #fff;
  text-align: center;
  *text-transform: uppercase;
  *letter-spacing: 5px;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ff00de,
    0 0 30px #ff00de,
    0 0 40px #ff00de,
    0 0 55px #ff00de,
    0 0 75px #ff00de;
  animation: flicker 2s infinite alternate;
}

@keyframes flicker {
  0% { opacity: 1; text-shadow: 
    0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00de, 
    0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 55px #ff00de, 0 0 75px #ff00de; }
  50% { opacity: 0.9; text-shadow:
    0 0 3px #fff, 0 0 7px #fff, 0 0 15px #ff00de, 
    0 0 25px #ff00de, 0 0 35px #ff00de, 0 0 45px #ff00de, 0 0 60px #ff00de; }
      100% { opacity: 1; }
}


/*neon fijo contenedor*/
.neon-box {
  border: 4px solid #ff00de;
  padding: 20px;
  color: white;
  background: black;
  text-align: center;
  box-shadow:
    0 0 5px #fff,
    0 0 10px #ff00de,
    0 0 20px #ff00de,
    0 0 30px #ff00de;
}

/*neon pasa por encima del contenedor*/
.glow-border {
  position: relative;
  padding: 30px;
  background: black;
  color: white;
  text-align: center;
  border: 2px solid #ff00de;
  overflow: hidden;
}

.glow-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  box-sizing: border-box;
  animation: neonSweep 3s linear infinite;
  background: linear-gradient(
    90deg,
    transparent,
    #ff00de,
    transparent
  );
}

@keyframes neonSweep {
  0% { left: -100%; }
  100% { left: 100%; }
}