/* ============================================================
   PORTADA — LEGALZONE 4.0
   ============================================================ */


/* ============================================================
   HERO
   ============================================================ */

.lz-hero {
	position: relative;
	background: var(--lz-surface-header);
	overflow: hidden;
}

/* Una sola veladura cálida hacia la tarjeta destacada: da profundidad
   sin patrones ni texturas que compitan con el contenido. */
.lz-hero__bg {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 1100px 620px at 76% 42%, rgba(249, 115, 22, .13), transparent 70%);
}

.lz-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	gap: var(--lz-space-12);
	align-items: center;
	padding-block: var(--lz-space-12) var(--lz-space-16);
}

.lz-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--lz-space-2);
	border: 1px solid rgba(249, 115, 22, .42);
	background: rgba(249, 115, 22, .10);
	color: var(--lz-accent);
	border-radius: var(--lz-radius-pill);
	padding: var(--lz-space-1) var(--lz-space-4);
	font-size: var(--lz-text-xs);
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	margin-bottom: var(--lz-space-5);
}

.lz-hero__title {
	color: var(--lz-ink-on-inverse);
	max-width: 15ch;
	margin-bottom: var(--lz-space-5);
}

.lz-hero__lede {
	color: var(--lz-ink-on-inverse);
	font-size: var(--lz-text-lg);
	max-width: 52ch;
	margin-bottom: var(--lz-space-6);
}

/* --- Buscador ---------------------------------------------- */

.lz-search {
	display: flex;
	max-width: 520px;
	margin-bottom: var(--lz-space-5);
	border-radius: var(--lz-radius);
	box-shadow: var(--lz-shadow-lg);
}

.lz-search__field {
	flex-grow: 1;
	display: flex;
	align-items: center;
	gap: var(--lz-space-3);
	background: var(--lz-search-bg);
	border-radius: var(--lz-radius) 0 0 var(--lz-radius);
	padding-inline: var(--lz-space-4);
	min-height: 56px;
	min-width: 0;
}

.lz-search__icon { color: var(--lz-muted); }

.lz-search__field input {
	flex-grow: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: var(--lz-text-md);
	color: var(--lz-search-ink);
}

.lz-search__field input::placeholder { color: var(--lz-search-placeholder); }

.lz-search__field:focus-within {
	outline: 2px solid var(--lz-focus);
	outline-offset: -2px;
}

.lz-search__btn {
	font-family: var(--lz-font-display);
	text-transform: uppercase;
	letter-spacing: var(--lz-tracking-wide);
	background: var(--lz-accent);
	color: var(--lz-accent-ink);
	border: 0;
	border-radius: 0 var(--lz-radius) var(--lz-radius) 0;
	padding-inline: var(--lz-space-6);
	font-size: var(--lz-text-sm);
	cursor: pointer;
	transition: background-color var(--lz-duration) var(--lz-ease);
}

.lz-search__btn:hover { background: var(--lz-accent-hover); }

.lz-hero__quick {
	display: flex;
	align-items: center;
	gap: var(--lz-space-2);
	flex-wrap: wrap;
}

.lz-hero__quick-label {
	color: var(--lz-muted-on-inverse);
	font-size: var(--lz-text-sm);
}

/* Variante del chip sobre fondo oscuro. */
.lz-chip--dark {
	border-color: rgba(255, 251, 235, .2);
	color: var(--lz-ink-on-inverse);
}

.lz-chip--dark:hover {
	border-color: var(--lz-accent);
	color: var(--lz-accent);
}


/* ============================================================
   RANKING
   ============================================================ */

/* --- Pestañas ---------------------------------------------- */

.lz-tabs {
	display: flex;
	gap: var(--lz-space-2);
	flex-shrink: 0;
}

.lz-tab {
	font-family: var(--lz-font-display);
	font-size: var(--lz-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--lz-tracking-wide);
	border: 1px solid var(--lz-line);
	background: var(--lz-surface);
	color: var(--lz-muted);
	border-radius: var(--lz-radius);
	min-height: 44px;
	padding-inline: var(--lz-space-4);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--lz-duration) var(--lz-ease),
	            border-color var(--lz-duration) var(--lz-ease),
	            color var(--lz-duration) var(--lz-ease);
}

.lz-tab:hover {
	border-color: var(--lz-brand-text);
	color: var(--lz-brand-text);
}

.lz-tab.is-active {
	background: var(--lz-brand);
	border-color: var(--lz-brand);
	color: var(--lz-on-brand);
}

.lz-rank-panel[hidden] { display: none; }


/* --- Tabla comparativa -------------------------------------
   Sin numeración: el valor está en poder comparar columnas.
   Se usa grid con roles ARIA en lugar de <table> para poder
   reordenar las celdas en móvil sin perder la semántica. */

.lz-rank {
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md) var(--lz-radius-md) 0 0;
	overflow: hidden;
}

/* Todas las columnas son proporcionales y ninguna baja de su mínimo:
   con anchos fijos, un dato como "24h (Bizum/PayPal/Tarjetas)" —30
   caracteres— desbordaba una caja de 130px e invadía la celda vecina.
   minmax(0, …) permite además que el texto se encoja en lugar de forzar
   el ancho de la rejilla, que es lo que apretaba la fila entera. */
.lz-rank__head,
.lz-rank__row {
	display: grid;
	grid-template-columns:
		minmax(180px, 1.7fr)   /* operador: logo + nombre        */
		minmax(200px, 2.3fr)   /* bono de bienvenida             */
		minmax(110px, 1fr)     /* depósito                       */
		minmax(120px, 1.1fr)   /* retirada                       */
		minmax(150px, 160px);  /* acciones: ancho estable        */
	gap: var(--lz-space-5);
	align-items: center;
}

.lz-rank__head {
	padding: var(--lz-space-3) var(--lz-space-5);
	background: var(--lz-surface-sunken);
	border-bottom: 1px solid var(--lz-line);
	font-family: var(--lz-font-display);
	font-size: var(--lz-text-xs);
	text-transform: uppercase;
	letter-spacing: var(--lz-tracking-wide);
	color: var(--lz-muted);
}

.lz-rank__row {
	position: relative;
	padding: var(--lz-space-4) var(--lz-space-5);
	border-bottom: 1px solid var(--lz-line-soft);
	transition: background-color var(--lz-duration) var(--lz-ease);
	/* Altura mínima común: sin ella cada fila mide según su texto y la
	   tabla queda irregular de arriba abajo. */
	min-height: 88px;
}

/* ---- Enlace de fila ----
   Cubre la fila entera por debajo del contenido, de modo que se puede
   pulsar en cualquier punto y se llega a la ficha. «Ver oferta» se
   eleva por encima para conservar su propio destino. */
.lz-rank__enlace {
	position: absolute;
	inset: 0;
	/* Mismo valor que .lz-cobertura: por encima del contenido estático
	   de la fila. Con z-index 1 bastaba porque las celdas no son
	   enlaces, pero al añadir uno se pintaría encima y absorbería el
	   clic. */
	z-index: 3;
	/* Sin texto visible: el nombre y los datos ya están en la fila. */
	font-size: 0;
}

.lz-rank__enlace:focus-visible {
	outline: 2px solid var(--lz-focus);
	outline-offset: -3px;
	border-radius: var(--lz-radius-sm);
}

/* Todo el texto de la fila queda sin decoración: la fila entera es el
   enlace, así que subrayar partes sueltas ensucia sin aportar. */
.lz-rank__row a,
.lz-rank__row .lz-rank__name,
.lz-rank__row .lz-rank__valor {
	text-decoration: none;
}

/* Las acciones se elevan sobre el enlace de fila para que su clic no
   quede capturado por él. */
.lz-rank__actions {
	position: relative;
	/* Por encima del enlace de fila, para que «Ver oferta» conserve su
	   propio destino. */
	z-index: 4;
}

.lz-rank__row:last-child { border-bottom: 0; }
.lz-rank__row:hover { background: var(--lz-surface-sunken); }

.lz-rank__op {
	display: flex;
	align-items: center;
	gap: var(--lz-space-3);
	min-width: 0;
}

.lz-rank__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--lz-radius-sm);
	background: var(--lz-white); /* los logos están pensados para fondo claro, también en oscuro */
	overflow: hidden;
	flex-shrink: 0;
}

.lz-rank__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
}

.lz-rank__logo-ph {
	font-family: var(--lz-font-display);
	color: var(--lz-faint);
	font-size: var(--lz-text-sm);
}

.lz-rank__name {
	font-size: var(--lz-text-md);
	min-width: 0;
	/* "Casino Gran Madrid" son 18 caracteres: cabe en dos líneas sin
	   ensanchar la columna ni invadir la del bono. */
	overflow-wrap: anywhere;
	line-height: 1.25;
}

.lz-rank__bono,
.lz-rank__dato {
	font-size: var(--lz-text-base);
	color: var(--lz-ink);
	min-width: 0;
	/* Sin esto, una cadena larga sin espacios (una URL, "Instantáneo
	   con…") empuja la columna y descuadra toda la fila. */
	overflow-wrap: anywhere;
}

.lz-rank__dato {
	font-variant-numeric: tabular-nums;
}

/* ---- Respuesta al apuntar ----
   La fila entera es pulsable, así que el resalte de fondo ya no promete
   algo que no ocurre: es la señal de que ese bloque lleva a la ficha.
   El nombre pasa al dorado para señalar el destino sin subrayar nada. */
.lz-rank__row:hover .lz-rank__name {
	color: var(--lz-brand-text);
}

.lz-rank__name {
	transition: color var(--lz-duration) var(--lz-ease);
}

/* Rótulo de la columna de acciones cuando no hay enlace de afiliado.
   No es un botón: la fila ya lleva a la ficha. */
.lz-rank__ver {
	display: block;
	text-align: center;
	font-size: var(--lz-text-xs);
	color: var(--lz-muted);
}

/* El valor se limita a dos líneas. Los datos de retirada y depósito son
   texto libre y algunos llegan a treinta caracteres: sin tope, una sola
   fila alta desalinea toda la tabla. */
.lz-rank__valor {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Etiqueta por celda: invisible en tabla, imprescindible al apilar. */
.lz-rank__label { display: none; }

.lz-rank__empty { color: var(--lz-faint); }

.lz-rank__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--lz-space-2);
}

/* Cierre de la tabla y salida al listado completo. Comparte fondo con
   la superficie hundida para leerse como pie, no como una fila más, y
   marca la acción con el navy de marca. El dorado se reserva para los
   CTA de afiliado. */
.lz-rank__more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--lz-space-3);
	font-family: var(--lz-font-display);
	font-size: var(--lz-text-base);
	text-transform: uppercase;
	letter-spacing: var(--lz-tracking-wide);
	/* Enlace secundario de marca: verde suave, no un gris que parece desactivado. */
	color: var(--lz-brand-text);
	background: var(--lz-brand-surface);
	border: 1px solid var(--lz-line);
	border-top: 0;
	border-radius: 0 0 var(--lz-radius-md) var(--lz-radius-md);
	/* Altura de acción, no de fila de tabla. */
	min-height: 60px;
	padding-inline: var(--lz-space-5);
	transition: background-color var(--lz-duration) var(--lz-ease),
	            color var(--lz-duration) var(--lz-ease);
}

/* ---- Despliegue de las posiciones 6 a 10 en móvil ----
   En escritorio caben las diez sin castigar el scroll, así que el botón
   no existe y todas las filas se ven. Por debajo de 767px la tabla pasa
   a tarjetas apiladas y diez seguidas empujan el resto de la home muy
   abajo: se muestran cinco y las otras cinco quedan a un toque.
   Las diez viajan siempre en el HTML —ocultarlas es cosa del CSS—
   para que el rastreo y los datos estructurados las vean todas. */
.lz-rank__expand { display: none; }

/* La flecha avanza al pasar el ratón: refuerza que lleva a otro sitio. */
.lz-rank__more .lz-icon {
	transition: transform var(--lz-duration) var(--lz-ease);
}

.lz-rank__more:hover {
	background: var(--lz-brand);
	color: var(--lz-on-brand);
}

.lz-rank__more:hover .lz-icon {
	transform: translateX(4px);
}

.lz-rank__more:focus-visible {
	outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
	.lz-rank__more .lz-icon,
	.lz-rank__more:hover .lz-icon {
		transition: none;
		transform: none;
	}

	/* El giro del acordeón indica estado, así que se conserva; lo que
	   se elimina es la animación del giro. */
	.lz-rank__expand .lz-icon { transition: none; }
}


/* ============================================================
   CONFIANZA
   ============================================================ */

.lz-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--lz-space-4);
}

.lz-trust__item {
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md);
	padding: var(--lz-space-5);
}

.lz-trust__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--lz-radius);
	background: color-mix(in srgb, var(--lz-heading) 7%, transparent);
	color: var(--lz-heading);
	margin-bottom: var(--lz-space-4);
}

.lz-trust__item h3 {
	font-size: var(--lz-text-md);
	margin-bottom: var(--lz-space-2);
}

.lz-trust__item p {
	color: var(--lz-muted);
	font-size: var(--lz-text-base);
}


/* ============================================================
   BONOS

   Tres tarjetas equivalentes en fila, cada una con su CTA. El
   CTA se ancla abajo para que queden alineados aunque los
   textos tengan distinta longitud.
   ============================================================ */

.lz-bonos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--lz-space-5);
	align-items: stretch;
}

/* Tarjetas clicables: el contexto del enlace de cobertura y la señal
   de que responden al clic. Sin el cambio al apuntar, el usuario no
   sabe que la tarjeta entera lleva a algún sitio. */
.lz-guia--destacada.is-clicable,
.lz-bono.is-clicable {
	position: relative;
	transition: border-color var(--lz-duration) var(--lz-ease);
}

.lz-guia--destacada:hover,
.lz-bono:hover {
	border-color: var(--lz-accent);
}

.lz-guia--destacada:hover .lz-guia__title a,
.lz-bono:hover .lz-bono__title a {
	color: var(--lz-brand-text);
}

.lz-guia__title a,
.lz-bono__title a {
	transition: color var(--lz-duration) var(--lz-ease);
	text-decoration: none;
}

.lz-bono {
	display: flex;
	flex-direction: column;
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md);
	padding: var(--lz-space-5);
}

.lz-bono__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lz-space-3);
	margin-bottom: var(--lz-space-3);
}

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

.lz-bono__urgencia {
	font-size: var(--lz-text-xs);
	font-weight: 600;
	color: var(--lz-danger);
	white-space: nowrap;
}

.lz-bono__title {
	font-size: var(--lz-text-lg);
	line-height: var(--lz-leading-snug);
	margin-bottom: var(--lz-space-2);
}

.lz-bono__desc {
	color: var(--lz-muted);
	font-size: var(--lz-text-base);
	margin-bottom: var(--lz-space-4);
}

/* Ficha de datos: pares etiqueta/valor, no píldoras sueltas. */
.lz-bono__datos {
	margin: 0 0 var(--lz-space-5);
	border-top: 1px solid var(--lz-line);
	/* Empuja el CTA al pie de la tarjeta. */
	margin-top: auto;
}

.lz-bono__datos > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lz-space-4);
	padding-block: var(--lz-space-2);
	border-bottom: 1px solid var(--lz-line);
}

.lz-bono__datos dt {
	color: var(--lz-muted);
	font-size: var(--lz-text-sm);
}

.lz-bono__datos dd {
	margin: 0;
	font-weight: 600;
	color: var(--lz-heading);
	font-size: var(--lz-text-base);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.lz-bono .lz-btn { margin-top: auto; }


/* ============================================================
   GUÍAS

   Una pieza destacada y una lista compacta al lado: jerarquía
   clara sin tarjetas a medio tamaño.
   ============================================================ */

.lz-guias {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--lz-space-6);
	align-items: start;
}

.lz-guia--destacada {
	display: flex;
	flex-direction: column;
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md);
	overflow: hidden;
}

.lz-guia__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--lz-surface-sunken);
	overflow: hidden;
}

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

.lz-guia__media-ph {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--lz-surface-sunken);
}

.lz-guia__body { padding: var(--lz-space-5); }

.lz-guia__meta {
	color: var(--lz-muted);
	font-size: var(--lz-text-xs);
	margin-bottom: var(--lz-space-2);
}

.lz-guia__title {
	font-size: var(--lz-text-xl);
	line-height: var(--lz-leading-snug);
	margin-bottom: var(--lz-space-2);
}

.lz-guia__excerpt {
	color: var(--lz-muted);
	font-size: var(--lz-text-base);
}

/* Lista lateral */

.lz-guias__lista {
	display: flex;
	flex-direction: column;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md);
	overflow: hidden;
}

.lz-guia-item {
	display: flex;
	align-items: center;
	gap: var(--lz-space-3);
	padding: var(--lz-space-3) var(--lz-space-4);
	border-bottom: 1px solid var(--lz-line-soft);
	transition: background-color var(--lz-duration) var(--lz-ease);
	/* Contexto del enlace de cobertura. */
	position: relative;
}

.lz-guia-item:last-child { border-bottom: 0; }
.lz-guia-item:hover { background: var(--lz-surface-sunken); }

.lz-guia-item__media {
	display: block;
	width: 72px;
	height: 54px;
	border-radius: var(--lz-radius-sm);
	background: var(--lz-surface-sunken);
	overflow: hidden;
	flex-shrink: 0;
}

.lz-guia-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lz-guia-item__body { min-width: 0; }

.lz-guia-item__title {
	font-size: var(--lz-text-base);
	line-height: var(--lz-leading-snug);
	/* Dos líneas como máximo: con seis filas, un titular largo
	   descuadraría la altura de la columna. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


/* ============================================================
   GUÍA DE LA PORTADA
   ============================================================ */

.lz-guia-portada__box {
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md);
	padding: var(--lz-space-8);
}

.lz-guia-portada__box > *:first-child { margin-top: 0; }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1199px) {
	.lz-hero__inner { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--lz-space-8); }

	/* Se retira la retirada: cuatro columnas de datos no caben con
	   holgura por debajo de 1200px y es el dato menos decisivo de los
	   cuatro para comparar de un vistazo. */
	.lz-rank__head,
	.lz-rank__row {
		grid-template-columns:
			minmax(160px, 1.6fr)
			minmax(190px, 2.2fr)
			minmax(105px, 1fr)
			minmax(140px, 150px);
		gap: var(--lz-space-4);
	}

	.lz-rank__head span:nth-child(4),
	.lz-rank__row .lz-rank__dato:nth-of-type(2) { display: none; }
}

@media (max-width: 991px) {
	.lz-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--lz-space-8);
		padding-block: var(--lz-space-10) var(--lz-space-12);
	}

	.lz-hero__title { max-width: none; }

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

	.lz-guias { grid-template-columns: 1fr; }

	/* La tabla se convierte en fichas apiladas. */
	.lz-rank__head { display: none; }

	.lz-rank__row {
		grid-template-columns: minmax(0, 1fr) minmax(140px, 150px);
		row-gap: var(--lz-space-3);
		column-gap: var(--lz-space-4);
		padding: var(--lz-space-4);
		/* En ficha manda el contenido: una altura fija de tabla dejaría
		   huecos en las que tienen menos datos. */
		min-height: 0;
	}

	/* Apilado hay sitio de sobra: el dato se lee entero. */
	.lz-rank__valor {
		display: block;
		-webkit-line-clamp: none;
		overflow: visible;
	}

	.lz-rank__op { grid-column: 1 / -1; }

	.lz-rank__bono,
	.lz-rank__dato {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.lz-rank__bono { grid-column: 1 / -1; }

	/* Al perder la cabecera, cada dato necesita su etiqueta. */
	.lz-rank__label {
		display: block;
		font-family: var(--lz-font-display);
		font-size: var(--lz-text-xs);
		text-transform: uppercase;
		letter-spacing: var(--lz-tracking-wide);
		color: var(--lz-muted);
	}

	.lz-rank__head span:nth-child(4),
	.lz-rank__row .lz-rank__dato:nth-of-type(2) { display: flex; }

	.lz-rank__actions {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
	}

	/* El botón no se estira del todo: apilada, la fila necesita zona
	   libre alrededor para poder pulsarse y llegar a la ficha. */
	.lz-rank__actions .lz-btn {
		flex-grow: 0;
		min-width: 100%;
		margin-inline-start: auto;
	}

	/* Rótulo de «ver análisis» alineado con el botón. */
	.lz-rank__ver {
		margin-inline-start: auto;
		text-align: end;
	}
}

@media (max-width: 767px) {

	/* Cinco visibles y cinco a un toque: la sección deja de ocupar
	   pantalla y media antes de que se vea nada más de la home. */
	.lz-rank__row.is-extra { display: none; }

	.lz-rank.is-expandido .lz-rank__row.is-extra { display: grid; }

	.lz-rank__expand {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--lz-space-2);
		width: 100%;
		min-height: 52px;
		padding-inline: var(--lz-space-4);
		font-family: var(--lz-font-display);
		font-size: var(--lz-text-sm);
		text-transform: uppercase;
		letter-spacing: var(--lz-tracking-wide);
		color: var(--lz-heading);
		background: var(--lz-surface-sunken);
		border: 0;
		border-top: 1px solid var(--lz-line);
		cursor: pointer;
	}

	/* Gira hacia abajo para leerse como "desplegar" y no como "ir a". */
	.lz-rank__expand .lz-icon {
		transform: rotate(90deg);
		transition: transform var(--lz-duration) var(--lz-ease);
	}

	.lz-rank__expand[aria-expanded="true"] .lz-icon {
		transform: rotate(-90deg);
	}

	.lz-rank__expand:focus-visible { outline-offset: -3px; }

	.lz-tabs { width: 100%; }
	.lz-tab { flex: 1 1 0; padding-inline: var(--lz-space-2); }

	/* Buscador apilado: botón a ancho completo. */
	.lz-search {
		flex-direction: column;
		box-shadow: none;
		gap: var(--lz-space-2);
	}

	.lz-search__field {
		border-radius: var(--lz-radius);
		min-height: 52px;
	}

	.lz-search__btn {
		border-radius: var(--lz-radius);
		min-height: 52px;
	}

	.lz-bonos { grid-template-columns: 1fr; }

	.lz-rank__row { grid-template-columns: 1fr; }
	.lz-rank__actions { flex-direction: column; align-items: stretch; }

	.lz-guia-item__media { width: 72px; height: 54px; }

	.lz-guia-portada__box { padding: var(--lz-space-5); }
}

@media (max-width: 575px) {
	.lz-trust__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   MOVIMIENTO REDUCIDO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.lz-rank__row,
	.lz-guia-item { transition: none; }
}

/* Fila/celda envolvente del botón «Ver más» (solo semántica ARIA). */
.lz-rank__expand-fila { display: contents; }