/* ==========================================================================
   TropiAI · estilos del tema
   Estructura de bloques apilados, blancos y negros alternos, y un solo color:
   el verde ácido del logo. Se escribe primero para móvil; los anchos mayores se
   añaden con min-width.
   ========================================================================== */

:root {
	/* Bloques claros (los de por defecto). */
	--fondo: #FFFFFF;
	--fondo-suave: #F5F5F7;
	--panel: #F5F5F7;
	--panel-alto: #EBEBEF;
	--texto: #1D1D1F;
	--titular: #000000;
	--apagado: #55555A;
	--acento: #7FC41C;
	--acento-texto: #437500;
	--acento-suave: rgba(127, 196, 28, .14);
	--acento-borde: rgba(127, 196, 28, .5);
	--tinta: #000000;
	--borde: rgba(0, 0, 0, .09);
	--sombra: 0 24px 60px rgba(0, 0, 0, .12);
	--radio: 18px;
	--radio-grande: 28px;
	--margen: 20px;
	--ancho: 1200px;
	--barra: 52px;
	--seccion: clamp(44px, 8vw, 96px);
	--suave: cubic-bezier(.2, .65, .3, 1);
	--letra: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
	--titulos: var(--letra);
}

/* Bloques oscuros: las mismas variables, invertidas. Un bloque entero cambia de color con una clase. */
.tr-oscuro,
.tr-seccion--oscura,
.tr-portada--escena,
.tr-azulejo--oscuro,
.tr-barra,
.tr-pie {
	--fondo: #000000;
	--fondo-suave: #000000;
	--panel: #121212;
	--panel-alto: #1C1C1E;
	--texto: #F5F5F7;
	--titular: #FFFFFF;
	--apagado: #B4B4B9;
	--acento-texto: #7FC41C;
	--acento-suave: rgba(127, 196, 28, .16);
	--borde: rgba(255, 255, 255, .12);
	--sombra: 0 24px 60px rgba(0, 0, 0, .5);
}
.tr-oscuro,
.tr-seccion--oscura,
.tr-azulejo--oscuro { background: var(--fondo); color: var(--texto); }

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--barra) + 16px);
}

body {
	margin: 0;
	background: var(--fondo);
	color: var(--texto);
	font-family: var(--letra);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

img, video, canvas, svg { max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
	font-family: var(--titulos);
	color: var(--titular);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.028em;
	text-wrap: balance;
	margin: 0;
}
p, ul, ol, figure { margin: 0; }

a { color: var(--acento-texto); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--acento); color: var(--tinta); }

.tr-saltar {
	position: absolute; left: 12px; top: -80px; z-index: 300;
	background: var(--acento); color: var(--tinta); font-weight: 600;
	padding: 10px 16px; border-radius: 10px;
}
.tr-saltar:focus { top: 12px; }

.tr-ancho {
	width: 100%;
	max-width: calc(var(--ancho) + var(--margen) * 2);
	margin-inline: auto;
	padding-inline: var(--margen);
}
.tr-ancho--lectura { max-width: calc(760px + var(--margen) * 2); }

/* WordPress separa los bloques con un margen propio; aquí cada pieza pone el suyo. */
.tr-pagina :where(.wp-block-group) > * { margin-block: 0; }

/* ---------- botones y enlaces con flecha ---------- */

.tr-boton,
.wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--acento);
	color: var(--tinta);
	font-family: inherit; font-size: .97rem; font-weight: 600; line-height: 1.2;
	text-align: center; text-decoration: none;
	cursor: pointer;
	transition: transform .25s var(--suave), box-shadow .25s var(--suave), border-color .25s, color .25s, background-color .25s;
}
.tr-boton:hover,
.wp-block-button__link:hover {
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(127, 196, 28, .35);
}
.tr-boton--linea,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: rgba(29, 29, 31, .3);
	color: var(--texto);
}
.tr-oscuro .tr-boton--linea,
.tr-seccion--oscura .tr-boton--linea,
.tr-portada--escena .tr-boton--linea,
.tr-seccion--oscura .wp-block-button.is-style-outline .wp-block-button__link,
.tr-portada--escena .wp-block-button.is-style-outline .wp-block-button__link { border-color: rgba(245, 245, 247, .35); }
.tr-boton--linea:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--acento); box-shadow: none; }
.tr-boton--pequeno { min-height: 36px; padding: 7px 16px; font-size: .86rem; }

.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-buttons.tr-centro { justify-content: center; margin-top: 44px; }

/* Dos enlaces con flecha, como debajo de cada producto de Apple. */
.tr-enlaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; font-size: 1.12rem; font-weight: 500; }
.tr-enlaces a::after { content: "\203A"; display: inline-block; margin-left: 5px; transition: transform .25s var(--suave); }
.tr-enlaces a:hover { text-decoration: none; }
.tr-enlaces a:hover::after { transform: translateX(3px); }

/* ---------- barra de navegación ---------- */

.tr-barra {
	position: fixed; inset: 0 0 auto 0; z-index: 100;
	height: var(--barra);
	display: flex; align-items: center;
	background: #000;
	color: var(--texto);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* Línea que se llena según se baja por la página (solo en navegadores que lo permiten sin JavaScript). */
.tr-barra::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
	background: var(--acento);
	transform: scaleX(0); transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
	.tr-barra::after { animation: tr-progreso linear both; animation-timeline: scroll(root); }
}
@keyframes tr-progreso { to { transform: scaleX(1); } }
.admin-bar .tr-barra { top: 46px; }
@media (min-width: 783px) { .admin-bar .tr-barra { top: 32px; } }

.tr-barra__dentro { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* El logo es solo el nombre (decisión de Daniel, 21/10/2026): «Tropi» en el color del texto y «AI» en verde. */
.tr-logo {
	display: inline-flex; align-items: center;
	font-family: var(--titulos); font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: -.025em;
	color: var(--texto);
}
.tr-logo:hover { text-decoration: none; }
.tr-logo em { font-style: normal; color: var(--acento-texto); }
@media (max-width: 699px) { .tr-logo { font-size: 1.38rem; } }

.tr-hamburguesa {
	display: grid; place-content: center; gap: 5px;
	width: 46px; height: 46px; margin-right: -10px;
	background: none; border: 0; cursor: pointer;
}
.tr-hamburguesa span { display: block; width: 20px; height: 1.5px; border-radius: 2px; background: var(--texto); transition: transform .3s var(--suave), opacity .2s; }
.es-abierta .tr-hamburguesa span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.es-abierta .tr-hamburguesa span:nth-child(2) { opacity: 0; }
.es-abierta .tr-hamburguesa span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Se coloca respecto a la barra y no a la ventana: el desenfoque de la barra
   la convierte en el marco de referencia de sus hijos con posición fija. */
.tr-menu {
	position: absolute; top: 100%; left: 0; right: 0;
	height: calc(100dvh - var(--barra));
	display: none; flex-direction: column; gap: 22px;
	padding: 24px var(--margen) 40px;
	background: #000;
	overflow-y: auto;
}
.es-abierta .tr-menu { display: flex; }

.tr-menu ul { list-style: none; margin: 0; padding: 0; }
.tr-menu__lista > li { border-bottom: 1px solid var(--borde); }
.tr-menu__lista a {
	display: block; padding: 15px 0;
	color: var(--texto); font-family: var(--titulos); font-size: 1.25rem; font-weight: 500;
}
.tr-menu__lista a:hover { color: var(--acento); text-decoration: none; }
/* Subapartados plegados: la flecha de la derecha los abre. */
.tr-menu__lista .menu-item-has-children { position: relative; }
.tr-menu__lista .menu-item-has-children > a { padding-right: 56px; }
.tr-menu__desplegar {
	position: absolute; right: -10px; top: 6px;
	width: 46px; height: 46px; padding: 0;
	background: none; border: 0; cursor: pointer; color: var(--texto);
}
.tr-menu__desplegar::before {
	content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -7px 0 0 -5px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg); transition: transform .3s var(--suave);
}
.es-desplegado > .tr-menu__desplegar::before { transform: rotate(225deg); margin-top: -2px; }
.tr-menu__lista .sub-menu { display: none; padding: 0 0 12px 14px; border-left: 1px solid var(--borde); margin-bottom: 14px; }
.tr-menu__lista .es-desplegado > .sub-menu { display: block; }
.tr-menu__lista .sub-menu a { padding: 8px 0; font-family: inherit; font-size: 1rem; font-weight: 400; color: var(--apagado); }
.tr-menu > .tr-boton { align-self: flex-start; }

@media (min-width: 1000px) {
	:root { --margen: 32px; }
	.tr-hamburguesa { display: none; }
	.tr-menu {
		position: static; height: auto; display: flex; flex-direction: row; align-items: center; gap: 28px;
		padding: 0; background: none; overflow: visible;
	}
	.tr-menu__lista { display: flex; align-items: center; gap: 30px; }
	.tr-menu__lista > li { position: relative; border: 0; }
	.tr-menu__lista a { padding: 10px 0; font-family: inherit; font-size: .84rem; font-weight: 400; color: rgba(245, 245, 247, .8); transition: color .2s; }
	.tr-menu__lista > li:hover > a,
	.tr-menu__lista .current-menu-item > a,
	.tr-menu__lista .current-menu-ancestor > a { color: #fff; }
	.tr-menu__lista .menu-item-has-children > a::after {
		content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0 3px 7px;
		border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
	}
	.tr-menu__desplegar { display: none; }
	.tr-menu__lista .menu-item-has-children > a { padding-right: 0; }
	.tr-menu__lista .sub-menu {
		display: block;
		position: absolute; top: 100%; left: -18px; min-width: 250px;
		margin: 0; padding: 10px;
		background: #121212; border: 1px solid var(--borde); border-radius: 16px;
		box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
		opacity: 0; visibility: hidden; transform: translateY(8px);
		transition: opacity .2s, transform .2s var(--suave), visibility .2s;
	}
	.tr-menu__lista li:hover > .sub-menu,
	.tr-menu__lista li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
	.tr-menu__lista .sub-menu a { padding: 10px 12px; border-radius: 10px; font-size: .92rem; }
	.tr-menu__lista .sub-menu a:hover { background: var(--acento-suave); color: #fff; }
	.tr-menu > .tr-boton { align-self: center; }
}

/* ---------- portada de inicio: blanca, centrada, con la escena en una ventana negra ---------- */

.tr-heroe {
	position: relative;
	padding: var(--barra) 0 0;
	text-align: center;
	overflow: hidden;
}
/* El texto va compacto y con peso: en el móvil tiene que caber en la primera pantalla con la animación debajo. */
.tr-heroe__contenido { max-width: 860px; margin-inline: auto; padding-top: clamp(28px, 6vw, 72px); }
.tr-heroe__contenido > * + * { margin-top: 14px; }

/* El punto verde va pegado delante de la primera palabra, también cuando el texto ocupa dos líneas. */
.tr-insignia {
	display: block; max-width: 560px; margin-inline: auto; text-wrap: balance;
	color: var(--acento-texto); font-size: .88rem; font-weight: 700; line-height: 1.45;
}
.tr-insignia::before {
	content: ""; display: inline-block; vertical-align: middle; width: 7px; height: 7px; margin: -2px 9px 0 0; border-radius: 50%; background: var(--acento);
	animation: tr-latido 2s infinite;
}
@keyframes tr-latido {
	0%, 100% { box-shadow: 0 0 0 0 rgba(127, 196, 28, .5); }
	50% { box-shadow: 0 0 0 7px rgba(127, 196, 28, 0); }
}

.tr-heroe__titulo { font-size: clamp(2.3rem, 7.2vw, 4.8rem); letter-spacing: -.045em; line-height: .98; }
.tr-heroe__titulo em { font-style: normal; color: var(--acento-texto); }
.tr-heroe__lema { max-width: 760px; margin-inline: auto; text-wrap: balance; color: var(--texto); font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 400; line-height: 1.3; letter-spacing: -.015em; }
.tr-heroe__contenido > .tr-heroe__lema + .tr-heroe__texto { margin-top: 12px; }
.tr-heroe__texto { max-width: 620px; margin-inline: auto; color: var(--apagado); font-size: clamp(.98rem, 1.9vw, 1.12rem); line-height: 1.45; }
.tr-heroe__nota { max-width: 520px; margin-inline: auto; color: var(--apagado); font-size: .82rem; line-height: 1.4; }
.tr-heroe__nota strong { color: var(--acento-texto); font-weight: 700; }
.tr-heroe .tr-enlaces { margin-top: 16px; margin-bottom: 0; font-weight: 600; }
.tr-heroe .wp-block-buttons { justify-content: center; margin-top: 26px; }
@media (max-width: 699px) {
	.tr-heroe__contenido > * + * { margin-top: 10px; }
	.tr-heroe .tr-enlaces { gap: 6px 20px; font-size: 1.02rem; }
	.tr-heroe__nota { display: none; } /* en el móvil sobra: la animación tiene que entrar en la primera pantalla */
}

/* Lo primero que se ve: la animación a todo el ancho, justo debajo de la barra. El vídeo lleva un
   movimiento lento de cámara y, encima, la escena de puntos del tema, para que la red esté viva.
   Los puntos se desvanecen por los lados y por abajo hacia el negro. */
.tr-heroe__contenido { padding-bottom: clamp(26px, 5vw, 56px); }
.tr-heroe__ventana {
	position: relative;
	height: clamp(360px, 54svh, 620px);
	background: #000;
	overflow: hidden;
}
.tr-heroe__ventana > .tr-escena { position: absolute; inset: 0; }
/* En escritorio la ola crece desde el borde derecho hacia la izquierda, para cubrir más ventana. */
.tr-heroe__ventana > .tr-escena--video video {
	transform-origin: 100% 62%;
	animation: tr-deriva 9s ease-in-out infinite alternate;
}
@keyframes tr-deriva {
	from { transform: scale(1.35) translate(0, 0); }
	to { transform: scale(1.6) translate(-3%, -3%); }
}
/* En el móvil la ventana es casi cuadrada y el vídeo apaisado: se encuadra la ola, abajo a la derecha, y se acerca más. */
@keyframes tr-deriva-movil {
	from { transform: scale(1.55) translate(0, 0); }
	to { transform: scale(1.85) translate(-4%, -4%); }
}
/* Solo la ola de Higgsfield, a todo el ancho, con el movimiento lento de cámara. */
.tr-heroe__ventana::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(to right, #000, transparent 14%, transparent 86%, #000),
		linear-gradient(to bottom, transparent 74%, #000);
}
@media (max-width: 699px) {
	/* El texto compacto arriba y la animación asomando debajo, las dos en la primera pantalla. */
	.tr-heroe__ventana { height: clamp(280px, 46svh, 460px); }
	.tr-heroe__contenido { padding-top: 24px; padding-bottom: 12px; }
	.tr-heroe__ventana > .tr-escena--video video { object-position: 70% 60%; transform-origin: 70% 60%; animation: tr-deriva-movil 8s ease-in-out infinite alternate; }
	.tr-heroe__ventana::after { background: linear-gradient(to bottom, transparent 72%, #000); }
}
@media (prefers-reduced-motion: reduce) {
	.tr-heroe__ventana > .tr-escena--video video { animation: none; }
}

/* ---------- escena 3D ---------- */

.tr-escena { position: relative; width: 100%; height: 100%; pointer-events: none; }
.tr-escena canvas,
.tr-escena video { display: block; width: 100%; height: 100%; }
.tr-escena video { object-fit: cover; }
/* El fondo negro del vídeo o de la secuencia se funde con el del bloque: solo quedan los puntos de luz. */
.tr-escena--video video,
.tr-escena--secuencia canvas,
.tr-escena--secuencia img { mix-blend-mode: screen; }
.tr-escena--secuencia img { display: block; width: 100%; height: 100%; }
.tr-historia__escena .tr-escena--video video,
.tr-historia__escena .tr-escena--secuencia canvas,
.tr-historia__escena .tr-escena--secuencia img { object-fit: contain; }
@media (max-width: 999px) {
	/* En móvil la escena no lleva marco: se difuminan sus bordes para que no se note el cuadrado. */
	.tr-historia__escena .tr-escena--video video,
	.tr-historia__escena .tr-escena--secuencia canvas,
	.tr-historia__escena .tr-escena--secuencia img {
		-webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent);
		mask-image: radial-gradient(closest-side, #000 62%, transparent);
	}
}

/* ---------- marquesina de sectores ---------- */

.tr-marquesina {
	position: relative; overflow: hidden;
	padding: 18px 0;
	border-block: 1px solid var(--borde);
	background: var(--fondo);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.tr-marquesina__lista {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px;
	list-style: none; margin: 0; padding: 0 var(--margen);
	color: var(--apagado); font-family: var(--titulos); font-size: .98rem; font-weight: 500; white-space: nowrap;
}
.tr-marquesina__lista li { display: flex; align-items: center; gap: 34px; }
.tr-marquesina__lista li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--acento); }
.tr-marquesina.es-activa .tr-marquesina__lista {
	flex-wrap: nowrap; justify-content: flex-start; width: max-content; padding: 0;
	animation: tr-marquesina 38s linear infinite;
}
.tr-marquesina.es-activa:hover .tr-marquesina__lista { animation-play-state: paused; }
@keyframes tr-marquesina { to { transform: translateX(-50%); } }
/* En la portada la cinta va entre el texto y la animación: negra y con los lados difuminados hacia el
   claro de la página (la máscara deja ver el fondo por los bordes; a Daniel le gusta así). */
.tr-heroe .tr-marquesina {
	--apagado: #B4B4B9;
	background: #000; color: var(--apagado); border: 0;
}

/* ---------- secciones ---------- */

.tr-seccion { position: relative; padding-block: var(--seccion); }
.tr-seccion--suave { background: var(--fondo-suave); }
/* Lo que sigue a una portada: pegado si la portada es clara; con un margen moderado si es negra (con animación). */
.tr-seccion--pegada { padding-top: 0; }
.tr-portada--escena + .tr-seccion--pegada { padding-top: clamp(40px, 6vw, 72px); }
.tr-seccion--cta { padding-top: 0; }
/* La cabecera de las apps va pegada a los azulejos, y el botón de «ver todas», pegado debajo. */
.tr-seccion--apps { padding-bottom: 0; }
.tr-seccion--apps .tr-cabecera { margin-bottom: clamp(20px, 3vw, 32px) !important; }
.tr-seccion--boton { padding-top: 0; }
.tr-seccion--boton .wp-block-buttons.tr-centro { margin-top: 28px; }
.tr-seccion--suave + .tr-seccion--cta { padding-top: clamp(40px, 6vw, 64px); }

.tr-cabecera { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px) !important; }
.tr-cabecera > * + * { margin-top: 14px !important; }
/* Bloque centrado, como cada producto en la portada de Apple. */
.tr-seccion--centro .tr-cabecera { margin-inline: auto; text-align: center; }
.tr-seccion--centro .tr-antetitulo { justify-content: center; }
.tr-seccion--centro .tr-entradilla { margin-inline: auto; }
.tr-seccion--centro .tr-titulo { font-size: clamp(2.1rem, 5.6vw, 3.6rem); letter-spacing: -.035em; }

.tr-antetitulo {
	display: flex; align-items: center; gap: 10px;
	color: var(--acento-texto); font-size: clamp(1rem, 1.25vw, 1.1rem); font-weight: 600; letter-spacing: .02em; /* más grande desde el 21/10/2026 (Daniel) */
}
.tr-antetitulo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); }
.tr-antetitulo a { color: inherit; }

.tr-titulo { font-size: clamp(1.9rem, 4.6vw, 3rem); }
.tr-entradilla { color: var(--apagado); font-size: clamp(1.04rem, 1.9vw, 1.2rem); max-width: 660px; }

/* ---------- rejillas y tarjetas ---------- */

.tr-rejilla { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
	.tr-rejilla { gap: 18px; }
	.tr-rejilla--2, .tr-rejilla--3, .tr-rejilla--4, .tr-rejilla--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.tr-rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tr-rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.tr-rejilla--bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.tr-rejilla--bento > :nth-child(4n + 1), .tr-rejilla--bento > :nth-child(4n) { grid-column: span 4; }
	.tr-rejilla--bento > :nth-child(4n + 1) p, .tr-rejilla--bento > :nth-child(4n) p { max-width: 520px; }
	.tr-rejilla--bento > :nth-child(4n + 2), .tr-rejilla--bento > :nth-child(4n + 3) { grid-column: span 2; }
}

.tr-tarjeta {
	position: relative;
	display: flex; flex-direction: column; gap: 12px;
	padding: clamp(24px, 3vw, 34px);
	background: var(--panel);
	border-radius: var(--radio);
	overflow: hidden;
	transition: transform .35s var(--suave), box-shadow .35s;
}
@media (hover: hover) {
	.tr-tarjeta:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
}
.tr-tarjeta :is(h2, h3) { font-size: 1.3rem; letter-spacing: -.02em; }
.tr-tarjeta :is(h2, h3) a { color: inherit; }
.tr-tarjeta p { color: var(--apagado); font-size: 1.02rem; line-height: 1.5; }
.tr-tarjeta > * { position: relative; z-index: 1; }

.tr-tarjeta--destacada { background: #000; color: #F5F5F7; justify-content: center; }
.tr-tarjeta--destacada p { color: #F5F5F7; font-size: 1.06rem; }

/* Icono de una tarjeta: un cuadrado verde con el trazo en negro, como el logo, en todos los bloques.
   (Un trazo claro sobre negro parece más fino que uno oscuro sobre claro aunque mida lo mismo.) */
.tr-ico::before {
	content: ""; display: block; flex: none;
	width: 46px; height: 46px; margin-bottom: 8px;
	border-radius: 12px;
	background: var(--ico-oscuro) center / 24px no-repeat, var(--acento);
}
/* Dentro de un bloque, una cabecera que sigue a una rejilla abre otro apartado. */
.tr-seccion .tr-rejilla + .tr-cabecera,
.tr-seccion .tr-cifras + .tr-cabecera { margin-top: clamp(48px, 7vw, 80px) !important; }

.tr-etiqueta {
	align-self: flex-start;
	display: inline-flex; align-items: center; gap: 7px;
	padding: 4px 10px; border-radius: 999px;
	background: var(--acento-suave); color: var(--acento-texto) !important;
	font-size: .78rem !important; font-weight: 600; line-height: 1.5;
}
.tr-etiqueta::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tr-ico > .tr-etiqueta { position: absolute; top: clamp(24px, 3vw, 34px); right: clamp(24px, 3vw, 34px); }

.tr-mas { margin-top: auto !important; padding-top: 6px; }
.tr-mas a { font-size: .95rem; font-weight: 600; }
.tr-mas a::after { content: "\203A"; display: inline-block; margin-left: 5px; transition: transform .25s var(--suave); }
.tr-mas a:hover { text-decoration: none; }
.tr-mas a:hover::after { transform: translateX(3px); }

/* Muestra de una aplicación: captura arriba. */
.tr-muestra { padding: 0; gap: 0; }
.tr-muestra > :not(.tr-muestra__imagen) { margin-inline: clamp(22px, 3vw, 32px); }
.tr-muestra > h3 { margin-top: 12px; }
.tr-muestra > h3 + p { margin-top: 10px; }
.tr-muestra > .tr-etiqueta { margin-top: 22px; }
.tr-muestra > .tr-mas { padding-block: 16px 28px; }
.tr-muestra__imagen { aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.tr-muestra__imagen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .7s var(--suave); }
.tr-muestra__imagen + h3 { margin-top: 24px; }
@media (hover: hover) { .tr-muestra:hover .tr-muestra__imagen img { transform: scale(1.04); } }

/* Entrada del blog. */
.tr-tarjeta__imagen { display: block; margin: calc(clamp(24px, 3vw, 34px) * -1); margin-bottom: 8px; aspect-ratio: 16 / 10; overflow: hidden; }
.tr-tarjeta__imagen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tr-tarjeta__fecha { font-size: .88rem !important; font-weight: 500; }
.tr-tarjeta--entrada :is(h2, h3) { font-size: 1.22rem; }
.tr-tarjeta--entrada :is(h2, h3) a:hover { color: var(--acento-texto); text-decoration: none; }

/* Pasos numerados. */
.tr-paso__n { font-family: var(--titulos); font-size: 2.2rem !important; font-weight: 700; line-height: 1; color: var(--acento-texto) !important; letter-spacing: -.04em; }
.tr-paso > .tr-etiqueta { position: absolute; top: clamp(24px, 3vw, 34px); right: clamp(24px, 3vw, 34px); }

/* ---------- azulejos: la rejilla 2×2 de la portada de Apple ---------- */

.tr-azulejos { display: grid; gap: 12px; padding: 12px; background: var(--fondo); }
.tr-azulejo {
	position: relative;
	display: flex; flex-direction: column; align-items: center;
	padding: clamp(40px, 5vw, 64px) var(--margen) 0;
	background: var(--fondo-suave);
	color: var(--texto);
	text-align: center;
	overflow: hidden;
}
.tr-azulejo > * + * { margin-top: 12px !important; }
.tr-azulejo .tr-antetitulo { justify-content: center; }
.tr-azulejo h3 { font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.035em; }
.tr-azulejo > p:not(.tr-antetitulo) { max-width: 520px; font-size: clamp(1.08rem, 2vw, 1.25rem); line-height: 1.4; }
.tr-azulejo .tr-enlaces { margin-top: 16px !important; font-size: 1.06rem; }
/* La imagen va justo debajo del texto; en escritorio, con los dos azulejos de la fila a la misma altura. */
.tr-azulejo__imagen {
	width: min(100%, 560px); margin-top: auto !important; padding-top: 28px;
	display: block;
}
.tr-azulejo__imagen img {
	display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .35);
	transition: transform .7s var(--suave);
}
@media (hover: hover) { .tr-azulejo:hover .tr-azulejo__imagen img { transform: translateY(-6px); } }
@media (min-width: 700px) { .tr-azulejos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* En el ordenador, en tres columnas: las seis apps casi de un vistazo (Daniel, 20/10/2026). */
@media (min-width: 1000px) {
	.tr-azulejos--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tr-azulejos--2 .tr-azulejo { padding: 44px 26px 0; }
	.tr-azulejos--2 .tr-azulejo h3 { font-size: 2rem; }
	.tr-azulejos--2 .tr-azulejo > p:not(.tr-antetitulo) { font-size: 1.05rem; }
}

/* ---------- la historia: escena fija + pasos que pasan ---------- */

.tr-historia { display: grid; gap: 16px; }
/* Los enlaces del final, separados del último paso: se leen como el cierre del bloque (Daniel, 21/10/2026). */
.tr-historia + .tr-enlaces { margin-top: clamp(32px, 4vw, 48px) !important; }
.tr-historia__escena {
	position: sticky; top: var(--barra); z-index: 2;
	height: 42svh; min-height: 240px;
	margin-inline: calc(var(--margen) * -1);
	background: linear-gradient(to bottom, var(--fondo) 82%, transparent);
}
.tr-historia__pasos { display: grid; gap: 12px; }
.tr-historia__paso {
	display: flex; flex-direction: column; gap: 12px;
	padding: 26px 24px;
	border-radius: var(--radio);
	background: var(--panel);
	transition: opacity .4s, background-color .4s;
}
.tr-historia__paso h3 { font-size: 1.3rem; }
.tr-historia__paso p:last-child { color: var(--apagado); }
.tr-js .tr-historia__paso { opacity: .45; }
.tr-js .tr-historia__paso.es-activo { opacity: 1; background: var(--panel-alto); }

@media (min-width: 1000px) {
	.tr-historia { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: start; }
	.tr-historia__escena {
		top: calc(var(--barra) + 24px);
		height: calc(100svh - var(--barra) - 48px); max-height: 480px;
		margin: 0;
		background: var(--panel);
		border-radius: var(--radio-grande);
		overflow: hidden;
	}
	.tr-historia__escena .tr-escena--secuencia canvas,
	.tr-historia__escena .tr-escena--video video { object-fit: cover; }
	.tr-historia__pasos { gap: 0; }
	/* 22svh (antes 36): se siguen leyendo de uno en uno, sin tanto negro entre ellos (Daniel, 20/10/2026). */
	.tr-historia__paso { min-height: 22svh; justify-content: center; padding: 0; background: none !important; }
	.tr-historia__paso h3 { font-size: 1.9rem; }
	.tr-historia__paso p:last-child { font-size: 1.1rem; max-width: 460px; }
	.tr-js .tr-historia__paso { opacity: .25; }
}

/* ---------- cifras ---------- */

.tr-cifras { display: grid; gap: 14px; margin-top: 18px !important; }
.tr-cifra { padding: 28px 24px; border-radius: var(--radio); text-align: center; background: var(--panel); }
.tr-cifra__num {
	font-family: var(--titulos); font-size: clamp(2.3rem, 5vw, 3.2rem); font-weight: 700; line-height: 1.1; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
	color: var(--texto);
}
.tr-cifra__texto { margin-top: 8px !important; color: var(--apagado); font-size: .92rem; }
@media (min-width: 700px) { .tr-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
/* En un bloque gris, los pasos y las cifras en blanco para que cada uno se vea como un bloque (Daniel, 21/10/2026). */
.tr-seccion--suave .tr-paso { background: var(--fondo); }
.tr-seccion--suave .tr-cifra { background: var(--fondo); }
.tr-seccion--suave .tr-pasos + .tr-cifras,
.tr-seccion--suave .tr-rejilla + .tr-cifras { margin-top: clamp(28px, 4vw, 44px) !important; }

/* ---------- dos columnas ---------- */

.tr-dos { display: grid; gap: 24px; align-items: start; }
.tr-dos > .wp-block-group:not(.tr-tarjeta) > * + * { margin-top: 18px; }
.tr-dos > .wp-block-group:not(.tr-tarjeta) p { color: var(--apagado); }
@media (min-width: 900px) {
	.tr-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
	.tr-dos--contacto { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
	.tr-dos:has(> .tr-tarjeta + .tr-tarjeta) { align-items: stretch; }
}

.tr-lista-check, .tr-lista-no { list-style: none; padding: 0; display: grid; gap: 14px; }
/* «Lo que no entra», en Qué hacemos: la lista y la nota de las apps, sin tarjeta. */
.tr-no-entra { max-width: 680px; }
.tr-no-entra > * + * { margin-top: 18px; }
.tr-no-entra > p { color: var(--apagado); }
.tr-lista-check li, .tr-lista-no li { position: relative; padding-left: 38px; color: var(--apagado); }
.tr-lista-check li strong, .tr-lista-no li strong { color: var(--texto); font-weight: 600; }
.tr-lista-check li::before, .tr-lista-no li::before {
	content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%;
	background: var(--acento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 12.500l3.500 3.500L17 9'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.tr-lista-no li::before {
	background: var(--panel-alto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center / 15px no-repeat;
}

/* ---------- preguntas ---------- */

.tr-preguntas { max-width: 860px; display: grid; gap: 10px; }
.tr-seccion--centro .tr-preguntas { margin-inline: auto; }
.tr-preguntas details { border-radius: 16px; background: var(--panel); transition: background-color .3s; }
.tr-preguntas details[open] { background: var(--panel-alto); }
.tr-preguntas summary {
	position: relative; padding: 17px 56px 17px 22px;
	font-family: var(--titulos); font-size: 1.08rem; font-weight: 600; cursor: pointer; list-style: none;
}
.tr-preguntas summary::-webkit-details-marker { display: none; }
.tr-preguntas summary::after {
	content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
	border-right: 2px solid var(--acento-texto); border-bottom: 2px solid var(--acento-texto);
	transform: rotate(45deg); transition: transform .3s var(--suave);
}
.tr-preguntas details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.tr-preguntas details p { margin: 0; padding: 0 22px 22px; color: var(--apagado); }

/* ---------- llamada a la acción: la banda verde de cierre ---------- */

.tr-cta {
	position: relative; overflow: hidden;
	padding: clamp(44px, 8vw, 88px) clamp(22px, 5vw, 60px);
	border-radius: var(--radio-grande);
	background: var(--acento);
	color: var(--tinta);
	text-align: center;
	--titular: #000000;
	--acento-texto: #000000;
	--apagado: #1F3A05;
}
.tr-cta > * { position: relative; z-index: 1; }
/* Sin escena: sobre verde no hay nada que fundir. */
.tr-cta > .tr-escena { display: none; }
.tr-cta h2 { font-size: clamp(1.8rem, 4.4vw, 3rem); letter-spacing: -.035em; }
.tr-cta p { max-width: 580px; margin: 16px auto 0 !important; color: var(--apagado); font-size: 1.08rem; }
.tr-cta .wp-block-buttons { justify-content: center; margin-top: 32px !important; }
.tr-cta .tr-boton,
.tr-cta .wp-block-button__link { background: #000; color: #F5F5F7; }
.tr-cta .tr-boton:hover,
.tr-cta .wp-block-button__link:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.tr-cta .tr-boton--linea,
.tr-cta .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: #000; border-color: rgba(0, 0, 0, .4); }
.tr-cta--entrada { margin-top: 64px; padding: 40px 26px; }
.tr-cta--entrada h2 { font-size: 1.5rem; }
.tr-cta--entrada p + p { margin-top: 26px !important; }

/* ---------- portada de página interior ---------- */

.tr-portada {
	position: relative; isolation: isolate; overflow: hidden;
	padding: calc(var(--barra) + clamp(44px, 8vw, 88px)) 0 clamp(32px, 5vw, 56px);
}
.tr-portada > .tr-ancho > * + * { margin-top: 18px !important; }
.tr-portada__titulo { max-width: 900px; font-size: clamp(2.2rem, 6vw, 3.8rem); letter-spacing: -.035em; line-height: 1.04; }
.tr-portada__texto { max-width: 680px; color: var(--apagado); font-size: clamp(1.04rem, 2vw, 1.2rem); }
.tr-portada__botones { display: flex; flex-wrap: wrap; gap: 12px; }
.tr-portada--centro { text-align: center; min-height: 64svh; display: grid; align-items: center; }
.tr-portada--centro .tr-antetitulo, .tr-portada--centro .tr-portada__botones { justify-content: center; }
.tr-portada--centro .tr-portada__titulo, .tr-portada--centro .tr-portada__texto { margin-inline: auto; }

/* Portada con animación: bloque negro. En móvil la escena va en una franja debajo del texto;
   en escritorio, a la derecha. */
.tr-portada--escena { padding-bottom: calc(clamp(48px, 8vw, 88px) + 185px); background: var(--fondo); color: var(--texto); }
.tr-portada--escena > .tr-escena {
	position: absolute; inset: auto 0 0 0; z-index: -1; height: 240px;
	mix-blend-mode: screen;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 34%);
	mask-image: linear-gradient(to bottom, transparent, #000 34%);
}
.tr-portada--escena > .tr-escena video { object-fit: contain; }
@media (min-width: 1280px) {
	.tr-portada--escena { padding-bottom: clamp(48px, 8vw, 88px); }
	.tr-portada--escena > .tr-escena {
		inset: 0 -110px 0 auto; width: min(60%, 940px); height: auto;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 40%);
		mask-image: linear-gradient(to right, transparent, #000 40%);
	}
	.tr-portada--escena > .tr-escena video { object-position: right 56%; }
}

.tr-aviso {
	max-width: 680px; padding: 13px 16px;
	border-radius: 12px; background: var(--acento-suave);
	font-size: .9rem; color: var(--texto);
}
.tr-aviso strong { color: var(--acento-texto); }

/* ---------- capturas ---------- */

.tr-seccion--pegada > .tr-ancho > .tr-marco:first-child { margin-top: clamp(20px, 3vw, 36px); }
.tr-marco {
	padding: 34px 10px 10px;
	border-radius: var(--radio);
	background:
		radial-gradient(circle at 20px 17px, var(--acento) 4.500px, transparent 5.500px),
		radial-gradient(circle at 36px 17px, rgba(255, 255, 255, .35) 4.500px, transparent 5.500px),
		radial-gradient(circle at 52px 17px, rgba(255, 255, 255, .35) 4.500px, transparent 5.500px),
		#000;
	box-shadow: var(--sombra);
}
.tr-marco img { display: block; width: 100%; border-radius: 10px; }

/* Las capturas del taller traen mucho blanco debajo: se recortan por arriba. */
.tr-pantalla .tr-marco img { aspect-ratio: 16 / 8.4; object-fit: cover; object-position: top; background: #fff; }
.tr-pantalla { display: grid; gap: 22px; }
.tr-pantalla + .tr-pantalla { margin-top: clamp(56px, 8vw, 104px) !important; }
.tr-pantalla__texto > * + * { margin-top: 12px !important; }
.tr-pantalla__texto h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.tr-pantalla__texto p:last-child { color: var(--apagado); }
@media (min-width: 1000px) {
	.tr-pantalla { grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: 56px; align-items: center; }
	.tr-pantalla:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, .42fr); }
	.tr-pantalla:nth-child(even) .tr-pantalla__texto { order: 2; }
}

/* ---------- equipo y testimonios ---------- */

.tr-persona {
	display: flex; flex-direction: column; gap: 10px;
	padding: clamp(24px, 3vw, 34px);
	border-radius: var(--radio); background: var(--panel);
}
.tr-persona__foto { width: 112px; margin-bottom: 8px; }
.tr-persona__foto img { display: block; width: 112px; height: 112px; object-fit: cover; border-radius: 50%; background: var(--panel-alto); }
.tr-persona h3 { font-size: 1.3rem; }
/* Las iniciales en un círculo verde, como el logo, en lugar de una foto. */
.tr-persona .tr-persona__foto.tr-iniciales {
	display: grid; place-items: center; aspect-ratio: 1; height: auto;
	border-radius: 50%; background: var(--acento); color: #000 !important;
	font-family: var(--titulos); font-size: 2.3rem; font-weight: 700; letter-spacing: -.02em; line-height: 1;
}
.tr-persona__rol { color: var(--acento-texto); font-size: .98rem; font-weight: 500; line-height: 1.45; }
.tr-persona p:not(.tr-persona__rol) { color: var(--apagado); }

.tr-testimonio { padding: clamp(26px, 4vw, 44px); border-left: 3px solid var(--acento); border-radius: var(--radio); background: var(--panel); }
.tr-testimonio__cita { font-family: var(--titulos); font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.4; }
.tr-testimonio__autor { margin-top: 18px !important; color: var(--apagado); font-size: .95rem; }
.tr-testimonio__autor strong { color: var(--texto); }

/* ---------- contacto ---------- */

.tr-datos { display: grid; gap: 12px; }
.tr-dato {
	display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-items: center;
	padding: 18px 20px; border-radius: var(--radio); background: var(--panel);
}
.tr-dato.tr-ico::before { grid-row: span 2; margin: 0; }
.tr-dato :is(h2, h3) { font-family: inherit; font-size: .76rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--apagado); }
.tr-dato p { margin-top: 3px !important; color: var(--texto) !important; font-weight: 600; overflow-wrap: anywhere; }
.tr-dato a { color: inherit; }
.tr-dato a:hover { color: var(--acento-texto); }

.tr-form {
	display: grid; gap: 18px;
	padding: clamp(22px, 4vw, 40px);
	border-radius: 22px; background: var(--panel);
}
.tr-form__fila { display: grid; gap: 18px; }
@media (min-width: 640px) { .tr-form__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tr-form label { display: block; margin-bottom: 7px; color: var(--apagado); font-size: .86rem; font-weight: 600; }
.tr-form label span { font-weight: 400; }
.tr-form input[type="text"], .tr-form input[type="email"], .tr-form input[type="tel"], .tr-form select, .tr-form textarea {
	width: 100%; min-height: 50px; padding: 13px 16px;
	border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo);
	color: var(--texto); font: inherit; font-size: 1rem;
	transition: border-color .2s, box-shadow .2s;
}
.tr-form textarea { resize: vertical; min-height: 130px; }
.tr-form ::placeholder { color: #9A9AA0; }
.tr-form input:focus, .tr-form select:focus, .tr-form textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.tr-form__acepto label { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 400; cursor: pointer; }
.tr-form__acepto input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--acento-texto); }
/* El enlace a la política va subrayado: dentro de una frase, el color solo no basta para verlo como enlace. */
.tr-form__acepto a { text-decoration: underline; text-underline-offset: 3px; }
.tr-form__enviar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.tr-form__nota { color: var(--apagado); font-size: .86rem; }
.tr-form__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tr-form__estado:empty { display: none; }
.tr-form__estado { padding: 13px 16px; border-radius: 12px; font-size: .95rem; }
.tr-form__estado[data-estado="ok"] { background: var(--acento-suave); }
.tr-form__estado[data-estado="error"] { background: rgba(255, 107, 107, .12); }
.tr-form.es-enviando button { opacity: .6; pointer-events: none; }

/* ---------- páginas de texto y entradas ---------- */

.tr-texto { padding: calc(var(--barra) + clamp(44px, 8vw, 88px)) 0 var(--seccion); }
.tr-texto h1 { font-size: clamp(2rem, 5.4vw, 3.2rem); letter-spacing: -.035em; margin-top: 14px; }
.tr-texto__fecha { margin-top: 14px; color: var(--apagado); font-size: .9rem; }
.tr-texto__imagen { margin-top: 34px; }
.tr-texto__imagen img { display: block; width: 100%; border-radius: var(--radio); }

.tr-prosa { margin-top: 40px; }
.tr-prosa > * + * { margin-top: 1.25em; }
.tr-prosa p, .tr-prosa li { color: var(--apagado); }
.tr-prosa h2 { margin-top: 2em; font-size: clamp(1.35rem, 3vw, 1.7rem); }
.tr-prosa h3 { margin-top: 1.7em; font-size: 1.2rem; }
.tr-prosa ul, .tr-prosa ol { padding-left: 1.2em; }
.tr-prosa li + li { margin-top: .6em; }
.tr-prosa strong { color: var(--texto); }
.tr-prosa a { text-decoration: underline; text-underline-offset: 3px; }
.tr-prosa img { border-radius: var(--radio); }
.tr-prosa blockquote { margin: 1.8em 0; padding-left: 22px; border-left: 3px solid var(--acento); font-family: var(--titulos); font-size: 1.2rem; color: var(--texto); }
.tr-prosa .wp-block-table { overflow-x: auto; }
.tr-prosa table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .94rem; }
.tr-prosa th, .tr-prosa td { padding: 12px 14px; border: 1px solid var(--borde); text-align: left; vertical-align: top; color: var(--apagado); }
.tr-prosa th { color: var(--texto); background: var(--panel); }

.tr-paginacion { margin-top: 56px; }
.tr-paginacion .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tr-paginacion .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--borde); border-radius: 999px; color: var(--texto); font-size: .92rem; }
.tr-paginacion .page-numbers.current, .tr-paginacion a.page-numbers:hover { border-color: var(--acento-texto); color: var(--acento-texto); text-decoration: none; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- pie: negro ---------- */

.tr-pie { background: #000; color: var(--texto); padding-top: clamp(48px, 7vw, 80px); }
.tr-pie__rejilla { display: grid; gap: 36px; }
.tr-pie__marca p { margin-top: 12px; max-width: 320px; color: var(--apagado); font-size: .95rem; }
.tr-pie__marca .tr-pie__zona { font-size: .86rem; }
.tr-pie__col h2 { font-family: inherit; font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); }
.tr-pie ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.tr-pie li { color: var(--apagado); font-size: .95rem; }
.tr-pie li a { display: inline-block; padding: 5px 0; color: var(--texto); }
.tr-pie li a:hover { color: var(--acento); text-decoration: none; }
.tr-pie__legal {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px;
	margin-top: clamp(32px, 5vw, 56px); padding-block: 22px 88px;
	border-top: 1px solid var(--borde); color: var(--apagado); font-size: .86rem;
}
.tr-pie__legal ul { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.tr-pie__legal li a { color: var(--apagado); font-size: .86rem; }
@media (min-width: 700px) {
	.tr-pie__rejilla { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 40px; }
	.tr-pie__legal { padding-bottom: 28px; }
}

.tr-whatsapp {
	position: fixed; right: 18px; bottom: 18px; z-index: 90;
	display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
	background: var(--acento); color: var(--tinta);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
	transition: transform .25s var(--suave);
}
.tr-whatsapp:hover { transform: translateY(-3px) scale(1.04); }
@media (min-width: 1000px) { .tr-whatsapp { right: 28px; bottom: 28px; } }

/* ---------- móvil, más compacto ----------
   Daniel, 20/10/2026: «que según vayas bajando no queden espacios exagerados o bloques muy grandes».
   Medido en un iPhone (390 px): la portada pasaba de casi 17 pantallas. */
@media (max-width: 699px) {
	/* Tarjetas con icono: el icono a la izquierda del título y el texto debajo, a todo el ancho. */
	.tr-tarjeta:not(.tr-muestra) { padding: 20px; gap: 10px; }
	.tr-tarjeta__imagen { margin: -20px -20px 8px; }
	.tr-tarjeta :is(h2, h3) { font-size: 1.18rem; }
	.tr-tarjeta p { font-size: .98rem; }
	.tr-tarjeta.tr-ico { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: center; }
	.tr-tarjeta.tr-ico::before { width: 40px; height: 40px; margin: 0; border-radius: 11px; background-size: 21px, auto; }
	.tr-tarjeta.tr-ico > * { grid-column: 1 / -1; }
	.tr-tarjeta.tr-ico > :is(h2, h3) { grid-column: 2; }
	.tr-ico > .tr-etiqueta, .tr-paso > .tr-etiqueta { top: 20px; right: 20px; }
	.tr-tarjeta:has(> .tr-etiqueta) > :is(h2, h3) { padding-right: 76px; }

	/* Pasos numerados: el número al lado del título. */
	.tr-paso, .tr-historia__paso { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: baseline; }
	.tr-paso > *, .tr-historia__paso > * { grid-column: 1 / -1; }
	.tr-paso > .tr-paso__n, .tr-historia__paso > .tr-paso__n { grid-column: 1; font-size: 1.6rem !important; }
	.tr-paso > :is(h2, h3), .tr-historia__paso > :is(h2, h3) { grid-column: 2; }
	/* La etiqueta de un paso («Gratis»), debajo del título y alineada con él, sin flotar en la esquina (Daniel, 21/10/2026). */
	.tr-paso > .tr-paso__n, .tr-paso > :is(h2, h3) { grid-row: 1; }
	.tr-paso > .tr-etiqueta { position: static; grid-column: 2; grid-row: 2; justify-self: start; margin-top: -2px; }
	.tr-paso:has(> .tr-etiqueta) > :is(h2, h3) { padding-right: 0; }
	.tr-historia__paso { padding: 20px; }
	.tr-historia__paso h3 { font-size: 1.18rem; }

	/* La animación fija de «Cómo lo hacemos», más baja. */
	.tr-historia__escena { height: 30svh; min-height: 190px; }

	/* Las tres cifras, en una fila. */
	.tr-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.tr-cifra { padding: 18px 8px; }
	.tr-cifra__num { font-size: 1.9rem; }
	.tr-cifra__texto { font-size: .8rem; line-height: 1.3; }

	/* Los azulejos de las apps, en una fila que se desliza, con el siguiente asomando. */
	.tr-azulejos {
		display: flex; gap: 10px; padding: 0 var(--margen) 4px;
		overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margen);
		scrollbar-width: none;
	}
	.tr-azulejos::-webkit-scrollbar { display: none; }
	.tr-azulejo { flex: 0 0 84%; scroll-snap-align: start; padding: 28px 18px 0; border-radius: var(--radio); }
	.tr-azulejo > * + * { margin-top: 10px !important; }
	.tr-azulejo h3 { font-size: 1.75rem; }
	.tr-azulejo > p:not(.tr-antetitulo) { font-size: 1rem; }
	.tr-azulejo .tr-enlaces { margin-top: 12px !important; gap: 6px 18px; font-size: .98rem; }
	.tr-azulejo__imagen { padding-top: 18px; }

	/* Las muestras de la página de apps y las capturas del taller, con menos aire. */
	.tr-muestra > :not(.tr-muestra__imagen) { margin-inline: 20px; }
	.tr-muestra > .tr-etiqueta { margin-top: 16px; }
	.tr-muestra__imagen + h3 { margin-top: 16px; }
	.tr-muestra > .tr-mas { padding-block: 12px 20px; }
	.tr-pantalla { gap: 16px; }
	.tr-pantalla + .tr-pantalla { margin-top: 40px !important; }

	/* Portada interior con animación: la franja de la animación, más baja. */
	.tr-portada--escena { padding-bottom: calc(var(--seccion) + 120px); }
	.tr-portada--escena > .tr-escena { height: 170px; }

	/* Equipo: la foto, pequeña y al lado del nombre. */
	.tr-persona { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-items: center; padding: 20px; }
	.tr-persona > * { grid-column: 1 / -1; }
	.tr-persona > .tr-persona__foto { grid-column: 1; grid-row: span 2; width: 64px; margin: 0; }
	.tr-persona__foto img { width: 64px; height: 64px; }
	.tr-persona .tr-persona__foto.tr-iniciales { font-size: 1.35rem; }
	.tr-persona > h3, .tr-persona > .tr-persona__rol { grid-column: 2; }

	/* Cabeceras y cierres, un poco más ajustados. */
	.tr-cabecera { margin-bottom: 24px !important; }
	.tr-cabecera > * + * { margin-top: 10px !important; }
	.tr-seccion--centro .tr-titulo { font-size: 1.95rem; }
	.tr-seccion .tr-rejilla + .tr-cabecera,
	.tr-seccion .tr-cifras + .tr-cabecera { margin-top: 44px !important; }
	.wp-block-buttons.tr-centro { margin-top: 28px; }
	.tr-cta { padding: 36px 22px; }
	.tr-cta .wp-block-buttons { margin-top: 24px !important; }

	/* Pie: las listas en dos columnas. */
	.tr-pie { padding-top: 40px; }
	.tr-pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
	.tr-pie__marca { grid-column: 1 / -1; }
	.tr-pie__legal { margin-top: 28px; }
}

/* ---------- aparición al hacer scroll (solo con JavaScript) ---------- */

/* Solo fundido y subida. Con desenfoque añadido la página bajaba a tirones en ordenadores con
   gráfica integrada (medido: de 15–46 a 61 fotogramas por segundo al quitarlo). */
.tr-js .tr-aparece { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--suave), transform .8s var(--suave); }
.tr-js .tr-aparece.es-visible { opacity: 1; transform: none; }
.tr-js .tr-escalera > * { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--suave), transform .7s var(--suave), box-shadow .35s; }
.tr-js .tr-escalera.es-visible > * { opacity: 1; transform: none; }
.tr-js .tr-escalera.es-visible > :nth-child(2) { transition-delay: .09s; }
.tr-js .tr-escalera.es-visible > :nth-child(3) { transition-delay: .18s; }
.tr-js .tr-escalera.es-visible > :nth-child(4) { transition-delay: .27s; }
.tr-js .tr-escalera.es-visible > :nth-child(5) { transition-delay: .36s; }
.tr-js .tr-escalera.es-visible > :nth-child(6) { transition-delay: .45s; }
.tr-js .tr-escalera.es-lista > * { transition-delay: 0s !important; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.tr-js .tr-aparece, .tr-js .tr-escalera > * { opacity: 1; transform: none; }
	.tr-js .tr-historia__paso { opacity: 1; }
}