/*
Theme Name: Triangle Estudio
Theme URI: https://www.triangleestudio.com
Author: Triangle Estudio
Description: Tema de bloques nativo (FSE), sin builders, para la web de Triangle Estudio.
Version: 1.20.3
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: triangle-estudio
*/

/* ==========================================================================
   Medidas tomadas de la web original (www.triangleestudio.com):
   - Rojo de marca: #FF4040. Texto: #414141. Pie: negro puro.
   - Titulares de sección: enormes (118px sobre pantalla de 1962px), en dos
     líneas, con el punto final en rojo y el número de sección en pequeño.
   - Los proyectos NO son una rejilla: son bloques apilados a lo ancho, con
     una etiqueta girada en el margen izquierdo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cabecera: flota transparente sobre el vídeo en la portada; blanca y
   normal en el resto de páginas.
   -------------------------------------------------------------------------- */
.triangle-header {
	position: relative;
	z-index: 20;
}

.triangle-header a,
.triangle-header .wp-block-navigation-item__label {
	font-family: var(--wp--preset--font-family--interfaz);
	/* Se partió del doble del original (0,94rem), se bajó al 70 % de ese doble
	   —1,32rem— y de ahí tres puntos más: 1,13rem. Sigue siendo bastante más
	   legible que la web vieja. */
	font-size: 1.13rem;
	text-transform: lowercase;
	color: var(--wp--preset--color--texto);
}

.triangle-header .wp-block-navigation {
	gap: clamp(1.5rem, 3vw, 3.5rem);
}

.triangle-header .custom-logo-link img {
	max-height: 69px;
	width: auto;
}

/* En la portada la cabecera se superpone al vídeo, en blanco, y se vuelve
   negra al bajar (lo hace assets/js/cabecera.js). */
.home .triangle-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	transition: background-color 0.3s;
}

.home .triangle-header--fondo {
	background: var(--wp--preset--color--negro);
}

body.admin-bar.home .triangle-header {
	top: 32px;
}

/* En pantallas estrechas la barra de administración de WordPress es más alta. */
@media (max-width: 782px) {
	body.admin-bar.home .triangle-header {
		top: 46px;
	}
}

/* Los enlaces del menú, en blanco sobre el vídeo. Con `.home .triangle-header a`
   a secas ya no bastaba: WordPress trae
   `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
   { color: inherit }`, con más especificidad, y el menú se estaba viendo gris
   oscuro sobre el vídeo. */
.home .triangle-header a,
.home .triangle-header a.wp-block-navigation-item__content,
.home .triangle-header .wp-block-navigation-submenu__toggle.wp-block-navigation-submenu__toggle,
.home .triangle-header .wp-block-navigation-item__label {
	color: var(--wp--preset--color--blanco);
}

.home .triangle-header a:hover,
.home .triangle-header .wp-block-navigation-item__label:hover {
	color: var(--wp--preset--color--rojo);
}

/* --- El desplegable de servicios, en columnas por familia -----------------
   El menú lleva los servicios anidados en tres familias —Identidad, Relato y
   Mirada— igual que la página de servicios. En vez de tres desplegables en
   cascada, que en escritorio son incomodísimos, el segundo nivel se planta
   quieto y cada familia se convierte en una columna.

   Solo en escritorio: en móvil el menú se abre a pantalla completa y el
   comportamiento normal de WordPress (una lista dentro de otra) ya va bien. */
@media (min-width: 900px) {
	/* El panel se abre debajo de «servicios», alineado a su borde izquierdo.
	   Para que quepa hay que apretarlo: WordPress le pone a cada columna un
	   ancho mínimo de 208 px y relleno a cada enlace, y entre eso y los huecos
	   se iba a más de mil píxeles. Sin esos mínimos baja a unos 700 y entra sin
	   problema hasta en una pantalla de portátil. */
	/* Cinco clases a propósito: WordPress trae
	   `.wp-block-navigation.items-justified-right … .has-child .wp-block-navigation__submenu-container
	   { left: auto; right: 0 }` —cuatro clases— y con menos que eso el panel se
	   seguía pegando al borde derecho en vez de abrirse bajo «servicios». */
	.triangle-header .wp-block-navigation .te-menu-servicios.has-child > .wp-block-navigation__submenu-container {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: clamp(1.25rem, 2vw, 2.25rem);
		padding: 1.5rem 1.75rem;
		width: max-content;
		max-width: calc(100vw - 3rem);
		min-width: 0;
		top: 100%;
		left: 0;
		right: auto;
		translate: none;
		/* WordPress recorta los desplegables cerrados con overflow: hidden.
		   Aquí el de dentro tiene que verse, así que se abre. */
		overflow: visible;
	}

	/* Cada familia es una columna: el nombre arriba y sus servicios debajo. */
	.triangle-header .te-menu-servicios > .wp-block-navigation__submenu-container > li {
		flex-direction: column;
		align-items: flex-start;
		min-width: 0;
	}

	/* Fuera los anchos mínimos y los rellenos que trae el bloque: aquí sobran y
	   son los que engordaban el panel. */
	.triangle-header .te-menu-servicios .wp-block-navigation__submenu-container li,
	.triangle-header .te-menu-servicios .wp-block-navigation__submenu-container a {
		min-width: 0;
		white-space: nowrap;
	}

	.triangle-header .te-menu-servicios .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0.4rem 0;
	}

	/* Cada familia deja de ser un desplegable y pasa a ser una columna fija. */
	.triangle-header .te-menu-servicios .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		position: static;
		opacity: 1;
		visibility: visible;
		flex-direction: column;
		width: auto;
		min-width: 0;
		margin: 0.9rem 0 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		translate: none;
		/* Y aquí lo mismo: sin alto cero ni recorte, que si no la columna no se
		   ve aunque esté puesta. */
		height: auto;
		max-height: none;
		overflow: visible;
	}

	/* El nombre de la familia es un encabezado, no un destino. */
	.triangle-header .te-menu-servicios > .wp-block-navigation__submenu-container > li > a {
		font-size: 0.9rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		opacity: 0.55;
		cursor: default;
	}

	.triangle-header .te-menu-servicios > .wp-block-navigation__submenu-container > li > a:hover {
		opacity: 0.55;
	}

	/* Sin la flechita: no hay nada que desplegar, ya está desplegado. */
	.triangle-header .te-menu-servicios .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
		display: none;
	}
}

/* La página en la que estás va marcada en rojo, el color de acento de la web.
   La clase la pone inc/menu-activo.php; en el desplegable «casos de estudio»
   se marca también el padre cuando estás en uno de sus casos.

   Los selectores llevan la clase repetida a propósito. WordPress trae
   `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
   { color: inherit }`, que son tres clases: con menos que eso el marcado no se
   aplicaba y el enlace seguía gris. */
.triangle-header .te-menu-activo > a.wp-block-navigation-item__content,
.triangle-header .te-menu-activo > .wp-block-navigation-submenu__toggle.wp-block-navigation-submenu__toggle,
.triangle-header .te-menu-activo .wp-block-navigation-item__label {
	color: var(--wp--preset--color--rojo);
}

/* En la portada los enlaces van en blanco sobre el vídeo; el marcado tiene que
   ganarle también a esa regla. */
.home .triangle-header .te-menu-activo > a.wp-block-navigation-item__content,
.home .triangle-header .te-menu-activo > .wp-block-navigation-submenu__toggle.wp-block-navigation-submenu__toggle,
.home .triangle-header .te-menu-activo .wp-block-navigation-item__label {
	color: var(--wp--preset--color--rojo);
}

/* El logotipo es oscuro; sobre el vídeo se invierte a blanco por CSS para no
   depender de tener un segundo archivo de logo en versión clara. */
.home .triangle-header .custom-logo-link img {
	filter: brightness(0) invert(1);
}



/* Los iconos de redes siguen al menú: negros en las páginas interiores y
   blancos sobre el vídeo de la portada. El SVG se pinta con `currentColor`, así
   que basta con darle color al <li>.

   El bloque de WordPress escribía el color en un `style=` del propio elemento y
   ninguna regla podía con él —un estilo en línea gana siempre—, por eso se le
   quitó el ajuste de color en parts/header.html. */
.triangle-header .wp-social-link {
	background: none;
	padding: 0;
	margin: 0 0 0 0.65rem;
	color: var(--wp--preset--color--texto);
}

.home .triangle-header .wp-social-link {
	color: var(--wp--preset--color--blanco);
}

.triangle-header .wp-social-link svg {
	width: 2.07rem;
	height: 2.07rem;
}

/* Submenú desplegable de «casos de estudio». */
.triangle-header .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--negro);
	border: none;
	padding: 0.5rem 0;
	min-width: 13rem;
}

/* Hay que alcanzar también el <span> interior de cada enlace: si sólo se
   estiliza el <a>, el span conserva el gris y las minúsculas de la cabecera
   y queda gris oscuro sobre fondo negro, ilegible. */
.triangle-header .wp-block-navigation__submenu-container li a,
.triangle-header .wp-block-navigation__submenu-container li a .wp-block-navigation-item__label {
	color: var(--wp--preset--color--blanco);
	text-transform: none;
}

.triangle-header .wp-block-navigation__submenu-container li a {
	padding: 0.5rem 1.25rem;
}

.triangle-header .wp-block-navigation__submenu-container li a:hover,
.triangle-header .wp-block-navigation__submenu-container li a:hover .wp-block-navigation-item__label {
	color: var(--wp--preset--color--rojo);
}

/* La flechita del desplegable toma el color del texto de la cabecera. */
.triangle-header .wp-block-navigation__submenu-icon svg {
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   2. Portada: vídeo a pantalla completa con el titular en tres líneas.
   -------------------------------------------------------------------------- */
.te-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: #1a1a1a;
	/* WordPress separa los bloques hermanos con un margen automático; aquí
	   dejaría una franja blanca entre la cabecera y el vídeo. */
	margin-block-start: 0;
}

.te-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.te-hero__contenido {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-inline: clamp(1.25rem, 4vw, 5rem);
	padding-top: 6rem;
	color: var(--wp--preset--color--blanco);
}

.te-hero__linea-1,
.te-hero__linea-2,
.te-hero__linea-3 {
	display: block;
	margin: 0;
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--display);
}

.te-hero__linea-1 {
	font-size: var(--wp--preset--font-size--hero-1);
	font-weight: 600;
	letter-spacing: -0.05em;
	line-height: 1;
	text-transform: uppercase;
}

.te-hero__linea-2 {
	font-size: var(--wp--preset--font-size--hero-2);
	font-weight: 600;
	letter-spacing: -0.1em;
	line-height: 0.82;
	text-transform: uppercase;
}

.te-hero__linea-3 {
	font-size: var(--wp--preset--font-size--hero-3);
	font-weight: 300;
	letter-spacing: 0.1em;
	line-height: 1.4;
	margin-top: 0.15em;
}

/* --------------------------------------------------------------------------
   3. Titulares de sección: dos líneas, punto rojo y número pequeño girado.
   -------------------------------------------------------------------------- */
.te-titulo {
	font-family: var(--wp--preset--font-family--titular);
	font-size: var(--wp--preset--font-size--seccion);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 0.92;
	color: var(--wp--preset--color--texto);
	margin: 0;
}

.te-titulo .te-punto {
	color: var(--wp--preset--color--rojo);
}

.te-titulo .te-num {
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--etiqueta);
	font-weight: 400;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--texto);
	writing-mode: vertical-rl;
	vertical-align: bottom;
	margin-left: 0.6rem;
	margin-bottom: 0.35em;
}

/* Etiqueta girada que acompaña a cada bloque, en el margen izquierdo. */
.te-etiqueta-girada {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--etiqueta);
	font-weight: 400;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--texto);
	white-space: nowrap;
	margin: 0;
}

/* --------------------------------------------------------------------------
   4. «Un hub de creativos»: texto a la izquierda, isotipo a la derecha.
   -------------------------------------------------------------------------- */
.te-intro {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: clamp(2rem, 5vw, 6rem);
	align-items: center;
}

.te-intro__texto p {
	font-size: var(--wp--preset--font-size--cuerpo-grande);
	font-weight: 300;
	line-height: 1.35;
	letter-spacing: 0.02em;
	max-width: 18em;
	margin: 2.5rem 0 0;
}

.te-intro__isotipo {
	width: clamp(140px, 22vw, 420px);
	height: auto;
}

@media (max-width: 860px) {
	.te-intro {
		grid-template-columns: 1fr;
	}
	.te-intro__isotipo {
		justify-self: start;
	}
}

/* --------------------------------------------------------------------------
   5. Proyectos: bloques apilados, etiqueta girada a la izquierda, vídeo a la
   derecha con el texto superpuesto.
   -------------------------------------------------------------------------- */
.te-proyecto {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: clamp(1rem, 3vw, 3rem);
	align-items: center;
	margin-top: clamp(3rem, 7vw, 9rem);
}

.te-proyecto__etiqueta {
	justify-self: center;
	align-self: center;
}

/* La proporción es exactamente la de los vídeos originales (1280x680), para
   que no se recorte nada por los lados ni por arriba. */
.te-proyecto__media {
	position: relative;
	aspect-ratio: 1280 / 680;
	overflow: hidden;
	background: #111;
}

.te-proyecto__media video,
.te-proyecto__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Velo suave en el lado derecho: en los vídeos oscuros no se nota, y en los
   claros mantiene legible el texto sobrepuesto en cualquier fotograma. */
.te-proyecto__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, transparent 45%, rgba(0, 0, 0, 0.5) 100%);
}

.te-proyecto__info {
	position: absolute;
	z-index: 2;
	left: 55%;
	right: 4.5%;
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--blanco);
}

.te-proyecto__categoria {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(0.85rem, 1.05vw, 1.2rem);
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: lowercase;
	margin: 0 0 0.7rem;
	color: var(--wp--preset--color--blanco);
	opacity: 0.9;
}

.te-proyecto__titulo {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.6rem, 2.7vw, 3.4rem);
	font-weight: 300;
	font-style: italic;
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0 0 1.8rem;
	color: var(--wp--preset--color--blanco);
	text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

/* Botón de contorno rojo, el mismo de toda la web. */
.te-boton {
	display: inline-block;
	font-family: var(--wp--preset--font-family--interfaz);
	font-size: clamp(0.9rem, 1.05vw, 1.15rem);
	line-height: 1;
	padding: 0.85em 1.9em;
	border: 1px solid var(--wp--preset--color--rojo);
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.te-boton--claro {
	color: var(--wp--preset--color--blanco);
}

.te-boton:hover {
	background: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--blanco);
}

@media (max-width: 860px) {
	/* En pantallas estrechas el vídeo se queda demasiado bajo para meterle
	   texto encima sin apretarlo. Se saca el texto debajo del vídeo: se lee
	   mucho mejor y no hay que recortar nada de la imagen. */
	.te-proyecto {
		grid-template-columns: 1fr;
		margin-top: clamp(2.5rem, 9vw, 4rem);
	}

	.te-proyecto__etiqueta {
		display: none;
	}

	.te-proyecto__media::after {
		display: none;
	}

	/* El texto va dentro de la caja del vídeo en el HTML. Para poder sacarlo
	   debajo hay que soltar la proporción fija y el recorte de esa caja, y
	   dejar que el vídeo mande su propia altura. */
	.te-proyecto__media {
		aspect-ratio: auto;
		overflow: visible;
		background: none;
	}

	.te-proyecto__media video,
	.te-proyecto__media img {
		position: static;
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1280 / 680;
	}

	.te-proyecto__info {
		position: static;
		transform: none;
		margin-top: 1.1rem;
		color: var(--wp--preset--color--texto);
	}

	.te-proyecto__categoria {
		font-size: 0.8rem;
		color: var(--wp--preset--color--texto);
		opacity: 0.65;
		margin-bottom: 0.35rem;
	}

	.te-proyecto__titulo {
		font-size: clamp(1.45rem, 6.5vw, 2.2rem);
		color: var(--wp--preset--color--texto);
		text-shadow: none;
		margin-bottom: 1.1rem;
	}

	.te-proyecto .te-boton--claro {
		color: var(--wp--preset--color--texto);
	}
}

/* --------------------------------------------------------------------------
   6. Clientes: rejilla de cuatro columnas, logos en gris muy claro.
   -------------------------------------------------------------------------- */
.te-clientes {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: clamp(1rem, 3vw, 3rem);
	align-items: center;
	justify-items: center;
	margin-top: clamp(3rem, 6vw, 7rem);
}

.te-clientes__rejilla {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(2rem, 5vw, 5.5rem);
	align-items: center;
	justify-items: center;
	width: 100%;
}

.te-clientes__rejilla img {
	max-width: 100%;
	max-height: 110px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1) opacity(0.4);
	transition: filter 0.25s ease;
}

.te-clientes__rejilla img:hover {
	filter: grayscale(0) opacity(1);
}

/* De algunos clientes solo existe el logo en blanco (FirstFit, Aramayo,
   Wilde), que sobre fondo blanco no se vería. Se invierten a negro. */
.te-clientes__rejilla img.te-logo--invertir {
	filter: invert(1) grayscale(1) opacity(0.28);
}

.te-clientes__rejilla img.te-logo--invertir:hover {
	filter: invert(1) grayscale(1) opacity(0.85);
}

@media (max-width: 860px) {
	.te-clientes__rejilla {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --------------------------------------------------------------------------
   7. Letras: tres artículos centrados.
   -------------------------------------------------------------------------- */
.te-letras .wp-block-post-template {
	gap: clamp(1.5rem, 4vw, 3.5rem) !important;
}

.te-letras .wp-block-post {
	text-align: center;
}

.te-letras .wp-block-post-date {
	font-size: var(--wp--preset--font-size--etiqueta);
	color: #9a9a9a;
	margin-bottom: 0.5rem;
}

.te-letras .wp-block-post-terms {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.6rem;
}

.te-letras .wp-block-post-terms a {
	color: var(--wp--preset--color--rojo);
}

.te-letras .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	line-height: 1.3;
	letter-spacing: 0;
	margin: 0 0 0.8rem;
}

.te-letras .wp-block-post-title a {
	color: var(--wp--preset--color--texto);
}

.te-letras .wp-block-post-excerpt {
	font-size: 0.9rem;
	line-height: 1.55;
	color: #6f6f6f;
}

.te-letras .wp-block-post-excerpt__more-text {
	display: none;
}

.te-separador {
	border: 0;
	border-top: 1px solid #dcdcdc;
	margin: clamp(2.5rem, 5vw, 4rem) 0 2rem;
}

/* --------------------------------------------------------------------------
   8. Pie: fondo negro y cierre grande.
   -------------------------------------------------------------------------- */
.triangle-footer {
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
	padding: clamp(3.5rem, 8vw, 7rem) clamp(1.25rem, 6vw, 8rem) 2rem;
}

.te-pie {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2rem;
	align-items: start;
	max-width: 1350px;
	margin-inline: auto;
}

.te-pie__cierre {
	font-family: var(--wp--preset--font-family--titular);
	font-size: var(--wp--preset--font-size--cierre);
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 0.95;
	color: var(--wp--preset--color--blanco);
	margin: 0 0 2rem;
}

.te-pie__datos {
	text-align: right;
	font-size: 0.875rem;
	line-height: 1.9;
	color: #cfcfcf;
}

.te-pie__datos a {
	color: #cfcfcf;
}

.te-pie__datos a:hover {
	color: var(--wp--preset--color--rojo);
}

.te-pie__social {
	display: flex;
	justify-content: flex-end;
	gap: 0.9rem;
	margin-bottom: 0.9rem;
}

.te-pie__social svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: var(--wp--preset--color--blanco);
}

.te-pie__legal {
	max-width: 1350px;
	margin: clamp(2.5rem, 5vw, 4rem) auto 0;
	padding-top: 1.5rem;
	border-top: 1px solid #333;
	text-align: center;
	font-size: 0.7rem;
	color: #8a8a8a;
}

@media (max-width: 860px) {
	.te-pie {
		grid-template-columns: 1fr;
	}
	.te-pie__datos {
		text-align: left;
	}
	.te-pie__social {
		justify-content: flex-start;
	}
}

/* --------------------------------------------------------------------------
   9. Aparición suave al entrar en pantalla. Es una mejora opcional: si el
   navegador no la soporta, todo se ve igual pero sin animación.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.te-anima {
			animation: te-aparecer linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 22%;
		}
	}
}

@keyframes te-aparecer {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   10. Móvil
   -------------------------------------------------------------------------- */

/* El menú desplegable se abre a pantalla completa. Los colores se fijan en el
   bloque (overlayBackgroundColor / overlayTextColor de parts/header.html);
   aquí sólo se refuerzan, porque en la portada la regla que pinta los enlaces
   de blanco dejaría el menú blanco sobre blanco: ilegible. */
.triangle-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--negro);
	padding: 2.5rem 1.5rem;
}

.triangle-header .wp-block-navigation__responsive-container.is-menu-open a,
.triangle-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__label {
	color: var(--wp--preset--color--blanco) !important;
	font-size: 1.5rem;
}

.triangle-header .wp-block-navigation__responsive-container.is-menu-open a:hover {
	color: var(--wp--preset--color--rojo);
}

.triangle-header .wp-block-navigation__responsive-container-close svg {
	fill: var(--wp--preset--color--blanco);
}

/* El botón de abrir hereda el color del texto de la cabecera. */
.triangle-header .wp-block-navigation__responsive-container-open svg {
	fill: currentColor;
}

.home .triangle-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--blanco);
}

@media (max-width: 860px) {
	/* Los iconos sociales sobran en la cabecera móvil: ya están en el pie. */
	.triangle-header .wp-block-social-links {
		display: none;
	}

	.triangle-header .custom-logo-link img {
		max-height: 34px;
	}

	/* Portada: el titular necesita respirar y no desbordar. */
	.te-hero__contenido {
		padding-top: 4rem;
	}

	.te-hero__linea-1 {
		font-size: clamp(1.55rem, 8.5vw, 2.6rem);
	}

	.te-hero__linea-2 {
		font-size: clamp(2.7rem, 16.5vw, 4.6rem);
		letter-spacing: -0.075em;
	}

	.te-hero__linea-3 {
		font-size: clamp(0.95rem, 4.6vw, 1.5rem);
		letter-spacing: 0.08em;
	}

	/* Titulares de sección. */
	.te-titulo {
		font-size: clamp(2.1rem, 11.5vw, 3.6rem);
	}

	.te-titulo .te-num {
		margin-left: 0.4rem;
	}

	.te-intro__texto p {
		font-size: clamp(1.05rem, 4.8vw, 1.5rem);
		margin-top: 1.75rem;
		max-width: none;
	}

	.te-intro__isotipo {
		width: clamp(120px, 42vw, 220px);
	}

	/* Clientes: sin etiqueta girada y con logos algo más pequeños. */
	.te-clientes {
		grid-template-columns: 1fr;
	}

	.te-clientes > .te-etiqueta-girada {
		display: none;
	}

	.te-clientes__rejilla {
		gap: 2.25rem 1.5rem;
	}

	.te-clientes__rejilla img {
		max-height: 66px;
	}

	/* Letras: una entrada por fila; en tres columnas no se leería nada. */
	.te-letras .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
	}

	.te-letras .wp-block-post-title {
		font-size: 1.25rem;
	}

	/* Pie. */
	.te-pie__cierre {
		font-size: clamp(1.9rem, 10vw, 3rem);
	}
}

/* Móviles estrechos. */
@media (max-width: 400px) {
	.te-clientes__rejilla img {
		max-height: 54px;
	}

	.te-boton {
		padding: 0.8em 1.5em;
	}
}

/* --------------------------------------------------------------------------
   11. Página Trabajos: rejilla de dos columnas a dos alturas, como en la
   web original. Cada tarjeta es una miniatura del mismo componente de vídeo
   con texto superpuesto que usa la home, en tamaño de tarjeta.
   -------------------------------------------------------------------------- */
/* Rejilla de dos columnas. Cada tarjeta tiene proporción fija, así que las de
   una misma fila salen siempre a la misma altura y alineadas con la de al
   lado. Antes eran dos columnas sueltas con la segunda bajada 4,5rem a
   propósito: quedaban desparejadas y el orden se leía en zigzag. */
.te-trabajos__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3rem 2rem;
	align-items: start;
}

/* La rejilla se sale del ancho de lectura del tema: son vídeos, no texto, y
   encajonados en la columna estrecha (1350 px) se veían diminutos.
   Hay que ensanchar la sección que la contiene, no solo la rejilla: el tope lo
   pone el grupo de bloques, y el hijo no puede pasar de su padre. Va con tres
   clases para ganarle al `max-width` que WordPress reparte desde
   `.is-layout-constrained > *`. */
.wp-block-group.is-layout-constrained.te-trabajos-ancho,
.te-trabajos__grid,
.te-galeria-videos {
	max-width: min(94vw, 110rem);
	margin-inline: auto;
}

.te-trabajo {
	display: block;
	position: relative;
	aspect-ratio: 1280 / 680;
	overflow: hidden;
	background: #111;
	color: inherit;
	text-decoration: none;
}

.te-trabajo video,
.te-trabajo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.te-trabajo::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.72) 100%);
}

.te-trabajo__contenido {
	display: block;
	position: absolute;
	z-index: 1;
	left: 1.5rem;
	right: 1.5rem;
	bottom: 1.25rem;
}

.te-trabajo__cat {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: lowercase;
	margin: 0 0 0.35rem;
	color: var(--wp--preset--color--blanco);
	opacity: 0.85;
}

.te-trabajo__titulo {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.15rem, 1.7vw, 1.6rem);
	font-weight: 300;
	font-style: italic;
	line-height: 1.15;
	margin: 0;
	color: var(--wp--preset--color--blanco);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

@media (max-width: 860px) {
	.te-trabajos__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* --------------------------------------------------------------------------
   12. Página Sostenibilidad
   -------------------------------------------------------------------------- */
/* Medidas tomadas de la web original sobre una pantalla de 1962 px:
   contenedor 1580 px; foto de apertura 844x508; texto grande 35/49 px con
   letter-spacing 0.1em; tres columnas de impacto de 272 px muy separadas
   entre sí; vídeo de Tree-Nation 992x513; tarjetas de proyecto 543x337 en
   dos columnas, con el texto alineado hacia el centro de la página. */
.te-sost {
	max-width: 1580px;
	margin-inline: auto;
}

/* Todo el texto de esta página usa el mismo aire entre letras. El color se
   fija en cada componente: una regla general de color aquí ganaría por
   especificidad al blanco del texto sobre las tarjetas de vídeo. */
.te-sost p {
	letter-spacing: 0.1em;
}

/* Titulares de sección: 100 px en la web original, con fondo blanco en el
   propio texto. Al ser un fondo sobre texto en línea, cada renglón recibe su
   propia caja blanca — eso es justo lo que hace que el titular se recorte
   sobre la foto de apertura. El punto final va en rojo y sin fondo. */
/* La web original usa Proxima Nova (de pago) a 100 px. Montserrat, la
   sustituta libre, es un 20 % más ancha: a 100 px los renglones no caben y
   los cortes se descuadran. Se compensa bajando el cuerpo a 4.3vw (~84 px),
   con lo que el ancho de línea y la presencia visual quedan como el original. */
.te-sost-titular,
.te-serv-titular {
	font-family: var(--wp--preset--font-family--titular);
	font-size: clamp(1.7rem, 4.3vw, 5.3rem);
	font-weight: 700;
	/* Interlineado justo para que las cajas blancas de cada renglón se toquen
	   sin pisarse.
	   El fondo de un elemento en línea no se pinta a la altura del
	   interlineado, sino a la del **área de contenido** de la fuente
	   (ascendente + descendente). En Montserrat eso son 1,221 em. Con
	   `line-height: 1` cada renglón avanzaba 1 em pero su caja medía 1,221, así
	   que la caja del renglón siguiente se montaba encima de la anterior y le
	   **tapaba los rabos de las letras**: la «y» de «Escríbenos y hablemos»
	   salía cortada. Con 1.221 las cajas encajan exactamente: ni solape ni
	   hueco. Medido en el navegador, no calculado a ojo. */
	line-height: 1.221;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--texto);
	margin: 0;
}

.te-sost-titular__texto,
.te-serv-titular__texto {
	background: var(--wp--preset--color--blanco);
}

.te-sost-titular__punto,
.te-serv-titular__punto {
	color: var(--wp--preset--color--rojo);
}

/* Apertura: la foto va a la derecha y el titular se monta encima por la
   izquierda, centrado verticalmente respecto a ella. */
.te-sost-portada,
.te-serv-portada {
	position: relative;
}

/* Proporciones medidas sobre el contenedor de 1580 px. */
.te-sost-portada__foto,
.te-serv-portada__foto {
	display: block;
	width: 53.4%;
	margin-left: 27.2%;
	/* `height: auto` es obligatorio: la foto de Servicios lleva los atributos
	   width y height en el HTML —van para que el navegador reserve el hueco y
	   la página no dé el salto al cargar— y esa altura le gana a `aspect-ratio`
	   si no se anula. Sin esto la foto salía vertical, de 752x1052. */
	height: auto;
	aspect-ratio: 844 / 508;
	object-fit: cover;
}

.te-sost-portada__titular,
.te-serv-portada__titular {
	position: absolute;
	top: 50%;
	left: 0;
	width: 53%;
	/* Se centra con `translate`, no con `transform`. El titular lleva
	   `te-anima`, y esa animación anima `transform` con relleno «both»: le
	   pisaba el `translateY(-50%)` y el titular se quedaba medio cuerpo por
	   debajo de la foto en vez de centrado. `translate` es una propiedad
	   aparte, así que la animación no la toca. */
	translate: 0 -50%;
	z-index: 1;
}

.te-sost-titular--seccion {
	width: 64%;
}

.te-sost-texto {
	max-width: 923px;
	margin: clamp(3rem, 8.2vw, 10rem) auto 0;
	font-size: clamp(1.15rem, 1.78vw, 2.19rem);
	font-weight: 300;
	line-height: 1.4;
	color: var(--wp--preset--color--texto);
}

/* Tres columnas estrechas y muy separadas, como en el original. */
.te-sost-impacto {
	display: grid;
	grid-template-columns: repeat(3, 17.35%);
	justify-content: space-between;
	margin-top: clamp(3rem, 9.7vw, 12rem);
}

.te-sost-impacto__titulo {
	font-size: clamp(0.95rem, 1.02vw, 1.25rem);
	font-weight: 400;
	line-height: 1.4;
	margin: 0 0 clamp(1.5rem, 3.9vw, 4.75rem);
	color: var(--wp--preset--color--texto);
}

.te-sost-impacto__texto {
	font-size: clamp(0.9rem, 0.92vw, 1.125rem);
	font-weight: 300;
	line-height: 1.4;
	margin: 0;
	color: var(--wp--preset--color--texto);
}

.te-sost-titular--reforestacion {
	margin-top: clamp(3rem, 7.1vw, 8.7rem);
}

.te-sost-titular--proyectos {
	margin-top: clamp(3rem, 10vw, 12.3rem);
}

.te-sost-video {
	display: block;
	width: clamp(280px, 50.6vw, 992px);
	aspect-ratio: 992 / 513;
	object-fit: cover;
	margin: clamp(2rem, 4.9vw, 6rem) auto 0;
}

.te-sost-panel {
	display: block;
	width: clamp(280px, 49.6vw, 974px);
	height: auto;
	margin: clamp(2.5rem, 4.3vw, 5.25rem) auto 0;
}

.te-sost-boton {
	text-align: center;
	margin-top: clamp(2rem, 3.2vw, 3.9rem);
}

/* Tarjetas: dos columnas anchas con un hueco grande en medio. */
.te-sost-proyectos {
	display: grid;
	grid-template-columns: repeat(2, 34.4%);
	justify-content: space-between;
	row-gap: clamp(2rem, 4.2vw, 5.2rem);
	margin-top: clamp(2.5rem, 10.3vw, 12.6rem);
}

.te-sost-card {
	position: relative;
	aspect-ratio: 543 / 337;
	overflow: hidden;
	background: #111;
	display: block;
	text-decoration: none;
}

.te-sost-card video,
.te-sost-card > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Velo suave de abajo arriba: en los vídeos oscuros apenas se nota y en los
   claros (el de MiPoppins) mantiene legible el texto blanco. */
.te-sost-card::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, transparent 35%, rgba(0, 0, 0, 0.55) 100%);
}

.te-sost-card__contenido {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 7.4% 5% 9%;
}

.te-sost-card__logo {
	height: clamp(34px, 4.2vw, 82px);
	width: auto;
	object-fit: contain;
}

/* Cuando no hay logotipo del cliente, su nombre va en texto, como en la
   tarjeta de PARALELO 10 de la web original. */
.te-sost-card__marca {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1rem, 1.38vw, 1.7rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--blanco);
}

.te-sost-card__categoria {
	font-size: clamp(0.7rem, 0.61vw, 0.75rem);
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.4;
	color: var(--wp--preset--color--blanco);
	margin: 0 0 clamp(0.5rem, 1.1vw, 1.35rem);
}

.te-sost-card__titulo {
	font-size: clamp(1rem, 1.38vw, 1.7rem);
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.4;
	color: var(--wp--preset--color--blanco);
	margin: 0;
}

/* En la columna izquierda el texto se alinea a la derecha y en la derecha a
   la izquierda: ambos miran hacia el centro de la página. */
.te-sost-card--derecha .te-sost-card__contenido {
	align-items: flex-end;
	text-align: right;
}

.te-sost-card--izquierda .te-sost-card__contenido {
	align-items: flex-start;
	text-align: left;
}

@media (max-width: 860px) {
	/* En móvil el titular no cabe encima de la foto: pasa a ir debajo, en
	   flujo normal, y se pierde el solape. */
	.te-sost-portada__titular,
	.te-serv-portada__titular {
		position: static;
		/* El centrado de escritorio se hace con `translate`, así que aquí hay
		   que anular `translate`, no `transform`: con `transform: none` el
		   titular seguía subido medio cuerpo y se montaba sobre la foto. */
		translate: none;
		width: 100%;
		margin-top: 1.5rem;
	}

	.te-sost-portada__foto,
.te-serv-portada__foto {
		width: 100%;
		margin-left: 0;
	}

	.te-sost-titular,
.te-serv-titular {
		font-size: clamp(1.7rem, 8.5vw, 2.8rem);
	}

	.te-sost-titular--seccion {
		width: 100%;
	}

	/* Los cortes de línea van puestos a mano en el HTML. No se ocultan en
	   móvil: sin ellos las palabras quedarían pegadas (no hay espacios
	   alrededor del salto) y además esos mismos cortes funcionan bien en
	   pantalla estrecha. */

	.te-sost-titular--reforestacion,
	.te-sost-titular--proyectos {
		margin-top: 3rem;
	}

	.te-sost-video,
	.te-sost-panel {
		width: 100%;
	}

	.te-sost-texto {
		font-size: clamp(1.1rem, 4.6vw, 1.5rem);
		margin-top: 2.5rem;
	}

	.te-sost-impacto {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		margin-top: 3rem;
	}

	.te-sost-impacto__titulo {
		font-size: 1rem;
		margin-bottom: 1rem;
	}

	.te-sost-impacto__texto {
		font-size: 0.95rem;
	}

	.te-sost-video {
		margin-top: 3.5rem;
	}

	.te-sost-proyectos {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		margin-top: 3.5rem;
	}

	/* En una sola columna, todas las tarjetas alinean igual. */
	.te-sost-card--derecha .te-sost-card__contenido,
	.te-sost-card--izquierda .te-sost-card__contenido {
		align-items: flex-start;
		text-align: left;
	}

	.te-sost-card__categoria,
	.te-sost-card__titulo {
		font-size: 0.8rem;
	}

	.te-sost-card__titulo {
		font-size: 1.05rem;
	}
}

/* --------------------------------------------------------------------------
   13. Página Contacto
   Medidas de la web original sobre 1962 px: titular de 100 px en tres
   líneas con la interrogación final en rojo; entradilla de 16 px en
   Questrial; banda gris casi a sangre con los datos de contacto y el
   formulario dentro, en una retícula de tres columnas de 250 px.
   -------------------------------------------------------------------------- */
.te-cont {
	max-width: 800px;
	margin-inline: auto;
}

/* Mismo ajuste que en Sostenibilidad: la original usa Proxima Nova a 100 px
   y Montserrat, la sustituta libre, es un 20 % más ancha. */
.te-cont-titular {
	font-family: var(--wp--preset--font-family--titular);
	font-size: clamp(1.9rem, 4.3vw, 5.3rem);
	font-weight: 700;
	line-height: 1.19;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--texto);
	margin: 0;
}

.te-cont-titular__cierre {
	color: var(--wp--preset--color--rojo);
}

.te-cont-intro {
	max-width: 651px;
	margin: clamp(1.5rem, 2.3vw, 2.9rem) 0 0;
	font-family: var(--wp--preset--font-family--interfaz);
	font-size: 1rem;
	line-height: 1.8;
	color: var(--wp--preset--color--texto);
}

/* Banda gris a sangre. */
.te-cont-caja {
	background: rgba(232, 230, 230, 0.8);
	margin-top: clamp(2rem, 1.6vw, 2rem);
	padding: clamp(2.5rem, 8.9vw, 10.9rem) clamp(1.25rem, 4vw, 5rem) clamp(2.5rem, 4.7vw, 5.75rem);
}

.te-cont-caja__interior {
	max-width: 790px;
	margin-inline: auto;
}

.te-cont-datos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 0 0 clamp(2rem, 3.4vw, 4.2rem);
}

.te-cont-datos dt {
	font-size: 1rem;
	color: var(--wp--preset--color--texto);
	margin-bottom: 0.55rem;
}

.te-cont-datos dd {
	margin: 0;
	font-size: 0.9rem;
	color: var(--wp--preset--color--texto);
}

.te-cont-datos dd a {
	color: var(--wp--preset--color--texto);
}

.te-cont-datos .te-pie__social {
	justify-content: flex-start;
	margin: 0;
	gap: 0.75rem;
}

.te-cont-datos .te-pie__social svg {
	fill: var(--wp--preset--color--texto);
	width: 0.95rem;
	height: 0.95rem;
}

/* Formulario: tres columnas iguales; el mensaje y el botón ocupan todo. */
.te-formulario {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem 1.25rem;
}

.te-formulario__campo {
	display: flex;
	flex-direction: column;
}

.te-formulario__campo--mensaje,
.te-formulario__acciones {
	grid-column: 1 / -1;
}

.te-formulario__campo label {
	font-size: 0.875rem;
	color: var(--wp--preset--color--texto);
	margin-bottom: 0.5rem;
}

/* En la original los campos llevan recuadro completo de 1 px, no una raya
   inferior, y el fondo es transparente para que se vea la banda gris. */
.te-formulario input,
.te-formulario textarea {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--wp--preset--color--texto);
	background: transparent;
	color: var(--wp--preset--color--texto);
	border-radius: 0;
	/* Sin esto, la altura fijada se sumaría al relleno y al borde, y los
	   campos salían 55 px en vez de los 37 px del original. */
	box-sizing: border-box;
}

.te-formulario input {
	height: 37px;
}

.te-formulario textarea {
	min-height: 86px;
	resize: vertical;
}

.te-formulario input:focus,
.te-formulario textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--rojo);
}

/* Campo trampa para bots: fuera de la vista, pero no display:none (algunos
   filtros de spam ignoran los campos ocultos con display:none). */
.te-formulario__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* El botón va alineado a la derecha del formulario. */
.te-formulario__acciones {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
}

.te-formulario button[type="submit"] {
	font-family: var(--wp--preset--font-family--interfaz);
	font-size: 0.94rem;
	min-width: 186px;
	height: 44px;
	border: 1px solid var(--wp--preset--color--rojo);
	border-radius: 50px;
	background: transparent;
	color: var(--wp--preset--color--texto);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.te-formulario button[type="submit"]:hover:not(:disabled) {
	background: var(--wp--preset--color--rojo);
	color: var(--wp--preset--color--blanco);
}

.te-formulario button[type="submit"]:disabled {
	opacity: 0.6;
	cursor: default;
}

.te-formulario__estado {
	margin: 0;
	font-size: 0.9rem;
	text-align: right;
}

.te-formulario__estado--ok {
	color: #2f7d3c;
}

.te-formulario__estado--error {
	color: var(--wp--preset--color--rojo);
}

@media (max-width: 860px) {
	.te-cont-titular {
		font-size: clamp(1.7rem, 8.5vw, 2.8rem);
	}

	.te-cont-datos {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.te-formulario {
		grid-template-columns: 1fr;
	}

	.te-formulario__campo {
		grid-column: 1 / -1;
	}

	.te-formulario__acciones {
		align-items: stretch;
	}

	.te-formulario__estado {
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   14. Fichas de proyecto (FirstFit, Ferrari...)
   -------------------------------------------------------------------------- */
.te-proyecto-header {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.te-proyecto-header__label {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1rem, 1.03vw, 1.25rem);
	line-height: 1.4;
	letter-spacing: normal;
	color: var(--wp--preset--color--texto);
	margin: 0 0 0.6rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--wp--preset--color--texto);
	display: inline-block;
}

.te-proyecto-header__titulo {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 2.57vw, 3.125rem);
	font-weight: 400;
	font-style: italic;
	letter-spacing: normal;
	line-height: 1.3;
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--texto);
}

.te-proyecto-header__tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.te-proyecto-header__tags li,
.te-proyecto-header__tags a {
	color: var(--wp--preset--color--rojo);
	font-size: clamp(1rem, 1.03vw, 1.25rem);
	line-height: 1.4;
}

.te-proyecto-header__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.te-proyecto-header__media video,
.te-proyecto-header__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 860px) {
	.te-proyecto-header {
		grid-template-columns: 1fr;
	}
	.te-proyecto-header__media {
		order: -1;
	}
}

.te-proyecto-seccion {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.te-proyecto-seccion__media img,
.te-proyecto-seccion__media video {
	width: 100%;
	height: auto;
	display: block;
}

.te-proyecto-subtitulo {
	font-family: var(--wp--preset--font-family--titular);
	font-size: clamp(1.6rem, 1.95vw, 2.375rem);
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.4;
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--texto);
}

.te-proyecto-seccion p {
	line-height: 1.65;
}

@media (max-width: 860px) {
	.te-proyecto-seccion {
		grid-template-columns: 1fr;
		direction: ltr;
	}
	.te-proyecto-seccion__media {
		order: -1;
	}
}

.te-proyecto-galeria {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	margin: clamp(3rem, 6vw, 5rem) 0;
}

.te-proyecto-galeria img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.te-proyecto-galeria a:first-child img,
.te-proyecto-galeria img.te-galeria-ancha {
	aspect-ratio: 2 / 1;
	grid-column: span 2;
}

@media (max-width: 700px) {
	.te-proyecto-galeria {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --------------------------------------------------------------------------
   15. Blog: cabecera oscura, filtro de categorías y rejilla de tarjetas.
   -------------------------------------------------------------------------- */
.te-blog-cabecera {
	background: var(--wp--preset--color--negro);
	color: var(--wp--preset--color--blanco);
	padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 6vw, 8rem);
	margin-top: 0;
}

.te-blog-cabecera h1 {
	font-family: var(--wp--preset--font-family--titular);
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	font-weight: 700;
	color: var(--wp--preset--color--blanco);
	margin: 0;
}

.te-blog-categorias {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	padding: 1.25rem clamp(1.25rem, 6vw, 8rem);
	border-bottom: 1px solid #e4e4e4;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.te-blog-categorias a {
	font-family: var(--wp--preset--font-family--interfaz);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #9a9a9a;
	text-decoration: none;
	padding-bottom: 0.4rem;
}

.te-blog-categorias a:hover,
.te-blog-categorias a.is-activa {
	color: var(--wp--preset--color--texto);
	border-bottom: 2px solid var(--wp--preset--color--rojo);
}

.te-blog-rejilla {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 3rem);
}

.te-blog-tarjeta {
	display: block;
	color: inherit;
	text-decoration: none;
}

.te-blog-tarjeta img,
.te-blog-tarjeta__sin-imagen {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	background: var(--wp--preset--color--gris-claro);
	margin-bottom: 1.1rem;
}

.te-blog-tarjeta__meta {
	font-size: 0.8rem;
	color: #9a9a9a;
	margin: 0 0 0.4rem;
}

.te-blog-tarjeta__categoria {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rojo);
	margin: 0 0 0.5rem;
}

.te-blog-tarjeta__titulo {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
	font-weight: 300;
	line-height: 1.3;
	color: var(--wp--preset--color--texto);
	margin: 0 0 0.6rem;
}

.te-blog-tarjeta:hover .te-blog-tarjeta__titulo {
	color: var(--wp--preset--color--rojo);
}

.te-blog-tarjeta__extracto {
	font-size: 0.9rem;
	line-height: 1.55;
	color: #6f6f6f;
	margin: 0;
}

.te-blog-vacio {
	color: #8a8a8a;
	padding: 2rem 0;
}

@media (max-width: 860px) {
	.te-blog-rejilla {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.te-blog-rejilla {
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}
}

/* Entrada individual. */
.te-post-cabecera {
	max-width: 46rem;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
	text-align: center;
}

.te-post-cabecera__categoria {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.85rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rojo);
	margin: 0 0 1rem;
}

.te-post-cabecera h1 {
	font-family: var(--wp--preset--font-family--titular);
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
}

.te-post-cabecera__meta {
	font-size: 0.9rem;
	color: #8a8a8a;
	gap: 0.5rem;
}

.te-post-cabecera__meta p,
.te-post-cabecera__meta div {
	margin: 0;
}

.te-post-imagen {
	max-width: 900px;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.te-post-imagen img {
	width: 100%;
	height: auto;
	display: block;
}

.te-post-cuerpo {
	max-width: 46rem;
	margin: 0 auto;
	font-size: 1.05rem;
	line-height: 1.75;
}

.te-post-cuerpo p {
	margin: 0 0 1.5rem;
}

.te-post-volver {
	max-width: 46rem;
	margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}

/* --------------------------------------------------------------------------
   16. Fichas de caso: bandas a sangre, reproductor destacado y carrusel.
   En la web original las imágenes de cada sección van pegadas al borde
   (izquierdo o derecho) y los bloques de texto se escalonan a distintas
   alturas, en vez de ir en una retícula rígida de dos columnas.
   -------------------------------------------------------------------------- */
.te-caso-banda {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	/* Sin hueco: en el original la foto llega exactamente a la mitad de la
	   pantalla. La separación con el texto la pone el propio texto. */
	gap: 0;
	margin-bottom: clamp(3rem, 7vw, 8rem);
}

/* La cabecera reparte 45/55: la foto es algo más ancha que la mitad. */
.te-caso-banda--cabecera {
	grid-template-columns: 1fr 55%;
}

.te-caso-banda__media img,
.te-caso-banda__media video {
	width: 100%;
	height: auto;
	display: block;
	/* Red de seguridad: sin tope, una foto muy alta desequilibra la banda
	   entera. Las verticales ya llevan además su propia banda estrecha. */
	max-height: clamp(360px, 56vw, 1080px);
	object-fit: cover;
}

/* Una foto vertical a media pantalla sale enorme. En la web original ocupa
   poco más de un tercio, así que su banda reparte 36 % / 64 %. */
.te-caso-banda--vertical.te-caso-banda--derecha {
	grid-template-columns: 1fr 36%;
}

.te-caso-banda--vertical.te-caso-banda--izquierda {
	grid-template-columns: 36% 1fr;
}

/* Sólo el texto corrido: la etiqueta de cliente también es un <p> y con el
   selector suelto le ganaba en especificidad y le cambiaba el tamaño. */
.te-caso-banda__texto p:not([class]) {
	font-size: clamp(1rem, 0.92vw, 1.125rem);
	line-height: 1.65;
}

.te-caso-banda__texto {
	padding-inline: clamp(1.25rem, 4vw, 5rem);
	/* 34rem son 544 px: el ancho medido del bloque de texto en el original. */
	max-width: 34rem;
	justify-self: center;
}

/* La imagen se pega al borde de la pantalla, no al del contenedor. */
.te-caso-banda--izquierda .te-caso-banda__media {
	grid-column: 1;
	grid-row: 1;
}

.te-caso-banda--izquierda .te-caso-banda__texto {
	grid-column: 2;
	grid-row: 1;
}

.te-caso-banda--derecha .te-caso-banda__media {
	grid-column: 2;
	grid-row: 1;
}

.te-caso-banda--derecha .te-caso-banda__texto {
	grid-column: 1;
	grid-row: 1;
}

/* Escalonado vertical: cada banda arranca un poco más abajo que la anterior,
   como en el original. */
.te-caso-banda--baja {
	margin-top: clamp(1rem, 4vw, 5rem);
}

@media (max-width: 860px) {
	.te-caso-banda,
	.te-caso-banda--izquierda,
	.te-caso-banda--derecha {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		margin-bottom: 3rem;
	}
	/* En una sola columna sobra el reparto especial de las verticales. */
	.te-caso-banda--vertical.te-caso-banda--derecha,
	.te-caso-banda--vertical.te-caso-banda--izquierda,
	.te-caso-banda--cabecera {
		grid-template-columns: 1fr;
	}

	.te-caso-banda--izquierda .te-caso-banda__media,
	.te-caso-banda--derecha .te-caso-banda__media,
	.te-caso-banda--izquierda .te-caso-banda__texto,
	.te-caso-banda--derecha .te-caso-banda__texto {
		grid-column: 1;
		grid-row: auto;
		justify-self: stretch;
		max-width: none;
	}
	.te-caso-banda--derecha .te-caso-banda__media {
		grid-row: 1;
	}
	.te-caso-banda--baja {
		margin-top: 0;
	}
}

/* ---------------------------------------- Reproductor destacado */
.te-reproductor {
	position: relative;
	min-height: clamp(420px, 41vw, 815px);
	display: grid;
	place-items: center;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	margin-bottom: clamp(2.5rem, 5vw, 6rem);
}

.te-reproductor::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.28);
}

.te-reproductor__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
}

/* Al darle a reproducir, el vídeo pasa a primer plano y desaparece el
   texto superpuesto. */
.te-reproductor.is-reproduciendo .te-reproductor__video {
	opacity: 1;
	pointer-events: auto;
	z-index: 2;
}

.te-reproductor.is-reproduciendo .te-reproductor__portada {
	opacity: 0;
	pointer-events: none;
}

.te-reproductor__portada {
	position: relative;
	z-index: 1;
	text-align: center;
	color: var(--wp--preset--color--blanco);
	padding: 2rem;
	transition: opacity 0.25s ease;
}

.te-reproductor__titulo {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 2.95vw, 3.6rem);
	font-weight: 300;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--blanco);
	margin: 0 0 1.25rem;
	/* 920 px es el ancho del titular en el original: obliga al mismo corte de
	   línea cuando el título lleva además el nombre del protagonista. */
	max-width: min(920px, 90vw);
	margin-inline: auto;
	text-wrap: balance;
}

.te-reproductor__jugar {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--wp--preset--font-family--interfaz);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--blanco);
	text-decoration: underline;
	text-underline-offset: 0.3em;
	background: none;
	border: 0;
	cursor: pointer;
}

/* El icono se dibuja con CSS a propósito: WordPress filtra las etiquetas
   <svg> dentro del contenido de una página y el icono desaparecía. */
.te-reproductor__icono {
	width: 1.7rem;
	height: 1.7rem;
	flex: 0 0 auto;
	border: 1px solid currentColor;
	border-radius: 50%;
	display: inline-grid;
	place-items: center;
}

.te-reproductor__icono::before {
	content: "";
	border-left: 0.5em solid currentColor;
	border-top: 0.33em solid transparent;
	border-bottom: 0.33em solid transparent;
	margin-left: 0.16em;
}

/* Botón «Todos los vídeos», abajo del todo. */
.te-reproductor__todos {
	position: absolute;
	z-index: 3;
	bottom: clamp(1.5rem, 3vw, 3.5rem);
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--wp--preset--font-family--interfaz);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--blanco);
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.5);
	padding: 0.7rem 1.5rem;
	cursor: pointer;
}

.te-reproductor__todos:hover {
	background: rgba(0, 0, 0, 0.8);
}

.te-reproductor__todos .te-mas {
	font-size: 1.1em;
	line-height: 1;
	transition: transform 0.2s ease;
}

.te-reproductor.is-lista-abierta .te-reproductor__todos .te-mas {
	transform: rotate(45deg);
}

/* Lista de vídeos, oculta hasta pulsar el botón. */
.te-reproductor__lista {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	gap: 0.75rem;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.75);
	overflow-x: auto;
	transform: translateY(100%);
	transition: transform 0.25s ease;
}

.te-reproductor.is-lista-abierta .te-reproductor__lista {
	transform: translateY(0);
}

.te-reproductor__opcion {
	flex: 0 0 auto;
	width: clamp(130px, 12vw, 200px);
	background: none;
	border: 2px solid transparent;
	padding: 0;
	cursor: pointer;
	color: var(--wp--preset--color--blanco);
	text-align: left;
}

.te-reproductor__opcion.is-activa {
	border-color: var(--wp--preset--color--rojo);
}

.te-reproductor__opcion img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.te-reproductor__opcion span {
	display: block;
	font-family: var(--wp--preset--font-family--interfaz);
	font-size: 0.78rem;
	padding: 0.4rem 0.2rem 0;
}

/* ---------------------------------------- Carrusel de fotos */
.te-carrusel {
	position: relative;
	margin-bottom: clamp(2.5rem, 5vw, 6rem);
}

/* Dos filas de alto fijo; cada foto conserva su proporción y el conjunto se
   desplaza en horizontal, como el mosaico del original. */
.te-carrusel__tira {
	display: grid;
	grid-auto-flow: column;
	/* Columnas de ancho fijo: si se dejan al ancho del contenido, cada
	   columna toma el de la foto más ancha de las dos y la otra deja un
	   hueco vacío al lado. */
	grid-auto-columns: clamp(150px, 17vw, 290px);
	grid-template-rows: repeat(2, clamp(110px, 13vw, 225px));
	gap: 6px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.te-carrusel__tira::-webkit-scrollbar {
	display: none;
}

.te-carrusel__tira img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.te-carrusel__flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: var(--wp--preset--color--blanco);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.te-carrusel__flecha:hover {
	background: rgba(0, 0, 0, 0.85);
}

.te-carrusel__flecha[hidden] {
	display: none;
}

.te-carrusel__flecha--atras {
	left: 0.75rem;
}

.te-carrusel__flecha--adelante {
	right: 0.75rem;
}

@media (max-width: 860px) {
	.te-carrusel__tira {
		grid-template-rows: repeat(2, 110px);
	}
	.te-carrusel__flecha {
		display: none;
	}
}

/* Reseña de cliente: la captura de una opinión publicada, centrada y a un
   ancho cómodo de leer. */
.te-caso-resena {
	display: flex;
	justify-content: center;
	margin-block: clamp(2rem, 5vw, 5rem);
	padding-inline: 1.25rem;
}

.te-caso-resena img {
	max-width: 462px;
	width: 100%;
	height: auto;
	display: block;
}

/*
 * Fotos que rematan la ficha. Reparten el ancho en proporción a cada foto,
 * igual que una fila del mosaico, así que dos apaisadas salen a mitad y mitad
 * (Ferrari) y una vertical con una apaisada salen a un tercio y dos tercios
 * (O|M Clinics), que es lo que hace la web original. Ninguna se recorta: el
 * alto lo fija la propia proporción y acaba siendo el mismo para todas.
 */
.te-caso-par {
	display: flex;
	gap: 4px;
	margin-bottom: clamp(2.5rem, 5vw, 6rem);
}

.te-caso-par img {
	flex: var(--ar) 1 0;
	min-width: 0;
	width: auto;
	height: auto;
	aspect-ratio: var(--ar);
	display: block;
}

@media (max-width: 700px) {
	.te-caso-par {
		flex-wrap: wrap;
	}
	.te-caso-par img {
		flex: var(--ar) 1 40%;
	}
}

/* -------------------------------------------------------------------------
   17. Mosaico de fotos (galería sin desplazamiento)
   ------------------------------------------------------------------------- */
.te-mosaico {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-block: clamp(2rem, 5vw, 5rem);
}

.te-mosaico__fila {
	display: flex;
	gap: 5px;
}

/*
 * El ancho lo reparte flexbox en proporción a --ar (ancho/alto de la foto) y
 * el alto lo fija esa misma proporción. Resultado: todas las fotos de la fila
 * acaban con el mismo alto, la fila llena el ancho justo, y ninguna se recorta.
 */
.te-mosaico__fila img {
	flex: var(--ar) 1 0;
	min-width: 0;
	width: auto;
	height: auto;
	aspect-ratio: var(--ar);
	display: block;
}

/* Fila incompleta: se queda a la altura de las demás en vez de estirarse. */
.te-mosaico__fila--suelta img {
	flex: 0 0 auto;
	height: clamp(180px, 22.2vw, 440px);
}

@media (max-width: 781px) {
	/* En móvil, filas de dos: con cuatro o cinco fotos por fila no se vería
	   nada. */
	.te-mosaico__fila {
		flex-wrap: wrap;
	}
	.te-mosaico__fila img {
		flex: var(--ar) 1 40%;
	}
	.te-mosaico__fila--suelta img {
		height: auto;
		flex: var(--ar) 1 40%;
	}
}

/* -------------------------------------------------------------------------
   18. Landing de marketing médico (/marketing-medico/)
   Paleta y maquetación tomadas de la página original: franjas de color a todo
   el ancho que alternan azul marino, blanco, gris muy claro y azul vivo, con
   el amarillo como acento. No usa la paleta del resto del sitio: la landing
   tiene identidad propia.
   ------------------------------------------------------------------------- */
.te-mkt {
	--mkt-marino: #12263f;
	--mkt-marino-claro: #1b3557;
	--mkt-azul: #4a9de0;
	--mkt-azul-vivo: #3b6fd4;
	--mkt-azul-texto: #3d9be9;
	--mkt-amarillo: #ffc526;
	--mkt-rojo: #e0344a;
	--mkt-verde: #00b67a;
	--mkt-gris: #f7f9fb;
	--mkt-gris-azulado: #eef3f9;
	/* Antes era fijo (68rem = 1088px): en una pantalla grande la página se
	   quedaba en una columna estrecha en medio y todo se veía pequeño. Ahora
	   crece con la ventana y solo se frena en pantallas enormes. */
	--mkt-ancho: min(88vw, 115rem);
	font-family: var(--wp--preset--font-family--interfaz);
	color: var(--mkt-marino);
	line-height: 1.6;
}

/* Cada sección pinta su franja a todo el ancho y centra el contenido dentro. */
/* WordPress mete un espaciado por defecto entre bloques hermanos. Aquí las
   franjas de color tienen que tocarse: si queda hueco, se ve el blanco de la
   página entre sección y sección y parece una línea que corta el fondo. */
.te-mkt {
	gap: 0;
	row-gap: 0;
}

.te-mkt > section + section {
	margin-block-start: 0;
}

.te-mkt section {
	padding-block: clamp(3rem, 6vw, 6rem);
	padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* El contenido se centra a un ancho cómodo, pero las capas de fondo de la
   portada (vídeo y velo) tienen que ocupar todo el ancho: si les cae este
   max-width, el vídeo se queda en una franja centrada. */
.te-mkt section > *:not(.te-mkt-hero__fondo):not(.te-mkt-hero__velo) {
	max-width: var(--mkt-ancho);
	margin-inline: auto;
}

.te-mkt--marino { background: var(--mkt-marino); color: #fff; }
.te-mkt--azul { background: var(--mkt-azul); color: #fff; }

/* El tema fija el color de los encabezados globalmente, así que sobre fondo
   oscuro hay que decirlo otra vez o los titulares salen gris marengo. */
.te-mkt-hero :is(h1, h2, h3, p, li, strong, blockquote, a),
.te-mkt--marino :is(h1, h2, h3, p, li, strong, blockquote),
.te-mkt--azul :is(h1, h2, h3, p, li, strong, blockquote),
.te-mkt--degradado :is(h1, h2, h3, p, li, strong, blockquote),
.te-mkt-tarjeta-oscura :is(h1, h2, h3, p, li, strong),
.te-mkt-plan--recomendado :is(h3, p, li, strong, span) {
	color: inherit;
}
.te-mkt--gris { background: var(--mkt-gris); }
.te-mkt--gris-azulado { background: var(--mkt-gris-azulado); }
.te-mkt--blanco { background: #fff; }
.te-mkt--gris-claro { background: #fbfcfd; }
.te-mkt--degradado {
	/* Azul fuerte a la izquierda que se abre hacia la derecha, como el original */
	background: linear-gradient(90deg, #3b6fd4 0%, #4278d8 45%, #a8c4ef 100%);
	color: #fff;
}

.te-mkt p { margin-block: 0 1rem; }
.te-mkt a { color: inherit; }

/* --- Titulares --- */
.te-mkt-h1,
.te-mkt-h2 {
	font-family: var(--wp--preset--font-family--titular);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 1.25rem;
}

/* Título de portada: 58px con interlineado 1 y peso 800, en un bloque de
   798px. Antes iba a 1,15 de interlineado y en un ancho mucho mayor, y se
   veía desparramado. */
.te-mkt-h1 {
	font-size: clamp(1.8rem, 2.7vw, 3.25rem);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.01em;
	max-width: 52rem;
	margin-inline: auto;
}
.te-mkt-h2 { font-size: clamp(1.5rem, 2.3vw, 2.25rem); }
.te-mkt-h3 {
	font-family: var(--wp--preset--font-family--titular);
	font-size: clamp(1.2rem, 1.6vw, 1.5625rem);
	font-weight: 700;
	margin: 0 0 0.75rem;
}

/* En la portada, la tercera línea va en amarillo */
.te-mkt-h1 em {
	font-style: normal;
	color: var(--mkt-amarillo);
}

/* «no estar siendo elegida»: dentro del titular, en negrita sobre fino */
.te-mkt-h2--fino { font-weight: 400; }
.te-mkt-h2--fino strong { font-weight: 700; }

.te-mkt-etiqueta {
	font-size: 0.9rem;
	color: var(--mkt-azul-texto);
	margin-bottom: 0.35rem;
}

.te-mkt--degradado .te-mkt-etiqueta {
	display: inline-block;
	background: var(--mkt-marino);
	color: #fff;
	padding: 0.3rem 0.9rem;
	border-radius: 1rem;
	font-size: 1.125rem;
	letter-spacing: 0.02em;
}

/* --- Botones --- */
.te-mkt-boton {
	display: inline-block;
	padding: 0.9rem 1.75rem;
	background: var(--mkt-marino);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	border-radius: 0.6rem;
	transition: background-color 0.2s ease;
}

.te-mkt-boton:hover { background: #000; color: #fff; }
.te-mkt-boton--azul { background: var(--mkt-azul); }
.te-mkt-boton--azul:hover { background: var(--mkt-marino); }

/* `.te-mkt p` (0,1,1) le ganaba a `.te-mkt-cta` (0,1,0) y el margen de 2,5 rem
   nunca se aplicaba: los botones salían pegados al párrafo de arriba. */
.te-mkt p.te-mkt-cta { margin-block: 2.5rem 0; }
.te-mkt-centro { text-align: center; }

/* Dentro de una sección centrada, las tarjetas y las listas siguen leyéndose
   alineadas a la izquierda, como en el original. */
.te-mkt-centro :is(.te-mkt-ficha, .te-mkt-plan, .te-mkt-testimonio, .te-mkt-atrevete) {
	text-align: left;
}
.te-mkt-centro .te-mkt-cta { display: flex; justify-content: center; }

.te-mkt-nota {
	font-size: 0.875rem;
	line-height: 1.5;
	opacity: 0.8;
	max-width: 34rem;
	margin-top: 1.25rem;
}

.te-mkt-centro .te-mkt-nota { margin-inline: auto; }

/* --- Cajas destacadas --- */
.te-mkt-caja {
	background: var(--mkt-gris);
	border-radius: 0.75rem;
	padding: 1.25rem 1.5rem;
	margin-block: 2rem;
}

.te-mkt-caja--roja {
	background: #fdeef0;
	border-left: 4px solid var(--mkt-rojo);
	border-radius: 0 0.5rem 0.5rem 0;
}

.te-mkt-caja--roja span { color: var(--mkt-rojo); }
.te-mkt-caja--borde { border: 1px solid rgba(255,255,255,0.35); background: transparent; }
.te-mkt--degradado .te-mkt-caja--borde {
	background: var(--mkt-marino);
	border-color: rgba(255,255,255,0.15);
	font-size: 0.85rem;
}
.te-mkt--degradado .te-mkt-caja--borde strong { display: inline; color: var(--mkt-amarillo); }
.te-mkt-caja strong { display: block; }
.te-mkt-caja span { color: var(--mkt-azul-texto); font-weight: 700; }
.te-mkt-caja--centro { max-width: 34rem; margin-inline: auto; text-align: center; }
.te-mkt-caja--blanca { background: #fff; border: 1px solid rgba(18,38,63,0.12); }

/* --- Portada --- */






/* --- Portada -----------------------------------------------------------
   Vídeo en bucle de fondo (un doctor poniéndose los guantes) bajo un velo
   azul marino. El vídeo va mudo y con «playsinline» para que reproduzca solo
   también en móvil, y con «poster» para que no parpadee en negro al cargar.

   Jerarquía: manda el titular; después la promesa; después la llamada a la
   acción. Los tres beneficios y el párrafo corporativo van por debajo, más
   pequeños y con menos contraste, porque son apoyo, no el mensaje. */
.te-mkt-hero {
	color: #fff;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	text-align: center;
	background: var(--mkt-marino);
	padding-block: clamp(3.5rem, 8vw, 8rem);
}

.te-mkt-hero__fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* El velo deja ver el vídeo pero garantiza que el texto se lea. */
.te-mkt-hero__velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(18,38,63,0.72) 0%, rgba(18,38,63,0.88) 60%, rgba(18,38,63,0.95) 100%);
}

.te-mkt-hero__contenido {
	max-width: 52rem;
	margin-inline: auto;
	position: relative;
}

/* 1. El titular manda */
.te-mkt-hero .te-mkt-h1 {
	margin-bottom: 1.5rem;
	text-shadow: 0 1px 24px rgba(0,0,0,0.35);
}

/* 2. La promesa, una sola frase y con cuerpo */
.te-mkt-hero__promesa {
	font-size: clamp(1.05rem, 1.35vw, 1.3rem);
	line-height: 1.5;
	max-width: 40rem;
	margin-inline: auto;
	opacity: 0.95;
}

/* 3. La acción */
.te-mkt-boton--grande {
	padding: 1.05rem 2.4rem;
	font-size: 1.05rem;
}

/* Los botones fijan su propio color: dentro de la portada heredaban el blanco
   del contenedor y el texto desaparecía sobre el fondo del botón. */
.te-mkt a.te-mkt-boton { color: #fff; }
.te-mkt a.te-mkt-boton--linea { color: var(--mkt-marino); }
.te-mkt-hero a.te-mkt-boton { background: var(--mkt-azul); }
.te-mkt-hero a.te-mkt-boton:hover { background: #fff; color: var(--mkt-marino); }

.te-mkt-hero .te-mkt-nota {
	margin-inline: auto;
	margin-top: 1rem;
	font-size: 0.8125rem;
	opacity: 0.6;
	max-width: 30rem;
}

/* 4. Apoyo: los tres beneficios, en tres columnas y con poco peso */
.te-mkt-ventajas {
	list-style: none;
	padding: 2.5rem 0 0;
	margin: 2.75rem auto 0;
	max-width: 54rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	text-align: left;
	border-top: 1px solid rgba(255,255,255,0.15);
}

.te-mkt-ventajas li {
	font-size: 0.875rem;
	line-height: 1.55;
	opacity: 0.8;
	padding-left: 1.5rem;
	position: relative;
}

.te-mkt-ventajas li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--mkt-amarillo);
	font-weight: 700;
	opacity: 0.9;
}

/* 5. Lo último: quiénes somos, en letra pequeña */
.te-mkt-hero__pie {
	margin: 2.25rem auto 0;
	max-width: 44rem;
	font-size: 0.8125rem;
	line-height: 1.6;
	opacity: 0.55;
}

@media (max-width: 780px) {
	.te-mkt-ventajas {
		grid-template-columns: 1fr;
		gap: 1rem;
		max-width: 26rem;
	}
}

/* --- Atrévete a cambiar --- */
.te-mkt-atrevete {
	list-style: none;
	padding: 1.5rem 1.75rem;
	margin: 2.5rem auto;
	max-width: 44rem;
	background: var(--mkt-gris);
	border-radius: 0.75rem;
	display: grid;
	gap: 0.75rem;
	text-align: left;
}

.te-mkt-atrevete li {
	padding-left: 1.5rem;
	position: relative;
	color: var(--mkt-azul-texto);
	font-weight: 700;
	font-size: 1.05rem;
}

.te-mkt-atrevete li::before { content: ">"; position: absolute; left: 0; }

/* --- Secciones a dos columnas --- */
.te-mkt-dos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	max-width: var(--mkt-ancho);
	margin-inline: auto;
}

.te-mkt-dos--arriba { align-items: start; }
.te-mkt-dos img { width: 100%; height: auto; display: block; border-radius: 0.5rem; }

/* Tarjeta oscura sobre fondo claro */
.te-mkt-tarjeta-oscura {
	background: var(--mkt-marino);
	color: #fff;
	border-radius: 1rem;
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
}

.te-mkt-tarjeta-oscura .te-mkt-h2 { color: var(--mkt-azul); }
.te-mkt-tarjeta-oscura hr { border: 0; border-top: 1px solid rgba(255,255,255,0.25); margin: 1.5rem 0; }

.te-mkt-tarjeta-clara {
	background: #fff;
	border-radius: 1rem;
	padding: clamp(1.5rem, 2.5vw, 2.25rem);
	box-shadow: 0 2px 18px rgba(18,38,63,0.08);
}

/* La tarjeta de los vídeos publicitarios se iba al ancho general de la landing
   —1912 px en un monitor grande— y quedaba desproporcionada frente al resto.
   Con tope propio. Tiene que ganarle a `.te-mkt section > *`, que tiene la misma
   especificidad (0,3,1): por eso va aquí, después. */
.te-mkt section.te-mkt-publicidad > .te-mkt-tarjeta-clara {
	max-width: min(92vw, 76rem);
	margin-inline: auto;
}

.te-mkt section.te-mkt-publicidad .te-mkt-dos { max-width: none; }

/* --- Marca personal ----------------------------------------------------
   El PNG de la doctora va recortado y sin fondo, y se juega con eso: asoma por
   encima del borde superior de la franja azul y se pega al borde inferior, con
   lo que el corte de la foto queda escondido justo en el filo.

   Va posicionada en absoluto: dentro de la rejilla no había forma de que
   tocara el filo de abajo, porque la altura de la banda la marca la columna de
   texto. Con «top» negativo y «bottom: 0» la caja mide justo lo que la franja
   más lo que debe asomar, y la imagen la rellena a lo alto.
   Medido del original: asoma 137 px sobre una ventana de 1962, un 7 %. */
.te-mkt section.te-mkt-personal {
	padding-bottom: 0;
	overflow: visible;
	position: relative;
}

.te-mkt-personal .te-mkt-dos {
	align-items: end;
	min-height: 24rem;
}

/* El texto conserva su aire inferior; si no, quedaría pegado al filo. */
.te-mkt-personal__texto {
	padding-bottom: clamp(3rem, 6vw, 6rem);
}

.te-mkt-personal__foto {
	position: absolute;
	top: -7vw;
	bottom: 0;
	right: clamp(1.25rem, 6vw, 7rem);
	display: flex;
	align-items: flex-end;
	pointer-events: none;
}

.te-mkt-personal__foto img {
	height: 100%;
	width: auto;
	max-width: none;
	display: block;
	border-radius: 0;
}

@media (max-width: 900px) {
	/* Apilado, el recurso no funciona: la foto vuelve a su sitio en el flujo. */
	.te-mkt section.te-mkt-personal { padding-bottom: clamp(3rem, 6vw, 6rem); }
	.te-mkt-personal .te-mkt-dos { min-height: 0; }
	.te-mkt-personal__foto {
		position: static;
		justify-content: center;
	}
	.te-mkt-personal__foto img { height: auto; width: 100%; max-width: 18rem; }
	.te-mkt-personal__texto { padding-bottom: 1rem; }
}

/* Lista de equis rojas */
.te-mkt-equis { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 0.6rem; }
.te-mkt-equis li { padding-left: 1.75rem; position: relative; }
.te-mkt-equis li::before {
	content: "\00d7";
	position: absolute; left: 0;
	color: var(--mkt-rojo); font-weight: 700; font-size: 1.15rem; line-height: 1;
}

/* Lista de puntos suaves */
.te-mkt-puntos { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 1rem; }
.te-mkt-puntos li { padding-left: 1.5rem; position: relative; font-size: 0.95rem; }
.te-mkt-puntos li::before {
	content: ""; position: absolute; left: 0; top: 0.6em;
	width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--mkt-amarillo);
}

/* --- Rejillas de tarjetas --- */
.te-mkt-rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.25rem;
	margin-top: 2.5rem;
}

.te-mkt-rejilla--cuatro { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }

.te-mkt-ficha {
	background: var(--mkt-marino-claro);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 0.85rem;
	padding: 1.5rem 1.25rem;
}

.te-mkt-ficha svg { width: 2rem; height: 2rem; stroke: var(--mkt-amarillo); fill: none; stroke-width: 1.5; margin-bottom: 0.9rem; }
.te-mkt-ficha h3 { font-size: 1rem; margin: 0 0 0.5rem; color: #fff; }
.te-mkt-ficha p { font-size: 0.85rem; color: rgba(255,255,255,0.75); margin: 0; line-height: 1.5; }

.te-mkt-ficha--clara { background: #fff; border: 0; box-shadow: 0 2px 14px rgba(18,38,63,0.07); }
.te-mkt-ficha--clara h3 { color: var(--mkt-marino); }
.te-mkt-ficha--clara p { color: rgba(18,38,63,0.7); }

/* El anuncio de temporada es cuadrado: se respeta su proporción. */
.te-mkt-publi video {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: 0.5rem;
	background: #000;
}

/* --- Vídeo --- */
.te-mkt-video { width: 100%; height: auto; display: block; border-radius: 0.5rem; background: #000; }


/* Una sección que necesita más ancho que el resto: el bloque del vídeo. */
/* Una sección que necesita más ancho que el resto: el bloque del vídeo.
   El PNG del doctor va escalado y se sale de su columna por los lados; el
   sobrante es transparente, así que se recorta con «clip» —que, a diferencia
   de «hidden», no crea un contenedor de scroll— y así no aparece la barra
   horizontal. */
.te-mkt section.te-mkt-ancha {
	overflow-x: clip;
}

.te-mkt section.te-mkt-ancha > * { max-width: min(93vw, 132rem); }

/* El carrusel no debe estirarse todo lo ancho de la sección: con líneas de
   texto de dos mil píxeles la reseña no hay quien la lea. Necesita más
   especificidad que la regla de arriba, que si no la pisa. */
.te-mkt section.te-mkt-ancha > .te-resenas { max-width: min(88vw, 70rem); }

/* --- Vídeo de demostración --------------------------------------------
   Dos piezas que juegan juntas: el reproductor a la izquierda y el PNG
   recortado del doctor a la derecha, grande y sin caja. El PNG va sin fondo,
   así que se apoya directamente sobre la franja y se alinea abajo con el
   vídeo: sin marco ni sombra, que es lo que le da el efecto.

   El vídeo se muestra con su portada y un botón propio; los controles del
   navegador solo aparecen al darle a reproducir. Con «controls» de salida
   sale la barra gris del navegador y abarata mucho el conjunto. */
.te-mkt-demo {
	display: grid;
	/* El reproductor manda: en el original mide 980x551 sobre una rejilla de
	   980, o sea que ocupa el ancho útil entero. Aquí se le da la parte del
	   león y el PNG acompaña al lado. */
	grid-template-columns: 1.5fr 1fr;
	gap: clamp(1.5rem, 3.5vw, 4rem);
	align-items: end;
	/* Aire arriba: el PNG crece hacia arriba al escalarlo y, sin este margen,
	   se le echa encima al párrafo de introducción. */
	margin-block: clamp(3rem, 7vw, 7rem) 3rem;
	width: min(93vw, 132rem);
	max-width: none;
	margin-inline: auto;
}

.te-mkt-reproductor {
	position: relative;
	line-height: 0;
	border-radius: 0.5rem;
	overflow: hidden;
	background: #000;
	box-shadow: 0 10px 40px rgba(18,38,63,0.18);
}

.te-mkt-reproductor video {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.te-mkt-reproductor__jugar {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: rgba(18,38,63,0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.te-mkt-reproductor__jugar:hover { background: rgba(18,38,63,0.28); }

.te-mkt-reproductor__jugar svg {
	width: 4.5rem;
	height: 4.5rem;
	fill: none;
	stroke: #fff;
	stroke-width: 1.2;
	filter: drop-shadow(0 2px 12px rgba(0,0,0,0.45));
}

.te-mkt-reproductor__jugar svg path { fill: #fff; stroke: none; }

.te-mkt-reproductor.is-reproduciendo .te-mkt-reproductor__jugar { display: none; }

/* El PNG: grande, pegado abajo y sin caja. */
.te-mkt-demo__png {
	align-self: end;
	line-height: 0;
}

.te-mkt-demo__png img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0;
	transform: scale(1.55);
	transform-origin: bottom center;
}

@media (max-width: 820px) {
	.te-mkt-demo { grid-template-columns: 1fr; }
	.te-mkt-demo__png img { transform: none; max-width: 22rem; margin-inline: auto; }
}

/* --- Testimonio --- */










/* --- Reseñas de clientes ----------------------------------------------
   Carrusel: una reseña cada vez, foto a la izquierda y texto a la derecha,
   con flechas a los lados y puntos debajo. Las reseñas se gestionan desde el
   escritorio, así que el número de puntos sale solo. */
.te-resenas {
	position: relative;
	margin: clamp(2rem, 4vw, 3.5rem) auto 0;
	padding-inline: clamp(2rem, 5vw, 4rem);
	text-align: left;
}

.te-resenas__pista {
	position: relative;
	display: grid;
}

/* Separación con el botón de debajo: pegados parecían parte del mismo bloque. */
.te-mkt section.te-mkt-ancha > .te-resenas { margin-bottom: clamp(2.5rem, 4vw, 4rem); }

.te-resena {
	grid-area: 1 / 1;          /* todas en la misma celda: se cruzan */
	display: grid;
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease, visibility 0.45s;
}

.te-resena.is-activa {
	opacity: 1;
	visibility: visible;
}

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

.te-resena__foto img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;   /* si hay que recortar, que sea por abajo */
	display: block;
	filter: grayscale(1);
}

.te-resena__texto { margin: 0; }

.te-resena__nombre {
	font-weight: 700;
	margin: 0 0 1rem;
}

.te-resena__texto p { font-size: 0.95rem; line-height: 1.6; margin: 0 0 0.75rem; }

/* Flechas */
.te-resenas__flecha {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	font-size: 2rem;
	line-height: 1;
	color: var(--mkt-marino);
	opacity: 0.45;
	cursor: pointer;
	padding: 0.5rem;
	transition: opacity 0.2s ease;
}

.te-resenas__flecha:hover { opacity: 1; }
.te-resenas__flecha--atras { left: 0; }
.te-resenas__flecha--adelante { right: 0; }

/* Puntos */
.te-resenas__puntos {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 1.75rem;
}

.te-resenas__puntos button {
	width: 0.45rem;
	height: 0.45rem;
	padding: 0;
	border: 0;
	background: var(--mkt-marino);
	opacity: 0.25;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.te-resenas__puntos button.is-activo { opacity: 1; }

/* --- Trustpilot --- */
.te-mkt-trustpilot { margin-top: clamp(2rem, 4vw, 3.5rem); }

.te-mkt-trustpilot__estrellas {
	display: flex;
	justify-content: center;
	gap: 0.35rem;
	font-size: 2.4rem;
	line-height: 1;
	color: var(--mkt-amarillo);
	margin: 0 0 0.75rem;
}

/* Entran de izquierda a derecha, creciendo. Arrancan escondidas y solo se
   animan cuando la sección entra en pantalla (lo marca el JavaScript con la
   clase «is-visible»), para que no se pierda el efecto si aún no se ha
   llegado hasta aquí. */
/* Por defecto se ven. Solo se esconden si el JavaScript ha podido preparar la
   animación (clase «esperando»): así, si el guion falla o el navegador no
   soporta el vigía, las estrellas salen igual en vez de quedarse invisibles. */
.te-mkt-trustpilot__estrellas span { display: inline-block; }

.te-mkt-trustpilot.esperando .te-mkt-trustpilot__estrellas span {
	transform: scale(0);
	opacity: 0;
}

.te-mkt-trustpilot.is-visible .te-mkt-trustpilot__estrellas span {
	animation: te-estrella 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.te-mkt-trustpilot.is-visible .te-mkt-trustpilot__estrellas span:nth-child(1) { animation-delay: 0.05s; }
.te-mkt-trustpilot.is-visible .te-mkt-trustpilot__estrellas span:nth-child(2) { animation-delay: 0.18s; }
.te-mkt-trustpilot.is-visible .te-mkt-trustpilot__estrellas span:nth-child(3) { animation-delay: 0.31s; }
.te-mkt-trustpilot.is-visible .te-mkt-trustpilot__estrellas span:nth-child(4) { animation-delay: 0.44s; }
.te-mkt-trustpilot.is-visible .te-mkt-trustpilot__estrellas span:nth-child(5) { animation-delay: 0.57s; }

@keyframes te-estrella {
	from { transform: scale(0) rotate(-25deg); opacity: 0; }
	to   { transform: scale(1) rotate(0);      opacity: 1; }
}

/* --- 3) El puntero que llega y se para ---
   Sale de abajo a la derecha, se acerca al enlace y se queda. Al final da un
   golpecito, como quien va a pulsar. */
.te-mkt-trustpilot__enlace {
	position: relative;
	white-space: nowrap;
}

.te-mkt-cursor {
	width: 1.6rem;
	height: 2rem;
	position: absolute;
	left: 100%;
	bottom: -0.55em;
	margin-left: -0.35rem;
	pointer-events: none;
}

.te-mkt-trustpilot.esperando .te-mkt-cursor { opacity: 0; }

.te-mkt-trustpilot.is-visible .te-mkt-cursor {
	animation: te-cursor-llega 1.1s ease-out 0.75s forwards;
}

@keyframes te-cursor-llega {
	0%   { opacity: 0; transform: translate(2.5rem, 2rem); }
	25%  { opacity: 1; }
	70%  { opacity: 1; transform: translate(0, 0); }
	82%  { transform: translate(0, 0.22rem); }   /* el golpecito */
	100% { opacity: 1; transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.te-mkt-trustpilot.is-visible .te-mkt-trustpilot__estrellas span,
	.te-mkt-trustpilot.is-visible .te-mkt-cursor {
		animation: none;
	}
	.te-mkt-trustpilot__estrellas span { transform: none; opacity: 1; }
	.te-mkt-cursor { opacity: 1; }
}

.te-mkt-trustpilot a {
	color: #00b67a;
	font-weight: 700;
	text-decoration: none;
}

.te-mkt-trustpilot a:hover { text-decoration: underline; }

@media (max-width: 780px) {
	.te-resena { grid-template-columns: 1fr; }
	.te-resenas { padding-inline: 2rem; }
}

/* --- IA Boutique --- */

/* --- IA Boutique -------------------------------------------------------
   Medido del original sobre 1962 px: la columna de texto es estrecha (381 px)
   y la imagen ocupa el resto sangrando por la derecha. Antes iba a media
   pantalla y con la letra grande, y quedaba muy suelto. */
/* Con `.te-mkt-ia` a secas el tope no se aplicaba: `.te-mkt section > *` reparte
   el ancho general de la landing y tiene más especificidad. Tercera vez que
   muerde lo mismo en esta página. */
.te-mkt section.te-mkt-ia-franja > .te-mkt-ia {
	display: grid;
	grid-template-columns: minmax(0, 24rem) 1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: end;
	/* Con tope: sin él la fila se estiraba de lado a lado en un monitor grande.
	   92 rem deja unos 500 px de margen a cada lado en una pantalla de 2545. */
	max-width: min(92vw, 92rem);
	margin-inline: auto;
}

/* El texto no llega al borde de la franja; la composición sí. */
.te-mkt-ia__texto { padding-block-end: clamp(3rem, 6vw, 6rem); }

.te-mkt-ia__texto { max-width: 24rem; }

.te-mkt-ia__texto .te-mkt-h2 {
	font-size: 2.25rem;      /* 36px */
	line-height: 1.4;        /* 50.4px */
	margin-bottom: 1rem;
}

.te-mkt-ia__texto p {
	font-size: 1.125rem;     /* 18px */
	line-height: 1.4;        /* 25.2px */
}

/* La composición: dos capas sueltas, no una sola imagen.

   El original de Wix monta tres piezas encima de la franja azul: las fichas de
   Instagram detrás, las manos con el móvil delante y el botón encima de las dos.
   Y no recorta los brazos con el borde de la imagen —eso se nota— sino con el
   borde inferior de la propia franja: la foto sigue hacia abajo y la sección la
   corta. De ahí el `overflow: clip` de la franja y el `padding-block-end: 0`.

   Las medidas salen del HTML del original, referidas a su columna de 980 px:
   manos en x=198 con 972 px de ancho, fichas en x=493 con 433 y giradas
   -8,875°, y el botón en x=648 con 294. Aquí van en porcentaje del ancho de la
   escena para que todo escale junto.

   La escena empieza donde empieza la imagen de las manos, no en el x=0 del
   original: aquellos 198 px de la izquierda estaban vacíos y dejaban un hueco
   azul entre el texto y la composición. Quitarlos hace además que las manos
   salgan un 20 % más grandes con la misma columna.

   Ojo con el `top`: en un elemento absoluto un porcentaje se mide sobre la
   ALTURA del contenedor, no sobre su ancho. Como la escena tiene proporción
   fija, cada medida va convertida y con el valor original anotado al lado. */
/* Con `.te-mkt-ia-franja` a secas no basta: `.te-mkt section` tiene más
   especificidad y el relleno de abajo seguía puesto. */
.te-mkt section.te-mkt-ia-franja {
	padding-block-end: 0;
	overflow: clip;   /* «clip» y no «hidden»: no crea contenedor de scroll */
}

.te-mkt-ia__escena {
	position: relative;
	aspect-ratio: 972 / 920;
	margin-block-start: clamp(2rem, 4vw, 4rem);
}

.te-mkt-ia__capa {
	position: absolute;
	display: block;
	height: auto;
}

/* Las fichas: detrás y arriba, con el mismo giro que en el original. Son las
   únicas que se mueven con el ratón; las manos se quedan quietas. */
.te-mkt-ia__capa--fichas {
	left: 30.35%;
	top: 3.15%;
	width: 44.55%;
	z-index: 1;
	transform: rotate(-8.875deg) scale(var(--cerca, 1));
	transform-origin: center;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* Las manos: delante y desbordando por abajo. El 33 % de arriba y el 83,2 % de
   ancho colocan el móvil sobre las fichas; lo que sobra por abajo lo corta la
   franja, que es justo el efecto que se busca. */
.te-mkt-ia__capa--manos {
	left: 0;
	top: 41.96%;
	width: 100%;
	z-index: 2;
}

.te-mkt-ia__boton {
	position: absolute;
	left: 46.30%;
	top: 73.37%;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.75rem 1rem 0.75rem 1.5rem;
	border-radius: 15px;
	background: #009eeb;
	color: #fff;
	font-weight: 700;
	font-size: clamp(0.95rem, 1.1vw, 1.125rem);
	letter-spacing: 0.1em;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease;
}

.te-mkt-ia__boton:hover,
.te-mkt-ia__boton:focus-visible { background: #0086d1; }
.te-mkt-ia__boton svg { width: 2.2em; height: 2.2em; fill: currentColor; flex: none; }

.te-mkt-ia__pares { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.1rem; }
.te-mkt-ia__pares li {
	padding-left: 2rem;
	position: relative;
	font-size: 1.25rem;      /* 20px */
	line-height: 1.4;        /* 28px */
	font-weight: 700;
}
.te-mkt-ia__pares li::before {
	content: "\2713";
	position: absolute; left: 0; top: 0;
	color: var(--mkt-amarillo); font-weight: 700; font-size: 1.35rem; line-height: 1.05;
}
.te-mkt-ia__pares span { color: var(--mkt-amarillo); }

@media (max-width: 900px) {
	/* Misma especificidad que la regla de arriba, si no, no gana. */
	.te-mkt section.te-mkt-ia-franja > .te-mkt-ia { grid-template-columns: 1fr; }
	.te-mkt-ia__texto { max-width: none; padding-block-end: 0; }
	.te-mkt-ia__boton { font-size: 0.85rem; padding: 0.55rem 0.7rem 0.55rem 1rem; }
}

/* En pantallas estrechas la escena se queda pequeña y el botón, colocado por
   porcentajes, se salía por la derecha (y la franja lo recortaba). Ahí se
   centra. */
@media (max-width: 700px) {
	.te-mkt-ia__boton {
		left: 50%;
		top: 66%;
		translate: -50% 0;
	}
}

/* Sin ratón no hay efecto de cercanía, y quien pide menos movimiento tampoco. */
@media (hover: none), (prefers-reduced-motion: reduce) {
	.te-mkt-ia__capa--fichas { transition: none; --cerca: 1; }
}

/* --- Servicios extra: las etiquetas ------------------------------------- */
.te-mkt-chips {
	list-style: none;
	padding: 0;
	margin: 2.5rem auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	max-width: 58rem;
}

.te-mkt-chips li {
	background: var(--mkt-gris);
	border: 1px solid rgba(18, 38, 63, 0.12);
	border-radius: 0.6rem;
	padding: 0.6rem 1rem;
	font-size: 0.95rem;
	line-height: 1.3;
}

/* Enlace de texto que hace de llamada, sin llegar a ser un botón. */
.te-mkt a.te-mkt-enlace-fuerte {
	color: var(--mkt-azul-vivo);
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-thickness: 2px;
}

.te-mkt a.te-mkt-enlace-fuerte:hover { color: var(--mkt-marino); }

/* --- Cómo empezamos: los cinco pasos ------------------------------------
   Zigzag en pantalla ancha, una sola columna en móvil. La línea que une los
   pasos es un `::before` del contenedor, no un borde de cada paso: así no se
   corta entre uno y otro. */
.te-mkt-pasos {
	list-style: none;
	padding: 0;
	margin: 3rem auto 0;
	max-width: 68rem;
	position: relative;
	display: grid;
	gap: 1.5rem;
	text-align: left;
}

.te-mkt-pasos::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 1.5rem;
	width: 3px;
	background: rgba(18, 38, 63, 0.1);
	border-radius: 2px;
}

.te-mkt-pasos li {
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: 1rem;
	align-items: start;
	position: relative;
}

.te-mkt-pasos__num {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--mkt-marino);
	color: #fff;
	font-weight: 700;
	font-size: 1.25rem;
	border: 4px solid #fff;
	box-shadow: 0 2px 10px rgba(18, 38, 63, 0.18);
	transition: background 0.4s ease, box-shadow 0.4s ease, scale 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Se encienden con el scroll, uno detrás de otro (assets/js/pasos.js). El
   apagado es marino y el encendido, el mismo azul del resto de la página. */
.te-mkt-pasos li.esta-encendido .te-mkt-pasos__num {
	background: var(--mkt-azul-vivo);
	box-shadow: 0 2px 10px rgba(18, 38, 63, 0.18), 0 0 0 6px rgba(59, 111, 212, 0.16);
	scale: 1.08;
}

.te-mkt-pasos__ficha {
	background: #fff;
	border: 1px solid rgba(18, 38, 63, 0.1);
	border-radius: 1rem;
	padding: clamp(1.25rem, 2vw, 1.75rem);
	box-shadow: 0 2px 14px rgba(18, 38, 63, 0.05);
}

.te-mkt-pasos__ficha h3 { font-size: 1.25rem; margin: 0 0 0.4rem; }
.te-mkt-pasos__ficha p { margin: 0; }

@media (min-width: 860px) {
	.te-mkt-pasos::before { left: 50%; translate: -50% 0; }
	.te-mkt-pasos li { grid-template-columns: 1fr 3rem 1fr; gap: 2rem; }
	.te-mkt-pasos__num { grid-column: 2; justify-self: center; }
	.te-mkt-pasos li:nth-child(odd) .te-mkt-pasos__ficha { grid-column: 1; grid-row: 1; text-align: right; }
	.te-mkt-pasos li:nth-child(even) .te-mkt-pasos__ficha { grid-column: 3; grid-row: 1; }
}

/* --- Preguntas frecuentes ---------------------------------------------- */
.te-mkt-faq {
	max-width: 52rem;
	margin-inline: auto;
	display: grid;
	gap: 0.75rem;
	text-align: left;
}

.te-mkt-faq details {
	background: #fff;
	border: 1px solid rgba(18, 38, 63, 0.12);
	border-radius: 1rem;
	padding: 1.25rem 1.5rem;
}

.te-mkt-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

/* Safari pinta su propio triángulo si no se le quita. */
.te-mkt-faq summary::-webkit-details-marker { display: none; }

/* La flecha se dibuja aquí y no en el HTML: seis preguntas son seis SVG
   repetidos para nada. */
.te-mkt-faq summary::after {
	content: "";
	flex: none;
	width: 0.7rem;
	height: 0.7rem;
	border-right: 2px solid var(--mkt-azul-vivo);
	border-bottom: 2px solid var(--mkt-azul-vivo);
	rotate: 45deg;
	translate: 0 -0.2rem;
	transition: rotate 0.2s ease;
}

.te-mkt-faq details[open] summary::after { rotate: 225deg; translate: 0 0.15rem; }
.te-mkt-faq details p { margin: 1rem 0 0; }

/* --- Planes --- */
.te-mkt-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; margin-top: 3rem; align-items: start; }

.te-mkt-plan {
	background: #fff;
	border-radius: 1rem;
	padding: 1.75rem 1.5rem;
	box-shadow: 0 2px 18px rgba(18,38,63,0.08);
	display: flex;
	flex-direction: column;
	position: relative;
}

.te-mkt-plan--recomendado {
	background: var(--mkt-marino);
	color: #fff;
	border: 2px solid var(--mkt-amarillo);
	padding-top: 2.25rem;
}

.te-mkt-plan__cintillo {
	position: absolute;
	top: -0.85rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--mkt-amarillo);
	color: var(--mkt-marino);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 0.3rem 0.9rem;
	border-radius: 0.4rem;
	white-space: nowrap;
}

.te-mkt-plan__nombre { font-family: var(--wp--preset--font-family--titular); font-size: 1.5rem; font-weight: 700; margin: 0; }
.te-mkt-plan__lema { color: var(--mkt-azul-texto); font-weight: 700; margin: 0.15rem 0 1rem; font-size: 0.95rem; }
.te-mkt-plan--recomendado .te-mkt-plan__lema { color: var(--mkt-amarillo); }
.te-mkt-plan__ideal { font-size: 0.9rem; }
.te-mkt-plan hr { border: 0; border-top: 1px solid rgba(18,38,63,0.15); margin: 1.25rem 0; }
.te-mkt-plan--recomendado hr { border-top-color: rgba(255,255,255,0.3); }
.te-mkt-plan__activa { font-weight: 700; margin-bottom: 0.75rem; }
.te-mkt-plan--recomendado .te-mkt-plan__activa { color: var(--mkt-amarillo); }

.te-mkt-plan__lista { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.9rem; }
.te-mkt-plan__lista li { padding-left: 1.6rem; position: relative; }
.te-mkt-plan__lista li::before { content: "\2713"; position: absolute; left: 0; top: 0.1em; color: var(--mkt-amarillo); font-weight: 700; }
.te-mkt-plan__lista strong { display: block; font-size: 0.95rem; }
.te-mkt-plan__lista span { display: block; font-size: 0.8rem; opacity: 0.75; line-height: 1.45; }

.te-mkt-plan__valor { font-size: 0.8rem; opacity: 0.7; margin-top: auto; }
.te-mkt-plan__inversion { font-weight: 700; margin-bottom: 0.25rem; color: var(--mkt-amarillo); }
.te-mkt-plan__precio {
	font-family: var(--wp--preset--font-family--titular);
	font-size: 2.75rem; font-weight: 700; line-height: 1;
	display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1.25rem;
}
.te-mkt-plan__precio span { font-family: var(--wp--preset--font-family--interfaz); font-size: 0.8rem; font-weight: 400; opacity: 0.7; }

@media (max-width: 820px) {
	.te-mkt-dos,
	.te-mkt-testimonio {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   19. Galería de vídeos (/todos-los-trabajos/)
   ------------------------------------------------------------------------- */
.te-galeria-videos__filtro {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
	border-bottom: 1px solid rgba(65, 65, 65, 0.15);
	padding-bottom: 0.75rem;
}

.te-galeria-videos__filtro button {
	background: none;
	border: 0;
	padding: 0.35rem 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--interfaz);
	font-size: 0.95rem;
	color: var(--wp--preset--color--texto);
	opacity: 0.6;
	border-bottom: 2px solid transparent;
	transition: opacity 0.2s ease;
}

.te-galeria-videos__filtro button:hover { opacity: 1; }

.te-galeria-videos__filtro button.is-activo {
	opacity: 1;
	border-bottom-color: var(--wp--preset--color--rojo);
}

.te-galeria-videos__grupo { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.te-galeria-videos__titulo {
	font-family: var(--wp--preset--font-family--titular);
	font-size: clamp(1.3rem, 2vw, 1.9rem);
	font-weight: 700;
	margin: 0 0 1.25rem;
}

.te-galeria-videos__rejilla {
	display: grid;
	/* Miniaturas grandes, del tamaño de las de /trabajos/: son el contenido,
	   no una lista. El `min(100%, ...)` evita que en un móvil la columna pida
	   más ancho del que hay y saque barra horizontal. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 36rem), 1fr));
	gap: clamp(1.25rem, 2vw, 2rem);
}

@media (max-width: 600px) {
	.te-galeria-videos__rejilla { grid-template-columns: 1fr; }
}

/* La tarjeta: miniatura con botón. El reproductor no existe hasta que se
   pulsa, así que la proporción la fija la propia tarjeta. */
.te-video-tarjeta__lanzar,
.te-video-tarjeta__marco {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	padding: 0;
	margin: 0;
	/* Azul oscuro y no negro: cuando un vídeo se queda sin miniatura —Vimeo
	   privado, vídeo retirado— la tarjeta parece hecha a propósito y no un
	   cuadro roto. */
	background: #16273d;
	overflow: hidden;
	border-radius: 0.4rem;
}

.te-video-tarjeta__lanzar { cursor: pointer; }

.te-video-tarjeta__lanzar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease, opacity 0.3s ease;
}

.te-video-tarjeta__lanzar:hover img { transform: scale(1.04); opacity: 0.85; }

.te-video-tarjeta__jugar {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.te-video-tarjeta__jugar svg {
	width: 3.5rem;
	height: 3.5rem;
	fill: none;
	stroke: #fff;
	stroke-width: 1.2;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
	transition: transform 0.2s ease;
}

.te-video-tarjeta__jugar svg path { fill: #fff; stroke: none; }
.te-video-tarjeta__lanzar:hover .te-video-tarjeta__jugar svg { transform: scale(1.12); }

.te-video-tarjeta__marco iframe,
.te-video-tarjeta__marco video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.te-video-tarjeta__pie { padding-top: 0.75rem; }

.te-video-tarjeta__cat {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: lowercase;
	opacity: 0.7;
	margin: 0 0 0.25rem;
}

.te-video-tarjeta__titulo {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	font-weight: 300;
	font-style: italic;
	line-height: 1.25;
	margin: 0;
}

/* Botón «Ver más trabajos» al final de la rejilla de /trabajos/ */
.te-mas-trabajos {
	display: flex;
	justify-content: center;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.te-mas-trabajos a {
	display: inline-block;
	padding: 0.85rem 2.25rem;
	border: 1px solid var(--wp--preset--color--texto);
	border-radius: 2rem;
	text-decoration: none;
	color: var(--wp--preset--color--texto);
	font-family: var(--wp--preset--font-family--interfaz);
	font-size: 1rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.te-mas-trabajos a:hover {
	background: var(--wp--preset--color--texto);
	color: var(--wp--preset--color--blanco);
}


/* -------------------------------------------------------------------------
   21. El visor de vídeo
   Pantalla emergente para ver los vídeos grandes, sin salir de la página.
   La usan la rejilla de /trabajos/ y la galería por categorías.
   ------------------------------------------------------------------------- */
.te-visor {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 3vw, 3rem);
	background: rgba(8, 14, 24, 0.88);
	backdrop-filter: blur(4px);
}

.te-visor[hidden] { display: none; }

/* Mientras está abierto, la página de detrás no se mueve. */
html.te-visor-abierto { overflow: hidden; }

/* El marco crece todo lo que puede sin deformarse ni salirse de la pantalla.
   El tercer valor del min() es la altura: 86vh en proporción 16:9 son 152vh de
   ancho. Sin él, el `max-height` recortaría la caja y el vídeo saldría
   estirado. */
.te-visor__marco {
	width: min(94vw, 100rem, 152vh);
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.te-visor__marco iframe,
.te-visor__marco video {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.te-visor__cerrar {
	position: absolute;
	top: clamp(0.75rem, 2vw, 1.5rem);
	right: clamp(0.75rem, 2vw, 1.5rem);
	width: 3rem;
	height: 3rem;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s ease;
}

.te-visor__cerrar:hover,
.te-visor__cerrar:focus-visible { background: rgba(255, 255, 255, 0.28); }

.te-visor__cerrar svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

/* En la rejilla de trabajos, las tarjetas que abren el visor avisan de que se
   puede pulsar. */
.te-trabajo[data-te-incrustar] { cursor: pointer; }


/* -------------------------------------------------------------------------
   22. Servicios
   El original mete TODO en una columna de 980 px centrada, y dentro de ella
   todo va alineado a la izquierda: el titular, el párrafo y el botón arrancan
   en el mismo punto. Antes se dejó el párrafo centrado en la ventana —como en
   Sostenibilidad— y el titular pegado al margen: se veía descolgado. De ahí la
   columna propia.

   El titular grande, la portada y el punto rojo sí se comparten con
   Sostenibilidad; están arriba, con las demás reglas del titular.
   ------------------------------------------------------------------------- */

/* Todo el contenido vive en la misma columna, la portada incluida. Si la
   portada se deja a ancho completo y el resto en columna, el titular arranca
   pegado al margen y los párrafos 500 px más adentro: parecen dos páginas
   distintas. En el original todo cae dentro de la misma columna de 980 px. */
.te-serv-columna {
	max-width: min(92vw, 88rem);
	margin-inline: auto;
}

/* El titular de esta página crece con la ventana, pero la columna deja de
   crecer en 88 rem (a partir de 1530 px de ventana). Entre ese punto y los
   1985 px la letra seguía engordando sobre una columna ya fija, así que el
   titular se metía cada vez más en la foto: en un monitor grande llegaba a
   taparle la cara a la chica.

   El tope de la letra se pone donde se para la columna: 4,3vw de 1530 px son
   4,11 rem. Así la proporción entre titular y foto es la misma a cualquier
   ancho. En Sostenibilidad no pasa —allí la portada ocupa todo el ancho y no
   tiene tope—, por eso se corrige solo aquí. */
.te-serv-titular {
	font-size: clamp(1.7rem, 4.3vw, 4.11rem);
}

.te-serv-texto {
	max-width: 923px;
	margin: clamp(2rem, 4.5vw, 5.5rem) 0 0;
	font-size: clamp(1.15rem, 1.78vw, 2.19rem);
	font-weight: 300;
	line-height: 1.4;
	color: var(--wp--preset--color--texto);
}

/* «Nuestro aporte»: titular y párrafo alineados, y el triángulo a la derecha
   del párrafo, asomando por fuera de la columna como en el original. */
.te-serv-aporte {
	position: relative;
	margin-top: clamp(3rem, 7.9vw, 9.5rem);
}

.te-serv-aporte__marca {
	position: absolute;
	left: 88%;
	bottom: 0;
	width: 13%;
	max-width: 9rem;
	height: auto;
}

/* Los servicios, en tres familias: Identidad, Relato y Mirada.

   Antes eran nueve nombres sueltos en una rejilla. Agrupados cuentan algo —lo
   que eres, lo que cuentas, cómo se ve— y cada familia acaba apuntando a una de
   las páginas de servicio. La idea de las tres columnas viene del original; lo
   que cambia es que ahora las columnas significan. */
.te-serv-familias {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 6%;
	row-gap: clamp(2.5rem, 5vw, 4rem);
	margin-top: clamp(3rem, 6vw, 7rem);
}

.te-serv-familias h3 {
	font-family: var(--wp--preset--font-family--titular);
	font-size: clamp(1.4rem, 2.1vw, 2.6rem);
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--texto);
}

.te-serv-familias__punto { color: var(--wp--preset--color--rojo); }

.te-serv-familias__lead {
	font-size: clamp(0.9rem, 0.95vw, 1.1rem);
	font-weight: 300;
	line-height: 1.4;
	margin: 0 0 clamp(1.5rem, 2.5vw, 2.25rem);
	color: var(--wp--preset--color--texto);
	opacity: 0.75;
}

.te-serv-familias ul {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid rgba(65, 65, 65, 0.25);
}

.te-serv-familias li {
	font-family: var(--wp--preset--font-family--titular);
	font-size: clamp(0.9rem, 1.02vw, 1.25rem);
	font-weight: 400;
	letter-spacing: 0.1em;
	padding: clamp(0.9rem, 1.6vw, 1.35rem) 0;
	border-bottom: 1px solid rgba(65, 65, 65, 0.25);
	color: var(--wp--preset--color--texto);
}

/* Los que tienen página propia se enlazan; el resto es texto suelto. */
.te-serv-familias a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.te-serv-familias a::after {
	content: " \2192";
	color: var(--wp--preset--color--rojo);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.te-serv-familias a:hover,
.te-serv-familias a:focus-visible { color: var(--wp--preset--color--rojo); }
.te-serv-familias a:hover::after,
.te-serv-familias a:focus-visible::after { opacity: 1; }

/* Nota de cierre de cada página de servicio: a qué familia pertenece y con qué
   suele ir. La idea es de MBLM —«servicios que suelen preceder / seguir»— y
   sirve para que el ecosistema se entienda sin tener que explicarlo. */
.te-serv-vecinos {
	max-width: 923px;
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
	padding-top: clamp(1.25rem, 2vw, 1.75rem);
	border-top: 1px solid rgba(65, 65, 65, 0.2);
	font-size: clamp(0.85rem, 0.92vw, 1.05rem);
	font-weight: 300;
	line-height: 1.5;
	color: var(--wp--preset--color--texto);
	opacity: 0.85;
}

.te-serv-vecinos strong { font-weight: 700; opacity: 1; }

.te-serv-vecinos a {
	color: var(--wp--preset--color--rojo);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* El hilo que cose las tres familias. Sin esto quedan tres listas sueltas. */
.te-serv-hilo {
	max-width: 923px;
	margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
	font-size: clamp(1rem, 1.15vw, 1.4rem);
	font-weight: 300;
	line-height: 1.5;
	color: var(--wp--preset--color--texto);
}

.te-serv-cierre { margin-top: clamp(4rem, 9vw, 11rem); }

/* El botón va a la izquierda, debajo del titular y alineado con él. */
.te-serv-boton { margin-top: clamp(2rem, 3.2vw, 3.9rem); }

@media (max-width: 860px) {
	.te-serv-aporte { margin-top: 3rem; }
	.te-serv-cierre { margin-top: 3.5rem; }

	.te-serv-familias { grid-template-columns: 1fr; }


	/* Sin hueco a la derecha, el triángulo pasa a ir centrado sobre la lista. */
	.te-serv-aporte__marca {
		position: static;
		display: block;
		width: 3.5rem;
		margin: 2.5rem auto 0;
	}
}


/* -------------------------------------------------------------------------
   23. Páginas de servicio
   Las tres páginas que cuelgan de /servicios/: IA Boutique, Producción
   audiovisual y Ficción. Comparten la columna, el titular y el párrafo grande
   con /servicios/ —están en el bloque 22—, así que aquí solo va lo suyo.
   ------------------------------------------------------------------------- */

/* Apertura sin foto: el titular manda y debajo va el párrafo de entrada. */
.te-serv-cabecera {
	margin-block: clamp(2rem, 5vw, 5rem) 0;
}

.te-serv-cabecera .te-serv-texto { margin-top: clamp(1.5rem, 3vw, 3rem); }

/* Un tramo de la página: titular de sección y contenido. */
.te-serv-tramo { margin-top: clamp(3.5rem, 8vw, 9rem); }

/* Fichas de «qué hacemos»: título corto y explicación, en columnas anchas y
   muy separadas, como las de Sostenibilidad. */
.te-serv-fichas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: clamp(2rem, 4vw, 4.5rem);
	margin-top: clamp(2rem, 4vw, 4rem);
}

.te-serv-fichas h3 {
	font-family: var(--wp--preset--font-family--titular);
	font-size: clamp(1.05rem, 1.15vw, 1.4rem);
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--texto);
}

.te-serv-fichas p {
	font-size: clamp(0.95rem, 0.92vw, 1.125rem);
	font-weight: 300;
	line-height: 1.5;
	margin: 0;
	color: var(--wp--preset--color--texto);
}

/* Pares «la IA no… / sí…», heredados de la landing médica pero con la paleta
   de la web general: el matiz va en rojo, no en amarillo. */
.te-serv-pares {
	list-style: none;
	padding: 0;
	margin: clamp(2rem, 4vw, 3.5rem) 0 0;
	display: grid;
	gap: 1.25rem;
	max-width: 923px;
}

.te-serv-pares li {
	font-size: clamp(1rem, 1.15vw, 1.4rem);
	line-height: 1.4;
	font-weight: 700;
	padding-left: 1.75rem;
	position: relative;
	color: var(--wp--preset--color--texto);
}

.te-serv-pares li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--rojo);
	font-weight: 700;
}

.te-serv-pares span { font-weight: 300; }

/* Caja con el matiz importante, en gris claro y con filo rojo. */
.te-serv-caja {
	margin-top: clamp(2rem, 4vw, 3.5rem);
	max-width: 923px;
	background: #f7f9fb;
	border-left: 4px solid var(--wp--preset--color--rojo);
	border-radius: 0 0.5rem 0.5rem 0;
	padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2.5vw, 2rem);
	font-size: clamp(0.95rem, 1vw, 1.2rem);
	line-height: 1.5;
	font-weight: 300;
	color: var(--wp--preset--color--texto);
}

.te-serv-caja strong { font-weight: 700; }

/* Una muestra: el vídeo pequeño, a su tamaño de verdad, con el texto al lado.

   Este archivo es de 720x720 y estaba puesto a todo el ancho de la columna
   (923 px): ampliado un 28 % por encima de su resolución, se veía blando. Un
   vídeo nunca debe pintarse por encima de su tamaño nativo, y menos si ya venía
   comprimido. Aquí va a 20 rem como mucho, que es menos de la mitad. */
.te-serv-muestra {
	display: grid;
	grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center;
	max-width: 923px;
	margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
}

.te-serv-muestra video {
	width: 100%;
	max-width: 720px;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: 0.5rem;
	background: #000;
}

.te-serv-muestra figcaption { margin: 0; }

.te-serv-muestra__cat {
	font-family: var(--wp--preset--font-family--titular);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: lowercase;
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--rojo);
}

.te-serv-muestra figcaption p {
	font-size: clamp(0.9rem, 0.92vw, 1.05rem);
	font-weight: 300;
	line-height: 1.5;
	margin: 0 0 0.9rem;
	color: var(--wp--preset--color--texto);
}

.te-serv-muestra figcaption p:last-child { margin-bottom: 0; }

/* Una reseña de cliente como prueba. No es adorno: es lo único de la página que
   no dice Triangle de sí misma. */
.te-serv-cita {
	max-width: 923px;
	margin: clamp(2.5rem, 5vw, 4rem) 0 0;
	padding-left: clamp(1.25rem, 2.5vw, 2rem);
	border-left: 3px solid var(--wp--preset--color--rojo);
}

.te-serv-cita blockquote {
	margin: 0;
	font-size: clamp(1rem, 1.15vw, 1.4rem);
	font-weight: 300;
	line-height: 1.5;
	color: var(--wp--preset--color--texto);
}

.te-serv-cita figcaption {
	margin-top: 0.9rem;
	font-size: clamp(0.8rem, 0.85vw, 0.95rem);
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--texto);
	opacity: 0.7;
}

/* Lo que tiene ancla no puede quedar debajo de la cabecera al saltar. */
.te-serv-tramo[id],
.te-serv-fichas > div[id] { scroll-margin-top: 6rem; }

/* El mockup de webs, arriba del todo en la página de Web: se enseña el trabajo
   antes de explicarlo. */
.te-serv-mockup {
	margin: clamp(2.5rem, 5vw, 4.5rem) auto 0;
}

.te-serv-mockup img {
	display: block;
	width: 100%;
	max-width: 1672px;   /* su tamaño real: ampliarlo solo lo emborrona */
	height: auto;
	margin-inline: auto;
}

.te-serv-mockup figcaption {
	max-width: 923px;
	margin: clamp(1rem, 2vw, 1.5rem) auto 0;
	font-size: clamp(0.85rem, 0.92vw, 1.05rem);
	font-weight: 300;
	line-height: 1.5;
	text-align: center;
	color: var(--wp--preset--color--texto);
	opacity: 0.8;
}

/* Dos columnas para un tramo: una captura a un lado y su explicación al otro. */
.te-serv-dos-columnas {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3.5vw, 3.5rem);
	align-items: start;
	max-width: 923px;
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* La captura va pequeña: es de 768 px y ampliarla la emborrona. */
.te-serv-captura {
	margin: 0;
	max-width: 768px;
}

.te-serv-captura img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
	border: 1px solid rgba(65, 65, 65, 0.15);
}

/* Dentro de las dos columnas, las fichas van en una sola. */
.te-serv-fichas--una {
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 2vw, 1.75rem);
	margin-top: 0;
}

/* Lista de sitios hechos, en la página de Web. */
.te-serv-lista-web {
	list-style: none;
	padding: 0;
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
	max-width: 923px;
	display: grid;
	gap: 1.1rem;
	font-size: clamp(1rem, 1.15vw, 1.4rem);
	font-weight: 300;
	line-height: 1.4;
	color: var(--wp--preset--color--texto);
}

.te-serv-lista-web a {
	font-weight: 700;
	color: var(--wp--preset--color--rojo);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* Vídeo o imagen de apoyo de un tramo. */
.te-serv-medio {
	display: block;
	width: 100%;
	height: auto;
	margin-top: clamp(2rem, 4vw, 4rem);
	border-radius: 0.5rem;
}

/* La composición de IA Boutique se reaprovecha de la landing: dos capas, las
   fichas detrás y las manos delante. Aquí sin recorte contra el borde de la
   franja —no hay franja— así que se ve entera. */
.te-serv-ia {
	position: relative;
	aspect-ratio: 972 / 1148;
	max-width: 40rem;
	margin: clamp(2rem, 4vw, 4rem) auto 0;
}

.te-serv-ia img {
	position: absolute;
	display: block;
	height: auto;
}

.te-serv-ia__fichas {
	left: 30.35%;
	top: 2.5%;
	width: 44.55%;
	rotate: -8.875deg;
	z-index: 1;
}

.te-serv-ia__manos {
	left: 0;
	top: 33.6%;
	width: 100%;
	z-index: 2;
}

/* El tráiler: miniatura con botón de play, que abre en el visor grande. */
.te-serv-trailer {
	display: block;
	position: relative;
	width: 100%;
	max-width: 923px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 0.5rem;
	background: #16273d;
	margin-top: clamp(2rem, 4vw, 4rem);
	text-decoration: none;
	cursor: pointer;
}

.te-serv-trailer img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.te-serv-trailer:hover img { transform: scale(1.03); }

.te-serv-trailer__jugar {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.te-serv-trailer__jugar svg {
	width: clamp(3rem, 5vw, 4.5rem);
	height: clamp(3rem, 5vw, 4.5rem);
	fill: rgba(255, 255, 255, 0.92);
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
}

.te-serv-trailer__jugar circle { fill: none; stroke: rgba(255,255,255,0.92); stroke-width: 1.4; }

.te-serv-trailer__pie {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: clamp(1rem, 2vw, 1.75rem);
	display: grid;
	gap: 0.2rem;
	background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
	color: #fff;
	pointer-events: none;
}

.te-serv-trailer__cat {
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: lowercase;
	opacity: 0.85;
}

.te-serv-trailer__titulo {
	font-family: var(--wp--preset--font-family--titular);
	font-size: clamp(1.1rem, 1.6vw, 1.75rem);
	font-weight: 700;
	line-height: 1.2;
}

/* Fichas de las películas: sinopsis corta y enlace a su web. */
.te-serv-peliculas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: clamp(2rem, 4vw, 4rem);
	margin-top: clamp(2rem, 4vw, 4rem);
}

/* La que está por estrenar se marca: es la noticia. Va en posición absoluta y
   todas las fichas reservan su hueco, así los títulos de las cuatro películas
   quedan a la misma altura aunque solo una lleve etiqueta.

   El hueco reservado es de un renglón, así que la etiqueta **no puede partirse
   en dos**: si se parte, la segunda línea cae encima del título. De ahí el
   `nowrap` y un texto corto de verdad. Con la fecha dentro medía 287 px en una
   columna de 304: cabía por los pelos y en la columna más estrecha (288) se
   habría salido. La fecha se ha mudado a la línea de ficha, que es su sitio. */
.te-serv-peliculas article {
	position: relative;
	padding-top: 3.1rem;   /* el alto de la etiqueta más un respiro */
}

.te-serv-peliculas__estreno {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	font-family: var(--wp--preset--font-family--interfaz);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	background: var(--wp--preset--color--rojo);
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
	margin: 0;
	white-space: nowrap;
	line-height: 1.2;
}

.te-serv-peliculas h3 {
	font-family: var(--wp--preset--font-family--titular);
	font-size: clamp(1.25rem, 1.6vw, 1.9rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--texto);
}

.te-serv-peliculas__ficha {
	font-size: clamp(0.8rem, 0.85vw, 0.95rem);
	line-height: 1.4;
	margin: 0 0 1.1rem;
	opacity: 0.7;
	color: var(--wp--preset--color--texto);
}

.te-serv-peliculas p {
	font-size: clamp(0.9rem, 0.92vw, 1.05rem);
	font-weight: 300;
	line-height: 1.5;
	margin: 0 0 0.9rem;
	color: var(--wp--preset--color--texto);
}

.te-serv-peliculas__enlace a {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.3em;
	color: var(--wp--preset--color--rojo);
}

/* Palmarés: una columna por película. Los premios ganados van en negrita y
   primero; después finalista y semifinalista; y al final las selecciones. Que
   se distingan importa: seleccionar y premiar no es lo mismo, y en este mundo
   se nota enseguida quien mezcla las dos cosas. */
.te-serv-palmares {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: clamp(2rem, 4vw, 4.5rem);
	margin-top: clamp(2rem, 4vw, 4rem);
	max-width: 923px;
}

.te-serv-palmares h3 {
	font-family: var(--wp--preset--font-family--titular);
	font-size: clamp(1.25rem, 1.6vw, 1.9rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--texto);
}

.te-serv-palmares__lema {
	font-size: clamp(0.9rem, 0.92vw, 1.05rem);
	font-weight: 300;
	font-style: italic;
	line-height: 1.4;
	margin: 0 0 1.5rem;
	color: var(--wp--preset--color--texto);
	opacity: 0.75;
}

.te-serv-palmares ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.85rem;
}

.te-serv-palmares li {
	font-size: clamp(0.9rem, 0.92vw, 1.05rem);
	font-weight: 300;
	line-height: 1.4;
	padding-left: 1.1rem;
	position: relative;
	color: var(--wp--preset--color--texto);
}

.te-serv-palmares li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--rojo);
}

.te-serv-palmares li strong { font-weight: 700; }

@media (max-width: 860px) {
	.te-serv-tramo { margin-top: 3rem; }
	.te-serv-fichas { grid-template-columns: 1fr; gap: 2rem; }
	.te-serv-muestra { grid-template-columns: 1fr; }
	.te-serv-dos-columnas { grid-template-columns: 1fr; }
	.te-serv-palmares { grid-template-columns: 1fr; gap: 2.5rem; }
}