/**
 * TuCine · Planes — estilos propios.
 *
 * NO DEPENDE DEL TEMA NI DE ELEMENTOR, y eso es el motivo de que este archivo
 * exista. Todo lo que se ve aquí se declara aquí: colores, tipos, espacios,
 * bordes y el aspecto de los deslizadores. Si mañana se actualiza
 * hello-elementor, o Elementor cambia sus clases, o se cambia de tema entero,
 * esta sección se ve exactamente igual.
 *
 * De ahí también que TODA regla cuelgue de `.tcp` y que las propiedades se
 * escriban aunque parezcan obvias (color, font-family, margin): lo que no se
 * declara lo hereda del tema, y lo heredado es justo lo que se rompe al
 * actualizar.
 *
 * LA PALETA está sacada de los colores globales que ya usa la web en
 * producción (wp-content/uploads/elementor/css): fondo #141414, tarjetas
 * #1D1D1D, texto #FFFFFF, texto apagado #B4B4B4, acento #FF5A19. Se declaran
 * como variables en `.tcp` para poder retocarlas en un solo sitio; están
 * limitadas a `.tcp` a propósito, para no soltar variables globales que
 * choquen con las del tema.
 */

/*
 * BLINDAJE CONTRA EL ESTILO DEL TEMA. Va primero, y con !important.
 *
 * POR QUÉ HIZO FALTA. El tema le pone a TODOS los <button> del sitio un
 * degradado naranja, y lo hace con `background-image`. El plugin declaraba
 * `background: transparent` en los botones inactivos, pero perdía por
 * especificidad: el resultado era que el interruptor de modalidad, las pestañas
 * de plazo, «Suscribirse», «Personalizar» y «Ver 2 más» se veían TODOS iguales,
 * con el mismo degradado, y no había forma de saber qué estaba seleccionado.
 *
 * POR QUÉ !important, que normalmente no se usa. Este archivo no compite con
 * otras reglas propias: compite con las de un tema que no controlamos y que
 * puede cambiar en la próxima actualización. Subir la especificidad a base de
 * encadenar selectores sería una carrera que se pierde tarde o temprano. Se
 * apaga aquí lo heredado, una vez, y a partir de esta línea el resto del archivo
 * manda sin pelearse.
 *
 * Solo se apaga lo DECORATIVO que el tema impone: el fondo, la sombra, el borde
 * y el peinado del texto. El tamaño, el color y el espaciado los pone cada regla
 * de abajo con normalidad.
 */
.tcp button,
.tcp a.tcp-btn {
	background-image: none !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
	filter: none !important;
}

.tcp {
	--tcp-fondo: #141414;
	--tcp-tarjeta: #1d1d1d;
	--tcp-tarjeta-borde: #2c2c2c;
	--tcp-texto: #ffffff;
	--tcp-texto-apagado: #b4b4b4;
	--tcp-acento: #ff5a19;
	--tcp-acento-texto: #ffffff;
	--tcp-radio: 14px;
	--tcp-hueco: 20px;

	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	color: var(--tcp-texto);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
}

.tcp *,
.tcp *::before,
.tcp *::after {
	box-sizing: border-box;
}

/* ── Aviso cuando no hay datos ni respaldo ─────────────────────────────── */

.tcp-aviso {
	margin: 0;
	padding: 24px;
	border: 1px solid var(--tcp-tarjeta-borde);
	border-radius: var(--tcp-radio);
	background: var(--tcp-tarjeta);
	color: var(--tcp-texto-apagado);
	text-align: center;
	font-size: 15px;
}

/* ── Interruptor de modalidad ──────────────────────────────────────────── */

/*
 * LO PRIMERO QUE SE ELIGE, Y NO SE PARECE A LAS PESTAÑAS DE ABAJO.
 *
 * En la página hay dos elecciones seguidas: la modalidad (qué producto se
 * compra) y el plazo (cuánto dura). Si las dos fueran píldoras redondas con el
 * color de marca, nadie sabría en cuál de las dos está tocando.
 *
 * Este es un carril rectangular con un mando que se desplaza a un lado: la
 * forma que ya se reconoce como «dos posiciones, estoy en una». El mando va en
 * blanco —el color del texto— y no en el naranja de marca a propósito: el
 * naranja lo tienen las pestañas de plazo y los botones de comprar, y repetirlo
 * aquí volvería a igualar lo que se está intentando distinguir.
 *
 * Las columnas se reparten solas por si algún día son tres modalidades: no
 * habría que tocar nada.
 */
/*
 * EL PANEL QUE ENVUELVE TODO.
 *
 * La sección va dentro de una caja propia, más oscura que la página, en vez de
 * flotar suelta sobre el fondo. Es lo que hace que el interruptor, las pestañas
 * y las tarjetas se lean como UNA cosa —un selector de plan— y no como tres
 * bloques que casualmente están cerca.
 */
.tcp-panel-marco {
	padding: 32px 28px 36px;
	border: 1px solid var(--tcp-tarjeta-borde);
	border-radius: 24px;
	background: #101014;
}

@media (max-width: 767px) {
	.tcp-panel-marco {
		padding: 22px 16px 26px;
		border-radius: 18px;
	}
}

.tcp-modalidades {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 4px;
	width: 100%;
	max-width: 480px;
	margin: 0 auto 14px;
	padding: 5px;
	border: 1px solid var(--tcp-tarjeta-borde);
	/* Píldora, como la referencia. La diferencia con las pestañas de plazo la
	   marca el color del activo —blanco arriba, naranja abajo— y el tamaño, no
	   la forma. */
	border-radius: 999px;
	background: #08080b;
}

/*
 * EL CONTRASTE ENTRE ELEGIDO Y NO ELEGIDO ES LO ÚNICO QUE IMPORTA AQUÍ.
 *
 * Inactivo: sin fondo y con el texto apagado. Activo: fondo blanco y texto
 * oscuro. Se eligió blanco y no el naranja de la marca a propósito: el naranja
 * ya lo llevan las pestañas de plazo justo debajo, y con los dos en naranja se
 * volvía a perder la diferencia entre los dos niveles. Blanco arriba y naranja
 * abajo se leen como dos cosas distintas de un vistazo.
 */
.tcp-modalidad {
	margin: 0;
	padding: 12px 14px;
	border: 0;
	border-radius: 999px;
	background-color: transparent !important;
	color: var(--tcp-texto-apagado);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.tcp-modalidad:hover {
	background-color: rgba(255, 255, 255, .06) !important;
	color: var(--tcp-texto);
}

.tcp-modalidad.is-activa,
.tcp-modalidad.is-activa:hover {
	background-color: var(--tcp-texto) !important;
	color: var(--tcp-fondo) !important;
}

/* El rótulo que solo se ve sin JavaScript, para saber de qué es cada rejilla
   cuando se enseñan todas a la vez. Ver el <noscript> del shortcode. */
.tcp-panel-rotulo {
	margin: 0 0 12px;
	padding: 0;
	color: var(--tcp-texto);
	font-size: 17px;
	font-weight: 700;
}

/* ── Pestañas de plazo ─────────────────────────────────────────────────── */

.tcp-plazos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 var(--tcp-hueco);
	padding: 6px;
	border: 1px solid var(--tcp-tarjeta-borde);
	border-radius: 999px;
	background: var(--tcp-tarjeta);
	/* Que la barra no se estire a lo ancho de la página en pantallas grandes. */
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

.tcp-plazo {
	margin: 0;
	padding: 10px 22px;
	border: 0;
	border-radius: 999px;
	background-color: transparent !important;
	color: var(--tcp-texto-apagado);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.tcp-plazo:hover {
	background-color: rgba(255, 255, 255, .06) !important;
	color: var(--tcp-texto);
}

/* Igual que con las tarjetas plegadas: `hidden` lo pone el JavaScript y aquí se
   dice qué significa, para que ninguna regla de arriba pueda ganarle. */
.tcp-plazo[hidden] {
	display: none;
}

.tcp-plazo.is-activo,
.tcp-plazo.is-activo:hover {
	background-color: var(--tcp-acento) !important;
	color: var(--tcp-acento-texto) !important;
}

/*
 * EN MÓVIL, LOS PLAZOS EN DOS POR FILA.
 *
 * En un iPhone los cuatro no caben en una línea, y el `flex-wrap` los partía en
 * «1 mes · 3 meses · 6 meses» arriba y «12 meses» solo abajo: una fila coja que
 * hacía parecer que el último era otra cosa.
 *
 * Se pasa a rejilla de dos columnas, que reparte 2 y 2. Con rejilla y no con
 * flex porque el reparto tiene que ser el mismo caiga como caiga: `flex-wrap`
 * decide según lo que mida cada texto —«12 meses» es más ancho que «1 mes»— y
 * bastaría con cambiar un rótulo para volver al 3+1.
 *
 * `width: 100%` anula el `fit-content` de la regla general, que en rejilla
 * encogería la barra al ancho del texto más largo. Y el radio baja de 999px:
 * en una caja de dos renglones, ese redondeo la deja con forma de cápsula
 * gorda en vez de barra.
 *
 * Con tres plazos quedaría 2+1, con la última a la izquierda. Se acepta: hoy
 * son cuatro en las dos modalidades, y forzar el centrado de una fila coja
 * costaría el mismo enredo de `nth-child` que en la rejilla de tarjetas para un
 * caso que no existe.
 */
@media (max-width: 767px) {
	.tcp-plazos {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		max-width: 340px;
		border-radius: 22px;
	}

	.tcp-plazo {
		padding: 11px 12px;
		font-size: 14px;
	}
}

/* ── Rejilla de tarjetas ───────────────────────────────────────────────── */

/*
 * Tres en fila en escritorio y tableta; una debajo de otra en móvil.
 *
 * Se hace con columnas explícitas y no con `auto-fit`, que sería más «listo»:
 * con auto-fit, una pestaña con solo dos productos los estiraría a media
 * pantalla cada uno y las tarjetas cambiarían de tamaño al cambiar de pestaña.
 * Con columnas fijas, una tarjeta mide siempre lo mismo.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * POR QUÉ SEIS COLUMNAS Y NO TRES, SI CABEN TRES TARJETAS.
 *
 * Con cinco productos, la segunda fila tiene dos, y pegados a la izquierda
 * dejaban un hueco enorme a la derecha que parecía un error de maquetación.
 * Centrar dos tarjetas sobre tres columnas es imposible: cada una tendría que
 * ocupar columna y media, y una columna no se parte.
 *
 * La rejilla se dobla a seis y cada tarjeta ocupa dos. Visualmente no cambia
 * nada —siguen entrando tres por fila, del mismo ancho— pero ahora existe la
 * media columna que hacía falta: una fila de dos empieza en la columna 2 y queda
 * centrada, y una fila de una empieza en la 3 y queda en medio.
 *
 * Las dos reglas de abajo son las que lo hacen, y se leen así:
 *   :nth-child(3n+1)  → «esta tarjeta abre una fila»
 *   :nth-last-child(2)→ «y detrás solo queda una más» (fila de dos)
 *   :last-child       → «y no queda ninguna más»      (fila de una)
 * La segunda tarjeta de la fila no necesita regla: cae sola detrás de la
 * primera.
 *
 * OJO SI ALGÚN DÍA CAMBIA EL NÚMERO DE TARJETAS POR FILA: el `3n+1` va atado a
 * las tres por fila, no a las seis columnas. Hay que cambiarlo con él.
 *
 * LAS TARJETAS PLEGADAS NO ESTORBAN. `:nth-child` cuenta también las que llevan
 * `hidden`, pero las ocultas son siempre las últimas —el plegado esconde de la
 * cuarta en adelante—, así que la fila que estas reglas centran es justo la que
 * aparece al pulsar «Ver más».
 * ─────────────────────────────────────────────────────────────────────────────
 */
.tcp-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--tcp-hueco);
	align-items: stretch;
}

.tcp-grid > .tcp-tarjeta {
	grid-column: span 2;
}

/* Última fila con DOS: empieza una media columna más adentro. */
.tcp-grid > .tcp-tarjeta:nth-child(3n+1):nth-last-child(2) {
	grid-column: 2 / span 2;
}

/* Última fila con UNA: al centro. */
.tcp-grid > .tcp-tarjeta:nth-child(3n+1):last-child {
	grid-column: 3 / span 2;
}

@media (max-width: 767px) {
	.tcp-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Se anulan las tres reglas de arriba de una vez. Es imprescindible: con una
	 * sola columna, un `span 2` obligaría al navegador a inventarse una segunda
	 * columna y las tarjetas se saldrían de la pantalla.
	 */
	.tcp-grid > .tcp-tarjeta,
	.tcp-grid > .tcp-tarjeta:nth-child(3n+1):nth-last-child(2),
	.tcp-grid > .tcp-tarjeta:nth-child(3n+1):last-child {
		grid-column: auto;
	}
}

/* ── Tarjeta ───────────────────────────────────────────────────────────── */

.tcp-tarjeta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 26px 22px;
	border: 1px solid var(--tcp-tarjeta-borde);
	border-radius: var(--tcp-radio);
	background: var(--tcp-tarjeta);
	color: var(--tcp-texto);
}

/* `hidden` gana a `display:flex` solo si se dice: es el atributo que usa el
   JavaScript para plegar y desplegar, y sin esto no haría nada. */
.tcp-tarjeta[hidden] {
	display: none;
}

/*
 * EL NOMBRE RESERVA SIEMPRE DOS RENGLONES, LOS USE O NO.
 *
 * Es lo que cuadra las tres tarjetas. «Cursos Cine» cabe en una línea y
 * «Curso Cine + Foto + 4K» necesita dos, así que sin esto el precio de la
 * tercera arranca 25px más abajo que el de las otras dos, y detrás de él bajan
 * el botón y la lista entera. Las tarjetas medían lo mismo por fuera —de eso ya
 * se encarga `align-items:stretch` de la rejilla— pero por dentro no coincidía
 * ni una línea.
 *
 * 2.5em = 2 renglones × 1.25 de interlineado, y va en `em` para que siga
 * cuadrando si algún día cambia el tamaño de letra.
 *
 * SU LÍMITE: un nombre de TRES líneas volvería a descuadrar esa tarjeta. No se
 * pone un `min-height` mayor porque dejaría un hueco permanente bajo todos los
 * nombres cortos, que es el caso normal. Si algún día hace falta un nombre tan
 * largo, la respuesta es acortar el nombre, no estirar esto.
 *
 * EN MÓVIL SE ANULA: con una sola tarjeta por fila no hay nada con lo que
 * cuadrar, y el hueco bajo los nombres cortos sería puro espacio muerto.
 */
/*
 * ⚠ EL `!important` DEL TAMAÑO NO ES PEREZA. ES LO ÚNICO QUE FUNCIONA AQUÍ.
 *
 * El título es un <h3>, y Elementor publica la tipografía global del sitio con
 * reglas del tipo:
 *
 *     .elementor-kit-201 h3 { font-size: 34px; ... }
 *
 * Eso pesa más que `.tcp-nombre` —una clase y un elemento contra una clase
 * sola—, así que gana el tema y el título sale al tamaño del kit por mucho que
 * aquí se escriba otro. Costó un rato descubrirlo porque el resto de la tarjeta
 * sí obedecía: los demás textos van en <span> y <p>, que el kit no toca.
 *
 * Es el mismo motivo por el que más abajo los botones llevan su propio escudo
 * contra el degradado del tema. Un plugin que se incrusta en una página ajena
 * tiene que poder decidir cómo se ve lo suyo.
 *
 * SE BLINDAN SOLO EL TAMAÑO Y EL INTERLINEADO, no el color ni la familia: esos
 * dos sí deben heredarse del sitio para que la tarjeta no parezca pegada de otra
 * web.
 */
.tcp-nombre {
	margin: 0;
	padding: 0;
	min-height: 2.5em;
	color: var(--tcp-texto);
	font-family: inherit;
	font-size: 22px !important;
	font-weight: 700;
	line-height: 1.25 !important;
	text-align: center;
}

/*
 * LA RAYA BAJO EL NOMBRE.
 *
 * No llega a los bordes de la tarjeta: se queda corta por los dos lados. Una
 * raya de lado a lado parte la tarjeta en dos cajas; una que no llega del todo
 * se lee como un subrayado del título, que es lo que es.
 *
 * `margin: auto` en los lados para que quede centrada bajo el título, que
 * también lo está. Antes iba pegada a la izquierda porque el título lo estaba.
 */
.tcp-separador {
	width: 100%;
	max-width: 240px;
	height: 0;
	margin: 14px auto 18px;
	border: 0;
	border-top: 1px solid var(--tcp-tarjeta-borde);
}

@media (max-width: 767px) {
	.tcp-nombre {
		min-height: 0;
	}
}

/*
 * EN ESCRITORIO, EL TÍTULO MÁS PEQUEÑO. Lo pidió el dueño.
 *
 * Va en un `min-width` y no cambiando el valor de arriba porque en móvil la
 * tarjeta ocupa la pantalla entera y ahí los 20px se leen bien; lo que se estaba
 * viendo grande es la versión de tres en fila.
 *
 * El `min-height` de arriba está en `em`, así que se ajusta solo: sigue
 * reservando dos renglones, ahora de 18px.
 */
/*
 * En escritorio el título mide lo mismo que en móvil (22px), así que esta regla
 * ya no cambia nada y se queda como sitio donde ponerlo si vuelve a hacer falta
 * separarlos. Ver la tabla de tamaños del bloque de precio.
 */
@media (min-width: 768px) {
	.tcp-nombre {
		font-size: 22px !important;
	}
}

.tcp-banderas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcp-bandera {
	margin: 0;
	padding: 4px 10px;
	border: 1px solid var(--tcp-tarjeta-borde);
	border-radius: 999px;
	color: var(--tcp-texto-apagado);
	font-size: 13px;
	line-height: 1.3;
}

.tcp-dato {
	margin: 0;
	padding: 0;
	color: var(--tcp-texto-apagado);
	font-size: 15px;
}

.tcp-dato[hidden] {
	display: none;
}

.tcp-dato-valor {
	color: var(--tcp-texto);
	font-weight: 700;
}

/*
 * SOLO LA CIFRA. El plazo que iba a su lado se quitó de la plantilla: el
 * selector de arriba ya dice en qué plazo está el visitante, y repetirlo en cada
 * una de las tres tarjetas era decírselo tres veces.
 *
 * Sigue siendo un contenedor flex aunque hoy tenga un solo hijo: es lo que
 * mantiene la línea base estable si mañana vuelve a colgarse algo de la cifra
 * —un «antes $400 tachado», un «al mes»—, que es lo que suele acabar pasando en
 * una tabla de precios.
 */
/*
 * ─── EL BLOQUE DE PRECIO ────────────────────────────────────────────────────
 *
 * Va al FONDO de la tarjeta, empujado por `margin-top:auto`. Eso es lo que
 * alinea el precio y el botón de las tres tarjetas entre sí aunque una tenga
 * seis puntos en la lista y otra dos: el hueco sobrante se lo come este margen,
 * no la lista.
 *
 * Es el mismo truco que se quitó de `.tcp-acciones` hace un rato, y ahora sí
 * vale, justamente porque el orden de la tarjeta cambió: entonces los botones
 * tenían la lista DEBAJO y el `auto` los dejaba a la altura que marcara esa
 * lista; ahora debajo no hay nada, así que el hueco cae donde debe.
 *
 * ─── LOS TAMAÑOS, TODOS JUNTOS PARA PODER RETOCARLOS ────────────────────────
 *
 *   .tcp-nombre         22px   ← el título (lleva !important: ver su comentario)
 *   .tcp-precio-cifra   18px   ← la cuota mensual
 *   .tcp-precio-cuotas  18px   ← el «3x»
 *   .tcp-precio-sufijo  11px   ← el «/mes»
 *   .tcp-precio-total   12px   ← el total del plazo
 *
 * LA REGLA QUE LOS ATA: la cifra va por debajo del título. Lo pidió el dueño y
 * es lo que hace que mande el nombre del curso y no el número.
 * ─────────────────────────────────────────────────────────────────────────────
 */
.tcp-precio-bloque {
	margin-top: auto;
	padding-top: 18px;
	text-align: center;
}

/*
 * `justify-content: center` y no `text-align: center`: esto es un contenedor
 * flex —lo es para poder colgar el «/mes» de la línea base de la cifra— y en
 * flex el alineado horizontal lo decide el reparto del eje, no el `text-align`,
 * que ahí no haría nada.
 */
.tcp-precio {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	color: var(--tcp-texto);
}

.tcp-precio-cifra {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
}

/*
 * EL «12x», DEL MISMO TAMAÑO QUE LA CIFRA PERO SIN SU PESO.
 *
 * Es parte de la misma cantidad —«doce veces esto»— así que encogerlo lo
 * convertiría en una nota al margen y se leería «$239.00» a secas, que es
 * justo el malentendido que hay que evitar en una tabla de precios. Se
 * distingue por el color y el grosor, no por el tamaño.
 */
.tcp-precio-cuotas {
	color: var(--tcp-texto-apagado);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
}

/* El «/mes», pegado a la cifra: `gap` lo separaría como una palabra más. */
.tcp-precio-sufijo {
	margin-left: -3px;
	color: var(--tcp-texto-apagado);
	font-size: 11px;
	font-weight: 600;
}

/*
 * LA LÍNEA DEL TOTAL DEL PLAZO.
 *
 * Pequeña y apagada, pero con la cifra en negrita: es el número que de verdad
 * se cobra, y quien lo busca lo busca a propósito. La jerarquía correcta aquí es
 * al revés que en el resto de la tarjeta —arriba lo que engancha, abajo lo que
 * comprueba quien ya está decidiendo—.
 */
.tcp-precio-total {
	margin: 6px 0 0;
	padding: 0;
	color: var(--tcp-texto-apagado);
	font-size: 12px;
	line-height: 1.4;
}

.tcp-precio-total strong {
	color: var(--tcp-texto);
	font-weight: 700;
}

/*
 * EL «MXN», PEQUEÑO Y APAGADO AL LADO DE LA CIFRA.
 *
 * Está para quitar una duda —el signo `$` lo comparten muchas monedas—, no para
 * leerse. A los 38px de la cifra ocuparía casi tanto como el precio y en una
 * tarjeta estrecha lo empujaría a dos líneas.
 *
 * Se alinea por la línea base con la cifra (lo hace el `align-items: baseline`
 * del contenedor), que es como se escribe una cantidad de dinero a mano: el
 * código se apoya en el mismo renglón, no flota a media altura.
 */
.tcp-precio-moneda {
	color: var(--tcp-texto-apagado);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
}

/* ── «Qué incluye» ─────────────────────────────────────────────────────── */

/*
 * SIN TÍTULO. El «Qué incluye» que iba encima se quitó: en la referencia que
 * eligió el dueño la lista va suelta bajo la raya, y el rótulo no aportaba nada
 * —una lista de cosas incluidas debajo del nombre de un plan no se puede leer
 * como otra cosa—.
 */
.tcp-incluye {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * CADA PUNTO ES ICONO + TEXTO, EN FLEX.
 *
 * Antes la palomita era un pseudo-elemento dibujado con bordes, porque era
 * siempre la misma. Ahora el icono lo elige el dueño línea a línea con
 * `[fa-...]`, así que es un elemento de verdad en el HTML.
 *
 * En flex y no con `position:absolute` para que el texto de dos renglones
 * envuelva alineado consigo mismo y no por debajo del icono. El icono lleva
 * `flex: 0 0 18px` —ancho fijo— para que todas las líneas empiecen en la misma
 * columna aunque una traiga un icono estrecho y otra uno ancho; sin eso, una
 * lista con iconos distintos queda con el texto en zigzag.
 */
.tcp-incluye-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 9px;
	padding: 0;
	color: var(--tcp-texto-apagado);
	font-size: 14px;
	line-height: 1.45;
}

.tcp-incluye-item strong {
	color: var(--tcp-texto);
	font-weight: 700;
}

/*
 * El icono. `margin-top` en `em` y no en píxeles: lo que hay que compensar es la
 * diferencia entre el alto de la letra y el del icono, y eso escala con el
 * tamaño de fuente.
 *
 * `aria-hidden` ya está puesto en el HTML, así que un lector de pantalla lee la
 * frase limpia y no anuncia un icono decorativo.
 */
.tcp-incluye-item > i {
	flex: 0 0 18px;
	width: 18px;
	margin-top: .22em;
	color: var(--tcp-acento);
	font-size: 13px;
	line-height: 1;
	text-align: center;
}

/* Que el texto pueda encoger sin desbordar la tarjeta cuando una palabra es
   larga (una URL, un nombre técnico). */
.tcp-incluye-texto {
	min-width: 0;
}

/*
 * LOS DOS BOTONES, EN UNA FILA.
 *
 * Antes iban uno debajo de otro y a lo ancho de la tarjeta: dos bloques enormes
 * que pesaban más que el precio, que es lo que de verdad se viene a mirar. En
 * fila ocupan la mitad de alto y dejan respirar la tarjeta.
 *
 * En móvil vuelven a apilarse: con la tarjeta a un solo ancho, dos botones lado
 * a lado dejan el texto en dos líneas y se ven apretados. Ver la regla de abajo.
 *
 * EL `margin-top:auto` QUE ALINEA LAS TRES TARJETAS NO ESTÁ AQUÍ, sino en
 * `.tcp-precio-bloque`, que es lo que hay justo encima. Los botones van pegados
 * a él y se alinean con él. Ponerlo también aquí no sumaría nada: el hueco libre
 * ya se lo comió el bloque de arriba.
 */
.tcp-acciones {
	display: flex;
	flex-direction: row;
	gap: 8px;
	margin-top: 14px;
	padding-top: 0;
}

.tcp-acciones .tcp-btn {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 767px) {
	.tcp-acciones {
		flex-direction: column;
	}
}

/* ── Botones ───────────────────────────────────────────────────────────── */

/* Más bajos y con la letra algo menor que antes: al ir en fila, dos botones
   grandes competían con el precio. */
.tcp-btn {
	display: inline-block;
	width: 100%;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: transparent !important;
	color: var(--tcp-texto);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Uno lleno y otro solo con borde: así se ve cuál es la acción principal. Con
   los dos rellenos —que es como se veían con el degradado del tema— la tarjeta
   no dice qué se espera que pulses. */
.tcp-btn--suscribir {
	background-color: var(--tcp-acento) !important;
	color: var(--tcp-acento-texto) !important;
}

.tcp-btn--suscribir:hover,
.tcp-btn--suscribir:focus {
	background-color: #e64d10 !important;
	color: var(--tcp-acento-texto) !important;
}

.tcp-btn--personalizar {
	border-color: var(--tcp-tarjeta-borde);
	color: var(--tcp-texto);
}

/*
 * EL HOVER DE «PERSONALIZAR».
 *
 * Tenía uno y no se veía: cambiaba el borde y el color de la letra, y nada más.
 * El motivo es que `.tcp-btn` fija `background-color: transparent !important`
 * —ese `!important` está ahí para tapar el degradado naranja que el tema le mete
 * a todos los botones— y una regla de hover sin `!important` no podía ganarle.
 * Así que el botón se quedaba plano por mucho que se le pasara el ratón por
 * encima.
 *
 * Ahora se rellena con el acento muy diluido. El tono es el mismo `.12` de la
 * familia de las palomitas de «Qué incluye», a propósito: la tarjeta ya usa ese
 * naranja translúcido y repetirlo hace que el botón parezca de la misma casa en
 * lugar de un elemento nuevo.
 *
 * NO SE RELLENA DEL NARANJA ENTERO. Al lado está «Suscribirse», que sí es sólido,
 * y si los dos se llenaran igual al pasar por encima se perdería cuál es la
 * acción principal, que es justo lo que este par de botones estaba puesto para
 * dejar claro.
 *
 * `:focus-visible` y no `:focus` a secas: con `:focus`, el relleno se quedaba
 * pegado después de hacer clic con el ratón —el botón conserva el foco— y daba
 * la impresión de estar activado. Con `-visible` solo aparece cuando se llega
 * por teclado, que es cuando hace falta.
 */
.tcp-btn--personalizar:hover,
.tcp-btn--personalizar:focus-visible {
	border-color: var(--tcp-acento);
	background-color: rgba(255, 90, 25, .12) !important;
	color: var(--tcp-acento) !important;
}

/* Un punto más oscuro al mantener pulsado: el botón responde al dedo antes de
   que abra el panel, que en móvil es lo único que dice que se registró el toque. */
.tcp-btn--personalizar:active {
	background-color: rgba(255, 90, 25, .2) !important;
}

/* Que el foco de teclado se vea, aquí y en todo lo pulsable. */
.tcp button:focus-visible,
.tcp a:focus-visible,
.tcp input:focus-visible {
	outline: 2px solid var(--tcp-acento);
	outline-offset: 2px;
}

/* ── Desplegar más ─────────────────────────────────────────────────────── */

.tcp-mas-fila {
	display: flex;
	justify-content: center;
	margin-top: var(--tcp-hueco);
}

.tcp-mas {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 11px 22px;
	border: 1px solid var(--tcp-tarjeta-borde);
	border-radius: 999px;
	/* Sobrio a propósito: es una acción secundaria, no compite con «Suscribirse». */
	background-color: var(--tcp-tarjeta) !important;
	color: var(--tcp-texto);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.tcp-mas:hover {
	border-color: var(--tcp-acento);
	color: var(--tcp-acento);
}

.tcp-mas-signo {
	display: inline-block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--tcp-acento);
	color: var(--tcp-acento-texto);
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

/* ── Panel de «Personalizar» ───────────────────────────────────────────── */

.tcp-modal {
	position: fixed;
	inset: 0;
	z-index: 99999; /* Por encima de las cabeceras fijas de Elementor. */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.tcp-modal[hidden] {
	display: none;
}

.tcp-modal-fondo {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .72);
}

.tcp-modal-caja {
	position: relative;
	width: 100%;
	max-width: 420px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 28px 24px 24px;
	border: 1px solid var(--tcp-tarjeta-borde);
	border-radius: var(--tcp-radio);
	background: var(--tcp-tarjeta);
	color: var(--tcp-texto);
}

.tcp-modal-cerrar {
	position: absolute;
	top: 10px;
	right: 12px;
	margin: 0;
	padding: 4px 8px;
	border: 0;
	background: transparent;
	color: var(--tcp-texto-apagado);
	font-family: inherit;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.tcp-modal-cerrar:hover {
	color: var(--tcp-texto);
}

.tcp-modal-titulo {
	margin: 0 0 18px;
	padding: 0;
	color: var(--tcp-texto);
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

.tcp-campo {
	margin: 0 0 20px;
}

.tcp-campo-etiqueta {
	display: block;
	margin: 0 0 8px;
	color: var(--tcp-texto-apagado);
	font-size: 14px;
}

.tcp-campo-etiqueta strong {
	color: var(--tcp-texto);
	font-weight: 700;
}

.tcp-rango-extremos {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	color: var(--tcp-texto-apagado);
	font-size: 12px;
}

/*
 * ─── EL PRECIO DEL PANEL DE PERSONALIZAR ────────────────────────────────────
 *
 * Misma forma que en la tarjeta —«3x $200.00/mes» y el total debajo— pero más
 * grande. Aquí el precio SÍ es lo que manda: no hay tres opciones que comparar
 * ni un nombre de curso compitiendo, solo el número que acaba de salir de mover
 * los deslizadores, y es lo que se ha venido a ver.
 *
 * Los tamaños de este bloque:
 *
 *   .tcp-modal-cifra   30px   ← la cuota mensual
 *   .tcp-modal-cuotas  24px   ← el «3x»
 *   .tcp-modal-sufijo  13px   ← el «/mes»
 *   .tcp-modal-total   13px   ← el total del plazo
 */
.tcp-modal-precio {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 5px;
	margin: 4px 0 0;
	padding: 0;
	color: var(--tcp-texto);
}

.tcp-modal-cifra {
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
}

/* Vacío cuando el plazo es de un mes, y entonces no debe dejar hueco: `gap` se
   lo reservaría igual y la cifra saldría descolocada respecto al rótulo. */
.tcp-modal-cuotas:empty {
	display: none;
}

.tcp-modal-cuotas {
	color: var(--tcp-texto-apagado);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.1;
}

.tcp-modal-sufijo {
	margin-left: -2px;
	color: var(--tcp-texto-apagado);
	font-size: 13px;
	font-weight: 600;
}

/*
 * `min-height` para que la línea ocupe su sitio aunque esté vacía: sin ella, al
 * pasar de 3 meses a 1 mes desaparece el rótulo y todo lo de abajo —el desglose
 * y el botón— pega un salto. En un panel donde se está moviendo un deslizador,
 * que el botón se mueva solo es lo peor que puede pasar.
 */
.tcp-modal-total {
	margin: 5px 0 0;
	padding: 0;
	min-height: 18px;
	color: var(--tcp-texto-apagado);
	font-size: 13px;
	line-height: 1.4;
}

.tcp-modal-desglose {
	margin: 4px 0 0;
	padding: 0;
	min-height: 20px;
	color: var(--tcp-texto-apagado);
	font-size: 13px;
}

.tcp-acciones--modal {
	padding-top: 20px;
}

/* Bloquea el desplazamiento del fondo mientras el panel está abierto. */
body.tcp-sin-scroll {
	overflow: hidden;
}

/* ── Deslizadores ──────────────────────────────────────────────────────── */

/*
 * Los `input[type=range]` heredan del navegador un aspecto claro que en un
 * fondo negro se ve fatal, y ni el tema ni Elementor los tocan. Se rehacen
 * aquí: la pista y el pulgar hay que declararlos por separado para WebKit y
 * para Firefox porque no hay un selector que valga para los dos.
 */

/*
 * EL ANCHO DEL PULGAR, EN UNA VARIABLE.
 *
 * La leen tres sitios: el pulgar de WebKit, el de Firefox y el JavaScript que
 * traduce «dónde tocaste» a «qué valor es». Ese cálculo tiene que descontar el
 * ancho del pulgar, así que si aquí cambia y allí no, el deslizador dejaría de
 * llegar a sus extremos. Con la variable no puede pasar.
 */
.tcp-rango {
	--tcp-pulgar: 20px;

	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 22px;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;

	/*
	 * `pan-y` deja que un gesto VERTICAL siga desplazando la página y le entrega
	 * al deslizador los HORIZONTALES. Sin esto, el navegador se queda con el
	 * gesto para decidir si es un scroll y el arrastre sale a trompicones.
	 *
	 * No se usa `none`, que sería lo contundente: dejaría el deslizador como una
	 * zona muerta para el scroll, y en un móvil, con el panel abierto y el dedo
	 * cayendo donde caiga, se sentiría como que la página se ha atascado.
	 */
	touch-action: pan-y;
}

.tcp-rango:disabled {
	opacity: .45;
	cursor: default;
}

.tcp-rango::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background: #333333;
}

.tcp-rango::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: var(--tcp-pulgar);
	height: var(--tcp-pulgar);
	margin-top: -7px; /* Centra el pulgar sobre una pista de 6px. */
	border: 0;
	border-radius: 50%;
	background: var(--tcp-acento);
}

.tcp-rango::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: #333333;
}

.tcp-rango::-moz-range-thumb {
	width: var(--tcp-pulgar);
	height: var(--tcp-pulgar);
	border: 0;
	border-radius: 50%;
	background: var(--tcp-acento);
}

/*
 * EN MÓVIL, TODO MÁS GRANDE.
 *
 * El pulgar pasa de 20 a 28px y la zona sensible de 22 a 40px de alto. Los 20px
 * de escritorio son cómodos para un ratón, que apunta al píxel; un dedo tapa
 * unos 45px y necesita margen o falla el agarre.
 *
 * La barra en sí sigue midiendo 6px: lo que crece es el área que recibe el
 * toque, no el dibujo. Una barra gorda parecería otra cosa.
 */
@media (max-width: 767px) {
	.tcp-rango {
		--tcp-pulgar: 28px;
		height: 40px;
	}

	.tcp-rango::-webkit-slider-thumb {
		margin-top: -11px; /* Centra el pulgar de 28px sobre la pista de 6px. */
	}
}