/* Sección principal */
.home, .parents {
  min-height: 100vh;
  background-color: #fdf8f6; /* fondo rosado claro */
  font-family: 'Great Vibes', cursive;
  color: #EECCCF;

}

.home, .parents, .conteo, .sugerencia, .ceremonia, .galeria {
  background: url(../img/BackGround.jpg) no-repeat center;
  background-size: cover;
  background-attachment: fixed;
}

.cont{
  padding: 70px;
}

.conteo{
  min-height: 70vh;
  background-color: #fdf8f6; /* fondo rosado claro */
  font-family: 'Great Vibes', cursive;
  color: #EECCCF;
}

.galeria {
  min-height: 100vh;
  background-color: #fdf8f6; /* fondo rosado claro */
  font-family: 'Great Vibes', cursive;
  color: #EECCCF;
  /*background: url(../img/BackGround3.PNG) no-repeat center;*/
  /*background-size: cover;*/
  /*background-attachment: fixed;*/
/*  margin-bottom: 30px;
  margin-top: 30px;*/

}

/* Tarjeta principal */
.card_1 {
    border: 5px solid #EECCCF;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    padding: 15px;
    text-align: center;
}

.ln-cont {
  text-align: center;
  padding-block-start: 15px;
  padding-block-end: 15px;
  display: flex;
}

.border-sep{
    width: 10%;
    margin: 0 auto;
    border-block-start: 1px solid #D8D8D8;
}

/* Marco decorativo */
.marco {
  border: 5px solid #EECCCF;
  border-radius: 16px;
  padding: 20px;
}

/* Imagen circular */
.imagen-circular {
  width: 180px;
  height: 180px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #EECCCF;
}

.imagen-circular img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Contenido textual */
.contenido .subtitulo {
  font-family: 'Cormorant Garamond', sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 10px;
  color: #515151;
  /*color: #FFF;*/
  /*text-shadow: 1px 4px 6px #bbb8b8, 0 0 0 #f5f5f5, 1px 4px 6px #b3afaf;*/
  /*color: #878787;*/
  font-weight: 600;
  margin-bottom: 10px;
}

.contenido .title_cont {
  font-family: 'Cormorant Garamond', sans-serif;
  font-size: 25px;
  letter-spacing: 2px;
  margin-bottom: 10px;
  /*color: #515151;*/
  color: #FFF;
  text-shadow: 1px 4px 6px #bbb8b8, 0 0 0 #f5f5f5, 1px 4px 6px #b3afaf;
  /*color: #878787;*/
  font-weight: 600;
  margin-bottom: 10px;
}
.title_cont {
  font-family: 'Cormorant Garamond', sans-serif;
  font-size: 25px;
  letter-spacing: 2px;
  /*margin-bottom: 10px;*/
  /*color: #515151;*/
  color: #FFF;
  text-shadow: 1px 4px 6px #bbb8b8, 0 0 0 #f5f5f5, 1px 4px 6px #b3afaf;
  /*color: #878787;*/
  font-weight: 600;
  margin-bottom: 10px;
}

.separator{
    display: inline-block;
    vertical-align: middle;
    width: 20%;
}


.nombre {
  font-size: 55px;
  margin: 0;
  font-family: "Dancing Script", Sans-serif;
  color: #FF7C88;
  text-shadow: 1px 4px 6px #fff6f6, 0 0 0 #000, 1px 4px 6px #8c8c8c;

}

.numero {
  font-size: 67px;
  font-weight: bold;
  color: #515151;
  /*color: #FFF;*/
  /*text-shadow: 1px 4px 6px #bbb8b8, 0 0 0 #f5f5f5, 1px 4px 6px #b3afaf;*/
  /*color: #878787;*/
  font-family: "Dancing Script", Sans-serif;
  transition: transform 0.2s ease;
}


.numero:active {
  transform: scale(1.1);
}


.fecha {
  font-size: 20px;
  font-family: 'Cormorant Garamond', sans-serif;
  letter-spacing: 1px;
  color: #515151;
  /*color: #FFF;*/
  /*text-shadow: 1px 4px 6px #bbb8b8, 0 0 0 #f5f5f5, 1px 4px 6px #b3afaf;*/
  /*color: #878787;*/
}

/* Botón decorativo */
.icono .btn {
  border: none;
  font-size: 17px;
  color: #FFF;
  margin-top: 20px;
  margin-bottom: 20px;
  background: #D77A83;
  border-radius: 50%;
}
.icono .btn {
  .bi::before, [class*=" bi-"]::before, [class^="bi-"]::before{
    line-height: 1.5 !Important;
  }
}

.icono .btn:hover{
    background: #FDC8B2;
    transition: 0.6s;
    color: #fff;
}

.animate__animated {
  animation-duration: 1.5s;
  animation-delay: 0.2s;
  animation-timing-function: ease-in-out;
}


.jet-countdown-timer{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.item-days, 
.item-hours,
.item-minuts,
.item-seconds
{
    width: 110px;
    height: 110px;
}

.item-value{
  color: #FFE1E4;
  font-size: 67px;
  font-family: "Dancing Script", Sans-serif;
  text-shadow: 1px 4px 6px #626262, 0 0 0 #000, 1px 4px 6px #8c8c8c;
   /* order: 1;
    color: #DBA2A7;
    font-size: 67px;
    font-family: "Dancing Script", Sans-serif;  */  
}
.item-label{
    order: 2;
    color: #515151;
    /*color: #FFF;*/
  /*text-shadow: 1px 4px 6px #bbb8b8, 0 0 0 #f5f5f5, 1px 4px 6px #b3afaf;*/
    /*color: #878787;*/
    font-family: "Cormorant Garamond", Sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.container_desc{
    margin: 0% 10% 0% 10%;
    text-align: center;
    font-family: "Lora", Sans-serif;
    font-weight: 400;
    font-style: italic;
    color: #515151;
    /*color: #FFF;*/
  /*text-shadow: 1px 4px 6px #bbb8b8, 0 0 0 #f5f5f5, 1px 4px 6px #b3afaf;*/
    /*color: #878787;*/
    margin-top: 30px;
}

.invisible {
    opacity: 0;
    visibility: hidden;
}

.carousel-quince {
  background-color: #fbeae8;
  padding: 40px 0;
  text-align: center;
  border-radius: 10px;
}

.carousel-container {
  max-width: 550px;
  margin: auto;
  position: relative;
}



.carousel-slide {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  height: 400px;
  background-color: #fff; /* Fondo neutro para imágenes con espacio */
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* ← Muestra la imagen completa sin recortes */
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease-in-out, transform 0.6s ease;
}

.carousel-img.active {
  display: block;
  opacity: 1;
  transform: scale(1.40);
  border-radius: 10px;
}

.carousel-thumbnails {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.6;
  transition: transform 0.3s, opacity 0.3s;
  border: 2px solid transparent;
}

.thumb.active {
  opacity: 1;
  transform: scale(1.05);
  border-color: #e48ca4;
}

/* Botones de navegación */
.carousel-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  background-color: #D77A83;
  border: none;
  color: #fff;
  font-size: 20px;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  width: 50px;
  transition: background 0.3s;
}

.carousel-btn:hover {
  background-color: #e48ca4;
  color: white;
}

.carousel-btn.prev {
  left: 10px;
}

.carousel-btn.next {
  right: 10px;
}

.padres-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background-color: #fdfdfd;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  max-width: 500px;
  margin: 0 auto;
}

.padres-container h2 {
  font-family: "Cormorant Garamond", Sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #515151;
  /*color: #FFF;*/
  /*text-shadow: 1px 4px 6px #bbb8b8, 0 0 0 #f5f5f5, 1px 4px 6px #b3afaf;*/
  /*color: #878787;*/
}

.padres-container .nombres {
  font-family: "Dancing Script", Sans-serif;
  font-size: 40px;
  font-weight: 100;
  text-transform: capitalize;
  letter-spacing: 0px;
  color: #FF7C88;
  text-shadow: 1px 4px 6px #fff6f6, 0 0 0 #000, 1px 4px 6px #8c8c8c;
}
.padres-container .ancord {
    font-family: "Cormorant Garamond", Sans-serif;
    font-size: 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #A4A4A4;
}

.padres-container img {
    margin-top: 15px;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  object-fit: cover;
  margin-bottom: 1rem;
  border: 4px solid #e0e0e0;
}

.row.justify-content-center {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}



.ceremonia {
  min-height: 100vh;
  font-family: 'Great Vibes', cursive;
  color: #EECCCF;
/*  background: url(../img/BackGround3.PNG) no-repeat center;
  background-size: cover;
  background-attachment: fixed;*/

}

.ubicaciones {
  background-color: #fdf8f6;
  padding: 60px 0;
}

.evento-card {
  background-color: #fff;
  border: 2px solid #EECCCF;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.evento-titulo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  background: #DBA2A7;
  color: #FFF;
  border-radius: 7px;
  width: 90%;
  margin: 0 auto;
  font-weight: 600;
}

.evento-imagen img {
  width: 100%;
  border-radius: 35px;
  padding: 25px;
}

.evento-detalles p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: #515151;
  /*color: #FFF;*/
  /*text-shadow: 1px 4px 6px #bbb8b8, 0 0 0 #f5f5f5, 1px 4px 6px #b3afaf;*/
  /*color: #878787;*/
  margin: 5px 0;
}

p.evento-nombre, 
p.evento-hora {
  font-weight: 600 !important;
  font-size: 20px;
  position: relative;
  top: -10px;
}

p.evento-direccion{
   margin: 0 auto;
   text-align: center;
   width: 70%;
}
.btn.btn-gps {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  background: #D77A83;
  color: #FFF;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 6px;
  font-weight: 600;
  border-radius: 10px;
}

.btn.btn-gps:hover {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  background: #FFF;
  color: #DBA2A7;
  border: 2px #DBA2A7 solid !important;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 6px;
  font-weight: 600;
  border-radius: 10px;
  transition: 0.6s;
}

.sugerencia {
  background-color: #fdf8f6;
  padding: 60px 0;
  font-family: 'Cormorant Garamond', serif;
  color: #DBA2A7;
}

.titulo-sugerencia {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 40px;
  color: #FFF;
  text-shadow: 1px 4px 6px #bbb8b8, 0 0 0 #f5f5f5, 1px 4px 6px #b3afaf;
}

.card-sugerencia {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 25px;
  margin-bottom: 30px;
  max-width: 500px;
  margin: 0 auto;
}

.icono-sugerencia {
  font-size: 40px;
  color: #F0AFA0;
  margin-bottom: 15px;
}

.texto-sugerencia {
  text-align: center;
  font-family: "Lora", Sans-serif;
  font-weight: 400;
  font-style: italic;
  color: #515151;
  /*color: #FFF;*/
  /*text-shadow: 1px 4px 6px #bbb8b8, 0 0 0 #f5f5f5, 1px 4px 6px #b3afaf;*/
  /*color: #878787;*/
}

.title-sugerencia {
  font-family: "Dancing Script", Sans-serif;
  font-size: 40px;
  font-weight: 100;
  text-transform: capitalize;
  letter-spacing: 0px;
  color: #FF7C88;
  text-shadow: 1px 4px 6px #fff6f6, 0 0 0 #000, 1px 4px 6px #8c8c8c;
}

.btn-ver-regalos {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #D77A83;
  color: #fff;
  border: none;
  border-radius: 25px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn-ver-regalos:hover {
  background-color: #FDC8B2;
}

#frameContent {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#frameContent iframe {
  width: 100%;
  height: 450px; /* puedes ajustar la altura si lo necesitas */
  border: 0;
  display: block;
}


/*Medidas Celular*/
@media (min-width:300px) and (max-width:450px) {

  .home, .parents, .conteo, .sugerencia{
    min-height: 100vh;
  }

  .card_1, 
  .ceremonia .container,
  .galeria .container,
  .parents .container,
  .sugerencia .container {
    margin: 0 auto;
    width: 90% !important;
  }

  .carousel-img{
    max-width: 65%;
    max-height: 65%;
  }

  .carousel-btn {
    top: 40%;
    font-size: 15px;
    width: 40px;
    .bi::before, [class*=" bi-"]::before, [class^="bi-"]::before{
      line-height: 1.5 !Important;
    }
  }

  .row.justify-content-center {
    justify-content: center;
  }

  .home {
    text-align: center;
    padding: 20px 0;
  }

  .cont {
    padding: 20px;
    position: relative;
    /*top: -70px;*/
  }

  .item-days, .item-hours, .item-minuts, .item-seconds {
    width: 135px;
  }

  .item-value{
    font-size: 50px;
  }

  .item-label{
    font-size: 12px;
  }
  .container_desc {
    font-size: 15px;
  }

  p.evento-nombre, p.evento-hora{
    font-size: 17px;
    margin: 0 auto;
    text-align: center;
    width: 90%;
  }

  .btn.btn-gps{
    margin-top: 25px;
  }

  .evento-titulo{
    font-size: 18px;
  }
}

}