/*   XXXXXXXXXXXXXXXXXXXXXX     */
		.box-categories-list li 
		{
		  position: relative;
		  overflow: hidden; /* por si acaso */
		}

		.box-categories-title {
		  position: absolute;
		  bottom: 0; /* pegado abajo de la imagen */
		  left: 0;
		  width: 100%;
		  height: 30px;
		  background: rgba(0, 0, 0, 0.6); /* negro translúcido */
		  color: #fff;
		  text-align: center;
		  margin: 0;
		  padding: 0px;
		  font-size: 1rem;
		}
		
		
		
		
		
		
/*   XXXXXXXXXXXXXXXXXXXXXX     */

			/* Ocultar la barra de scroll en el iframe, esencial para que el padre la maneje */
			.modal-body iframe 
			{
				display: block;
				width: 100%;
				border: none;
				overflow: hidden; /* Esto es clave para que el scroll lo maneje el padre */
			}
			
			
			
			
			
			
			
/*   XXXXXXXXXXXXXXXXXXXXXX     */

	.team-modern-figure {
	  position: relative;
	  display: inline-block;
	}

	.team-modern-figure::after {
	  content: attr(data-title);
	  position: absolute;
	  inset: 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  background: rgba(255,255,255,0.9);
	  color: #000;
	  font-weight: bold;
	  font-size: 16px;
	  opacity: 0;
	  transition: opacity .85s ease;
	  border-radius: 50%; /* coincide con img circular */
	}

	.team-modern-figure:hover::after {
	  opacity: 0.8;
	}
	
	
/*   XXXXXXXXXXXXXXXXXXXXXX     */

			#mainHeader {
			  background-color: transparent;
			  transition: background-color .35s ease, box-shadow .35s ease;
			}

			#mainHeader #logo {
			  height: 120px;
			  transition: transform .35s ease, height .35s ease;
			}

			/* Estado al hacer scroll */
			#mainHeader.header-scrolled 
			{
			background-color: #162e44;
			  box-shadow: 0 4px 10px rgba(0,0,0,.08);
			  padding: 10px 0;
			}

			#cff {
			  transition: all .35s ease;   /* define la animación */
			}

			/* Al hacer scroll */
			#mainHeader.header-scrolled #cff {
			  opacity: 0;                  /* desaparece suavemente */
			  transform: scale(.96);       /* opcional: se encoge un poco */
			}
			#mainHeader.header-scrolled #logo {
			  height: 80px;
			  transform: scale(.96);
			}

			.navbar.navbar-dark.header-scrolled .nav-link {
			  color: #fff !important;
			}






/*   SECTION SLIDER     */

			/* Altura fija siempre */
			#x { height: 200px; }

			/* Versión flotante SOLO para pantallas LG y mayores */
			@media (min-width: 992px) {
				#x {
					position: relative;
					margin-top: -220px; /* Se mete 150px dentro de la sección 1 (75%) */
					margin-bottom: -50px; /* Se mete 50px dentro de la sección 3 (25%) */
					z-index: 10;
				}

				#x .container {
					background: white;
					padding: 20px;
					border-radius: 8px;
					box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* efecto flotante */
				}
			}

			/* Móvil: se muestra normal, sin superposición */
			@media (max-width: 991.98px) {
				#x {
					margin-top: 0;
					margin-bottom: 0;
					position: static;
					height: auto; /* Puedes mantener 200px si así lo deseas */
				}
			}


/*   SECTION EXPERIENCIAS     */


			.carousel-vertical .carousel-inner { /* height: 250px; Ajusta según necesites */ }
			.carousel-vertical .carousel-item { transition: transform .6s ease-in-out; }
			.carousel-vertical .carousel-item-next.carousel-item-start,
			.carousel-vertical .carousel-item-prev.carousel-item-end { transform: translateY(0); }


/*  SECTION  MAPAS */
		/*Profile Card 3*/
		.profile-card-3 {
		   font-family: "Open Sans", Arial, sans-serif;
		   position: relative;
		   float: left;
		   overflow: hidden;
		   width: 100%;
		   text-align: center;
		   height: 430px;
		   border: none;
		}

		.profile-card-3 .background-block {
		   float: left;
		   width: 100%;
		   height: 200px;
		   overflow: hidden;
		}

		.profile-card-3 .background-block .background {
		   width: 100%;
		   vertical-align: top;
		   opacity: 0.5;
			transition: opacity .3s ease; /* opcional, para que sea suave */	   
		}
		
		.profile-card-3:hover .background-block .background {
		  opacity: 1;
		}

		.profile-card-3 .card-content {
		   width: 100%;
		   padding: 15px 25px;
		   color: #232323;
		   float: left;
		   background: #efefef;
		   height: 50%;
		   border-radius: 0 0 5px 5px;
		   position: relative;
		   z-index: 150;
		}

		.profile-card-3 .card-content::before {
		   content: "";
		   background: #efefef;
		   width: 120%;
		   height: 100%;
		   left: 11px;
		   bottom: 51px;
		   position: absolute;
		   z-index: -1;
		   transform: rotate(-13deg);
		}

		.profile-card-3 .profile {
		   border-radius: 50%;
		   position: absolute;
		   bottom: 50%;
		   left: 50%;
		   max-width: 100px;
		   opacity: 1;
		   box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
		   border: 2px solid rgba(255, 255, 255, 1);
		   -webkit-transform: translate(-50%, 0%);
		   transform: translate(-50%, 0%);
		   z-index: 99999;
		}

		.profile-card-3 h2 {
		   margin: 0 0 5px;
		   font-weight: 600;
		   font-size: 25px;
		}

		.profile-card-3 h2 small {
		   display: block;
		   font-size: 15px;
		   margin-top: 10px;
		}

		.profile-card-3 i {
		   display: inline-block;
		   font-size: 16px;
		   color: #232323;
		   text-align: center;
		   border: 1px solid #232323;
		   width: 30px;
		   height: 30px;
		   line-height: 30px;
		   border-radius: 50%;
		   margin: 0 5px;
		}

		.profile-card-3 .icon-block {
		   float: left;
		   width: 100%;
		   margin-top: 15px;
		}

		.profile-card-3 .icon-block a {
		   text-decoration: none;
		}

		.profile-card-3 i:hover {
		   background-color: #232323;
		   color: #fff;
		   text-decoration: none;
		}


/*  SECTION  REELS */

/* Evitar que las imágenes se apilen verticalmente al cargar */
.owl-carousel:not(.owl-loaded) {
    display: flex !important;
    overflow: hidden;
    max-height: 450px; /* Ajusta según la altura de tus thumbnails */
    opacity: 0.5; /* Opcional: para que se vea suave mientras carga */
}

.owl-carousel:not(.owl-loaded) .thumbnail-mary {
    min-width: 270px; /* El ancho de tus imágenes */
    margin-right: 30px;
}

.thumbnail-mary-figure_pc {
    height: 340px; /* O la altura que definas para el slider */
    background-size: cover;
    background-position: center;
}