.hero-block {
	height: 100%;

	@media (max-width: 720px) {
		& {
			max-height: 450px;
			overflow: hidden;
		}

	}
}

.paragraph--type--banda-hero {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
	position: relative;

	.hero_mask {
		position: absolute;
		background: linear-gradient(50deg, black 0%, #0f0f0f 20%, rgba(140, 140, 140, 0) 100%);
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 4;
		pointer-events: none;
	}

	.hero_inner {
		width: var(--maxwidth);
		padding: var(--padding-general);
		padding-top: 70px;
		padding-bottom: 70px;
		box-sizing: border-box;
		height: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 5;

		h2 {
			color: var(--colortexto_boton);
			font-weight: 600 !important;
			margin: 0;
			padding: 0;
			font-size: clamp(3rem, 4vw + 1rem, 5.3rem);
			line-height: 1.1;
			-webkit-font-smoothing: antialiased;

			&.highlight {
				background-repeat: repeat-x;
				background-position: 0 78%;
				background-size: 100% 40px;
				box-decoration-break: clone;
				padding: 0 3px 0 3px;
				-webkit-box-decoration-break: clone;
				display: inline;
			}
		}

		.hero_subrotulo {
			margin-top: 2rem;
			color: var(--colortexto_boton);
			font-size: calc(clamp(1.9rem, 1vw + 1.8rem, 2.2rem));
		}

		.hero_subrotulo+.hero_body,
		h2+.hero_body {
			margin-top: 3rem;
		}

		.hero_body {
			p {
				line-height: 1.5;
			}
		}

		.hero_content {
			position: relative;
			padding: 0 3rem;
			height: auto;
			z-index: 5;

			@media (max-width: 920px) {
				& {
					width: calc(100% - 10%);
				}
			}
		}

		.hero-actions {
			padding: 1rem 2rem;
			background: #da8508;
			display: inline-block;
			margin-top: 3rem;
			color: white;
			letter-spacing: 1px;
			border-radius: 3px;

			a {
				color: var(--colortexto_boton);
				transition: 0.2s all;

				&:hover {
					font-weight: 600;
				}
			}
		}
	}
}

.paragraph--type--banda-hero.layout_1 {
	/*
	&:before {
		content: "";
		position: absolute;
		height: 100%;
		width: 100%;
		background: #3a3a3a7d;
		top: 0;
		left: 0;
		z-index: 5;
		opacity: 0.5;
	}

	&:after {
		content: '';
		position: absolute;
		background: linear-gradient(0deg, rgb(0 0 0) 0%, rgb(15 15 15) 5%, rgb(140 140 140 / 0%) 100%);
		background: linear-gradient(50deg, black 0%, #0f0f0f 20%, rgba(140, 140, 140, 0) 100%);
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 4;
		opacity: 0.5;
	}*/

	.hero_content {
		position: absolute;
		width: 85rem;
		top: 50%;
		transform: translateY(-50%);

		@media (max-width: 980px) {
			& {
				width: calc(100% - 80px); /* descontamos el padding general */
				padding: 0;
			}
		}
	}
}

.paragraph--type--banda-hero.layout_2 {
	.hero_inner {
		gap: 5rem;
	}

	.hero_content {
		width: 50%;
		min-width: 600px;
	}

	.hero_image {
		flex: 1;
		max-height: 75%;
		overflow: hidden;
		border-radius: 30px;
		display: flex;
		align-items: center;
	}

	@media (max-width: 1024px) {
		.hero_inner {
			flex-wrap: wrap;
			gap: 0;
			row-gap: 5rem;
			padding-top: 30px;
			padding-bottom: 75px;
			flex-direction: column;

		}

		.hero_image {
			order: 0;
			width: 100%;
		}

		.hero_content {
			order: 1;
			width: 100%;
			min-width: auto;
		}
	}


	@media (max-width: 720px) {
		.hero_inner {
			row-gap: 1.5rem;
			padding-top: 0;
			padding-bottom: 2rem;
			justify-content: center;
		}

		.hero_image {
			flex: none;
			position: absolute;
			max-height: none;
			border-radius: 0;
			top: 0;
			height: 100%;
			opacity: 0.2;
			left: 0;

			img {
				object-fit: cover;
				height: 100%;
				width: 100%;
			}
		}

		.hero_content {
			order: 1;
			min-width: auto;
			padding: 0;
		}
	}

}

.hero__video-background {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;

	video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}




@media (max-width: 1170px) {
	.wrapper-hero {
		flex-wrap: wrap;
		gap: 1.5rem;
	}

	.wrapper-hero .hero-image,
	.wrapper-hero .content-hero {
		width: 100%;
	}
}

.field--name-field-elemento-hero {

	.swiper-button-next,
	.swiper-button-prev {
		/*background: #0000001a !important;*/
		width: 40px !important;
		height: 40px !important;
		/* border-radius: 50%;*/
		z-index: 100 !important;
		/* border: 1px solid white;*/
	}

	.swiper-button-next:after,
	.swiper-button-prev:after {
		font-weight: 900;
		color: #ffffff9c;
		font-size: 25px;
	}

	.swiper-button-next:after:hover,
	.swiper-button-prev:after:hover {
		color: #ffffff;
	}

	.swiper-button-next {
		right: calc((100vw - var(--maxwidth)) / 2 - 90px);
	}

	.swiper-button-prev {
		left: calc((100vw - var(--maxwidth)) / 2 - 90px);
	}

	.swiper-pagination-bullets.swiper-pagination-horizontal {
		height: auto;
		bottom: 25px;
	}

	.swiper-pagination-bullet-active {
		background-color: #aaaaaa !important;
	}

	.swiper-pagination-bullet {
		background: none;
		border-width: 1px;
		border-style: solid;
		border-color: #dbdbdb;
	}

	/* efecto deslizamiento texto */

	/* 1. Estado inicial del texto (Oculto y abajo) */
	.swiper-slide .hero_content {
		opacity: 0;
		transform: translateY(30px);
		/* Se desplaza 30px hacia abajo */
		transition: opacity 0.8s ease, transform 0.8s ease;
		transition-delay: 0.3s;
		/* Esperamos un poco a que el fondo haga el fade */
	}

	/* 2. Estado cuando el slide es el activo */
	.swiper-slide-active .layout_1 .hero_content {
		opacity: 1;
		transform: translateY(-50%);
		/* Vuelve a su sitio */
	}

	.swiper-slide-active .layout_2 .hero_content {
		transform: translateY(0);
		opacity: 1;

	}

	/* 3. (Opcional) Si quieres que el título y el botón vayan a tiempos distintos */
	.swiper-slide-active h2 {
		transition-delay: 0.4s;
	}

	.swiper-slide-active .hero_call {
		transition-delay: 0.6s;
	}

	/* eol efecto deslizamiento texto */
}

/* Si la opacidad es 0, aplicamos estilos específicos para mejorar la visibilidad de los elementos de paginación. */

.field--name-field-elemento-hero:has(.swiper-slide-visible .bgwhite) .swiper-pagination-bullet {
	background-color: #000000;
}

.field--name-field-elemento-hero:has(.swiper-slide-visible .bgwhite) .swiper-button-next:after,
.field--name-field-elemento-hero:has(.swiper-slide-visible .bgwhite) .swiper-button-prev:after {
	color: #5a5a5a;
}