/* BANNERS DE CAMPAÑA (CAEs, Black Friday...) */

.eco-banner-campanas {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	width: 100%;
}

/* Cada campaña define sus colores y el ancho de su foto con estas variables. */
.eco-banner-campana {
	--eco-verde: #82b81d;
	--eco-banner-fondo: #F4F4F4;
	--eco-banner-texto: #2b2b2b;
	--eco-banner-secundario: #4a5568;
	--eco-banner-media-ancho: 270px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--eco-banner-fondo);
	color: var(--eco-banner-texto);
	font-family: Roboto, sans-serif;
}

.eco-banner-campana--black-friday {
	--eco-banner-fondo: #000000;
	--eco-banner-texto: #ffffff;
	--eco-banner-secundario: rgba(255, 255, 255, 0.75);
	--eco-banner-media-ancho: 180px;
}

/*
 * Foto pegada al borde derecho, detrás del texto (conjunto, tablet y móvil).
 * Se recorta por la izquierda (object-position: right) para que el producto
 * salga siempre entero, y el borde izquierdo se funde con el fondo.
 */
.eco-banner-campana__media {
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	width: var(--eco-banner-media-ancho);
	height: 100%;
}

.eco-banner-campana__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: right center;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%);
	mask-image: linear-gradient(to right, transparent 0, #000 30%);
}

/* Sobre negro, la foto algo más oscura para que funda sin halo. */
.eco-banner-campana--black-friday .eco-banner-campana__media img {
	filter: brightness(0.85);
}

.eco-banner-campana__inner {
	display: flex;
	align-items: center;
	gap: 40px;
	max-width: 1280px;
	min-height: 88px;
	margin: 0 auto;
	padding: 10px 40px;
}

.eco-banner-campana--con-imagen .eco-banner-campana__inner {
	padding-right: calc(var(--eco-banner-media-ancho) + 16px);
}

/*
 * Banner individual en escritorio: texto y botón apilados a la izquierda y la foto
 * pegada al borde derecho de la pantalla.
 */
@media (min-width: 1025px) {
	/*
	 * La foto de CAEs es panorámica (pared ampliada): solo aquí se ve a lo ancho,
	 * hasta ~60% del banner. El tope es ~su ancho natural a esta altura, para no
	 * ampliarla y recortar la máquina.
	 */
	.eco-banner-campanas--individual .eco-banner-campana--caes {
		--eco-banner-media-ancho: min(60%, 800px);
	}

	.eco-banner-campanas--individual .eco-banner-campana__inner,
	.eco-banner-campanas--individual .eco-banner-campana--con-imagen .eco-banner-campana__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-content: center;
		column-gap: 40px;
		row-gap: 8px;
		/* Hueco para la foto; en pantallas > 1280px descuenta el margen del contenedor. */
		padding-right: max(40px, min(calc(var(--eco-banner-media-ancho) + 16px), calc(var(--eco-banner-media-ancho) - (100% - 1280px) / 2 + 16px)));
	}

	.eco-banner-campanas--individual .eco-banner-campana__texto {
		grid-column: 1;
		grid-row: 1;
	}

	.eco-banner-campanas--individual .eco-banner-campana__boton {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
		margin-left: 0;
	}
}

.eco-banner-campana__texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}

/* Título con la etiqueta (fechas) a su derecha. */
.eco-banner-campana__titulo-fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.eco-banner-campana__etiqueta {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 9999px;
	background-color: var(--eco-verde);
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Mismo tratamiento que el H1 de la landing: oscuro + verde. */
.eco-banner-campana__titulo {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--eco-banner-texto);
}

.eco-banner-campana__titulo span {
	color: var(--eco-verde);
}

.eco-banner-campana--black-friday .eco-banner-campana__titulo {
	font-size: 22px;
	font-weight: 900;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.eco-banner-campana__subtitulo {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--eco-banner-secundario);
}

/* Botón con el aspecto de los de la web (píldora verde), sin depender de .custom-btn. */
.eco-banner-campana__boton {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	padding: 7px 20px;
	border: 2px solid var(--eco-verde);
	border-radius: 9999px;
	background-color: var(--eco-verde);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.eco-banner-campana--caes .eco-banner-campana__boton {
	padding: 5px 16px;
	font-size: 12px;
}

.eco-banner-campana__boton svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.eco-banner-campana__boton::after {
	content: "";
	position: absolute;
	inset: 0;
}

.eco-banner-campana__boton:hover,
.eco-banner-campana__boton:focus,
.eco-banner-campana:hover .eco-banner-campana__boton {
	border-color: #3c3c3c;
	background-color: #3c3c3c;
	color: #ffffff;
	text-decoration: none;
}

.eco-banner-campana--black-friday:hover .eco-banner-campana__boton,
.eco-banner-campana--black-friday .eco-banner-campana__boton:focus {
	border-color: #ffffff;
	background-color: #ffffff;
	color: #000000;
}

.eco-banner-campana:hover .eco-banner-campana__boton svg {
	transform: translateX(4px);
}

.eco-banner-campana__boton:focus-visible {
	outline: 2px solid var(--eco-verde);
	outline-offset: 3px;
}

/* Conjunto: dos mitades, todo apilado y más compacto. */
.eco-banner-campanas--conjunto .eco-banner-campana__inner {
	max-width: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding-left: 32px;
	padding-right: calc(var(--eco-banner-media-ancho) + 16px);
}

.eco-banner-campanas--conjunto .eco-banner-campana__titulo {
	font-size: 18px;
}

.eco-banner-campanas--conjunto .eco-banner-campana--black-friday .eco-banner-campana__titulo {
	font-size: 22px;
}

.eco-banner-campanas--conjunto .eco-banner-campana__subtitulo {
	font-size: 13px;
}

.eco-banner-campanas--conjunto .eco-banner-campana__boton {
	margin-left: 0;
	padding: 5px 16px;
	font-size: 12px;
}

/* Tablet */
@media (max-width: 1024px) {
	.eco-banner-campana__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding-left: 24px;
	}

	/* En pantallas pequeñas solo título y botón: el subtítulo hace el banner demasiado alto. */
	.eco-banner-campana__subtitulo {
		display: none;
	}

	.eco-banner-campana__titulo {
		font-size: 18px;
	}

	.eco-banner-campana--black-friday .eco-banner-campana__titulo {
		font-size: 20px;
	}

	.eco-banner-campana__boton {
		margin-left: 0;
	}

	.eco-banner-campanas--conjunto .eco-banner-campana__media {
		display: none;
	}

	.eco-banner-campanas--conjunto .eco-banner-campana__inner {
		padding-right: 24px;
	}

	.eco-banner-campanas--conjunto .eco-banner-campana__titulo {
		font-size: 18px;
	}

	.eco-banner-campanas--conjunto .eco-banner-campana--black-friday .eco-banner-campana__titulo {
		font-size: 20px;
	}
}

/* Mobile: el conjunto se apila; vuelve la foto. */
@media (max-width: 768px) {
	.eco-banner-campanas--conjunto {
		grid-auto-flow: row;
	}

	.eco-banner-campana,
	.eco-banner-campanas--conjunto .eco-banner-campana {
		--eco-banner-media-ancho: 40%;
	}

	.eco-banner-campanas--conjunto .eco-banner-campana__media {
		display: block;
	}

	.eco-banner-campana__inner,
	.eco-banner-campanas--conjunto .eco-banner-campana__inner {
		gap: 10px;
		min-height: 0;
		padding: 16px calc(var(--eco-banner-media-ancho) - 8px) 16px 16px;
	}

	.eco-banner-campana__etiqueta {
		font-size: 9px;
		padding: 3px 9px;
	}

	.eco-banner-campana__titulo,
	.eco-banner-campanas--conjunto .eco-banner-campana__titulo {
		font-size: 15px;
	}

	.eco-banner-campana--black-friday .eco-banner-campana__titulo,
	.eco-banner-campanas--conjunto .eco-banner-campana--black-friday .eco-banner-campana__titulo {
		font-size: 17px;
	}

	.eco-banner-campana__boton,
	.eco-banner-campana--caes .eco-banner-campana__boton,
	.eco-banner-campanas--conjunto .eco-banner-campana__boton {
		padding: 5px 14px;
		font-size: 12px;
	}
}