.wrapper-hero{
	display: flex;
	align-items: center;
	padding: 6rem;
	gap: 6rem;
	background-position: center;
	position: relative;
	border-radius: 12px;
	&:before{
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
	&:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    z-index: 1;
	}
	.hero-image, .content-hero{
		z-index: 5;
	}
	.hero-image{
		 width: min(340px, 24vw);
		 .field--name-field-imagen-hero{
				display: flex;
				align-items: center;
				justify-content: center;
		 }
	}
	.content-hero{
		flex: 1;
		padding: 3rem;
		h1{
			color: var(--colortexto_boton);
			font-weight: 600!important;
			margin: 0;
			padding: 0;
			font-size: clamp(3rem, 4vw + 1rem, 5.3rem);
			/* Atributos opcionales para máxima nitidez */
			line-height: 1.2;
			-webkit-font-smoothing: antialiased;
		}
	}
	.subrotulo{
		margin-top: 0.5rem;
		color: var(--colortexto_boton);
	}
	.hero-actions{
		margin-top: 3.5rem;
		display: flex;
		width: 100%;
		a{
		color: var(--colortexto_boton);
		padding: 10px 30px;
		border: 1px solid var(--colortexto_boton);
		transition: 0.2s all;
			&:hover{
				background: var(--colortexto_boton);
				color: black;
				font-weight: 600;
				mix-blend-mode: screen;
			}
		}
	}
}

.content-hero,.hero-actions,.field--name-field-enlace-hero{
	mix-blend-mode: screen;
}


.derecha .wrapper-hero .hero-image{
	order: 2;
}

h1.is-aligned-left, .is-aligned-left .field--name-field-subrotulo-hero{
  text-align: left;
}

h1.is-aligned-center, .is-aligned-center .field--name-field-subrotulo-hero{
  text-align: center;
}

h1.is-aligned-right, .is-aligned-right .field--name-field-subrotulo-hero{
  text-align: right;
}

.hero-actions.is-aligned-left {
  justify-content: flex-start;
}

.hero-actions.is-aligned-center {
  justify-content: center;
}

.hero-actions.is-aligned-right {
  justify-content: flex-end;
}


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