/**
 * Ficha de operador: casinos y casas de apuestas.
 */

.lz-ficha {
	padding-block: var(--lz-space-6) var(--lz-space-9);
}

/* ============================================================
   Cabecera
   ============================================================ */

.lz-ficha__head {
	/* Contexto para el enlace de cobertura: sin esto se estira respecto
	   a un ancestro lejano y el clic no cae sobre la cabecera. */
	position: relative;
	margin-bottom: var(--lz-space-10);
	padding: var(--lz-space-8);
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md);
}

/* Identidad a la izquierda y llamada a la acción a la derecha: quien
   llega decidido no debería tener que buscar el botón. */
.lz-ficha__portada {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lz-space-5);
	flex-wrap: wrap;
}

.lz-ficha__portada-cta { flex-shrink: 0; }

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

.lz-ficha__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	padding: var(--lz-space-2);
	background: #E8EBEF;
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md);
	flex-shrink: 0;
}

.lz-ficha__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.lz-ficha__titulos { min-width: 0; }

.lz-ficha__title {
	font-size: var(--lz-text-2xl);
	margin: 0 0 var(--lz-space-3);
}

.lz-ficha__licencia,
.lz-ficha__posicion {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px var(--lz-space-3);
	border-radius: var(--lz-radius-sm);
}

/* La licencia es la señal de confianza principal, así que lleva el
   acento; la posición es informativa y se queda neutra. */
.lz-ficha__licencia {
	color: var(--lz-heading);
	background: var(--lz-accent-surface);
	border: 1px solid var(--lz-accent-border);
}

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

.lz-ficha__posicion {
	color: var(--lz-muted);
	background: var(--lz-surface-sunken);
	border: 1px solid var(--lz-line);
}

/* Aviso de operador sin acuerdo dentro de la ficha. */
.lz-ficha__sin-acuerdo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lz-space-5);
	margin-top: var(--lz-space-5);
	margin-bottom: 0;
	padding: var(--lz-space-4) var(--lz-space-5);
	background: var(--lz-surface-sunken);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md);
}

.lz-ficha__sin-acuerdo p {
	margin: 0;
	font-size: var(--lz-text-sm);
	color: var(--lz-muted);
}

.lz-ficha__sin-acuerdo .lz-btn { flex-shrink: 0; }

/* ============================================================
   Cuerpo a dos columnas
   ============================================================ */

.lz-ficha__cuerpo {
	display: grid;
	/* El lateral incluye 8px de relleno a cada lado para la sombra de
	   la caja, así que se declara 336px para que la caja mida los 320
	   previstos. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 336px);
	gap: var(--lz-space-12);
	align-items: start;
}

/* La columna principal también es hijo de rejilla: sin min-width: 0 no
   puede encogerse por debajo de su contenido, y una tabla ancha o un
   carrusel la ensancharían arrastrando la página. */
.lz-ficha__principal {
	min-width: 0;
}

/* Entradilla: mayor y más suelta que el cuerpo, para que la ficha
   arranque con voz propia en lugar de con un párrafo más. */
.lz-ficha__resumen {
	font-size: var(--lz-text-lg);
	line-height: 1.65;
	color: var(--lz-muted);
}

.lz-ficha__resumen p:first-child { margin-top: 0; }

/* Separación generosa entre bloques: el análisis tiene muchas
   secciones seguidas y sin aire se leen como un muro. */
.lz-ficha__seccion { margin-top: var(--lz-space-12); }

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

/* ---- Tabla de datos ---- */

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

.lz-datos__fila {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: var(--lz-space-4);
	padding: var(--lz-space-5) var(--lz-space-6);
	border-bottom: 1px solid var(--lz-line-soft);
}

.lz-datos__fila:last-child { border-bottom: 0; }

/* Se alternan para poder seguir la fila de un vistazo. */
.lz-datos__fila:nth-child(even) { background: var(--lz-surface-sunken); }

.lz-datos dt {
	font-family: var(--lz-font-display);
	font-size: var(--lz-text-sm);
	color: var(--lz-muted);
	margin: 0;
}

.lz-datos dd { font-weight: 500; }

.lz-datos dd {
	margin: 0;
	color: var(--lz-ink);
}

/* ---- Métodos de pago ---- */

.lz-pagos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lz-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.lz-pagos__item {
	padding: var(--lz-space-2) var(--lz-space-4);
	font-size: var(--lz-text-sm);
	color: var(--lz-ink);
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-sm);
}

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

/* La columna entera acompaña al lector, no solo la caja: el índice
   pierde su función si se queda arriba mientras se recorre el análisis.
   El desplazamiento evita que la cabecera pegajosa (72px, 62px
   condensada) la tape. */
.lz-ficha__lateral {
	position: sticky;
	top: calc(72px + var(--lz-space-4));
	/* Un hijo de rejilla vale min-width: auto por defecto, es decir, no
	   puede encogerse por debajo del ancho de su contenido: cualquier
	   texto largo del índice ensanchaba la columna y desbordaba la
	   página. La principal ya lo tenía vía minmax(0, 1fr). */
	min-width: 0;
	/* Si el lateral supera la altura de la ventana, se desplaza dentro
	   en lugar de dejar el final inalcanzable. */
	max-height: calc(100vh - 72px - var(--lz-space-8));
	/* Vertical explícito y horizontal cerrado: overflow-y: auto por sí
	   solo habilita también el eje horizontal en cuanto el contenido no
	   cabe, y eso sacaba una barra de desplazamiento lateral. */
	overflow-y: auto;
	overflow-x: hidden;
	/* El margen negativo hacía sobresalir el contenido y provocaba ese
	   desbordamiento; el hueco para la sombra se resuelve solo con
	   relleno. */
	padding: var(--lz-space-2);
	/* La barra de desplazamiento solo aparece al usarla. */
	scrollbar-width: thin;
}

.lz-ficha__caja {
	position: relative;
	padding: var(--lz-space-5);
	/* Nivel elevado: caja de conversión: es la acción principal de la ficha. */
	background: var(--lz-surface-raised);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md);
	box-shadow: var(--lz-shadow-md);
}

.lz-ficha__caja-kicker {
	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);
	margin: 0 0 var(--lz-space-2);
}

.lz-ficha__caja-bono {
	overflow-wrap: anywhere;
	font-size: var(--lz-text-md);
	color: var(--lz-heading);
	margin: 0 0 var(--lz-space-5);
}

.lz-ficha__caja-legal {
	font-size: var(--lz-text-xs);
	color: var(--lz-faint);
	margin: var(--lz-space-4) 0 0;
}

.lz-ficha__caja-edad {
	display: flex;
	align-items: center;
	gap: var(--lz-space-2);
	margin: var(--lz-space-4) 0 0;
	padding-top: var(--lz-space-4);
	border-top: 1px solid var(--lz-line-soft);
	font-size: var(--lz-text-xs);
	color: var(--lz-muted);
}

/* ============================================================
   Otras opciones
   ============================================================ */

.lz-ficha__otros {
	margin-top: var(--lz-space-16);
	padding-top: var(--lz-space-10);
	border-top: 1px solid var(--lz-line);
}

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



/* ============================================================
   Ventajas y desventajas
   ============================================================ */

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

/* Sin marco: una línea superior basta para separar las dos columnas.
   Encajarlo todo en tarjetas idénticas aplana la jerarquía y hace que
   la página se lea como una plantilla, no como un análisis. */
.lz-pros__col {
	padding-top: var(--lz-space-4);
	border-top: 2px solid var(--lz-line);
}

.lz-pros__col--si { border-top-color: var(--lz-accent); }

.lz-pros__title {
	display: flex;
	align-items: center;
	gap: var(--lz-space-2);
	font-size: var(--lz-text-base);
	text-transform: uppercase;
	letter-spacing: var(--lz-tracking-wide);
	margin: 0 0 var(--lz-space-4);
}

.lz-pros__col--si .lz-pros__title .lz-icon { color: var(--lz-accent); }
.lz-pros__col--no .lz-pros__title .lz-icon { color: var(--lz-faint); }

.lz-pros__lista {
	display: flex;
	flex-direction: column;
	gap: var(--lz-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.lz-pros__lista li {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-inline-start: var(--lz-space-5);
	font-size: var(--lz-text-sm);
}

/* Un signo por punto: se distingue una ventaja de una desventaja sin
   leer el encabezado de la columna. */
.lz-pros__lista li::before {
	position: absolute;
	inset-inline-start: 0;
	top: 1px;
	font-weight: 700;
	line-height: 1.4;
}

.lz-pros__col--si .lz-pros__lista li::before {
	content: '+';
	/* Mismo motivo que el icono: el dorado no contrasta lo suficiente
	   sobre fondo claro para un elemento gráfico. */
	color: var(--lz-heading);
}

.lz-pros__col--no .lz-pros__lista li::before {
	content: '−';
	/* --lz-faint se queda en 2,54:1 sobre fondo claro: por debajo del
	   mínimo para un elemento que distingue una columna de la otra. */
	color: var(--lz-muted);
}

.lz-pros__lista strong { color: var(--lz-heading); }
.lz-pros__lista span { color: var(--lz-muted); }

/* ============================================================
   Preguntas frecuentes
   ============================================================ */

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

.lz-faq__item {
	border-bottom: 1px solid var(--lz-line-soft);
}

.lz-faq__item:last-child { border-bottom: 0; }

.lz-faq__pregunta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lz-space-4);
	padding: var(--lz-space-5) var(--lz-space-6);
	font-family: var(--lz-font-display);
	font-size: var(--lz-text-base);
	color: var(--lz-heading);
	cursor: pointer;
	list-style: none;
}

/* Safari pinta su propio triángulo en summary. */
.lz-faq__pregunta::-webkit-details-marker { display: none; }

.lz-faq__pregunta:hover { background: var(--lz-surface-sunken); }

.lz-faq__pregunta .lz-icon {
	color: var(--lz-accent);
	flex-shrink: 0;
	transform: rotate(90deg);
	transition: transform var(--lz-duration) var(--lz-ease);
}

.lz-faq__item[open] .lz-faq__pregunta .lz-icon {
	transform: rotate(-90deg);
}

.lz-faq__respuesta {
	padding: 0 var(--lz-space-6) var(--lz-space-6);
	color: var(--lz-muted);
	font-size: var(--lz-text-sm);
}

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

/* ============================================================
   Galería
   ============================================================ */

/* ---- Carrusel de capturas ----
   Las galerías mezclan capturas verticales de móvil (ratio 0,46) con
   horizontales de escritorio (1,78). Todas comparten un marco de altura
   fija y se ajustan con object-fit: contain, de modo que ninguna se
   recorta ni deforma sea cual sea su proporción. */

.lz-carrusel {
	position: relative;
}

.lz-carrusel .swiper {
	/* El desbordamiento visible dejaría ver las diapositivas contiguas
	   al deslizar. */
	overflow: hidden;
	padding-bottom: var(--lz-space-8);
}

/* Marco de la captura. No es interactivo: las imágenes son
   ilustrativas y abrir el archivo original sacaba al usuario de la
   ficha sin aportarle nada. */
.lz-carrusel__marco {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Altura común: es lo que impide que el carrusel salte de alto al
	   cambiar de una captura vertical a una horizontal. */
	height: 340px;
	padding: var(--lz-space-3);
	background: var(--lz-surface-sunken);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-md);
	overflow: hidden;
}

.lz-carrusel__marco img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* ---- Navegación ---- */

.lz-carrusel__nav {
	position: absolute;
	top: calc(50% - var(--lz-space-8));
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--lz-heading);
	background: var(--lz-surface);
	border: 1px solid var(--lz-line);
	border-radius: 50%;
	box-shadow: var(--lz-shadow-md);
	cursor: pointer;
	transition: border-color var(--lz-duration) var(--lz-ease),
	            color var(--lz-duration) var(--lz-ease);
}

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

/* Dentro del contenedor: sobresalir provocaba desplazamiento
   horizontal en cuanto la ventana se estrechaba. */
.lz-carrusel__nav--prev {
	inset-inline-start: var(--lz-space-3);
}

/* La flecha es la misma imagen girada: no hace falta un segundo icono. */
.lz-carrusel__nav--prev .lz-icon { transform: rotate(180deg); }

.lz-carrusel__nav--next {
	inset-inline-end: var(--lz-space-3);
}

/* Swiper marca así los extremos cuando no hay bucle. */
.lz-carrusel__nav.swiper-button-disabled {
	opacity: .35;
	cursor: default;
}

/* ---- Paginación ---- */

.lz-carrusel .swiper-pagination {
	bottom: 0;
}

.lz-carrusel .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: var(--lz-faint);
	opacity: .5;
}

.lz-carrusel .swiper-pagination-bullet-active {
	background: var(--lz-accent);
	opacity: 1;
	width: 22px;
	border-radius: 4px;
}

/* Sin JavaScript o con una sola imagen, las diapositivas se apilan y
   siguen siendo legibles. */
.lz-carrusel .swiper:not(.swiper-initialized) .swiper-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--lz-space-4);
}


@media (prefers-reduced-motion: reduce) {
	.lz-faq__pregunta .lz-icon { transition: none; }
}

/* ============================================================
   Datos destacados de la cabecera
   ============================================================ */

/* ---- Banner promocional ----
   La creatividad la entrega el operador y llega con proporciones muy
   distintas (desde 1024x143 hasta 1024x406, y algún GIF). Se respeta
   la que traiga: recortarla a una altura fija parte el texto que casi
   todas llevan incrustado. */
.lz-ficha__banner {
	display: block;
	margin: var(--lz-space-6) 0 0;
	border-radius: var(--lz-radius-md);
	overflow: hidden;
	border: 1px solid var(--lz-line);
	background: var(--lz-surface-sunken);
	line-height: 0;
}

.lz-ficha__banner img {
	width: 100%;
	height: auto;
	display: block;
}

/* Solo el que enlaza reacciona: el <figure> no es pulsable. */
a.lz-ficha__banner {
	transition: border-color .18s ease, transform .18s ease;
}

a.lz-ficha__banner:hover,
a.lz-ficha__banner:focus-visible {
	border-color: var(--lz-gold);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	a.lz-ficha__banner { transition: none; }
	a.lz-ficha__banner:hover,
	a.lz-ficha__banner:focus-visible { transform: none; }
}

.lz-destacados {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--lz-space-4);
	list-style: none;
	margin: var(--lz-space-8) 0 0 !important;
}

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

.lz-destacados__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	/* El dorado sobre la superficie de acento se queda en 2,25:1, por
	   debajo del mínimo para gráficos. Se usa el color de titular, que
	   contrasta en los dos temas: --lz-accent-ink no sirve aquí porque
	   en oscuro casi coincide con esta superficie. */
	color: var(--lz-heading);
	background: var(--lz-accent-surface);
	border: 1px solid var(--lz-accent-border);
	border-radius: var(--lz-radius-sm);
	flex-shrink: 0;
}

.lz-destacados__texto {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

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

.lz-destacados__valor {
	font-family: var(--lz-font-display);
	font-size: var(--lz-text-base);
	color: var(--lz-heading);
	/* Dos líneas como mucho: los valores son texto libre y alguno
	   llega a treinta caracteres. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ============================================================
   Índice del análisis
   ============================================================ */

.lz-indice {
	margin-bottom: var(--lz-space-6);
}

.lz-indice__lista {
	padding: var(--lz-space-3) var(--lz-space-4);
	border: 1px solid var(--lz-line);
	border-top: 0;
	border-radius: 0 0 var(--lz-radius-sm) var(--lz-radius-sm);
}

/* El título es el control: tiene que leerse como un botón, no como un
   encabezado. Fondo propio, borde y una flecha con caja para que se vea
   que despliega algo. */
.lz-indice__title {
	display: flex;
	align-items: center;
	gap: var(--lz-space-3);
	padding: var(--lz-space-3) var(--lz-space-4);
	font-family: var(--lz-font-display);
	font-size: var(--lz-text-sm);
	color: var(--lz-heading);
	background: var(--lz-surface-sunken);
	border: 1px solid var(--lz-line);
	border-radius: var(--lz-radius-sm);
	margin: 0;
	list-style: none;
	cursor: pointer;
	transition: border-color var(--lz-duration) var(--lz-ease),
	            background-color var(--lz-duration) var(--lz-ease);
	justify-content: space-between;
}

.lz-indice__title:hover {
	border-color: var(--lz-accent);
	background: var(--lz-surface);
}

.lz-indice[open] .lz-indice__title {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-color: transparent;
}

.lz-indice__title::-webkit-details-marker { display: none; }

/* La flecha va en caja propia: una flecha suelta de 16px pasaba
   desapercibida y el bloque no parecía desplegable. */
.lz-indice__title .lz-icon {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	padding: 5px;
	color: var(--lz-accent-ink);
	background: var(--lz-accent);
	border-radius: var(--lz-radius-sm);
	transform: rotate(90deg);
	transition: transform var(--lz-duration) var(--lz-ease);
}

.lz-indice[open] .lz-indice__title .lz-icon {
	transform: rotate(-90deg);
}



.lz-indice__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.lz-indice__item a {
	display: block;
	padding: 6px 0;
	/* Los títulos del análisis llegan a 53 caracteres: sin esto, una
	   palabra larga ensancharía la columna entera. */
	overflow-wrap: anywhere;
	font-size: var(--lz-text-sm);
	color: var(--lz-ink);
	line-height: 1.35;
	border-left: 2px solid transparent;
	padding-inline-start: var(--lz-space-3);
	transition: color var(--lz-duration) var(--lz-ease),
	            border-color var(--lz-duration) var(--lz-ease);
}

.lz-indice__item a:hover {
	color: var(--lz-heading);
	border-left-color: var(--lz-accent);
}

/* Los subapartados se sangran para que se lea la jerarquía. */
.lz-indice__item--h3 a {
	padding-inline-start: var(--lz-space-5);
	font-size: var(--lz-text-xs);
	color: var(--lz-muted);
}

/* Sección visible mientras se lee: la marca el JS. */
.lz-indice__item.is-activa a {
	color: var(--lz-heading);
	border-left-color: var(--lz-accent);
	font-weight: 600;
}

/* El ancla no debe quedar bajo la cabecera pegajosa al saltar. */
.lz-ficha__seccion :is(h2, h3)[id] {
	scroll-margin-top: calc(72px + var(--lz-space-5));
}



/* ============================================================
   Ritmo del análisis
   ============================================================
   El cuerpo del análisis llega a las treinta secciones. El espaciado
   general de .lz-prose sirve para un artículo corriente, pero aquí
   deja los encabezados demasiado pegados al párrafo anterior y todo
   se lee como un bloque continuo. */

.lz-ficha__seccion.lz-prose h2 {
	margin-top: var(--lz-space-12);
	margin-bottom: var(--lz-space-4);
	padding-top: var(--lz-space-6);
	font-size: var(--lz-text-xl);
	line-height: 1.25;
	/* Una línea fina marca el cambio de bloque sin encajonar. */
	border-top: 1px solid var(--lz-line);
}

/* El primer encabezado ya viene precedido del título de la sección. */
.lz-ficha__seccion.lz-prose > h2:first-of-type {
	margin-top: var(--lz-space-6);
	padding-top: 0;
	border-top: 0;
}

.lz-ficha__seccion.lz-prose h3 {
	margin-top: var(--lz-space-9);
	margin-bottom: var(--lz-space-3);
	font-size: var(--lz-text-md);
	line-height: 1.3;
	color: var(--lz-heading);
}

/* Texto algo más suelto: son análisis largos y se leen seguidos. */
.lz-ficha__seccion.lz-prose p {
	line-height: 1.75;
}

.lz-ficha__seccion.lz-prose > * + * {
	margin-top: var(--lz-space-5);
}

.lz-ficha__seccion.lz-prose ul,
.lz-ficha__seccion.lz-prose ol {
	margin-top: var(--lz-space-5);
}

.lz-ficha__seccion.lz-prose li + li {
	margin-top: var(--lz-space-3);
}

/* Las tablas dentro del análisis heredan el aire del resto. */
/* Las tablas del análisis vienen del editor y pueden tener cuatro o
   cinco columnas: en móvil desbordan la página entera. Se les da su
   propio desplazamiento horizontal para que sea la tabla la que se
   desliza y no el documento. */
/* Contención de lo que viene del editor.
   Estas reglas cuelgan de .lz-ficha, no de la combinación
   .lz-ficha__seccion.lz-prose: el contenido con tablas aparece también
   en las respuestas de las preguntas frecuentes y en el cuerpo de la
   entrada, y exigir ambas clases dejaba esas tablas sin contener. */

.lz-ficha table {
	margin-block: var(--lz-space-7);
	/* display: block permite el desplazamiento propio; sin él, la tabla
	   empuja la página entera en cuanto no cabe. */
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
}

.lz-ficha :is(th, td) {
	padding: var(--lz-space-4) var(--lz-space-5);
	/* Sin un mínimo, las celdas se comprimen a una palabra por línea. */
	min-width: 8rem;
}

/* Cualquier medio incrustado se ajusta al ancho disponible. */
.lz-ficha :is(img, iframe, video, embed, object, svg) {
	max-width: 100%;
}

.lz-ficha :is(img, iframe, video) {
	height: auto;
}

/* Una URL larga sin espacios ensancharía el bloque entero. */
.lz-ficha :is(p, li, td, th, dd, h1, h2, h3, h4) {
	overflow-wrap: anywhere;
}

/* Red de seguridad: ningún descendiente de la ficha puede ser más ancho
   que su contenedor. Cubre lo que llegue del editor sin previsión. */
.lz-ficha__principal > *,
.lz-ficha__seccion > * {
	max-width: 100%;
}

/* Medida de lectura: la columna principal da 92 caracteres por línea,
   muy por encima de los 60-75 cómodos. Se limita el texto corrido, pero
   no las tablas ni las listas de datos, que agradecen el ancho. */
.lz-ficha__seccion.lz-prose > p,
.lz-ficha__seccion.lz-prose > ul,
.lz-ficha__seccion.lz-prose > ol,
.lz-ficha__seccion.lz-prose > blockquote,
.lz-ficha__resumen > p {
	max-width: 68ch;
}

/* ---- Bloques clicables ----
   La cabecera y la caja lateral llevan al mismo destino que su botón.
   El cambio de borde al apuntar avisa de que el bloque entero responde,
   en lugar de prometerlo solo el botón. */

.lz-ficha__head.is-clicable,
.lz-ficha__caja.is-clicable {
	transition: border-color var(--lz-duration) var(--lz-ease);
}

.lz-ficha__head.is-clicable:hover,
.lz-ficha__caja.is-clicable:hover {
	border-color: var(--lz-accent);
}

/* El foco del teclado llega por el botón, que sigue siendo el enlace
   real; la cobertura queda fuera del orden de tabulación. */
.lz-ficha__head.is-clicable:focus-within,
.lz-ficha__caja.is-clicable:focus-within {
	border-color: var(--lz-accent);
}

/* ============================================================
   RESPONSIVE
   ============================================================
   Tres tramos: hasta 1199px se estrecha el lateral, hasta 991px se
   apila, y hasta 767px se reorganiza para el dedo. Antes las reglas
   estaban repartidas en cinco bloques que se pisaban entre sí. */

/* ---- Tablet horizontal: el lateral estorba menos estrecho ---- */
@media (max-width: 1199px) {
	.lz-ficha__cuerpo {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: var(--lz-space-8);
	}

	.lz-ficha__head { padding: var(--lz-space-6); }

	/* Cuatro datos en una columna de 550px quedan muy justos. */
	.lz-destacados { gap: var(--lz-space-3); }
	.lz-destacados__icono { width: 38px; height: 38px; }
}

/* ---- Tablet vertical: una sola columna ---- */
@media (max-width: 991px) {
	.lz-ficha__cuerpo {
		grid-template-columns: 1fr;
		gap: var(--lz-space-8);
	}

	/* Apilado, la caja pierde el sentido de acompañar: se coloca antes
	   del detalle para que el bono y el botón se vean sin desplazar. */
	.lz-ficha__lateral {
		order: -1;
		position: static;
		max-height: none;
		overflow: visible;
		padding: 0;
		margin: 0;
	}

	/* Sigue siendo contexto del enlace de cobertura. */
	.lz-ficha__caja {
		position: relative;
		top: auto;
	}

	/* Con el ancho completo caben los cuatro en fila. */
	.lz-destacados {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* El índice se pliega: con treinta entradas empujaba el contenido
	   media pantalla hacia abajo. */
	.lz-indice:not([open]) .lz-indice__lista { display: none; }
}

/* ---- Móvil ---- */
@media (max-width: 767px) {
	.lz-ficha { padding-block: var(--lz-space-5) var(--lz-space-8); }

	/* --- Cabecera --- */

	.lz-ficha__head {
		padding: var(--lz-space-5) var(--lz-space-4);
		margin-bottom: var(--lz-space-7);
	}

	.lz-ficha__portada {
		flex-direction: column;
		align-items: stretch;
		gap: var(--lz-space-4);
	}

	.lz-ficha__identidad { gap: var(--lz-space-4); }

	.lz-ficha__logo {
		width: 56px;
		height: 56px;
	}

	/* Un nombre como «Casino Gran Madrid» a text-xl ocupa 216px y solo
	   quedan 215px junto al logo: se baja de tamaño y se permite partir
	   para que nunca desborde. */
	.lz-ficha__title {
		font-size: var(--lz-text-lg);
		overflow-wrap: anywhere;
	}

	.lz-ficha__portada-cta { width: 100%; }
	.lz-ficha__portada-cta .lz-btn { width: 100%; }

	.lz-ficha__sin-acuerdo {
		flex-direction: column;
		align-items: stretch;
		padding: var(--lz-space-4);
	}

	/* --- Datos destacados ---
	   A dos columnas quedan 110px por valor y los textos largos piden
	   tres líneas. Se apilan en filas completas: el valor gana el ancho
	   entero y se lee de un vistazo. */
	.lz-destacados {
		grid-template-columns: 1fr;
		gap: var(--lz-space-3);
		margin-top: var(--lz-space-5);
		padding-top: var(--lz-space-4);
	}

	.lz-destacados__item {
		padding: var(--lz-space-3);
		background: var(--lz-surface-sunken);
		border-radius: var(--lz-radius-sm);
	}

	.lz-destacados__icono {
		width: 34px;
		height: 34px;
	}

	.lz-destacados__valor {
		font-size: var(--lz-text-sm);
		-webkit-line-clamp: 3;
	}

	/* --- Tabla de datos --- */

	.lz-datos__fila {
		grid-template-columns: 1fr;
		gap: 2px;
		padding: var(--lz-space-4);
	}

	/* --- Pros y contras --- */

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

	/* --- Preguntas frecuentes --- */

	.lz-faq__pregunta {
		padding: var(--lz-space-4);
		font-size: var(--lz-text-sm);
	}

	.lz-faq__respuesta { padding: 0 var(--lz-space-4) var(--lz-space-4); }

	/* --- Carrusel --- */

	.lz-carrusel__nav { width: 40px; height: 40px; }

	/* --- Análisis --- */

	.lz-ficha__seccion { margin-top: var(--lz-space-9); }

	.lz-ficha__seccion-title { font-size: var(--lz-text-lg); }

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

	.lz-ficha__seccion.lz-prose h2 {
		margin-top: var(--lz-space-9);
		padding-top: var(--lz-space-5);
		font-size: var(--lz-text-lg);
	}

	.lz-ficha__seccion.lz-prose h3 {
		margin-top: var(--lz-space-7);
		font-size: var(--lz-text-base);
	}

	/* --- Otros operadores --- */

	.lz-ficha__otros {
		margin-top: var(--lz-space-10);
		padding-top: var(--lz-space-7);
	}
}

/* ---- Móvil pequeño ---- */
@media (max-width: 380px) {
	.lz-ficha__head { padding: var(--lz-space-4) var(--lz-space-3); }

	.lz-ficha__logo { width: 48px; height: 48px; }

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

	.lz-carrusel__marco { height: 220px; }
}