/**
 * Guías (/bonos-de-bienvenida/, /bonos-sin-deposito/, …).
 *
 * QUÉ PROBLEMA RESUELVE ESTA HOJA
 * La primera versión de la guía maquetaba todo como prosa: párrafo tras párrafo, diez
 * fichas de casa seguidas y una tabla de ocho columnas con desplazamiento lateral. Medida
 * en septiembre de 2026 daba 35 páginas A4 en escritorio, y en un teléfono era una caída
 * libre de texto. El contenido era bueno; lo que fallaba era que nada se podía ojear.
 *
 * La respuesta no es cortar contenido —en YMYL el detalle es el producto— sino ordenarlo
 * en capas: lo que decide se ve, lo que documenta se pliega. De ahí los tres patrones que
 * mandan aquí:
 *
 *   1. REJILLAS AUTOAJUSTABLES. `repeat(auto-fit, minmax(N, 1fr))` en vez de media
 *      queries. La columna de lectura mide 730 px en escritorio y ~330 en un teléfono, así
 *      que la misma regla da cuatro columnas allí y dos aquí, sin puntos de ruptura que
 *      mantener.
 *   2. EL DETALLE, PLEGADO. Los términos completos de cada casa viven en un <details>. Es
 *      la mitad de la altura de la ficha, y quien la necesita la abre.
 *   3. LA TABLA SE REESTRUCTURA, NO SE DESPLAZA. En móvil las filas se convierten en
 *      tarjetas con la etiqueta de cada columna delante. Desplazar en horizontal esconde
 *      justo la columna que alguien buscaba.
 *
 * MODO OSCURO
 * El plugin del sitio lleva un motor tipo DarkReader que lee el color declarado de cada
 * elemento y calcula su equivalente. Sobreviven los BORDES y los colores expresados en
 * rgba neutro; un relleno claro sobre página clara se queda sin contraste que convertir y
 * desaparece. Por eso aquí casi todo es filete y rgba, y no hay rellenos de marca.
 *
 * MAQUETACIÓN EXTERIOR
 * Estas entradas traen alrededor la plantilla de blog del tema, hecha en Bricks, que ya
 * fija el ancho de lectura, las migas, la firma y el índice del plugin LuckyWP. Aquí NO se
 * toca ancho, ni márgenes exteriores, ni el <h1>: todo cuelga de `.gdm-guia`.
 */

.gdm-guia {
	--gdm-verde: #1a7a4c;
	--gdm-ambar: #a06210;
	--gdm-rojo: #a6323b;
	--gdm-linea: rgba(128, 128, 128, .28);
	--gdm-linea-suave: rgba(128, 128, 128, .18);
	--gdm-fondo: rgba(128, 128, 128, .055);
	--gdm-radio: 10px;

	font-size: 17px;
	line-height: 1.7;
}

/* ---------- Ritmo tipográfico ----------
 *
 * Los márgenes de los títulos son más generosos por arriba que por abajo a propósito: un
 * título pegado a su propio texto y separado del anterior es lo que hace que un índice
 * largo se lea como capítulos y no como una lista. */

.gdm-guia h2 {
	margin: 2.4em 0 .5em;
	font-size: 27px;
	line-height: 1.22;
	letter-spacing: -.011em;
	text-wrap: balance;
	/* La cabecera es fija: sin esto, saltar desde el índice del plugin deja el título
	   escondido debajo de ella. */
	scroll-margin-top: 90px;
}

.gdm-guia h2:first-child {
	margin-top: .6em;
}

/* 22 px y no 20: en el hub un <h3> abre subcapítulo y lleva fichas debajo, cuyo nombre de
   marca es <h4> a 19 px. Con el <h3> a 20 quedaban casi iguales y la jerarquía no se leía. */
.gdm-guia h3 {
	margin: 1.8em 0 .45em;
	font-size: 22px;
	line-height: 1.28;
	text-wrap: balance;
	scroll-margin-top: 90px;
}

.gdm-guia p {
	margin: 0 0 1em;
	text-wrap: pretty;
}

.gdm-guia strong,
.gdm-guia b {
	font-weight: 700;
}

/* Los 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 en esta
 * página hay enlaces en casi todos los párrafos: a las fichas de marca, a las páginas
 * legales, a las fuentes. Se usa el mismo verde oscuro que la portada, que da 5,4:1.
 *
 * Quedan fuera los que ya llevan clase —el CTA y el botón de análisis—, que tienen su
 * propio color sobre su propio fondo. */
.gdm-guia :is(p, li, td, summary) a:not([class]) {
	color: #0f7a48;
}

.gdm-guia ul,
.gdm-guia ol {
	margin: 0 0 1.2em;
	padding-left: 1.35em;
}

.gdm-guia li {
	margin-bottom: .45em;
}

/* El tema numera TODOS los <ol> del sitio con un disco verde en `li:before` colocado en
   absoluto, contando con un `padding-left: 35px` que aquí no ponemos. Sin esto, el disco
   cae encima de la primera palabra. Ya pasó en la cronología de la página legal.
 *
 * `.gdm-pasos` queda fuera de la anulación: ese bloque SÍ quiere un `::before`, el suyo,
 * y reserva el hueco con su propio `padding-left`. Sin esta excepción el `content: none`
 * se lo comía —con `!important`, así que ganaba siempre— y los pasos salían con el
 * numerito nativo del <ol> en vez del círculo. Se vio al estrenar el bloque en la guía de
 * bonos sin depósito, que fue la primera que lo usó. */
.gdm-guia ol:not(.gdm-pasos) > li::before,
.gdm-guia ul > li::before {
	content: none !important;
}

.gdm-guia ol:not(.gdm-pasos) {
	list-style: decimal;
}

/* La lista de pasos pone su propio número y no quiere el marcador nativo encima. */
.gdm-guia ol.gdm-pasos {
	padding-left: 0;
	list-style: none;
}

.gdm-guia ul {
	list-style: disc;
}

/* ---------- Respuesta directa bajo cada H2 ----------
 *
 * La primera frase de cada capítulo responde a la pregunta del título, y se compone algo
 * mayor que el cuerpo. Sirve a las dos lecturas que tiene una página así: quien ojea se
 * lleva la respuesta sin leer el capítulo, y quien busca en Google encuentra la respuesta
 * pegada al encabezado que la promete. */

.gdm-guia__resp {
	margin: 0 0 1.1em;
	font-size: 18.5px;
	line-height: 1.55;
	letter-spacing: -.004em;
}

/* ---------- Veredicto de apertura ----------
 *
 * Lo único de la página que se lee siempre. Va sin caja de color: compite con los botones
 * de marca que vienen debajo, y el filete lo distingue sin gritar. */

.gdm-guia__veredicto {
	margin: 0 0 1.8em;
	padding: 2px 0 2px 18px;
	border-left: 3px solid rgba(31, 168, 105, .85);
}

.gdm-guia__veredicto p {
	margin: 0 0 .6em;
	font-size: 18.5px;
	line-height: 1.55;
}

.gdm-guia__veredicto p:last-child {
	margin-bottom: 0;
}

/* ---------- Tarjetas de recomendación ----------
 *
 * Tres respuestas a «cuál elijo», que es lo que trae al lector. Se ponen arriba y en
 * horizontal porque en vertical serían tres párrafos más antes de la primera tabla. */

.gdm-guia__picks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin: 1.6em 0 2em;
}

.gdm-pick {
	display: flex;
	flex-direction: column;
	padding: 15px 16px 16px;
	border: 1px solid var(--gdm-linea);
	border-top: 3px solid rgba(31, 168, 105, .8);
	border-radius: var(--gdm-radio);
}

.gdm-pick__etiqueta {
	margin-bottom: 6px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .085em;
	text-transform: uppercase;
	opacity: .72;
}

.gdm-pick__marca {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
}

.gdm-pick__dato {
	margin: 4px 0 10px;
	font-size: 15px;
	line-height: 1.45;
	opacity: .88;
}

/* El botón se empuja al fondo para que las tres tarjetas lo alineen aunque los textos
   tengan largos distintos. Tres botones a distinta altura se leen como tres ofertas de
   distinta importancia, que no es lo que dice el texto. */
.gdm-pick__pie {
	margin-top: auto;
}

/* ---------- Navegador de marcas ----------
 *
 * Diez fichas son diez pantallas. Quien llega buscando una casa concreta necesita saltar,
 * y el índice del plugin sólo lista los <h2>. */

/* Rejilla de cinco, no una fila que se desborda. En `flex-wrap` los diez atajos quedaban
   con anchos distintos y la segunda línea empezaba donde cayera, que es lo que se veía
   como desalineado. Cinco y cinco, todos del mismo ancho.
 *
 * El `display: block` del <li> no es decorativo: sin él, el tema le pinta encima su
 * triángulo verde —el mismo que aparecía en el balance— y queda una flecha sobre el
 * nombre de cada marca. Un <li> que no es `list-item` no genera caja de marcador. */
.gdm-guia__chips {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	margin: 1.2em 0 1.8em;
	padding: 0;
	list-style: none;
}

.gdm-guia__chips li {
	display: block;
	margin: 0;
}

.gdm-guia__chips a {
	display: block;
	padding: 8px 10px;
	border: 1px solid var(--gdm-linea);
	border-radius: 8px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

.gdm-guia__chips a:hover,
.gdm-guia__chips a:focus {
	border-color: rgba(31, 168, 105, .8);
}

/* ---------- Ficha de casa ----------
 *
 * Una tarjeta por casa, con la misma anatomía siempre: oferta arriba, las cuatro
 * condiciones en rejilla, la cuenta del rollover, el veredicto, el botón, y los términos
 * completos plegados. Diez tarjetas iguales se ojean; diez bloques de prosa, no. */

.gdm-casa {
	margin: 0 0 18px;
	border: 1px solid var(--gdm-linea);
	border-radius: var(--gdm-radio);
	overflow: hidden;
	scroll-margin-top: 90px;
}

.gdm-casa__cab {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding: 15px 18px 13px;
	border-bottom: 1px solid var(--gdm-linea-suave);
	background: var(--gdm-fondo);
}

/* El encabezado de la ficha lleva sólo el nombre de la casa. El bono va debajo, en su
   propia línea: meterlo en el título hacía encabezados de tres líneas en el móvil y
   llenaba el índice de cifras que cambian cada mes.
 *
 * Es <h3> cuando la ficha es de primer nivel —las comparativas— y <h4> cuando cuelga de
 * un subcapítulo, como en el hub, donde cada tipo de bono es un <h3>. Los dos casos se
 * estilan aquí, y el <h4> baja de cuerpo para que la jerarquía se VEA y no sólo esté en
 * el marcado: una marca no puede parecer más importante que el tipo que la contiene. */
.gdm-casa__cab h3,
.gdm-casa__cab h4 {
	margin: 0;
	line-height: 1.2;
	border: 0;
	padding: 0;
}

.gdm-casa__cab h3 {
	font-size: 21px;
}

.gdm-casa__cab h4 {
	font-size: 19px;
}

.gdm-casa__oferta {
	flex-basis: 100%;
	margin: 2px 0 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--gdm-verde);
}

.gdm-casa__sellos {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-left: auto;
}

.gdm-casa__cuerpo {
	padding: 16px 18px 18px;
}

.gdm-casa__cuerpo > p:last-child {
	margin-bottom: 0;
}

/* Las cuatro condiciones que deciden si el bono se cobra. Eran cinco viñetas de texto
   corrido; en rejilla se comparan de un vistazo entre casas, que es para lo que sirven.
 *
 * Cuatro tarjetas con filete y sin relleno, no una rejilla con líneas de separación. La
 * versión con líneas se hacía con el truco de `gap: 1px` sobre un fondo, y ese fondo tenía
 * que ser opaco: quedó en `var(--bricks-bg-color, #fff)`, o sea blanco fijo. En modo
 * oscuro eso daba cuatro rectángulos blancos con el texto casi invisible encima —el
 * contraste más violento de la página—. Con filetes no hay fondo que convertir y las dos
 * apariencias salen bien sin declarar ningún color. */
.gdm-casa__specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	margin: 0 0 15px;
}

.gdm-spec {
	padding: 9px 12px;
	border: 1px solid var(--gdm-linea-suave);
	border-radius: 8px;
}

.gdm-spec__k {
	display: block;
	margin-bottom: 1px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	opacity: .65;
}

.gdm-spec__v {
	display: block;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
}

/* Un valor que las fuentes no confirman no puede componerse igual que uno verificado: en
   una tabla de condiciones, la ausencia de dato es información. */
.gdm-spec__v--sin {
	font-weight: 600;
	opacity: .6;
}

/* La cuenta del rollover: el dato propio de esta página. Va con la cifra separada del
   texto porque es lo que permite comparar dos ofertas con porcentajes distintos. */
.gdm-casa__cuenta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
	margin: 0 0 15px;
	padding: 12px 14px;
	border: 1px solid rgba(31, 168, 105, .35);
	border-left: 3px solid rgba(31, 168, 105, .85);
	border-radius: 8px;
	font-size: 15.5px;
	line-height: 1.5;
}

.gdm-casa__cuenta-cifra {
	font-size: 21px;
	font-weight: 800;
	line-height: 1.15;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--gdm-verde);
}

.gdm-casa__cuenta-texto {
	flex: 1 1 220px;
}

/* Cuando no hay cuenta que hacer, el filete no puede ser el mismo verde que señala un dato
   calculado: diría lo contrario de lo que el párrafo dice. */
.gdm-casa__cuenta--sin {
	border-color: var(--gdm-linea);
	border-left-color: rgba(128, 128, 128, .5);
	opacity: .9;
}

.gdm-casa__cuenta--sin .gdm-casa__cuenta-cifra {
	font-size: 15.5px;
	font-weight: 700;
	color: inherit;
}

/* Los dos botones, centrados y del mismo alto. Antes eran un botón y un enlace suelto a su
   derecha, alineados a la izquierda: el enlace se leía como un descuido pegado al botón. */
.gdm-casa__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 10px 12px;
	margin-top: 16px;
}

/* El secundario dice «Análisis completo» a secas, sin repetir la marca: está dentro de la
   ficha de esa marca, con su nombre en el encabezado y en el botón de al lado. Repetirlo
   una tercera vez alargaba el botón sin añadir nada. */
.gdm-casa__analisis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 20px;
	border: 1px solid var(--gdm-linea);
	border-radius: 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

.gdm-casa__analisis:hover,
.gdm-casa__analisis:focus {
	border-color: rgba(31, 168, 105, .85);
	text-decoration: none;
}

/* «Abrir cuenta en Betsson» partido en dos líneas hace que el botón principal de la ficha
   parezca un accidente. Cabe entero al lado del enlace al análisis, así que se le prohíbe
   partir. */
.gdm-casa__pie .button-cta button {
	white-space: nowrap;
}

/* ---------- El CTA ----------
 *
 * `.button-cta` es el envoltorio que usan las reseñas de 2024, pero el ASPECTO de botón no
 * está en él: sólo declara un ancho. El degradado, el radio y las mayúsculas viven en
 * `.brand-list button`, o sea, se aplican únicamente dentro de la tarjeta de marca del
 * ranking. Fuera de ahí el <button> se queda con el estilo por defecto del navegador, y
 * eso es lo que llevaba pasando aquí: el CTA principal de cada ficha se veía como texto
 * suelto, encima del enlace que tenía al lado.
 *
 * Se repite el degradado de la marca —no un verde nuevo— para que un botón de la guía y
 * uno del ranking sean reconociblemente el mismo botón. */

.gdm-guia .button-cta {
	width: auto;
	margin: 0;
}

.gdm-guia .button-cta a {
	text-decoration: none;
}

.gdm-guia .button-cta button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 13px 20px;
	border: 0;
	border-radius: 6px;
	background-image: linear-gradient(to right, #34e89e 0%, #228c63 51%, #34e89e 100%);
	background-size: 200% auto;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-position .35s ease;
}

.gdm-guia .button-cta button:hover {
	background-position: right center;
	color: #fff;
}

.gdm-guia .button-cta .fa-solid {
	padding-left: 6px;
	font-size: 13px;
}

/* En las tarjetas de recomendación el botón ocupa el ancho de la tarjeta: son tres, y tres
   botones de anchos distintos se leen como tres ofertas de distinta importancia. */
.gdm-pick__pie .button-cta button {
	width: 100%;
}

/* ---------- Letra pequeña plegada ----------
 *
 * Los términos completos y el conflicto entre fuentes. Es la mitad de la altura de la
 * ficha y casi nadie los lee de corrido, pero quitarlos sería quitar la parte que hace
 * verificable a la página. */

.gdm-plegable {
	margin: 15px 0 0;
	border-top: 1px solid var(--gdm-linea-suave);
	padding-top: 11px;
}

.gdm-plegable > summary {
	cursor: pointer;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .01em;
	list-style: none;
}

.gdm-plegable > summary::-webkit-details-marker {
	display: none;
}

.gdm-plegable > summary::before {
	content: "+";
	display: inline-block;
	width: 1.15em;
	font-weight: 800;
	color: rgba(31, 168, 105, .95);
}

.gdm-plegable[open] > summary::before {
	content: "\2013";
}

.gdm-plegable ul {
	margin: .8em 0 0;
	font-size: 15px;
}

.gdm-plegable li {
	margin-bottom: .4em;
}

/* ---------- Sellos ---------- */

.gdm-sello {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid currentColor;
	border-radius: 100px;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.55;
	white-space: nowrap;
}

.gdm-sello--si {
	color: var(--gdm-verde);
}

.gdm-sello--no {
	color: #8a8f98;
}

.gdm-sello--ret {
	color: var(--gdm-ambar);
}

.gdm-sello--bloq {
	color: var(--gdm-rojo);
}

/* ---------- Tabla comparativa ----------
 *
 * En escritorio, una tabla normal: las cifras se comparan en vertical y para eso no hay
 * sustituto. En móvil, cada fila se convierte en una tarjeta con la etiqueta de la columna
 * delante del dato. La alternativa —desplazamiento lateral— esconde columnas, y la que se
 * esconde siempre acaba siendo la que alguien buscaba. */

/* Red de seguridad, no el plan. La columna de lectura de este sitio mide 730 px y las
   siete columnas caben ajustadas; si un día entra un valor largo —«30 días por etapa» ya
   lo es— esto evita que la tabla se salga del texto en vez de romper la maqueta. */
.gdm-tabla-caja {
	overflow-x: auto;
	margin: 1.4em 0 1.6em;
}

/* Con cinco columnas el texto vuelve a su tamaño. Estuvo a 14 px mientras la tabla llevaba
   también el SII y el bloqueo de la Subtel: siete columnas no cabían en los 730 px de la
   columna de lectura sin apretar la tipografía. */
.gdm-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}

/* La leyenda es una frase corriente y se compone como tal: hereda el cuerpo de la página.
   Estaba a 14 px y con `opacity: .8`, y se leía como un pie de foto encogido en medio del
   texto —justo delante de la tabla más importante de la guía. */
.gdm-tabla caption {
	margin-bottom: .9em;
	font-size: inherit;
	line-height: inherit;
	text-align: left;
	text-wrap: pretty;
}

.gdm-tabla th,
.gdm-tabla td {
	padding: 10px 11px;
	border-bottom: 1px solid var(--gdm-linea-suave);
	text-align: left;
	vertical-align: middle;
}

.gdm-tabla thead th {
	border-bottom: 2px solid var(--gdm-linea);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.3;
}

.gdm-tabla tbody th {
	font-weight: 700;
	white-space: nowrap;
}

/* El reparto del ancho, declarado en la cabecera. Sin él, el navegador reparte según el
   contenido y le da a «rollover» el sitio que necesita el bono, que es la columna que se
   lee primero. Sólo actúa en escritorio: en móvil la tabla ya no es una tabla. */
.gdm-tabla thead th:nth-child(1) { width: 13%; }
.gdm-tabla thead th:nth-child(2) { width: 32%; }
.gdm-tabla thead th:nth-child(3) { width: 21%; }
.gdm-tabla thead th:nth-child(4) { width: 14%; }
.gdm-tabla thead th:nth-child(5) { width: 20%; }

.gdm-tabla tbody tr:nth-child(even) {
	background: rgba(128, 128, 128, .04);
}

/* La oferta destaca por peso, no con <b>. En esta página la negrita significa «esta
   palabra decide», y una celda entera en negrita en las diez filas no destacaría nada. */
.gdm-tabla__bono {
	font-weight: 700;
}


/* Las cifras se comparan en columna: sin ancho fijo de dígito bailan y no se pueden leer
   en vertical. El texto SÍ puede partirse —«30 días por etapa» en dos líneas—, porque
   forzarlo a una sola era lo que empujaba las últimas columnas fuera de la caja. Los
   números sueltos, como 1,65, no tienen espacios y no parten igualmente. */
.gdm-tabla__cifra {
	font-variant-numeric: tabular-nums;
}

/* Un dato que las fuentes dan de dos maneras. Se marca en vez de elegir uno: publicar el
   promedio de dos cifras contradictorias es inventar una tercera. */
.gdm-tabla__conflicto {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.35;
	font-style: italic;
	opacity: .75;
}

@media (max-width: 760px) {
	.gdm-tabla,
	.gdm-tabla tbody,
	.gdm-tabla tr,
	.gdm-tabla td {
		display: block;
	}

	.gdm-tabla thead {
		display: none;
	}

	.gdm-tabla tbody tr {
		margin-bottom: 12px;
		border: 1px solid var(--gdm-linea);
		border-radius: var(--gdm-radio);
		overflow: hidden;
		background: none;
	}

	.gdm-tabla tbody th {
		display: block;
		padding: 11px 14px;
		border-bottom: 1px solid var(--gdm-linea-suave);
		background: var(--gdm-fondo);
		font-size: 17px;
	}

	.gdm-tabla td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 14px;
		padding: 8px 14px;
		border-bottom: 1px solid var(--gdm-linea-suave);
		text-align: right;
	}

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

	/* La etiqueta de la columna, delante del dato. Sale del atributo y no de un <span>
	   duplicado para que el HTML siga siendo una tabla de verdad para un lector de
	   pantalla y para Google. */
	.gdm-tabla td::before {
		content: attr(data-col);
		flex: 0 0 auto;
		font-size: 11.5px;
		font-weight: 800;
		letter-spacing: .05em;
		text-transform: uppercase;
		text-align: left;
		opacity: .65;
	}

	.gdm-tabla__conflicto {
		text-align: right;
	}
}

/* ---------- Rejilla de tarjetas ----------
 *
 * Para lo que antes eran listas largas de puntos con negrita al principio: los cuatro
 * mecanismos que inflan una cifra, los seis datos de los términos, los cuatro tipos de
 * bono, los cinco criterios de evaluación. Una lista de seis puntos de tres líneas cada
 * uno es media pantalla de texto; en rejilla son dos golpes de vista. */

.gdm-tarjetas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: 12px;
	margin: 1.3em 0 1.6em;
}

/* Tres tarjetas en fila cuando son exactamente tres.
 *
 * Con `minmax(255px, 1fr)` en una columna de 730 px caben dos, así que un grupo de tres
 * salía 2 + 1: la tercera sola, con un hueco del mismo tamaño al lado. Bajar el mínimo
 * para todos no sirve, porque entonces los grupos de cuatro —los hay— pasarían de 2 + 2,
 * que está equilibrado, a 3 + 1, que es el mismo defecto movido de sitio.
 *
 * `:has()` permite decirlo sólo para el caso que lo necesita: un contenedor cuyo tercer
 * hijo es también el último. El media query de 700 px las devuelve a una columna. */
.gdm-tarjetas:has(> .gdm-tarjeta:nth-child(3):last-child) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gdm-tarjeta {
	padding: 15px 16px;
	border: 1px solid var(--gdm-linea);
	border-radius: var(--gdm-radio);
}

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

.gdm-tarjeta p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.55;
}

.gdm-tarjeta p + p {
	margin-top: .5em;
}

/* La variante numerada, para lo que es una secuencia y no un conjunto. El número va en el
   filete superior y no en un círculo flotante: un círculo por tarjeta en una rejilla de
   seis es ruido, y aquí el orden importa poco más que el contenido. */
.gdm-tarjeta__n {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	color: rgba(31, 168, 105, .95);
}

/* ---------- Pasos numerados ----------
 *
 * Para lo que sí es una secuencia con orden real: los errores que anulan el bono, los
 * consejos. El número en círculo da el ritmo de lectura que una lista <ol> normal, con su
 * número pegado al texto, no consigue. */

.gdm-pasos {
	margin: 1.3em 0 1.6em;
	padding: 0;
	list-style: none;
	counter-reset: paso;
}

.gdm-pasos > li {
	position: relative;
	margin: 0 0 12px;
	padding: 0 0 0 46px;
	min-height: 32px;
	font-size: 16px;
	line-height: 1.6;
	counter-increment: paso;
}

.gdm-pasos > li::before {
	content: counter(paso);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid rgba(31, 168, 105, .55);
	border-radius: 50%;
	font-size: 14px;
	font-weight: 800;
	color: var(--gdm-verde);
}

/* ---------- Ventajas y desventajas ----------
 *
 * Dos columnas en escritorio, apiladas en el teléfono. En la versión anterior iban
 * seguidas en vertical y el lector tenía que recordar la primera lista mientras leía la
 * segunda, que es justo lo que un balance no debe pedir. */

.gdm-balance {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
	gap: 12px;
	margin: 1.3em 0 1.6em;
}

.gdm-balance__col {
	padding: 15px 17px 16px;
	border: 1px solid var(--gdm-linea);
	border-radius: var(--gdm-radio);
}

.gdm-balance__col--pros {
	border-top: 3px solid rgba(26, 122, 76, .8);
}

.gdm-balance__col--contras {
	border-top: 3px solid rgba(166, 50, 59, .75);
}

.gdm-balance__t {
	display: block;
	margin-bottom: 9px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.gdm-balance__col--pros .gdm-balance__t {
	color: var(--gdm-verde);
}

.gdm-balance__col--contras .gdm-balance__t {
	color: var(--gdm-rojo);
}

/* La flecha verde que el tema pinta en cada <li> aquí sobra: al lado del ✓ y del ✕ son
 * dos marcadores en el mismo punto. No está en ninguna hoja legible desde fuera —no es un
 * ::before, que ya se apaga más arriba— así que se cierran las tres vías que quedan:
 * marcador nativo, ::marker con contenido, e imagen de fondo. */
.gdm-balance ul {
	margin: 0;
	padding-left: 1.55em;
	list-style: none !important;
	font-size: 15.5px;
	line-height: 1.55;
}

/* Y la vía que finalmente la quita: un <li> que no es `list-item` no genera caja de
   marcador, así que no hay nada que pintar. `list-style: none`, `::marker` y apagar los
   pseudo-elementos no bastaban —el triángulo seguía apareciendo junto al ✓ y al ✕—.
   Perder el marcador nativo aquí no cuesta nada: el símbolo lo escribe el generador
   dentro del propio <li>. */
.gdm-balance li {
	display: block;
}

.gdm-balance li {
	position: relative;
	margin-bottom: .55em;
}

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

/* El símbolo lo escribe el generador dentro del <li>, no un ::after.
 *
 * Con pseudo-elemento, en esta plantilla las dos columnas salían con el mismo marcador
 * verde: algo del tema lo gana en la cascada y no está en ninguna hoja que se pueda leer
 * desde fuera. Un balance donde las ventajas y los inconvenientes llevan el mismo signo no
 * dice nada, así que el símbolo pasó a ser texto de verdad —que además sobrevive al modo
 * oscuro y no depende de que cargue la fuente de iconos—. */
.gdm-balance__i {
	position: absolute;
	left: -1.5em;
	top: 0;
	font-weight: 800;
}

.gdm-balance__i--si {
	color: var(--gdm-verde);
}

.gdm-balance__i--no {
	color: var(--gdm-rojo);
}

/* ---------- Aviso ----------
 *
 * Para lo que el lector se juega dinero por no saber: que una cifra es la suma de cinco
 * depósitos, que un número anunciado es del casino y no del deporte. */

.gdm-aviso {
	margin: 1.4em 0;
	padding: 14px 16px;
	border: 1px solid rgba(196, 122, 23, .45);
	border-left-width: 3px;
	border-radius: var(--gdm-radio);
	font-size: 16px;
}

.gdm-aviso p {
	margin: 0 0 .55em;
	line-height: 1.6;
}

.gdm-aviso p:last-child {
	margin-bottom: 0;
}

.gdm-aviso__t {
	display: block;
	margin-bottom: .4em;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(160, 98, 16, .95);
}

/* Dentro de una ficha el aviso es un inciso, no una sección: sin apretarlo, la tarjeta
   crece justo en las casas que ya traen una contradicción que explicar. */
.gdm-casa .gdm-aviso {
	margin: 0 0 1em;
	padding: 11px 13px;
	font-size: 15.5px;
}

/* Las tres cifras infladas que la guía desmonta. Van como pares marca → explicación, que
   es más rápido de leer que tres frases seguidas con el mismo esqueleto. */
.gdm-aviso__pares {
	margin: .7em 0 0;
	padding: 0;
	list-style: none;
	font-size: 15.5px;
}

.gdm-aviso__pares li {
	margin: 0 0 .5em;
	padding-top: .5em;
	border-top: 1px solid rgba(196, 122, 23, .25);
	line-height: 1.55;
}

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

/* ---------- Cálculo trabajado ----------
 *
 * El ejemplo de rollover en números: lo que convierte «rollover 5x» en «5.600 CLP al día».
 * Las dos casas se comparan lado a lado porque la comparación ES el argumento. */

.gdm-cuenta {
	margin: 1.4em 0 1.6em;
	padding: 16px 18px 18px;
	border: 1px solid var(--gdm-linea);
	border-radius: var(--gdm-radio);
}

.gdm-cuenta__t {
	display: block;
	margin-bottom: .7em;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	opacity: .75;
}

.gdm-cuenta p {
	margin: 0 0 .6em;
	font-size: 16px;
}

.gdm-cuenta__caras {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 12px;
	margin: 1em 0;
}

.gdm-cara {
	padding: 13px 15px;
	border: 1px solid var(--gdm-linea-suave);
	border-radius: 8px;
	background: var(--gdm-fondo);
}

.gdm-cara__marca {
	display: block;
	font-size: 15px;
	font-weight: 800;
}

.gdm-cara__cifra {
	display: block;
	margin: 3px 0 1px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.gdm-cara__pie {
	display: block;
	font-size: 14px;
	line-height: 1.45;
	opacity: .8;
}

.gdm-cuenta__cierre {
	margin: 0;
	padding-top: .9em;
	border-top: 1px solid var(--gdm-linea-suave);
	font-size: 16px;
}

/* ---------- Método ----------
 *
 * Cómo se hizo la página y qué NO se pudo comprobar. En YMYL vale tanto como los datos: es
 * la diferencia entre publicar una cifra y responder por ella. */

.gdm-metodo {
	margin: 1.8em 0 1.4em;
	padding: 16px 18px;
	border-top: 2px solid rgba(31, 168, 105, .75);
	border-bottom: 1px solid var(--gdm-linea-suave);
	font-size: 16px;
}

.gdm-metodo p {
	margin: 0 0 .7em;
	line-height: 1.6;
}

.gdm-metodo p:last-child {
	margin-bottom: 0;
}

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

.gdm-faq {
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--gdm-linea-suave);
}

.gdm-faq summary {
	cursor: pointer;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.45;
	list-style: none;
}

.gdm-faq summary::-webkit-details-marker {
	display: none;
}

.gdm-faq summary::before {
	content: "+";
	display: inline-block;
	width: 1.15em;
	font-weight: 800;
	color: rgba(31, 168, 105, .95);
}

.gdm-faq[open] summary::before {
	content: "\2013";
}

.gdm-faq p {
	margin: .7em 0 0 1.15em;
	font-size: 16px;
	line-height: 1.6;
}

/* ---------- Fuentes ---------- */

.gdm-fuentes {
	margin: 1em 0 0;
	padding-left: 1.2em;
	font-size: 14.5px;
	line-height: 1.6;
}

.gdm-fuentes li {
	margin-bottom: .45em;
}

/* ---------- Teléfono ----------
 *
 * Casi todo se adapta solo por las rejillas de arriba. Aquí quedan sólo los ajustes que
 * una rejilla no puede hacer: escala tipográfica y relleno de las cajas. */

@media (max-width: 700px) {
	.gdm-guia {
		font-size: 16.5px;
	}

	.gdm-guia h2 {
		margin-top: 2em;
		font-size: 23px;
	}

	.gdm-guia h3 {
		font-size: 19px;
	}

	.gdm-guia__resp,
	.gdm-guia__veredicto p {
		font-size: 17.5px;
	}

	.gdm-casa__cab,
	.gdm-casa__cuerpo {
		padding-left: 14px;
		padding-right: 14px;
	}

	/* Los sellos bajan a su propia línea: al lado del nombre dejaban el bono partido en
	   tres líneas en un ancho de 360 px. */
	.gdm-casa__sellos {
		margin-left: 0;
		order: 3;
		flex-basis: 100%;
		margin-top: 8px;
	}

	/* Cinco atajos no caben en 330 px: tres sí, y con diez marcas salen cuatro filas
	   completas. */
	.gdm-guia__chips {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Tres tarjetas en fila es de escritorio: en el teléfono vuelven a apilarse. */
	.gdm-tarjetas:has(> .gdm-tarjeta:nth-child(3):last-child) {
		grid-template-columns: 1fr;
	}

	.gdm-casa__pie {
		gap: 10px;
	}

	/* Un botón a media caja se lee como secundario. En el teléfono los dos ocupan el ancho
	   completo de la ficha, apilados. */
	.gdm-casa__pie .button-cta,
	.gdm-casa__pie .button-cta a,
	.gdm-casa__pie .button-cta button,
	.gdm-casa__analisis {
		width: 100%;
	}

	.gdm-aviso,
	.gdm-cuenta,
	.gdm-metodo,
	.gdm-tarjeta,
	.gdm-balance__col {
		padding-left: 14px;
		padding-right: 14px;
	}

	.gdm-pasos > li {
		padding-left: 42px;
		font-size: 15.5px;
	}
}