/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600;700&family=Playfair+Display:wght@400;700&display=swap');

/* Reset y estilos generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Cormorant Garamond', serif;
    color: #333;
    line-height: 1.6;
    background-color: #fff;
}



/* PANTALLA DE CARGA */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
  }
  
  /* Animación de la libélula */
  #container {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 0;
    padding-bottom: 62.5%;
  }
  
  #animation-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #libelula {
    position: absolute;
    transform-origin: center;
    width: 37.5%;
    height: 60%;
    z-index: 10;
  }
  
  #trail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  
  #logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  }
  
  #logo {
    max-width: 90%;
    max-height: 90%;
    margin-top: 0%;
  }
  
  /* Desvanecer la pantalla de carga */
  .hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
  }
  
  @media (max-width: 768px) {
    #container {
        padding-bottom: 100%; /* Aumenta ligeramente la altura en móviles */
    }
  
    #logo-container {
    width: 250px; /* 300px de 800px */
    height: 250px;  /* 300px de 500px */
  }
  }
  /* Media queries para ajustar en pantallas muy pequeñas */
  @media (max-width: 480px) {
    #container {
        padding-bottom: 100%; /* Aumenta ligeramente la altura en móviles */
    }
  
    #logo-container {
    width: 250px; /* 300px de 800px */
    height: 250px;  /* 300px de 500px */
  
  }
  

  }
  
  
  
  /* ---------------------- */
  /* Contenido de Carta */
  /* ---------------------- */
  
  html, body {
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
  }
  
  
  .sobre-container {
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000000;
    z-index: 9999;
  }
  
  .sobre {
    position: relative;
    width: 100VW; /* Asegúrate de mantener el tamaño original */
    height: 100VH;
    perspective: 1000px;
    transition: transform 1s ease-in-out;
  }
  
  .capa {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 1s ease-in-out;
    backface-visibility: hidden;
    
  }
  
  .capa-top {
    background: url('img/top0.webp') no-repeat center/cover;
    transform-origin: top center;
    z-index: 2;
  }
  
  .capa-medio {
    background: url('img/Middle\ .webp') no-repeat center/cover;
    z-index: 0;
  }
  
  .capa-bottom {
    background: url('img/bottom.webp') no-repeat center/cover;
    z-index: 1;
    
  }
  
  .sello {
    position: absolute;
    width: 800px;
    height: 800px;
    background: url('img/sello1-01.webp') no-repeat center/contain;
    border-radius: 50%;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 3;
    transition: transform 1s ease-in-out, opacity 0.5s ease-in-out;
  }
  
  .abierto .capa-top {
    transform: rotateX(180deg);
  }
  
  .abierto .sello {
    transform: translate(-50%, -300%) rotateX(180deg);
    opacity: 0;
  }
  
  #contenidoPrincipal {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
 @media (max-width: 768px) {

  .capa-top {
    transform-origin: top center;
    background-size: 300%;
    background-position:top;
    background-attachment: scroll;
    z-index: 2;
  }
  
  
  .capa-bottom {
    transform-origin: top center;
    background-size: 300%;
    background-position:bottom;
    background-attachment: scroll;
    z-index: 1;
    
  }

  
 
  
}


@media (max-width: 560px) {

  .capa-top {
    background-size: 350%;
    background-position:50% 0%;
    background-attachment: scroll;
    z-index: 2;
    height: 150%;
  }
  
  
  .capa-bottom {
    transform-origin: top center;
    background-size: 300%;
    background-position:bottom;
    background-attachment: scroll;
    z-index: 1;
    
  }
  .sello {
    position: absolute;
    width: 400px;
    height: 400px;
    top: 53%;
  
}
}

/* ---------------------- */
/* Contenido Nav */
/* ---------------------- */

  .navbar {
    display: flex;
    justify-content: space-between; /* Separa los elementos */
    align-items: center;
    background-color: #1a1f1e;
    padding: 10px 20px;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
  }
  
  .navbar a {
    margin:  20px; /* Espacio entre los botones */
    padding: 0px 20px; /* Agrega más espacio dentro de los botones */
    font-size: 16px; /* Tamaño de la fuente */
    text-decoration: none;
    transition: background-color 0.3s ease;
  }
  
  .nav-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Hace que la lista ocupe el espacio restante */
    justify-content:center ; /* Alinea los botones a la derecha */
    
  }
  
  .nav-list li {
    margin: 0 15px;
    font-family: 'Avenir';
  }
  
  .nav-list a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    transition: color 0.3s ease;
  }
  
  .nav-list a:hover {
    color: #0f0b01;
  }
  
  .logo {
    font-family: 'Astralaga', cursive;
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    flex-grow: 1; /* Permite que el logo se quede en el centro */
    color:#fff
  }
  
  /* ---------------------- */
  /* Menú Hamburguesa */
  /* ---------------------- */
  
  .menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    z-index: 1500;
    position: absolute;
    left: 20px; /* Mantiene el menú en la izquierda */
    top: 15px;
  }
  .bar {
    background-color: #333;
    height: 2px;
    width: 20px;
    margin: 3px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .nav-list.mobile-menu {
    display: none !important;
  }
  
  @media (max-width: 1090px) {
    .nav-list {
      position: fixed;
      top: 0;
      left: -100%; /* ✅ Desliza desde la izquierda */
      width: 80%;
      height: 100vh;
      background: rgba(255, 255, 255, 0.95);
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-shadow: 10px 0 20px rgba(0, 0, 0, 0.1);
      transition: left 0.4s ease-in-out;
      display: flex;
    
    }
  
    .nav-list.mobile-menu {
      display: flex !important;
    }
    
    .logo {
        font-size: 25px;
    }
    
    .nav-list.active {
      left: 0; /* ✅ Se muestra el menú */
    }
    
    .nav-list li {
      margin: 20px 0;
    }
    
    .nav-list a {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      transition: color 0.3s ease;
    }
    
    .nav-list a:hover {
      color: #1a1f1e;
    }
  
    .menu-toggle {
        display: flex;
    }
  }
  

/* Hero Section */
.hero {
  height: 100vh;
  background-image: url('img/novios1.webp');
  background-size: cover;
  background-position: bottom right; /* Posiciona la imagen para que los novios estén en la parte inferior derecha */
  display: flex;
  align-items: center; /* Cambiado a flex-start para que el texto esté en la parte superior */
  justify-content: flex-start; /* Centrado horizontalmente */
  position: relative;
  color: #e9e0c9;
  padding: 8% 5%;
}

.hero-content {
  text-align: center;
  z-index: 2;
  margin-top: 5vh; /* Espacio desde arriba */
}

.date {
  font-family: 'Playfair Display', serif;
  font-size: clamp(4rem, 10vw, 10rem); /* Tamaño responsivo: mínimo 4rem, preferido 10vw, máximo 10rem */
  font-weight: 700;
  margin-bottom: -10px;
  color: #e3dfba;
  line-height: 1;
}

.save-date {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 5vw, 5rem); /* Tamaño responsivo similar */
  font-weight: 400;
  font-style: italic;
  color: #e3dfba;
}

/* Media queries para diferentes tamaños de pantalla */
@media (max-width: 768px) {
  .hero {
      background-position: 75% center; /* Centra la imagen en pantallas pequeñas */
      align-items: center; /* Centra el contenido verticalmente */
      justify-content: center;
  }
  
  .hero-content {
      margin-top: -80%; /* Sin margen adicional en pantallas pequeñas */
      padding: 20px;

  }
  
  .date {
      margin-bottom: 0;
  }
}

/* Para pantallas muy pequeñas */
@media (max-width: 480px) {
  .hero {
      padding: 5% 3%;
  }
}

/*------------*/
/* Día Especial */
.dia-especial {
  padding: 50px 0 80px 0;
  background-color: #fff;
  position: relative; /* Para posicionar la línea */
}

/* Crear la línea decorativa */
.dia-especial:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 18%;
  width: 2px;
  height: 100%; /* Grosor de la línea */
  background-color: #d3d3d3; /* Color gris claro para la línea */
  z-index: 0;
}

/* Crear el espacio en blanco para el título */
.text-content h2 {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  color: #333;
  position: relative;
  display: inline-block;
  text-align: left;
  padding-left: calc(-10% + 50px);
  background-color: #fff;
  margin-bottom: 30px;
  z-index: 2; /* Por encima de la línea */
}

.dia-especial .container {
  position: relative;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.content-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
}

.text-content {
  flex: 1;
  text-align: left;
}

.text-content p {
  text-align: left;
  font-size: 1.5rem;
  margin-bottom: 20px;
  line-height: 1.8;
  color: #666;
  padding-left: 50px;
  position: relative;
}

/* Estilo para el primer y segundo párrafo */
.text-content p:first-of-type,
.text-content p:nth-of-type(2) {
  background-color: #fff; /* Fondo blanco para ocultar la línea */
  display: inline-block; /* Para que el fondo solo ocupe el ancho del texto */
  padding-right: 10px; /* Espacio a la derecha */
  z-index: 2; /* Por encima de la línea, igual que el título */
  margin-bottom: 10px; /* Espacio inferior ligeramente menor */
}

.photos {
  flex: 1;
  display: flex;
  justify-content: center;
  z-index: 3;
}

.photo-stack {
  position: relative;
  width: 300px;
}

.photo {
  width: 100%;
  height: auto;
  border: 8px solid #fff;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  transform: rotate(3deg);
}

.photo:nth-child(2) {
  transform: rotate(-2deg);
}

.photo:nth-child(3) {
  transform: rotate(1deg);
}

.btn-calendar {
  background-color: #b2c793;
  border: none;
  color: #0c1c17;
  padding: 10px 25px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 20px;
  margin-left: 60px;
  border-radius: 3px;
}

.btn-calendar:hover {
  background-color: #0c1c17;
  color: #e9e0c9;
}

/* Estilos para el modal */
.calendar-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1001;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 30px;
  border-radius: 5px;
  max-width: 400px;
  width: 90%;
  text-align: center;
}

.modal-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: #333;
}

.calendar-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.calendar-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  transition: all 0.3s;
  text-decoration: none;
  display: inline-block;
}

.google-btn {
  background-color: #4285F4;
  color: white;
}

.apple-btn {
  background-color: #000;
  color: white;
}

.ics-btn {
  background-color: #b2c793;
  color: #0c1c17;
}

.close-modal {
  margin-top: 20px;
  background-color: #eee;
  color: #333;
}

/* Media Queries para responsividad */
@media (max-width: 992px) {
  .content-wrapper {
      gap: 30px;
  }
  
  .text-content h2 {
      font-size: 2.5rem;
  }
  
  .text-content p {
      font-size: 1.3rem;
  }
  
  .photo-stack {
      width: 250px;
  }
}

@media (max-width: 768px) {
  .content-wrapper {
      flex-direction: column;
      gap: 40px;
  }
  
  .dia-especial:before {
      left: 25px; /* Ajustamos la línea vertical para dispositivos móviles */
  }
  
  .text-content h2 {
      font-size: 2.2rem;
      padding-left: 40px;
  }
  
  .text-content p {
      font-size: 1.2rem;
      padding-left: 40px;
  }
  
  .text-content p:first-of-type,
  .text-content p:nth-of-type(2) {
      padding-right: 5px; /* Ajuste del espacio para móviles */
  }
  
  .btn-calendar {
      margin-left: 40px;
  }
  
  .photos {
      order: -1; /* Las fotos aparecen primero en dispositivos móviles */
  }
  
  .photo-stack {
      width: 90%;
      max-width: 300px;
      margin: 0 auto;
  }
  
  .photo {
      margin-bottom: 15px;
  }
}

@media (max-width: 480px) {
  .dia-especial {
      padding: 40px 0 60px 0;
  }
  
  .dia-especial:before {
      left: 15px;
  }
  
  .text-content h2 {
      font-size: 1.8rem;
      padding-left: 30px;
  }
  
  .text-content p {
      font-size: 1.1rem;
      line-height: 1.6;
      padding-left: 30px;
  }
  
  .text-content p:first-of-type,
  .text-content p:nth-of-type(2) {
      padding-right: 4px; /* Ajuste del espacio para móviles más pequeños */
  }
  
  .btn-calendar {
      margin-left: 30px;
      font-size: 1rem;
      padding: 8px 20px;
  }
  
  .modal-content {
      padding: 20px;
  }
  
  .modal-content h3 {
      font-size: 1.3rem;
  }
}

/* ---------------------- */
/* Papel Cortado */
/* ---------------------- */

.paper-effect-location {
  width: 100%;
  position:relative;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: transparent !important;
  display: flex;
  justify-content: center; /* Centra la imagen */
}


.paper-effect-location img {
  position: absolute;
  top: -140px; /* Ajusta según necesidad */
  width: 99.4vw; /* Se expande más allá de la pantalla sin causar overflow */
  max-width: unset; /* Evita que el max-width limite el ajuste */
  height: auto;
  display: block;
  
}

/* ---------------------- */
/* Ajustes Responsivos */
/* ---------------------- */
@media (max-width: 1260px) {
  .paper-effect-location img {
    top: -90px;
    width: 100%;
  }
}
@media (max-width: 760px) {
  .paper-effect-location img {
    top: -50px;
    width: 100%;
  }
}
@media (max-width: 480px) {
  .paper-effect-location img {
    top: -40px;
    width: 100%;
  }
}

  


/* Locación */
.locacion {
  text-align: center;
  background-image: url('img/Recurso\ 3.webp');
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  padding: 200px 20px;
  position: relative;
  z-index: 1;
}

.locacion .container{
  width: 100%;
  max-width: 100%; /* Quitamos el límite de ancho máximo */
  margin-left: 5%;
  padding: 0 0px; /* Movemos el padding aquí solo para el contenido */
  box-sizing: border-box;
}

.locacion h2 {
  font-family: 'Playfair Display', serif;
  font-size: 6rem;
  margin-bottom: 40px;
  color: #333;
  text-align: left;
  margin-left: 15%;
}

.lugares {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Contenedor para ceremonia y recepción */
.lugar-item-ceremonia {
  flex: 0 0 auto;
  width: 100%;
  text-align: left;
  margin-bottom: 30px;
  margin-left: 0%;
}

.lugar-item-reception{
  flex: 0 0 auto;
  width: 100%;
  text-align: right;
  margin-bottom: 30px;
  margin-left: 30%;
}

.lugar-item-reception h3, .lugar-item-ceremonia h3 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}

.lugar-item-ceremonia p, .lugar-item-reception p {  
  font-size: 1.5rem;
  margin-bottom: 20px;
  line-height: 1.3;
  color: #666;
}

.btn-ubicacion {
  background-color: transparent;
  border: 1px solid #333;
  color: #333;
  padding: 8px 40px;
  font-family: 'Cormorant Garamond', serif;
  border-radius: 10px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-ubicacion:hover {
  background-color: #333;
  color: #fff;
}

.imagen-templo {
  flex: 0 0 auto;
  width: 60%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 0; /* Sin padding para que esté pegado al borde */
}

.imagen-templo img.templo {
  max-width: 110%;
  height: auto;
  object-fit: contain;
}

/* Responsividad mejorada */
@media (max-width: 1024px) {
  .locacion h2 {
    font-size: 5rem;
    margin-left: 10%;
  }
  
  .imagen-templo img.templo {
    max-width: 100%;
  }
  
  .lugar-item-reception {
    margin-left: 20%;
  }
}

/* Para tablets */
@media (max-width: 900px) {
  .locacion {
    padding: 100px 20px;
  }
  
  .locacion h2 {
    font-size: 4rem;
    margin-left: 5%;
  }
  
  .lugar-item-ceremonia p, .lugar-item-reception p {
    font-size: 1.3rem;
  }
}

/* Para dispositivos móviles */
@media (max-width: 768px) {
  .locacion {
    padding: 80px 15px;
  }
  
  .locacion .container {
    margin-left: 0;
  }
  
  .locacion h2 {
    font-size: 4rem;
    text-align: center;
    margin-left: 0;
    margin-bottom: 30px;
  }
  
  .lugares {
    flex-direction: column;
    align-items: center;
  }
  
  .lugar-item-ceremonia, 
  .lugar-item-reception {
    width: 100%;
    text-align: center;
    margin-left: 0;
    padding: 0 15px;
    order: 1; /* Asegura que estos elementos aparecen primero */
  }
  
  .imagen-templo {
    flex: 0 0 100%;
    width: 150%;
    justify-content: center;
    margin: 20px 0;
    padding-left: 20%;
    order: 2; /* Mueve la imagen del templo al final */
  }
  
  .imagen-templo img.templo {
    max-width: 90%;
  }
  
  .lugar-item-ceremonia h3, .lugar-item-reception h3 {
    font-size: 1.6rem;
  }
  
  .lugar-item-ceremonia p, .lugar-item-reception p {
    font-size: 1.2rem;
  }
  
  .btn-ubicacion {
    padding: 8px 30px;
    font-size: 1.1rem;
  }
}

/* Para dispositivos muy pequeños */
@media (max-width: 480px) {
  .locacion {
    padding: 60px 10px;
  }
  
  .locacion h2 {
    font-size: 2.8rem;
  }
  
  .lugar-item-ceremonia h3, .lugar-item-reception h3 {
    font-size: 1.4rem;
  }
  
  .lugar-item-ceremonia p, .lugar-item-reception p {
    font-size: 1.1rem;
  }
  
  .btn-ubicacion {
    padding: 6px 25px;
    font-size: 1rem;
  }
}

/* ---------------------- */
/* Papel locacion */
/* ---------------------- */
.paper-effect-location2 {
  width: 100%;
  position:relative;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: transparent !important;
  display: flex;
  justify-content: center; /* Centra la imagen */
}


.paper-effect-location2 img {
  position: absolute;
  top: -20px; /* Ajusta según necesidad */
  width: 99.2vw; /* Se expande más allá de la pantalla sin causar overflow */
  max-width: unset; /* Evita que el max-width limite el ajuste */
  height: auto;
  display: block;
}

/* ---------------------- */
/* Ajustes Responsivos */
/* ---------------------- */
@media (max-width: 1260px) {
  .paper-effect-location2 img {
    top: -10px;
    width: 100%;
  }
}
@media (max-width: 760px) {
  .paper-effect-location2 img {
    top: -30px;
    width: 100%;
  }
}
@media (max-width: 480px) {
  .paper-effect-location2 img {
    top: -20px;
    width: 100%;
  }
}



/* Countdown */
.countdown {
  padding: 120px 0;
  background-image: url('img/novios6.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #fff;
  position: relative;
}

.countdown:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.contador {
  display: flex;
  justify-content: center;
  gap: 150px;
  margin-top: 35%;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

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

.tiempo-item span:first-child {
  font-family: 'Playfair Display', serif;
  font-size: 7rem;
  font-weight: 700;
  display: block;
}

.tiempo-label {
  font-size: 2.5rem;
  letter-spacing: 2px;
}

.falta-poco {
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  text-align: center;
  font-style: italic;
  position: relative;
  z-index: 2;
}

/* Responsive para tablets */
@media (max-width: 1024px) {
  .contador {
      gap: 80px;
      margin-top: 25%;
  }
  
  .tiempo-item span:first-child {
      font-size: 5.5rem;
  }
  
  .tiempo-label {
      font-size: 2rem;
  }
  
  .falta-poco {
      font-size: 3.5rem;
  }
}

/* Responsive para dispositivos móviles medianos */
@media (max-width: 768px) {
  .countdown {
      padding: 80px 0;
  }
  
  .contador {
      flex-wrap: wrap;
      gap: 50px;
      margin-top: 20%;
      justify-content: space-around;
  }
  
  .tiempo-item {
      flex: 0 0 40%;
  }
  
  .tiempo-item span:first-child {
      font-size: 4rem;
  }
  
  .tiempo-label {
      font-size: 1.8rem;
  }
  
  .falta-poco {
      font-size: 2.5rem;
      padding: 0 15px;
  }
}

/* Responsive para dispositivos móviles pequeños */
@media (max-width: 480px) {
  .countdown {
      padding: 60px 0;
  }
  
  .contador {
      gap: 30px;
      margin-top: 15%;
      margin-bottom: 30px;
  }
  
  .tiempo-item {
      /* Mostrar en grid de 2x2 para dispositivos muy pequeños */
      flex: 0 0 45%;
  }
  
  .tiempo-item span:first-child {
      font-size: 3.2rem;
  }
  
  .tiempo-label {
      font-size: 1.4rem;
      letter-spacing: 1px;
  }
  
  .falta-poco {
      font-size: 2.2rem;
      padding: 0 0px;
      margin-bottom: 0;
      line-height: 1.5;
      max-width: 100%;
  }
}

/* Para dispositivos muy pequeños */
@media (max-width: 360px) {
  .countdown {
      padding: 40px 0;
  }
  
  .contador {
      gap: 20px;
      margin-top: 10%;
  }
  
  .tiempo-item {
      flex: 0 0 45%;
  }
  
  .tiempo-item span:first-child {
      font-size: 2.8rem;
  }
  
  .tiempo-label {
      font-size: 1.2rem;
  }
  
  .falta-poco {
      font-size: 2rem;
      line-height: 1.2;
      max-width: 95%;
      margin-left: auto;
      margin-right: auto;
  }
}

/* ---------------------- */
/* Papel vestimenta */
/* ---------------------- */

.paper-effect-vestimenta {
  width: 100%;
  position:relative;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: transparent !important;
  display: flex;
  justify-content: center; /* Centra la imagen */
}


.paper-effect-vestimenta img {
  position: absolute;
  top: -140px; /* Ajusta según necesidad */
  width: 100vw; /* Se expande más allá de la pantalla sin causar overflow */
  max-width: unset; /* Evita que el max-width limite el ajuste */
  height: auto;
  display: block;
  
}

/* ---------------------- */
/* Ajustes Responsivos */
/* ---------------------- */
@media (max-width: 1260px) {
  .paper-effect-vestimenta img {
    top: -90px;
    width: 100%;
  }
}
@media (max-width: 760px) {
  .paper-effect-vestimenta img {
    top: -50px;
    width: 100%;
  }
}
@media (max-width: 480px) {
  .paper-effect-vestimenta img {
    top: -40px;
    width: 100%;
  }
}


/* Código de Vestimenta */
.codigo-vestimenta {
  padding: 120px 0px;
  background-image: url('img/Recurso\ 9.webp');
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  position: relative;
  overflow: auto;
  z-index: 0;
}

.codigo-vestimenta h2 {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.subtitulo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-style: italic;
  text-align: center;
  color: #a67c52;
  margin-bottom: 50px;
}

.anillos-container {
  position: relative;
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}

.anillos {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#anillos-svg {
  width: 200px;
  height: auto;
  transition: all 0.5s ease-in-out;
}

/* Colores para el código de vestimenta */
.colores-container {
  display: flex;
  justify-content: space-around;
  margin: 40px 0;
  position: relative;
}

.colores-seccion {
  flex: 1;
  max-width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
}

.colores-titulo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 600;
}

.colores-grupo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  width: 100%;
}

.color {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.color:hover {
  transform: scale(1.1);
}

.separador-vertical {
  width: 2px;
  background-color: rgba(166, 124, 82, 0.3);
  height: 180px;
  margin: 0 20px;
}

.descripcion-vestimenta {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 30px 0;
}

.descripcion-vestimenta p {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #666;
  margin-bottom: 15px;
}

/* Estilos para la animación de los anillos */
.anillo-izquierdo, .anillo-derecho {
  position: absolute;
  transition: all 1s ease-in-out;
}

.anillo-izquierdo {
  transform: translateX(0);
}

.anillo-derecho {
  transform: translateX(0);
}

.is-active .anillo-izquierdo {
  transform: translateX(-150px);
}

.is-active .anillo-derecho {
  transform: translateX(150px);
}

/* Media queries para responsividad */
@media (max-width: 1024px) {
  .colores-container {
    justify-content: space-between;
  }
  
  .colores-seccion {
    max-width: 48%;
  }
  
  .separador-vertical {
    margin: 0 10px;
  }
}

@media (max-width: 768px) {
  .codigo-vestimenta {
    padding: 80px 0;
  }
  
  .codigo-vestimenta h2 {
    font-size: 2.5rem;
  }
  
  .subtitulo {
    font-size: 1.7rem;
    margin-bottom: 30px;
  }
  
  .colores-container {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  
  .colores-seccion {
    max-width: 80%;
  }
  
  .separador-vertical {
    width: 80%;
    height: 2px;
    margin: 10px 0;
  }
  
  .is-active .anillo-izquierdo {
    transform: translateY(-100px);
  }
  
  .is-active .anillo-derecho {
    transform: translateY(100px);
  }
}

@media (max-width: 480px) {
  .codigo-vestimenta {
    padding: 60px 0;
  }
  
  .codigo-vestimenta h2 {
    font-size: 2rem;
  }
  
  .subtitulo {
    font-size: 1.4rem;
    margin-bottom: 25px;
  }
  
  .colores-titulo {
    font-size: 1.3rem;
  }
  
  .colores-seccion {
    max-width: 90%;
  }
  
  .color {
    width: 35px;
    height: 35px;
  }
  
  .descripcion-vestimenta p {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* ---------------------- */
/* Papel vestimenta */
/* ---------------------- */

.paper-effect-vestimenta2 {
  width: 100%;
  position:relative;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: transparent !important;
  display: flex;
  justify-content: center; /* Centra la imagen */
}


.paper-effect-vestimenta2 img {
  position: absolute;
  top: -80px; /* Ajusta según necesidad */
  width: 100vw; /* Se expande más allá de la pantalla sin causar overflow */
  max-width: unset; /* Evita que el max-width limite el ajuste */
  height: auto;
  display: block;
  
}

/* ---------------------- */
/* Ajustes Responsivos */
/* ---------------------- */
@media (max-width: 1260px) {
  .paper-effect-vestimenta2 img {
    top: -90px;
    width: 100%;
  }
}
@media (max-width: 760px) {
  .paper-effect-vestimenta2 img {
    top: -10px;
    width: 100%;
  }
}
@media (max-width: 480px) {
  .paper-effect-vestimenta2 img {
    top: -40px;
    width: 100%;
  }
}

/* Sección Cronograma */
.cronograma {
   padding: 180px 0 200px 0;
  background-image: url('img/Mesa\ de\ trabajo\ 1.png');
  background-size:cover;
  background-position: center;
  background-attachment: scroll;
  position: relative;
  overflow: hidden;
}


.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.cronograma h2 {
  font-family: 'Playfair Display', serif;
  font-size: 4rem;
  text-align: center;
  margin-bottom: 20px;
  color: #e3dfba; /* Color dorado similar al de la imagen */
}

.subtitulo-cronograma {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  text-align: center;
  color: #e3dfba;
  margin-bottom: 60px;
}

.linea-tiempo {
  position: relative;
  max-width: 1000px; /* Aumentado para dar más espacio */
  margin: 0 auto;
  padding: 40px 0;
}

/* Línea central continua */
.linea-tiempo:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background-color: #e3dfba; /* Línea continua */
}

/* Círculos en los extremos de la línea */
.circulo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e3dfba;
  z-index: 2;
}

.circulo-superior {
  top: 0;
}

.circulo-inferior {
  bottom: 0;
}

.momento {
  display: flex;
  justify-content: space-between; /* Cambiado a space-between para separar más */
  margin-bottom: 150px;
  position: relative;
  height: 100px; /* Altura fija para cada momento */
}

/* Lados izquierdo y derecho */
.lado-izquierdo, .lado-derecho {
  width: 40%; /* Reducido para que queden más hacia las orillas */
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}

.lado-izquierdo {
  justify-content: flex-end;
  padding-right: 20px;
  text-align: right;
  margin-right: 30%; /* Empuja más hacia la izquierda */
}

.lado-derecho {
  justify-content: flex-start;
  padding-left: 0px;
  text-align: left;
  margin-left: 5%; /* Empuja más hacia la derecha */
}

/* Líneas horizontales punteadas individuales */
.linea-central {
  position: absolute;
  height: 1px;
  background-image: linear-gradient(to right, #e3dfba 50%, transparent 50%);
  background-size: 10px 1px;
  background-repeat: repeat-x;
  z-index: 1;
}

/* Líneas personalizadas para cada momento */
.momento:nth-child(2) .linea-central {
  width: 33%;
  left: 15.5%;
  top: 58%;
}

.momento:nth-child(3) .linea-central {
  width: 35%;
  left: 51%;
  top: 58%;
}

.momento:nth-child(4) .linea-central {
  width: 33%;
  left: 16%;
  top: 58%;
}

.momento:nth-child(5) .linea-central {
  width: 35%;
  left: 51%;
  top: 58%;
}

/* Componentes dentro de cada lado */
.tiempo {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  color: #e3dfba;
  margin: 0 5px;
}

.contenido {
  margin: 0 15px;
}

.contenido h3 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 10px;
  color: #e3dfba;
  text-align: center;
}

.contenido p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  color: #e3dfba;
  text-align: center;
}

.icono {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 -50px;
}

.icono img {
  width: 150px;
  height: auto;
  filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(0deg);
  opacity: 0.85;
}

.estrella {
  position: absolute;
  width: 15%;
  height: auto;
  z-index: 1;
  opacity: 0.85;
}

.estrella1 {
  top: 20%;
  right: 10%;
}

.estrella2 {
  bottom: 10%;
  left: 10%;
}

@media (max-width: 1073px) {
  /* Líneas más cortas para móvil */
  .momento:nth-child(2) .linea-central {
    top: 55%;
  }

  .momento:nth-child(3) .linea-central {
    top: 75%;
  }

  .momento:nth-child(4) .linea-central {
    top: 55%;
  }

  .momento:nth-child(5) .linea-central {
    top: 75%;
  }
}

/* Responsive */
@media (max-width: 992px) {
  .linea-tiempo {
    max-width: 90%;
  }
  
  .lado-izquierdo, .lado-derecho {
    width: 42%;
  }
  
  .lado-izquierdo {
    margin-right: 3%;
  }
  
  .lado-derecho {
    margin-left: 3%;
  }
}

@media (max-width: 768px) {
  .cronograma h2 {
    font-size: 3rem;
    
  }

  .tiempo {
    font-size: 1.2rem;
  }
  
  .contenido h3 {
    font-size: 1.5rem;
  }
  
  .contenido p {
    font-size: 1rem;
  }
  
  /* Ajustamos las líneas para tabletas */
  .momento:nth-child(2) .linea-central,
  .momento:nth-child(3) .linea-central,
  .momento:nth-child(4) .linea-central,
  .momento:nth-child(5) .linea-central {
    width: 16%;
  }
  
  /* Líneas personalizadas para cada momento */
.momento:nth-child(2) .linea-central {
  width: 40%;
  left: 10%;
  top: 58%;
}

.momento:nth-child(3) .linea-central {
  width: 30%;
  left: 51%;
  top: 75%;
}

.momento:nth-child(4) .linea-central {
  width: 30%;
  left: 20%;
  top: 75%;
}

.momento:nth-child(5) .linea-central {
  width: 30%;
  left: 51%;
  top: 75%;
}

  .icono {
    margin: 0 0px;
  }

  .icono img {
    width: 100px;
    height: auto;
   }
}
@media (max-width: 480px) {
  .cronograma {
    padding: 80px 0;
  }

  .cronograma h2 {
    font-size: 2.5rem;
  }
  
  .subtitulo-cronograma {
    font-size: 1.2rem;
    margin-bottom: 30px;
  }

  .linea-tiempo {
    max-width: 98%;
    padding: 20px 0;
  }
  
  .momento {
    margin-bottom: 60px; /* Más espacio vertical entre elementos */
    height: 80px; /* Más altura para dar más espacio */
  }

  /* Mantener el diseño alternado pero más compacto */
  .lado-izquierdo, .lado-derecho {
    width: 47%;
  }

  .lado-izquierdo {
    margin-right: 1%;
    padding-right: 5px;
  }
  
  .lado-derecho {
    margin-left: 1%;
    padding-left: 5px;
  }

  .tiempo {
    font-size: 1rem;
    margin: 0 2px;
  }
  
  .contenido {
    margin: 0 5px;
  }

  .contenido h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
  }
  
  .contenido p {
    font-size: 0.9rem;
  }
  
  .icono {
    margin: 0 -5px; /* Separar más las imágenes del centro en móvil */
  }

  .icono img {
    width: 75px;
    height: auto;
  }

  /* Círculos más pequeños para móvil */
  .circulo {
    width: 15px;
    height: 15px;
  }

  /* Líneas más cortas para móvil */
  .momento:nth-child(2) .linea-central {
    width: 30%;
    left: 20%;
    top: 55%;
  }

  .momento:nth-child(3) .linea-central {
    width: 30%;
    left: 53%;
    top: 75%;
  }

  .momento:nth-child(4) .linea-central {
    width: 30%;
    left: 20%;
    top: 75%;
  }

  .momento:nth-child(5) .linea-central {
    width: 30%;
    left: 53%;
    top: 75%;
  }

  /* Estrellas más pequeñas */
  .estrella {
    width: 25%;
  }
}

/* ---------------------- */
/* Papel vestimenta */
/* ---------------------- */

.paper-effect-regalos {
  width: 100%;
  position:relative;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: transparent !important;
  display: flex;
  justify-content: center; /* Centra la imagen */
}


.paper-effect-regalos img {
  position: absolute;
  top: -150px; /* Ajusta según necesidad */
  width: 100vw; /* Se expande más allá de la pantalla sin causar overflow */
  max-width: unset; /* Evita que el max-width limite el ajuste */
  height: auto;
  display: block;
  
}

/* ---------------------- */
/* Ajustes Responsivos */
/* ---------------------- */
@media (max-width: 1260px) {
  .paper-effect-regalos img {
    top: -90px;
    width: 100%;
  }
}
@media (max-width: 760px) {
  .paper-effect-regalos img {
    top: -10px;
    width: 100%;
  }
}
@media (max-width: 480px) {
  .paper-effect-regalos img {
    top: -40px;
    width: 100%;
  }
}

/* ---------------------- */
/* Mesa de Regalos */
/* ---------------------- */
/* Mesa de Regalos */
.gifts-section {
  text-align: center;
  background-image: url('img/Recurso\ 5.webp');
  background-size: cover; /* Mantiene el tamaño original de la imagen */
  background-position: center;
  background-attachment: scroll; /* Mantiene tu configuración original */
  overflow:  auto;
  padding: 200px 20px;
  position: relative;
  z-index: 0;
}


/* Estilo del título */
.gifts-section h2 {
  font-size: 4rem;
  color: #000; /* Dorado elegante */
  font-family: 'Playfair Display', serif;
  text-align: center;
  padding: 20px;
}

/* Párrafo de indicación */
.gifts-section p {
  font-size: 1.5rem;
  color: #000;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-bottom: 20px;
  max-width: 1500px;
  text-align: center;
  margin: 50px auto 80px auto;
  padding: 0 20px; /* Reduce el espacio lateral */
  font-family: "Avenir", sans-serif;
}

/* Contenedor de enlaces */
.gift-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
  flex-wrap: wrap;
}


/* Imágenes de los logos */
.gift-link img {
  width: 400px; /* Tamaño ajustable */
  height: auto;
  transition: transform 0.3s ease, opacity 0.3s ease;
  filter: brightness(0) invert(0) sepia(0) saturate(0) hue-rotate(0deg);
}


/* Efecto hover */
.gift-link img:hover {
  transform: scale(1.1);
  opacity: .8;
}

/* Responsividad */
@media (max-width: 768px) {
  .gifts-section h2 {
    font-size: 3rem;
    padding: 0px;
  }
  
  
  .gifts-section p {
    font-size: 1.2rem;
  }
  .gift-links {
    gap: 40px;
  }

  .gift-link img {
    width: 300px; /* Tamaño ajustable */
    height: auto;
  }
}

@media (max-width: 520px){
  .gifts-section h2 {
    font-size: 2.5rem;
    padding: 0px;
  }
  .gifts-section p {
    font-size: 1rem;
  }
 
}

/* Estilos para los detalles de BBVA */
.bbva-details {
  display: none;
  opacity: 0;
  visibility: hidden;
  width: 90%;
  max-width: 600px;
  margin: 20px auto;
  padding: 30px;
  background-color: #f9f5f0;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.bbva-details.visible {
  display: block;
  opacity: 1;
  visibility: visible;
}

.bbva-details-content h3 {
  color: #000000;
  margin-bottom: 20px;
  font-size: 1.8rem;
}

.modal-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.modal-info p {
  margin: 5px 0;
  color: #000000;
}

.copy-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 15px 0;
  width: 100%;
}

#account-number {
  font-size: 1.5rem;
  font-weight: bold;
  color: #000000;
  margin-bottom: 10px;
}

#copy-button {
  background-color: #000000;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 1rem;
  min-width: 120px;
}

#copy-button:hover {
  background-color: #b6b6b6;
}

#copy-message {
  display: none;
  color: green;
  margin-top: 10px;
  font-size: 0.9rem;
}

/* ---------------------- */
/* Papel vestimenta */
/* ---------------------- */

.paper-effect-regalos2 {
  width: 100%;
  position:relative;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: transparent !important;
  display: flex;
  justify-content: center; /* Centra la imagen */
}


.paper-effect-regalos2 img {
  position: absolute;
  top: -80px; /* Ajusta según necesidad */
  width: 100vw; /* Se expande más allá de la pantalla sin causar overflow */
  max-width: unset; /* Evita que el max-width limite el ajuste */
  height: auto;
  display: block;
  
}

/* ---------------------- */
/* Ajustes Responsivos */
/* ---------------------- */
@media (max-width: 1260px) {
  .paper-effect-regalos2 img {
    top: -90px;
    width: 100%;
  }
}
@media (max-width: 760px) {
  .paper-effect-regalos2 img {
    top: -10px;
    width: 100%;
  }
}
@media (max-width: 480px) {
  .paper-effect-regalos2 img {
    top: -40px;
    width: 100%;
  }
}


/* Efecto para los anillos separándose */
.anillo-izquierdo, .anillo-derecho {
  position: absolute;
  width: 100px;
  height: auto;
  transition: all 0.8s ease-in-out;
}

.anillo-izquierdo {
  transform: translateX(0);
}

.anillo-derecho {
  transform: translateX(0);
}

.anillos-separados .anillo-izquierdo {
  transform: translateX(-100px) translateY(-50px);
}

.anillos-separados .anillo-derecho {
  transform: translateX(100px) translateY(-50px);
}

/* ---------------------- */
/* confirmacion */
/* ---------------------- */
.confirmacion-section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120vh;
  background-image: url('img/Mesa\ de\ trabajo\ 1.png');
  background-size: cover; /* Mantiene el tamaño original de la imagen */
  background-position: center;
  background-attachment: scroll; /* Mantiene tu configuración original */
  overflow:  auto;
  min-height:  700px;
}

.confirmation-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 60px; /* Espacio para el mensaje inferior */
}

/* Contenedor principal */


/* Cuadro principal más alargado */
.codigo-box {
  position: relative;
  width: 420px;
  height: 600px;
  background: white;
  left: -160px;
  padding: 2em;
  border-radius: 15px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  text-align: center;
  transition: transform 0.5s ease, opacity 0.5s ease;
  z-index: 2;
}


.codigo-box.hidden {
  opacity: 0;
  transform: translateY(20px);
}

.codigo-box.visible {
  opacity: 1;
  transform: translateY(0);
}

.codigo-box h2 {
  font-size: 1.5em;
  color: #333;
  margin-bottom: 3em;
  margin-top: 4em;
}

/* Input de código */
.input-codigo {
  width: 100%;
  padding: 0.8em;
  border: none;
  border-bottom: 2px solid black;
  font-size: 1em;
  outline: none;
  background: transparent;
  text-align: center;
  color: #333;
  margin-top: 1em;
}

/* Botón de verificación */
.btn-verificar {
  margin-top: 30px;
  width: 100%;
  padding: 1em;
  border: 2px solid #31332A;
  border-radius: 10px;
  background:#31332A;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.btn-verificar:hover {
  background: white;
  color: #31332A;
}

/* Cuadro secundario (fondo negro con imagen) */
.cuadro-secundario {
  position: absolute;
  max-width:800px;
  height: 500px;
  background: #31332A;
  background-size: cover;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items:end;
  justify-content:start;
  padding: 2em;
  z-index: 1;
}

/* Imagen de fondo */
.imagen-fondo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.cuadro-secundario h2 {
  font-family: "Astralaga", sans-serif;
  font-size: 2em;
  padding: 0;
  text-align: center; /* Centra el texto */
  max-width: 100%;
  line-height: 1.4; /* Ajusta el espacio entre líneas */
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra las palabras dentro del contenedor */
  margin-top: 4em;
  margin-bottom: 1em;
  max-width: 40%; /* Limita el ancho del texto dentro del cuadro */
  text-align: center;
}



/* Frase inspiradora */
.frase {
  font-family: "Avenir";
  font-size: .9em;
  color: #ccc;
  margin-left: auto;  /* Mueve la frase a la derecha */
  text-align: center;  /* Alinea el texto a la derecha */
  max-width: 39%; /* Limita el ancho del texto dentro del cuadro */

}

/* Nombre de la familia y mensaje */
.nombre-familia, .mensaje-personalizado {
  font-weight: bold;
  font-size: 1.2em;
  margin-top: 1em;
}

.mensaje-fecha-confirmacion {
  position: absolute;
  bottom: 15%; /* En lugar de usar 'top', usamos 'bottom' con porcentaje */
  left: 0;
  right: 0;
  text-align: center;
  color: #937851;
  font-family: "Avenir", sans-serif;
  font-size: 1.3em;
  padding: 1px;
  margin: 0 auto;
  max-width: 80%;
  z-index: 5; /* Aseguramos que esté por encima de otros elementos */
}


@media (max-height: 800px) {
  .confirmacion-section {
    height: auto; /* Cambia a altura automática */
    min-height: 700px; /* Altura mínima */
    padding: 150px 0; /* Añade algo de padding arriba y abajo */
  }
  
}
/* Diseño responsivo para pantallas pequeñas */
@media (max-width: 768px) {
  .confirmacion-section {
    height: 100vh; /* Eliminar altura fija */
    padding: 20px 0; /* Agregar espacio vertical */
    position: relative; /* Permite posicionar elementos relativos */
    display: flex;
    flex-direction: row; /* Colocar los cuadros uno al lado del otro */
    align-items: center;
  }
  
  .mensaje-fecha-confirmacion {
    font-size: 1em;
    bottom: 10%; /* Ajuste para pantallas medianas */
    position: absolute;
  }
  .cuadro-secundario {
    position: static; /* Eliminar posicionamiento absoluto */
    width: 40%; /* Ocupa el 40% del ancho */
    height: 400px; /* Altura dinámica */
    z-index: 1; /* Asegura que esté detrás del cuadro principal */
    border-radius: 0; /* Elimina bordes redondeados */
    padding: 1em; /* Reduce padding */
    opacity: 0.8; /* Reduce la opacidad para que sea un fondo */
    order: 1; /* Colocar a la izquierda */
    border-radius:3px;
  }

  .container {
    position: static; /* Eliminar posicionamiento relativo */
    width: 60%; /* Ocupa el 60% del ancho */
    max-width: 100%;
    z-index: 2; /* Asegura que esté encima del cuadro secundario */
    order: 2; /* Colocar a la derecha */
  }

  .codigo-box {
    position: static; /* Eliminar posicionamiento absoluto */
    width:50%; /* Ocupar todo el ancho del contenedor */
    height: 450px; /* Altura dinámica */
    left: 0; /* Resetear posición */
    margin-bottom: 20px; /* Espacio entre los cuadros */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    border-radius:15px;
    background: rgba(252, 252, 252, 0.9); /* Fondo semi-transparente */
  }

  .codigo-box h2 {
    font-size: 1em;
    color: #333;
    margin-bottom: 3em;
    margin-top: 10em;
  }

  .cuadro-secundario h2 {
    font-family: "Astralaga", sans-serif;
    font-size: 1.3em;
    max-width: 100%;
    margin-top: 5em;
    margin-bottom: 5em;
  }
  .frase {
    font-family: "Avenir";
    font-size: .9em;
    color: #ccc;
    margin-left: auto;  /* Mueve la frase a la derecha */
    text-align: center;  /* Alinea el texto a la derecha */
    max-width: 100%; /* Limita el ancho del texto dentro del cuadro */
  
  }
 
}

@media (max-width: 480px) {
  
  .codigo-box {
    padding: 1em; /* Reducir padding aún más */
  }

  .cuadro-secundario {
    padding: 1em; /* Reducir padding */
  }

  .cuadro-secundario h2,
  .cuadro-secundario .frase {
    font-size: 0.9rem; /* Reducir tamaño de fuente */
  }
  .mensaje-fecha-confirmacion {
    font-size: 0.9em;
    bottom: 8%; /* Aún más cerca del borde para pantallas muy pequeñas */
    max-width: 90%; /* Un poco más ancho para que se ajuste mejor */
  }

}

@media (max-height: 800px) {
  .confirmacion-section {
    height: auto;
    min-height: 600px;
    padding: 150px 0
  }
  
  .cuadro-secundario {
    min-height: 300px;
    margin-bottom: 10px;
  }
  
  .codigo-box {
    min-height: 400px;
  }
  
  .mensaje-fecha-confirmacion {
    margin-top: 350px;
  }
}



/* ================================
   Estilos para el Modal de Confirmación
   ================================ */

/* Overlay del modal - cubre toda la pantalla */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

/* Cuando el modal está activo */
.modal-overlay.active {
  display: flex;
}

/* Contenedor del modal */
.modal-container {
  position: relative;
  width: 900px;
  max-width: 95%;
  margin: 0 auto;
  animation: fadeIn 0.5s ease-out;
  display: flex;
  justify-content: center;
  height: 600px;
}

/* Animación de entrada */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Cuadro secundario (fondo oscuro) - Imita tu cuadro-secundario */
.modal-box.secondary {
  position: absolute;
  width: 800px;
  height: 600px;
  background: #31332A;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: start;
  padding: 2em;
}

.modal-title {
  font-family: "Astralaga", sans-serif;
  font-size: 2em;
  padding: 0;
  text-align: center; /* Centra el texto */
  line-height: 1.4; /* Ajusta el espacio entre líneas */
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra las palabras dentro del contenedor */
  margin-top: 4em;
  margin-bottom: 1em;
  max-width: 40%; /* Limita el ancho del texto dentro del cuadro */
  text-align: center;
}


.modal-box.secondary h3 {
  font-family: "Avenir", sans-serif;
  font-size: 2em;
  color: white;
  padding: 2rem;
  text-align: center;
  max-width: 40%;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0em;
  margin-bottom: 0em;
}

.modal-message {
  font-family: "Avenir";
  font-size: .9em;
  color: #ccc;
  margin-top: 1em;
  margin-left: auto;  /* Mueve la frase a la derecha */
  text-align: center;  /* Alinea el texto a la derecha */
  max-width: 39%; /* Limita el ancho del texto dentro del cuadro */
}

/* Cuadro principal (cuadro blanco) - Imita tu codigo-box */
.modal-box.primary {
  position: relative;
  width: 420px;
  background: white;
  padding: 2em;
  border-radius: 15px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  text-align: center;
  z-index: 10;
  left: -160px;
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal-box.primary h2 {
  font-family: "Astralaga", sans-serif;
  font-size: 3em;
  color: #333;
  margin-bottom: 0em;
  margin-top: 2em;
}
/* Estilos para el título dentro del cuadro principal */
.modal-box.primary h3 {
  font-family: "Avenir"sans-serif;
  font-size: 1.5em;
  color: #333;
  margin-bottom: 2em;
}

/* Estilos para inputs dentro del modal */
.modal-box.primary input {
  width: 100%;
  padding: 0.8em;
  border: none;
  border-bottom: 2px solid black;
  font-size: 1em;
  outline: none;
  background: transparent;
  text-align: center;
  color: #333;
  margin: 1em 0;
}

.modal-box.primary input[type="number"] {
  width: 80px;
  margin: 0.5em auto;
  display: block;
}

/* Estilos para párrafos */
.modal-box.primary p {
  margin: 1em 0;
  color: #333;
}

/* Estilos para botones - Imita tu btn-verificar */
.modal-box.primary button {
  margin-top: 20px;
  width: 100%;
  padding: 1em;
  border: 2px solid #31332A;
  border-radius: 10px;
  background: #31332A;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.modal-box.primary button:hover {
  background: white;
  color: #31332A;
}

/* Segundo botón (cerrar) con estilo alternativo */
.modal-box.primary button#cerrarModal {
  background: transparent;
  color: #31332A;
  border: 1px solid #31332A;
  margin-top: 10px;
}

.modal-box.primary button#cerrarModal:hover {
  background: #f5f5f5;
}

/* Mensaje de confirmación */
.mensaje-confirmacion {
  margin-top: 15px;
  font-weight: bold;
  min-height: 40px;
}
/* Diseño responsivo para pantallas pequeñas */
@media (max-width: 768px) {
  .modal-container {
    height: 80vh; /* Eliminar altura fija */
    padding: 20px 0; /* Agregar espacio vertical */
    position: relative; /* Permite posicionar elementos relativos */
    display: flex;
    flex-direction: row; /* Colocar los cuadros uno al lado del otro */
    align-items: center;
  }

  .modal-box.secondary {
    position: static; /* Eliminar posicionamiento absoluto */
    width: 40%; /* Ocupa el 40% del ancho */
    height: 400px; /* Altura dinámica */
    z-index: 1; /* Asegura que esté detrás del cuadro principal */
    border-radius: 10px; /* Bordes ligeramente redondeados */
    padding: 0em; /* Reduce padding */
    opacity: 1; /* Reduce la opacidad para que sea un fondo */
    order: 1; /* Colocar a la izquierda */
  }

  .modal-title {
    font-size: 1.5em;
    max-width: 100%;
    margin-top: 2em;
    margin-bottom: 2em;
  }
  .modal-box.secondary h3 {
    font-size: 1.2em;
    padding: .5em;
    text-align: center;
    max-width: 100%;
    margin-top: 0em;
    margin-bottom: 2em;
  }
  

 .modal-message {
    font-size: .9em;
    color: #ccc;
    margin-left: auto;  /* Mueve la frase a la derecha */
    text-align: center;  /* Alinea el texto a la derecha */
    max-width: 100%; /* Limita el ancho del texto dentro del cuadro */
  }

  .modal-box.primary {
    position: static; /* Eliminar posicionamiento absoluto */
    width: 50%; /* Ocupar ancho apropiado */
    height: 450px; /* Altura dinámica */
    left: 0; /* Resetear posición */
    margin-bottom: 20px; /* Espacio entre los cuadros */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    order: 2; /* Colocar a la derecha */
    z-index: 2; /* Asegura que esté encima del cuadro secundario */
  }

  .modal-box.primary h3 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 1em;
    margin-top: 1em;
    padding: .5em;
  }
}

@media (max-width: 670px) {
  .modal-box.primary h2 {
    font-size: 2.0em;
  }
  .modal-box.primary h3 {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 1em;
    margin-top: 1em;
    padding: .5em;
  }
   .modal-title {
    font-size: 1.2em;
    max-width: 100%;
    margin-top: 2em;
    margin-bottom: 2em;
  }
}
@media (max-width: 480px) {
  .modal-box.primary {
    padding: 1em; /* Reducir padding aún más */
    width: 60%; /* Ajustar ancho para pantallas muy pequeñas */
  }

  .modal-box.secondary {
    padding: 1em; /* Reducir padding */
    width: 40%; /* Ajustar ancho para pantallas muy pequeñas */
  }

  .modal-title {
    font-size: .9em;
    margin-top: 4rem;
  }
  
  
  .modal-box.secondary h3 {
    font-size: .9em;
  }
  
  .modal-message {
    font-size: .8em;
  }
  
  .modal-box.primary button {
    padding: 0.8em; /* Reducir padding de botones */
    font-size: 0.9em; /* Reducir tamaño de texto en botones */
  }
}


/* ---------------------- */
/* footer */
/* ---------------------- */
.footer {
  background: #1a1f1e; /* Color oscuro similar al resto del diseño */
  color: #ffffff;
  padding: 10px 20px;
  text-align: center;
  font-family: 'Avenir', sans-serif;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.footer-logo-image{
  width: 200px;
  height: auto;
}


/* Enlaces de redes sociales */
.social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-icon {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1); /* Iconos en blanco */
  transition: transform 0.3s ease, filter 0.3s ease;
}

.social-icon:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

/* Derechos reservados */
.footer-copyright {
  font-size: 0.9rem;
  color: #ccc;
  margin-top: 10px;
}

/* 📌 Responsividad */
@media (max-width: 768px) {
  .footer-signature {
    font-size: 1.5rem;
  }

  .social-icon {
    width: 25px;
    height: 25px;
  }

  .footer-copyright {
    font-size: 0.8rem;
  }

  .footer-logo-image{
    width: 200px;
    height: auto;
  
  }
}

@media (max-width: 480px) {
  .footer-signature {
    font-size: 1.3rem;
  }

  .footer-logo-image{
    width: 200px;
    height: auto;
  
  }

  .social-icon {
    width: 20px;
    height: 20px;
  }

  .footer-copyright {
    font-size: 0.7rem;
  }
}

/* Botón flotante para música */
.mute-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #cacacad0;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  cursor: pointer;
  transition: background 0.3s;
}

.mute-button img {
  width: 24px;
  height: 24px;
}

.mute-button:hover {
  background-color: #f3f3f3;
}