/* =========================================================
   1) VARIABLES GLOBALES
   ========================================================= */
/* Actualización de la paleta de colores:
   - #FFDB1E: Amarillo dorado (color principal y secundario)
   - #044FBC: Azul brillante
   - #052F84: Azul oscuro
   - #FFFFFF: Blanco (para contrastes)
   - #EF1313: Rojo intenso
   - #FA5451: Rojo suave complementario
*/
:root {
  /* Colores */
  --color-1: #FFDB1E;
  /* Amarillo dorado (acento principal) */
  --color-2: #FDA219;
  /* Amarillo dorado (repetido para coherencia) */
  --color-3: #044FBC;
  /* Azul brillante */
  --color-4: #052F84;
  /* Azul oscuro */
  --color-5: #FFFFFF;
  /* Blanco */
  --color-6: #EF1313;
  /* Rojo intenso */
  --color-7: #FA5451;
  /* Rojo suave complementario */
  --color-8: #f8f8f6;
  --color-9: #4b4b45;
  --color-10: #66665a;
  --color-11: #edeef6;

  /* Fuentes */
  --fuente-1: 'Fraunces', serif;
  --fuente-2: 'La Belle Aurore', cursive;
  --fuente-3: 'Open Sans', sans-serif;

  /* Grosor de fuente */
  --weight-font-regular: 400;
  --weight-font-bold: 700;
}

/* =========================================================
   2) SCROLL Y AJUSTES BÁSICOS
   ========================================================= */
/* Estilos de la barra de scroll (original) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-4);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--color-2);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-1);
}

/* Ajustes de checkboxes/radios (custom-control) */
.custom-control-label::before {
  height: 20px;
  width: 20px;
}

.custom-control-label::after {
  height: 20px;
  width: 20px;
}

.custom-control-input:checked~.custom-control-label::before {
  color: var(--color-2);
  border-color: var(--color-2);
  background-color: var(--color-4);
  outline: none;
}

.custom-control-input:focus~.custom-control-label::before {
  box-shadow: none !important;
}

/* =========================================================
   3) BOTONES, LINKS Y ELEMENTOS GENERALES
   ========================================================= */
a {
  transition: all 0.5s ease;
}

ul {
  list-style: none;
  padding: 0;
}

span#error-form {
  color: red;
  font-size: 13px;
}

/* Fancybox (fondo modal) */
.fancybox-bg {
  background-color: var(--color-3) !important;
}

/* Botón genérico */
.boton {
  font-family: var(--fuente-1) !important;
  font-weight: var(--weight-font-regular) !important;
  background: var(--color-3) !important;
  border: 1px solid var(--color-2) !important;
  color: var(--color-5) !important;
  text-transform: uppercase !important;
  border-radius: 50px !important;
  line-height: 15px !important;
  font-size: 15px !important;
  padding: 15px 20px !important;
  box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.40) !important;
  transition: all 0.5s ease !important;
}

.boton:hover {
  background: var(--color-4);
  color: var(--color-1);
  border: 1px solid var(--color-4);
  text-decoration: none;
}

/* Títulos y subtítulos genéricos */
.title {
  font-family: var(--fuente-1);
  color: var(--color-1);
  width: 100%;
  display: inline-block;
  font-size: 55px;
  line-height: 55px;
  margin-bottom: 5px;
}

.subtitle {
  font-family: var(--fuente-2);
  font-weight: var(--weight-font-regular);
  color: var(--color-3);
  width: 100%;
  display: inline-block;
  font-size: 30px;
}

/* =========================================================
   4) PRELOADER (ANIMACIONES TIPO PIXAR) - OPCIONAL
   ========================================================= */
.preloader-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 1.5s ease-in-out;
}

.invisible-preloader {
  opacity: 0;
  pointer-events: none;
}

.spotlight {
  position: absolute;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
  animation: spotlightGrow 2s ease-out forwards;
  pointer-events: none;
  z-index: 1;
}

@keyframes spotlightGrow {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }

  50% {
    width: 500px;
    height: 500px;
    opacity: 1;
  }

  100% {
    width: 500px;
    height: 500px;
    opacity: 0.8;
  }
}

.loader {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  transform-origin: center;
}

.fade-elem {
  opacity: 0;
  position: relative;
  z-index: 2;
  transform: scale(0.5) translateY(50px);
  animation-fill-mode: forwards;
}

@keyframes bounceInPixar {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(100px);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.1) translateY(-20px);
  }

  70% {
    opacity: 0.9;
    transform: scale(0.95) translateY(10px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes symbolEntrance {
  0% {
    opacity: 0;
    transform: scale(2) rotate(-180deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.2) rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes lottieEntrance {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(50px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes textReveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
    letter-spacing: 20px;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: 4px;
  }
}

.shine-effect {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shine 2s infinite;
  transform: skewX(-20deg);
  z-index: 3;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) skewX(-20deg);
  }

  100% {
    transform: translateX(200%) skewX(-20deg);
  }
}

.preloader-area.fade-out {
  background-color: #000;
  opacity: 0;
}

.preloader-area.fade-out .fade-elem {
  animation: pixarFadeOut 1s ease-in-out forwards;
}

@keyframes pixarFadeOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@media (max-width: 576px) {
  .spotlight {
    max-width: 300px;
    max-height: 300px;
  }

  .loader {
    transform: scale(0.8);
    gap: 20px;
  }

  .elem-3 {
    font-size: 36px;
  }

  .elem-5 {
    font-size: 20px;
  }
}

/* =========================================================
   5) OVERLAY (TAP TO ENTER) - OPCIONAL
   ========================================================= */
.tap-to-enter {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 30002 !important;
  background: linear-gradient(45deg,
      var(--color-1) 0%,
      #373939 30%,
      #5a5f5f 70%,
      #727b79 100%);
  background-size: 200% 200%;
  animation: loveGradient 6s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
}

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

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

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

.lottie-wrapper {
  width: 320px;
  height: 320px;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
  left: 5% !important;
}

.lottie-wrapper dotlottie-player {
  left: 10%;
  pointer-events: none;
}

.boton-centrado {
  font-size: 18px;
  padding: 15px 30px !important;
  margin-top: 15%;
  background: #c14e8b;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  z-index: 1;
  position: relative;
  right: 5%;
}

#lottieFirst,
#lottieSecond {
  transition: opacity 1.5s ease-in-out;
}

.amor-text {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.anim-galeria {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px;
}

.anim-galeria dotlottie-player {
  width: 120px;
  height: 120px;
  max-width: 100%;
}

@media (max-width: 768px) {
  .anim-galeria dotlottie-player {
    width: 80px;
    height: 80px;
  }
}

.text-disclaimer {
  font-size: 12px;
  color: #dfdfdf;
  text-align: justify;
  margin-top: 5px;
  font-family: "Times New Roman", Times, serif;
  font-weight: normal;
  line-height: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 5px;
  letter-spacing: 0.5px;
  text-indent: 40px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* =========================================================
   6) MÚSICA DE FONDO / ÍCONO ANIMADO
   ========================================================= */
#player-musica-fondo {
  position: absolute;
  left: -99999px;
}

#controlador-musica {
  position: fixed;
  z-index: 999;
  top: 10px;
  right: 0;
}

.music-anim-icon {
  width: 100px;
  height: 100px;
  cursor: pointer;
  animation: pulse 2s infinite;
}

@media (max-width: 768px) {
  .music-anim-icon {
    width: 40px !important;
    height: 40px !important;
    padding: 10px;
  }
}

/* =========================================================
   7) SECCIONES PRINCIPALES (PORTADA, CEREMONIA, ETC.)
   ========================================================= */

/* 7.1 Portada */
section.portada {
  width: 100%;
  padding-bottom: 285px;
  background-size: cover;
  color: var(--color-5);
  position: relative;
}

section.portada::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(74, 79, 96, 0);
  z-index: 0;
  top: 0;
  left: 0;
}

section.portada::after {
  background-image: url('../img/curvas01.svg');
  position: absolute;
  content: '';
  background-repeat: no-repeat;
  background-position: bottom center;
  height: 100%;
  width: 100%;
  bottom: -10%;
  z-index: 9;
}

section.portada .adorno {
  position: absolute;
  width: 500px;
  height: auto;
  top: -1px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

section.portada .container .row:first-child {
  height: 100vh;
  max-height: 770px;
}

section.portada .content-portada {
  width: 75%;
  z-index: 999;
  position: relative;
}

section.portada .adorno-portada {
  width: 125px;
  height: auto;
}

section.portada .content-portada span.fecha {
  font-family: var(--fuente-2);
  font-weight: var(--weight-font-regular);
  color: var(--color-3);
  display: table;
  white-space: nowrap;
  height: 3px;
  width: 100%;
  font-size: 35px;
  font-family: 'ToyFont', sans-serif !important;
}

section.portada .content-portada span.fecha:before {
  right: -10%;
}

section.portada .content-portada span.fecha:after {
  left: -10%;
}

section.portada .content-portada span:before,
section.portada .content-portada span:after {
  border-top: 3px solid var(--color-2);
  content: '';
  display: table-cell;
  position: relative;
  top: 20px;
  width: 15%;
  height: 3px;
}

section.portada .content-portada h1 {
  color: var(--color-1);
  font-family: var(--fuente-1);
  font-weight: var(--weight-font-regular);
  width: 100%;
  text-align: center;
  font-size: 85px;
  line-height: 110px;
  margin-bottom: 0;
}

section.portada .content-portada h4 {
  color: var(--color-3);
  font-family: 'ToyFont', sans-serif !important;
  font-weight: var(--weight-font-regular);
  width: 100%;
  text-align: center;
  font-size: 35px;
  line-height: 45px;
}

section.portada .box-nombres-fecha-portada .line {
  background-color: var(--color-2);
  height: 3px;
  width: 85%;
  margin: 0 auto;
  margin-top: 20px;
}

section.portada .box-nombres-fecha-portada h1 span {
  font-family: var(--fuente-1);
  font-weight: var(--weight-font-regular);
  background-color: var(--color-2);
  color: var(--color-5);
  display: inline-block;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 40px;
}

section.portada .box-frase-portada {
  margin-top: 35px;
}

section.portada .box-frase-portada p {
  color: var(--color-1);
  font-family: var(--fuente-2);
  font-weight: var(--weight-font-regular);
  font-size: 35px;
  line-height: 35px;
  text-align: center;
  margin-bottom: 0;
  font-style: italic;
}

section.portada .box-frase-portada p img {
  width: 30px;
  margin: 10px 0;
}

section.portada .flecha-continuar {
  width: 50px;
  position: absolute;
  bottom: -80px;
}

ul.lang-inv {
  position: absolute;
  width: 100%;
  top: -45px;
}

ul.lang-inv li {
  margin: 0 5px;
}

ul.lang-inv li a {
  color: var(--color-5);
  background-color: var(--color-1);
  font-size: 14px;
  font-family: var(--fuente-1);
  font-weight: 400;
  display: inline-block;
  line-height: 30px;
  height: 30px;
  width: 30px;
  text-align: center;
  border-radius: 50%;
}

ul.lang-inv li a:hover {
  text-decoration: none;
  background: var(--color-4);
  color: var(--color-2);
}

/* 7.2 Sección Cuenta Regresiva */
section.cuenta-regresiva {
  position: relative;
  height: 260px;
  background-color: var(--color-5);
}

section.cuenta-regresiva .box-aros {
  width: 500px;
  height: 500px;
  background: url('../img/contador.png') center center no-repeat;
  background-size: contain;
  position: absolute;
  z-index: 99;
  top: -325px;
}

section.cuenta-regresiva .box-aros .box-circulo {
  width: 315px;
  height: 315px;
  margin-left: 45px;
}

section.cuenta-regresiva .box-aros .box-circulo span.falta {
  font-family: 'ToyFont', sans-serif !important;
  font-weight: var(--weight-font-regular);
  color: var(--color-2);
  width: 100%;
  text-align: center;
  display: inline-block;
  font-size: 55px;
  line-height: 55px;
  margin-top: 45px;
}

section.cuenta-regresiva .box-aros .box-circulo .corazon-falta {
  width: 18%;
  margin-top: 5px;
}

section.cuenta-regresiva .reloj {
  margin-top: 15px;
  margin-bottom: 25px;
}

section.cuenta-regresiva .reloj-col {
  width: 25%;
  border-right: 1px solid #ccc;
  padding: 0 8px;
  float: left;
}

section.cuenta-regresiva .reloj-col.no-border {
  border: none;
}

section.cuenta-regresiva .reloj-col span.number {
  font-family: 'ToyFont', sans-serif !important;
  color: var(--color-1);
  display: inline-block;
  width: 100%;
  font-size: 40px;
}

section.cuenta-regresiva .reloj-col span.time {
  font-family: 'ToyFont', sans-serif !important;
  font-weight: var(--weight-font-regular);
  color: var(--color-2);
  display: inline-block;
  width: 100%;
  font-size: 25px;
}

section.cuenta-regresiva .reloj-col span.time,
section.cuenta-regresiva .reloj-col span.number {
  text-align: center;
}

section.cuenta-regresiva p.fin-cuenta {
  font-size: 35px;
  line-height: 35px;
  color: var(--color-3);
  font-family: var(--fuente-1);
  font-weight: var(--weight-font-regular);
  padding: 40px 0 0 0;
}

/* 7.3 Ceremonia y Fiesta */
section.ceremonia-fiesta {
  background: url(../img/lineas01.svg) center 0 no-repeat var(--color-5);
  padding-bottom: 340px;
  position: relative;
}

section.ceremonia-fiesta .adorno {
  position: absolute;
  width: 165px;
  height: auto;
  top: 370px;
  left: -10px;
}

section.ceremonia-fiesta .col-ceremonia,
section.ceremonia-fiesta .col-fiesta {
  z-index: 999;
}

section.ceremonia-fiesta .col-ceremonia .anim-anillos,
section.ceremonia-fiesta .anim-fiesta {
  width: 175px;
  height: 175px;
  margin: 0 auto 20px;
  padding: 20px;
  background-color: var(--color-8);
  border-radius: 50%;
  box-shadow: 0px 0px 15px -1px rgba(0, 0, 0, 0.40);
}

section.ceremonia-fiesta .col-ceremonia .anim-anillos {
  padding: 45px;
}

section.ceremonia-fiesta .col-fiesta .anim-fiesta {
  padding: 35px;
}

section.ceremonia-fiesta .col-ceremonia h3,
section.ceremonia-fiesta .col-fiesta h3 {
  font-family: var(--fuente-2);
  font-weight: var(--weight-font-regular);
  background-color: var(--color-3);
  color: var(--color-5);
  font-size: 55px;
  line-height: 55px;
  display: inline-block;
  position: relative;
  min-width: 60%;
  padding: 15px 0 15px;
}

section.ceremonia-fiesta .col-ceremonia h3:after,
section.ceremonia-fiesta .col-fiesta h3:after {
  background-image: url(../img/img_cinta02.svg);
  position: absolute;
  content: '';
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: left;
  height: 100%;
  width: 16px;
  right: -15px;
  top: 0;
}

section.ceremonia-fiesta .col-ceremonia h3:before,
section.ceremonia-fiesta .col-fiesta h3:before {
  background-image: url(../img/img_cinta01.svg);
  position: absolute;
  content: '';
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: right;
  height: 100%;
  width: 16px;
  left: -15px;
  top: 0;
}

section.ceremonia-fiesta .info-col {
  margin-top: 30px;
}

section.ceremonia-fiesta .info-col .info-box {
  margin-bottom: 45px;
}

section.ceremonia-fiesta .info-col .info-box h6 {
  font-family: var(--fuente-1);
  color: var(--color-9);
  font-size: 40px;
}

section.ceremonia-fiesta .info-col .info-box p {
  font-family: var(--fuente-1);
  font-weight: var(--weight-font-regular);
  color: var(--color-10);
  font-size: 20px;
}

section.ceremonia-fiesta .info-col .info-box a.boton {
  margin-top: 5px;
  display: inline-block;
  width: 50%;
}

section.ceremonia-fiesta:after {
  background-image: url('../img/curvas02.svg');
  position: absolute;
  content: '';
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: bottom center;
  height: 100%;
  width: 100%;
  bottom: 0;
}

section.ceremonia-fiesta .ondas-2 {
  position: absolute;
  top: 3%;
}

section.ceremonia-fiesta .addeventatc .nameBtn {
  color: var(--color-3);
}

section.ceremonia-fiesta .addeventatc:hover .nameBtn {
  color: var(--color-4);
}

/* 7.4 Fiesta (apartado) */
section.fiesta {
  background: url('../img/lineas02.svg') center top no-repeat var(--color-5);
  padding-top: 14%;
  position: relative;
  padding-bottom: 265px;
}

section.fiesta .container {
  z-index: 999;
  position: relative;
}

section.fiesta .anim-musica {
  width: 75px;
  margin: 15px auto 40px auto;
}

section.fiesta .anim-vestuario {
  width: 95px;
}

section.fiesta .anim-tips {
  width: 55px;
}

section.fiesta:after {
  background-image: url('../img/curvas01.svg');
  position: absolute;
  content: '';
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: bottom center;
  height: 100%;
  width: 100%;
  bottom: -85px;
  z-index: 99;
}

section.fiesta .item-fiesta {
  margin-top: 60px;
  padding: 0 40px;
}

section.fiesta .item-fiesta h3 {
  font-family: var(--fuente-1);
  color: var(--color-1);
  font-size: 32px;
}

section.fiesta .item-fiesta p {
  font-family: var(--fuente-1);
  font-weight: var(--weight-font-regular);
  color: var(--color-6);
  margin-bottom: 0;
  font-size: 17px;
  line-height: 19px;
}

section.fiesta .item-fiesta a.boton {
  width: 85%;
}

section.fiesta .item-fiesta .content-item-fiesta {
  background-color: var(--color-7);
  padding: 40px 25px;
  border-radius: 20px;
  min-height: 400px;
}

section.fiesta .content-anim-fiesta {
  height: 80px;
}

section.fiesta .item-fiesta .adorno-1 {
  position: absolute;
  top: -100px;
  left: -70px;
  z-index: -1;
  width: 215px;
}

/* 7.5 Regalos */
section.regalos {
  background: url('../img/lineas02.svg') center top no-repeat var(--color-5);
  padding-top: 230px;
  position: relative;
  padding-bottom: 200px;
}

section.regalos .adorno {
  position: absolute;
  width: 225px;
  height: auto;
  top: 280px;
  left: -80px;
}

section.regalos .anim-regalos {
  width: 70px;
  margin: 1px auto 40px;
}

/* 7.6 Instagram */
section.instagram {
  padding-top: 16%;
  padding-bottom: 16%;
  position: relative;
}

section.instagram .container {
  position: relative;
  z-index: 999;
}

section.instagram:before {
  background-image: url('../img/lineas03.svg');
  position: absolute;
  content: '';
  background-repeat: no-repeat;
  background-position: top center;
  height: 100%;
  width: 100%;
  top: -1px;
}

section.instagram .hashtag {
  font-family: var(--fuente-3);
  color: var(--color-2);
  text-transform: lowercase;
  font-size: 55px;
  margin-bottom: 40px;
  display: inline-block;
}

section.instagram .anim-instagram {
  width: 60px;
  margin: 0 auto 15px;
}

section.instagram:after {
  background-image: url('../img/lineas04.svg');
  position: absolute;
  content: '';
  background-repeat: no-repeat;
  background-position: bottom center;
  height: 100%;
  width: 100%;
  bottom: -2px;
  z-index: 99;
}

/* =========================================================
   8) GALERÍA (SLICK / POLAROID)
   ========================================================= */
section.galeria {
  width: 100%;
  padding: 50px 0;
  background-color: var(--color-5);
  text-align: center;
  position: relative;
}

section.galeria h2 {
  margin-bottom: 30px;
  color: var(--color-3);
  font-size: 2rem;
  font-weight: 700;
}

.carrusel {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.slide {
  outline: none;
}

/* Polaroid */
.polaroid {
  background-color: var(--color-4);
  padding: 15px 15px 60px;
  margin: 10px;
  position: relative;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
  border: 1px solid #eee;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform: rotate(-2deg);
}

.polaroid::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: var(--color-4);
  z-index: -1;
}

.polaroid img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  filter: saturate(0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.polaroid:hover {
  transform: rotate(0deg) scale(1.03);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

/* Slick: slides */
.slick-slide {
  opacity: 0.6;
  transition: all 0.3s ease;
}

.slick-center {
  opacity: 1;
  z-index: 2;
}

.slick-center .polaroid {
  transform: rotate(0deg) scale(1.1);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}

/* Slick: puntos de navegación */
.slick-dots {
  bottom: -40px;
}

.slick-dots li button:before {
  font-size: 12px;
  color: var(--color-2);
  opacity: 0.5;
  margin: -8px;
}

.slick-dots li.slick-active button:before {
  color: var(--color-1);
  opacity: 1;
}

@media (max-width: 1200px) {
  .carrusel {
    max-width: 1400px;
  }

  .polaroid img {
    height: 250px;
  }
}

@media (max-width: 992px) {
  .carrusel {
    max-width: 1000px;
  }

  .polaroid {
    padding: 10px 10px 50px;
  }

  .polaroid img {
    height: 220px;
  }
}

@media (max-width: 768px) {
  .carrusel {
    max-width: 800px;
  }

  .polaroid img {
    height: 200px;
  }

  .slick-center .polaroid {
    transform: rotate(0deg) scale(1.07);
  }
}

@media (max-width: 576px) {
  .carrusel {
    max-width: 360px;
    padding: 0 10px;
  }

  .polaroid {
    margin: 5px;
  }

  .polaroid img {
    height: 160px;
  }
}

/* =========================================================
   9) MODALES (MÚSICA, CARDS, ETC.)
   ========================================================= */

/* 9.1 Ajustes de backdrop genérico */
.modal-backdrop {
  background: #8FB8D6;
  opacity: 1 !important;
}

.backdrop-modal-musica .modal-backdrop {
  background-color: var(--color-7);
  opacity: 1 !important;
}

.modal-body {
  flex: inherit;
}

.modal-transparent .modal-content {
  background: transparent;
  border: none;
}

.modal-transparent .close {
  color: var(--color-3);
  text-shadow: none;
  opacity: 1;
  position: absolute;
  right: 35px;
  outline: none;
  padding: 0;
}

.modal-transparent .modal-header,
.modal-transparent .modal-footer {
  border: none;
  padding: 0;
}

.modal-transparent .modal-header h3 {
  color: var(--color-6);
  text-align: center;
  width: 100%;
  font-family: var(--fuente-1);
  font-weight: var(--weight-font-regular);
}

.modal-transparent .boton {
  padding: 15px 50px;
}

/* 9.2 Modal Música (#modalMusica) */
#modalMusica .modal-content {
  background: transparent;
  border: none;
  font-family: var(--fuente-1);
  font-weight: var(--weight-font-regular);
}

#modalMusica .modal-content p {
  font-size: 55px;
  line-height: 50px;
  font-family: var(--fuente-1);
  font-weight: var(--weight-font-bold);
  color: var(--color-5);
  display: inline-block;
  width: 100%;
  position: relative;
  padding-bottom: 20px;
}

#modalMusica .modal-content p::after {
  content: '';
  position: absolute;
  background-color: var(--color-4);
  width: 40%;
  height: 2px;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

#modalMusica .modal-content p span {
  font-size: 20px;
  font-family: var(--fuente-3);
  font-weight: var(--weight-font-regular);
}

#modalMusica .modal-content p+span {
  font-size: 18px;
  color: var(--color-5);
  font-weight: 300;
  margin-top: 15px;
  margin-bottom: 25px;
  display: inline-block;
  width: 100%;
  font-family: var(--fuente-3);
}

#modalMusica .boton {
  font-size: 15px;
  display: inline-block;
  border: 1px solid var(--color-1);
}

#modalMusica .boton:hover {
  border: 1px solid var(--color-4);
}

/* 9.3 Modales “Card” (Asistencia, etc.) */
.modal-dialog {
  font-family: var(--fuente-3);
}

.modal-dialog .modal-title {
  font-weight: 700;
  color: var(--color-2);
}

.modal-dialog form label {
  color: var(--color-2);
}

.modal-dialog form input,
.modal-dialog form textarea {
  border: none;
  border-bottom: 1px solid var(--color-3);
  font-family: var(--fuente-1);
  font-weight: var(--weight-font-regular);
}

.modal-dialog form input::placeholder,
.modal-dialog form textarea::placeholder {
  color: var(--color--3);
}

.modal-dialog form input:focus,
.modal-dialog form textarea:focus {
  background-color: var(--color-5);
}

.modal-dialog .modal-icon {
  width: 125px;
  height: 125px;
  margin: 0 auto;
  padding: 30px;
  background-color: var(--color-5);
  border-radius: 50%;
  box-shadow: 0px 0px 15px -1px rgba(0, 0, 0, 0.40);
  position: relative;
  top: -75px;
}

.modal-card .modal-content {
  font-family: var(--fuente-1);
  font-weight: var(--weight-font-regular);
  color: var(--color-6);
  background-color: var(--color-5);
  text-align: center;
  border: none;
  padding: 10px 10px 30px 10px;
  border-radius: 40px;
  box-shadow: 0px 0px 15px 0px var(--color-4);
}

.modal-card input,
.modal-card textarea {
  text-align: center;
  background: none;
  resize: none;
  outline: none;
  padding-bottom: 5px;
}

.modal-card input:focus,
.modal-card textarea:focus {
  border: none;
  box-shadow: none;
}

.modal-card .modal-header {
  border: none;
  display: inline-block;
  padding: 0;
}

.modal-card .modal-header .modal-title {
  font-size: 30px;
  line-height: 35px;
  font-family: var(--fuente-3);
  color: var(--color-2);
}

.modal-card .modal-footer {
  border: none;
  display: inline-block;
  padding: 0;
}

.modal-card .form-group .form-check {
  float: left;
  margin-bottom: 30px;
  margin-top: 10px;
  font-size: 18px;
}

.modal-card .form-group .form-check label {
  padding-left: 5px;
  cursor: pointer;
  font-size: 20px;
}

.modal-card .boton {
  outline: none;
  border: none;
}

.modal-card .img-top-modal {
  position: relative;
  height: 65px;
}

.modal-card .img-top-modal img {
  width: 100%;
}

#modalSugerirCancion.modal-card .img-top-modal .modal-icon img,
#modalTips.modal-card .img-top-modal .modal-icon img,
#modalRegalos.modal-card .img-top-modal .modal-icon img {
  max-height: 60px;
}

#modalVestuario.modal-card .img-top-modal .modal-icon img {
  margin-top: 15px;
}

.modal-card .close {
  position: absolute;
  top: -15px;
  right: 0;
  color: var(--color-5);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: var(--color-2);
  opacity: 1;
  outline: none;
  font-size: 34px;
  font-weight: normal;
  font-family: var(--fuente-1);
  font-weight: var(--weight-font-regular);
  box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.50);
  transition: all 0.5s ease;
}

.modal-card .close:hover {
  background-color: var(--color-1);
  color: var(--color-5);
}

.modal-card .close span {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin-bottom: 80%;
}

.modal-card .form-control {
  font-size: 15px;
  color: var(--color-1);
  background-color: var(--color-11);
}

.modal-card .img-top-modal .adorno-1 {
  position: absolute;
  width: 70%;
  max-width: 400px;
  height: auto;
  top: -140px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  z-index: -1;
}

#modalMapa.modal-card .img-top-modal {
  height: 30px;
}

#googleMap {
  height: 300px;
  width: 100%;
}

.modal-body.fix-height {
  height: 70%;
}

.modal-body.fix-height .msj-content {
  height: 100%;
}

.modal .msj-content {
  width: 100%;
}

.modal .msj-content h5 {
  text-align: center;
  width: 100%;
  display: inline-block;
  font-weight: 700;
  color: var(--color-1);
}

.modal .msj-content p {
  text-align: center;
  width: 100%;
  display: inline-block;
}

/* =========================================================
   10) BANNER DE CONTACTO/REDIRECCIÓN
   ========================================================= */
.banner-contacto-web {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: var(--color-1);
  z-index: 9999;
  padding: 0;
  margin: 0;
}

.banner-contacto-web p {
  width: 100%;
  text-align: center;
  color: var(--color-5);
  margin: 0;
  padding: 8px 8px;
  font-family: var(--fuente-3);
  font-size: 13px;
}

.banner-contacto-web a {
  color: var(--color-2);
}

.banner-contacto-web a:first-child {
  background: var(--color-4);
  color: var(--color-1);
  border-radius: 10px;
  padding: 3px 10px;
}

.banner-contacto-web a:first-child:hover {
  text-decoration: none;
  color: var(--color-1);
  background-color: var(--color-5);
}

/* =========================================================
   11) FOOTER
   ========================================================= */
footer {
  background-color: var(--color-3);
  font-family: var(--fuente-2);
  font-weight: var(--weight-font-regular);
  font-weight: 400;
  padding: 20px 0;
  border-top: 15px solid var(--color-4);
}

footer p {
  width: 100%;
  text-align: center;
  font-size: 15px;
  margin-top: 1rem;
  color: var(--color-5);
  font-family: var(--fuente-1);
  font-weight: var(--weight-font-regular);
}

footer p a {
  color: var(--color-5);
  display: inline-flex;
  transition: all 0.5s ease;
}

footer p a:hover {
  text-decoration: underline;
  color: var(--color-5);
}

footer img.firma-footer {
  width: 65px;
  height: auto;
}

.firma-footer {
  width: 25px !important;
  height: 10;
  vertical-align: middle;
  margin: 5px;
}

.heart {
  color: red;
  margin: 0 5px;
}

/* =========================================================
   12) MODAL DE MÚSICA - VERSIÓN SIMPLIFICADA (BACKGROUND IMG)
   ========================================================= */
.modal {
  background: url('../img/fondo_cumples.webp') no-repeat center center !important;
  z-index: 10000;
}

.modal::before,
.modal::after {
  display: none;
}

.modal-dialog {
  max-width: 90%;
  width: 400px;
  margin: 1.75rem auto;
}

.modal-content {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.intro-logo {
  max-width: 99%;
  height: auto;
  margin: 2rem auto 1rem;
  display: block;
  transform: scale(1.10);
}

.boton-musica {
  font-size: 1.2rem;
  padding: 1rem 2rem;
  background-color: #FFDB1E !important;
  color: rgb(0, 59, 111) !important;
  border: 6px solid rgb(4, 79, 188) !important;
  border-radius: 25px !important;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}

.boton-musica:hover {
  background-color: rgb(4, 79, 188);
  color: #FFDB1E;
  transform: scale(1.10);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.boton-musica i {
  font-size: 1.4rem;
  animation: tap 1.5s infinite;
  color: rgb(4, 79, 188) !important;
}

@keyframes tap {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0);
  }
}

.modal-body {
  padding: 1rem;
}

/* =========================================================
   VIDEO Y TRANSICIONES DE FUNDIDO
   ========================================================= */
.hidden {
  display: none;
  opacity: 0;
}

.showing {
  display: block;
  animation: fadeIn 1s forwards;
}

.fullscreen-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: rgb(0, 0, 0);
}

#video-fullscreen-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  z-index: 9999;
  transition: opacity 1s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fade-out-black {
  animation: fadeOut 1s forwards;
}

/* =========================================================
   GLOBOS (BALLOONS) - CÓDIGO ORIGINAL MODIFICADO
   ========================================================= */
.balloons-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 9999;
}

.balloons-container .balloon {
  position: absolute;
  width: 80px;
  /* Aumentamos la duración a 20s para que suba más lento */
  animation: balloonRise 25s linear forwards;
  animation-play-state: paused;
}

.balloons-container .balloon:nth-child(1) {
  left: 15%;
  bottom: 20%;
  animation-delay: 3s;
}

.balloons-container .balloon:nth-child(2) {
  left: 25%;
  bottom: 40%;
  animation-delay: 4s;
}

.balloons-container .balloon:nth-child(3) {
  left: 75%;
  bottom: 10%;
  animation-delay: 5s;
}

.balloons-container .balloon:nth-child(4) {
  left: 85%;
  bottom: 15%;
  animation-delay: 6s;
}

@keyframes balloonRise {
  0% {
    transform: translate(-50%, 0);
    opacity: 0;
  }

  20% {
    transform: translate(-50%, 0);
    opacity: 1;
  }

  95% {
    transform: translate(-50%, 0);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -100vh);
    opacity: 0;
  }
}

/* =========================================================
   14) BALLOON ANIMATION (MEJORADA) - NUEVO
   ========================================================= */
/**
 * Variables para la animación de globos mejorada.
 * @constant {string} --balloon-colors - Lista de colores para los globos.
 * @constant {string} --balloon-size-desktop - Tamaño responsivo de los globos en desktop.
 * @constant {string} --animation-duration - Duración de la animación en milisegundos.
 */
:root {
  --balloon-colors: #FF6B6B,
    #4ECDC4, #45B7D1, #96CEB4, #dbcc90, #FFDB1E,
    #FDA219, #044FBC, #052F84, #EF1313, #FF6B6B, #FFDB1E, #4ECDC4, #45B7D1, #96CEB4, #dbcc90, #FFDB1E,
    #FA5451;
  --balloon-size-desktop: clamp(45px, 5vw, 84px);
  --animation-duration: 12000ms;
  /* 12 segundos */
}

.balloon-animation-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}

.balloon-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.balloon-container .balloon {
  position: absolute;
  width: var(--balloon-size-desktop);
  aspect-ratio: 1 / 1.3;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  will-change: transform;
  transform-origin: center bottom;
  animation: floatUp var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Subida de los globos */
@keyframes floatUp {
  0% {
    transform: translate3d(0, 100%, 0) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translate3d(var(--float-x, 0), -120vh, 0) rotate(var(--rotation));
    opacity: 0;
  }
}

/* =========================================================
   14B) FUENTE TOYFONT
   ========================================================= */
@font-face {
  font-family: 'ToyFont';
  src: url('../css/fonts/toy.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Aplicar la fuente personalizada al <h1> de "GONZALO" */
.box-nombres-fecha-portada h1 {
  font-family: 'ToyFont', sans-serif !important;
}

/* =========================================================
   ESTILO GLOBAL PARA TODOS LOS BOTONES
   ========================================================= */
button,
.boton,
a.boton,
.boton-musica {
  font-family: 'ToyFont', sans-serif !important;
  font-size: 1.2rem;
  padding: 1rem 2rem;
  background-color: #FFDB1E !important;
  color: rgb(4, 79, 188) !important;
  border: 6px solid rgb(4, 79, 188) !important;
  border-radius: 25px !important;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}

button:hover,
.boton:hover,
a.boton:hover,
.boton-musica:hover {
  background-color: rgb(4, 79, 188);
  color: #FFDB1E;
  transform: scale(1.10);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

button i,
.boton i,
a.boton i,
.boton-musica i {
  font-size: 1.4rem;
  animation: tap 1.5s infinite;
  color: rgb(4, 79, 188) !important;
}

@keyframes tap {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }

  100% {
    transform: translateY(0);
  }
}

.modal-body {
  padding: 1rem;
}

/* =========================================================
   18) CLASE .buzz-floating-img (RESPONSIVE)
   ========================================================= */
/**
 * @classdesc Clase para imágenes "Buzz" flotantes y responsivas.
 *
 * @example
 * <code>
 *   <img class="buzz-floating-img" src="ruta/buzz.png" alt="Buzz" />
 * </code>
 */
.buzz-floating-img {
  position: absolute;
  z-index: 999999;
  display: none;
  transform: scale(0.2) !important;
  /* jQuery fadeIn */
  /* Reducimos el tamaño a la mitad aproximada */
  
  height: 200px !important;
}

/* =========================================================
   19) GLOBOS: FADE EN body.hide-all (TRANSICIÓN GLOBAL)
   ========================================================= */
/* Efecto fade en 'hide-all' para suavizar la aparición del contenido */
body.hide-all {
  visibility: hidden;
  opacity: 0;
  /* Permitir fade */
  transition: opacity 1s ease;
  /* Fade suave en 1s */
}

body:not(.hide-all) {
  visibility: visible;
  opacity: 1;
}

/* =========================================================
   OVERLAY PARA OCULTAR EL BODY HASTA QUE SE REPRODUZCA EL VIDEO
   ========================================================= */
.body-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  /* Fondo negro */
  z-index: 9999;
  /* Debe estar por encima de todo */
  transition: opacity 1s ease;
  opacity: 1;
}


 /* ============================================================
     14) MÚSICA DE FONDO
     ============================================================ */
     #player-musica-fondo {
      position: absolute;
      left: -99999px;
    }  
    /* Estilos base mejorados */
  /* Estilos base mejorados */
  #controlador-musica {
    position: fixed;
    z-index: 999;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
  }
  
  .music-anim-icon {
    position: relative;
    width: 50px !important;
    height: 50px !important;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(128, 0, 255, 0.3);
    transform-origin: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 8px; /* Reducido de 12px */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Ajuste para el player de Lottie */
  .music-anim-icon dotlottie-player {
    width: 100% !important;
    height: 100% !important;
    display: block;
    margin: auto;
  }
   
   /* Contenedor circular con degradado */
   .music-anim-icon::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(45deg, rgba(138, 43, 226, 0.8), rgba(233, 30, 99, 0.8));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
   }
   
   /* Animación mejorada al hacer scroll */
   @keyframes floatMusic {
    0% {
      transform: translateY(0) rotate(0deg) scale(1);
      box-shadow: 0 0 20px rgba(128, 0, 255, 0.3);
    }
    25% {
      transform: translateY(-8px) rotate(5deg) scale(1.05);
      box-shadow: 0 8px 25px rgba(128, 0, 255, 0.4);
    }
    50% {
      transform: translateY(0) rotate(0deg) scale(1);
      box-shadow: 0 0 20px rgba(128, 0, 255, 0.3);
    }
    75% {
      transform: translateY(8px) rotate(-5deg) scale(1.05);
      box-shadow: 0 -8px 25px rgba(128, 0, 255, 0.4);
    }
    100% {
      transform: translateY(0) rotate(0deg) scale(1);
      box-shadow: 0 0 20px rgba(128, 0, 255, 0.3);
    }
   }
   
   .music-anim-icon.scrolling {
    animation: floatMusic 3s ease-in-out infinite;
   }
   
   /* Efectos hover mejorados */
   .music-anim-icon:hover {
    transform: scale(1.10);
    box-shadow: 0 0 30px rgba(128, 0, 255, 0.5);
   }
   
   .music-anim-icon:active {
    transform: scale(0.95);
   }
   
   /* Efecto pulso continuo */
   @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(138, 43, 226, 0.4);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(138, 43, 226, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(138, 43, 226, 0);
    }
   }
   
   .music-anim-icon {
    animation: pulse 2s infinite;
   }
   
   /* Responsive mejorado */
   @media (max-width: 768px) {
    .music-anim-icon {
      width: 40px !important;
      height: 40px !important;
      padding: 10px;
    }
   }
   
   /* Player oculto */
   #player-musica-fondo {
    position: absolute;
    left: -99999px;
   }