@charset "UTF-8";

@font-face {
  font-family: minion;
  src: url(fonts/minion.otf);
  font-weight: normal;
  font-style: normal;
}

/* General */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: minion;
  font-weight: 100;
}

html, body {
  scroll-behavior: smooth;
  color: #040404;
  line-height: 1.6;
  background: #f5f5f5;
}

.text-center {
  text-align: center;
}

/* Encabezado */
.hero {
  background: url('img/pareja2_1.webp') no-repeat center center/cover;
  height: 100vh;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@media (max-width: 768px) {
  .hero {
    background: url('img/pareja2_10.webp') no-repeat center center/cover;
  }
}

.hero_content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.overlay {
  background: rgba(0, 0, 0, 0.6);
  padding: 50px;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero h1 {
  font-size: 4rem;
  letter-spacing: 2px;
}

.hero p {
  font-size: 1.5rem;

}

/* COUNTDOWN */

#countdown {

}

#countdown .countdown {

  margin-bottom: 0;
  font-size: 80px;
  color: #ffffff;
}

#countdown .countdown span {
  margin: 0 20px;
  display: inline-block;
  font-weight: lighter;
}

#countdown .countdown small {
  display: block;
  font-size: 25px;

}

.label {
  display: block;
  font-size: 0.9rem;
}

/* Frase */
.frase {
  padding: 60px 60px;
  text-align: center;
  background: #072E29;
}

.frase h2 {
  font-size: 1.5rem;
  color: #ffffff;
}

.frase p {
  font-size: 1rem;
  color: #ffffff;
  margin-top: 10px;
  font-style: italic;
}

/* Sección del Itinerario */
.itinerary {
  padding: 80px 20px;
  background: #fff;
  text-align: center;
  background: url('img/textura2.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.itinerary h2 {
  font-size: 35PX;
  color: #072E29;
  margin-bottom: 40px;
}

.itinerary-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.itinerary-item {
  width: 100%;
  max-width: 500px;
  background: #f5f5f5;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  text-align: center;
}

/* Imágenes circulares con borde */
.itinerary-img {
  width: 80px; /* Tamaño uniforme */
  height: 80px;
  object-fit: cover;
  border-radius: 50%; /* Hace la imagen circular */
  border: 3px solid #AC623B; /* Borde de 3px en azul */
  /* Inicia invisible y pequeña */
  opacity: 0;
  transform: scale(0.5);
  transition: transform 1s ease-out, opacity 1s ease-out;
}

/* Clase que se activa cuando la imagen entra en la pantalla */
.itinerary-img.visible {
  opacity: 1;
  transform: scale(1);
}

/* Botón "Ver en mapa" */
.btn-mapa {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  font-size: 1rem;
  color: #fff;
  background: #AC623B; /* Azul llamativo */
  text-decoration: none;
  border-radius: 8px;
  transition: 0.3s;
}

.btn-mapa:hover {
  background: #C15D2B;
  transform: scale(1.05);
}

.itinerary-item h3 {
  font-size: 2rem;
  color: #040404;
  margin: 0 0 10px;
}

.itinerary-item p {
  font-size: 1.2rem;
  color: #040404;
}

/* Responsive */
@media (max-width: 768px) {
  .itinerary-container {
      flex-direction: column;
      gap: 30px;
  }

  .itinerary-item {
      max-width: 100%;
  }
}

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

.col {
  flex: 1;
  min-width: 300px;
  max-width: 600px;
  padding: 30px;
  background: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.col h3 {
  font-size: 1.8rem;
  color: #040404;
}

.col p {
  font-size: 1.1rem;
  color: #040404;
  margin: 10px 0;
}

.btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  font-size: 1rem;
  color: #fff;
  background: #072E29; /* Azul llamativo */
  text-decoration: none;
  border-radius: 8px;
  transition: 0.3s;
  box-shadow: none;
  border-style: none;
}

.btn:hover {
  background: #095C54;
  transform: scale(1.05);
}

/* Sección Padres y Padrinos */
.parents {
  padding: 40px 0 40px;
  text-align: center;
  background: #ebd8bc73;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.parents h2 {
  font-size: 2rem;
  color: #072E29;
  line-height: 2.2rem;
  margin-bottom: 40px;
}

.parents-container {
  display: flex;
  justify-content: space-around;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.parent-col {
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  padding: 20px 40px 0;
  border-radius: 8px;
}

.parent-col h3 {
  font-size: 1.3rem;
  color: #072E29;
  margin-bottom: 15px;
  font-weight: bold;
}

.parent-col p {
  font-size: 1.2rem;
  color: #072E29;
  margin: 10px 0;
}

/* Sección de Novios */
.couple {
  padding: 80px 20px 20px;
  text-align: center;
}

.couple h2 {
  font-size: 2.5rem;
  color: #040404;
  margin-bottom: 40px;
}

.couple-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.couple-container div {
  text-align: center;
  transition: transform 0.3s;
}

.couple-container div:hover {
  transform: translateY(-10px);
}

.couple img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  border: 8px solid #f5f5f5;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}

.couple img:hover {
  border: 8px solid #AC623B; /* Toque dorado al hacer hover */
}

.couple h3 {
  font-size: 1.8rem;
  color: #072E29;
  margin: 20px 0;
}

/* Texto bíblico */
.bible-verse {
  margin-top: 30px;
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
  border-radius: 8px;
}

.bible-verse p {
  font-size: 1.5rem;
  color: #040404;
  font-style: italic;
  margin-bottom: 10px;
}

.bible-verse span {
  display: block;
  font-size: 1.4rem;
  color: #040404;
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

.container:before, .container:after {
  content: " ";
  display: table;
}

.container:after {
  clear: both;
}

#gallery p {
  margin-bottom: 3rem;
}

#gallery h2 {
  font-size: 35px;
  color: #072E29;
}

#gallery .row {
  margin-left: -15px;
  margin-right: -15px;
  gap: 0;
  display: block;
}

#gallery .row:before, .row:after {
  content: " ";
  display: table;
}

#gallery .row:after {
  clear: both;
}

.square {
  overflow: hidden; /* Asegura que el contenido no sobresalga */
  display: flex; /* Opcional: centra la imagen si es necesario */
  justify-content: center; /* Opcional: centra la imagen horizontalmente */
  align-items: center; /* Opcional: centra la imagen verticalmente */
  margin-bottom: 2rem;
}
.square img {
  width: 100%; /* Ajusta el ancho al div */
  height: 500px; /* Ajusta la altura al div */
  object-fit: cover; /* Asegura que la imagen llene el div sin deformarse */
}

@media (max-width: 768px) {
  .square img {
  width: 100%; /* Ajusta el ancho al div */
  height: 100%; /* Ajusta la altura al div */
  object-fit: cover; /* Asegura que la imagen llene el div sin deformarse */
}
}

.col-md-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) {
  .col-md-4 {
    float: left;
  }
  .col-md-4 {
    width: 50%;
  }
}

/* Sección de Mesa de Regalos */
.gift-table {
  background: #072E29; /* Color de fondo suave */
  padding: 80px 20px;
  text-align: center;
}

.gift-table h2 {
  font-size: 35PX;
  color: #fff;
  margin-bottom: 40px;
}

/* Contenedor de contenido */
.gift-content {
  max-width: 300px;
  margin: 0 auto;
  text-align: center;
}

/* Imagen circular con borde */
.gift-content img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-bottom: 15px;
}

/* Texto "Lluvia de sobres" */
.gift-content h3 {
  font-size: 1.8rem;
  color: #fff;
  margin-bottom: 20px;
}

/* Texto descriptivo */
.gift-content p {
  font-size: 1.2rem;
  color: #fff;
  line-height: 1.5rem;
  max-width: 700px;
  margin: 0 auto;
}

.gift-content .thanks {
  font-size: 0.8rem;
  font-style: italic;
}

/* Sección Dress Code */
.dress-code {
  background: #f9f9f9; /* Fondo suave */
  padding: 80px 20px;
  text-align: center;
}

/* Imagen circular con borde */
.dress-header img {
  width: 60px;
  height: 60px;
  object-fit: cover;
}

/* Títulos */
.dress-header h2 {
  font-size: 35PX;
  color: #072E29;
  margin: 10px 0;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.dress-header h3 {
  font-size: 1.5rem;
  color: #040404;
  margin-bottom: 20px;
}

/* Detalles de vestimenta */
.dress-details {
  text-align: left;
  max-width: 350px;
  margin: 0 auto;
}

.dress-details p {
  font-size: 1.3rem;
  color: #040404;
  line-height: 1.8;
  margin-bottom: 15px;
}

/* Negritas para Mujeres y Hombres */
.dress-details strong {
  color: #072E29; /* Azul para resaltar */
  font-weight: bold;
}

/* Colores no permitidos */
.no-colors {
  display: flex;
  justify-content: center;
  gap: 15px;               /* Espacio entre los círculos */
  margin: 30px 0 10px;     /* Espaciado arriba y abajo */
  flex-wrap: wrap;         /* Para que sean responsivos */
}

.color-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Sombra sutil */
  transition: transform 0.3s;                /* Efecto hover */
}

.color-circle:hover {
  transform: scale(1.1);                     /* Efecto zoom al pasar el mouse */
}

/* Mensaje de colores no permitidos */
.no-colors-msg {
  font-size: 1.2rem;
  color: #555;
  margin-top: 15px;
  font-style: italic;
}

.parallax-section {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.parallax-bg {
  position: absolute; /* Hacer que el fondo sea fijo */
  top: -20%;
  left: 0;
  width: 100%;
  height: 1200px;
  background-size: cover;
  background-position: center;
}

#section .parallax-bg {
  background: 
    linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), /* Gradiente negro */
    url('img/7.webp'); /* Imagen de fondo */
  filter: blur(2px);
  background-size: cover;
  background-position: center;
}

#rsvp .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 40%); /* Filtro negro con opacidad del 70% */
  z-index: 1; /* Asegura que el filtro esté sobre el fondo */
}

#rsvp {
  position: relative;
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  justify-items: center;
  padding-bottom: 4em;
  height: 100%;
}

#rsvp .form-control {
  border: none !important;
  color: #000000;
  font-size: 16px !important;
  width: 100%;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

#rsvp .heading-section {
  margin-bottom: 10px;
  padding: 0;
  font-size: 50px;
  font-weight: 300;
  position: relative;
  color: #000000;
}

#rsvp .heading-section h2 {

  text-transform: uppercase;
  font-size: 23px;
  font-weight: 300;
  position: relative;
  color: #000000;
}

.invitados {
  text-align: center;
  position: relative;
  z-index: 100;
  padding: 4rem 2rem;
}

.invitados .heading-style-h3 {
  color: #000000;
  font-size: 1.8rem;
  line-height: 2.5rem;
  text-transform: uppercase;
}

.invitados .heading-style-h4 {
  color: #000000;
  font-size: 16px;
  font-weight: normal;
  line-height: 16px;
}

.invitados p {
  color: #000000;
  font-size: 13px;
  font-weight: 500;
}

.invitados .heading-style-h5 {
  color: #000000;
  font-size: 1.5rem;
  font-weight: normal;
  line-height: 2.5rem;
  padding-top: 20px;
}

.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #000000;
  transition: background-color 0.3s ease;
}
.circle.filled {
  background-color: #C15D2B;
}
.circles_container {
  display: flex; 
  gap: 10px; 
  justify-content: center;
  padding: 20px 0 5px 0;
}

.container-form {
  width: 100%;
  max-width: 50rem;
  position: relative;
  z-index: 100;
}

.container-form {
  width: 100%;
  max-width: 50rem;
  position: relative;
  z-index: 100;
}

.form-control {
  display: block;
  width: 100%;
  height: auto;
  padding: 10px 20px;
  font-size: 14px;
  line-height: 1.42857;
  color: #040404;
}

.form-component-col-1 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.form-component-col-2 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 0.2fr 1fr 0.2fr 1fr;
  grid-auto-columns: 0.2fr 1fr 0.2fr 1fr;
  display: grid;
}

.form-input {
  border: 1px solid #040404;
  color: #000000;
  background-color: #0000;
  border-radius: 2.3125rem;
  min-height: 52px;
  margin-bottom: 10px;
  padding: .9375rem 1.25rem;
  font-size: 1rem;
}

.form-input::placeholder {
  font-size: 1.2rem;
  line-height: 1.375rem;
  font-weight: normal;
}

.form-input.is-text-area {
  resize: none;
  min-height: 10rem;
  padding-top: 1.5rem;
  font-size: 14px;
  padding-left: 1rem;
}

.input-spec, .select-spec {
  color: #000000;
  vertical-align: middle;
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857;
  display: block;
  font-family: minion;
}

.input-spec::placeholder, .select-spec::placeholder {
  color: #000000;
  font-size: 14px;
}

textarea.input-spec, textarea.select-spec {
  height: auto;
  font-size: 14px;
}

/* POP-UP */

/* Estilos de la ventana pop-up */
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.popup-content button {
  padding: 10px 20px;
  width: 50%;
  font-size: 16px;
  line-height: normal;
  cursor: pointer;
  border: none;
  background-color: #072E29;
  color: #fff;
  border-radius: 5px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  font-weight: bold;
  transition: 0.3s;
}

.popup-content button:hover {
  background-color: #095C54;
  color: #000;
  transform: scale(1.1);
}

.popup-text {
  margin-bottom: 1.5rem;
}

.h3-popup {
  color: #072E29;
  font-family: minion;
  font-size: 30px;
  margin-bottom: 0;
}

.h2-popup {
  color: #072E29;
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: minion;
  font-size: 2rem;
  font-weight: 700;
  line-height: 3.5rem;
}

.popup-p {
  margin: 0;
}

@media screen and (max-width: 450px) {
  .h2-popup {
    font-size: 2.5rem;
  }
  .popup-p {
    font-size: 14px;
  }
}

/* POP-UP ENVIAR */
.popup_enviar {
  position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup_enviar-content {
  display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
    background-size: contain;
    padding: 0 20px 20px;
    text-align: center;
    border-radius: 8px;
    height: auto;
    width: 400px;
}

.popup_enviar_text h3 {
  margin: 0;
  line-height: normal;
  font-size: 35px;
}

.closeE {
  position: relative; /* Relativo al contenedor del popup */
  top: 10px;          /* A 10px del borde superior */
  left: 150px;
  font-size: 24px;
  cursor: pointer;
  color: #000;
  background: none;   /* Sin fondo */
  border: none;
}

/* POP-UP ENVIAR ENDS */

/* Responsive */
@media (max-width: 768px) {
  .hero h1 {
      font-size: 3rem !important;
      line-height: 3rem;
  }
  .hero p {
      font-size: 1.5rem;
  }
  #countdown .countdown {
    font-size: 60px;
  }
  #countdown .countdown small {
    font-size: 16px;
  }
  .col {
      min-width: 100%;
  }
  .parents-container {
    flex-direction: column;
    align-items: center;
}

.parent-col {
    max-width: 100%;
    margin-bottom: 20px;
}
.couple-container {
  flex-direction: column;
}

.couple img {
  width: 250px;
  height: 250px;
}

.bible-verse p {
  font-size: 1.2rem;
}

.bible-verse span {
  font-size: 1rem;
}
.gift-table {
  padding: 60px 20px;
}

.gift-content p {
  font-size: 1rem;
}
.dress-code {
  padding: 60px 60px;
}

.dress-details p {
  font-size: 1.1rem;
}
.color-circle {
  width: 40px;     /* Tamaño más pequeño en pantallas chicas */
  height: 40px;
}

.no-colors-msg {
  font-size: 1rem;  /* Mensaje más pequeño en pantallas pequeñas */
}
}

@media screen and (max-width: 592px) {
  #countdown .countdown {
    font-size: 40px;
  }
  #countdown .countdown span {
    margin: 0 10px;
  }
}

/* Estilos del pre-loader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;  /* Fondo blanco por defecto */
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Fondo para dispositivos móviles */
@media (max-width: 768px) {
  #preloader {
    background-image: url('img/inicio.webp');  /* Imagen para dispositivos móviles */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
}

/* Fondo para dispositivos más grandes */
@media (min-width: 769px) {
  #preloader {
    background-image: url('img/inicioM.webp');  /* Imagen para pantallas grandes */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
}

#preloader h1 {
  color: #fff;
}

/* Contenido del loader */
.loader-content {
  text-align: -webkit-center;
}

/* Texto de carga */
.loading-text {
  font-family: minion;
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 10px;
}

/* Texto de carga */
.loading-text1 {
  font-family: minion;
  font-size: 35px;
  color: #ffffff;
  margin-bottom: 10px;
}

/* Barra de carga */
.loading-bar {
  width: 200px;
    height: 10px;
    background-color: #f0f0f0;
    border-radius: 4px;
    border: solid 2px #000;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.progress {
  width: 0%;
  height: 100%;
  background-color: #C15D2B;
  animation: progressAnimation 2s infinite;
}

/* Animación de la barra de progreso */
@keyframes progressAnimation {
  0% {
      width: 0%;
  }
  50% {
      width: 70%;
  }
  100% {
      width: 100%;
  }
}

.imagen-ancha {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
  overflow: hidden; /* Asegura que el contenido no se salga si la imagen es más grande */
}

.imagen-ancha img {
  width: 100%;
  height: auto; /* Mantiene las proporciones originales */
  object-fit: cover; /* Recorta la imagen para ajustarse si es necesario */
  display: block; /* Elimina espacios adicionales en imágenes inline */
}

/* Frase fija en la parte inferior */
.imagen-ancha .nota {
  position: absolute;
  bottom: 0;                 /* Fija la frase en la parte inferior */
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 1.5rem;
  text-align: center;
  padding: 20px 30px;
  width: 100%;               /* Abarca todo el ancho */
  z-index: 2;                 /* Por encima de la imagen */
}

/* Efecto responsivo */
@media (max-width: 768px) {
  .imagen-ancha .nota {
      font-size: 16px;     /* Texto más pequeño en móviles */
      padding: 15px;
      width: 50%;
      line-height: 16px;
  }
}