@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Birthstone&display=swap');
 
* {
  box-sizing: border-box;
}

    body {
      font-family: "Playfair Display", serif;
      font-optical-sizing: auto;
      width: 100%;
      overflow-x: hidden;
      margin: 0;
      padding: 0;
      height: auto;
       background: linear-gradient(
    135deg,
    #b76e79,  /* rose gold metálico */
    #eec0c6,  /* suave rosa claro */
    #f4e2d8,  /* dorado pálido */
    #d1a1a3,  /* rosa cobre */
    #b76e79   /* repetición del tono principal */
  );
  background-size: 400% 400%;
  animation: roseGoldFlow 15s ease infinite;
      position: relative;
    }

    html {
      width: 100%;
      overflow-x: hidden;
      margin: 0;
      padding: 0;
      height: auto;
    }

    .hero {
      background-image: url('../assets/session2/galeria2.webp');
      background-size: cover;
      background-position: center;
      color: white;
      text-shadow: 0 0 5px black;
      padding: 0px 20px;
      text-align: center;
      height: 100vh;
      align-content: flex-end;
      background-repeat: no-repeat;       
      background-position: center top;    
      background-attachment: fixed; 
    }

    .section {
      /*height: 100vh;*/
      padding: 10px 10px;
      transition: opacity 0.5s ease;
      /*margin-bottom: 4rem;
      background-image: url('../assets/fondosection.webp');*/
    }

    .img-fluid {
      transition: transform 0.3s ease;
    }

    .galeria-img {
    width: 100%;
    height: 200px; /* O el alto que prefieras */
    object-fit: contain; /* o "contain" si no quieres recorte */
    border-radius: 10px;
    }

    .titulo-section{
        font-size: 72px;
        font-family: 'Great Vibes', cursive;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        color:#d4af37;
        text-align: center;
    }

    .titulo-Hero{
        font-size: 38px;
        font-family: 'Great Vibes', cursive;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        color:#d4af37;
        text-align: center;
    }

    .titulo-Papas{
        font-size: 51px;
       font-family: 'Great Vibes', cursive;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        color:#d4af37;
    }

    .texto-recepcion {
        color: black;
        font-family: 'Dancing Script', cursive;
        font-size: 42px;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }

    .card-reception{
        background-color: #f9e6ea;
        border-radius: 15px;
    }

    .texto-papas{
        color:black;
        font-family: 'Dancing Script', cursive;
        font-size: 25px;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }

    .texto{
      color: #b76e79;
        text-shadow: 1px 1px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;  
        font-family: 'Dancing Script', cursive;
        font-size: 25px;
    }

    .section-blanca {
      background-color: white;
      border: 1px solid #d4af37; 
      box-shadow: 0 4px 15px rgba(212, 175, 55, 0.15);
    }

    .section-beige {
      background-color: #f7e7ce;
    }

    .section-gradient,.section-rosado  {
      background: linear-gradient(to right, #f9e6ea, #fbe4d8);
    }

    .fecha{
      color: #b76e79;
      font-family: 'Dancing Script', cursive;
      font-size: 65px;
    }

    .icono-sobre {
        color: #d4af37;
    }

    .seccion.oculta {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
    } 

    .separador svg {
      display: block;
      width: 100%;
      height: auto;
      margin-bottom: -1px; /* para evitar líneas blancas */
    }

    .dresscode{
      max-width: 30%;
    }

    .img-galeria{
      max-width: 41%;
    }

  .seccion-con-vectores {
    overflow: hidden; /* Evita que el decorador se salga del contenedor */
  }

  .decorador {
    position: absolute;
    width: 150px; /* puedes ajustar el tamaño */
    opacity: 0.3;  /* efecto sutil */
    pointer-events: none; /* para que no interfiera al hacer clic */
  }

  .esquina-inferior-izquierda {
    bottom: 0;
    left: 0;
    transform: translate(-20%, 20%);
  }

  .esquina-superior-derecha {
    top: 0;
    right: 0;
    transform: translate(20%, -20%);
  }

  .texto-contador{
          color:#FFA7B5;
          font-family: 'Dancing Script', cursive;
          border-color: white;
          font-size: 45px;
          text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); /* 👈 Sombra suave gris oscuro */
  }

  .div-decorado {
    padding-top: 80px; /* Espacio para la imagen arriba */
    text-align: center;
    position: relative;
    overflow: visible !important;
  }

  .div-decorado-dress {
    text-align: center;
    position: relative;
    overflow: visible !important;
  }

  .decoracion-superior {
    position: absolute;
    top: -27%;
    left: 49%;
    transform: translateX(-50%);
    width :64%;
    z-index: 10;
    height: auto;
   }

   

    .div-con-lineas {
      border-top: 2px solid #d4af37;      /* dorado */
      border-bottom: 2px solid #d4af37;
      padding: 3px 0;
      text-align: center;
    }

    .textocorto{
      font-size:26px;
      color:#FFA7B5;
    }
 
    .seccion-rosa {
      background-color: #f9e6ea;
    }

    .img-sobre {
      max-width: 20%;
    }

    .img-galeria{
      max-width: 61%;
    }

    .lg-thumb-item.active img {
  border: 2px solid #d4af37 !important;
}

    .titulo-sobres {
      font-size: 1.5rem;
      text-align: center;
      color: #d4af37;
    }

    #lightgallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      grid-auto-rows: 200px;
      gap: 16px;
      padding: 0 20px 60px;
      max-width: 1200px;
      margin: auto;
    }

    #lightgallery a {
      display: block;
      overflow: hidden;
      position: relative;
    }

    #lightgallery img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
      transition: transform 0.3s ease;
    }

    #lightgallery a:hover img {
      transform: scale(1.05);
    }

    /* Tamaños personalizados */
    .img-wide {
      grid-column: span 2;
    }

    .img-tall {
      grid-row: span 2;
    }

    .img-big {
      grid-column: span 2;
      grid-row: span 2;
    }
    
    .recepcion{
      background-image: url('../assets/session2/galeria.webp');
    }

    .section-mensaje{
            background-image: url('../assets/fondorosa.webp');
            height: 21vh;
    }

     .section-galeria{
            background-image: url('../assets/fondorosa.webp');
    }

    .div-decorado2{
        position: absolute;
        top: -6%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        z-index: 10;
        height: auto;
    }

     .div-decorado3{
        position: absolute;
      top: -3%;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      z-index: 10;
      height: auto;
      }


    .texto-blanco-contador{
            color: #b76e79;
            font-family: 'Dancing Script', cursive;
            font-size: 32px;
    }

    

   .texto-blanco{
        color: #b76e79;
        font-family: 'Dancing Script', cursive;
        font-size: 35px;
    }

    .btn-maps {
      background-color: #b76e79; /* Verde de Google Maps */
      color: white;
      padding: 15px 25px;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      text-decoration: none;
      transition: background-color 0.3s ease;
    }

    .btn-maps:hover {
      background-color: #d4af37;
    }
 
    #preloader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: white;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    .spinner {
      width: 50px;
      height: 50px;
      border: 5px solid #e0e0e0;
      border-top: 5px solid #e91e63; /* color rosa */
      border-radius: 50%;
      animation: girar 1s linear infinite;
    }

    .texto-direccion {
    color: black;
    font-family: 'Dancing Script', cursive;
    font-size: 25px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

    @keyframes girar {
      to {
        transform: rotate(360deg);
      }
    }


    /* Responsive */
    @media (max-width: 768px) {
      #lightgallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
      }

      .img-wide,
      .img-tall,
      .img-big {
        grid-column: span 2 !important;
        grid-row: span 1 !important;
      }
    }



/* VERSION ESCRITORIO */
  @media (min-width: 992px) {
    .hero {
        height: 100vh;
    }

  .texto{
        color: #b76e79;
        text-shadow: 1px 1px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;        font-family: 'Dancing Script', cursive;
        font-size: 45px;
    }

    .texto-recepcion {
        color: black;
        font-family: 'Dancing Script', cursive;
        font-size: 44px;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }

    .texto-blanco,.texto-blanco-contador{
        color: #b76e79;
        text-shadow: 1px 1px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white;
        font-family: 'Dancing Script', cursive;
        font-size: 45px;
    }
    .texto-direccion {
    color: black;
    font-family: 'Dancing Script', cursive;
    font-size: 25px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

  .texto-contador{
        color:#FFA7B5;
        font-family: 'Dancing Script', cursive;
        font-size: 45px;
         text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); /* 👈 Sombra suave gris oscuro */
    }

    .titulo-Hero{
        font-size: 67px!important;
        font-family: "Birthstone", cursive;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        color:#d4af37;
    }

  .textocorto{
    font-size:34px;
    color:#EBA096;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); /* 👈 Sombra suave gris oscuro */
  }

  .decoracion-superior {
        position: absolute;
        top: -196px;
        left: 50%;
        transform: translateX(-50%);
        width: 42%;
        z-index: 10;
        height: auto;
    }

   .lg-item-wide, .lg-item-small {
        flex: 0 0 100%;
      }

      .section {
      padding: 88px 10px;
      transition: opacity 0.5s ease;
/*     margin-bottom: 4rem;
      background-image: url('../assets/fondosection.webp');*/
    }

    .div-decorado2 {
      position: absolute;
      top: -9%;
      left: 50%;
      transform: translateX(-50%);
      width: 68%;
      z-index: 10;
      height: auto;
   } 

   .div-decorado3{
        position: absolute;
        top: -3%;
        left: 50%;
        transform: translateX(-50%);
        width: 41%;
        z-index: 10;
        height: auto;
    }

   .titulo-sobres {
    font-size: 3.5rem;
    text-align: center;
    color: #d4af37;
  }

    .div-decorado-dress {
      text-align: center;
      position: relative;
      overflow: visible !important;
    }

  .titulo-Papas,.titulo-section {
    font-size: 120px;
    font-family: 'Great Vibes', cursive;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    color: #d4af37;
  }
  
  .fecha{
    color: #FFA7B5;
    font-family: 'Dancing Script', cursive;
    font-size: 69px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  }

  .section-fecha {
    padding: 0px 0px;
    transition: opacity 0.5s ease;
  }
  .img-sobre {
      max-width: 15%;
  }

  .titulo-Hero{
        font-size: 54px;
        font-family: 'Great Vibes', cursive;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        color:#d4af37;
        text-align: center;
    }

    .texto-papas{
        color:black;
        font-family: 'Dancing Script', cursive;
        font-size: 66px;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }

    .section-mensaje {
    background-image: url(../assets/fondorosa.webp);
    min-height: 38vh;
    
}
}

@keyframes aparecerZoom {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
    }

    .hero h1 {
    animation: aparecerZoom 1.5s ease-out forwards;
    opacity: 0; /* Oculto antes de que cargue */
    }

  @keyframes roseGoldFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* Capa de brillitos */
.sparkle-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url('../assets/brillos.webp'); /* PNG con brillitos sutiles */
  background-repeat: repeat;
  animation: sparkleMove 60s linear infinite;
  opacity: 0.1;
  z-index: 1;
}
  /* Movimiento de los brillitos */
@keyframes sparkleMove {
  0% { background-position: 0 0; }
  100% { background-position: 1000px 1000px; }
}

.sparkle {
      position: absolute;
      font-size: 14px;
      color: white;
      text-shadow: 0 0 6px #fff, 0 0 10px #ffd6fa;
      animation: sparkle 2s infinite ease-in-out;
      opacity: 0;
      pointer-events: none;
    }
  .seccion-con-brillos {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #ffe6f9, #fff0f9);
}

.brillos {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* para que no bloquee clics */
  z-index: 0;
}

  @keyframes sparkle {
    0% {
      transform: scale(0.5);
      opacity: 0;
    }
    50% {
      transform: scale(1.5);
      opacity: 1;
    }
    100% {
      transform: scale(0.5);
      opacity: 0;
    }
  }

  @keyframes shine {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


.fondo-rose-gold {
  background: linear-gradient(
    135deg,
    #b76e79,  /* rose gold metálico */
    #eec0c6,  /* suave rosa claro */
    #f4e2d8,  /* dorado pálido */
    #d1a1a3,  /* rosa cobre */
    #b76e79   /* repetición del tono principal */
  );
  background-size: 400% 400%;
  animation: roseGoldFlow 15s ease infinite;
}

/* Animación suave para que el fondo se vea dinámico */
@keyframes roseGoldFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}