@charset "utf-8";
/* CSS Document */




/* -------------------------------------------

#WPBakery Page Builder

------------------------------------------- */

/* fix */
.vc_row-full-width.vc_clearfix {
	width: 100%;
	float: left;
}

/* heading */
.vc_do_custom_heading {
	font-weight: 400
}

.vc_custom_heading.fix {
	padding-bottom: 30px;
}
	
	.vc_custom_heading.fix:before {
		content         : '';
		width           : 60px;
		height          : 2px;
		background-color: #2D2D2D;
		position        : absolute;
		right           : 0;
		bottom          : 0;
		left            : 0;
		margin          : auto;
	}



/* section */
.cont--section.bakery {
	width: 100%;
	float: left;
}

/* tx */
.cont--section.bakery p,
.cont--section.bakery ul,
.cont--section.bakery ul li {
	width      : 100%;
	float      : left;
}
.cont--section.bakery p {
	word-wrap: break-word;
}

	.cont--section.bakery ul {
		margin: 12px 0;
	}

	.cont--section.bakery p + ul {
		margin-top: 0;
	}

/* space */
.vc_empty_space {
	width: 100%;
	float: left;
}

/* img */
.wpb_single_image img {
	
}

/* video */
.vc_video-aspect-ratio-169 {
	overflow     : hidden;
}

/* galeria */
.bakery--gallery.wpb_gallery {
	margin-bottom: 0;
}

	.bakery--gallery.wpb_gallery .slides {
		border-radius: 12px;
		overflow     : hidden;
	}


/* FORM */
.bakery form,
.bakery .cont--form,
.bakery .cont--form .d--grid {
	float: none;
}



/* --------------------------------------

COMPONENSTES CUSTOM

--------------------------------------- */


/* #CAROUSEL */
.image-carousel-container {
	width   : 100%; /* Asegúrate de que el carrusel ocupe el ancho deseado */
	height  : auto; /* Define una altura o déjala en auto si las imágenes tienen altura uniforme */
	overflow: hidden; /* Importante para Swiper */
}
.image-carousel-container .swiper-slide img {
	width     : 100%;
	height    : 100%;
	object-fit: contain; /* Ajusta la imagen para cubrir el contenedor */
	filter: grayscale(100%)
}
/* Estilos básicos para la navegación y paginación si no usas los predeterminados de Swiper */
.image-carousel-container .swiper-button-prev,
.image-carousel-container .swiper-button-next {
	color           : #fff; /* Color de las flechas */
	background-color: rgba(0,0,0,0.5);
	padding         : 10px;
	border-radius   : 50%;
	font-size       : 20px; /* Tamaño del icono */
}
.image-carousel-container .swiper-pagination-bullet {
    background-color: #ccc; /* Color de los puntos inactivos */
    opacity: 1;
}
.image-carousel-container .swiper-pagination-bullet-active {
    background-color: #007aff; /* Color de los puntos activos */
}


/* #MAPA */
.cont--mapa {
	width: 100%;
	float: none;
}

	.cont--mapa canvas,
	.cont--mapa .mapboxgl-canvas {
		width: 100% !important
	}



/* #VIDEO PX */
.cont--video-px {
	width: 100%;
	float: left;
}

	/* video */
	.cont--video-px .video {
		width   : 100%;
		float   : left;
		height  : 100%;
		position: absolute;
		top     : 0;
		left    : 0;
		z-index : 800;
	}

		.cont--video-px .video iframe,
		.cont--video-px .video video {
			width     : 100%;
			height    : 100%;
			position  : absolute;
			top       : 0;
			left      : 0;
			object-fit: cover;
		}

	/* tx - btn */
	.cont--video-px article {
		position       : absolute;
		right          : 0;
		left           : 0;
		width          : 100%;
		height         : 100%;
		padding        : 30px;
		color          : var(--fff);
		display        : flex;
		align-items    : center;
		justify-content: center;
		flex-direction : column;

		z-index        : 900;
	}

	.cont--video-px article h3 {
		color        : var(--fff);
		font-size    : var(--size-4);
		text-align   : center;
		margin-bottom: 30px;
	}

	/* btn */
	.cont--video-px .btn {
		background-color: var(--fff);
		border          : 1px solid var(--fff);
		color           : var(--color-web-1);
	}

	.cont--video-px .btn:hover {
		background-color: var(--color-web-1);
		color           : var(--fff);
	}

	/* controles */
	.video-controls {
		position     : absolute;
		right        : 0;
		bottom       : 15px;
		width        : 200px;
		padding-right: var(--padding-container);
		z-index      : 901;
	}

		.video-controls button {
			background-color: transparent;
			border          : none;
			color           : var(--fff);
			border-radius   : 50%;
			background-color: rgba(0, 0, 0, .4);
			cursor          : pointer;
		}



/* #TESTIMONIOS */
.custom-testimonial-slider-wrapper ,
.custom-testimonial-slider-wrapper  * {
	text-align: center;
	color     : var(--fff);
}
	
	.swiper-slide.testimonial-item {
		/*padding: 0 200px;*/
	}

	.testimonial-title {
		font-size  : var(--size-6);
		font-weight: bold;
		display    : block;
	}

	.testimonial-comment {
		padding  : 25px 0;
		font-size: var(--size-6);
	}

	.testimonial-content section {
		width                : 100%;
		float                : left;
		display              : grid;
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap      : 0;
		background-color     : #141414;
	}

		.testimonial-content section figure,
		.testimonial-content section article {
			width: 100%;
			float: left;
		}

		/* img */
		.testimonial-content section figure {
			height     : 0;
			padding-top: 75%;
		}

			.testimonial-content section figure img {
				position  : absolute;
				top       : 0;
				left      : 0;
				width     : 100%; 
				height    : 100%;
				object-fit: cover;
			}

		/* tx */
		.testimonial-content section article {
			width          : 100%;
			float          : left;
			display        : flex;
			align-items    : center;
			justify-content: center;
		}

			.testimonial-content section article > div {
				padding: 0 100px;
			}



	/* nav */
	.custom-testimonial-slider-wrapper .swiper-button-next, 
	.custom-testimonial-slider-wrapper .swiper-button-prev {
		color: var(--fff);
	}

	/* dots */
	.custom-testimonial-slider-wrapper .swiper-pagination {
		position: relative;
		transform: translateY(10px);
	}
		.custom-testimonial-slider-wrapper .swiper-pagination-bullet {
			background-color: var(--fff);
		}
		.custom-testimonial-slider-wrapper .swiper-pagination-bullet-active {
			background-color: var(--color-web-3);
		}


	/* Iconos */
	.swiper.testimonial-swiper article:before,
	.swiper.testimonial-swiper article:after {
		/* Definir Font Awesome */
		font-family    : "Font Awesome 6 Free"; /* O "Font Awesome 5 Free" según tu versión */
		font-weight    : 900; /* Requerido para iconos solid */
		
		width          : 65px;
		height         : 100%; /* Ajustado para que no estire el icono */
		position       : absolute;
		top            : 0; /* Ajusta la posición vertical a tu gusto */
		display        : flex;
		align-items    : center;
		justify-content: center;
		font-size      : 60px; /* Tamaño de las comillas */
		color          : #ccc; /* Cambia al color que desees */
		z-index        : 800;
	}

	/* Comilla de apertura */
	.swiper.testimonial-swiper article:before {
		content: "\f10d"; /* Unicode de quote-left */
		left   : 20px;
	}

	/* Comilla de cierre */
	.swiper.testimonial-swiper article:after {
		content: "\f10e"; /* Unicode de quote-right */
		right  : 20px;
	}


/* BOX ICONO */
.box--icono {
	width          : 100%;
	float          : left;
	text-decoration: none;
	cursor         : pointer;
}

	.box--icono .box--icono-link {
		width          : 100%;
		float          : left;
		text-decoration: none;
		text-align     : center;
	}

	.box--icono section {
		text-align: center;
		width     : 100%;
		max-width : 128px;
		float     : none;
		margin    : auto;
	}

	/* ico */
	.box--icono .box--icono-link figure {
		width      : 100%;
		height     : 0 !Important;
		float      : none;
		margin     : auto;
		padding-top: 100%;
	}	

		.box--icono .box--icono-link figure:before,
		.box--icono .box--icono-link figure:after {
			content            : '';
			width              : 100%;
			height             : 100%;
			background-size    : contain;
			background-position: center;
			background-repeat  : no-repeat;
			display            : flex;
			position           : absolute;
			top                : 0;
			left               : 0;
		}

		

	/* tit */
	.box--icono h6 {
		width     : 100%;
		float     : left;
		text-align: center;
		margin-top: 10px;
		font-size : var(--size-6);
		color     : var(--color-texto);
	}

	/* hover */
	.box--icono:hover h6,
	.box--icono .box--icono-link:hover h6 {
		color: var(--color-web-3) !important;
	}

	.box--icono .box--icono-link figure:after {
		visibility: hidden;
	}	
	.box--icono .box--icono-link:hover figure:before {
		visibility: hidden;
	}
	.box--icono .box--icono-link:hover figure:after {
		visibility: visible;
	}