/**
 * Advertencias DGOJ (Resolución 18/09/2026, anexo I, séptima) y aviso de
 * límites conjuntos (RD 520/2026).
 *
 * La banda NO usa los tokens del tema a propósito: el formato es
 * obligatorio y no puede cambiar con la marca ni con un modo oscuro.
 *  - Fondo blanco, texto negro, Helvetica bold (Arial como equivalente
 *    donde Helvetica no existe: Android y Windows).
 *  - Marco negro de 18 px y, en webs de afiliados, borde exterior
 *    blanco de 2 px.
 *  - Margen interior ~10 px. Menores y web al ~60 % del tamaño del
 *    mensaje de riesgo.
 *  - Texto en minúscula (redacción tal cual del BOE, sin versalitas ni
 *    text-transform).
 */

/* ===================== BANDA ===================== */

.lz-dgoj {
	--lz-dgoj-fs: clamp(1rem, 0.85rem + 1.2vw, 1.5rem);
	box-sizing: border-box;
	width: 100%;
	background: #fff;
	color: #000;
	border: 18px solid #000;
	outline: 2px solid #fff;          /* borde exterior blanco (afiliados) */
	outline-offset: 0;
	text-align: center;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
}

.lz-dgoj__enlace {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15em;
	height: 100%;
	padding: 10px;
	color: inherit;
	text-decoration: none;
	font-size: var(--lz-dgoj-fs);
	line-height: 1.2;
}

/* Formato oficial: negro sobre blanco SIEMPRE. Sin !important, las reglas
   de enlaces de zonas oscuras (p. ej. el pie: «.lz-site-footer a») lo
   teñían de gris claro y el aviso quedaba ilegible sobre su fondo blanco. */
.lz-dgoj .lz-dgoj__enlace,
.lz-dgoj .lz-dgoj__enlace:hover,
.lz-dgoj .lz-dgoj__enlace * {
	color: #000 !important;
}

.lz-dgoj__enlace:hover,
.lz-dgoj__enlace:focus-visible {
	color: inherit;
	text-decoration: underline;
}

.lz-dgoj__enlace:focus-visible {
	outline: 3px solid #000;
	outline-offset: -6px;
}

/* El mensaje de riesgo ocupa 1–3 líneas: se limita el ancho para que
   reparta en líneas equilibradas en vez de una tira larga. */
.lz-dgoj__riesgo {
	display: block;
	max-width: 26ch;
	font-size: 1em;
	text-wrap: balance;
}

.lz-dgoj__msg[hidden] {
	display: none !important;
}

.lz-dgoj__secundario {
	display: block;
	font-size: 0.6em;
}

/* Variante 'banda': dos líneas, para creatividades propias. */
.lz-dgoj--banda {
	--lz-dgoj-fs: clamp(0.8rem, 0.7rem + 0.8vw, 1.15rem);
}

.lz-dgoj--banda .lz-dgoj__riesgo {
	max-width: none;
}

/* Banda fija en el pie del sitio: refuerzo permanente. */
.lz-footer__dgoj {
	padding: var(--lz-space-6, 1.5rem) var(--lz-space-4, 1rem);
	background: var(--lz-surface-footer-deep, #0B1B2E);
}

.lz-footer__dgoj .lz-dgoj {
	max-width: 46rem;
	margin-inline: auto;
}

/* En la caja lateral de la ficha, junto al CTA. */
.lz-ficha__caja .lz-dgoj {
	--lz-dgoj-fs: clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem);
	margin-top: var(--lz-space-4, 1rem);
}

/* ===================== BANNER PROPIO ===================== */

/* La banda ocupa como mínimo el 15 % del alto y el 100 % del ancho
   (anexo I, tercera). Con fr, si el texto necesita más, crece: la norma
   dice "al menos". La creatividad debe tener alto definido: aspect-ratio. */
.lz-anuncio {
	position: relative;
	display: grid;
	grid-template-rows: minmax(0, 85fr) minmax(min-content, 15fr);
	aspect-ratio: var(--lz-anuncio-ratio, 4 / 3);
	width: 100%;
	max-width: 40rem;
	margin: var(--lz-space-6, 1.5rem) auto;
	overflow: hidden;
	background: #fff;
}

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

.lz-anuncio .lz-dgoj {
	height: 100%;
	outline: 0;              /* el borde blanco es solo para la versión web */
}

.lz-anuncio__etiqueta {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1;
	padding: 0.15rem 0.5rem;
	border-radius: var(--lz-radius-sm, 6px);
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
}

@media (min-width: 48em) {
	.lz-anuncio {
		--lz-anuncio-ratio: 16 / 9;
	}
}

/* ===================== VENTANA EMERGENTE ===================== */

/* Ventana modal centrada sobre un velo. El bloque del mensaje (formato
   oficial en blanco y negro, que no se toca) va dentro de una tarjeta del
   sistema de diseño con cabecera y pie, para que se lea como un aviso y
   no como un trozo de página roto.

   15 % del área visible (anexo I, cuarta), contando SOLO el bloque del
   mensaje, ya descontado el relleno de la tarjeta:
     375 px   (92vw − 24 px) × 19vh ≈ 16,3 %
     768 px   (76vw − 40 px) × 23vh ≈ 16,3 %
     1280 px  (62vw − 48 px) × 28vh ≈ 16,3 % */
.lz-dgoj-pop {
	position: fixed;
	inset: 0;
	z-index: calc(var(--lz-z-modal, 400) + 5);
	display: grid;
	place-items: center;
	padding: var(--lz-space-4, 1rem);
}

.lz-dgoj-pop[hidden] {
	display: none;
}

.lz-dgoj-pop__fondo {
	position: absolute;
	inset: 0;
	background: var(--lz-overlay, rgba(28, 28, 28, .62));
	backdrop-filter: blur(3px);
}

/* Hasta que se puede cerrar, el velo no reacciona (cursor normal). */
.lz-dgoj-pop.is-cerrable .lz-dgoj-pop__fondo { cursor: pointer; }

.lz-dgoj-pop__caja {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--lz-space-3, .75rem);
	width: 92vw;
	max-width: 100%;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	padding: 12px;
	background: var(--lz-surface-raised, #FDFDFD);
	border: 1px solid var(--lz-line, #DADADA);
	border-radius: var(--lz-radius-lg, 14px);
	box-shadow: var(--lz-shadow-lg);
}

/* El contenedor recibe el foco solo para que el lector de pantalla entre
   en el diálogo: no es un control, no lleva anillo. */
.lz-dgoj-pop__caja:focus,
.lz-dgoj-pop__caja:focus-visible { outline: none; }

.lz-dgoj-pop__cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lz-space-2, .5rem);
	flex-wrap: wrap;
	margin: 0;
	padding: 2px 4px 0;
}

.lz-dgoj-pop__titulo {
	font-family: var(--lz-font-display, system-ui);
	font-size: var(--lz-text-base, .9375rem);
	text-transform: uppercase;
	letter-spacing: var(--lz-tracking-wide, .05em);
	color: var(--lz-heading, #1C1C1C);
}

.lz-dgoj-pop__origen {
	font-size: var(--lz-text-xs, .75rem);
	color: var(--lz-muted, #555);
}

.lz-dgoj-pop .lz-dgoj {
	--lz-dgoj-fs: clamp(1.15rem, 0.9rem + 1.6vw, 2rem);
	min-height: 19vh;
}

.lz-dgoj-pop__pie {
	display: flex;
	align-items: center;
	gap: var(--lz-space-4, 1rem);
	padding: 0 4px 2px;
}

/* Barra de tiempo mínimo de exposición. */
.lz-dgoj-pop__tiempo {
	flex: 1 1 auto;
	height: 4px;
	border-radius: 2px;
	background: var(--lz-surface-sunken, #EAEAEA);
	overflow: hidden;
}

.lz-dgoj-pop__progreso {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--lz-brand-text, #0F766E);
	transform-origin: left;
	transition-property: transform;
	transition-timing-function: linear;
}

.lz-dgoj-pop__progreso.is-corriendo { transform: scaleX(0); }
.lz-dgoj-pop.is-cerrable .lz-dgoj-pop__tiempo { visibility: hidden; }

.lz-dgoj-pop__cerrar {
	flex: none;
	min-width: 10.5rem;
}

/* Deshabilitado: legible (no solo apagado) y sin cursor de clic. */
.lz-dgoj-pop__cerrar:disabled {
	opacity: 1;
	color: var(--lz-muted, #555);
	border-color: var(--lz-line, #DADADA);
	cursor: default;
}

@media (min-width: 40em) {
	.lz-dgoj-pop__caja { width: 76vw; padding: 20px; }
	.lz-dgoj-pop .lz-dgoj { min-height: 23vh; }
}

@media (min-width: 64em) {
	.lz-dgoj-pop__caja { width: 62vw; padding: 24px; }
	.lz-dgoj-pop .lz-dgoj { min-height: 28vh; }
}

@media (prefers-reduced-motion: no-preference) {
	.lz-dgoj-pop:not([hidden]) .lz-dgoj-pop__caja {
		animation: lz-dgoj-entrada 0.2s ease-out;
	}
}

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

@keyframes lz-dgoj-entrada {
	from { opacity: 0; transform: scale(0.97); }
	to   { opacity: 1; transform: none; }
}

/* ===================== +18 JUNTO AL CTA ===================== */

.lz-cta-edad {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	margin-top: 0.4rem;
	color: var(--lz-muted, #5E656F);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
}

/* Si el CTA está oculto (p. ej. carrusel o acordeón cerrado), el aviso
   también: el JS marca el par con data-lz-cta-oculto. */
.lz-cta-edad[data-lz-cta-oculto] {
	display: none;
}

/* Sobre fondos oscuros (barra móvil, hero). */
.lz-surface-inverse .lz-cta-edad {
	color: rgba(255, 255, 255, 0.85);
}

/* Enlace dentro de un párrafo: el aviso va en línea, no debajo. */
.lz-cta-edad--inline {
	display: inline-flex;
	width: auto;
	margin: 0 0 0 0.35rem;
	vertical-align: baseline;
}

/* Barra móvil: hay poco alto, el aviso va bajo el nombre del operador. */
.lz-cta-edad--compacta {
	justify-content: flex-start;
	width: auto;
	margin-top: 0.15rem;
	color: inherit;
	font-size: 0.7rem;
	opacity: 0.85;
}

/* ===================== LÍMITES CONJUNTOS ===================== */

.lz-limites {
	margin: var(--lz-space-8, 2rem) 0;
	padding: var(--lz-space-5, 1.25rem);
	border: 1px solid var(--lz-accent-border, #EADCBE);
	border-left: 4px solid var(--lz-navy, #0F2A4A);
	border-radius: var(--lz-radius-md, 12px);
	background: var(--lz-accent-surface, #FBF7EF);
	color: var(--lz-ink, #14181F);
	scroll-margin-top: 6rem;   /* el ancla #limites-conjuntos no queda bajo el header */
}

.lz-limites__kicker {
	margin: 0 0 var(--lz-space-1, 0.25rem);
	color: var(--lz-warning, #96702A);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.lz-limites__titulo {
	margin: 0 0 var(--lz-space-3, 0.75rem);
	color: var(--lz-heading, #0F2A4A);
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
	line-height: 1.25;
}

.lz-limites__texto,
.lz-limites__nota {
	margin: 0 0 var(--lz-space-3, 0.75rem);
}

.lz-limites__nota {
	color: var(--lz-muted, #5E656F);
	font-size: 0.875rem;
}

.lz-limites__cifras {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lz-space-2, 0.5rem);
	margin: 0 0 var(--lz-space-3, 0.75rem);
	padding: 0;
	list-style: none;
}

.lz-limites__cifras li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lz-space-2, 0.5rem);
	padding: var(--lz-space-3, 0.75rem) var(--lz-space-4, 1rem);
	border-radius: var(--lz-radius, 8px);
	background: var(--lz-surface-raised, #fff);
}

.lz-limites__cifras strong {
	color: var(--lz-navy, #0F2A4A);
	font-size: 1.35rem;
	font-variant-numeric: tabular-nums;
}

.lz-limites__cifras span {
	color: var(--lz-muted, #5E656F);
	font-size: 0.875rem;
}

.lz-limites__reglas {
	display: grid;
	gap: var(--lz-space-3, 0.75rem);
	margin: 0 0 var(--lz-space-4, 1rem);
}

.lz-limites__reglas dt {
	font-weight: 700;
}

.lz-limites__reglas dd {
	margin: 0;
}

.lz-limites__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lz-space-3, 0.75rem) var(--lz-space-5, 1.25rem);
	margin: 0;
}

.lz-limites__enlace {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.6rem 1.1rem;
	border-radius: var(--lz-radius, 8px);
	background: var(--lz-navy, #0F2A4A);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.lz-limites__enlace:hover,
.lz-limites__enlace:focus-visible {
	background: var(--lz-navy-soft, #0D3A5A);
	color: #fff;
}

.lz-limites__fuente {
	font-size: 0.85rem;
}

@media (min-width: 40em) {
	.lz-limites {
		padding: var(--lz-space-6, 1.5rem) var(--lz-space-8, 2rem);
	}

	.lz-limites__cifras {
		grid-template-columns: repeat(3, 1fr);
	}

	.lz-limites__cifras li {
		flex-direction: column;
		align-items: flex-start;
	}

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