* {
	margin: 0;
	padding: 0;
//	box-sizing: border-box;
//	font-family: Trebuchet Ms, Arial;
//	font-size: clamp(14px, 1vw, 124px);
}

  
}

br {
	display: block;
	margin-bottom: 0.2vw; /* Ajusta el espaciado debajo de cada salto de línea */
}

body {
	font-family: 'Trebuchet Ms', 'Segoe UI', Arial, sans-serif;
  font-size: 1.0vw; /* tamaño base */
  //background-color: #46464b; /* color de fondo para verificar que se está aplicando la regla de tamaño de fuente */
  background-color: #252525; /* mas oscuro */
  color: #FFFFFF; /* color de fondo para verificar que se está aplicando la regla de tamaño de fuente */
  margin: 0;
  padding: 0;
}

.contenedor-principal {
	position: relative;
    width: 100%;
    margin: 0 auto; /* Centrar la página */
	z-index: 2;
}

@media (max-width: 1000px) and (orientation: portrait) {
    .contenedor-principal {
        width: 90%;
    }
	
    h1 {
        font-size: 7vw; /* Ajusta el tamaño a lo que necesites */
    }
}





.texto-debajo {
    width: 100%;            /* Asegura que el texto debajo ocupe todo el ancho */
    text-align: left;     /* Centra el texto */
    margin-top: -18px;       /* Espacio entre la imagen y el texto */
}

.titulo-video, .info-video {
    font-size: 0.8rem;        /* Ajusta el tamaño del texto */
	text-align: left;
    color: #FFFFFF;         /* Color del texto */
}

a {
  color: #DDDDDD;
  text-decoration: none;
}
a:hover {
  color: #9999FF;
}






.contenedorclip6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
   /* gap entre videoth, ajustar tambien en funcion y contenedorclip6*/
  width: calc(16.66% - 0.5%); /* Esto hace que las imágenes ocupen un 16.66% del ancho total, con un margen */
  max-width: calc(16.66% - 0.5%); /* Ajusta la anchura a las unidades relativas */
  
  flex-shrink: 0; /* Evita que las imágenes se encojan */
}


.imagen-contenedor {
    position: relative;
    width: 100%; /* Sirve para dar más gap a las imágenes sin romper el diseño, ej 97% */
	overflow: hidden;
	border-radius: 10px;
}

.imagen-contenedor:hover ~ .texto-bajo {
    color: #FFFFFF;  /* Cambia el color cuando el ratón pase sobre la imagen */
    opacity: 1.0;     /* Opcional: añade algo de opacidad para un toque más sutil */
 	filter: drop-shadow(0 0 6px #9999FF);
	transform: translateY(2px);
	transition: all 0.2s ease;
}

/* Muestra texto bajo en hover. hay que anular el text-shadow de arriba */
.NOtexto-bajo span:last-child {
  color: #BBBBBB;
  font-size: clamp(15px, 0.75em, 100px);
  transition: opacity 0.3s ease;
  opacity: 0;
}
.NOcontenedorclip6:hover .texto-bajo span:last-child {
  opacity: 1;
}
.NOcontenedorclip6:hover .texto-bajo .texto-clamp {
  text-shadow: 0 0 5px #fff, 0 0 10px #fff;
}


.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: left;
    color: white;
    font-weight: bold;
    font-size: 16px;
    transition: transform 0.3s ease;
    padding: 10px;
    box-sizing: border-box;
}

.texto-bajo {
    text-align: left; /* Justifica el texto a la izquierda */
	font-size: clamp(14px, 1.0vw, 124px);
    color: #fff;
    margin-top: 0.2vw;
	margin-left: 2.5%;
	padding-top: 0;
    white-space: normal; /* Permite que el texto haga saltos de línea */
    overflow: hidden; /* Evita que el texto haga crecer el div */
    text-overflow: ellipsis; /* Agrega "..." si el texto es muy largo */
    width: 100%; /* Asegura que tome el ancho de la imagen */
	transition: transform 0.1s ease, filter 0.1s ease;
}
.medio.texto-bajo { font-size: clamp(14px, 1.5vw, 124px) !important; }
.grande.texto-bajo { font-size: clamp(14px, 2.5vw, 124px) !important; }
.muygrande.texto-bajo { font-size: clamp(14px, 4vw, 124px) !important; }




.NOcontenedorclipimagen {
    display: block;
    width: 100%;
}



.linea1 {
    position: absolute;
    bottom: 0;  /* Siempre en la parte inferior */
    left: 0;
    padding: 0.3vw;
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: clamp(12px, 1vw, 124px);
    color: #FFFFFF;
    text-shadow:
        -0.05em -0.05em 0em #666666,
        0.05em -0.05em 0em #444444,
        -0.05em 0.05em 0em #000,
        0.05em 0.05em 0em #000,
        0.1em 0.1em .4em rgba(0, 0, 0, 1);
    transition: transform 0.3s ease;
}
.medio.linea1 { font-size: clamp(14px, 1.5vw, 124px) !important; }
.grande.linea1 { font-size: clamp(14px, 2.5vw, 124px) !important; }
.muygrande.linea1 { font-size: clamp(16px, 5vw, 124px) !important; }

.linea2 {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0.3vw;
    margin: 0;
    opacity: 0.0;
    transform: translateY(0px);  /* Empujamos para que no se sobreponga */
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-family: Arial, sans-serif;
    font-size: clamp(10px, 0.75vw, 124px);
    color: #DDDDDD;
    text-shadow:
        -0.05em -0.05em 0em #666666,
        0.05em -0.05em 0em #444444,
        -0.05em 0.05em 0em #000,
        0.05em 0.05em 0em #000,
        0.1em 0.1em .4em rgba(0, 0, 0, 1);
		
		    line-height: 1.2; /* Asegura que las líneas no se amontonen */
    max-height: 100%; /* Asegura que no se recorte más allá del contenedor */
    //overflow: hidden; /* Para que el desbordamiento no se vea (pero sí la primera línea) */
}
.medio.linea2 { font-size: clamp(14px, 1.0vw, 124px) !important; }
.grande.linea2 { font-size: clamp(14px, 1.5vw, 124px) !important; }
.muygrande.linea2 { font-size: clamp(16px, 3vw, 124px) !important; }


/* Hover */
.contenedorclip6:hover .linea1,
.contenedorclip4:hover .linea1,
.contenedorclip2:hover .linea1,
.contenedorclip1:hover .linea1 {
//    transform: translateY(-35px); /* Sube la linea1 para dejar espacio a la linea2 */
    //transform: translateY(-2vw); /* Sube la linea1 para dejar espacio a la linea2 */
	//transform: translateY(calc(-2 * (100vw / 100)));
	transform: translateY(-1.5rem);
}

.contenedorclip6:hover .linea2,
.contenedorclip4:hover .linea2,
.contenedorclip2:hover .linea2,
.contenedorclip1:hover .linea2 {
    opacity: 1;
//    transform: translateY(-10px); /* Mueve la linea2 hacia su lugar */
    //transform: translateY(-0.5vw); /* Mueve la linea2 hacia su lugar */
	//transform: translateY(calc(-0.5 * (100vw / 100)));
	transform: translateY(-0.4rem);
}








/* Asegura que en móvil se vean las dos líneas sin hover */
@media (max-width: 68px) {
    .linea1, .linea2 {
        opacity: 1;
        transform: translateY(0);
    }
}


.NOtexto-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;

  line-height: 1.2em;
  max-height: calc(1.2em * 2);
  margin: 0;
  padding: 0;
  display: block; /* en lugar de inline */
}






#container {
 display: flex;
  overflow-x: hidden;
  width: 100%;
  white-space: nowrap;
}

#container img {
  width: 100%;
  height: auto;
}




.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  //height: max(5%, 40px);
  height: 48px;
  background-color: rgba(0,0,0,0.1); /* Fondo opaco */
  transition: background-color 0.3s ease-in-out; /* Transición suave */
  z-index: 10;
  display: flex; /* Alinea los elementos en una fila */
  align-items: center; /* Centra los elementos verticalmente */
  justify-content: space-between; /* Separa los elementos en los extremos */
  box-sizing: border-box; /* Incluye el padding en el cálculo del tamaño */
}

@media (max-width: 1000px) and (orientation: portrait) {
  .menu {
    height: 96px;
  }
}

.menu img {
  height: 100%;
  width: auto;
  max-height: 100%;
}

.menu a {
  color: #DDDDDD;
  text-decoration: none;
  font-size: 20px;
  margin-right: 20px; /* Crea un margen entre los enlaces */
  white-space: nowrap; /* Evita el salto de línea entre icono y texto */
  display: inline-flex; /* Hace que el icono y el texto se alineen horizontalmente */
  align-items: center; /* Alinea verticalmente el icono con el texto */
   text-shadow: 1px 1px 18px rgba(0, 0, 0, 0.5); /* Sombra de texto */
}

.menu a.right {
  margin-right: 3vw; /* Quita el margen del enlace "Buscador" */
  margin-left: auto; /* Mueve el enlace "Buscador" hacia la derecha */
}

.menu a:hover {
  color: #FFFFFF;
  NOtext-decoration: none;
  NOfont-size: 3vh;
}

/* Reglas específicas para el icono */

.menu a img.icono {
  max-height: clamp(14px,0.8vw,100px); /* Limita la altura del icono */
  width: auto; /* Mantiene la relación de aspecto */
  object-fit: contain; /* Asegura que la imagen no se deforme */
  margin-left: 0.5em; /* Espacio entre el icono y el texto */
  margin-right: 0.5em; /* Elimina el margen derecho si lo tienes */
  vertical-align: middle; /* Alinea verticalmente el icono con el texto */
	margin-top: -0.1vw; /* Sube el icono un pixel */
}

/* Reglas específicas para el logo */
nav.menu img.menu-logo {
  height: 48px;    /* Altura del logo */
  //max-width: 100%;
  min-height: 48px;
  //object-fit: contain;
  flex-shrink: 0;
  margin-right: 2vw;
}

@media (max-width: 1000px) and (orientation: portrait) {
nav.menu img.menu-logo {
    height: 96px !important;
	min-height: 96px !important;
  margin-right: 4vw;
  }
 .menu a {
	   font-size: 40px;
 }
}

/* 4K */
@media (min-width: 2000px) {
  .menu {
    height: 96px;
  }
	nav.menu img.menu-logo {
	height: 96px !important;
	}
	.menu a {
		font-size: 40px;
		margin-right: 40px; /* Crea un margen entre los enlaces */
	}
	.buscador {
  margin-left: auto;
  width: 30vw;
  min-width: 200px;
  max-width: 400px;
  padding: 2vw;
  font-size: 32px !important;
	}
	input[type="search"] {
  padding: 10px; /* Añade espacio alrededor del texto en la caja de búsqueda */
  border-radius: 5px; /* Añade bordes redondeados */
  border: 1px solid #FFFFFF; /* Añade un borde gris */
  font-size: 40px !important; /* Ajusta el tamaño de la fuente */
   //background-color: rgba(0, 222, 0, 0.75) !important; /* Gris con 50% de opacidad */
  min-width: 200px !important;
  max-width: 400px !important;
   width: 50vw !important;
	}
}

NOnav.menu img {
  height: 5vh; /* Altura fija para la imagen */
  max-width: 100%; /* Ancho máximo de la imagen */
  max-height: 5vh; /* Altura máxima de la imagen */
  min-height: 40px;
 object-fit: contain;
  margin-right: 5vh;
}

.NOmenu-logo {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}



.buscador {
  margin-left: auto;
  width: 15vw;
  min-width: 100px;
  max-width: 200px;
  padding: 1vw;
  font-size: 16px !important;
  border: 1px solid #666666  !important; /* Borde rojo de 2px */
  border-radius: 12px  !important; /* Bordes redondeados opcionalmente */
  background-color: rgba(0, 0, 0, 0.25) !important; /* Gris con 50% de opacidad */
}

@media (max-width: 1000px) and (orientation: portrait) {
.buscador {
	  font-size: 40px !important;
  min-width: 200px;
    background-color: rgba(0, 0, 0, 0.5) !important; /* Gris con 50% de opacidad */
	}
}

#input-buscador:focus {
  outline: none !important;
  border: 1px solid #6666FF  !important; /* Borde rojo de 2px */
  //box-shadow: none !important;
}





.contenedor {
  position: absolute;
  width: 100%;
  /* Manten la proporción de la imagen 35% */
  padding-bottom: 36%;
  
  NOpadding-bottom: 30vh; /* Manten la proporción de la imagen 35% */
  NObackground-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* Crea un degradado de opacidad */
  NOz-index: 0;
  NObackground: linear-gradient(to bottom, rgba(51, 51, 51, 0) 0%, rgba(51, 51, 51, 1) 100%);
  background: none;
  //background: #FF0000;
  opacity: 1.0;
}

.portadaimg {
  position: fixed; /* Para que la imagen se quede fija */
  top: 0;
  left: 0;
  width: 100%;
  height: auto; /* Asegura que ocupe toda la pantalla */
  object-fit: cover; /* Ajusta la imagen a la pantalla sin distorsionar */
  z-index: -1; /* Para que quede detrás del contenido */
  transition: opacity 0.3s ease; /* Para suavizar el cambio de opacidad */
}


.portadatexto {
  position: absolute;
  top: 0%;
  left: 0%;
  /*transform: translate(-0%, -50%);*/
  color: white;
  //font-size: 2em; /* Tamaño inicial de la fuente */
  //font-size: 2vw; /* Ajusta la fuente según el ancho del contenedor */
  font-size: clamp(40px, 3vw, 1240px);
  line-height: 1.0; /* Ajusta la distancia entre las líneas */
    display: block;

	    margin-top: 0; /* Elimina cualquier margen superior */
    margin-bottom: 0; /* Elimina el margen inferior */
    padding: 0; /* Elimina el padding por si acaso */

	background: linear-gradient(to bottom, #FFFFFF, #999999) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
	filter: drop-shadow(1px 1px 0.5vw rgba(0,0,0,0.5));
	z-index: 2;
}
.portadatexto2 {
  display: block;
  top: 60%;
  left: 4.3%;
  /*transform: translate(-0%, -50%);*/
  color: white;
  //font-size: 2em; /* Tamaño inicial de la fuente */
  //font-size: 2vw; /* Ajusta la fuente según el ancho del contenedor */
  font-size: clamp(20px, 1.5vw, 1240px);
  line-height: 1.2; /* Ajusta la distancia entre las líneas */
  
  white-space: nowrap; /* Evita el salto de línea */

	background: linear-gradient(to bottom, #FFFFFF, #999999) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
	filter: drop-shadow(1px 1px 0.5vw rgba(0,0,0,0.25));
	z-index: 2;
}

@media (max-width: 1000px) {
    .portadatexto {
		font-size: clamp(20px, 10vw, 1240px);
		filter: drop-shadow(1px 1px 1.5vw rgba(0,0,0,0.5));
    }
    .portadatexto2 {
		font-size: clamp(20px, 5vw, 1240px);
    }
	.contenedor {
		padding-bottom: 120%;
	}
}

.degradadofondo {
position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
	rgba(0, 0, 0, 0) 40%,   /* Transparencia de la portada */
    #252525 85%
  );
  z-index: 2; /* Por encima de la imagen, pero debajo del contenido */
  pointer-events: none; /* No bloquea la interacción */
}

.tira-principal {
  position: relative; /* El contenedor de los botones debe tener position: relative */
}

.tiracontenedor {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  width: 95%;
  margin: 0 auto;
  gap: 0.5%; /* gap entre videoth, ajustar tambien en funcion y contenedorclip6*/
  //cursor: grab;
  user-select: auto;
  position: relative;
  overflow-x: scroll; /* Permite desplazarse sin mostrar la barra de scroll */
  overflow-y: hidden;
  -ms-overflow-style: none;  /* Oculta la barra de scroll en IE y Edge */
  scrollbar-width: none; /* Oculta la barra de scroll en Firefox */
  //touch-action: pan-x; /* Habilita el arrastre táctil en móviles */
  touch-action: auto; /* Permite el desplazamiento vertical de la página y el arrastre horizontal del contenedor */
    //padding-left: 0.7%; /* Desplaza el contenedor hacia la derecha en un porcentaje del ancho */
}

/* Estilo para la barra de scroll oculta (en caso de que sea necesario) */
.tiracontenedor::-webkit-scrollbar {
  display: none;  /* Oculta la barra de scroll en navegadores basados en Webkit (Chrome, Safari, etc.) */
}

/* Mostrar los botones solo en pantallas grandes (más de 900px) */
@media (min-width: 901px) {
  .scroll-IZQ, .scroll-DER {
    display: block;
  }
}

/* Ocultar los botones en dispositivos móviles */
@media (max-width: 900px) {
  .scroll-IZQ, .scroll-DER {
;    display: none;
    display: block;
  }
}


.scroll-IZQ, .scroll-DER {
  position: absolute;  /* Los botones están posicionados absolutamente */
  top: 0;
  bottom: 0;
  //transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 0.1vw;
  border: none;
  font-size: 1vw;
  cursor: pointer;
  z-index: 10;  /* Los botones se sobreponen a las imágenes */
  transition: background 0.3s ease;
  opacity: 0; /* Los botones comienzan ocultos */
  pointer-events: none; /* Los botones no pueden interactuar mientras estén ocultos */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Agregamos la transición */
}

.scroll-IZQ img, .scroll-DER img {
	width: clamp(4px,2.2vw,200px);
	height: auto;
	opacity: 0.85;
}
@media (max-width: 1000px) {
.scroll-IZQ img, .scroll-DER img {
	 width: clamp(64px,3.2vw,200px);
}
}


.scroll-IZQ {
  //left: 2.5%;  /* El botón izquierdo en el extremo izquierdo */
  left: 0%;
}

.scroll-DER {
  //right: 2.5%;  /* El botón derecho en el extremo derecho */
  right: 0%; 
}

.scroll-IZQ:hover, .scroll-DER:hover {
  background: rgba(100, 100, 100, 0.5);
}

/* Cuando el ratón está sobre la tira, los botones se muestran */
.tira-principal:hover .scroll-IZQ, .tira-principal:hover .scroll-DER {
  opacity: 1;
  pointer-events: auto; /* Los botones pueden ser interactuables */
}








/* Para WebKit (Chrome, Safari) */
.tiracontenedor::-webkit-scrollbar {
  //display: none; /* Oculta el scrollbar */
}

.tira-imagen {
	width: 100%; /* Hace que la imagen se ajuste automáticamente al ancho del contenedor */
	max-width: 16.6%;
	height: auto !important; /* Mantiene la proporción de la imagen */
	margin-right: 10px; /* Agrega un margen derecho entre las imágenes */
   /*flex-basis: 100%; Asegura que las imágenes ocupen el 100% del ancho de su contenedor flex */
   flex-grow: 1; /* Hace que las imágenes se expandan para ocupar todo el espacio disponible */
   border-radius: 0.25em;
}


.titulo-contenedor {
  display: flex;
  justify-content: space-between;
  align-items: center;
}






.titulo-tira {
	width: 95%;
	margin: auto; 
	position: relative;
	z-index: 2;
	color: #BBBBBB;
   text-align: left;	
   margin-bottom: 0.25vw; /* Aplica un margen inferior entre la tira arriba y los gráficos */
   font-size: clamp(20px,1.25vw,1000px);
}  

@media (max-width: 1000px) {
    .titulo-tira {
   font-size: clamp(40px,1.25vw,1000px);
    }
}


.tira-abajo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 2.5%; /* Utiliza un porcentaje para el margen */
  //border: 0.1em solid #777777; /* Aplica un outline alrededor del elemento */
  text-align: center; /* Centrado del contenido dentro del contenedor */
   //background: linear-gradient(to right, #656588, #252525); /* Ajusta los colores del degradado */
}

.titulo-derecha {
  font-size: clamp(18px,0.85vw,1000px);
  color: #DDDDDD;
  text-decoration: none;
  text-align: right;
  margin-right: 2%; /* Utiliza un porcentaje para el margen derecho */
  white-space: nowrap; /* Evita que el texto se divida en dos líneas */
  z-index: 2;
}

@media (max-width: 1000px) {
    .titulo-derecha {
   font-size: clamp(25px,0.85vw,1000px);
    }
}

.titulo-derecha:hover {
  color: #FFAAAA; /* Especifica el color del texto del enlace cuando se apunta con el mouse */
}






/* Para botones con texto integrado */

.contenedorclip4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  //max-width: calc(100% / 6 - 0px); /* Ajusta para que solo se muestren 6 imágenes */
  
  width: calc(25% - 0.25%); /* Esto hace que las imágenes ocupen un 16.66% del ancho total, con un margen */
  max-width: calc(25% - 0.25%); /* Ajusta la anchura a las unidades relativas */
  
  flex-shrink: 0; /* Evita que las imágenes se encojan */
}

.contenedorclip2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  //max-width: calc(100% / 6 - 0px); /* Ajusta para que solo se muestren 6 imágenes */
  
  width: calc(50% - 0.25%); /* Esto hace que las imágenes ocupen un 16.66% del ancho total, con un margen */
  max-width: calc(50% - 0.25%); /* Ajusta la anchura a las unidades relativas */
  
  flex-shrink: 0; /* Evita que las imágenes se encojan */
}

.contenedorclip1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  //max-width: calc(100% / 6 - 0px); /* Ajusta para que solo se muestren 6 imágenes */
  
  width: calc(100% - 0.25%); /* Esto hace que las imágenes ocupen un 16.66% del ancho total, con un margen */
  max-width: calc(100% - 0.25%); /* Ajusta la anchura a las unidades relativas */
  
  flex-shrink: 0; /* Evita que las imágenes se encojan */
}


.resaltado {
  color: yellow; /* Cambiar color */
  font-size: clamp(12px, 0.75vw, 124px);
  font-weight: bold; /* Cambiar estilo */
}

.texto-superpuesto {
   position: absolute;
   bottom: -7%;
   left: 2%;
   NOtransform: translate(-0%, -0%);
   color: white;
   NOfont-size: 24px;
   font-family: Arial, sans-serif;
   //font-size: 1em; /* Tamaño inicial de la fuente */
	//font-size: 1vw; /* Ajusta la fuente según el ancho del contenedor */
	font-size: clamp(12px, 1vw, 124px);

	/* background: linear-gradient(to top, red, yellow);
                -webkit-background-clip: text;
                background-clip: text;
                color: transparent; no va con sombras */

	
	NOtext-shadow: 0.1em 0.1em .4em rgba(0, 0, 0, 1); /* Aplica una sombra al texto */
	NOoutline: 12px solid #000000; /* Aplica un contorno alrededor del texto */
	NOoutline-offset: 2px; /* Crea un espacio entre el texto y el contorno */
	NO-webkit-text-stroke: 1px #000000; /* Aplica un contorno alrededor del texto */
	text-shadow:
    -0.05em -0.05em 0em #666666, /* Sombra superior izquierda */
    0.05em -0.05em 0em #444444, /* Sombra superior derecha */
    -0.05em 0.05em 0em #000, /* Sombra inferior izquierda */
    0.05em 0.05em 0em #000, /* Sombra inferior derecha */
	0.1em 0.1em .4em rgba(0, 0, 0, 1); /* Sombra difuminada */

}

.texto-superpuesto.grande {
    font-size: clamp(16px, 4vw, 150px); /* Texto más grande para 1 o 2 imágenes */
}
.texto-superpuesto.medio {
    font-size: clamp(16px, 2vw, 150px); /* Texto más grande para 1 o 2 imágenes */
}

.NOOOOcontenedorclipimagen {
	/* display: inline-block; Permite aplicar un borde a un elemento en línea */
	width: 100%; /* Hace que la imagen se ajuste automáticamente al ancho del contenedor */
	NObox-shadow: 2px 2px 10px rgba(0, 0, 0, 1); /* no sale porque esta en un div */
	NOborder: 0.1em solid #FF8800; /* Aplica un outline alrededor del elemento */
	border: 0.1em solid #222222; /* Aplica un outline alrededor del elemento */
	NOborder: 0.1em solid #FFFFFF; /* Aplica un outline alrededor del elemento */
	border-radius: 0.25em;
	margin-right: 10px;
	//transition: transform 0.1s ease-in-out;
	//animation:animatezoom 0.15s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)};
	
	opacity: 0.25 !important;
    NOvisibility: hidden; /* Hace que la imagen no sea interactuable al principio */
    NOtransition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; /* Transición para fundido */		
}

.contenedorclipimagen {
	width: 100%; /* Hace que la imagen se ajuste automáticamente al ancho del contenedor */
	border: 1px solid #222222; /* Aplica un outline alrededor del elemento */
	border-radius: 10px;
	margin-right: 10px;
	opacity: 0;
	animation: fadeIn 1s forwards; /* Aparece en 1 segundo */
	transition: transform 0.2s ease, filter 0.2s ease;
	filter: contrast(125%) saturate(1.25); /*deberia poner otro diferente para verticales */
}

.contenedorclipimagen.Poster {
	filter: contrast(100%) saturate(100%);
}

@keyframes fadeIn {
    0% {
        opacity: 0; /* Empieza invisible */
    }
    100% {
        opacity: 1; /* Llega a ser completamente visible */
    }
}

/* Para los retrasos de las imágenes */
.contenedorclipimagen.delay1 {animation-delay: 0.0s;}
.contenedorclipimagen.delay2 {animation-delay: 0.1s;}
.contenedorclipimagen.delay3 {animation-delay: 0.2s;}


.contenedorclip4:hover .contenedorclipimagen,
.contenedorclip6:hover .contenedorclipimagen {
  /* Aumenta el tamaño de la imagen al realizar hover */
  transform: scale(1.25);
  /* Disminuye la opacidad de la imagen al realizar hover */
  opacity: 1.0;
  filter: brightness(20%); /* Oscurece la imagen */
  filter: contrast(140%) blur(0.15px) saturate(1.15);
  //border: 0.1em solid #FF8800; /* Aplica un outline alrededor del elemento */
  border-radius: 10px;
  transition: transform 0.3s ease;
}
/* Hover específico solo para las que son Poster */
.contenedorclip4:hover .contenedorclipimagen.Poster,
.contenedorclip6:hover .contenedorclipimagen.Poster {
    filter: contrast(1.1) !important;
	  transform: scale(1.05) !important;
}
.contenedorclip4:hover .texto-superpuesto,
.contenedorclip6:hover .texto-superpuesto {
  /* Cambia el color del texto al realizar hover */
  color: yellow;
}

/* Estilos generales para la caja de búsqueda */
input[type="search"] {
  padding: 5px; /* Añade espacio alrededor del texto en la caja de búsqueda */
  border-radius: 5px; /* Añade bordes redondeados */
  border: 1px solid #ccc; /* Añade un borde gris */
  font-size: 16px; /* Ajusta el tamaño de la fuente */
  background-color: #333; /* Agrega un fondo oscuro */
  color: #fff; /* Cambia el color del texto a blanco */
  margin-right: 1vw; /* Quita el margen del enlace "Buscador" */
}

/* Estilos para la caja de búsqueda cuando está en foco */
input[type="search"]:focus {
  border-color: #0000FF; /* Cambia el color del borde cuando la caja de búsqueda está en foco */
}

hr {
  border: none;
  height: 2px;
  background: linear-gradient(to right, #656565, #252525); /* Ajusta los colores del degradado */
  margin: 0px 0; /* Espaciado encima y debajo del <hr> */
}

.piecontenedor {
position: relative;
  overflow-x: hidden; /* Agrega una barra de desplazamiento horizontal si los elementos no caben en la pantalla */
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(51, 51, 51, 1) 60%, rgba(51, 51, 51, 0) 100%);
  width: 100%;
  min-height: 10em;
  margin-bottom: 0vh;
  display: flex;
  align-items: center; /* Alinea verticalmente los elementos hijos */
  justify-content: center; /* Alinea horizontalmente los elementos hijos */
  padding-top: 1em;
  pointer-events: auto; /* Asegura que los enlaces sean clickeables */
  z-index: 3;
  font-size: clamp(12px, 0.8vw, 100px);
 }
 
.piecontenedor table {
  width: 70%;
  min-width: 500px;
  border-collapse: collapse;
  align: center;
  //border: 1px solid #000;
}

.piecontenedor table td {
  padding: 10px;
  vertical-align: top;
  width: 33.33vw; /* Establece el ancho del td en un tercio del ancho del viewport */
  //border: 1px solid #000;
}

.piecontenedor table td:last-child {
  width: auto; /* Hace que el último td ajuste su ancho al contenido */
}

.piecontenedor table td h3 {
  margin-top: 0;
  font-size: 0.85em; 
  color: #AAAAAA;
	margin-top: 0px; /* Reducir margen superior del título h3 */
	margin-bottom: 0px; /* Reducir margen inferior del título h3 */
}

.piecontenedor table td ul {
  list-style-type: none;
  padding: 0;
  margin-top: 0.2em; /* Elimina el margen superior predeterminado del ul */
}

.piecontenedor table td ul li {
  margin-bottom: 0px;
  margin: 0;
  padding: 0.2em;
}

.piecontenedor a {
  color: #888888;
  text-decoration: none;
  //font-size: 1.5em;
  display: block; /* Establece el ancho del enlace al 100% del contenedor para ocupar todo el espacio disponible */
  margin: 0;
  padding: 0;
  pointer-events: auto; /* Asegura que los enlaces sean clickeables */
  //z-index: 10;
  position: relative; /* Necesario para aplicar el z-index */
  white-space: nowrap;    /* Evita el salto de línea */
}

.pieicono {
	display: inline;
	max-height: 10px;
}

@media (max-width: 1000px) {
.piecontenedor {
  font-size: clamp(32px, 3.0vw, 100px);
}
.piecontenedor table td h3 {
  font-size: 1.3em;
  }
  .piecontenedor table td:last-child {
	padding-left: 6vw;  /* Solo a la última columna */
	}
	.pieicono {
	max-height: 24px;
	}
}














#NOOOOpopup {
      display: none;
      position: fixed;
      z-index: 9999;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
		width: 80%;
		height: 80%;
		max-width: 1200px;
		padding: 1em;	  
	   /* Existinig styles */

  box-shadow: 2px 2px 3em rgba(0, 0, 0, 1);
  background-color: #fff;
}

#NOOOOpopup-iframe {
      border: none;
      width: 100%;
      height: 100%;
	  z-index: 2;
}

#NOOOOclose-popup {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px;
  color: #000;
  font-size: 20px;
  text-decoration: none;
  background-color: #fff;
  cursor: pointer;
  z-index: 1;
}  

#NOOOOblur-layer {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
}

/* Estilo del botón */
a.boton-azul {
    display: inline-block;
    padding: 0.25vw 1.0vw;
    background-color: rgba(0, 123, 255, 0.7); /* Fondo azul con 70% de opacidad */
    color: white !important; /* Asegura que el texto sea blanco */
	
	margin-top: 10; /* Elimina cualquier margen superior */
    margin-bottom: 10; /* Elimina el margen inferior */
	
	color: white !important;
    -webkit-text-fill-color: initial !important; /* Restablecer el color del texto */
    text-shadow: none !important; /* Eliminar la sombra del texto */
	
    text-align: center;
    text-decoration: none;
    border-radius: 0.6em;
    font-size: clamp(2px,1vw,1000px);
    //z-index: 10;
    position: relative;
    border: none !important; /* Asegura que no haya borde */
	
	/* Aquí agregas la sombra difusa */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15) !important; /* Desplazamiento de 3px en X y Y, con un difuminado de 8px */
}

@media (max-width: 1000px) {
	a.boton-azul {
    font-size: clamp(30px,1vw,1000px);
	}
}

/* Hover para cambiar el color */
a.boton-azul:hover {
    background-color: rgba(0, 86, 179, 0.8); /* Fondo más oscuro en hover */
    cursor: pointer;
}

/* Asegura que el texto dentro del enlace también se vea blanco */
a.boton-azul span {
    color: white !important;
}

/* Para separar tiras */
.espacio1 {
  height: 3em;
}

.marco {
  border: 0.05em solid #888888;  /* Bordes del recuadro */
  border-radius: 0.75em;        /* Bordes redondeados */
  padding: 1em;            /* Espacio dentro del recuadro */
  width: 59%;               /* Ancho del recuadro */
  font-family: Arial, sans-serif;  /* Fuente del texto */
  font-size: clamp(14px, 1vw, 24px);
  text-align: left;          /* Alineación del texto a la izquierda */
  color: #EEEEEE;
  display: inline-block;
  vertical-align: top;
}

.marcotitulo {
	font-size: 1.5vw;         /* Ajusta el tamaño de la fuente */
	font-weight: bold;
  color: #AAAAAA;
	margin-bottom: 0.5vw;     /* Reduce el espacio debajo */
	//display: inline-block;
}
.marcopequeno {
	font-size: 0.75vw;         /* Ajusta el tamaño de la fuente */
	font-weight: normal;
  color: #888888;
	margin-bottom: 0.5vw;     /* Reduce el espacio debajo */
	//display: inline-block;
}

.circulo-parpadeante {
		display: inline-block;  /* Asegura que el círculo esté en línea con el texto */
		vertical-align: middle; /* Lo alinea verticalmente con el texto */
		
      width: 8px;          /* Tamaño del círculo */
      height: 8px;
      //background-color: #ff0000;  /* Color del círculo */
	  border: 6px solid #ff0000;  /* El color y grosor del borde del círculo */
      border-radius: 50%;   /* Hace que el círculo sea redondo */
      animation: parpadeo 1.5s infinite; /* Animación para el parpadeo */
	  
	    margin-right: 5px;      /* Espacio entre el círculo y el texto */
		vertical-align: middle; /* Alinea el círculo al medio del texto */
		white-space: nowrap;    /* Evita el salto de línea */
    }

    @keyframes parpadeo {
      0% { opacity: 1; }
      50% { opacity: 0; }
      100% { opacity: 1; }
}

	form input, form select, textarea, button {
		font-size: 0.75vw;
		color: #AAAAAA;
		border-radius: 8px; /* Bordes redondeados */
		background-color: #151515; /* Fondo claro (puedes cambiar el color) */
		border: 1px solid #666666; /* Borde gris claro */
		padding: 8px 12px; /* Espaciado interno del campo */
		width: auto;
		white-space: nowrap;
	}
	form label {
		font-size: 0.85vw;
		margin-left: 1vw;
	}
	form button[type="submit"] {
		font-size: 1vw;
		padding: 0.3vw 2vw;
		background-color: #007bff; /* Color de fondo (puedes cambiarlo) */
		color: white; /* Color del texto */
    border: none; /* Sin borde por defecto */
    border-radius: 8px; /* Bordes redondeados */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background-color 0.3s ease; /* Efecto de transición al pasar el mouse */
	margin-left: 1vw;
	}
	form button[type="submit"]:hover {
		background-color: #0056b3; /* Cambio de color de fondo al pasar el ratón */
		transform: scale(1.05); /* Escalado ligeramente al pasar el ratón */
	}
	form input::placeholder, form select::placeholder {
		//font-size: 0.1vw;
	}
	.Totalpag {
		font-size: clamp(10px,0.7vw,100px);
		color: #666666;
	}
	
	@media (max-width: 1000px) and (orientation: portrait) {
		form label { font-size: 2.5vw; }
		form input, form select, button { font-size: 2.5vw; max-width: 125vw; }
		form button[type="submit"] { font-size: 3vw; }
		.Totalpag { font-size: 1.2vw; }
		.marcopequeno { font-size: 4.0vw; }
	}

	.animacion-flechas {
  margin-left: 0.5rem;
  color: #9999FF;
  display: inline-block;
  animation:
    parpadeo-flechas 0.5s ease-in-out infinite,
    mover-derecha 1s infinite,
    desaparecer 1s 3s forwards;
	text-shadow:
    0 0 5px #9999FF,
    0 0 10px #9999FF,
    0 0 20px #b3b3ff,
    0 0 30px #b3b3ff;
}

@keyframes parpadeo-flechas {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes mover-derecha {
  0% { transform: translateX(0); }
  49% { transform: translateX(15px); }
  50% { transform: translateX(0); }
  100% { transform: translateX(0); }
}

@keyframes desaparecer {
  from { opacity: 1; }
  to { opacity: 0; }
}