@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Great+Vibes&display=swap');


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

.row {
    width: 100%;
    margin: 0;
}



:root {
    --color-gris: rgb(161, 161, 161);
    --color-gris-intermedio: rgb(117, 117, 117);
    --color-gris-fuerte: rgb(58, 58, 58);
    
}

.gris {
    color: var(--color-gris);
}

.gris-intermedio {
    color: var(--color-gris-intermedio);
}

.gris-fuerte {
    color: var(--color-gris-fuerte);
}

.cursive {
    font-family: 'Great Vibes', cursive;
}

.tamano {
    font-size: 25px;
}

.color {
    color: rgb(255, 60, 93);
}


.btn-hero {
    text-decoration: none;
    background-color: transparent;
    color: goldenrod;
    border-radius: 29px;
    border: 2px solid rgb(255, 60, 93);
    padding: 1vh 2vw;
    margin: 0 40px;
    animation: animate 3s linear infinite;
    text-shadow: 0 0 50px #0072ff, 0 0 100px #0072ff, 0 0 150px #0072ff,
      0 0 200px #0072ff;
  }
  @media screen and (max-width: 992px) {
    .btn-hero {
        padding: 1vh 10vw;
    }
  }

  


.btn-hero:hover {
    color: rgb(255, 60, 93);
    border: 2px solid rgb(255, 60, 93);
    animation: none;
    text-shadow: 0 0 50px rgb(255, 60, 93), 0 0 100px rgb(255, 60, 93), 0 0 150px rgb(255, 60, 93),
      0 0 200px rgb(255, 60, 93);
      box-shadow: 0 0 10px rgb(255, 60, 93), 0 0 10px rgb(255, 60, 93), 0 0 10px rgb(255, 60, 93),
      0 0 10px rgb(255, 60, 93);
      background-color: transparent;
}


  

  @keyframes animate {
    from {
      filter: hue-rotate(0deg);
    }
    to {
      filter: hue-rotate(360deg);
    }
  }


  .container-fluid {
    padding: 0;
  }

/* ------------------------arriba variables, abajo customizacion del hero------------------------ */

body {
    background-image: url(../media/textura.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
@media screen and (max-width: 992px) {
    body {
    background-image: url(../media/fondo-cel-xv.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    
    }
}

.texto-hero {
    height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 15vh;
   
}
@media screen and (max-width: 992px) {
    .texto-hero {
        padding-top: 0;
        height: 50vh;
    }
}

.misxv {
    color: rgb(255, 60, 93);
    font-size: clamp(1.875rem, 1.5267rem + 1.5924vw, 3.4375rem);
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

.nombre {
    color: rgb(194, 148, 32);
    font-size: clamp(3.625rem, 2.7611rem + 3.949vw, 7.5rem);
    line-height: 100%;
    font-family: 'Great Vibes', cursive;

}

.save {
    color: var(--color-gris);
    font-size: clamp(1.4375rem, 1.2006rem + 1.0828vw, 2.5rem);
    letter-spacing: 1rem;
    
}
@media screen and (max-width: 992px) {
    .save {
        letter-spacing: 0.3rem;
    }
}


.fecha {
    color: var(--color-gris-fuerte);
    font-size: 20px;
    letter-spacing: 1rem;
}

@media screen and (max-width: 992px) {
    .fecha {
        letter-spacing: .5rem;
    }
}


.hora {
    color: var(--color-gris-intermedio);
    margin: 0;
    font-size: clamp(1.25rem, 1.1803rem + 0.3185vw, 1.5625rem);
}
@media screen and (max-width: 992px) {
    .hora {
        text-align: center;
    }
}



.direccion {
    color: var(--color-gris);
    font-size: clamp(1rem, 0.9025rem + 0.4459vw, 1.4375rem);
}
@media screen and (max-width: 992px) {
    .direccion {
        text-align: center;
    }
}

.contenedor-indicaciones {
    padding: 0 20vw;
}

@media screen and (max-width: 992px) {
    .contenedor-indicaciones {
        padding: 0;
    }
}

.indicaciones {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1vh 3vw;
}

@media screen and (max-width: 992px) {
    .indicaciones {
        padding: 0;
        display: block;
        margin-top: 0vh;
        
    }
}

.caja-indicacion {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 15px;
}

.dress {
    font-size: clamp(2.5rem, 2.291rem + 0.9554vw, 3.4375rem);
    color: rgb(194, 148, 32);
}

.formal {
    letter-spacing: 0.1em;
}

@media screen and (max-width: 992px) {
    .formal {
        letter-spacing: 0;
        font-size: 15px;
        text-align: center;
    }
}

.galeria {
    font-size: clamp(2.5rem, 2.291rem + 0.9554vw, 3.4375rem);
    margin-top: -2vh;
    color: rgb(194, 148, 32);
}

@media screen and (max-width: 992px) {
    .galeria {
        margin: 0;
    }
}


.line {
    background-color: rgb(194, 148, 32);
    height: 5px;
    width: 100%;
    margin: 3px 0;
}

/* ---------------------HERO Y NAV DESKTOP--------------------------- */

    .tamano2 {
        font-size: 23px;
        padding: 10px 0;
    }

    .navbar {
        background: transparent;
    }

    .home {
        padding-left: 3vw;
        font-size: 25px;
        color: rgb(255, 60, 93);
    }
    .navbar-toggler {
        margin-right: 2vw;
    }

    @media screen and (max-width: 992px) {
        .navbar-toggler{
            margin: 0;
        }
    }

    .offcanvas-header {
        background-color: pink;
    }
    .offcanvas-body {
        background: linear-gradient(to bottom, pink 0%, purple 100%);
    }

    .offcanvas.offcanvas-end {
        width: 20%;
    }
    @media screen and (max-width: 992px) {
        .offcanvas.offcanvas-end {
            width: 50%;
        }
    }
    
/* -------------------Mesa de regalos------------------------------- */

.contenedor-mesa {
    padding: 8vh 0vw;
    overflow-x: hidden;
}

.ttl-mesa {
    font-size: clamp(2.8125rem, 2.6035rem + 0.9554vw, 3.75rem);
    color: var(--color-gris-intermedio);
    text-align: center;
    padding: 3vh 0 1vh 0;
    background-color: rgb(255, 182, 194);
    opacity: 0.8;
}

.corazon {
    font-size: clamp(1.25rem, 1.041rem + 0.9554vw, 2.1875rem);
}

.opciones-mesa {
    height: 70vh;
    margin: 8vh 0;
    background-image: url(../media/floresdefondo.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    padding: 0 25vw;
    display: flex;
    justify-content: center;
    align-items: center;
}



@media screen and (max-width: 992px) {
    .opciones-mesa {
        background-image: url(../media/flores-cel.jpeg);
        padding: 0 10vw;
    }
}
.opciones-mesa::before {
    content: '';
    background: #000;
    height: 70vh;
    width: 100%;
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
}

.tarjeta-regalos {
    background-color: #ffffff;
    box-shadow: 2px 2px 4px 2px #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 5;
    cursor: pointer;
    padding: 3vh 3vw;
    opacity: 0.8;
    text-align: center;
    transition: 1s;
    width: 45vw;
    height: 45vh;
}
@media screen and (max-width: 992px) {
    .tarjeta-regalos {
        width: 100%;
        height: 60%;
    }
}

.show-mesa {
    font-size: 45px;
}

.hide-mesa {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: none;
}

@media screen and (max-width: 992px) {
    .hide-mesa {
        font-size: 14px;
    }
}

.parrafo-tarjeta {
    margin: 2vh 0;
}


/* -----------------------------FORMULARIO -----------------------------------  */

.contenedor-formulario {
    padding: 5vh 25vw;
}

.indicaciones2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5vh 0 0 0;
    color: #797979;

}
.btn-confirmacion {
    display:flex;
    justify-content: end;
}

.pink {
    background-color: rgb(255, 182, 194);
}

.pink:hover {
    background-color: rgb(255, 101, 127);
}

.form-group {
    margin: 4vh 0;
}

.form-control {
    border: 1px solid rgb(255, 182, 194);
}

.form-group option {
    color: #797979;
}

.ph {
    color: #797979;
}

@media (min-width: 200px) and (max-width: 991.8px) {
    .envia {
        letter-spacing: 0.1rem;
        text-align: center;
        color: #797979;
    }
    .ph {
        font-size: 13px;
    }

    .contenedor-formulario {
        padding: 5vh 5vw;
    }

    .indicaciones2 {
        font-size: 15px;
        padding: 5vh 3vw 0 3vw;
        text-align: center;
    }
}