@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cantata+One&family=Gravitas+One&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Rakkas&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.Bebas{
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/* Estilos para el div con fondo */
  .fondo-imagen-marcas {
    width: 100%;
    background-image: url('../img/Fondo-marcas.jpg');
    background-repeat: no-repeat;
    /* Evita que la imagen se repita */
    background-size: cover;
    /* Ajusta la imagen al tamaño del div */
    background-position: center;
    /* Centra la imagen en el div */
  }

  /* Estilos para el div con fondo */
  .fondo-imagen-elementos {
    width: 100%;
    background-image: url('../img/fondoelementos.jpg');
    background-repeat: no-repeat;
    /* Evita que la imagen se repita */
    background-size: cover;
    /* Ajusta la imagen al tamaño del div */
    background-position: center;
    /* Centra la imagen en el div */
  }

  .fondo_modales{
    width: 100%;
    background-image: url('../img/Fondo-marcas.jpg');
  }

  .elementor-element.elementor-element-15bbdb57:not(.elementor-motion-effects-element-type-background),
  .elementor-142 .elementor-element.elementor-element-15bbdb57>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    background-color: transparent;
    background-image: linear-gradient(157deg, #10165B 0%, #814F9A 100%);
  }

  .navbar-dark svg{
    color:white;
    margin: 5px;
  }

  .iconos-rs a{
    color:#FFFF;
    padding-left:15px;
  }

  .iconos-rs{
    margin: 10px;
  }


  .overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Ajusta según el tamaño de la imagen */
    height: 100%;
    /* Ocupa todo el área del contenedor */
    object-fit: cover;
    /* Asegura que la imagen cubra todo el área */
    opacity: 0.9;
    /* Ajusta la opacidad (0.5 = 50% de transparencia) */
    z-index: 1;
    /* Asegura que la imagen esté sobre el video */
  }



/* Definir la animación con @keyframes */
@keyframes girar {
0% {
transform: rotate(360deg) scale(0.5); /* Empieza girando con una escala más pequeña */
}
100% {
transform: rotate(0deg) scale(1); /* Termina en su posición original y escala normal */
}
}

@keyframes slide-in {
0% {
  transform: translateX(-100%); /* Comienza fuera de la pantalla a la izquierda */
}
50% {
  transform: translateX(10%); /* Un pequeño movimiento hacia la derecha */
}
100% {
  transform: translateX(0); /* Termina en su posición original */
}
}

@keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes bookOpen {
0% {
  transform: rotateX(0deg);
}
50% {
  transform: rotateX(-90deg);
}
100% {
  transform: rotateX(0deg);
}
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
  transform: translateY(0);
}
40% {
  transform: translateY(-100px); /* Altura del rebote máxima */
}
60% {
  transform: translateY(-60px); /* Ajustar el segundo rebote */
}
}

.fil0 {
    fill: white;
    fill-rule: nonzero;
    animation: slide-in  7s ease-in-out forwards;
  }


  .fil253 .fil254{
    fill: white;
    fill-rule: nonzero;
    animation: slide-in  7s ease-in-out forwards;
  }
  

.fil1 {
    fill: white;
    fill-rule: nonzero;
    animation: girar  5s ease-in-out forwards;
  }

.fil4 {
display: inline-block;
transform-origin: left;
animation: bookOpen 5s ease-in-out; /* Ajusta la duración y tipo de animación según sea necesario */
}

.fil2 {
display: inline-block;
transform-origin: left;
animation: bookOpen 5s ease-in-out; /* Ajusta la duración y tipo de animación según sea necesario */
}


.fil3 {
animation: bounce 1s infinite; /* Puedes ajustar la duración si lo deseas */
}


.responsive-svg {
  width: 100%; /* 100% en pantallas pequeñas */
}

@media (min-width: 992px) {
  .responsive-svg {
      width: 600px; /* 50% en pantallas grandes */
  }
}

.collage {
width: 100%;
max-width: 500px;
position: relative;
 /* El collage ocupa el 80% del ancho de la pantalla */
padding-bottom: 60%; /* Relación de aspecto 4:3 */
margin: 0 auto;
}

.collage img {
position: absolute;
/* Las imágenes ocupan el 30% del ancho del collage */
height: auto;
opacity: 0; /* Ocultar inicialmente */
transform: scale(0.8) rotate(0deg);
transition: opacity 1s ease-in, transform 1s ease-in;
border-radius: 15px;
}

/* Posiciones y rotaciones para el collage desordenado */
.collage img:nth-child(1) {
top: 5%;
left: 0%;
width: 30%;
transform: rotate(-8deg);
}

.collage img:nth-child(2) {
top: 20%;
left: 55%;
width: 40%;
transform: rotate(8deg);
}

.collage img:nth-child(3) {
width: 30%;
top: 40%;
left: 20%;
transform: rotate(-5deg);
}

.collage img:nth-child(4) {
width: 40%;
top: 60%;
left: 60%;
transform: rotate(5deg);
}

.collage img:nth-child(5) {
width: 30%;
top: 80%;
left: 10%;
transform: rotate(-8deg);
}

.collage img:nth-child(6) {
width: 30%;
top: 50%;
left: 50%;
transform: rotate(-5deg);
}

.fade-in.show {
opacity: 1; /* Mostrar la imagen con el fade-in */
transform: scale(1) rotate(0deg); /* Animación a tamaño normal y rotación final */
}

.responsive-image {
  margin-top: 100px;
width: 850px; /* Tamaño para pantallas pequeñas */
}

/* Ajuste de tamaño en pantallas medianas (>=768px) */
@media (max-width: 768px) {
.responsive-image {
  width: 100%;
}
}

#section5 h1{
    text-align: center;
    padding: 10px;
  }
  #section1 h1{
    text-align: center;
    /* color: white; */
  }
  #section3 h1{
    text-align: center;
    /* color: white; */
  }
 

  .imp-container{
  width: 100% !important;
  }
  .imp-ui-light{
    width: 100% !important;
  }

  .imp-canvas{
    width: 100% !important;
    min-height: 200px !important;
  }
  .parallax {
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%; /* Ajusta el tamaño de la imagen */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1F3465;
    
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
.textfechas {
  font-size: 1.5rem;
}


.parallax2 {
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%; /* Ajusta el tamaño de la imagen */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1F3465;
    font-size: 1.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.parallax3 {
  height: 170px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%; /* Ajusta el tamaño de la imagen */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1F3465;
  font-size: 1.5rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.texto-contorno {
    /* color: #ffffff;
    font-family: "Bowlby One", Sans-serif; */
    font-size: 4.2rem;
    font-weight: 1000;
    letter-spacing: 8px;
}

.texto-contorno2 {
  /* color: #ffffff;
  font-family:"Bebas Neue", sans-serif; */
  font-size: 1.5rem;
  font-weight: 1000;
  font-style: normal;
  letter-spacing: 3px;
}


.fond{
    position: relative; /* Permite la posición del pseudo-elemento */
    background-image: url('../img/lineup.jpg'); /* Imagen de fondo */
    background-size: cover; /* Ajusta la imagen al tamaño del contenedor */
    background-position: center; /* Centra la imagen */
    color: white; /* Color del texto */
    z-index: 1; /* Asegura que el texto quede encima */
}

.fond::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:rgba(177, 2, 95, 0.5); /* Color con transparencia */
    z-index: -1; /* Coloca el color detrás del contenido del div */
}
/* 
    background-image: url('../img/Fondo-marcas.jpg');
    background-size: cover;
    background-position: center;  */

.fond2{
    position: relative; /* Permite la posición del pseudo-elemento */
    padding: 20px;
    font-size: 1.5rem;
    z-index: 1; /* Asegura que el texto quede encima */
}

.fond2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
     /* Color con transparencia */
    z-index: -1; /* Coloca el color detrás del contenido del div */
}

.logos-instutucionales{
  max-height: 10px;
}

@media (max-width: 768px) {
    .parallax {
        background-attachment: scroll;
        background-size: cover; /* Deshabilita el efecto en móviles */
    }
    .texto-contorno {
      font-size: 2rem;
      letter-spacing: 2px;
      margin: 15px;
    }

    .parallax3 {
      height: 300px;
    }

}

.tiket-img{
  max-width: 200px !important;
}
.consigue{
  width: 100%;
}

.responsive-imagelogo{
  width: 100%;
    max-width: 700px; /* La imagen no excederá el ancho de su contenedor */  /* Mantiene la proporción de la imagen */
  }

  .responsive-imagelogotiposi{
  width: 70%;
    max-width: 400px; /* La imagen no excederá el ancho de su contenedor */  /* Mantiene la proporción de la imagen */
  }

  .imglogo{
    max-height: 300px;
  }
  
.fondoEspectaculos {
    width: 100%;
    background-image: url('../img/lineup.jpg');
    background-repeat: no-repeat;
    /* Evita que la imagen se repita */
    background-size: cover;
    /* Ajusta la imagen al tamaño del div */
    background-position: center;
    /* Centra la imagen en el div */
  }

    /* Estilos para el div con fondo */
    .fondo-imagen {
        width: 100%;
        background-image: url('../img/maxime-lebrun-698791-unsplash-dark.jpg');
        background-repeat: no-repeat;
        /* Evita que la imagen se repita */
        background-size: cover;
        /* Ajusta la imagen al tamaño del div */
        background-position: center;
        /* Centra la imagen en el div */
      }


.line-with-image {
  display: flex;
  align-items: center;
  width: 70%;
  margin: auto;
}

.line {
  margin: 20px;
  flex-grow: 1;
  height: 1px; /* Grosor de la línea */
  background-color: #ffffff; /* Color de la línea */
}
.line-with-image img{
width: 200px;
}
.center-image {
  margin: 5px 30px; /* Espaciado a los lados de la imagen */
  width: 100px; /* Ancho de la imagen, ajusta según necesites */
  height: auto;
}

div.highway-slider {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 150px;

    div.highway-barrier {
      overflow: hidden;
      position: relative;
    }

    ul.highway-lane {
      display: flex;
      height: 100%;

      li.highway-car {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #343434;
      }
    }
  }

  @keyframes translateinfinite {
    100% {
      transform: translateX(calc(-150px * 24));
    }
  }

  #infinite div.highway-barrier {

    &::before,
    &::after {
      content: " ";
      position: absolute;
      z-index: 9;
      width: 150px;
      height: 100%;
    }

    ul.highway-lane {
      width: calc(150px * 30);


      li.highway-car {
        width: 150px;
        animation: translateinfinite 30s linear infinite;

        span.fab {
          font-size: 65px;
        }
      }
    }
  }

  .background-div {
/* Ajusta la altura del div */
  background-image: url('../img/Corazon.png'); /* Ruta de la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-size: 250px;
  background-position:bottom right;
  position: relative; /* Asegura que el contenido interno se posicione correctamente */

}

.fondo-imagen-banner {
    position: relative;
    width: 100%;
    background-image: url('../img/lineup2.png');
    background-repeat: no-repeat;
    /* Evita que la imagen se repita */
    background-size: cover;
    /* Ajusta la imagen al tamaño del div */
    background-position: center;
    /* Centra la imagen en el div */
  }

  .fond p{
    font-size: 0.8rem;
  }

  .prueba svg{
    width: 100%;
    max-width: 400px;
  }


    /* Modal para presentación de imágenes */
    .modal {
        display: none; /* Oculta inicialmente */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        justify-content: center;
        align-items: center;
        z-index: 10000; /* Z-index alto para asegurar que esté encima de todo */
    }

 

    .modal-content img {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }

    /* Botones de navegación */
    .prev, .next {
        position: absolute;
        top: 50%;
        font-size: 2rem;
        color: white;
        cursor: pointer;
        user-select: none;
        transform: translateY(-50%);
        padding: 0 10px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 5px;
    }

    .prev { left: -40px; }
    .next { right: -40px; }

    /* Botón de cierre */
    .close {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 2rem;
        color: white;
        cursor: pointer;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 5px;
        border-radius: 5px;
    }

        /* Estilos de la sección del mapa */
        .map-section {
          position: relative;
          width: 100%;
          height: auto; /* Ajusta la altura según sea necesario */
          background-color: #e0e0e0; /* Fondo gris para simular el mapa */
        }

        /* Estilos de la imagen en la esquina */
        .corner-image {
          position: absolute;
          top: 250px; /* Ajusta la distancia desde la parte superior */
          right: -5px; /* Ajusta la distancia desde la parte derecha */
          height: auto;
          z-index: 0; /* Asegura que la imagen esté encima del mapa */
        }


        .imp-object-list::-webkit-scrollbar {
      width: 12px; /* Ancho de la barra de desplazamiento */
    }

    .imp-object-list::-webkit-scrollbar-track {
      background: #ffe7fc; /* Color del fondo de la barra */
    }

    .imp-object-list::-webkit-scrollbar-thumb {
      background-color: #51a5c6; /* Color de la barra */
      border-radius: 10px; /* Bordes redondeados de la barra */
      border: 3px solid #f1f1f1; /* Espacio entre la barra y el borde */
    }

    .imp-object-list::-webkit-scrollbar-thumb:hover {
      background-color: #0d8fc2; /* Color de la barra al pasar el mouse */
    }

    .imp-image{
      border-radius: 20px;
    }

 
    /* 645990
    support@whatsapp.com */

 /* Clase personalizada para cambiar el ancho en pantallas medianas y grandes */
 .fecha {
  width: 100%; /* 100% en pantallas pequeñas */
}

/* A partir de pantallas medianas (md), el ancho será del 50% */
@media (min-width: 768px) {
  .fecha {
    width: 400px;
  }
}


    /* Contenedor de la entornos */
    .entornos {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
      justify-content: center;
      /* Centra horizontalmente */
      align-items: center;
    }

    /* Estructura principal de cada tarjeta */
    .flip-card {
      width: 300px;
      height: 350px;
      opacity: 0; 
      perspective: 1000px;
      transition: opacity 1s ease; 
      transform: rotate(var(--tilt));
      /* Efecto inclinado */
    }
    .flip-card.visible {
            opacity: 1;
            transform: rotate(var(--tilt)); /* El elemento se mueve hacia su posición original */
        }

    /* Clase para la inclinación */
    .flip-card:nth-child(1) {
      --tilt: -5deg;
      animation-delay: 0.6s;
    }

    .flip-card:nth-child(2) {
      --tilt: 3deg;
      animation-delay: 0.6s;
    }

    .flip-card:nth-child(3) {
      --tilt: -3deg;
      animation-delay: 0.6s;
    }

    .flip-card:nth-child(4) {
      --tilt: 4deg;
      animation-delay: 0.6s;
    }

    .flip-card:nth-child(5) {
      --tilt: -4deg;
      animation-delay: 0.6s;
    }

    .flip-card:nth-child(6) {
      --tilt: 5deg;
      animation-delay: 0.6s;
    }

    .flip-card:nth-child(7) {
      --tilt: -2deg;
      animation-delay: 0.6s;
    }

    /* Estilo para el contenedor de las dos caras */
    .flip-card-inner {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.6s;
      border-radius: 10px;
    }

    /* Giro en el eje Y al pasar el cursor */
    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
    }

    /* Estilo para las dos caras */
    .card-side {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 10px;
      overflow: hidden;
    }

    /* Parte frontal */
    .card-front {
      background-size: cover;
      background-position: center;
    }

    /* Parte trasera con contenido */
    .card-back {
      background-size: cover;
      background-position: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;      
      padding: 20px;
      text-align: center;
      transform: rotateY(180deg);
    }

    .card-back::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* background-color: rgba(0, 0, 0, 0.5); */
      /* Ajusta la opacidad aquí */
      border-radius: 10px;
    }

    .card-back-content {
      position: relative;
      z-index: 2;
      /* Poner contenido sobre la capa oscura */      
    }

    /* Estilo de texto y botón en la parte trasera */
    /* .card-back h3 {      
      font-size: 0.9em;
      margin-bottom: 10px;
    } */


    /* ------------CAROUSEL DE INICIO--------------------- */

    .carousel-caption-custom {
      background: rgba(0, 0, 0, 0.5);
      /* Fondo negro semi-transparente */
      padding: 20px;
      border-radius: 8px;
    }

    .carousel-caption-custom h5 {
      color: white;
    }


    /* Fondo del carousel del footer */

    .bg-carousel {
      background-color: rgba(255, 255, 255, 0.5); /* Rojo con 50% de opacidad */
    }

 /* ------------ LOGOS INSTITUCIONALES -------------------- */
    .institucionales {
      position: relative;
      width: 100%;      
      background-color: #000000; /* Color de fondo predeterminado */
      background-image: none;
      background-size: cover; /* La imagen de fondo debe cubrir toda la sección */
      background-position: center; /* Centra la imagen de fondo */
      background-repeat: no-repeat; /* Evita que la imagen se repita */
    }
    
    .responsive-imagelogo {
      max-width: 100%; /* Para que la imagen no se salga de su contenedor */
      height: auto;
      display: block;
      margin-left: auto;
      margin-right: auto; /* Centra la imagen dentro del contenedor */
    }

    .responsive-imagelogotiposi {
      max-width: 70%; /* Para que la imagen no se salga de su contenedor */
      height: auto;
      display: block;
      margin-left: auto;
      margin-right: auto; /* Centra la imagen dentro del contenedor */
    }