/* HOJA DE ESTILOS CSS DIAGRAMACION */

		* {
		  box-sizing: border-box;
		}
		
		body {
		  font-family: "Gloria Hallelujah", cursive;
		  font-weight: 400;
		  font-style: normal;
		  color: #212122;
		  font-size: 18px;
		  line-height: 1.6;
		  position: relative;
		  margin: 0px;
		  border:0;
		  min-height: 100vh; /* FUENTE */
		  overflow-x: hidden; /* OCULTA EL SCROLL HORIZONTAL */
		}
		
		ol,ul{list-style:none}
		a{text-decoration:none; color:#ccc} /*COLOR ENLACES REPOSO */


/* ESTILO DE LOS ENLACES MENU INDICE */
		.breadcrumbs{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:10px auto 0;padding:0 10px;font-size:16px;font-weight:700; color:#63A5DA; gap:20px 20px;max-width:1770px;display:flex;justify-content: center;align-items: center; padding-top:inherit; padding:10px} 
		.breadcrumbs .link{position:relative;color: #000} /*COLOR TEXTO MENU INDICE */
		.breadcrumbs .link:after{content:'/';position:relative;right:-5px;color:#727272} /*BARRA DIAGONAL */
		.breadcrumbs .link:focus,.breadcrumbs .link:hover{color:#CCC} /*COLOR TEXTO MENU INDICE HOVER */

/* ESTILO DE LOS ENLACES MENU IDIOMA */
		.menuidioma{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap; margin:10px auto 0;padding:0 10px; font-size:16px; font-weight:700; color:#63A5DA; gap:20px 20px; max-width:1770px; padding-top:inherit; padding:10px; justify-content: right;} /* CENTRADO MENU IDIOMA*/
		.menuidioma .link{position:relative;color: #000} /*COLOR TEXTO MENU IDIOMA */
		.menuidioma .link:focus,.menuidioma .link:hover{color:#CCC} /*COLOR TEXTO MENU IDIOMA OVER */
		
		
		.bloque_menu {
			padding: 10px;
			border-radius: 8px;
			
		}
		
		.titulo_menu {
			font-size: 24px;
			margin-bottom: 	px;
			color: #FFFFFF;
		}
		
		.enlaces {
			list-style-type: none;
			padding: 0;
		}
		
		.enlaces li {
			margin-bottom: 0px;
		}
		
		.nav-link {
			text-decoration: none;
			color: #CCC; /* COLOR DEL MENU FOOTER REPOSO*/
			font-size: 18px;
			font-weight: bold;
			transition: color 0.3s ease;
		}
		
		.nav-link:hover {
			color: #000; /* COLOR DEL MENU FOOTER SOBRE*/
		}
		
		/* COLOR DEL MENU ACTIVO*/
		.active {
					font-weight: bold;
					color: #3CF;
				}

/* BOTON OCULTO SCROLL REPOSO */
		.scroll-to-top {
			display: none; /* Oculto por defecto */
			position: fixed;
			bottom: 20px;
			right: 20px;
			background-color: #FFFFFF;
			color: #CCC;
			border: none;
			padding: 10px 20px;
			border-radius: 5px;
			cursor: pointer;
			font-size: 10px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			transition: opacity 0.3s ease;
		}

/* BOTON OCULTO SCROLL HOVER*/
		.scroll-to-top:hover {
			background-color: #000000;
		}
		
		.footer_main-block_socials {
			list-style: none;
			padding: 0;
			display: flex;
			justify-content: center;
			gap: 20px;
		}

/* BOTONES REDES SOCIALES*/
		.socials {
			list-style: none;
			padding: 0;
			display: flex;
			justify-content: center; /* Centra los iconos horizontalmente */
			gap: 20px; /* Espacio entre los iconos */
		}
		
		.socials li {
			display: inline-block;
		}
		
		.socials a {
			text-decoration: none;
			color: #CCC; /* Color inicial de los iconos */
			font-size: 24px; /* Tamaño de los iconos */
			transition: color 0.3s ease; /* Transición suave para el cambio de color */
		}
		
		.socials a:hover {
			color: #000000; /* Color al pasar el cursor sobre los iconos */
		}
		
		/* CLASES ICONOS */
		.icon-instagram:before {
			content: "\e900"; /* Código del icono de Instagram */
		}
		
		.icon-tiktok:before {
			content: "\e901"; /* Código del icono de TikTok */
		}
		
		.icon-youtube:before {
			content: "\e902"; /* Código del icono de YouTube */
		}
		
		.icon {
			display: inline-block;
			color: #444444;
			width: 1em;
			height: 1em;
			fill: currentColor;
		}
		.icon-home {
		  /* El uso de currentColor arriba nos permite usar `color` para cambiar el color de nuestros iconos: */
		  color: white;
		  
		  /* El ancho y alto del SVG se establecieron previamente en 1em. Esto nos permite usar `font-size` para cambiar el tamaño de nuestro icono: */
		  font-size: 24px;
		}
		
		/* Limpia los flotantes después de las columnas APLICADO A TODOS LOS DIVS*/
		.row:after {
		  content: "";
		  display: table;
		  clear: both;
		}

/* ESTILO DEL HEADER */
			.header {
			  background-color: #63A5DA;
			  vertical-align: baseline;
			  padding-top:5%;
			  border: none; /* Eliminar borde */
			}
			
			/* ESTILO DEL LOGO SUPERIOR */
			.logo {
			  height: auto; /* ALTURA */
			  width: 100%; /* Ancho de la imagen en porcentaje */
			  border: none; /* Eliminar borde */
			  padding: 0px;
			  width: 80%;
			  margin: auto;
			  vertical-align: bottom;
			}
		
		.img-logo {
					width: 100%; /* Ancho de la imagen en porcentaje */
					height: auto; /* Altura automática para mantener la proporción */
					border: 0;
					position: sticky; /* Posición absoluta dentro del contenedor */
					top: 5vh; /* Posición superior del texto (ajustable) */
					left: 25%; /* Posición izquierda del texto (ajustable) */
					margin-bottom:-10px; /* HACE QUE LA IMAGEN BAJE */
				}
				
		.cont-logo {
					width: 100%; /* Ancho de la imagen en porcentaje */
					height: auto; /* Altura automática para mantener la proporción */
					border: none; /* Eliminar borde */
				}		

/* ESTILO DEL LOGO INFERIOR */
		
		
		.BoxLogo {
		  display: block;
		  width:100%;
		  height:20vh; 
		  overflow: hidden;  /* Ajusta la imagen para que no se salga del contenedor */
			}
		
		.LogoSmall {
		  background: url("../img/logo_t-q-m_peque.svg");
		  background-size:cover; 
		  background-position: center;
		  background-repeat: no-repeat;
		  background-size: cover;
		  width: 100%; /* TAMAÑO LOGO */
		  height: 100%; /* ALTURA */
		}

		
/* ESTILO DEL FOOTER */
		.content {
		  background-color: #FFFFFF;
		  padding: 10px;
		  padding-left:10%;
		  padding-right:10%;
		  text-align: center;
		  margin-top: inherit;
		  margin-bottom: inherit;
		  height:auto;
		}
		
		/* IDIOMA */
		.idioma {
		  float: left;
		  width: 100%;
		  padding: 10px;
		  margin-top: 25px;
		  margin-bottom: 25px;
		}
		
		/* IDIOMA */
		.indice {
		  float: left;
		  width: 100%;
		  padding: 10px;
		  margin-top: 25px;
		  margin-bottom: 25px;
		}
		
		/* BANNER */
		.banner {
		  float: left;
		  width: 100%;
		  margin-bottom: 50px;
		 
		}

/* DIVS SQUARE INDEX */

		.cont-square {
		  position: relative;
		  margin: 2rem;
		  border-radius: 30px;
		  overflow: hidden; /* oculta cualquier contenido que sobrepase los bordes de un elemento */
		}
		
		.square-img { /* CONTENEDOR IMAGEN BOTON INDEX */
		  position: absolute;
		  bottom: 0; /* Esto posiciona la imagen en la parte inferior del contenedor */
		  left: 0;
		  right: 0;
          margin: 0 auto;
		  margin: 7px;
		  width: 80%; /* Ajusta el ancho según tus necesidades */
		  height: auto;
		}
		
		/* SEUDOCLASE: CONTIENEN LAS CARACTERISTICAS DE CAPA TRANSPARENTE TARJETAS INDIVIDUALES */
		.square-img::before{
		  content: ""; /* Le damos contenido vacío al seudoelemento para que se muestre como un elemento. */
		  position: absolute; /* Posicionamos el seudoelemento de forma absoluta dentro del div padre. */
		  top: 0; /* Hacemos que el seudoelemento ocupe todo el espacio del div padre. */
		  left: 0; /* Hacemos que el seudoelemento ocupe todo el espacio del div padre. */
		  width: 100%; /* Hacemos que el seudoelemento ocupe todo el espacio del div padre. */
		  height: 100%; /* Hacemos que el seudoelemento ocupe todo el espacio del div padre. */
		  background-color: rgba(0, 0, 0, 0.001); /* Color negro con 10% de transparencia */
		}

		.square-img-center {
		  position: absolute;
		  bottom: 50%; /* Esto posiciona la imagen en la parte inferior del contenedor */
		  transform: translateY(-50%); /* Opcional: para centrar verticalmente */
		  left: 0;
		  right: 0;
          margin: 0 auto; 
		  width: 80%; /* Ajusta el ancho según tus necesidades */
		  height: auto; 
		}
		
		.imagen01, .imagen02 {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  width: 100vw;
		  height:60vh;
		}
		
		.imagen03, .imagen04 {
		    position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
			height: 100vh;		  
		}
		
		.imagen01 {
	      background: url("../img/square_imagen_god_bless_you_t-q-m_tarjetas_cristianas.svg");
		  background-size: contain;
		  background-position: center;
		  background-repeat: no-repeat;
		}
		
		.imagen02 {
	      background: url("../img/square_imagen_gift_t-q-m_tarjetas_cristianas.svg");
		  background-size: contain;
		  background-position: center;
		  background-repeat: no-repeat;
		}
		
		.imagen03 {
	      background: url("../png/square_imagen_any_t-q-m_tarjetas_cristianas.png");
		  background-size: contain;
		  background-position: bottom;
		  background-repeat: no-repeat;
		}
		
		.imagen04 {
	      background: url("../png/square_imagen_amy_t-q-m_tarjetas_cristianas.png");
		  background-size: contain;
		  background-position: bottom;
		  background-repeat: no-repeat;
		}
		
		/* Media query para dispositivos móviles */
		@media (max-width: 600px) {
			.imagen01, imagen02, imagen03, imagen04 {
				background-size: 60%;
			}
		}
		
		.background {
		  z-index: -1;  
		}
		
		.zoom {
		  transition: transform 0.3s ease-in-out;
		}
		
		.zoom:hover {
		  transform: scale(1.5);
		  transition: transform 0.5s ease-in-out, box-shadow 0.3s ease-in-out;
		}
		
		/* 1 COLUMNA Crea 1 columnas iguales que floten una al lado de la otra */
		.columna {
			display: flex;
			flex: 1;
			min-width: 300px; /* Ajusta este valor según tus necesidades */
			box-sizing: border-box;
			padding: 0px;
			margin-top: 25px;
			margin-bottom: 25px;
			align-items: center;
			justify-content: center;
   			height: auto; /* ALTURA AUTOMATICA */
		}

/* 1 COLUMNA Crea 1 columnas iguales que floten una al lado de la otra */
		.column1 {
			flex: 1;
			min-width: 300px; /* Ajusta este valor según tus necesidades */
			box-sizing: border-box;
			padding: 25px;
			margin-top: 25px;
			margin-bottom: 25px;
			align-items: center;
			height: auto; /* ALTURA AUTOMATICA */
		}

/* 2 COLUMNAS IGUALES Crea 2 columnas iguales que floten una al lado de la otra */
		.column2 {
		  float: left;
		  width: 50%;
		  padding: 10px;
		  margin-top: 25px;
		  margin-bottom: 25px;
		  object-fit: cover;
		  align-items: center;
		  height: auto; /* ALTURA AUTOMATICA */
		}

/* 3 COLUMNAS IGUALES Crea tres columnas iguales que floten una al lado de la otra COLUMNAS ORIGINALES */
		.column3 {
		  float: left;
		  width: 33.33%;
		  margin-top: 25px;
		  margin-bottom: 25px;
		  align-items: center;
		  height: auto; /* ALTURA AUTOMATICA */
		}

/* 4 COLUMNAS IGUALES FOOTER Crea 2 columnas iguales que floten una al lado de la otra */
		.column4 {
		  float: left;
		  width: 25%;
		  margin-top: 25px;
		  margin-bottom: 25px;
		  align-items: center;
		  height: auto; /* ALTURA AUTOMATICA */
		}

/* COPYRIGHT */
		.copyright {
		  float: left;
		  width: 100%;
		  margin-top: 25px;
		  margin-bottom: 25px;
		  align-items: center;
		
		}
		
		.footer_year{font-size:16px; color:#FFF; font-weight: bold; display:flex;justify-content: center;align-items: center; padding-top:inherit} /*AÑO COPYRIGHT*/
		
		/* ESTILO DEL FOOTER */
		.footer {
		  background-color: #63A5DA;
		  padding-left:10%;
		  padding-right:10%;
		  text-align: center;
		  border: none; /* Eliminar borde */
		}

/* Diseño responsivo: hace que las columnas se apilen una encima de la otra en lugar de una al lado de la otra */
		@media (max-width: 600px) {
				  .column1, .column2, .column3, .column4, .idioma, .indice, .copyright, .banner {
					width: 100%;
				  }
				}

/* INICIO CODIGO CAPA TRANSPARENTE */
		.image-container {
			position: relative;
			display: inline-block;
			width: 100%; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none; pointer-events: none;
			}
		.image-container img {
			display: block; 
			width: 100%; 
			-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none; pointer-events: none;
			}
		.overlay {
			position: absolute;
			top: 0; 
			left: 0; 
			width: 100%; 
			background: rgba(255, 255, 255, 0); 
			-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none; pointer-events: none;
			}/* Capa transparente */
/* FIN CODIGO CAPA TRANSPARENTE */

/* INICIO CODIGO PARRAFOS */

		.titular2 {
			font-size:2vh;
			font-weight: bold;
			color: #63A5DA;
		}
		
		.titular {
			font-size:3vh;
			font-weight: bold;
		}
		
		.textblock {
			flex: 1;
			min-width: 300px; /* Ajusta este valor según tus necesidades */
			box-sizing: border-box;		
		}
		
		.span {
			display: flex;
			flex-wrap: wrap;
		}
		
		.parrafo_1 {
			flex: 1;
			font-size: 18px;
			min-width: 100px; /* Ajusta este valor según tus necesidades */
			box-sizing: border-box;
			padding: 25px;
		}
		
		/* Media query para dispositivos móviles */
		@media (max-width: 600px) {
			.parrafo_1 {
				flex: 100%;
				min-width: 100%;
			}
		}
		
/* FIN CODIGO PARRAFOS */



/* INICIO CONTENEDOR BANNER PRINCIPAL */
        .contenedor-banner {
            position: relative;
			display: inline-block;
			width: 100%; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none; pointer-events: none;
			overflow: hidden;  /* Ajusta la imagen para que no se salga del contenedor */
        }
		
		/* CONTENEDOR BANNER PRINCIPAL */
		.cont-backgroundbanner {
          display: block;
		  width:100%;
		  height:50vh; /* ALTURA BANNER */
		  overflow: hidden;  /* Ajusta la imagen para que no se salga del contenedor */
        }
		
		.Background01, .Background02, .Background03, .Background04, .Background05, .Background06{
		  width: 100%; /* TAMAÑO LOGO */
		  height: 100%; /* ALTURA */
			}
		
		/* CONTENEDOR IMAGEN DEL BANNER */		
		.Background01 {
		  background: url("../img/imagen-portada-t-q-m-tarjetas-cristianas-01.svg");
		  background-size:cover; 
		  background-position: center;
		  background-repeat: no-repeat;
		  background-size: cover;
		}
		
		.Background02 {
		  background: url("../img/imagen-portada-t-q-m-tarjetas-cristianas-02.svg");
		  background-size:cover; 
		  background-position: center;
		  background-repeat: no-repeat;
		  background-size: cover;
		}
		
		.Background03 {
		  background: url("../img/imagen-portada-t-q-m-tarjetas-cristianas-03.svg");
		  background-size:cover; 
		  background-position: center;
		  background-repeat: no-repeat;
		  background-size: cover;
		}
		
		.Background04 {
		  background: url("../img/imagen-portada-t-q-m-tarjetas-cristianas-04.svg");
		  background-size:cover; 
		  background-position: center;
		  background-repeat: no-repeat;
		  background-size: cover;
		}
		
		.Background05 {
		  background: url("../img/imagen-portada-t-q-m-tarjetas-cristianas-05.svg");
		  background-size:cover; 
		  background-position: center;
		  background-repeat: no-repeat;
		  background-size: cover;
		}
		
		.Background06 {
		  background: url("../img/imagen-portada-t-q-m-tarjetas-cristianas-06.svg");
		  background-size:cover; 
		  background-position: center;
		  background-repeat: no-repeat;
		  background-size: cover;
		}
		
		/* SEUDOSEGMENTO PONE CAPA TRANSPARENTE */
		.contenedor-banner::before {
		  content: "";
		  position: relative; 
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-color: rgba(0, 0, 0, 0.5); /* Color negro con 10% de transparencia */
		}

        .imagen {
            width: 100%; /* Ancho de la imagen en porcentaje */
            height: auto; /* Altura automática para mantener la proporción */
			border-radius: 30px;
        }

        .img-texto {
			position: absolute; /* Posición absoluta dentro del CONTENEDOR TEXTO BANER */
			top: 20%; /* Posición superior del texto (ajustable) */
			left: 50%; /* Posición izquierda del texto (ajustable) */
			width: 40%; /* Ancho de la imagen en porcentaje */
			height: auto; /* Altura automática para mantener la proporción */
		}
		
		.character1, .character2, .character3, .character4, .character8, .character9, .character10 {
            position: absolute; /* Posición absoluta dentro del contenedor*/
            top: 0%; /* Posición superior del texto (ajustable) */
            left: 5%; /* Posición izquierda del texto (ajustable) */
            height: auto; /* Altura automática para mantener la proporción */
        }
		
		.character1 {
			width: 31.3%; /* Ancho de la imagen en porcentaje BANNER AMY */
        }
		
		.character2 {
			width: 29.4%; /* Ancho de la imagen en porcentaje BANNER ANY */
        }
		
		.character3 {
			width: 29.0%; /* Ancho de la imagen en porcentaje BANNER NACHO */
        }
		
		.character4 {
			width: 35.3%; /* Ancho de la imagen en porcentaje BANNER TATO */
        }
		
		.character8 {
			width: 18.4%; /* Ancho de la imagen en porcentaje BANNER AMY LINEA DE TIEMPO*/
        }
		
		.character9 {
			width: 27.8%; /* Ancho de la imagen en porcentaje BANNER ANY LINEA DE TIEMPO*/
        }
		
		.character10 {
			width: 29.3%; /* Ancho de la imagen en porcentaje BANNER NACHO LINEA DE TIEMPO*/
        }
		
		
		/* INICIO BANNER IMAGEN PERSONAJES BANNER */
		.BoxPers {
		  display: block;
		  width:100%;
		  height:100vh;
		  overflow: hidden;  /* Ajusta la imagen para que no se salga del contenedor */
			}
		
		.Pers01 {
	      background: url("../png/imagen-personaje-nacho-T-Q-M.png");
		  margin-left: 3.5em;
		  background-size: contain;
		  background-position: top;
		  background-repeat: no-repeat;
		}
		
		.Pers02 {
	      background: url("../png/imagen-personaje-tato-T-Q-M.png");
		  margin-left: 3.5em;
		  background-size: contain;
		  background-position: top;
		  background-repeat: no-repeat;
		}
		
		.Pers03 {
	      background: url("../png/imagen-personaje-any-T-Q-M.png");
		  margin-left: 3.5em;
		  background-size: contain;
		  background-position: top;
		  background-repeat: no-repeat;
		}
		
		.Pers04 {
	      background: url("../png/imagen-personaje-amy-T-Q-M.png");
		  margin-left: 3.5em;
		  background-size: contain;
		  background-position: top;
		  background-repeat: no-repeat;
		}
		/* FIN BANNER IMAGEN PERSONAJES BANNER */
		
		/* INICIO MENU PORTADAS */	
		.Box {
		  display: block;
	      width:100%;
		  height:100vh;
		  border-radius: 10px;
			}
			
		.Box01 {
	      background: url("../svg/Portada-Texto_08.svg");
		  background-size: contain;
		  background-position: center;
		  background-repeat: no-repeat;
		  background-color:#F66363; /* ROSA FUERTE */
		}
		
		.Box02 {
	      background: url("../svg/Portada-Texto_09.svg");
		  background-size: contain;
		  background-position: center;
		  background-repeat: no-repeat;
		  background-color:#FFCC00; /* AMARILLO OCRE */
		}
		
		.Box03 {
	      background: url("../svg/Portada-Texto_10.svg");
		  background-size: contain;
		  background-position: center;
		  background-repeat: no-repeat;
		  background-color:#FF0000; /* ROJO VIVO */
		}
		
		/* FIN MENU PORTADAS */	
		
/* SLIDER */
		.swiper-container {
			width: 100%;
		    height:100%;
		}
		
		.swiper-wrapper {
			display: flex;
			align-items: center;
			width: 100%;
			height:100%;
		}
			
		.swiper-slide img {
			display: flex;
			width: 100%;
			border-radius: 30px;
			height:70%; /* TAMAÑO CONTENEDOR IMAGEN */
			object-fit: cover;
			max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
		}
		
		.swiper-slide {
			display:block;
			height:100%;
			text-align: center;
			font-size: 18px;
			background: #fff;
			justify-content: center;
			align-items: center;
			padding: 1px;
			margin: 0 5px; /* Espacio entre las imágenes */
			opacity: 0.1; /* Imágenes no activas más transparentes */
			transition: opacity 0.3s ease;
		}
		
		.swiper-slide-active {
			opacity: 1; /* Imagen activa completamente visible */
		}
		
		.imagen-amy {
	      background: url("../png/image_slider_amy_t-q-m_tarjetas_cristianas.png");
		  width:100%;
		  height:100vh;
		  background-size: contain;
		  background-position: center;
		  background-repeat: no-repeat;
		}
		
		.imagen-any {
	      background: url("../png/image_slider_any_t-q-m_tarjetas_cristianas.png");
		  width:100%;
		  height:100vh;
		  background-size: contain;
		  background-position: center;
		  background-repeat: no-repeat;
		}
		
		.imagen-nacho {
	      background: url("../png/image_slider_nacho_t-q-m_tarjetas_cristianas.png");
		  width:100%;
		  height:100vh;
		  background-size: contain;
		  background-position: center;
		  background-repeat: no-repeat;
		}
		
		.imagen-tato {
	      background: url("../png/image_slider_tato_t-q-m_tarjetas_cristianas.png");
		  width:100%;
		  height:100vh;
		  background-size: contain;
		  background-position: center;
		  background-repeat: no-repeat;
		}
		
		.imagen-lu {
	      background: url("../png/image_slider_lu_t-q-m_tarjetas_cristianas.png");
		  width:100%;
		  height:100vh;
		  background-size: contain;
		  background-position: center;
		  background-repeat: no-repeat;
		}
		
/* MENU TARJETAS ICONOS */	
		
		.container {
		   display: flex;
		   flex-wrap: wrap;
		   margin-top: 50px;
		   margin-bottom: 50px;
		  justify-content: space-around;
		}
				
		.div-item { /* CONTENEDOR ICONOS MENU */
		  position: relative;
		  width: 32%; /* Ajusta el ancho según tus necesidades */
		  height: auto;
		  background-color: #FFF;
		  border-width: 6px;
		  border-style: solid;
		  text-align: center;
		  padding: 50px;
		  margin-bottom: 20px;
		  border-radius: 30px;
		  overflow: hidden;  /* Ajusta la imagen para que no se salga del contenedor */
		}
		
		.rojo{
			 border-color: #FF6666;	 
		}
		
		.verde{
			border-color: #33CC99;
		}
		
		.violeta{
			border-color: #CC66CC;
		}
		
		.amarillo{
			border-color: #FFCC00;
		}
		
		.azulRey{
			border-color: #6666CC;
		}
		
		.azul{
			border-color: #00CCFF;
		}
		
		
		/* Media query para dispositivos móviles */
		@media (max-width: 600px) {
			.div-item {
				flex: 100%;
				min-width: 100%;
			}
			
			.cont-backgroundbanner {
          display: block;
		  width:100%;
		  height:16vh; /* ALTURA BANNER PARA DISPOSITIVOS MOVILES*/
		  overflow: hidden;  /* Ajusta la imagen para que no se salga del contenedor */
        }
		}
		
		/* ESTILOS PARA PANTALLAS 4K */
       @media (min-width: 1920px) {
  		.cont-backgroundbanner {
          display: block;
		  width:100%;
		  height:64vh; /* ALTURA BANNER PARA DISPOSITIVOS MOVILES*/
		  overflow: hidden;  /* Ajusta la imagen para que no se salga del contenedor */
        } 
		}
		
		.cover_icono{
			max-width: 100%;
			}

	.overlay, .overlay41, .overlay42, .overlay43, .overlay44, .overlay45, .overlay46 {
	  /* Estilos comunes para todas las overlays */
	  display: none; /* Ocultar overlays por defecto */
	  position: absolute; 
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: transparent; /* Color de fondo inicial transparente */
	  transition: background-color 0.3s ease; /* Transición suave de color */
	}
	
	.overlay { background-color: #63A5DA; } /* AZUL */
	.overlay41 { background-color: #FF6666; } /* ROSA */
	.overlay42 { background-color: #33CC99; } /* VERDE MENTA */
	.overlay43 { background-color: #CC66CC; } /* VIOLETA */
	.overlay44 { background-color: #FFCC00; } /* AMARILLO */
	.overlay45 { background-color: #6666CC; } /* AZUL REY */
	.overlay46 { background-color: #00CCFF; } /* AZUL INFANTIL */
		
		
	/* ESTE ES EL EFECTO ROLLOVER SOBRE LOS CUADROS DEL MENU TARJETAS */
	.div-item:hover .overlay,
	.div-item:hover .overlay41, 
	.div-item:hover .overlay42, 
	.div-item:hover .overlay43, 
	.div-item:hover .overlay44, 
	.div-item:hover .overlay45, 
	.div-item:hover .overlay46 {
	  opacity: 1;
	}

		.overlay, .overlay41, .overlay42, .overlay43, .overlay44, .overlay45, .overlay46 { /* CONFIGURACIÓN GENERAL DE LOS BOTONES MENUS */
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  color: white;
		  opacity: 0;
		  transition: opacity 0.3s ease-in-out;
		  display: flex;
		  flex-direction: column;
		  justify-content: center;
		  align-items: center;
		  padding:15%;
		}

/* CONTENEDOR IMAGENES MENU */
		.div-image { 
		  position: relative;
		  width: 32%; /* Ajusta el ancho según tus necesidades */
		  height: auto;
		  background-color: #FFF;
		  border-color: #f2f2f2;
		  border-width: 3px;
		  border-style: solid;
		  text-align: center;
		  margin-bottom: 20px;
		  border-radius: 30px;
		  overflow: hidden;  /* Ajusta la imagen para que no se salga del contenedor */
		}
		
		.cover_image{
				max-width: 100%; /* La imagen nunca será más ancha que su contenedor */
				height: auto; /* La altura se ajusta automáticamente para mantener la proporción */
			}
			
			/* ESTE ES EL EFECTO ROLLOVER SOBRE LOS CUADROS DEL MENU TARJETAS LIBRO */
		.div-image:hover .overlay2,
		.div-image:hover .overlay3 {
		  opacity: 1;
		}
		
		.overlay2 { background-color: #63A5DA; } /* COLOR FONDO AZUL PALETA DE COLOR */
		.overlay3 { background-color: #FFCCCC; } /* COLOR FONDO ROSA LIBRO COLOREAR */
				
		.overlay2, .overlay3  { /* CONFIGURACIÓN GENERAL COMUN DE LOS BOTONES LIBROS */
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  color: white;
		  opacity: 0;
		  transition: opacity 0.3s ease-in-out;
		  display: flex;
		  flex-direction: column;
		  justify-content: center;
		  align-items: center;
		  padding:15%;
		}
		
				
			/* Media query para dispositivos móviles */
		@media (max-width: 600px) {
			.div-image {
				flex: 100%;
				min-width: 100%;
			}
		}

/* DIVS RECTANGLE MENU TARJETAS */

		.cont-rectangle {
		  display: flex;
    	  justify-content: center; /* Centra el contenido horizontalmente */
    	  align-items: center;    /* Centra el contenido verticalmente */
		  position: relative;
		  width: 95%;
		  height: 350px;
		  border-radius: 10px;
		  overflow: hidden;
		}
		
        
		
/* TARJETAS TAMAÑO PEQUE MENU */
		.img-01 {background-image: linear-gradient(0deg, #FFCCCC 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* rosa  */
		.img-02 {background-image: linear-gradient(0deg, #FF9966 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* naranja apagado  */
		.img-03 {background-image: linear-gradient(0deg, #CCCCFF 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* lila  */
		.img-04 {background-image: linear-gradient(0deg, #CC3366 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* rojo apagado  */
		.img-05 {background-image: linear-gradient(0deg, #FF3399 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* magenta  */
		.img-06 {background-image: linear-gradient(0deg, #6666CC 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* azul rey  */
		.img-07 {background-image: linear-gradient(0deg, #FF9999 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* rosa salmon  */
		.img-08 {background-image: linear-gradient(0deg, #33CC99 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* verde menta  */
		.img-09 {background-image: linear-gradient(0deg, #669999 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* verde grisaceo  */
		
		.img-11 {background-image: linear-gradient(0deg, #FF6666 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* naranja vivo  */
		.img-12 {background-image: linear-gradient(0deg, #FFCC00 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* amarillo ocre  */
		.img-13 {background-image: linear-gradient(0deg, #CC66CC 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* morado claro  */
		.img-14 {background-image: linear-gradient(0deg, #FF9933 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* naranja vivo  */
		.img-15 {background-image: linear-gradient(0deg, #FF0000 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* rojo vivo  */
		.img-16 {background-image: linear-gradient(0deg, #33CC99 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* verde menta  */
		.img-17 {background-image: linear-gradient(0deg, #00CCFF 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* azul cielo  */
		.img-18 {background-image: linear-gradient(0deg, #6699FF 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* azul infantil  */
		.img-19 {background-image: linear-gradient(0deg, #FF9999 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* rosa salmon  */
		
		.img-21 {background-image: linear-gradient(0deg, #00CCFF 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* azul cielo */ 
		.img-22 {background-image: linear-gradient(0deg, #6699FF 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* azul violaceo */
		.img-23 {background-image: linear-gradient(0deg, #FFCC00 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* amarillo vivo */
		.img-24 {background-image: linear-gradient(0deg, #003399 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* azul oscuro */
		.img-25 {background-image: linear-gradient(0deg, #336699 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* azul apagado */
		.img-26 {background-image: linear-gradient(0deg, #003333 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* verde oscuro */
		.img-27 {background-image: linear-gradient(0deg, #996699 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* morado apagado  */
		.img-28 {background-image: linear-gradient(0deg, #660066 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* morado vivo  */
		.img-29 {background-image: linear-gradient(0deg, #993366 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* rojo magenta  */
		
		/* DEFINICION CARACTERÍSTICAS COMUNES CONTENEDORES */
		.img-01, .img-02, .img-03, .img-04, .img-05, .img-06, .img-07, .img-08, .img-09, .img-11, .img-12, .img-13, .img-14, .img-15, .img-16, .img-17, .img-18, .img-19, .img-21, .img-22, .img-23, .img-24, .img-25, .img-26, .img-27, .img-28, .img-29 { 
		  width: 100%;
		  height: 300px;
		  padding: 5%;
		  border-radius: 10px;
		}
		
		
		
/* TARJETAS TAMAÑO INDIVIDUAL MENU */
		
		.img-fondo {
            width: 100%;
		    height: 300px;
		    background-image: linear-gradient(0deg, #FFFFFF 1px, transparent 1px); /* COLOR DE FONTO TARJETA IMAGEN FONDO */
		    background-size: 1px 1px;
		    background-repeat: repeat;
			border-radius: 10px;
        }
				
		.rectangle-img-center {
			display: flex;
    		justify-content: center; /* Centra el contenido horizontalmente */
    		align-items: center;    /* Centra el contenido verticalmente */
			border-radius: 10px;
		}
		
		.backing {
		  z-index: -1;
		}
		
		.zooming {
		  transition: transform 0.3s ease-in-out;
		  border-radius: 10px;
		}
		
		.zooming:hover {
		  transform: scale(1.0);
		  transition: transform 0.5s ease-in-out, box-shadow 0.3s ease-in-out;
		}
		
		.subtitulo {
			font-size:.8em;
			color: #CCC;
			font-weight:bold;
			margin-top: 10px;
		}
		
		
		
		
/* INICIO PAGINACION */	

        .divider{height:3px;background:#CCC;max-width:400px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex} /* COLOR LINEA PAGINACION */
		.pagination_main .link.current{margin-right:10px}
		.pagination{margin:40px 0 60px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:30px}
		.pagination_main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1;font-size:18px;font-weight:900;gap:15px}
		.pagination_main .icon{font-size:20px}
		.pagination_main .link.current,.pagination_main .link.disabled{pointer-events:none}
		.pagination_main .link.current,.pagination_main .link:focus,.pagination_main .link:hover{color: #63A5DA} /* COLOR LINKS ACTIVO PAGINACION */
		.pagination_main .link.current{margin-right:10px}
		.separator {text-decoration:none; color:#ccc} /*COLOR PUNTOS EN LA PAGINACION  */
		
		
/* DIVS TARJETA INDIVIDUAL */
		
/* COLOR DE FONTO TARJETA */		
		.img-i-01 {background-image: linear-gradient(0deg, #FFCCCC 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* rosa */ 
		.img-i-02 {background-image: linear-gradient(0deg, #FF9966 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* naranja  */
		.img-i-03 {background-image: linear-gradient(0deg, #CCCCFF 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* lila  */
		.img-i-04 {background-image: linear-gradient(0deg, #CC3366 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* rojo oscuro  */
		.img-i-05 {background-image: linear-gradient(0deg, #FF3399 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* majenta  */
		.img-i-06 {background-image: linear-gradient(0deg, #6666CC 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* azul rey */ 
		.img-i-07 {background-image: linear-gradient(0deg, #FF9999 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* ladrillo  */
		.img-i-08 {background-image: linear-gradient(0deg, #33CC99 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* verde juvenil  */
		.img-i-09 {background-image: linear-gradient(0deg, #669999 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* verde oscuro  */
		
		.img-i-11 {background-image: linear-gradient(0deg, #FF6666 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* naranja vivo  */
		.img-i-12 {background-image: linear-gradient(0deg, #FFCC00 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* amarillo ocre  */
		.img-i-13 {background-image: linear-gradient(0deg, #CC66CC 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* violeta vivo  */
		.img-i-14 {background-image: linear-gradient(0deg, #FF9933 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* naranja vivo  */
		.img-i-15 {background-image: linear-gradient(0deg, #FF0000 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* rojo vivo  */
		.img-i-16 {background-image: linear-gradient(0deg, #33CC99 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* verde juvenil  */
		.img-i-17 {background-image: linear-gradient(0deg, #00CCFF 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* azul cielo */
		.img-i-18 {background-image: linear-gradient(0deg, #6699FF 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* azul violaceo */
		.img-i-19 {background-image: linear-gradient(0deg, #FF9999 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* ladrillo  */
		
		.img-i-21 {background-image: linear-gradient(0deg, #00CCFF 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* azul cielo */ 
		.img-i-22 {background-image: linear-gradient(0deg, #6699FF 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* azul violaceo */
		.img-i-23 {background-image: linear-gradient(0deg, #FFCC00 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* amarillo ocre  */
		.img-i-24 {background-image: linear-gradient(0deg, #003399 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* azul oscuro */
		.img-i-25 {background-image: linear-gradient(0deg, #336699 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* azul apagado */
		.img-i-26 {background-image: linear-gradient(0deg, #003333 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* verde apagado */
		.img-i-27 {background-image: linear-gradient(0deg, #996699 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* morado */
		.img-i-28 {background-image: linear-gradient(0deg, #660066 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* morado oscuro */
		.img-i-29 {background-image: linear-gradient(0deg, #993366 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* morado rojizo */
		
		.img-i-31 {background-image: linear-gradient(0deg, #fcb48c 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* Naranja Nombres Dios */ 
		.img-i-32 {background-image: linear-gradient(0deg, #bea89b 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* Arena Nombres Dios */
		.img-i-33 {background-image: linear-gradient(0deg, #f2c1c2 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* Palo Rosa Nombres Dios  */
		.img-i-34 {background-image: linear-gradient(0deg, #88c4d2 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* Azul Turqueza Nombres Dios */
		.img-i-35 {background-image: linear-gradient(0deg, #d5aea3 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* Cafe Calido Nombres Dios */
		.img-i-36 {background-image: linear-gradient(0deg, #6ccecf 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* Verde Menta Nombres Dios */
		.img-i-37 {background-image: linear-gradient(0deg, #cae5d1 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* Arena Nombres Dios */
		.img-i-38 {background-image: linear-gradient(0deg, #ffbfa6 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* Verde Opaco Nombres Dios */
		.img-i-39 {background-image: linear-gradient(0deg, #b59f9e 1px, transparent 1px); background-size: 1px 1px;background-repeat: repeat;} /* Rojo Oscuro Nombres Dios */
		
		/* DEFINICION CARACTERÍSTICAS COMUNES CONTENEDORES TARJETAS INDIVIDUALES */
		.img-i-01, .img-i-02, .img-i-03, .img-i-04, .img-i-05, .img-i-06, .img-i-07, .img-i-08, .img-i-09, .img-i-11, .img-i-12, .img-i-13, .img-i-14, .img-i-15, .img-i-16, .img-i-17, .img-i-18, .img-i-19, .img-i-21, .img-i-22, .img-i-23, .img-i-24, .img-i-25, .img-i-26, .img-i-27, .img-i-28, .img-i-29, .img-i-31, .img-i-32, .img-i-33, .img-i-34, .img-i-35, .img-i-36, .img-i-37, .img-i-38, .img-i-39 { 
		  position: relative; /* Necesario para posicionar el seudoelemento */ 
		  width: 100%;
		  height: auto;
		  padding: 5%;
		  border-radius: 10px;
		}
		
		/* SEUDOSEGMENTOS: CONTIENEN LAS CARACTERISTICAS DE CAPA TRANSPARENTE TARJETAS INDIVIDUALES */
		.img-i-01::before, .img-i-02::before, .img-i-03::before, .img-i-04::before, .img-i-05::before, .img-i-06::before, .img-i-07::before, .img-i-08::before, .img-i-09::before, .img-i-11::before, .img-i-12::before, .img-i-13::before, .img-i-14::before, .img-i-15::before, .img-i-16::before, .img-i-17::before, .img-i-18::before, .img-i-19::before, .img-i-21::before, .img-i-22::before, .img-i-23::before, .img-i-24::before, .img-i-25::before, .img-i-26::before, .img-i-27::before, .img-i-28::before, .img-i-29::before{
		  content: ""; /* Le damos contenido vacío al seudoelemento para que se muestre como un elemento. */
		  position: absolute; /* Posicionamos el seudoelemento de forma absoluta dentro del div padre. */
		  top: 0; /* Hacemos que el seudoelemento ocupe todo el espacio del div padre. */
		  left: 0; /* Hacemos que el seudoelemento ocupe todo el espacio del div padre. */
		  width: 100%; /* Hacemos que el seudoelemento ocupe todo el espacio del div padre. */
		  height: 100%; /* Hacemos que el seudoelemento ocupe todo el espacio del div padre. */
		  background-color: rgba(0, 0, 0, 0.01); /* Color negro con 10% de transparencia */
		}