@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: 600
}

.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;
	}

.wpb_text_column {
	width: 100%;
	float: left;
}

/* 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 */
}
/* 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  : 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;
		top:0;
		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;
	}

	/* btn */
	.cont--video-px .btn {
		background-color: var(--fff);
		border          : 1px solid var(--fff);
		color           : var(--color-web-1);
		border-radius   : 20px;
		padding         : 15px 30px;
		font-size       : 1.2rem;
		transform       : translateY(140px);
	}

	.cont--video-px .btn--video:before {
		content     : '\f591';
		font-family : var(--font-material);
		font-size   : 26px;
		font-weight : 300 !important;
		color       : var(--color-web-1);
		margin-right: 5px
	}

	.cont--video-px .btn:hover {
		background-color: var(--color-web-1);
		color           : var(--fff);
	}
	.cont--video-px .btn--video:hover:before {
		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;
			border-radius   : 20px
		}