/* ===========================================================================
   Tulu Lab — capa visual del tema.
   El sistema (colores, tipografías, tamaños, espaciados) vive en theme.json,
   porque eso es lo que el editor de WordPress deja tocar sin código. Acá va
   solo lo que el editor no puede expresar: luces de fondo, el mockup del CRM,
   el bento, el sticky del proceso y el movimiento.
   Todas las clases llevan prefijo tl- para no chocar con los bloques.
   =========================================================================== */

:root {
	--tl-curva: cubic-bezier(0.16, 1, 0.3, 1);
	--tl-rapido: 0.22s;
	--tl-medio: 0.45s;
	--tl-borde: rgba(255, 255, 255, 0.09);
	--tl-borde-fuerte: rgba(255, 255, 255, 0.16);
	--tl-radio: 14px;
	--tl-radio-chico: 9px;
	--tl-ancho: 1180px;
}

/* ── Base ─────────────────────────────────────────────────────────────── */

html {
	scroll-behavior: smooth;
	/* El header fijo no puede tapar el título de la sección al navegar. */
	scroll-padding-top: 90px;
	-webkit-text-size-adjust: 100%;
	/* El fondo va TAMBIÉN acá, no solo en el body. El navegador suele copiar
	   el fondo del body al lienzo, pero deja de hacerlo con el zoom alto, con
	   ciertas extensiones o al rebotar el scroll: ahí aparece una franja
	   blanca al costado y el sitio se ve partido al medio. */
	background: #07080a;
	min-height: 100%;
}

body {
	/* Nunca más angosto que un celular: si algo (una extensión, un traductor,
	   un zoom raro) intentara encogerlo, el contenido se acomoda en vez de
	   quedar en una columna de la nada. */
	min-width: 320px;
	width: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'cv01', 'cv02', 'ss03';
	overflow-x: hidden;
}

/* Un título que parte palabras a la mitad arruina cualquier diseño. */
h1,
h2,
h3 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

:where(a, button, summary, input, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--acento);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background: rgba(0, 208, 132, 0.28);
	color: #fff;
}

/* ── Luz de fondo ──────────────────────────────────────────────────────
   Dos capas fijas: una grilla muy tenue que le da textura al negro, y un
   foco de luz arriba que hace que la página no se vea plana. Van en el body
   con pseudo-elementos para no ensuciar el marcado editable. */

body::before,
body::after {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

body::before {
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
	background-size: 72px 72px;
	/* Se desvanece hacia abajo: arriba da textura, abajo estorbaría. */
	-webkit-mask-image: radial-gradient(130% 80% at 50% 0%, #000 0%, transparent 72%);
	mask-image: radial-gradient(130% 80% at 50% 0%, #000 0%, transparent 72%);
}

body::after {
	background:
		radial-gradient(60% 42% at 50% -6%, rgba(0, 208, 132, 0.1) 0%, transparent 62%),
		radial-gradient(42% 30% at 82% 6%, rgba(90, 160, 255, 0.05) 0%, transparent 70%);
}

.wp-site-blocks {
	position: relative;
	z-index: 1;
}

/* ── Contenedor y secciones ───────────────────────────────────────────── */

.tl-ancho {
	width: 100%;
	max-width: var(--tl-ancho);
	margin-inline: auto;
}

.tl-seccion {
	position: relative;
	padding-block: clamp(5rem, 9vw, 8.5rem);
}

.tl-seccion + .tl-seccion,
.tl-confianza + .tl-seccion {
	padding-top: 0;
}

/* Línea divisoria que se apaga en los extremos: un borde recto de punta a
   punta se ve barato, este truco es lo que hace que parezca hecho a mano. */
.tl-linea-suave {
	height: 1px;
	border: 0;
	margin: 0;
	background: linear-gradient(to right, transparent, var(--tl-borde-fuerte) 18%, var(--tl-borde-fuerte) 82%, transparent);
}

/* ── Etiqueta de sección ──────────────────────────────────────────────── */

.tl-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-tenue);
	margin-bottom: 1.25rem;
}

.tl-kicker::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--acento);
	box-shadow: 0 0 0 4px rgba(0, 208, 132, 0.14);
}

/* ── Encabezado de sección: título a la izquierda, bajada a la derecha ── */

.tl-cabeza {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.tl-cabeza > :last-child {
	padding-bottom: 0.4rem;
}

.tl-bajada {
	color: var(--wp--preset--color--texto-tenue);
	font-size: var(--wp--preset--font-size--mediano);
	max-width: 46ch;
}

@media (max-width: 860px) {
	.tl-cabeza {
		grid-template-columns: 1fr;
		align-items: start;
	}
}

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

a.tl-boton {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.5rem;
	border-radius: 11px;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
	white-space: nowrap;
	transition: transform var(--tl-rapido) var(--tl-curva), background-color var(--tl-rapido),
		border-color var(--tl-rapido), box-shadow var(--tl-rapido);
}

a.tl-boton:active {
	transform: translateY(1px);
}

a.tl-boton-primario {
	background: var(--wp--preset--color--texto);
	color: #06070a;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 30px -12px rgba(0, 0, 0, 0.9);
}

a.tl-boton-primario:hover {
	background: #fff;
	transform: translateY(-2px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 18px 40px -14px rgba(0, 0, 0, 0.95);
}

a.tl-boton-secundario {
	background: rgba(255, 255, 255, 0.035);
	color: var(--wp--preset--color--texto);
	border: 1px solid var(--tl-borde);
	backdrop-filter: blur(6px);
}

a.tl-boton-secundario:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: var(--tl-borde-fuerte);
	transform: translateY(-2px);
}

a.tl-boton .tl-flecha {
	transition: transform var(--tl-rapido) var(--tl-curva);
}

a.tl-boton:hover .tl-flecha {
	transform: translateX(3px);
}

a.tl-boton-chico {
	padding: 0.68rem 1.1rem;
	font-size: 0.875rem;
}

/* ── Encabezado del sitio ─────────────────────────────────────────────── */

.tl-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(7, 8, 10, 0.72);
	backdrop-filter: saturate(150%) blur(14px);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--tl-medio), background-color var(--tl-medio);
}

/* La línea de abajo aparece solo cuando ya se bajó: arriba del todo el
   encabezado tiene que fundirse con el hero. La clase la pone el JS. */
.tl-header.tl-pegado {
	border-bottom-color: var(--tl-borde);
	background: rgba(7, 8, 10, 0.86);
}

.tl-header-fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	height: 72px;
}

.tl-marca {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--texto);
}

.tl-marca-icono {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: linear-gradient(145deg, #ffffff 0%, #c9d2d8 100%);
	color: #06070a;
	font-size: 0.875rem;
	font-weight: 700;
	box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.8);
}

.tl-nav {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.tl-nav a:not(.tl-boton) {
	position: relative;
	padding: 0.5rem 0.85rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--texto-tenue);
	border-radius: 8px;
	transition: color var(--tl-rapido), background-color var(--tl-rapido);
}

.tl-nav a:not(.tl-boton):hover {
	color: var(--wp--preset--color--texto);
	background: rgba(255, 255, 255, 0.045);
}

.tl-nav .tl-boton {
	margin-left: 0.6rem;
}

@media (max-width: 880px) {
	.tl-nav a:not(.tl-boton) {
		display: none;
	}
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.tl-hero {
	position: relative;
	padding-top: clamp(4.5rem, 9vw, 8rem);
	padding-bottom: 0;
	text-align: center;
}

.tl-hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0.9rem 0.45rem 0.5rem;
	border: 1px solid var(--tl-borde);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.03);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--texto-suave);
	margin-bottom: 2rem;
}

.tl-hero-pill b {
	padding: 0.2rem 0.55rem;
	border-radius: 100px;
	background: rgba(0, 208, 132, 0.14);
	color: var(--wp--preset--color--acento-claro);
	font-weight: 600;
	font-size: 0.75rem;
}

.tl-hero h1 {
	max-width: 17ch;
	margin-inline: auto;
}

/* El degradado del título es casi imperceptible y es justo lo que hace que
   se vea impreso en vez de "texto blanco sobre negro". */
.tl-hero h1 {
	background: linear-gradient(170deg, #ffffff 0%, #ffffff 42%, #9aa4ad 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.tl-hero-bajada {
	max-width: 56ch;
	margin: 1.75rem auto 0;
	font-size: var(--wp--preset--font-size--mediano);
	color: var(--wp--preset--color--texto-tenue);
}

.tl-hero-acciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2.5rem;
}

.tl-hero-nota {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.75rem;
	margin-top: 2.25rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--texto-tenue);
}

.tl-hero-nota span {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.tl-hero-nota span::before {
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--acento);
	opacity: 0.8;
}

/* ── Mockup del CRM ───────────────────────────────────────────────────── */

.tl-mock-zona {
	position: relative;
	/* El hero está centrado y el mockup vive adentro: sin esto hereda el
	   centrado y la lista de conversaciones queda toda corrida al medio. */
	text-align: left;
	margin-top: clamp(3rem, 6vw, 5rem);
	/* Monta sobre la sección siguiente: es lo que da sensación de profundidad. */
	margin-bottom: clamp(-7rem, -8vw, -4rem);
	perspective: 1800px;
}

.tl-mock-zona::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 8%;
	width: 76%;
	height: 70%;
	transform: translateX(-50%);
	background: radial-gradient(60% 50% at 50% 50%, rgba(0, 208, 132, 0.2) 0%, transparent 70%);
	filter: blur(60px);
	pointer-events: none;
}

.tl-mock {
	position: relative;
	border-radius: 16px;
	border: 1px solid var(--tl-borde-fuerte);
	background: linear-gradient(180deg, #0f1317 0%, #0a0c0f 100%);
	box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	transform: rotateX(4deg) scale(0.995);
	transform-origin: top center;
}

.tl-mock-barra {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--tl-borde);
	background: rgba(255, 255, 255, 0.022);
}

.tl-mock-puntos {
	display: inline-flex;
	gap: 6px;
	flex: 0 0 auto;
}

.tl-mock-puntos i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
}

.tl-mock-titulo {
	flex: 1;
	text-align: center;
	font-size: 0.75rem;
	color: var(--wp--preset--color--texto-tenue);
	letter-spacing: 0.01em;
}

.tl-mock-app {
	display: grid;
	grid-template-columns: 186px minmax(0, 1fr) 220px;
	min-height: 420px;
	font-size: 0.8125rem;
}

.tl-mock-lado {
	border-right: 1px solid var(--tl-borde);
	padding: 1rem 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	background: rgba(0, 0, 0, 0.25);
}

.tl-mock-lado .tl-mock-marca {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.5rem 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--texto);
	font-size: 0.875rem;
}

.tl-mock-lado .tl-mock-marca i {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: #fff;
	color: #06070a;
	font-size: 0.6875rem;
	font-weight: 700;
	font-style: normal;
}

.tl-mock-lado span {
	padding: 0.5rem;
	border-radius: 7px;
	color: var(--wp--preset--color--texto-tenue);
}

.tl-mock-lado span.activo {
	background: rgba(255, 255, 255, 0.06);
	color: var(--wp--preset--color--texto);
}

.tl-mock-estado {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
	font-size: 0.75rem;
	color: var(--wp--preset--color--acento-claro);
}

.tl-punto {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--acento);
	box-shadow: 0 0 0 3px rgba(0, 208, 132, 0.18);
	flex: 0 0 auto;
}

.tl-mock-lista {
	border-right: 1px solid var(--tl-borde);
	display: flex;
	flex-direction: column;
}

.tl-mock-lista-cabeza,
.tl-mock-chat-cabeza {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--tl-borde);
	font-weight: 600;
	color: var(--wp--preset--color--texto);
	font-size: 0.8125rem;
}

.tl-mock-conv {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 0.65rem;
	padding: 0.8rem 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.045);
	align-items: start;
}

.tl-mock-conv.activa {
	background: rgba(255, 255, 255, 0.035);
	box-shadow: inset 2px 0 0 var(--wp--preset--color--acento);
}

.tl-mock-av {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--wp--preset--color--texto-suave);
}

.tl-mock-conv strong {
	display: block;
	color: var(--wp--preset--color--texto);
	font-size: 0.8125rem;
	font-weight: 600;
}

.tl-mock-conv p {
	color: var(--wp--preset--color--texto-tenue);
	font-size: 0.75rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0.15rem 0 0.35rem;
}

.tl-mock-conv time {
	font-size: 0.6875rem;
	color: var(--wp--preset--color--texto-tenue);
	font-variant-numeric: tabular-nums;
}

.tl-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.18rem 0.45rem;
	border-radius: 5px;
	border: 1px solid var(--tl-borde);
	background: rgba(255, 255, 255, 0.04);
	font-size: 0.6875rem;
	font-style: normal;
	color: var(--wp--preset--color--texto-suave);
	white-space: nowrap;
}

.tl-tag-ia {
	border-color: rgba(0, 208, 132, 0.32);
	background: rgba(0, 208, 132, 0.12);
	color: var(--wp--preset--color--acento-claro);
}

.tl-tag-equipo {
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.09);
	color: var(--wp--preset--color--texto);
}

.tl-mock-tags {
	display: inline-flex;
	gap: 0.3rem;
	flex-wrap: wrap;
}

.tl-mock-chat {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tl-mock-hilo {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	flex: 1;
}

.tl-msg {
	max-width: 86%;
	padding: 0.6rem 0.8rem;
	border-radius: 12px;
	font-size: 0.78125rem;
	line-height: 1.45;
	border: 1px solid var(--tl-borde);
}

.tl-msg small {
	display: block;
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.6;
	margin-bottom: 0.25rem;
}

.tl-msg-cliente {
	align-self: flex-start;
	background: rgba(255, 255, 255, 0.045);
	border-bottom-left-radius: 4px;
	color: var(--wp--preset--color--texto-suave);
}

.tl-msg-ia {
	align-self: flex-end;
	background: rgba(0, 208, 132, 0.1);
	border-color: rgba(0, 208, 132, 0.26);
	border-bottom-right-radius: 4px;
	color: #d8fff0;
}

.tl-mock-evento {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	align-self: center;
	padding: 0.3rem 0.6rem;
	border-radius: 100px;
	border: 1px dashed rgba(255, 255, 255, 0.14);
	font-size: 0.6875rem;
	color: var(--wp--preset--color--texto-tenue);
}

.tl-mock-panel {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	background: rgba(0, 0, 0, 0.22);
}

.tl-mock-panel h5 {
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-tenue);
	font-weight: 600;
}

.tl-mock-dato {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: var(--wp--preset--color--texto-tenue);
}

.tl-mock-dato b {
	color: var(--wp--preset--color--texto);
	font-weight: 500;
}

.tl-mock-aviso {
	margin-top: auto;
	padding: 0.65rem;
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.03);
	font-size: 0.71875rem;
	color: var(--wp--preset--color--texto-tenue);
	line-height: 1.5;
}

@media (max-width: 1040px) {
	.tl-mock-app {
		grid-template-columns: 160px minmax(0, 1fr);
	}

	.tl-mock-panel {
		display: none;
	}
}

@media (max-width: 720px) {
	.tl-mock-app {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.tl-mock-lado {
		display: none;
	}

	.tl-mock-zona {
		margin-bottom: -3rem;
	}

	.tl-mock {
		transform: none;
	}
}

/* ── Franja de confianza ──────────────────────────────────────────────── */

.tl-confianza {
	position: relative;
	padding-top: clamp(8rem, 13vw, 12rem);
	padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.tl-confianza-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

.tl-confianza-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-top: 1rem;
	padding: 0;
	list-style: none;
}

.tl-confianza-lista li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--texto-tenue);
}

.tl-confianza-lista svg {
	color: var(--wp--preset--color--acento);
	flex: 0 0 auto;
}

.tl-logos-etiqueta {
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-tenue);
	margin-bottom: 1rem;
}

.tl-logos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tl-logos span {
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--tl-borde);
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.025);
	font-size: 0.875rem;
	color: var(--wp--preset--color--texto-suave);
	transition: border-color var(--tl-rapido), color var(--tl-rapido), transform var(--tl-rapido) var(--tl-curva);
}

.tl-logos span:hover {
	border-color: var(--tl-borde-fuerte);
	color: var(--wp--preset--color--texto);
	transform: translateY(-2px);
}

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

/* ── Bento ────────────────────────────────────────────────────────────── */

.tl-bento {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.tl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: 1.6rem;
	border-radius: var(--tl-radio);
	border: 1px solid var(--tl-borde);
	background: linear-gradient(168deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.012) 42%, rgba(255, 255, 255, 0) 100%),
		var(--wp--preset--color--panel);
	overflow: hidden;
	transition: border-color var(--tl-medio), transform var(--tl-medio) var(--tl-curva);
}

/* Brillo que sigue al cursor. Las variables las escribe el JS; sin JS la
   tarjeta simplemente no brilla y se ve igual de bien. */
.tl-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.07), transparent 70%);
	opacity: 0;
	transition: opacity var(--tl-medio);
	pointer-events: none;
}

.tl-card:hover {
	border-color: var(--tl-borde-fuerte);
	transform: translateY(-3px);
}

.tl-card:hover::after {
	opacity: 1;
}

.tl-card h3 {
	color: var(--wp--preset--color--texto);
}

.tl-card p {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--texto-tenue);
}

/* Dos tarjetas anchas, una por fila: la grilla cierra en dos filas exactas.
   Antes la grande ocupaba dos filas y le sobraba medio metro de aire adentro,
   mientras la última fila quedaba a medio llenar.

   El contenido va en vertical, no en dos columnas: probado en dos columnas, la
   tabla quedaba tan angosta que "Listo para comprar" se montaba encima de
   "Equipo". Con el doble de ancho, en vertical, respira. */
.tl-card-grande,
.tl-card-media {
	grid-column: span 2;
	padding: 2rem;
}

.tl-card-icono {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	border: 1px solid var(--tl-borde);
	background: rgba(255, 255, 255, 0.045);
	color: var(--wp--preset--color--acento-claro);
	margin-bottom: 0.35rem;
}

.tl-card-etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--acento-claro);
	margin-bottom: 0.35rem;
}

.tl-card-visual {
	margin-top: auto;
	padding-top: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.tl-fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.6rem 0.8rem;
	border-radius: 9px;
	border: 1px solid var(--tl-borde);
	background: rgba(0, 0, 0, 0.28);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--texto-suave);
}

.tl-fila-dato {
	color: var(--wp--preset--color--texto-tenue);
	font-variant-numeric: tabular-nums;
	font-size: 0.75rem;
}

.tl-tabla {
	border: 1px solid var(--tl-borde);
	border-radius: 11px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.3);
}

.tl-tabla-fila {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.8fr);
	gap: 0.75rem;
	align-items: center;
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.045);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--texto-suave);
}

.tl-tabla-fila:last-child {
	border-bottom: 0;
}

.tl-tabla-cabeza {
	background: rgba(255, 255, 255, 0.03);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-tenue);
}

@media (max-width: 1040px) {
	.tl-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tl-card-grande {
		grid-column: span 2;
		grid-row: auto;
	}
}

@media (max-width: 620px) {
	.tl-bento {
		grid-template-columns: 1fr;
	}

	.tl-card-grande,
	.tl-card-media {
		grid-column: span 1;
	}
}

/* ── Proceso (sticky) ─────────────────────────────────────────────────── */

.tl-proceso {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}

.tl-proceso-fijo {
	position: sticky;
	top: 140px;
}

.tl-progreso {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 2.5rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--texto-tenue);
	font-variant-numeric: tabular-nums;
}

.tl-progreso-barra {
	position: relative;
	flex: 1;
	height: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.tl-progreso-barra i {
	position: absolute;
	inset: 0 auto 0 0;
	width: 25%;
	background: linear-gradient(to right, var(--wp--preset--color--acento), var(--wp--preset--color--acento-claro));
	transition: width 0.6s var(--tl-curva);
}

.tl-pasos {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(3rem, 7vw, 6rem);
	padding-left: 2.75rem;
	list-style: none;
	margin: 0;
}

/* La línea que une los pasos. */
.tl-pasos::before {
	content: '';
	position: absolute;
	left: 11px;
	top: 6px;
	bottom: 6px;
	width: 1px;
	background: linear-gradient(to bottom, var(--tl-borde-fuerte), rgba(255, 255, 255, 0.04));
}

.tl-paso {
	position: relative;
	opacity: 0.38;
	transition: opacity var(--tl-medio) var(--tl-curva);
}

.tl-paso.tl-paso-activo {
	opacity: 1;
}

.tl-paso::before {
	content: '';
	position: absolute;
	left: -2.75rem;
	top: 7px;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	border: 1px solid var(--tl-borde-fuerte);
	background: var(--wp--preset--color--fondo);
	transition: border-color var(--tl-medio), box-shadow var(--tl-medio), background-color var(--tl-medio);
}

.tl-paso.tl-paso-activo::before {
	border-color: var(--wp--preset--color--acento);
	background: rgba(0, 208, 132, 0.16);
	box-shadow: 0 0 0 5px rgba(0, 208, 132, 0.1);
}

.tl-paso-num {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--acento);
	margin-bottom: 0.6rem;
}

.tl-paso h3 {
	margin-bottom: 0.5rem;
}

.tl-paso p {
	color: var(--wp--preset--color--texto-tenue);
	max-width: 48ch;
}

@media (max-width: 900px) {
	.tl-proceso {
		grid-template-columns: 1fr;
	}

	.tl-proceso-fijo {
		position: static;
	}

	.tl-paso {
		opacity: 1;
	}
}

/* ── Precio ───────────────────────────────────────────────────────────── */

.tl-precio {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	border: 1px solid var(--tl-borde-fuerte);
	border-radius: 18px;
	overflow: hidden;
	background: linear-gradient(150deg, rgba(0, 208, 132, 0.08) 0%, rgba(255, 255, 255, 0.02) 38%, rgba(255, 255, 255, 0) 100%),
		var(--wp--preset--color--panel);
	box-shadow: 0 40px 100px -50px rgba(0, 0, 0, 0.9);
}

.tl-precio-izq {
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
	border-right: 1px solid var(--tl-borde);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.tl-precio-nombre {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--texto);
	margin: 1rem 0 1.75rem;
}

.tl-precio-monto {
	display: flex;
	align-items: flex-end;
	gap: 0.75rem;
}

.tl-precio-monto strong {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 6vw, 4.25rem);
	font-weight: 600;
	line-height: 0.9;
	letter-spacing: -0.045em;
	color: var(--wp--preset--color--texto);
	font-variant-numeric: tabular-nums;
}

.tl-precio-monto span {
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--wp--preset--color--texto-tenue);
	padding-bottom: 0.3rem;
}

.tl-precio-mensual {
	/* El monto grande tiene line-height 0.9: sin este aire, el "+ $297 / mes"
	   queda pegado al número y parece parte de él. */
	margin-top: 1.4rem;
	font-size: 1rem;
	color: var(--wp--preset--color--texto-suave);
}

.tl-precio-mensual b {
	color: var(--wp--preset--color--texto);
	font-weight: 600;
}

.tl-precio-cta {
	margin-top: 2rem;
	width: 100%;
	justify-content: center;
}

.tl-precio-demo {
	margin-top: 0.9rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--texto-tenue);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(255, 255, 255, 0.2);
}

.tl-precio-der {
	padding: clamp(1.75rem, 3.5vw, 2.75rem);
}

.tl-precio-der h4 {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-tenue);
	margin-bottom: 1.25rem;
	font-family: var(--wp--preset--font-family--texto);
	font-weight: 600;
}

.tl-incluye {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.tl-incluye li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--texto-suave);
}

.tl-incluye svg {
	color: var(--wp--preset--color--acento);
	flex: 0 0 auto;
	margin-top: 0.3rem;
}

.tl-nota-ia {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.75rem;
	padding: 1rem;
	border-radius: 11px;
	border: 1px solid var(--tl-borde);
	background: rgba(0, 0, 0, 0.25);
}

.tl-nota-ia svg {
	color: var(--wp--preset--color--texto-tenue);
	flex: 0 0 auto;
	margin-top: 0.1rem;
}

.tl-nota-ia p {
	font-size: 0.875rem;
	color: var(--wp--preset--color--texto-tenue);
	margin: 0;
}

.tl-nota-ia strong {
	color: var(--wp--preset--color--texto);
	font-weight: 600;
}

.tl-medida {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: 1rem;
	padding: 1.35rem 1.6rem;
	border: 1px solid var(--tl-borde);
	border-radius: var(--tl-radio);
	background: rgba(255, 255, 255, 0.022);
}

.tl-medida p {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--texto-tenue);
	margin: 0;
}

.tl-medida strong {
	color: var(--wp--preset--color--texto);
	font-weight: 600;
}

@media (max-width: 880px) {
	.tl-precio {
		grid-template-columns: 1fr;
	}

	.tl-precio-izq {
		border-right: 0;
		border-bottom: 1px solid var(--tl-borde);
	}
}

@media (max-width: 520px) {
	.tl-incluye {
		grid-template-columns: 1fr;
	}
}

/* ── Preguntas ────────────────────────────────────────────────────────── */

.tl-faq {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.tl-faq-lado {
	position: sticky;
	top: 140px;
}

.tl-faq-lista {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--tl-borde);
}

.tl-pregunta {
	border-bottom: 1px solid var(--tl-borde);
}

.tl-pregunta summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.35rem 0;
	cursor: pointer;
	list-style: none;
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--wp--preset--color--texto);
	letter-spacing: -0.015em;
	transition: color var(--tl-rapido);
}

.tl-pregunta summary::-webkit-details-marker {
	display: none;
}

.tl-pregunta summary:hover {
	color: var(--wp--preset--color--acento-claro);
}

.tl-mas {
	position: relative;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.tl-mas::before,
.tl-mas::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 13px;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform var(--tl-medio) var(--tl-curva), opacity var(--tl-rapido);
	opacity: 0.6;
}

.tl-mas::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.tl-pregunta[open] .tl-mas::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

.tl-pregunta[open] summary {
	color: var(--wp--preset--color--texto);
}

.tl-pregunta p {
	padding: 0 0 1.5rem;
	max-width: 62ch;
	color: var(--wp--preset--color--texto-tenue);
	margin: 0;
}

@media (max-width: 900px) {
	.tl-faq {
		grid-template-columns: 1fr;
	}

	.tl-faq-lado {
		position: static;
	}
}

/* ── Cierre ───────────────────────────────────────────────────────────── */

.tl-cierre {
	position: relative;
	text-align: center;
	padding-block: clamp(5rem, 9vw, 8rem);
	overflow: hidden;
}

.tl-cierre::before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -40%;
	width: min(900px, 110%);
	aspect-ratio: 1;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(0, 208, 132, 0.14) 0%, transparent 62%);
	filter: blur(40px);
	pointer-events: none;
}

.tl-cierre > * {
	position: relative;
}

.tl-cierre h2 {
	max-width: 16ch;
	margin-inline: auto;
}

.tl-cierre .tl-bajada {
	margin: 1.25rem auto 0;
	text-align: center;
}

/* ── Pie ──────────────────────────────────────────────────────────────── */

.tl-footer {
	border-top: 1px solid var(--tl-borde);
	padding-block: 2.5rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--texto-tenue);
}

.tl-footer-fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.tl-footer a:hover {
	color: var(--wp--preset--color--texto);
}

/* ── Movimiento ───────────────────────────────────────────────────────── */

/* Solo se esconde si hay JS; si el JS no carga, todo se ve igual pero quieto.
   La clase js la pone el propio script antes de pintar. */
.js .tl-entra {
	opacity: 0;
	transform: translateY(18px);
}

.js .tl-entra.tl-visible {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s var(--tl-curva), transform 0.7s var(--tl-curva);
}

.js .tl-entra-escalonado > * {
	opacity: 0;
	transform: translateY(16px);
}

.js .tl-entra-escalonado.tl-visible > * {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s var(--tl-curva), transform 0.6s var(--tl-curva);
}

.js .tl-entra-escalonado.tl-visible > :nth-child(1) { transition-delay: 0.04s; }
.js .tl-entra-escalonado.tl-visible > :nth-child(2) { transition-delay: 0.1s; }
.js .tl-entra-escalonado.tl-visible > :nth-child(3) { transition-delay: 0.16s; }
.js .tl-entra-escalonado.tl-visible > :nth-child(4) { transition-delay: 0.22s; }
.js .tl-entra-escalonado.tl-visible > :nth-child(5) { transition-delay: 0.28s; }
.js .tl-entra-escalonado.tl-visible > :nth-child(6) { transition-delay: 0.34s; }

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.js .tl-entra,
	.js .tl-entra-escalonado > * {
		opacity: 1;
		transform: none;
	}
}

/* ── Editor ───────────────────────────────────────────────────────────
   Dentro del editor no hay <body> del sitio, así que las luces de fondo no
   aplican: se le da el fondo a la hoja para que lo que se edita se parezca a
   lo publicado y nadie trabaje a ciegas sobre blanco. */

.editor-styles-wrapper {
	background: var(--wp--preset--color--fondo);
}

.editor-styles-wrapper .tl-paso,
.editor-styles-wrapper .tl-entra,
.editor-styles-wrapper .tl-entra-escalonado > * {
	opacity: 1;
	transform: none;
}

/* ===========================================================================
   Integración con los bloques de WordPress.
   El contenido se arma con bloques nativos (párrafo, título, botón, detalles)
   para que se pueda editar desde el panel. Eso trae su propio marcado y sus
   propios márgenes: acá se acomodan a este diseño, sin tocar el editor.
   =========================================================================== */

/* El espacio entre bloques lo pone WordPress como margen. Dentro de una
   grilla o un flex eso pelea con el gap, así que se anula donde manda el gap. */
.tl-bento > *,
.tl-pasos > *,
.tl-precio > *,
.tl-faq > *,
.tl-cabeza > *,
.tl-hero-nota > *,
.tl-card > *,
.tl-footer-fila > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ── Marca del encabezado ─────────────────────────────────────────────── */

.tl-marca {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.03em;
}

.tl-marca a {
	color: var(--wp--preset--color--texto);
}

/* El cuadradito con la T. Si algún día suben un logo de verdad, se cambia el
   bloque por "Logotipo del sitio" y esta regla deja de aplicar sola. */
.tl-marca::before {
	content: "T";
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: linear-gradient(145deg, #ffffff 0%, #c9d2d8 100%);
	color: #06070a;
	font-size: 0.875rem;
	font-weight: 700;
	box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.8);
	flex: 0 0 auto;
}

.wp-block-site-logo img {
	border-radius: 8px;
}

/* ── Navegación ───────────────────────────────────────────────────────── */

.tl-nav .wp-block-navigation {
	gap: 0.15rem;
}

.tl-nav .wp-block-navigation-item__content {
	padding: 0.5rem 0.85rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--texto-tenue);
	border-radius: 8px;
	transition: color var(--tl-rapido), background-color var(--tl-rapido);
}

.tl-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--texto);
	background: rgba(255, 255, 255, 0.045);
}

/* El menú desplegable del celular viene con fondo claro por defecto. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--fondo);
	padding: 1.5rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--texto);
	font-size: 1.25rem;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--texto);
}

.tl-header-cta {
	margin: 0;
}

@media (max-width: 880px) {
	.tl-header-cta {
		display: none;
	}
}

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

/* Las clases tl-boton se ponen en el bloque, que envuelve al enlace: hay que
   bajarle los estilos al enlace, que es lo que de verdad se ve. */
.tl-boton .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.5rem;
	border-radius: 11px;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
	border: 0;
	transition: transform var(--tl-rapido) var(--tl-curva), background-color var(--tl-rapido),
		border-color var(--tl-rapido), box-shadow var(--tl-rapido);
}

.tl-boton .wp-block-button__link::after {
	content: "\2192";
	font-size: 1em;
	line-height: 1;
	transition: transform var(--tl-rapido) var(--tl-curva);
}

.tl-boton .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

.tl-boton-primario .wp-block-button__link {
	background: var(--wp--preset--color--texto);
	color: #06070a;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 12px 30px -12px rgba(0, 0, 0, 0.9);
}

.tl-boton-primario .wp-block-button__link:hover {
	background: #fff;
	transform: translateY(-2px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 18px 40px -14px rgba(0, 0, 0, 0.95);
}

.tl-boton-secundario .wp-block-button__link {
	background: rgba(255, 255, 255, 0.035);
	color: var(--wp--preset--color--texto);
	border: 1px solid var(--tl-borde);
}

.tl-boton-secundario .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: var(--tl-borde-fuerte);
	transform: translateY(-2px);
}

/* El de "Ver precio" lleva a un ancla de la misma página: la flecha a la
   derecha sugiere otra cosa. */
.tl-boton-secundario .wp-block-button__link::after,
.tl-boton-chico .wp-block-button__link::after {
	display: none;
}

.tl-boton-chico .wp-block-button__link {
	padding: 0.68rem 1.1rem;
	font-size: 0.875rem;
}

.tl-precio-cta-caja {
	width: 100%;
	margin-top: 2rem;
}

.tl-precio-cta-caja .wp-block-button,
.tl-precio-cta-caja .wp-block-button__link {
	width: 100%;
	justify-content: center;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.tl-hero > .wp-block-group,
.tl-hero > .wp-block-buttons {
	justify-content: center;
}

.tl-hero-nota {
	gap: 0.5rem 1.75rem;
	margin-top: 2.25rem;
}

.tl-hero-nota p {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--texto-tenue);
	margin: 0;
}

.tl-hero-nota p::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--acento);
	opacity: 0.8;
	flex: 0 0 auto;
}

.tl-hero-acciones {
	margin-top: 2.5rem;
}

/* ── Encabezado de sección ────────────────────────────────────────────── */

.tl-cabeza > .wp-block-group > * + * {
	margin-block-start: 0;
}

.tl-cabeza .tl-kicker {
	margin-bottom: 1.25rem;
}

/* ── Tarjetas ─────────────────────────────────────────────────────────── */

.tl-card > * {
	position: relative;
	z-index: 1;
}

.tl-card h3,
.tl-card p {
	margin: 0;
}

.tl-card .tl-card-visual {
	margin-top: auto;
}

/* ── Pasos ────────────────────────────────────────────────────────────── */

.tl-pasos {
	display: flex;
	flex-direction: column;
}

.tl-paso > * {
	margin-block-start: 0;
}

.tl-paso .tl-paso-num {
	margin-bottom: 0.6rem;
}

.tl-paso h3 {
	margin-bottom: 0.5rem;
}

/* ── Precio ───────────────────────────────────────────────────────────── */

.tl-precio-izq > *,
.tl-precio-der > * {
	margin-block-start: 0;
}

/* ── Preguntas (bloque Detalles) ──────────────────────────────────────── */

.tl-faq-lista {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--tl-borde);
	gap: 0;
}

.tl-pregunta {
	border-bottom: 1px solid var(--tl-borde);
}

.tl-pregunta summary {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.35rem 2.5rem 1.35rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--texto);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--wp--preset--color--texto);
	letter-spacing: -0.015em;
	transition: color var(--tl-rapido);
}

.tl-pregunta summary::-webkit-details-marker {
	display: none;
}

.tl-pregunta summary::marker {
	content: "";
}

.tl-pregunta summary:hover {
	color: var(--wp--preset--color--acento-claro);
}

/* El signo + que se vuelve − al abrir, hecho con los dos pseudo-elementos del
   summary para no depender de marcado extra que el editor podría borrar. */
.tl-pregunta summary::before,
.tl-pregunta summary::after {
	content: "";
	position: absolute;
	right: 2px;
	top: 50%;
	width: 13px;
	height: 1.5px;
	border-radius: 2px;
	background: currentColor;
	opacity: 0.65;
	transform: translateY(-50%);
	transition: transform var(--tl-medio) var(--tl-curva), opacity var(--tl-rapido);
}

.tl-pregunta summary::after {
	transform: translateY(-50%) rotate(90deg);
}

.tl-pregunta[open] summary::after {
	transform: translateY(-50%) rotate(0deg);
	opacity: 0;
}

.tl-pregunta p {
	padding: 0 0 1.5rem;
	max-width: 62ch;
	color: var(--wp--preset--color--texto-tenue);
	margin: 0;
}

/* ── Medida ───────────────────────────────────────────────────────────── */

.tl-medida {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.tl-medida > * {
	margin-block-start: 0;
}

.tl-medida .wp-block-buttons {
	margin: 0;
}

/* ── Cierre y pie ─────────────────────────────────────────────────────── */

.tl-cierre > * {
	margin-block-start: 0;
}

.tl-cierre .tl-kicker {
	justify-content: center;
}

.tl-cierre h2 {
	margin-top: 1rem;
}

.tl-cierre .tl-bajada {
	margin-top: 1.25rem;
}

.tl-footer-fila p {
	margin: 0;
}