/* Estilos existentes... */
header{
    height: 60px;
    width: 100%;
    background-color: black;
    color: white;
    text-decoration: none;
    display:flex;
    align-items: center;
    position: fixed;
    top: 0;   
    z-index: 100;
  }
  
  header a{
    margin: 20px;
  }
  .containerlogo{
    width: 180px;
    max-width: 800px;
    margin-right: auto;
  }
  .containermenu{
    display: flex;
    font-family: "FF Mark W05",Arial,sans-serif;
    font-size: 14px;
  }
  .logo1{
    width: 126px;
    height: 43px;
    margin-right: 100%;
  }
  .itemmenu{
    text-decoration: none;
    color: white;
    margin-left: 25px;
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .tmenu{
    text-decoration: none;
    color: white;
  }
  .tmenuretro{
    text-decoration: none;
    color: rgb(255, 255, 255);
  }
  .lovemenu{
    position: absolute;
    height: 24.6px;
    width: 65.4px;
    transform: translate(65px,-2px);
    z-index: -1;
  }
  .linearetro{
    background: rgb(255, 0, 183);
    height: 3px;
    transform: translateY(-15px);
    width: 0;
    transition: 0.3s; 
  }
  .itemmenu:hover .linearetro{
    width: 100%;
  }
  .linea{
    background: #900;
    height: 3px;
    transform: translateY(-15px);
    width: 0;
    transition: 0.3s;
  }
  
  .itemmenu:hover .linea{
    width: 100%;
  }
  .menu_responsive{
    background-color: rgba(0, 0, 0, 0.836);
    color: black;
    flex-direction: column;
    z-index: 1000;
    position: fixed;
    height: 100%;
    width: 100%;
    display: none;
    transition: all 0.5s;
    backdrop-filter: blur(5px);
  }
  .itemmenu_re{
    text-decoration: none;
    color: rgb(255, 255, 255);
    margin-left: 25px;
    font-size: 32px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-top: 30px;
  }
  .contenedor_responsive{
    display: flex;
    flex-direction: column;
    position: absolute;
    transform: translateY(25%);
  }
  
  .containermenu ul{
    padding: 0;
    display: flex;
  }
  .botonresponsive{
    position: absolute;
    height: 30px;
    width: 30px;
    right: 0;
    margin: 20px;
  }
  
  .logomenu{
    height: 35px;
  }
  
  #botonmenu{
    display: none;
  }
  
  
  .botonresponsive{
    position: absolute;
    height: 30px;
    width: 30px;
    right: 0;
    margin: 20px;
  }
  
  body, html {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    background-color: black;
  }
  
  .container {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Oculta el contenido que sobresale */
    flex-direction: column;
  }
  
  h1 {
    position: relative;
    z-index: 2; /* Asegura que el título esté por encima del iframe */
    margin: 0;
    color: white;
    display: flex;
    justify-content: center;
    font-weight: 200;
  }
  
  .titulo1 {
    position: relative;
    z-index: 2; /* Asegura que el título esté por encima del iframe */
    margin: 0;
    font-size: 115px;
    margin-left: -396px;
    margin-top: 50px;
  }
  
  .titulo2 {
    position: relative;
    z-index: 2; /* Asegura que el título esté por encima del iframe */
    margin: 0;
    font-size: 115px;
    margin-left: 438px;
  }
  .titulo3 {
    position: relative;
    z-index: 2; /* Asegura que el título esté por encima del iframe */
    margin: 0;
    font-size: 115px;
    margin-left: 230.2px;
  }
  
  .titulo1, .titulo2, .titulo3 {
    transition: opacity 0.5s ease, transform 0.5s ease; /* Transición para la opacidad y la transformación */
  }
  
  .titulo1.hidden, .titulo2.hidden, .titulo3.hidden {
    z-index: -1;
    opacity: 0; /* Desaparece el título */
    transform: translateY(-20px); /* Mueve el título hacia arriba */
  }
  
  .titulo1.visible, .titulo2.visible, .titulo3.visible {
    opacity: 1; /* Vuelve a aparecer el título */
    transform: translateY(20px); /* Mueve el título hacia abajo */
  }
  
  
  
  .footer-info {
    display: flex;
    justify-content: space-between; /* Espacio entre los elementos */
    align-items: center; /* Centra verticalmente */
    width: 100%; /* Ocupa todo el ancho */
    color: rgb(202, 202, 202); /* Color del texto */
    position: relative; /* Posiciona el contenido de forma relativa */
    z-index: 2; /* Z-index mayor que el footer */
    margin-bottom: 15px;
    font-weight: 300;
    font-size: 21px;
  }
  
  .footer-info .left {
    margin-left: 30px; /* Margen a la izquierda */
  }
  
  .footer-info .right {
    margin-right: 30px; /* Margen a la derecha */
    color: rgba(52, 52, 252, 0.878);
  }
        footer{
          background-color: rgb(0, 0, 0);
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
        }
        .containerlogos a{
          text-decoration: none;
        }
        .containerlogos{
          position: absolute;
        }
        .logosrs{
          width: 26px;
          height: 30px;
        padding: 4px;
        text-decoration: none;
        }
        .lastcontainer{
          display: flex;
          width: 100%;
          justify-content: space-between;
          align-items: center;
          position: relative;
        }
        .contacto{
          color: rgb(213, 213, 213);
          margin-right: 15px;
        }
        .copyright{
          color: rgb(213, 213, 213);
          margin-left: 15px;
        }
  

.carousel {
    display: flex;
    align-items: center;
    flex-direction: row;
    position: absolute;
    left: 35%;
    top: 25%;
}

#main-image {
    width: 330px; /* Mismo tamaño que la imagen principal */
    height: 400px; 
    border-radius: 10px;
    transition: transform 0.3s ease; /* Transición suave */
    position: relative;
    z-index: 1;
    margin-right: 15px;
    margin-left: 15px;
}

.imgs-pr {
    display: flex;
    margin-left: 20px; /* Espacio entre la imagen principal y las miniaturas */
}

#main-image:hover{
    transform: scale(1.1);
    z-index: +2; 
}

.img-pr {
    width: 330px; /* Mismo tamaño que la imagen principal */
    height: 400px; /* Mismo tamaño que la imagen principal */
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.5s;
    margin: 0 10px; /* Espacio entre las miniaturas */
}

.img-pr:hover {
    transform: scale(1.05); /* Efecto de zoom al pasar el ratón */
}

.active{
    width: 452px !important;
    height: 473px !important;
    margin-right: 25px !important;
    margin-left: 25px !important;
}
@media(max-width: 1415px){
	.titulo1{
	font-size:80px;
	margin-left:0px;
	margin-top:0px;
	}
	.titulo2, .titulo3{
	font-size:45px;
	margin-left:0px;
	margin-top:0px;
	}
	.carousel{
	left: 20%;
	}
}

  @media(max-width: 1090px){
    #botonmenu{
        display: flex;
    }
    .containermenu ul{
        display: none;
    }
	  #main-image{
		width:222px;
		height:280px;
		}
	  .img-pr{
		width:222px;
		height:280px;
		}
		.active{
		width:222px !important;
		height:280px !important;
		}
	  .carousel{
	  top:19%;
	  }
	  .titulo1{
	  margin-top:400px;
	  text-align:center;
	  font-size:70px;
	  }
	  .titulo1.hidden, .titulo2.hidden, .titulo3.hidden {
		z-index: -1;
		opacity: 1; /* Desaparece el título */
		transform: none; /* Mueve el título hacia arriba */
	  }
  }
@media(max-width: 630px){
          
        
          footer {
          background-color: rgb(0, 0, 0);
          display: flex;
          justify-content: normal;
          align-items: normal;
          flex-direction: column;
          height: auto;
          }
            .lastcontainer {
              display: flex;
              width: 100%;
              justify-content: space-between;
              position: relative;
              flex-direction: column;
              align-items: start;
            }
            .containerlogos{
              position: absolute;
              right: 37px;
              margin-top: 48px;
            }
            .copyright {
              color: rgb(213, 213, 213);
              margin-left: 35px;
            }
            .contacto {
              color: rgb(213, 213, 213);
              margin-right: 0;
              transform: translateY(-10%);
              margin-left: 38px;
            }
	
		  #main-image{
		width:215px;
		height:270px;
		}
	  .img-pr{
		width:215px;
		height:270px;
		}
		.active{
		width:215px !important;
		height:270px !important;
		}
	  .carousel{
	  left:10%;
	  }
	  .titulo1{
	   font-size:40px;
	  }
	.titulo2, .titulo3{
	   font-size:20px;
	}
	.footer-info{
	font-size: 13px;
	}
	}