/**
 * Ficha de bono.
 *
 * Lenguaje propio, distinto al de la ficha de operador: allí manda la
 * tabla de datos y la reseña; aquí manda la oferta. Portada a color con
 * el bono en grande, condiciones en tarjetas y el estado de vigencia
 * como señal principal.
 */

/* ============================================================
   Portada
   ============================================================ */

.lz-bono-hero {
	/* Banda a sangre en navy: separa la ficha de bono del resto del
	   sitio de un vistazo. */
	background: var(--lz-surface-header);
	color: #FFFFFF;
	margin-bottom: var(--lz-space-10);
}

.lz-bono-hero__inner {
	padding-block: var(--lz-space-5) var(--lz-space-10);
}

/* Las migas heredan el color de la banda. */
.lz-bono-hero .lz-breadcrumb {
	margin-bottom: var(--lz-space-6);
}

.lz-bono-hero .lz-breadcrumb__item,
.lz-bono-hero .lz-breadcrumb__item a {
	color: rgba(255, 255, 255, .72);
}

.lz-bono-hero .lz-breadcrumb__item a:hover,
.lz-bono-hero .lz-breadcrumb__item [aria-current="page"] {
	color: #FFFFFF;
}

.lz-bono-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--lz-space-10);
	align-items: center;
}

.lz-bono-hero__texto { min-width: 0; }

.lz-bono-hero__etiquetas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lz-space-2);
	margin: 0 0 var(--lz-space-4);
}

/* ---- Estado de vigencia ----
   Es la señal principal de la ficha: dice si la oferta existe. */

.lz-estado {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px var(--lz-space-3);
	font-family: var(--lz-font-display);
	font-size: var(--lz-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--lz-tracking-wide);
	border-radius: var(--lz-radius-sm);
}

.lz-estado--activo {
	color: #FFFFFF;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .24);
}

/* Los que corren prisa llevan el dorado; el rojo se reserva para lo que
   ya no sirve. */
.lz-estado--termina,
.lz-estado--ultimo-dia {
	color: var(--lz-accent-ink);
	background: var(--lz-gold);
	border: 1px solid var(--lz-gold);
}

.lz-estado--caducado,
.lz-estado--retirado {
	color: #FFFFFF;
	background: rgba(0, 0, 0, .28);
	border: 1px solid rgba(255, 255, 255, .18);
}

.lz-bono-hero__tipo {
	padding: 4px var(--lz-space-3);
	font-size: var(--lz-text-xs);
	color: rgba(255, 255, 255, .82);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--lz-radius-sm);
}

.lz-bono-hero__title {
	font-size: var(--lz-text-3xl);
	line-height: 1.15;
	color: #FFFFFF;
	margin: 0 0 var(--lz-space-4);
	overflow-wrap: anywhere;
}

.lz-bono-hero__lede {
	font-size: var(--lz-text-lg);
	line-height: 1.6;
	color: rgba(255, 255, 255, .82);
	margin: 0 0 var(--lz-space-6);
	max-width: 46ch;
}

.lz-bono-hero__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lz-space-5);
}

.lz-bono-hero__resena {
	font-size: var(--lz-text-sm);
	color: rgba(255, 255, 255, .82);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lz-bono-hero__resena:hover { color: var(--lz-gold-bright); }

.lz-bono-hero__caducado {
	display: flex;
	align-items: center;
	gap: var(--lz-space-2);
	margin: 0;
	padding: var(--lz-space-3) var(--lz-space-4);
	font-size: var(--lz-text-sm);
	color: #FFFFFF;
	background: rgba(0, 0, 0, .28);
	border-radius: var(--lz-radius-sm);
}

.lz-bono-hero__media {
	margin: 0;
	border-radius: var(--lz-radius-md);
	overflow: hidden;
	/* Proporción fija: las imágenes promocionales llegan en tamaños
	   dispares y sin esto la portada salta de alto. */
	aspect-ratio: 4 / 3;
	background: rgba(255, 255, 255, .06);
}

.lz-bono-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ============================================================
   Condiciones
   ============================================================ */

.lz-bono-titulo {
	font-size: var(--lz-text-xl);
	line-height: 1.25;
	margin: 0 0 var(--lz-space-6);
}

.lz-bono-cond { margin-bottom: var(--lz-space-10); }

/* Tarjetas y no tabla: son cuatro datos que se comparan de un vistazo
   antes de decidir, no una ficha técnica que se lee en orden. */
.lz-cond {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--lz-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.lz-cond__item {
	display: flex;
	flex-direction: column;
	gap: var(--lz-space-2);
	min-width: 0;
	padding: var(--lz-space-5);
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md);
}

.lz-cond__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--lz-heading);
	background: var(--lz-accent-surface);
	border: 1px solid var(--lz-accent-border);
	border-radius: var(--lz-radius-sm);
}

.lz-cond__label {
	font-size: var(--lz-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--lz-tracking-wide);
	color: var(--lz-muted);
}

.lz-cond__valor {
	font-family: var(--lz-font-display);
	font-size: var(--lz-text-base);
	color: var(--lz-heading);
	overflow-wrap: anywhere;
}

/* ============================================================
   Cuerpo
   ============================================================ */

.lz-bono-cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
	gap: var(--lz-space-10);
	align-items: start;
	margin-bottom: var(--lz-space-12);
}

.lz-bono-principal { min-width: 0; }

.lz-bono-seccion { margin-bottom: var(--lz-space-10); }

.lz-bono-seccion:last-child { margin-bottom: 0; }

.lz-bono-seccion.lz-prose h2 {
	margin-top: var(--lz-space-9);
	margin-bottom: var(--lz-space-4);
	font-size: var(--lz-text-lg);
}

.lz-bono-seccion.lz-prose > p { max-width: 68ch; }

/* ============================================================
   Lateral
   ============================================================ */

.lz-bono-lateral {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--lz-space-5);
	position: sticky;
	top: calc(72px + var(--lz-space-4));
}

/* El operador es contexto: tarjeta discreta, no reclamo. */
.lz-bono-op {
	padding: var(--lz-space-5);
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md);
}

.lz-bono-op__kicker {
	font-size: var(--lz-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--lz-tracking-wide);
	color: var(--lz-muted);
	margin: 0 0 var(--lz-space-2);
}

.lz-bono-op__nombre {
	font-family: var(--lz-font-display);
	font-size: var(--lz-text-lg);
	color: var(--lz-heading);
	margin: 0;
	overflow-wrap: anywhere;
}

.lz-bono-op__dominio {
	font-size: var(--lz-text-sm);
	color: var(--lz-muted);
	margin: 2px 0 0;
}

.lz-bono-op__licencia {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: var(--lz-space-4) 0;
	font-size: var(--lz-text-xs);
	color: var(--lz-muted);
}

.lz-bono-op__licencia .lz-icon { color: var(--lz-accent); }

.lz-bono-sticky {
	padding: var(--lz-space-5);
	background: var(--lz-surface-raised);
	border: 1px solid var(--lz-accent-border);
	border-radius: var(--lz-radius-md);
	box-shadow: var(--lz-shadow-md);
}

.lz-bono-sticky__legal {
	display: flex;
	align-items: center;
	gap: var(--lz-space-2);
	margin: var(--lz-space-4) 0 0;
	font-size: var(--lz-text-xs);
	color: var(--lz-muted);
}

/* ============================================================
   Otros bonos
   ============================================================ */

.lz-bono-otros {
	padding-top: var(--lz-space-9);
	padding-bottom: var(--lz-space-12);
	border-top: 1px solid var(--lz-line);
}

/* ============================================================
   Bono caducado
   ============================================================
   La ficha sigue siendo útil como contenido, pero no debe empujar a
   una oferta que ya no existe: se apaga la portada. */

.lz-bono-ficha--caducado .lz-bono-hero,
.lz-bono-ficha--retirado .lz-bono-hero,
.lz-bono-ficha--retirado .lz-bono-hero {
	background: var(--lz-surface-sunken);
	color: var(--lz-ink);
}

.lz-bono-ficha--caducado .lz-bono-hero__title ,
.lz-bono-ficha--retirado .lz-bono-hero__title { color: var(--lz-heading); }
.lz-bono-ficha--caducado .lz-bono-hero__lede ,
.lz-bono-ficha--retirado .lz-bono-hero__lede { color: var(--lz-muted); }

.lz-bono-ficha--caducado .lz-bono-hero .lz-breadcrumb__item,
.lz-bono-ficha--retirado .lz-bono-hero .lz-breadcrumb__item,
.lz-bono-ficha--caducado .lz-bono-hero .lz-breadcrumb__item a ,
.lz-bono-ficha--retirado .lz-bono-hero .lz-breadcrumb__item a {
	color: var(--lz-muted);
}

.lz-bono-ficha--caducado .lz-bono-hero__tipo ,
.lz-bono-ficha--retirado .lz-bono-hero__tipo {
	color: var(--lz-muted);
	border-color: var(--lz-line);
}

.lz-bono-ficha--caducado .lz-estado--caducado,
.lz-bono-ficha--retirado .lz-estado--caducado,
.lz-estado--retirado {
	color: var(--lz-heading);
	background: var(--lz-surface);
	border-color: var(--lz-line);
}

.lz-bono-ficha--caducado .lz-bono-hero__caducado ,
.lz-bono-ficha--retirado .lz-bono-hero__caducado {
	color: var(--lz-heading);
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
}

.lz-bono-ficha--caducado .lz-bono-hero__media ,
.lz-bono-ficha--retirado .lz-bono-hero__media { opacity: .6; }

.lz-bono-ficha--caducado .lz-bono-hero__resena ,
.lz-bono-ficha--retirado .lz-bono-hero__resena {
	color: var(--lz-heading);
}

/* ============================================================
   Contención del contenido del editor
   ============================================================ */

.lz-bono-ficha table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
	margin-block: var(--lz-space-6);
}

.lz-bono-ficha :is(th, td) {
	padding: var(--lz-space-3) var(--lz-space-4);
	min-width: 8rem;
}

.lz-bono-ficha :is(img, iframe, video, embed, object) {
	max-width: 100%;
	height: auto;
}

.lz-bono-ficha :is(p, li, td, th, h1, h2, h3, h4) {
	overflow-wrap: anywhere;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 991px) {
	.lz-bono-hero__grid {
		grid-template-columns: 1fr;
		gap: var(--lz-space-7);
	}

	/* La imagen baja: en una columna, el titular debe ir primero. */
	.lz-bono-hero__media { order: 2; }

	.lz-bono-cuerpo {
		grid-template-columns: 1fr;
		gap: var(--lz-space-8);
	}

	.lz-bono-lateral {
		position: static;
		order: -1;
	}

	.lz-cond { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.lz-bono-hero { margin-bottom: var(--lz-space-8); }

	.lz-bono-hero__inner { padding-block: var(--lz-space-4) var(--lz-space-8); }

	.lz-bono-hero__title { font-size: var(--lz-text-2xl); }

	.lz-bono-hero__lede { font-size: var(--lz-text-md); }

	.lz-bono-hero__acciones {
		flex-direction: column;
		align-items: stretch;
		gap: var(--lz-space-3);
	}

	.lz-bono-hero__acciones .lz-btn { width: 100%; }

	.lz-bono-hero__resena { text-align: center; }

	.lz-bono-hero__media { aspect-ratio: 16 / 9; }

	.lz-cond {
		grid-template-columns: 1fr;
		gap: var(--lz-space-3);
	}

	/* Apilada, la tarjeta se lee mejor en horizontal. */
	.lz-cond__item {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		grid-template-areas:
			"icono label"
			"icono valor";
		gap: 2px var(--lz-space-3);
		align-items: center;
		padding: var(--lz-space-4);
	}

	.lz-cond__icono { grid-area: icono; }
	.lz-cond__label { grid-area: label; align-self: end; }
	.lz-cond__valor { grid-area: valor; align-self: start; }

	.lz-bono-titulo { font-size: var(--lz-text-lg); }

	.lz-bono-seccion { margin-bottom: var(--lz-space-8); }
}