/*
 * Trading Focus Lab — capa visual
 *
 * Reglas de la marca que este archivo respeta:
 *  - Fondo negro siempre. El texto es blanco puro, nunca gris: sobre negro el
 *    gris se pierde. La jerarquía se consigue con tamaño y peso, no con tono.
 *  - El turquesa es el único color de acento. Si todo fuera turquesa, dejaría
 *    de significar "haz clic aquí".
 *  - Nada de azul.
 */

:root {
	--tfl-negro: #0A0A0B;
	--tfl-superficie: #141416;
	--tfl-superficie-2: #1F2023;
	--tfl-borde: #2A2A2E;
	--tfl-blanco: #FAFAF9;
	--tfl-acento: #00D8B8;
	--tfl-verde: #00ED96;   /* verde del logo */
	--tfl-cian: #0CC3E8;    /* cian del final del degradado */

	/* Degradado de marca. Se usa en titulares, botones y cualquier acento
	   nuevo, para que todo el sitio hable el mismo idioma visual. */
	--tfl-degradado: linear-gradient(100deg, #00ED96 0%, #02CBC4 55%, #0CC3E8 100%);
	--tfl-degradado-diag: linear-gradient(135deg, #00ED96 0%, #02CBC4 55%, #0CC3E8 100%);
	--tfl-acento-2: #00C2A4;
	--tfl-sobre-acento: #06110F;

	/* Retícula de fondo */
	--tfl-celda: 56px;
	--tfl-linea: rgba(0, 216, 184, .07);
}

body {
	background-color: var(--tfl-negro);
	color: var(--tfl-blanco);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ----------------------------------------------------------------------
   Retícula de cuadrícula
   Se aplica a una sección con class="tfl-reticula". El degradado de máscara
   hace que las líneas se desvanezcan hacia los bordes, para que no parezca
   papel milimetrado.
   ---------------------------------------------------------------------- */

.tfl-reticula {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.tfl-reticula::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image:
		linear-gradient(to right, var(--tfl-linea) 1px, transparent 1px),
		linear-gradient(to bottom, var(--tfl-linea) 1px, transparent 1px);
	background-size: var(--tfl-celda) var(--tfl-celda);
	-webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, #000 25%, transparent 78%);
	mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, #000 25%, transparent 78%);
	pointer-events: none;
}

/* Resplandor difuso turquesa por detrás del contenido. */
.tfl-reticula::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -20% 0 auto 0;
	height: 70%;
	background: radial-gradient(60% 55% at 50% 30%, rgba(0, 216, 184, .14), transparent 70%);
	pointer-events: none;
}

/* Variante sin resplandor, para secciones intermedias. */
.tfl-reticula--plana::after { display: none; }

/* ----------------------------------------------------------------------
   Etiqueta monoespaciada con punto latiendo ("panel en vivo")
   ---------------------------------------------------------------------- */

.tfl-mono {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tfl-blanco);
}

.tfl-mono::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tfl-acento);
	box-shadow: 0 0 0 0 rgba(0, 216, 184, .7);
	animation: tfl-latido 2.4s ease-out infinite;
}

@keyframes tfl-latido {
	0%   { box-shadow: 0 0 0 0 rgba(0, 216, 184, .55); }
	70%  { box-shadow: 0 0 0 12px rgba(0, 216, 184, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 216, 184, 0); }
}

/* Sin punto, cuando solo se quiere la tipografía de terminal. */
.tfl-mono--limpio::before { display: none; }

/* ----------------------------------------------------------------------
   Texto con degradado
   Se aplica a un <strong>/<span> dentro del titular, nunca al titular entero.
   ---------------------------------------------------------------------- */

.tfl-degradado {
	background: var(--tfl-degradado);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Variante solo turquesa, más contundente en bloques cortos. */
.tfl-degradado--pleno {
	background: var(--tfl-degradado-diag);
	-webkit-background-clip: text;
	background-clip: text;
}

/* ----------------------------------------------------------------------
   Botones
   ---------------------------------------------------------------------- */

.tfl-btn .wp-block-button__link,
a.tfl-btn {
	background: linear-gradient(135deg, var(--tfl-acento) 0%, var(--tfl-acento-2) 100%);
	color: var(--tfl-sobre-acento);
	font-weight: 700;
	border-radius: 999px;
	box-shadow: 0 0 0 rgba(0, 216, 184, 0);
	transition: box-shadow .3s ease, transform .3s ease;
}

.tfl-btn .wp-block-button__link:hover,
a.tfl-btn:hover {
	box-shadow: 0 0 34px rgba(0, 216, 184, .38);
	transform: translateY(-2px);
	text-decoration: none;
}

/* Secundario: solo borde. */
.tfl-btn-linea .wp-block-button__link,
a.tfl-btn-linea {
	background: transparent;
	color: var(--tfl-blanco);
	border: 1px solid var(--tfl-borde);
	border-radius: 999px;
	font-weight: 600;
	transition: border-color .3s ease, color .3s ease, transform .3s ease;
}

.tfl-btn-linea .wp-block-button__link:hover,
a.tfl-btn-linea:hover {
	border-color: var(--tfl-acento);
	color: var(--tfl-acento);
	transform: translateY(-2px);
	text-decoration: none;
}

/* ----------------------------------------------------------------------
   Tarjetas
   ---------------------------------------------------------------------- */

.tfl-tarjeta {
	position: relative;
	background: var(--tfl-superficie);
	border: 1px solid var(--tfl-borde);
	border-radius: 20px;
	transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}

.tfl-tarjeta:hover {
	border-color: rgba(0, 216, 184, .45);
	transform: translateY(-4px);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

/* Tarjeta destacada: filo turquesa permanente. */
.tfl-tarjeta--destacada {
	border-color: rgba(0, 216, 184, .5);
	background:
		linear-gradient(var(--tfl-superficie), var(--tfl-superficie)) padding-box,
		linear-gradient(135deg, rgba(0, 216, 184, .55), rgba(0, 194, 164, .15)) border-box;
	border: 1px solid transparent;
}

/* Etiqueta en la esquina de una tarjeta. */
.tfl-pildora {
	display: inline-block;
	padding: .3rem .8rem;
	border-radius: 999px;
	background: var(--tfl-acento-suave, #0F2E29);
	color: var(--tfl-acento);
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ----------------------------------------------------------------------
   Filos y separadores
   ---------------------------------------------------------------------- */

.tfl-filo {
	border-top: 1px solid var(--tfl-borde);
}

/* Línea turquesa corta, como subrayado de sección. */
.tfl-subrayado::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 1.25rem;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--tfl-acento), transparent);
}

.has-text-align-center.tfl-subrayado::after { margin-inline: auto; }

/* ----------------------------------------------------------------------
   Aparición al hacer scroll
   El JS añade .tfl-visible. Si el JS no corre, el contenido se ve igual:
   el estado inicial solo se aplica cuando <html> tiene la clase tfl-js.
   ---------------------------------------------------------------------- */

.tfl-js .tfl-aparece {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s ease, transform .7s ease;
}

.tfl-js .tfl-aparece.tfl-visible {
	opacity: 1;
	transform: none;
}

/* ----------------------------------------------------------------------
   Cabecera
   ---------------------------------------------------------------------- */

.tfl-cabecera {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(10, 10, 11, .78);
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid var(--tfl-borde);
}

.tfl-cabecera .wp-block-navigation {
	font-size: .9375rem;
	font-weight: 600;
}

.tfl-cabecera .wp-block-navigation a:hover { color: var(--tfl-acento); }

/* ----------------------------------------------------------------------
   Pie
   ---------------------------------------------------------------------- */

.tfl-pie {
	border-top: 1px solid var(--tfl-borde);
	background: var(--tfl-negro);
}

.tfl-pie .wp-block-navigation {
	font-size: .875rem;
	font-weight: 500;
}

.tfl-pie .wp-block-navigation a { color: var(--tfl-blanco); }
.tfl-pie .wp-block-navigation a:hover { color: var(--tfl-acento); }

/* ----------------------------------------------------------------------
   Accesibilidad y preferencias del sistema
   Nota deliberada: NO se desactivan los efectos visuales estáticos
   (retícula, degradados, resplandor) cuando el sistema pide menos
   movimiento — solo se detiene lo que se mueve. Windows activa esa
   preferencia por defecto en muchos equipos, y apagarlo todo dejaría
   la web plana en el ordenador de media España y México.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.tfl-mono::before { animation: none; }

	.tfl-js .tfl-aparece,
	.tfl-js .tfl-aparece.tfl-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.tfl-btn .wp-block-button__link:hover,
	a.tfl-btn:hover,
	.tfl-tarjeta:hover { transform: none; }
}

/* ----------------------------------------------------------------------
   Móvil
   ---------------------------------------------------------------------- */

@media (max-width: 781px) {
	:root { --tfl-celda: 40px; }

	.tfl-reticula::after { height: 55%; }
}

/* ----------------------------------------------------------------------
   Listas sin viñeta (columnas del pie). El estilo "none" no viene de
   serie en el tema padre, así que se define aquí.
   ---------------------------------------------------------------------- */

.wp-block-list.is-style-none {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-none li { margin: 0; }

/* El enlace del pie es blanco; el turquesa se reserva para el hover. */
.tfl-pie .wp-block-list a { color: var(--tfl-blanco); }
.tfl-pie .wp-block-list a:hover { color: var(--tfl-acento); text-decoration: none; }

/* ----------------------------------------------------------------------
   Enlaces de texto con flecha dentro de tarjetas: que no se subrayen
   al pasar, solo se desplacen.
   ---------------------------------------------------------------------- */

.tfl-tarjeta a {
	display: inline-block;
	font-weight: 600;
	transition: transform .25s ease;
}

.tfl-tarjeta a:hover {
	text-decoration: none;
	transform: translateX(4px);
}

/* Las tarjetas de la retícula se estiran a la misma altura. */
.wp-block-columns .wp-block-column > .tfl-tarjeta { height: 100%; }

/* ----------------------------------------------------------------------
   Logo y marca en la cabecera
   El logo conserva su degradado verde-azul propio; la interfaz sigue en
   turquesa sólido y no reproduce ese azul en ningún otro sitio.
   ---------------------------------------------------------------------- */

.tfl-marca .wp-block-site-logo img {
	display: block;
	border-radius: 50%;
}

.tfl-marca .wp-block-site-title { line-height: 1.1; }

@media (max-width: 599px) {
	.tfl-marca .wp-block-site-title { font-size: 1rem !important; }
	.tfl-btn-cabecera { display: none; }
}

/* ----------------------------------------------------------------------
   Cabecera: nombre en Anton y mayúsculas, como los titulares.
   Logo y menú un punto más grandes para que la marca pese más.
   ---------------------------------------------------------------------- */

.tfl-marca .wp-block-site-title,
.tfl-marca .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--display), Anton, sans-serif;
	font-weight: 400;
	font-size: 1.65rem;
	letter-spacing: .035em;
	text-transform: uppercase;
	line-height: 1;
}

.tfl-cabecera .wp-block-navigation {
	font-size: 1.0625rem;
	font-weight: 600;
}

@media (max-width: 1200px) {
	.tfl-cabecera .wp-block-navigation { font-size: 1rem; }
}

@media (max-width: 599px) {
	.tfl-marca .wp-block-site-title,
	.tfl-marca .wp-block-site-title a { font-size: 1.3rem !important; }
}

/* ======================================================================
   ESCENA DEL HERO — versión final
   El toro es un PNG con transparencia real. Lo que antes venía dentro de
   la imagen (velas y luz del suelo) ahora se dibuja aquí: las velas en SVG
   —nítidas a cualquier resolución y con proporciones de vela de verdad— y
   el aro de luz en CSS. Estas reglas van al final a propósito: mandan
   sobre las de versiones anteriores del toro.
   ====================================================================== */

:root { --tfl-vela-baja: #0B5048; }   /* cian oscuro: la vela bajista nunca es roja */

.tfl-toro {
	position: relative;
	isolation: isolate;
}

/* --- Velas, por detrás del toro --- */

.tfl-velas {
	position: absolute;
	z-index: 0;
	top: 2%;
	right: -2%;
	width: 64%;
	height: auto;
	opacity: .85;
	pointer-events: none;
}

.tfl-velas-linea {
	opacity: .5;
	stroke-dasharray: 3 7;
	animation: tfl-linea 1.6s ease-out .5s both;
}

@keyframes tfl-linea {
	from { opacity: 0; stroke-dashoffset: 260; }
	to   { opacity: .5; stroke-dashoffset: 0; }
}

.tfl-vela {
	transform-box: fill-box;
	transform-origin: center bottom;
	animation: tfl-vela-entra .55s cubic-bezier(.22,.9,.3,1) both;
	animation-delay: var(--d, 0s);
}

@keyframes tfl-vela-entra {
	from { opacity: 0; transform: translateY(14px) scaleY(.4); }
	to   { opacity: 1; transform: none; }
}

/* --- El toro, por delante --- */

.tfl-toro figure {
	position: relative;
	z-index: 1;
	margin: 0;
}

.tfl-toro img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 0 48px rgba(0, 216, 184, .22));
	animation: tfl-flotar 9s ease-in-out infinite;
}

/* --- Aro de luz bajo las pezuñas ---
   Dos capas: una línea fina y brillante, y un halo difuso debajo. */

.tfl-toro::before,
.tfl-toro::after {
	content: "";
	position: absolute;
	z-index: 0;
	left: 14%;
	right: 10%;
	pointer-events: none;
	opacity: var(--tfl-brillo-toro, 1);
	transition: opacity .2s linear;
	display: block;
}

.tfl-toro::before {
	bottom: 7.5%;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, var(--tfl-acento) 22%, var(--tfl-cian) 50%, var(--tfl-acento) 78%, transparent);
	filter: blur(.4px);
}

.tfl-toro::after {
	bottom: 2%;
	height: 56px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(0, 216, 184, .40) 0%, rgba(0, 216, 184, .12) 45%, transparent 72%);
	filter: blur(10px);
}

@media (min-width: 782px) {
	.tfl-toro img { width: 126%; margin-left: -13%; }
	.tfl-velas { width: 58%; top: 0; right: -10%; }
}

@media (min-width: 1400px) {
	.tfl-toro img { width: 138%; margin-left: -20%; }
}

@media (max-width: 781px) {
	.tfl-velas { width: 70%; top: -4%; right: -4%; }
	.tfl-toro::after { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
	.tfl-toro img { animation: none; }
	.tfl-vela,
	.tfl-velas-linea { animation: none; opacity: 1; stroke-dashoffset: 0; }
	.tfl-velas-linea { opacity: .5; }
}

/* Los colores del SVG se definen aquí, no en atributos del propio SVG:
   var() no es válido dentro de un atributo de presentación, solo en CSS. */

.tfl-vela line {
	stroke: var(--tfl-acento);
	stroke-width: 1.6;
}

.tfl-vela rect {
	fill: var(--tfl-acento);
}

.tfl-vela--baja line { stroke: var(--tfl-vela-baja); }
.tfl-vela--baja rect { fill: var(--tfl-vela-baja); fill-opacity: .75; }

.tfl-velas-linea {
	fill: none;
	stroke: var(--tfl-cian);
	stroke-width: 1.6;
	stroke-linecap: round;
}

/* Flotación lenta del toro. Vive aquí, junto al resto de la escena. */
@keyframes tfl-flotar {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}

/* ----------------------------------------------------------------------
   Hueco de la foto de Dey
   Proporción vertical 3:4 fija. La foto se recorta para llenarla, nunca
   se deforma. Para pasarlo a cuadrado basta con aspect-ratio: 1.
   ---------------------------------------------------------------------- */

.tfl-foto {
	aspect-ratio: 3 / 2;   /* la foto de Dey es horizontal: el marco se adapta a ella */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 0;
}

.tfl-foto figure,
.tfl-foto img {
	width: 100%;
	height: 100%;
	margin: 0;
	display: block;
}

.tfl-foto img {
	object-fit: cover;
	object-position: center center;
	border-radius: inherit;
}

@media (max-width: 781px) {
	.tfl-foto { max-width: 460px; margin-inline: auto; }
}

/* ----------------------------------------------------------------------
   Icono de WhatsApp en el botón
   Va como máscara CSS, no como imagen: hereda el color del texto, pesa
   nada y no añade una petición más al servidor.
   ---------------------------------------------------------------------- */

.tfl-btn-wa .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	margin-right: .5em;
	vertical-align: -.2em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893A11.821%2011.821%200%200020.885%203.4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893A11.821%2011.821%200%200020.885%203.4%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* ----------------------------------------------------------------------
   Marca del pie: mismo tratamiento que la cabecera (Anton, mayúsculas)
   ---------------------------------------------------------------------- */

.tfl-pie .tfl-marca-pie {
	display: flex;
	align-items: center;
	gap: .7rem;
}

.tfl-pie .wp-block-site-title,
.tfl-pie .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--display), Anton, sans-serif !important;
	font-weight: 400 !important;
	font-size: 1.65rem !important;
	letter-spacing: .035em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--tfl-blanco);
}

.tfl-pie .wp-block-site-logo img {
	display: block;
	border-radius: 50%;
}

/* ----------------------------------------------------------------------
   Submenús desplegables de la cabecera
   El bloque de navegación de WordPress pinta el texto del submenú en
   negro por defecto. Sobre el fondo oscuro del tema resultaba ilegible,
   así que el desplegable va en claro: fondo casi blanco y texto negro.
   Es además el contraste correcto para accesibilidad.
   ---------------------------------------------------------------------- */

.tfl-cabecera .wp-block-navigation .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-container,
.tfl-cabecera .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: #F7F7F6;
	background-image: none;
	border: 1px solid #E2E2DF;
	border-radius: 14px;
	padding: .4rem;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .55);
	min-width: 15rem;
	overflow: hidden;
}

.tfl-cabecera .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.tfl-cabecera .wp-block-navigation__submenu-container a {
	color: #0A0A0B;
	font-weight: 600;
	border-radius: 9px;
	padding: .6rem .85rem;
	display: block;
	transition: background-color .2s ease, color .2s ease;
}

.tfl-cabecera .wp-block-navigation__submenu-container a:hover,
.tfl-cabecera .wp-block-navigation__submenu-container a:focus-visible {
	background-color: #E6E6E3;
	color: #00806E;          /* turquesa oscurecido: legible sobre claro */
	text-decoration: none;
}

/* La flecha del desplegable, del color del texto de la cabecera. */
.tfl-cabecera .wp-block-navigation__submenu-icon { fill: currentColor; }

/* ----------------------------------------------------------------------
   Cifras destacadas (trayectoria)
   El número manda; la etiqueta explica. Jerarquía por tamaño y peso,
   no por color: el texto sobre negro siempre es blanco.
   ---------------------------------------------------------------------- */

.tfl-cifra { text-align: center; }

.tfl-cifra-numero {
	font-family: var(--wp--preset--font-family--display), Anton, sans-serif;
	font-size: clamp(3rem, 7vw, 4.25rem);
	line-height: 1;
	letter-spacing: .01em;
	margin: 0;
	background: var(--tfl-degradado);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.tfl-cifra-pie {
	margin: .6rem 0 0;
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: .04em;
}

/* La tarjeta de cifra no se levanta al pasar: no es un enlace. */
.tfl-cifra:hover { transform: none; box-shadow: none; border-color: var(--tfl-borde); }

/* Rejilla de cifras: se reparte sola según quepan (3+2, 5 en fila, 2+2+1…). */
.tfl-cifras {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.tfl-cifras .tfl-cifra-numero { font-size: clamp(2.25rem, 4.5vw, 3.25rem); }
.tfl-cifras .tfl-cifra-pie { font-size: .875rem; line-height: 1.45; }

/* WordPress añade margen superior a todos los hijos menos al primero
   (regla de "flow layout"). Dentro de la rejilla eso desnivelaba las
   tarjetas: la primera parecía más alta que el resto. */
.tfl-cifras > * {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
	align-self: stretch;
}

/* La tarjeta de experiencia ocupa toda la fila: lleva texto, no un número. */
.tfl-cifra--ancha {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tfl-cifra-texto {
	margin: 0;
	font-family: var(--wp--preset--font-family--display), Anton, sans-serif;
	font-size: clamp(1.5rem, 3.2vw, 2.25rem);
	line-height: 1.15;
	letter-spacing: .01em;
	text-transform: uppercase;
	background: var(--tfl-degradado);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.tfl-cifra--ancha .tfl-cifra-pie {
	margin: 0 0 .5rem;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .8125rem;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* ----------------------------------------------------------------------
   Texto a dos columnas
   Para bloques de lectura dentro de un contenedor ancho: una sola columna
   de 1200 px da líneas larguísimas y cansa. Dos columnas mantienen la
   medida de lectura cómoda y ocupan la mitad de alto.
   ---------------------------------------------------------------------- */

.tfl-columnas-texto {
	column-count: 2;
	column-gap: var(--wp--preset--spacing--70);
}

.tfl-columnas-texto > p {
	break-inside: avoid;
	margin-top: 0;
	margin-bottom: 1.4rem;
}

.tfl-columnas-texto > p:last-child { margin-bottom: 0; }

@media (max-width: 781px) {
	.tfl-columnas-texto { column-count: 1; }
}

/* Foto centrada, con ancho contenido para que no domine la sección. */
.tfl-foto--centrada {
	max-width: 560px;
	margin-inline: auto;
}

/* ----------------------------------------------------------------------
   Catálogo de libros
   ---------------------------------------------------------------------- */

.tfl-libros {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.tfl-libros > * {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

.tfl-libro {
	display: flex;
	flex-direction: column;
}

/* El botón se queda abajo aunque las descripciones midan distinto. */
.tfl-libro .wp-block-buttons { margin-top: auto; padding-top: 1rem; }

.tfl-portada {
	margin: 0 auto .75rem;
	max-width: 190px;
}

.tfl-portada img {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 18px 32px rgba(0, 0, 0, .75));
	transition: transform .35s ease;
}

.tfl-libro:hover .tfl-portada img { transform: translateY(-6px) rotate(-1deg); }

.tfl-libro-meta {
	margin: 0;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .8125rem;
	letter-spacing: .04em;
}

.tfl-libro-precio {
	margin: .25rem 0 0;
	font-family: var(--wp--preset--font-family--display), Anton, sans-serif;
	font-size: 2rem;
	line-height: 1;
	letter-spacing: .01em;
	background: var(--tfl-degradado);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.tfl-libro:hover .tfl-portada img { transform: none; }
}

/* ----------------------------------------------------------------------
   Notas destacadas en tarjeta (dos columnas con icono)
   ---------------------------------------------------------------------- */

.tfl-notas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.tfl-notas > * {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

.tfl-nota-icono {
	margin: 0;
	font-size: 2rem;
	line-height: 1;
}

.tfl-nota h3 { margin: 0; }
.tfl-nota p:last-child { margin-bottom: 0; }

/* La nota no es un enlace: no se levanta al pasar el cursor. */
.tfl-nota:hover { transform: none; box-shadow: none; border-color: rgba(0, 216, 184, .45); }

/* El precio del pack, más grande que el de un libro suelto. */
.tfl-pack .tfl-libro-precio { font-size: clamp(2.75rem, 6vw, 4rem); }
.tfl-pack .tfl-libro-meta { opacity: .85; }

/* Formatos alternativos bajo el botón de compra. */
.tfl-formatos {
	margin: .75rem 0 0;
	font-size: .8125rem;
	line-height: 1.6;
	text-align: center;
}

.tfl-formatos a { font-weight: 600; }
.tfl-formatos a:hover { text-decoration: underline; }

/* ----------------------------------------------------------------------
   Bono de regalo dentro de la tarjeta del pack
   Fondo turquesa muy suave para separarlo del resto sin competir con el
   precio, que sigue siendo lo más llamativo de la tarjeta.
   ---------------------------------------------------------------------- */

.tfl-bono {
	background: var(--tfl-acento-suave, #0F2E29);
	border: 1px dashed rgba(0, 216, 184, .45);
	max-width: 34rem;
	margin-inline: auto;
}

.tfl-bono-etiqueta {
	margin: 0;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tfl-acento);
}

.tfl-bono-titulo {
	margin: .35rem 0 0;
	font-size: 1.25rem;
	font-weight: 700;
}

/* ----------------------------------------------------------------------
   Páginas con titular propio
   La plantilla pinta el nombre de la página como H1. En las páginas de
   venta ese nombre ("Libros") no vende nada, así que se oculta y el
   titular va dentro del contenido, donde se puede redactar y destacar
   una palabra con el degradado. El nombre sigue existiendo para el menú,
   la URL y el navegador.

   Se resuelve con una plantilla propia (templates/page-libros.html), no
   escondiendo el título con CSS: un H1 oculto sigue existiendo en el HTML
   y Google lo lee, de modo que la página acabaría con dos H1.
   ---------------------------------------------------------------------- */


/* Salto de línea forzado en un titular. En móvil se anula: ahí el ancho
   manda y el texto debe fluir solo, o se desborda. */
@media (max-width: 599px) {
	br.tfl-corte { display: none; }
}

/* Periodicidad junto al precio ("/mes"), en cuerpo normal y no en Anton. */
.tfl-periodo {
	font-family: var(--wp--preset--font-family--cuerpo), sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	-webkit-text-fill-color: var(--tfl-blanco);
	color: var(--tfl-blanco);
}

/* Listas dentro de las tarjetas de nota. */
.tfl-nota .wp-block-list {
	margin: 0;
	padding-left: 1.1rem;
}

.tfl-nota .wp-block-list li { margin-bottom: .6rem; }
.tfl-nota .wp-block-list li:last-child { margin-bottom: 0; }
.tfl-nota .wp-block-list li::marker { color: var(--tfl-acento); }

/* ----------------------------------------------------------------------
   Pilares de formación
   ---------------------------------------------------------------------- */

.tfl-pilar { display: flex; flex-direction: column; }

.tfl-pilar-numero {
	margin: 0;
	font-family: var(--wp--preset--font-family--display), Anton, sans-serif;
	font-size: 2.5rem;
	line-height: 1;
	background: var(--tfl-degradado);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.tfl-pilar-bajada {
	margin: 0;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tfl-pilar h3 { margin: .25rem 0 0; }
.tfl-pilar p:last-child { margin-bottom: 0; }
.tfl-pilar:hover { transform: none; box-shadow: none; border-color: rgba(0, 216, 184, .45); }

/* Distintivo junto al precio. Hay que devolverle el color al texto, porque
   el precio va con degradado recortado y lo heredaría transparente. */
.tfl-fundador {
	display: inline-block;
	vertical-align: middle;
	margin-left: .6rem;
	padding: .35rem .85rem;
	border-radius: 999px;
	background: var(--tfl-degradado);
	border: 0;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tfl-sobre-acento);
	-webkit-text-fill-color: var(--tfl-sobre-acento);
	white-space: nowrap;
}

@media (max-width: 599px) {
	.tfl-fundador { display: block; width: fit-content; margin: .9rem auto 0; }
}

/* ----------------------------------------------------------------------
   Retrato redondo del hero (páginas de venta)
   ---------------------------------------------------------------------- */

.tfl-retrato figure { margin: 0; position: relative; }

.tfl-retrato img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 50%;
	border: 2px solid var(--tfl-acento);
	box-shadow: 0 0 60px rgba(0, 216, 184, .22), 0 24px 50px rgba(0, 0, 0, .6);
	animation: tfl-flotar 10s ease-in-out infinite;
}

@media (max-width: 781px) {
	.tfl-retrato { max-width: 320px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.tfl-retrato img { animation: none; }
}

/* El retrato no debe crecer más que esto: por encima compite con el
   titular en vez de acompañarlo. */
.tfl-retrato { max-width: 340px; margin-left: auto; }

/* ----------------------------------------------------------------------
   Hero de dos columnas (titular + retrato)
   WordPress apila las columnas a 781 px. Entre 782 y 1023 px el titular
   se queda sin sitio y se parte en demasiadas líneas, así que apilamos
   antes: el titular manda, el retrato puede esperar a estar debajo.
   ---------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.tfl-hero-cols { flex-wrap: wrap !important; }
	.tfl-hero-cols > .wp-block-column { flex-basis: 100% !important; }
	.tfl-hero-cols .tfl-retrato { max-width: 300px; margin-inline: auto; }
}

/* Versión pequeña del distintivo, para dentro de una tarjeta. */
.tfl-fundador--mini {
	display: block;
	width: fit-content;
	margin: .7rem 0 0;
	padding: .28rem .7rem;
	font-size: .68rem;
	letter-spacing: .1em;
}

/* El retrato de cierre va centrado y contenido: acompaña a la decisión
   de compra, no compite con ella. */
.tfl-retrato--cierre {
	max-width: 260px;
	margin-inline: auto;
}

/* ----------------------------------------------------------------------
   Rótulo de sección en Anton, subrayado
   Alternativa a la píldora cuando el texto debe leerse como un rótulo y
   no como una etiqueta: sin recuadro, centrado y con subrayado turquesa.
   ---------------------------------------------------------------------- */

.tfl-rotulo {
	margin: 0 0 1.25rem;
	font-family: var(--wp--preset--font-family--display), Anton, sans-serif;
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1.2;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: var(--tfl-acento);
	text-decoration-thickness: 2px;
	text-underline-offset: .22em;
}

/* Etapas del recorrido: cinco tarjetas estrechas en una fila. */
.tfl-etapas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.tfl-etapas > * { margin-block-start: 0 !important; margin-top: 0 !important; }
.tfl-etapas .tfl-pilar-numero { font-size: 2rem; }

/* ----------------------------------------------------------------------
   Retículas anidadas
   Las plantillas de página ya envuelven el contenido en .tfl-reticula.
   Si dentro hay un recuadro que también la usa, se pintan dos mallas
   superpuestas y se ve una cuadrícula doble. La interior no dibuja
   líneas: conserva el resplandor, el borde y el espaciado.
   ---------------------------------------------------------------------- */

.tfl-reticula .tfl-reticula::before { display: none; }

/* ----------------------------------------------------------------------
   Reseñas de Trustpilot
   Tarjeta con estrellas, cita textual y autor. Sin fecha: la fuente
   verificable es el enlace al perfil, no el dato que ponemos nosotros.
   ---------------------------------------------------------------------- */

.tfl-resenas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.tfl-resenas > * { margin-block-start: 0 !important; margin-top: 0 !important; }

.tfl-resena {
	display: flex;
	flex-direction: column;
	position: relative;
}

.tfl-resena:hover { transform: none; box-shadow: none; border-color: rgba(0, 216, 184, .45); }

.tfl-estrellas {
	margin: 0 0 .9rem;
	font-size: 1.05rem;
	letter-spacing: .22em;
	color: var(--tfl-acento);
	line-height: 1;
}

.tfl-resena-titulo {
	margin: 0 0 .6rem;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

.tfl-resena-texto {
	margin: 0 0 1.25rem;
	font-size: 1rem;
	line-height: 1.65;
}

.tfl-resena-autor {
	margin: auto 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--tfl-borde);
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .8125rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.tfl-resenas-pie {
	margin-top: var(--wp--preset--spacing--40);
	font-size: .875rem;
	text-align: center;
}

.tfl-resenas-aviso {
	margin-top: .5rem;
	font-size: .8125rem;
	line-height: 1.6;
	text-align: center;
	opacity: .85;
}

/* ----------------------------------------------------------------------
   Demostración de Chart & Mind
   Recreación de la interfaz de la app en HTML y CSS, no una captura:
   se lee nítida en cualquier pantalla, pesa unos pocos bytes y se
   actualiza cambiando texto, no reemplazando una imagen.
   ---------------------------------------------------------------------- */

.tfl-app {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.tfl-app-panel {
	background: var(--tfl-superficie);
	border: 1px solid var(--tfl-borde);
	border-radius: 16px;
	padding: 1.4rem;
	overflow-x: auto;
}

.tfl-app-cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.1rem;
	padding-bottom: .8rem;
	border-bottom: 1px solid var(--tfl-borde);
}

.tfl-app-titulo {
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tfl-app-r {
	font-family: var(--wp--preset--font-family--display), Anton, sans-serif;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--tfl-acento);
}

.tfl-app-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: .875rem;
}

.tfl-app-tabla th {
	text-align: left;
	padding: .35rem .6rem .6rem 0;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .8;
}

.tfl-app-tabla td {
	padding: .65rem .6rem .65rem 0;
	border-top: 1px solid var(--tfl-borde);
}

.tfl-app-tabla td:last-child,
.tfl-app-tabla th:last-child { text-align: right; padding-right: 0; }

.tfl-pos { color: var(--tfl-acento); font-weight: 700; }
.tfl-neg { color: var(--tfl-vela-baja); font-weight: 700; }

.tfl-app-alarma,
.tfl-app-nota {
	margin: 0 0 .9rem;
	font-size: .9375rem;
	line-height: 1.6;
}

.tfl-app-alarma {
	padding: .85rem 1rem;
	border-radius: 12px;
	background: var(--tfl-acento-suave, #0F2E29);
	border: 1px dashed rgba(0, 216, 184, .45);
}

.tfl-app-nota:last-child { margin-bottom: 0; }

.tfl-app-pie {
	margin-top: 1rem;
	font-size: .8125rem;
	text-align: center;
	opacity: .8;
}

/* Aviso destacado (correo de Skool, condiciones…) */
.tfl-aviso {
	background: var(--tfl-superficie);
	border-color: rgba(255, 107, 94, .4);
}

.tfl-aviso:hover { transform: none; box-shadow: none; border-color: rgba(255, 107, 94, .4); }
.tfl-aviso h3 { margin: 0; }
.tfl-aviso p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------------
   Formas de acceso (Chart & Mind)
   Dos tarjetas arriba y una a todo el ancho debajo, que es la que lleva
   la advertencia del correo y necesita más espacio para leerse.
   ---------------------------------------------------------------------- */

.tfl-accesos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.tfl-accesos > * { margin-block-start: 0 !important; margin-top: 0 !important; }

.tfl-acceso--ancho { grid-column: 1 / -1; }

.tfl-aviso-linea {
	margin: 1rem 0 0;
	padding: .9rem 1.1rem;
	border-radius: 12px;
	background: var(--tfl-superficie-2);
	border: 1px dashed rgba(255, 107, 94, .45);
	font-size: .9375rem;
	line-height: 1.6;
}

/* ----------------------------------------------------------------------
   Formulario de contacto (Fluent Forms) sobre fondo oscuro
   El plugin trae estilos pensados para fondo claro: campos blancos y
   texto negro. Aquí se adaptan al tema sin tocar el plugin.
   ---------------------------------------------------------------------- */

.tfl-formulario:hover { transform: none; box-shadow: none; border-color: var(--tfl-borde); }

.tfl-formulario .ff-el-group { margin-bottom: 1.25rem; }

.tfl-formulario .ff-el-input--label label,
.tfl-formulario label {
	color: var(--tfl-blanco);
	font-weight: 600;
	font-size: .9375rem;
	margin-bottom: .45rem;
}

.tfl-formulario input[type="text"],
.tfl-formulario input[type="email"],
.tfl-formulario input[type="tel"],
.tfl-formulario textarea,
.tfl-formulario select {
	width: 100%;
	background: var(--tfl-superficie-2);
	border: 1px solid var(--tfl-borde);
	border-radius: 12px;
	color: var(--tfl-blanco);
	padding: .85rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.tfl-formulario textarea { min-height: 9rem; resize: vertical; }

.tfl-formulario input::placeholder,
.tfl-formulario textarea::placeholder { color: rgba(250, 250, 249, .45); }

.tfl-formulario input:focus,
.tfl-formulario textarea:focus,
.tfl-formulario select:focus {
	outline: none;
	border-color: var(--tfl-acento);
	box-shadow: 0 0 0 3px rgba(0, 216, 184, .18);
}

.tfl-formulario .ff-btn-submit,
.tfl-formulario button[type="submit"] {
	background: var(--tfl-degradado);
	color: var(--tfl-sobre-acento);
	border: 0;
	border-radius: 999px;
	padding: .95rem 2rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: box-shadow .3s ease, transform .3s ease;
}

.tfl-formulario .ff-btn-submit:hover,
.tfl-formulario button[type="submit"]:hover {
	box-shadow: 0 0 34px rgba(0, 216, 184, .38);
	transform: translateY(-2px);
}

.tfl-formulario .ff-el-is-error input,
.tfl-formulario .ff-el-is-error textarea { border-color: var(--tfl-alerta, #FF6B5E); }

.tfl-formulario .error,
.tfl-formulario .text-danger { color: #FF6B5E; font-size: .875rem; }

.tfl-formulario .ff-message-success {
	background: var(--tfl-acento-suave, #0F2E29);
	border: 1px solid rgba(0, 216, 184, .45);
	border-radius: 12px;
	padding: 1rem 1.2rem;
	color: var(--tfl-blanco);
}

/* Nombre y apellidos, lado a lado. */
@media (min-width: 600px) {
	.tfl-formulario .ff-name-field-wrapper { display: flex; gap: 1rem; }
	.tfl-formulario .ff-name-field-wrapper > div { flex: 1; }
}

/* ----------------------------------------------------------------------
   Cursos gratuitos
   Cada curso es una cabecera (número, título, bajada) y una retícula de
   clases. Cada clase es una tarjeta entera enlazada que abre el vídeo en
   YouTube: así la página pesa una miniatura por clase en lugar de un
   reproductor, y el tráfico sigue sumando en el canal.
   ---------------------------------------------------------------------- */

.tfl-curso-titulo {
	margin: 0 0 .5rem;
	font-size: clamp(1.5rem, 3.2vw, 2.125rem);
	line-height: 1.15;
}

.tfl-curso-bajada {
	margin: 0;
	font-size: 1.0625rem;
	opacity: .8;
	max-width: 54ch;
}

.tfl-clases {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: 1.25rem;
	margin-top: 1.75rem;
}

/* WordPress añade margen superior a todos los hijos menos al primero */
.tfl-clases > * {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

.tfl-clase {
	display: flex;
	flex-direction: column;
	background: var(--tfl-superficie);
	border: 1px solid var(--tfl-borde);
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color .25s ease, transform .25s ease;
}

.tfl-clase:hover,
.tfl-clase:focus-visible {
	border-color: rgba(0, 216, 184, .55);
	transform: translateY(-4px);
	text-decoration: none;
	color: inherit;
}

/* La miniatura de YouTube es 4:3 con bandas negras: se recorta a 16:9 */
.tfl-clase-miniatura {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--tfl-superficie-2);
	overflow: hidden;
}

.tfl-clase-miniatura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: .9;
	transition: transform .4s ease, opacity .25s ease;
}

.tfl-clase:hover .tfl-clase-miniatura img {
	transform: scale(1.05);
	opacity: 1;
}

/* Triángulo de reproducción dibujado con CSS, sin cargar ninguna imagen */
.tfl-clase-miniatura::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent var(--tfl-blanco);
	filter: drop-shadow(0 0 10px rgba(0, 0, 0, .7));
	transition: border-left-color .25s ease;
}

.tfl-clase:hover .tfl-clase-miniatura::after {
	border-left-color: var(--tfl-acento);
}

.tfl-clase-cuerpo {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: 1rem 1.125rem 1.125rem;
}

.tfl-clase-num {
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tfl-acento);
}

.tfl-clase-nombre {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.tfl-clases-nota {
	margin-top: 1rem;
	font-size: .875rem;
	opacity: .6;
}

@media (prefers-reduced-motion: reduce) {
	.tfl-clase,
	.tfl-clase-miniatura img { transition: none; }
	.tfl-clase:hover { transform: none; }
	.tfl-clase:hover .tfl-clase-miniatura img { transform: none; }
}

/* ----------------------------------------------------------------------
   Separador en degradado
   Línea fina con los tonos del logo, desvanecida en los extremos para que
   no choque con el borde de la retícula. Separa cada curso del anterior.
   ---------------------------------------------------------------------- */

hr.tfl-separador {
	height: 1px;
	border: 0;
	background: var(--tfl-degradado);
	opacity: .4;
	margin-top: var(--wp--preset--spacing--80);
	margin-bottom: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* El primero va pegado a la portada, con algo menos de aire */
hr.tfl-separador:first-of-type {
	margin-top: var(--wp--preset--spacing--70);
}

/* ----------------------------------------------------------------------
   Páginas legales
   Texto largo para leer, no para escanear: medida de línea más corta,
   títulos de sección marcados y listas con aire.
   ---------------------------------------------------------------------- */

.tfl-legal-titulo {
	margin: var(--wp--preset--spacing--70) 0 var(--wp--preset--spacing--30);
	font-size: clamp(1.25rem, 2.6vw, 1.625rem);
	line-height: 1.25;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--tfl-borde);
}

.tfl-legal-ficha p,
.tfl-legal-aviso p { margin: 0; }

.tfl-legal-ficha p + p { margin-top: .75rem; }

.tfl-legal-ficha strong {
	display: inline-block;
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tfl-acento);
	margin-bottom: .15rem;
}

.tfl-legal-ficha:hover,
.tfl-legal-aviso:hover {
	transform: none;
	box-shadow: none;
}

/* Lo que no puede pasar desapercibido: aviso de riesgo, correo del acceso */
.tfl-legal-aviso {
	border-left: 3px solid var(--tfl-acento);
	background: var(--tfl-acento-suave);
}

.tfl-legal-aviso:hover { border-color: var(--tfl-borde); border-left-color: var(--tfl-acento); }

.tfl-legal-fecha {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--tfl-borde);
	font-size: .875rem;
	opacity: .6;
}

/* ----------------------------------------------------------------------
   Banner de consentimiento de cookies
   Fijo abajo, por encima del botón flotante de WhatsApp. Entra con una
   transición corta y no tapa el contenido en móvil.
   ---------------------------------------------------------------------- */

.tfl-cookies {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000000;
	padding: 1.25rem var(--wp--preset--spacing--50);
	background: rgba(10, 10, 11, .96);
	border-top: 1px solid var(--tfl-borde);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 -18px 40px rgba(0, 0, 0, .55);
	transform: translateY(100%);
	transition: transform .3s ease;
}

.tfl-cookies--visible { transform: none; }

.tfl-cookies[hidden] { display: none; }

.tfl-cookies-caja {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.tfl-cookies-texto {
	flex: 1 1 22rem;
	margin: 0;
	font-size: .9375rem;
	line-height: 1.55;
	color: var(--tfl-blanco);
}

.tfl-cookies-texto a {
	color: var(--tfl-acento);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.tfl-cookies-texto a:hover { color: var(--tfl-acento-2, var(--tfl-cian)); }

.tfl-cookies-botones {
	display: flex;
	gap: .75rem;
	flex-wrap: wrap;
}

.tfl-cookies-botones button {
	font-family: inherit;
	font-size: .9375rem;
	font-weight: 700;
	padding: .7rem 1.4rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
	white-space: nowrap;
}

.tfl-cookies-aceptar {
	border: 1px solid transparent;
	background: var(--tfl-acento);
	color: var(--tfl-negro);
}

.tfl-cookies-aceptar:hover { background: var(--tfl-acento-2, #00C2A4); }

.tfl-cookies-rechazar {
	border: 1px solid var(--tfl-borde);
	background: transparent;
	color: var(--tfl-blanco);
}

.tfl-cookies-rechazar:hover { border-color: var(--tfl-acento); color: var(--tfl-acento); }

.tfl-cookies-botones button:focus-visible {
	outline: 2px solid var(--tfl-acento);
	outline-offset: 3px;
}

/* En móvil los botones ocupan el ancho y van debajo del texto */
@media (max-width: 599px) {
	.tfl-cookies { padding: 1rem var(--wp--preset--spacing--40); }
	.tfl-cookies-caja { gap: 1rem; }
	.tfl-cookies-botones { width: 100%; }
	.tfl-cookies-botones button { flex: 1; }
}

/* El botón flotante de WhatsApp se aparta mientras el banner está puesto.
   La separación sale de la altura real del banner, que el script mide y
   guarda en --tfl-cookies-alto: en móvil el banner es más alto y con un
   número fijo el botón quedaba flotando en medio de la página. */
.ht-ctc { transition: bottom .3s ease; }

body:has(.tfl-cookies--visible) .ht-ctc {
	bottom: calc(var(--tfl-cookies-alto, 5rem) + 1rem) !important;
}

@media (prefers-reduced-motion: reduce) {
	.ht-ctc { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tfl-cookies { transition: none; }
}

/* ----------------------------------------------------------------------
   Nota del regalo de bienvenida
   Va a la derecha del botón, con una flecha que lo señala. En pantallas
   estrechas cae debajo y la flecha gira para seguir apuntando al botón.
   ---------------------------------------------------------------------- */

.tfl-regalo-linea > * { margin-block-start: 0 !important; margin-top: 0 !important; }

.tfl-regalo {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	margin: 0;
	padding-left: 2.6rem;
	position: relative;
	line-height: 1.35;
}

.tfl-regalo::before {
	content: "\2192";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.6rem;
	line-height: 1;
	color: var(--tfl-acento);
	animation: tfl-flecha 1.8s ease-in-out infinite;
}

@keyframes tfl-flecha {
	0%, 100% { transform: translateY(-50%) translateX(0); }
	50%      { transform: translateY(-50%) translateX(-5px); }
}

.tfl-regalo strong {
	font-size: 1rem;
	font-weight: 700;
	color: var(--tfl-blanco);
}

.tfl-regalo span {
	font-size: .875rem;
	opacity: .65;
}

@media (max-width: 599px) {
	.tfl-regalo {
		padding-left: 0;
		padding-top: 2.2rem;
	}
	.tfl-regalo::before {
		left: 1.6rem;
		top: 0;
		transform: rotate(-90deg);
		animation: tfl-flecha-movil 1.8s ease-in-out infinite;
	}
	@keyframes tfl-flecha-movil {
		0%, 100% { transform: rotate(-90deg) translateX(0); }
		50%      { transform: rotate(-90deg) translateX(5px); }
	}
}

@media (prefers-reduced-motion: reduce) {
	.tfl-regalo::before { animation: none; }
}

/* ----------------------------------------------------------------------
   Portada de la guía en la página del recurso
   Se muestra inclinada y con sombra, como un documento sobre la mesa.
   ---------------------------------------------------------------------- */

.tfl-portada-guia img {
	display: block;
	width: 100%;
	max-width: 340px;
	margin-inline: auto;
	border: 1px solid var(--tfl-borde);
	border-radius: 6px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 216, 184, .12);
	transform: rotate(-2.5deg);
	transition: transform .4s ease;
}

.tfl-portada-guia img:hover { transform: rotate(0deg) translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
	.tfl-portada-guia img { transition: none; }
	.tfl-portada-guia img:hover { transform: rotate(-2.5deg); }
}

/* ----------------------------------------------------------------------
   Cabecera de la página del recurso
   Texto a la izquierda y portada a la derecha. No reutiliza .tfl-hero-cols
   porque aquélla espera columnas de WordPress y aquí son grupos normales.
   ---------------------------------------------------------------------- */

@media (min-width: 900px) {
	.tfl-recurso-hero {
		display: grid;
		grid-template-columns: 1.1fr 0.9fr;
		align-items: center;
		gap: var(--wp--preset--spacing--70);
	}

	/* WordPress añade margen superior a todos los hijos menos al primero */
	.tfl-recurso-hero > * {
		margin-block-start: 0 !important;
		margin-top: 0 !important;
	}

	.tfl-recurso-hero .tfl-portada-guia img { max-width: 100%; }
}

@media (max-width: 899px) {
	.tfl-recurso-hero .tfl-portada-guia {
		margin-top: var(--wp--preset--spacing--60);
	}
}

/* ----------------------------------------------------------------------
   Blog
   Listado de artículos y página del artículo. Medida de línea más corta
   que en el resto del sitio: aquí se lee seguido, no se escanea.
   ---------------------------------------------------------------------- */

.tfl-entradas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 1.5rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* WordPress añade margen superior a todos los hijos menos al primero */
.tfl-entradas > * {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

.tfl-entrada {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tfl-entrada-fecha {
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tfl-acento);
	margin: 0;
}

.tfl-entrada-titulo { margin: 0; line-height: 1.25; }

.tfl-entrada-titulo a {
	color: var(--tfl-blanco);
	text-decoration: none;
	border: 0;
}

.tfl-entrada-titulo a:hover { color: var(--tfl-acento); }

.tfl-entrada-extracto {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	opacity: .72;
}

/* ---- El artículo ---- */

.tfl-articulo :where(p, li) {
	font-size: 1.0625rem;
	line-height: 1.75;
}

.tfl-articulo :where(h2) {
	margin-top: var(--wp--preset--spacing--70);
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	line-height: 1.2;
}

.tfl-articulo :where(h3) {
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: 1.1875rem;
}

.tfl-articulo blockquote {
	margin: var(--wp--preset--spacing--60) 0;
	padding: 0 0 0 1.5rem;
	border-left: 3px solid var(--tfl-acento);
	font-size: 1.1875rem;
	line-height: 1.6;
}

.tfl-articulo blockquote p:last-child { margin-bottom: 0; }

.tfl-entrada-imagen img {
	width: 100%;
	height: auto;
	border-radius: 14px;
	border: 1px solid var(--tfl-borde);
	margin-bottom: var(--wp--preset--spacing--60);
}

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

.tfl-paginacion {
	margin-top: var(--wp--preset--spacing--70);
	gap: .75rem;
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .875rem;
}

.tfl-paginacion a,
.tfl-paginacion .page-numbers {
	color: var(--tfl-blanco);
	text-decoration: none;
	padding: .4rem .7rem;
	border: 1px solid var(--tfl-borde);
	border-radius: 8px;
}

.tfl-paginacion a:hover { border-color: var(--tfl-acento); color: var(--tfl-acento); }

.tfl-paginacion .current {
	border-color: var(--tfl-acento);
	color: var(--tfl-acento);
}

/* ----------------------------------------------------------------------
   Imagen de la entrada en el listado
   Va a sangre arriba de la tarjeta, por eso el relleno está en el cuerpo
   y no en el grupo exterior.
   ---------------------------------------------------------------------- */

.tfl-entrada { overflow: hidden; padding: 0; }

.tfl-entrada-miniatura { margin: 0; }

.tfl-entrada-miniatura img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform .4s ease;
}

.tfl-entrada:hover .tfl-entrada-miniatura img { transform: scale(1.04); }

/* Sin imagen, la tarjeta sigue cuadrando: el hueco no se dibuja */
.tfl-entrada-miniatura:empty { display: none; }

.tfl-entrada-cuerpo {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	flex: 1;
}

.tfl-entrada-cuerpo > * { margin-block-start: 0 !important; margin-top: 0 !important; }

@media (prefers-reduced-motion: reduce) {
	.tfl-entrada-miniatura img { transition: none; }
	.tfl-entrada:hover .tfl-entrada-miniatura img { transform: none; }
}