/*-----------------------------------*/
/*------ 79. Overflow horizontal -----*/
/*-----------------------------------*/

/* El texto decorativo de fondo (.custom-big-font-size-1, usado en "Tu
   proyecto" en home.php y contacto.php) mide ~147px con white-space:nowrap,
   más ancho que cualquier pantalla de móvil, y provoca scroll horizontal
   en toda la página. Lo reducimos en pantallas estrechas y añadimos
   overflow-x:hidden como red de seguridad para este tipo de elementos
   decorativos que se salen intencionadamente del contenedor. */
html, body {
	overflow-x: hidden;
}

@media (max-width: 767px) {
	.custom-big-font-size-1 {
		font-size: 3.6rem !important;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.custom-big-font-size-1 {
		font-size: 5.5rem !important;
	}
}

.gtranslate_wrapper a {
    padding-left: 15px !important;
	font-weight: 600 !important;
    text-decoration: none !important;
	color: var(--light);
}

.gt_switcher_wrapper .gt-current-lang{
    color: var(--tertiary) !important;
}

.gtranslate_wrapper a:hover{
    color: var(--primary) !important;
}


.gtranslate_wrapper > div {
  position: static !important;
}

.gt_switcher_wrapper{
	padding-right: 0px !important;
	padding-top: 0px !important;
	padding-left: 40px !important;

}

@media (max-width: 991px){
	.gt_switcher_wrapper{
		padding-left: 0px !important;
	}
}


#logo-bg{
    filter: brightness(60%);
}

#logo-bg{
	transition: filter 0.03s ease;
	will-change: filter;
}

.footer-copyright a:hover #logo-bg{
  filter: brightness(100);
}

/*-----------------------------------*/
/*------ 76. bombita de WhatsApp ------*/
/*-----------------------------------*/

.whatsapp-bubble {
	position: fixed;
	bottom: 30px; /* Distancia desde abajo */
	right: 30px; /* Distancia desde la derecha */
	z-index: 9999; /* Asegura que esté sobre otros elementos */
  }
  
.whatsapp-bubble img {
	width: 60px; /* Tamaño de la imagen de WhatsApp */
	border-radius: 50%; /* Forma circular */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Sombra */
	transition: transform 0.3s ease; /* Efecto de transición */
}
  
.whatsapp-bubble:hover img {
	transform: scale(1.1); /* Efecto de escala al pasar el mouse */
}

.whatsapp:active,
.whatsapp:focus,
.whatsapp {
	position:fixed;
	width:60px;
	height:60px;
	bottom:60px;
	left:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	font-size:30px;
	z-index:100;
}
  
.whatsapp-icon {
	margin-top: 11px;
	font-size: 36px;
}
  
.whatsapp-icon:hover, .whatsapp:hover {
	color: #9af9bd !important;
	transition: color 0.3s ease-in-out;
}

.text-light-2,
.text-color-default{
    color:#969696 !important;
}

/*-----------------------------------*/
/*------ 77. Header centrado ---------*/
/*-----------------------------------*/

@media (min-width: 992px) {
	#header .header-container {
		padding: 0 6.4vw;
	}
}

#header .header-column-logo,
#header .header-column-lang {
	flex: 1 1 0;
}

#header .header-column-logo {
	align-items: flex-start;
}

#header .header-column-lang {
	align-items: flex-end;
}

#header .header-column-nav {
	flex: 0 1 auto;
}

@media (max-width: 991px) {
	#header .header-column-logo,
	#header .header-column-lang {
		flex: 0 0 auto;
	}

	#header .header-column-nav {
		flex: 1 1 auto;
	}

	#header .header-column-logo {
		order: 1;
	}

	#header .header-column-lang {
		order: 2;
		align-items: center;
	}

	#header .header-column-nav {
		order: 3;
	}

	#header .header-logo img {
		max-width: 130px;
		width: 130px;
		height: auto;
	}
}

/*-----------------------------------*/
/*------ 78. Galería home ------------*/
/*-----------------------------------*/

/* Las fotos originales tienen proporciones muy distintas (algunas muy
   panorámicas, otras casi cuadradas). El plugin de masonry (fitRows) da a
   cada miniatura la altura que le corresponde según su proporción natural,
   así que dos fotos en la misma fila pueden acabar con alturas muy
   distintas y dejar un hueco en blanco bajo la más corta. Forzamos una
   proporción fija y recortamos con object-fit para que todas midan igual.

   Ojo: en escritorio (>=992px) las fotos NO miden todas lo mismo: las dos
   primeras y las dos últimas ocupan un cuarto de fila (col-lg-3) y las
   otras dos ocupan media fila (col-6, el doble de ancho). Si a todas se
   les da la misma proporción, la foto ancha sale el doble de alta que sus
   vecinas y dejan un hueco igual de grande. Por eso la foto ancha usa una
   proporción panorámica que es el doble de "ancha" que la de sus vecinas,
   así con el doble de anchura le sale la misma altura. Por debajo de
   992px todas las fotos ocupan el mismo ancho (col-6), así que todas usan
   la misma proporción. */
.masonry-loader .masonry-item {
	aspect-ratio: 4 / 3;
}

@media (min-width: 992px) {
	.masonry-loader .masonry-item.col-lg-3 {
		aspect-ratio: 4 / 3;
	}

	.masonry-loader .masonry-item:not(.col-lg-3) {
		aspect-ratio: 8 / 3;
	}
}

.masonry-loader .masonry-item .d-inline-block {
	width: 100%;
	height: 100%;
	vertical-align: top;
}

.masonry-loader .masonry-item .d-inline-block img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}