/*
 * Portada: estilo de los bloques reescritos en la Fase 1.1 y del rediseño 1.4.
 *
 * POR QUÉ HACE FALTA UNA HOJA APARTE
 * El cuerpo de la portada vive en Bricks, y Bricks estiliza cada elemento por su
 * clase generada (`brxe-xxxxxx`). Todo lo que metemos dentro de un bloque de texto
 * —tablas, listas, avisos— sale sin estilo ninguno: una tabla HTML pelada al lado
 * del ranking, que sí está maquetado, se ve como un error de la página.
 *
 * Se apoya en clases propias (`gdm-…`) puestas en el HTML del bloque o en el campo
 * `_cssClasses` del elemento, nunca en las clases `brxe-*`: esas cambian cada vez
 * que alguien guarda la página en el constructor, y arrastrarían el estilo con
 * ellas.
 *
 * EL MODO OSCURO NO ES UN MEDIA QUERY DEL TEMA, Y ESO CAMBIA CÓMO SE ESCRIBE
 * Lo pinta el plugin WP Dark Mode, que marca `html[data-wp-dark-mode-active]` y
 * lleva dentro un motor tipo DarkReader: no aplica una paleta escrita a mano,
 * sino que lee el color declarado de cada elemento y calcula su equivalente
 * oscuro. La consecuencia práctica es la que se veía en la portada: una tarjeta
 * blanca sobre una página blanca no tiene contraste que convertir, y las dos
 * acaban en el mismo gris. No es que el contraste fuera bajo: es que en el
 * original era cero, y la conversión no puede inventarlo.
 *
 * De ahí las dos reglas de esta hoja:
 *
 *   1. Cada tarjeta lleva BORDE en modo claro. Un borde oscuro y tenue se
 *      convierte en un borde claro y tenue, así que la tarjeta sigue teniendo
 *      silueta después de la conversión. La sombra no vale: el motor la aplana.
 *   2. Encima se declara el fondo explícito bajo `html[data-wp-dark-mode-active]`,
 *      con `!important`, por si el plugin funciona con paleta fija en vez de
 *      conversión. Se repite en `prefers-color-scheme: dark` para el caso de que
 *      no llegue a ejecutarse ninguno de los dos.
 *
 * Sólo se carga en la portada (ver functions.php).
 *
 * @package GDM-Theme
 */

/* ---------------------------------------------------------------------------
 * Piezas compartidas
 *
 * Las tarjetas de la portada (criterios, ayuda, CTA de bonos, módulos de marca)
 * se dibujan todas con el mismo lápiz: un fondo apenas separado del papel, un
 * filo de un píxel y una sombra corta. Las variables están aquí para que ese
 * lápiz sea uno solo y el modo oscuro se resuelva en un sitio.
 * ------------------------------------------------------------------------- */

.brxe-section {
	--gdm-superficie: #ffffff;
	--gdm-superficie-2: #f6f8fa;
	--gdm-filo: rgba(18, 32, 48, .13);
	--gdm-filo-fuerte: rgba(18, 32, 48, .22);
	--gdm-sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .06);
	--gdm-sombra-alta: 0 2px 4px rgba(16, 24, 40, .06), 0 14px 32px rgba(16, 24, 40, .10);
	/* Los dos valores de abajo se eligieron mirando el modo oscuro y en claro se quedaban
	   cortos: el verde daba 3,96:1 sobre papel blanco y 3,63:1 dentro de las píldoras de
	   marca —donde el fondo ya es verde pálido—, y el gris tenue bajaba de 4,5:1 en la
	   columna «por qué» de la tabla de perfiles. Ambos por debajo del mínimo legible.
	   Ahora: verde 5,4:1 sobre blanco y 4,9:1 sobre la píldora; tenue 6,0:1. */
	--gdm-verde: #0f7a48;
	--gdm-verde-claro: #59c294;
	--gdm-tenue: rgba(18, 32, 48, .70);
}

html[data-wp-dark-mode-active] .brxe-section {
	--gdm-superficie: #2b2f36;
	--gdm-superficie-2: #323740;
	--gdm-filo: rgba(255, 255, 255, .12);
	--gdm-filo-fuerte: rgba(255, 255, 255, .22);
	--gdm-sombra: 0 1px 2px rgba(0, 0, 0, .30), 0 6px 18px rgba(0, 0, 0, .28);
	--gdm-sombra-alta: 0 2px 6px rgba(0, 0, 0, .34), 0 16px 34px rgba(0, 0, 0, .36);
	--gdm-verde: #6cc48c;
	--gdm-verde-claro: #7fd3a2;
	--gdm-tenue: rgba(255, 255, 255, .66);
}

/* Aquí había una copia de lo anterior bajo `@media (prefers-color-scheme: dark)`, puesta
 * como red de seguridad por si el atributo del plugin no llegaba a aplicarse. Era una red
 * que ataba las manos: `prefers-color-scheme` responde a la preferencia del SISTEMA
 * OPERATIVO, y el modo del sitio lo decide el interruptor del plugin. Son dos cosas
 * distintas y se contradicen a diario.
 *
 * Con el sistema en oscuro y el sitio en claro —una combinación de lo más normal— pasaba
 * esto: el media query pintaba los fondos oscuros de las tarjetas, pero el texto seguía
 * siendo el del modo claro, o sea oscuro. Tarjetas negras con letra negra encima, en media
 * portada: la tabla por perfil, la cronología, las tarjetas de ayuda y el dato destacado.
 *
 * La regla, para no repetirlo: en un sitio con interruptor propio, el modo lo manda el
 * interruptor y nada más. `html[data-wp-dark-mode-active]` es la única fuente de verdad. */

/* ---------------------------------------------------------------------------
 * Cabecera (hero)
 *
 * El aviso «Cómo lo comprobamos» es el mismo `.gdm-verificado` que se usa en el
 * cuerpo, pero ahí vive sobre papel blanco y aquí sobre el azul del estadio: la
 * caja verde clara que funciona abajo se recortaba contra el hero como una nota
 * pegada encima. Sobre fondo oscuro la nota se dibuja con la propia luz del
 * fondo —un velo translúcido y un filo verde— en vez de con un color opaco.
 * ------------------------------------------------------------------------- */

.gdm-hero .gdm-verificado {
	border: 1px solid rgba(255, 255, 255, .14);
	border-left: 3px solid rgba(89, 194, 148, .85);
	background: rgba(255, 255, 255, .07);
	border-radius: 12px;
	padding: 13px 16px;
	margin: 18px 0 0;
	color: rgba(255, 255, 255, .80);
	font-size: 13.5px;
	line-height: 1.65;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.gdm-hero .gdm-verificado strong {
	color: rgba(255, 255, 255, .95);
	font-weight: 700;
}

/* La entradilla pide algo más de cuerpo que el resto del texto: es lo primero
   que se lee y lo que responde a la consulta con la que llega el visitante. */
.gdm-hero > p:first-child {
	font-size: 17.5px;
	line-height: 1.65;
}

/* ---------------------------------------------------------------------------
 * Ranking: entradilla y filtro
 *
 * El filtro era una fila de píldoras sueltas encima de la tabla, sin nada que
 * dijera qué se está filtrando. Ahora es un panel: rótulo, control segmentado y
 * la nota explicativa dentro de la misma caja, que es lo que la convierte en
 * parte del ranking y no en un adorno que flota sobre él.
 * ------------------------------------------------------------------------- */

.gdm-filtro {
	/* El panel se inserta como primer hijo del contenedor del ranking, que es un
	   flex centrado: sin esto el panel se encoge al ancho de su contenido y
	   queda flotando en el centro, con las filas de la tabla mucho más anchas. */
	width: 100%;
	align-self: stretch;
	box-sizing: border-box;
	margin: 4px 0 26px;
	padding: 16px 18px;
	border: 1px solid var(--gdm-filo, rgba(128, 128, 128, .2));
	border-radius: 14px;
	background: var(--gdm-superficie-2, rgba(128, 128, 128, .06));
	box-shadow: var(--gdm-sombra, none);
}

.gdm-filtro__rotulo {
	display: block;
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--gdm-tenue, inherit);
}

.gdm-filtro__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gdm-filtro__btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--gdm-filo-fuerte, rgba(128, 128, 128, .32));
	background: var(--gdm-superficie, transparent);
	color: inherit;
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	padding: 10px 16px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.gdm-filtro__btn:hover,
.gdm-filtro__btn:focus-visible {
	border-color: var(--gdm-verde, #15925c);
	box-shadow: 0 0 0 3px rgba(21, 195, 123, .14);
}

.gdm-filtro__btn[aria-pressed="true"] {
	background: #15925c;
	border-color: #15925c;
	color: #fff;
	box-shadow: 0 2px 10px rgba(21, 146, 92, .30);
}

/* El contador es un dato, no una etiqueta: va en su propia cápsula para que se
   lea de un vistazo cuántas casas quedan detrás de cada botón. */
.gdm-filtro__btn .gdm-filtro__n {
	font-size: 12.5px;
	font-weight: 700;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(128, 128, 128, .16);
	margin: 0;
	opacity: 1;
}

.gdm-filtro__btn[aria-pressed="true"] .gdm-filtro__n {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

.gdm-filtro__nota {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--gdm-filo, rgba(128, 128, 128, .18));
	font-size: 13px;
	line-height: 1.6;
	color: var(--gdm-tenue, inherit);
	max-width: 82ch;
}

.gdm-filtro__vacio {
	margin: 24px 0;
	font-size: 15px;
	color: var(--gdm-tenue, inherit);
}

html[data-wp-dark-mode-active] .gdm-filtro {
	background: #2b2f36 !important;
	border-color: rgba(255, 255, 255, .12) !important;
}

html[data-wp-dark-mode-active] .gdm-filtro__btn:not([aria-pressed="true"]) {
	background: #353a43 !important;
	border-color: rgba(255, 255, 255, .16) !important;
}

/* ---------------------------------------------------------------------------
 * Tabla «mejor casa según tu perfil»
 *
 * Es la pieza nueva de la reconstrucción: responde a la pregunta que el ranking
 * de 40 filas no responde —«¿cuál me conviene A MÍ?»— y es el formato que Google
 * extrae para fragmentos destacados. Por eso se cuida que se lea entera sin
 * scroll horizontal en escritorio.
 *
 * Los colores se expresan con las variables de arriba y no con grises fijos: la
 * primera versión llevaba #e3e6ea y #fafbfc escritos a mano y en modo oscuro la
 * tabla quedaba en blanco sobre blanco.
 * ------------------------------------------------------------------------- */

.gdm-perfiles {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 22px 0 14px;
	font-size: 15.5px;
	line-height: 1.55;
	border: 1px solid var(--gdm-filo, rgba(128, 128, 128, .2));
	border-radius: 14px;
	overflow: hidden;
	background: var(--gdm-superficie, transparent);
	box-shadow: var(--gdm-sombra, none);
}

.gdm-perfiles th,
.gdm-perfiles td {
	padding: 14px 16px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--gdm-filo, rgba(128, 128, 128, .16));
}

.gdm-perfiles thead th {
	background: var(--gdm-superficie-2, rgba(128, 128, 128, .08));
	font-weight: 800;
	font-size: 11.5px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--gdm-tenue, inherit);
	white-space: nowrap;
}

.gdm-perfiles tbody tr:last-child td {
	border-bottom: 0;
}

.gdm-perfiles tbody tr {
	transition: background .18s ease;
}

.gdm-perfiles tbody tr:hover {
	background: var(--gdm-superficie-2, rgba(128, 128, 128, .05));
}

/* La primera columna es la que el lector escanea: se busca a sí mismo en ella. */
.gdm-perfiles td:first-child {
	font-weight: 700;
	width: 32%;
}

.gdm-perfiles td:nth-child(2) {
	width: 24%;
}

.gdm-perfiles td:nth-child(3) {
	color: var(--gdm-tenue, inherit);
	font-size: 14.5px;
}

/* Las marcas recomendadas son el destino de la fila: van como cápsulas, que se
   pulsan mejor con el pulgar que un enlace subrayado en mitad de una frase. */
.gdm-perfiles td:nth-child(2) a {
	display: inline-block;
	margin: 2px 4px 2px 0;
	padding: 4px 11px;
	border-radius: 999px;
	border: 1px solid rgba(21, 146, 92, .34);
	background: rgba(21, 195, 123, .10);
	color: var(--gdm-verde, #15925c);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease;
}

.gdm-perfiles td:nth-child(2) a:hover,
.gdm-perfiles td:nth-child(2) a:focus-visible {
	background: rgba(21, 195, 123, .20);
	border-color: rgba(21, 146, 92, .60);
}

.gdm-perfiles td:nth-child(3) a {
	color: var(--gdm-verde, #15925c);
	text-decoration: underline;
	text-underline-offset: 2px;
}

html[data-wp-dark-mode-active] .gdm-perfiles {
	background: #2b2f36 !important;
	border-color: rgba(255, 255, 255, .12) !important;
}

html[data-wp-dark-mode-active] .gdm-perfiles thead th {
	background: #353a43 !important;
}

/*
 * En móvil una tabla de tres columnas no cabe. En vez de encogerla hasta lo
 * ilegible, cada fila se apila como una ficha con tres pisos: el perfil como
 * titular, la recomendación como botones y el motivo debajo, en pequeño. El
 * `data-th` del HTML sigue rotulando los dos últimos, para que ningún dato
 * quede sin decir qué significa.
 */
@media (max-width: 700px) {

	.gdm-perfiles {
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		font-size: 15px;
	}

	.gdm-perfiles thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.gdm-perfiles,
	.gdm-perfiles tbody,
	.gdm-perfiles tr,
	.gdm-perfiles td {
		display: block;
		width: auto;
	}

	.gdm-perfiles tr {
		border: 1px solid var(--gdm-filo, rgba(128, 128, 128, .2));
		border-radius: 14px;
		margin-bottom: 12px;
		padding: 4px 2px 10px;
		background: var(--gdm-superficie, transparent);
		box-shadow: var(--gdm-sombra, none);
	}

	.gdm-perfiles td {
		border-bottom: 0;
		padding: 8px 14px;
		width: auto !important;
	}

	/* El perfil manda: es lo que el lector busca. Va arriba, en grande y con un
	   filete verde debajo que separa el titular del resto de la ficha. */
	.gdm-perfiles td:first-child {
		font-size: 16.5px;
		font-weight: 800;
		padding-top: 14px;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--gdm-filo, rgba(128, 128, 128, .16));
		margin-bottom: 4px;
	}

	.gdm-perfiles td:not(:first-child)::before {
		content: attr(data-th);
		display: block;
		font-size: 11px;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: .06em;
		color: var(--gdm-tenue, inherit);
		margin-bottom: 4px;
	}

	.gdm-perfiles td:nth-child(2) a {
		font-size: 15px;
		padding: 7px 14px;
	}

	html[data-wp-dark-mode-active] .gdm-perfiles tr {
		background: #2b2f36 !important;
		border-color: rgba(255, 255, 255, .12) !important;
	}
}

/* ---------------------------------------------------------------------------
 * Aviso de fecha de verificación
 *
 * Los bonos y las apps cambian sin previo aviso. Cada dato perecedero lleva la
 * fecha en que se comprobó, y esa fecha tiene que verse como una nota, no como
 * una frase más del texto: es lo que separa un dato verificado de una promesa.
 * ------------------------------------------------------------------------- */

.gdm-verificado {
	display: block;
	border: 1px solid rgba(21, 146, 92, .22);
	border-left: 3px solid #15c37b;
	background: rgba(21, 195, 123, .07);
	border-radius: 10px;
	padding: 12px 16px;
	margin: 16px 0;
	font-size: 14.5px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * Listas dentro de los bloques reescritos
 * ------------------------------------------------------------------------- */

.gdm-lista {
	margin: 12px 0 16px;
	padding-left: 22px;
}

.gdm-lista li {
	margin-bottom: 8px;
	line-height: 1.6;
}

.gdm-lista li:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Legislación: cronología en tarjetas
 *
 * El capítulo era un muro: nueve párrafos y una lista numerada de cinco puntos
 * en una sola columna, con la imagen al lado sobrando dos tercios de altura. La
 * cronología es lo que más ocupaba y lo que menos se lee en prosa, así que sale
 * del texto y se convierte en una tira de tarjetas: la misma información, en un
 * formato que se recorre con la vista en vez de leerse línea a línea.
 * ------------------------------------------------------------------------- */

/*
 * Seis hitos en dos filas de tres, y no cinco en una tira.
 *
 * Con cinco columnas cada tarjeta medía poco más de 200px y el texto tenía que
 * bajar a 13,5px para caber: se leía como un pie de foto. En 3×2 la columna
 * duplica el ancho, el cuerpo sube a 15px —el mismo del resto de la página— y
 * la fecha deja de competir con él. El sexto hito (la suma urgencia de mayo)
 * estaba en el párrafo de abajo; sube a la cronología, que es su sitio.
 */
.gdm-hitos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 20px 0 22px;
	padding: 0;
	list-style: none;
	counter-reset: hito;
}

/*
 * El tema numera TODOS los `ol` con un disco verde en `li:before`, posicionado
 * en absoluto sobre el borde izquierdo. En una tarjeta con padding, ese disco
 * cae encima de la fecha: se veía un «1» verde tapando «SEPTIEMBRE 2025» en las
 * cinco. Aquí la marca de orden es la fecha, así que el disco sobra.
 */
.gdm-hitos li::before {
	content: none;
}

.gdm-hitos li {
	position: relative;
	margin: 0;
	padding: 18px 20px;
	left: 0;
	border: 1px solid var(--gdm-filo, rgba(128, 128, 128, .2));
	border-top: 3px solid rgba(21, 195, 123, .55);
	border-radius: 12px;
	background: var(--gdm-superficie, transparent);
	box-shadow: var(--gdm-sombra, none);
	font-size: 15px;
	line-height: 1.6;
}

.gdm-hitos .gdm-hitos__fecha {
	display: block;
	margin-bottom: 8px;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--gdm-verde, #15925c);
}

html[data-wp-dark-mode-active] .gdm-hitos li {
	background: #2b2f36 !important;
	border-color: rgba(255, 255, 255, .12) !important;
	border-top-color: rgba(21, 195, 123, .55) !important;
}

@media (max-width: 991px) {
	.gdm-hitos {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.gdm-hitos {
		grid-template-columns: 1fr;
	}
}

/*
 * El dato propio del capítulo —el cruce de las dos listas oficiales— es lo único
 * que no está en ninguna otra comparativa. Se saca del párrafo y se pone en una
 * caja para que no se lea como una frase más.
 */
.gdm-dato {
	display: block;
	margin: 18px 0;
	padding: 16px 18px;
	border: 1px solid var(--gdm-filo, rgba(128, 128, 128, .2));
	border-left: 4px solid #15c37b;
	border-radius: 12px;
	background: var(--gdm-superficie-2, rgba(128, 128, 128, .06));
	font-size: 15.5px;
	line-height: 1.65;
}

html[data-wp-dark-mode-active] .gdm-dato {
	background: #2b2f36 !important;
	border-color: rgba(255, 255, 255, .12) !important;
	border-left-color: #15c37b !important;
}

/*
 * La columna de texto que acompaña a la imagen se limita en altura para que las
 * dos piezas midan lo mismo. Antes el texto medía novecientos y pico píxeles y
 * la ilustración trescientos: la fila entera se veía desequilibrada, con la
 * imagen flotando en el centro de un muro de párrafos.
 */
.gdm-legis-intro {
	align-self: stretch;
}

@media (min-width: 992px) {
	.gdm-legis-intro {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 340px;
	}
}
/* ---------------------------------------------------------------------------
 * «Cómo elegimos»: los seis criterios
 *
 * POR QUÉ YA NO HAY «VER MÁS» (6 de septiembre de 2026)
 * Los seis criterios van en una rejilla de tres columnas, y en una rejilla las
 * celdas de una misma fila miden lo mismo. Al desplegar una tarjeta, las otras
 * dos crecían con ella: el lector pulsaba en un sitio y se le movía media
 * pantalla. Arreglarlo con `align-items: start` habría dejado la fila
 * descuadrada, y el problema de fondo era otro —plegar textos de 200 a 430
 * caracteres no ahorra nada—. Se quitó el botón entero, del árbol de Bricks y
 * de aquí.
 *
 * Y DE PASO, LA CAJA
 * Eran seis rectángulos blancos con sombra, esquinas redondeadas e icono sobre
 * un disco verde: el formato que se ve en cualquier plantilla. Ahora cada
 * criterio se apoya en un filete superior y en el aire de la rejilla, con el
 * número de orden como única marca. Menos piezas, más jerarquía, y en modo
 * oscuro deja de depender de que el motor acierte con el color de una
 * superficie que ya no existe.
 * ------------------------------------------------------------------------- */

.gdm-criterios {
	counter-reset: criterio;
}

/*
 * Dos columnas: el número, estrecho y fijo, y el contenido. La cabecera va en
 * la primera fila junto al número; el texto cae debajo, alineado con el título
 * y no con el número —así el ojo baja por una sola vertical.
 */
.gdm-criterio {
	display: grid !important;
	grid-template-columns: 30px minmax(0, 1fr);
	align-content: start;
	column-gap: 14px;
	row-gap: 10px;
	padding-top: 18px;
	border-top: 1px solid var(--gdm-filo-fuerte, rgba(128, 128, 128, .28));
}

.gdm-criterio::before {
	counter-increment: criterio;
	content: counter(criterio, decimal-leading-zero);
	font-size: 13px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: .06em;
	line-height: 1.5;
	color: var(--gdm-verde, #15925c);
}

/* El filete es lo único que dibuja la sección: en oscuro tiene que verse. */
html[data-wp-dark-mode-active] .gdm-criterio {
	border-top-color: rgba(255, 255, 255, .16) !important;
}

/* La cabecera: icono pequeño y el título al lado, sin filete propio ni disco
   bajo el icono. Ocupa la columna del contenido, a la derecha del número. */
.gdm-criterio__cabecera {
	grid-column: 2;
	align-items: center;
	gap: 10px;
	min-height: 26px;
}

.gdm-criterio__cabecera img {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	object-fit: contain;
	opacity: .9;
}

.gdm-criterio__cabecera p {
	margin: 0;
	font-size: 16.5px;
	line-height: 1.25;
}

.gdm-criterio__cabecera strong {
	font-weight: 800;
}

/* El texto, entero y sin recortes. */
.gdm-criterio__texto {
	grid-column: 2;
	font-size: 15px;
	line-height: 1.65;
}

.gdm-criterio__texto p {
	margin: 0 0 10px;
}

.gdm-criterio__texto p:last-child,
.gdm-criterio__texto ul:last-child {
	margin-bottom: 0;
}

.gdm-criterio__texto .gdm-lista {
	margin: 0 0 10px;
}

/*
 * Resto del plegado, por si un navegador sirve la página desde caché con el
 * botón todavía dentro. Sin esto, el texto seguiría recortado a 190px sin nada
 * que lo abriera —el JS ya no ata comportamiento a nada—.
 */
.gdm-vermas {
	display: none !important;
}

.more-button {
	max-height: none !important;
	overflow: visible !important;
}

@media (max-width: 767px) {

	.gdm-criterio {
		grid-template-columns: 26px minmax(0, 1fr);
		column-gap: 12px;
	}
}

/* ---------------------------------------------------------------------------
 * Llamadas a la acción de los bonos
 *
 * Cada tipo de bono lleva tres marcas, no una: un solo ejemplo hace de la
 * sección una recomendación encubierta, y con tres el lector compara —que es lo
 * que ha venido a hacer—. Van en fila horizontal (logotipo, oferta, botón) y no
 * en tarjeta vertical, porque tres tarjetas verticales en media columna dejan
 * los logotipos del tamaño de un sello.
 *
 * El fondo del bloque es el que resuelve la queja de contraste: el CTA vivía
 * sobre el mismo color que la página y en modo oscuro no se distinguía dónde
 * empezaba. Ahora el grupo entero se asienta sobre una superficie propia.
 * ------------------------------------------------------------------------- */

.gdm-ctas {
	display: block;
	margin-top: 4px;
	padding: 14px;
	border: 1px solid var(--gdm-filo, rgba(128, 128, 128, .2));
	border-radius: 14px;
	background: var(--gdm-superficie-2, rgba(128, 128, 128, .06));
}

html[data-wp-dark-mode-active] .gdm-ctas {
	background: #32373f !important;
	border-color: rgba(255, 255, 255, .12) !important;
}

.gdm-ctas__rotulo {
	display: block;
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--gdm-tenue, inherit);
}

.gdm-ctas > a {
	display: block;
	text-decoration: none;
	margin-bottom: 8px;
}

.gdm-ctas > a:last-child {
	margin-bottom: 0;
}

.gdm-ctas .brand-list {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--gdm-filo, rgba(128, 128, 128, .18));
	border-radius: 12px;
	background: var(--gdm-superficie, #fff);
	box-shadow: var(--gdm-sombra, none);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.gdm-ctas > a:hover .brand-list,
.gdm-ctas > a:focus-visible .brand-list {
	border-color: rgba(21, 146, 92, .5);
	box-shadow: var(--gdm-sombra-alta, none);
	transform: translateY(-1px);
}

html[data-wp-dark-mode-active] .gdm-ctas .brand-list {
	background: #23262c !important;
	border-color: rgba(255, 255, 255, .14) !important;
}

.gdm-ctas .img-brand {
	flex: 0 0 84px;
	width: 84px;
	margin: 0;
}

.gdm-ctas .img-brand img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}

.gdm-ctas ul {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gdm-ctas .bonus-pack {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.gdm-ctas button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	border-radius: 999px;
	padding: 9px 16px;
	background: #15925c;
	color: #fff;
	font-size: 13.5px;
	font-weight: 800;
	cursor: pointer;
	transition: background .18s ease;
}

.gdm-ctas > a:hover button {
	background: #0f7a4b;
}

@media (max-width: 400px) {

	.gdm-ctas .brand-list {
		flex-wrap: wrap;
	}

	.gdm-ctas .img-brand {
		flex-basis: 68px;
		width: 68px;
	}

	.gdm-ctas button {
		width: 100%;
		justify-content: center;
	}
}

/* ---------------------------------------------------------------------------
 * Módulos de marca fuera del ranking (app móvil, streaming)
 *
 * Son las mismas fichas `.table-wrapper[brand]` del ranking reutilizadas en dos
 * secciones del cuerpo. Sin fondo propio, en modo oscuro quedaban recortadas
 * contra la página: se veía la información pero no el borde de la ficha, y el
 * bloque parecía una lista suelta en lugar de un módulo.
 * ------------------------------------------------------------------------- */

.table-wrapper[brand] {
	border: 1px solid var(--gdm-filo, rgba(18, 32, 48, .13));
	border-radius: 12px;
}

html[data-wp-dark-mode-active] .table-wrapper[brand] {
	background: #2b2f36 !important;
	border-color: rgba(255, 255, 255, .14) !important;
}

/* ---------------------------------------------------------------------------
 * Juego responsable
 *
 * Es el capítulo que más importa que se lea deprisa, y era el que peor lo ponía:
 * dos teléfonos de ayuda escondidos dentro de un párrafo, en negrita, sin ser
 * pulsables. Los recursos salen del texto y se convierten en tarjetas con el
 * número como enlace `tel:`, que en un móvil llama con un toque.
 * ------------------------------------------------------------------------- */

.gdm-ayuda {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 20px 0 24px;
	padding: 0;
	list-style: none;
}

.gdm-ayuda li {
	margin: 0;
	padding: 18px;
	border: 1px solid var(--gdm-filo, rgba(128, 128, 128, .2));
	border-top: 3px solid #15c37b;
	border-radius: 14px;
	background: var(--gdm-superficie, transparent);
	box-shadow: var(--gdm-sombra, none);
}

html[data-wp-dark-mode-active] .gdm-ayuda li {
	background: #2b2f36 !important;
	border-color: rgba(255, 255, 255, .12) !important;
	border-top-color: #15c37b !important;
}

.gdm-ayuda__nombre {
	display: block;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
	margin-bottom: 8px;
}

/* El número es el elemento de acción de la tarjeta: grande, verde y pulsable. */
.gdm-ayuda__tel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(21, 146, 92, .34);
	background: rgba(21, 195, 123, .10);
	color: var(--gdm-verde, #15925c) !important;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: .01em;
	text-decoration: none !important;
	white-space: nowrap;
}

.gdm-ayuda__tel:hover,
.gdm-ayuda__tel:focus-visible {
	background: rgba(21, 195, 123, .20);
}

.gdm-ayuda__nota {
	display: block;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--gdm-tenue, inherit);
}

@media (max-width: 860px) {
	.gdm-ayuda {
		grid-template-columns: 1fr;
	}
}

/*
 * Las cinco medidas: numeradas, en dos columnas en escritorio para que el
 * capítulo no vuelva a ser una columna de texto de pantalla y media.
 */
.gdm-medidas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 24px;
	margin: 16px 0 18px;
	padding: 0 0 0 18px;
}

/*
 * El hueco de 35px lo pide el disco numerado que el tema pinta en `li:before`,
 * en absoluto sobre el borde izquierdo. La primera versión de esta rejilla puso
 * `padding: 2px 0` y el número quedó encima de las primeras letras: se leía
 * «a un límite de depósito» con la «Fij» debajo del disco.
 */
.gdm-medidas li {
	margin: 0;
	padding: 2px 0 2px 35px;
	line-height: 1.6;
}

@media (max-width: 860px) {
	.gdm-medidas {
		grid-template-columns: 1fr;
	}
}

/* La franja de edad cierra el capítulo: es una advertencia, no un párrafo. */
.gdm-edad {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0 0;
	padding: 14px 18px;
	border: 1px solid var(--gdm-filo, rgba(128, 128, 128, .2));
	border-radius: 12px;
	background: var(--gdm-superficie-2, rgba(128, 128, 128, .06));
	font-size: 14.5px;
	line-height: 1.5;
}

.gdm-edad__sello {
	flex: 0 0 auto;
	padding: 4px 11px;
	border: 2px solid currentColor;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 900;
	letter-spacing: .02em;
}

html[data-wp-dark-mode-active] .gdm-edad {
	background: #2b2f36 !important;
	border-color: rgba(255, 255, 255, .12) !important;
}

/* ---------------------------------------------------------------------------
 * Enlaces del cuerpo
 *
 * El color de enlace del sitio es `#59c294`, un verde claro fijado en los ajustes
 * globales de Bricks. Sobre papel blanco da 2,2:1 —menos de la mitad del mínimo
 * legible— y es lo que dejaba casi invisibles enlaces como «la lista completa de
 * sitios bloqueados» en la cronología: el ojo los lee como texto desvaído, no como
 * enlaces.
 *
 * Se corrige aquí y no en los ajustes de Bricks por dos razones: esta hoja sólo se
 * carga en la portada, así que el arreglo no puede romper plantillas que no vemos; y
 * el ajuste global lo comparte todo el sitio, incluidas cabecera y pie, donde ese
 * verde vive sobre fondo oscuro y ahí sí contrasta.
 *
 * El pie queda fuera a propósito: es oscuro y sus enlaces son blancos.
 * ------------------------------------------------------------------------- */

.gdm-hitos a,
.gdm-criterio a,
.gdm-criterios a,
.gdm-ayuda a,
.gdm-medidas a,
.gdm-lista a,
.gdm-legis-intro a,
.gdm-dato a,
.gdm-verificado a,
.gdm-perfiles a,
.brxe-section :is(p, li, td) > a:not([class]) {
	color: var(--gdm-verde);
}

/* Quien haya pedido menos movimiento no necesita ninguna de las transiciones. */
@media (prefers-reduced-motion: reduce) {

	.gdm-ctas .brand-list,
	.gdm-perfiles tbody tr {
		transition: none;
	}

	.gdm-ctas > a:hover .brand-list {
		transform: none;
	}
}