/*
 * Capa de diseño sobre Elementor.
 *
 * En Elementor va la estructura y el contenido —lo que Marta edita— y aquí el
 * detalle fino: tipografías del Design System, colores y proporciones. Así el
 * diseño sigue estando en el repo y no encerrado en el JSON de la base de datos.
 *
 * Las clases (`tb-*`) se asignan a cada widget desde el campo "Clases CSS" de
 * Elementor. Los selectores van contra el markup interno del widget porque la
 * clase cae en el wrapper: `.tb-x .elementor-heading-title`, no `.tb-x`.
 *
 * Nada de `!important`. Elementor escribe en el CSS de cada página reglas como
 * `.elementor-widget-heading .elementor-heading-title { color: var(--e-global-color-primary) }`,
 * con la misma especificidad que las de aquí (0,2,0) y cargadas después, así
 * que en el empate ganaban ellas. Por eso las clases que compiten van
 * **duplicadas** (`.tb-x.tb-x`): sube la especificidad a (0,3,0) y deja de
 * depender del orden de encolado, que cambia según lo que Elementor decida
 * imprimir en cada página.
 */

/* ---------- Cintillo ---------- */

.tb-eyebrow.tb-eyebrow .elementor-heading-title {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-fg-muted);
}

.tb-eyebrow.tb-eyebrow .elementor-heading-title::before {
	content: "";
	width: 44px;
	height: 1px;
	background: var(--tbl-teal);
	flex: 0 0 auto;
}

.tb-eyebrow--light.tb-eyebrow--light .elementor-heading-title {
	color: rgba(255, 255, 255, 0.86);
}

/* ---------- Hero ---------- */

.tb-hero {
	position: relative;
	overflow: hidden;
}

.tb-hero .tb-hero__inner {
	max-width: 1440px;
	margin-inline: auto;
	width: 100%;
}

.tb-hero__title.tb-hero__title .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	/* Escala con el viewport: a 1440px llena el ancho, en móvil no se parte. */
	font-size: clamp(52px, 7.4vw, 116px);
	line-height: 0.92;
	letter-spacing: -0.025em;
	color: var(--tbl-white);
	max-width: 14ch;
}

/* La palabra en manuscrita es la firma de la marca, no una cursiva. */
.tb-hero__title.tb-hero__title em {
	font-style: normal;
	font-family: var(--font-script);
	color: var(--tbl-teal);
}

.tb-hero__lead.tb-hero__lead p {
	font-family: var(--font-sans);
	font-size: 17.5px;
	font-weight: var(--fw-light);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.82);
	max-width: 400px;
	margin: 0;
}

.tb-years__num.tb-years__num .elementor-heading-title {
	font-family: var(--font-display);
	font-size: 66px;
	line-height: 0.9;
	color: var(--tbl-teal);
}

.tb-years__txt.tb-years__txt p {
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

.tb-years__txt.tb-years__txt strong {
	display: block;
	font-weight: var(--fw-medium);
	color: var(--tbl-white);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

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

.tb-btn.tb-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.02em;
	padding: 17px 34px;
	border-radius: var(--radius-pill);
	transition: background var(--dur-base) var(--ease-out),
	            border-color var(--dur-base) var(--ease-out);
}

/* El verde es el de WhatsApp, no el de la marca: el usuario reconoce el canal
   antes de leer el botón. */
.tb-btn--wa.tb-btn--wa .elementor-button {
	background: var(--wa-green);
	color: var(--tbl-white);
	border: 1.5px solid transparent;
}

.tb-btn--wa.tb-btn--wa .elementor-button:hover,
.tb-btn--wa.tb-btn--wa .elementor-button:focus-visible {
	background: var(--wa-green-hover);
	color: var(--tbl-white);
}

.tb-btn--ghost.tb-btn--ghost .elementor-button {
	background: transparent;
	color: var(--tbl-white);
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	padding: 17px 30px;
}

.tb-btn--ghost.tb-btn--ghost .elementor-button:hover,
.tb-btn--ghost.tb-btn--ghost .elementor-button:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: var(--tbl-white);
	color: var(--tbl-white);
}

.tb-btn .elementor-button-icon svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.tb-btn--ghost .elementor-button-icon svg {
	width: 15px;
	height: 15px;
}

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

@media (max-width: 767px) {
	.tb-hero__title.tb-hero__title .elementor-heading-title {
		max-width: 100%;
	}

	.tb-hero__lead.tb-hero__lead p {
		max-width: 100%;
	}

	/* A pantalla estrecha las dos acciones ocupan el ancho: el pulgar no falla. */
	.tb-btn.tb-btn .elementor-button {
		width: 100%;
	}
}

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

/*
 * Píldora flotante, como en el diseño: no es una barra pegada al borde sino un
 * elemento que descansa sobre la foto del hero. El desenfoque de fondo la
 * separa de la imagen sin taparla.
 */
.tb-nav.tb-nav {
	position: fixed;
	top: 20px;
	left: 64px;
	right: 64px;
	/* El contenedor de Elementor trae su propio ancho máximo y, con `fixed`, el
	   botón se salía por la derecha: aquí manda la pareja left/right. */
	width: auto;
	max-width: none;
	box-sizing: border-box;
	z-index: 100;
	border-radius: var(--radius-pill);
	background: rgba(253, 252, 250, 0.78);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(29, 29, 31, 0.06);
	box-shadow: 0 8px 30px rgba(29, 29, 31, 0.07);
	transition: background var(--dur-slow, 280ms) var(--ease-out),
	            box-shadow var(--dur-slow, 280ms) var(--ease-out);
}

.tb-nav__logo img {
	display: block;
	height: 46px;
	width: auto;
}

/* El logotipo lleva la pincelada de marca y es apilado: se deja respirar por
   los lados como pide la guía, sin recortarlo ni separar sus partes. */
.tb-nav__logo.tb-nav__logo {
	flex-shrink: 0;
}

/* Enlaces del menú */
.tb-nav__menu.tb-nav__menu .elementor-item {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-light);
	color: var(--ink-700);
	padding: 12px 2px;
}

.tb-nav__menu.tb-nav__menu .elementor-nav-menu--main .elementor-item:hover,
.tb-nav__menu.tb-nav__menu .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--teal-700);
}

.tb-nav__menu .elementor-nav-menu--main > ul > li {
	margin-inline: 18px;
}

/* Desplegables: tarjeta blanca, no una lista pegada a la barra */
.tb-nav__menu .elementor-nav-menu--dropdown {
	border-radius: var(--radius-lg);
	border: 1px solid var(--ink-100);
	box-shadow: var(--shadow-md);
	padding: 10px;
	background: var(--tbl-white);
}

.tb-nav__menu.tb-nav__menu .elementor-nav-menu--dropdown a.elementor-sub-item {
	font-size: 14px;
	font-weight: var(--fw-light);
	color: var(--ink-700);
	border-radius: 10px;
	padding: 11px 14px;
}

.tb-nav__menu.tb-nav__menu .elementor-nav-menu--dropdown a.elementor-sub-item:hover {
	background: var(--teal-50);
	color: var(--teal-800);
}

/*
 * Estado activo y foco, en escritorio y en móvil.
 *
 * Elementor pinta con gris marengo (#3f444b) el elemento activo del
 * desplegable. Aquí el color del texto es oscuro, así que la página en la que
 * estás quedaba en negro sobre negro: el único item ilegible del menú era
 * justo el de la página abierta.
 */
.tb-nav__menu.tb-nav__menu .elementor-item.elementor-item-active,
.tb-nav__menu.tb-nav__menu .elementor-item.highlighted,
.tb-nav__menu.tb-nav__menu .elementor-item:focus,
.tb-nav__menu.tb-nav__menu .elementor-sub-item.elementor-item-active,
.tb-nav__menu.tb-nav__menu .elementor-sub-item.highlighted,
.tb-nav__menu.tb-nav__menu .elementor-sub-item:focus,
.tb-nav__menu.tb-nav__menu .elementor-nav-menu--dropdown a.elementor-item-active,
.tb-nav__menu.tb-nav__menu .elementor-nav-menu--dropdown a.highlighted {
	background-color: var(--teal-50);
	color: var(--teal-800);
}

/* En la barra, el enlace de la página actual se marca con la línea del diseño,
   no con un fondo: es un menú sobre cristal y un recuadro lo ensucia. */
.tb-nav__menu.tb-nav__menu .elementor-nav-menu--main > ul > li > a.elementor-item-active {
	background-color: transparent;
	color: var(--teal-700);
}

/* Menú y botón pegados a la derecha; el logo se queda a la izquierda. */
.tb-nav__menu.tb-nav__menu {
	margin-inline-start: auto;
}

/*
 * El botón de la barra es negro y en versalitas, como el diseño: el verde de
 * WhatsApp se reserva para las llamadas a la acción dentro del contenido, donde
 * se pide la cita de verdad. Al pasar por encima se vuelve aqua.
 */
.tb-nav__cta.tb-nav__cta .elementor-button {
	padding: 11px 22px;
	font-size: 12px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: var(--radius-pill);
	transition: background var(--dur-base) var(--ease-out),
	            color var(--dur-base) var(--ease-out);
}

.tb-nav__cta.tb-nav__cta .elementor-button:hover,
.tb-nav__cta.tb-nav__cta .elementor-button:focus-visible {
	background-color: var(--tbl-teal);
	color: var(--ink-900);
}

.tb-nav__cta.tb-nav__cta .elementor-button-icon svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/*
 * Móvil: barra mínima —solo logo y hamburguesa— y la llamada a la acción en una
 * burbuja al alcance del pulgar. Una barra que se come pantalla mientras se lee
 * estorba; el "Pedir cita" de la barra sobra porque abajo está la burbuja.
 */
@media (max-width: 767px) {
	.tb-nav.tb-nav {
		left: 12px;
		right: 12px;
		top: 12px;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		/* Barra baja: con el radio de píldora sobre una caja alta salía un
		   óvalo enorme que se comía la foto del hero. */
		padding: 9px 12px 9px 16px;
		border-radius: 28px;
		/* Translúcida pero sin desenfoque: el `backdrop-filter` emborronaba la
		   foto del hero justo detrás del nombre y ensuciaba la lectura, y en
		   los Android de gama media además cuesta un repintado por scroll. Un
		   85 % deja intuir la foto y mantiene el contraste del texto. */
		background: rgba(253, 252, 250, 0.85);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		position: fixed;
		transition: transform var(--dur-base) var(--ease-out);
	}

	/*
	 * El logotipo, partido en dos piezas: las iniciales con su mancha y, a su
	 * derecha, el bloque de nombre y firma. Las dos son piezas de la marca; lo
	 * único que cambia es que van separadas para que quepan en una barra baja.
	 */
	/*
	 * Las tres piezas —iniciales, nombre y hamburguesa— centradas en la misma
	 * línea. El contenedor ya las centra, pero el enlace que envuelve cada
	 * imagen es `inline-block` y el widget hereda un `line-height` de 24 px: el
	 * hueco bajo la línea base añadía 7 px por debajo de cada logotipo, así que
	 * su caja quedaba centrada pero el dibujo salía alto. La hamburguesa, que no
	 * lleva imagen, sí caía en el centro, y de ahí venía el desajuste.
	 */
	.tb-nav__logo--corto.tb-nav__logo--corto,
	.tb-nav__marca.tb-nav__marca {
		line-height: 0;
	}

	.tb-nav__marca.tb-nav__marca {
		margin-left: 10px;
		min-width: 0;
	}

	.tb-nav__marca.tb-nav__marca img {
		display: block;
		width: auto;
		/* El bloque de texto es muy apaisado (7:1): manda el alto. A menos de
		   26 px, "By Esther Madrid" deja de leerse. */
		height: 26px;
		max-width: 100%;
	}

	.tb-nav__logo img {
		height: 34px;
	}

	.tb-nav__cta {
		display: none;
	}

	/*
	 * En móvil el menú desplegable es el MISMO `<nav>` que en escritorio, con
	 * otra clase: ocultarlo con `display: none` deja la hamburguesa sin abrir
	 * nada. Aquí solo se coloca —cuelga de la barra y ocupa su ancho, no el del
	 * botón— y de mostrarlo se sigue encargando Elementor.
	 */
	.tb-nav__menu.tb-nav__menu {
		position: static;
		margin-inline-start: auto;
		width: auto;
	}

	/*
	 * La hamburguesa venía con el fondo gris translúcido de Elementor, que sobre
	 * la barra clara se ve como un recuadro pegado encima. Se integra: sin
	 * fondo, solo el icono en el color del texto.
	 */
	.tb-nav__menu.tb-nav__menu .elementor-menu-toggle {
		padding: 4px;
		margin: 0;
		background-color: transparent;
		border: 0;
		color: var(--ink-900);
	}

	.tb-nav__menu.tb-nav__menu .elementor-menu-toggle svg {
		fill: var(--ink-900);
		width: 26px;
		height: 26px;
	}

	.tb-nav__menu.tb-nav__menu .elementor-menu-toggle:hover,
	.tb-nav__menu.tb-nav__menu .elementor-menu-toggle:focus,
	.tb-nav__menu.tb-nav__menu .elementor-menu-toggle.elementor-active {
		background-color: transparent;
		color: var(--teal-700);
	}

	.tb-nav__menu.tb-nav__menu .elementor-menu-toggle.elementor-active svg {
		fill: var(--teal-700);
	}

	.tb-nav__menu.tb-nav__menu .elementor-nav-menu__container {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% + 10px);
		width: auto;
		max-width: none;
		border-radius: 20px;
		padding: 8px;
		background: var(--tbl-white);
		box-shadow: var(--shadow-lg);
	}

	.tb-nav__menu.tb-nav__menu .elementor-nav-menu__container a.elementor-item,
	.tb-nav__menu.tb-nav__menu .elementor-nav-menu__container a.elementor-sub-item {
		padding: 13px 16px;
		font-size: 15px;
	}

	/* Se retira al bajar y vuelve al subir; la controla mobile-nav.js. */
	.tb-nav--oculta {
		transform: translateY(calc(-100% - 20px));
	}

	/*
	 * Submenús dentro del panel móvil.
	 *
	 * Los `ul` anidados llevan la misma clase que el desplegable principal, así
	 * que heredaban su tarjeta blanca con sombra y salían flotando encima del
	 * menú en vez de abrirse dentro. Aquí se integran en el panel: sin sombra,
	 * sin fondo propio y con sangría, que es lo que dice que son hijos.
	 */
	.tb-nav__menu.tb-nav__menu ul.sub-menu {
		background: transparent;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		padding: 0 0 6px 14px;
		margin: 0;
	}

	.tb-nav__menu.tb-nav__menu ul.sub-menu a {
		font-size: 14.5px;
		padding: 11px 16px;
		border-inline-start: 2px solid var(--ink-100);
		border-radius: 0;
	}

	/*
	 * El elemento sobre el que se toca se pintaba en gris marengo, el color por
	 * defecto de Elementor: dentro de un menú claro se ve como un borrón y el
	 * texto casi no se lee.
	 */
	.tb-nav__menu.tb-nav__menu .elementor-item.highlighted,
	.tb-nav__menu.tb-nav__menu .elementor-item:hover,
	.tb-nav__menu.tb-nav__menu .elementor-item:focus,
	.tb-nav__menu.tb-nav__menu .elementor-item.elementor-item-active,
	.tb-nav__menu.tb-nav__menu .elementor-sub-item.highlighted,
	.tb-nav__menu.tb-nav__menu .elementor-sub-item:hover,
	.tb-nav__menu.tb-nav__menu .elementor-sub-item:focus,
	.tb-nav__menu.tb-nav__menu .elementor-sub-item.elementor-item-active {
		background-color: var(--teal-50);
		color: var(--teal-800);
	}

	.tb-nav__menu.tb-nav__menu ul.sub-menu a:hover,
	.tb-nav__menu.tb-nav__menu ul.sub-menu a.elementor-item-active {
		border-inline-start-color: var(--tbl-teal);
	}

	/* La flecha del padre gira al abrirse, para que se vea que hay más debajo. */
	.tb-nav__menu.tb-nav__menu .elementor-item .sub-arrow svg {
		transition: transform var(--dur-base) var(--ease-out);
	}

	.tb-nav__menu.tb-nav__menu .elementor-item.highlighted .sub-arrow svg {
		transform: rotate(180deg);
	}
}

/* ---------- Burbuja de "Pedir cita" ---------- */

.tb-fab {
	position: fixed;
	right: 16px;
	/* Por encima de la barra de gestos del móvil, no debajo. */
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 120;
	display: none;
	align-items: center;
	gap: 9px;
	padding: 14px 20px;
	border-radius: var(--radius-pill);
	background: var(--wa-green);
	color: var(--tbl-white);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-medium);
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(29, 29, 31, 0.28);
	transition: opacity var(--dur-base) var(--ease-out),
	            transform var(--dur-base) var(--ease-out);
}

.tb-fab svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}

@media (max-width: 767px) {
	.tb-fab {
		display: inline-flex;
	}
}

/* Mientras el CTA del hero está a la vista, o con el menú abierto, se guarda. */
.tb-fab.is-early,
.tb-fab.is-hidden {
	opacity: 0;
	transform: translateY(90px);
	pointer-events: none;
}

/* ---------- Secciones ---------- */

.tb-seccion.tb-seccion {
	/* El ancho de línea del diseño; más allá el texto se lee peor. */
	--tb-maxw: 1280px;
}

.tb-seccion__h2.tb-seccion__h2 .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: clamp(34px, 3.6vw, 54px);
	line-height: 1.04;
	letter-spacing: -0.02em;
}

.tb-seccion__intro.tb-seccion__intro {
	max-width: 380px;
}

.tb-seccion__intro.tb-seccion__intro p {
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: var(--fw-light);
	line-height: 1.7;
	margin: 0;
}

/* ---------- Rejilla ---------- */

/*
 * El ancho de las tarjetas ya NO se calcula aquí: va en los ajustes de cada
 * contenedor en Elementor (ancho por breakpoint + crecer). Hacerlo en CSS
 * funcionaba en la web pero no en el editor, donde Elementor pinta su propio
 * `--width: 100%` con más prioridad: el lienzo enseñaba las tarjetas apiladas
 * en una columna aunque la web las mostrara en tres.
 */


/* ---------- Tarjeta de terapia ---------- */

.tb-card.tb-card {
	background: var(--color-bg-card);
	/* El diseño usa sombra, no borde: con borde las tarjetas se ven duras y
	   recortadas contra el papel cálido del fondo. */
	border: 0;
	border-radius: 18px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: transform var(--dur-base) var(--ease-out),
	            box-shadow var(--dur-base) var(--ease-out);
}

.tb-card.tb-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.tb-card__photo.tb-card__photo {
	position: relative;
	padding: 0;
	overflow: hidden;
	flex-shrink: 0;
}

/* Altura fija, no proporción: así la foto mide lo mismo en las seis tarjetas
   sea cual sea el ancho de la columna, que es como está en el diseño. */
.tb-card__photo.tb-card__photo {
	height: 220px;
	background: var(--teal-100);
}

/* La cadena completa hasta la imagen tiene que medir 220px: el widget, su
   contenedor, el enlace que envuelve la foto y la figura. Si se salta uno, la
   imagen recupera su altura natural y cada tarjeta enseña una foto de un
   tamaño distinto. */
.tb-card__img.tb-card__img,
.tb-card__img.tb-card__img .elementor-widget-container,
.tb-card__img.tb-card__img > div,
.tb-card__img.tb-card__img a,
.tb-card__img.tb-card__img figure {
	display: block;
	height: 100%;
	width: 100%;
	margin: 0;
}

.tb-card__img.tb-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--ease-out);
}

.tb-card:hover .tb-card__img img {
	transform: scale(1.04);
}

/* La etiqueta va encima de la foto, no ocupando su propia fila */
.tb-card__tag.tb-card__tag {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	margin: 0;
}

.tb-card__tag.tb-card__tag .elementor-heading-title {
	display: inline-block;
	padding: 6px 13px;
	border-radius: var(--radius-pill);
	background: var(--teal-100);
	color: var(--teal-800);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.tb-card__tag--rosa.tb-card__tag--rosa .elementor-heading-title {
	background: var(--pink-100);
	color: var(--pink-700);
}

.tb-card__name.tb-card__name .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.tb-card__name.tb-card__name a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}

.tb-card__name.tb-card__name a:hover {
	color: var(--teal-700);
}

/* La descripción se queda con el hueco sobrante para que el pie de todas las
   tarjetas de una fila quede a la misma altura aunque el texto sea desigual. */
.tb-card__desc.tb-card__desc {
	flex: 1;
}

.tb-card__desc.tb-card__desc p {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-light);
	line-height: 1.62;
	margin: 0;
}

.tb-card__body.tb-card__body {
	flex: 1;
}

.tb-card__foot.tb-card__foot {
	border-top: 1px solid var(--ink-100);
	margin-top: auto;
}

.tb-card__price.tb-card__price .elementor-heading-title {
	font-family: var(--font-display);
	font-size: 27px;
	line-height: 1.1;
	/* El precio no se parte nunca en dos líneas: el símbolo se queda con la
	   cifra aunque la columna sea estrecha. */
	white-space: nowrap;
}

.tb-card__dur.tb-card__dur .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: var(--fw-regular);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tb-card__precio.tb-card__precio {
	flex-shrink: 0;
}

/* Botón pequeño de la tarjeta */
.tb-btn--wa-mini.tb-btn--wa-mini .elementor-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: var(--fw-medium);
	white-space: nowrap;
}

.tb-btn--wa-mini.tb-btn--wa-mini .elementor-button-icon svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

/* ---------- Rejillas de 3 y 4 ---------- */



/* ---------- Tarjeta de ritual ---------- */

.tb-ritual.tb-ritual {
	border: 0;
	border-radius: 16px;
	box-shadow: var(--shadow-sm);
	position: relative;
	overflow: hidden;
	transition: box-shadow var(--dur-base) var(--ease-out),
	            transform var(--dur-base) var(--ease-out);
}

.tb-ritual.tb-ritual:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

/* La pincelada de color de la marca, arriba de la tarjeta */
.tb-ritual.tb-ritual::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--tbl-teal), var(--tbl-pink));
}

.tb-ritual__kicker.tb-ritual__kicker .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.tb-ritual__name.tb-ritual__name .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: 30px;
	line-height: 1.1;
}

.tb-ritual__name.tb-ritual__name a {
	color: inherit;
	text-decoration: none;
}

.tb-ritual__name.tb-ritual__name a:hover {
	color: var(--teal-700);
}

.tb-ritual__sub.tb-ritual__sub .elementor-heading-title {
	font-family: var(--font-script);
	font-size: 19px;
}

.tb-ritual__pasos.tb-ritual__pasos ul {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

.tb-ritual__pasos.tb-ritual__pasos li {
	position: relative;
	padding: 9px 0 9px 22px;
	border-bottom: 1px solid var(--color-border);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-light);
	line-height: 1.5;
}

.tb-ritual__pasos.tb-ritual__pasos li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 17px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tbl-teal);
}

.tb-ritual__pasos.tb-ritual__pasos li:last-child {
	border-bottom: 0;
}

.tb-ritual__precio.tb-ritual__precio .elementor-heading-title {
	font-family: var(--font-display);
	font-size: 32px;
	white-space: nowrap;
}

.tb-ritual__dur.tb-ritual__dur .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* El pie de la tarjeta se pega abajo para que todas las tarjetas rimen aunque
   los rituales tengan distinto número de pasos. */
.tb-ritual__foot.tb-ritual__foot {
	margin-top: auto;
	border-top: 1px solid var(--color-border);
}

.tb-btn--wa-block.tb-btn--wa-block .elementor-button {
	width: 100%;
	padding: 14px 20px;
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-size: 13.5px;
	font-weight: var(--fw-medium);
}

.tb-btn--wa-block.tb-btn--wa-block .elementor-button-icon svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* ---------- Botón de línea ---------- */

.tb-btn--linea.tb-btn--linea .elementor-button {
	padding: 15px 30px;
	border: 1.5px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-medium);
	transition: border-color var(--dur-base) var(--ease-out),
	            background var(--dur-base) var(--ease-out);
}

.tb-btn--linea.tb-btn--linea .elementor-button:hover {
	border-color: var(--tbl-teal);
	background: var(--teal-50);
}

/* ---------- Promociones ---------- */

.tb-promo.tb-promo {
	border: 1px solid var(--ink-100);
	border-radius: 16px;
	background: var(--color-bg-card);
	box-shadow: var(--shadow-xs);
}

.tb-promo__dto.tb-promo__dto .elementor-heading-title {
	font-family: var(--font-display);
	font-size: 34px;
	line-height: 1;
}

.tb-promo__name.tb-promo__name .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.3;
}

.tb-promo__detalle.tb-promo__detalle .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: var(--fw-light);
	line-height: 1.5;
}

.tb-seccion__intro--ancha.tb-seccion__intro--ancha {
	max-width: 560px;
}

/* ---------- Esther ---------- */

.tb-esther__img.tb-esther__img img {
	display: block;
	width: 100%;
	border-radius: var(--radius-2xl);
	/* Retrato en vertical: la proporción evita que la cara se recorte. */
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.tb-esther__prosa.tb-esther__prosa p {
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: var(--fw-light);
	line-height: 1.75;
	margin: 0 0 14px;
}

/* El nombre en manuscrita, como en el titular del hero */
.tb-seccion__h2.tb-seccion__h2 em,
.tb-cta__h2.tb-cta__h2 em {
	font-style: normal;
	font-family: var(--font-script);
	color: var(--tbl-teal);
}

/* ---------- Opiniones ---------- */

.tb-eyebrow--centrado.tb-eyebrow--centrado .elementor-heading-title {
	justify-content: center;
}

.tb-opiniones__nota.tb-opiniones__nota .elementor-heading-title {
	font-family: var(--font-display);
	font-size: 52px;
	line-height: 1;
	text-align: center;
}

.tb-opiniones__fuente.tb-opiniones__fuente .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 13.5px;
	font-weight: var(--fw-light);
	text-align: center;
}

.tb-resena.tb-resena {
	border: 1px solid var(--ink-100);
	border-radius: 16px;
	box-shadow: var(--shadow-xs);
}

/* El nombre se empuja abajo para que las firmas queden alineadas aunque las
   reseñas tengan distinta longitud. */
.tb-resena__texto.tb-resena__texto {
	flex: 1;
}

.tb-resena__estrellas.tb-resena__estrellas .elementor-heading-title {
	font-size: 17px;
	letter-spacing: 0.14em;
}

.tb-resena__texto.tb-resena__texto p {
	font-family: var(--font-sans);
	font-size: 14.5px;
	font-weight: var(--fw-light);
	line-height: 1.65;
	margin: 0;
}

.tb-resena__nombre.tb-resena__nombre .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 14.5px;
	font-weight: var(--fw-medium);
	margin-top: auto;
}

.tb-resena__cuando.tb-resena__cuando .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 12.5px;
	font-weight: var(--fw-light);
}

/* ---------- CTA ---------- */

.tb-cta__h2.tb-cta__h2 .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: clamp(34px, 4vw, 58px);
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-align: center;
}

.tb-cta__texto.tb-cta__texto p {
	font-family: var(--font-sans);
	font-size: 16.5px;
	font-weight: var(--fw-light);
	line-height: 1.7;
	text-align: center;
	max-width: 520px;
	margin: 0 auto;
}

.tb-btn--tel.tb-btn--tel .elementor-button {
	border: 1.5px solid var(--teal-300);
	border-radius: var(--radius-pill);
	padding: 17px 30px;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-medium);
}

.tb-btn--tel.tb-btn--tel .elementor-button:hover {
	background: var(--tbl-white);
	border-color: var(--tbl-teal);
}

.tb-btn--tel.tb-btn--tel .elementor-button-icon svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

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

.tb-pie__col.tb-pie__col,
.tb-pie__marca.tb-pie__marca {
	flex: 1 1 180px;
}

.tb-pie__titulo.tb-pie__titulo .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.tb-pie__lista.tb-pie__lista ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tb-pie__lista.tb-pie__lista li {
	margin-bottom: 9px;
}

.tb-pie__lista.tb-pie__lista a,
.tb-pie__datos.tb-pie__datos a {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-light);
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}

.tb-pie__lista.tb-pie__lista a:hover,
.tb-pie__datos.tb-pie__datos a:hover {
	color: var(--tbl-teal);
}

.tb-pie__claim.tb-pie__claim p,
.tb-pie__datos.tb-pie__datos p {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-light);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.62);
	margin: 0 0 12px;
}

.tb-pie__logo.tb-pie__logo img {
	display: block;
	width: 168px;
	height: auto;
}

.tb-pie__fin.tb-pie__fin {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.tb-pie__copy.tb-pie__copy p,
.tb-pie__legal.tb-pie__legal p {
	font-family: var(--font-sans);
	font-size: 12.5px;
	font-weight: var(--fw-light);
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}

.tb-pie__legal.tb-pie__legal a {
	color: rgba(255, 255, 255, 0.62);
	text-decoration: none;
}

.tb-pie__legal.tb-pie__legal a:hover {
	color: var(--tbl-teal);
}

/* La burbuja de WhatsApp no debe tapar los enlaces legales del final. */
@media (max-width: 767px) {
	.tb-pie__fin.tb-pie__fin {
		padding-bottom: 72px;
	}
}

/* ---------- Páginas de texto (legales) ---------- */

/*
 * Las legales son las únicas páginas que no las monta Elementor: usan la
 * plantilla por defecto de Hello (`body.page-template-default` + `main.site-main`),
 * así que nada de lo que hace el hero de las demás las coloca. Sin esto el h1
 * arrancaba a 8 px del borde, debajo de la cabecera fija, y el texto ocupaba los
 * 1140 px del contenedor: líneas de 120 caracteres.
 */
/* La clase va doblada porque Hello fija `max-width: 1140px` sobre .site-main. */
.page-template-default .site-main.site-main {
	max-width: 820px;
	margin: 0 auto;
	padding: 144px 24px 80px;
}

@media (max-width: 767px) {
	.page-template-default .site-main.site-main {
		padding: 112px 20px 56px;
	}
}


/* El h1 lo pinta la plantilla de Hello, fuera de .tb-texto, con su sans por
   defecto: sin esto el título de la página desentonaba con el resto de la web. */
.page-template-default .entry-title {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: clamp(38px, 5vw, 54px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 26px;
}

.tb-texto h2 {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: 30px;
	line-height: 1.2;
	margin: 38px 0 14px;
}

.tb-texto h3 {
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: var(--fw-medium);
	margin: 26px 0 10px;
}

.tb-texto ul {
	margin: 12px 0 22px;
	padding-left: 22px;
}

.tb-texto p,
.tb-texto li {
	font-family: var(--font-sans);
	font-size: 15.5px;
	font-weight: var(--fw-light);
	line-height: 1.75;
	color: var(--ink-700);
}

/* La tabla de cookies y la advertencia de datos de salud: sin estilo propio
   salían como texto pelado, con los bordes de tabla por defecto del navegador. */
.tb-texto table {
	width: 100%;
	border-collapse: collapse;
	margin: 18px 0 26px;
	font-family: var(--font-sans);
	font-size: 14.5px;
	font-weight: var(--fw-light);
	color: var(--ink-700);
}

.tb-texto th {
	text-align: left;
	border: 0;
	font-size: 11px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-900, var(--ink-700));
	padding: 0 14px 8px 0;
	border-bottom: 1px solid var(--tbl-teal);
}

.tb-texto td {
	/* El borde por defecto del navegador dibuja una rejilla; aquí solo separa filas. */
	border: 0;
	padding: 12px 14px 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	line-height: 1.65;
	vertical-align: top;
}

.tb-texto blockquote {
	margin: 22px 0;
	padding: 2px 0 2px 20px;
	border-left: 2px solid var(--tbl-teal);
}

.tb-texto blockquote p {
	margin: 0;
}

.tb-texto hr {
	height: 0;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	margin: 32px 0;
}

/* ---------- Ficha de terapia ---------- */

.tb-pdp__title.tb-pdp__title .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: clamp(38px, 4.6vw, 66px);
	line-height: 1.02;
	letter-spacing: -0.02em;
}

/* La segunda palabra del titular va en manuscrita, como en la portada */
.tb-pdp__title.tb-pdp__title em {
	font-style: normal;
	font-family: var(--font-script);
	color: var(--tbl-teal);
}

.tb-pdp__lead.tb-pdp__lead p {
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: var(--fw-light);
	line-height: 1.7;
	margin: 0;
	max-width: 46ch;
}

.tb-pdp__img.tb-pdp__img img {
	display: block;
	width: 100%;
	border-radius: var(--radius-2xl);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Datos de la sesión: duración, precio y dónde */
.tb-fact__label.tb-fact__label .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tb-fact__value.tb-fact__value .elementor-heading-title {
	font-family: var(--font-display);
	font-size: 28px;
	line-height: 1.1;
	/* El precio no se parte: "45" y "€" en líneas distintas se lee fatal. */
	white-space: nowrap;
}

.tb-fact.tb-fact {
	flex: 0 0 auto;
	width: auto;
}

/* ---------- Cuerpo de la ficha ---------- */

/*
 * Solo en el cuerpo de las fichas, donde la prosa comparte fila con la tarjeta
 * de reserva. Suelta, `flex: 1 1 460px` dentro de una columna se interpreta
 * como 460 px de ALTO y deja un socavón debajo del texto.
 */
/* Descendiente, no hijo directo: con el contenedor en "boxed" Elementor mete
   un `.e-con-inner` entre medias. */
.tb-pdp__cuerpo .tb-prosa.tb-prosa {
	flex: 1 1 460px;
	max-width: 700px;
}

.tb-prosa.tb-prosa h2 {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: 30px;
	line-height: 1.15;
	margin: 34px 0 12px;
	color: var(--ink-900);
}

.tb-prosa.tb-prosa h2:first-child {
	margin-top: 0;
}

.tb-prosa.tb-prosa p,
.tb-prosa.tb-prosa li {
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: var(--fw-light);
	line-height: 1.75;
}

.tb-prosa.tb-prosa ul {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.tb-prosa.tb-prosa li {
	position: relative;
	padding: 8px 0 8px 22px;
	border-bottom: 1px solid var(--ink-100);
}

.tb-prosa.tb-prosa li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 17px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tbl-teal);
}

/* ---------- Tarjeta de reserva ---------- */

.tb-aside.tb-aside {
	border-radius: 18px;
	box-shadow: var(--shadow-sm);
	position: sticky;
	/* Por debajo de la barra flotante, que mide 76px más su separación. */
	top: 108px;
	flex: 0 0 auto;
}

.tb-aside__head.tb-aside__head .elementor-heading-title {
	font-family: var(--font-display);
	font-size: 22px;
	line-height: 1.2;
}

.tb-aside__sub.tb-aside__sub .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: var(--fw-light);
	margin-bottom: 8px;
}

.tb-aside__row.tb-aside__row {
	border-bottom: 1px solid var(--ink-100);
}

.tb-aside__k.tb-aside__k .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 13.5px;
	font-weight: var(--fw-light);
}

.tb-aside__v.tb-aside__v .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-medium);
	white-space: nowrap;
}

.tb-btn--tel-block.tb-btn--tel-block .elementor-button {
	width: 100%;
	margin-top: 8px;
	padding: 13px 20px;
	border: 1.5px solid var(--teal-200);
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-medium);
}

.tb-btn--tel-block.tb-btn--tel-block .elementor-button:hover {
	border-color: var(--tbl-teal);
	background: var(--teal-50);
}

.tb-btn--tel-block.tb-btn--tel-block .elementor-button-icon svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* ---------- Beneficios ---------- */

.tb-benef__num.tb-benef__num .elementor-heading-title {
	font-family: var(--font-display);
	font-size: 36px;
	line-height: 1;
}

.tb-benef__txt.tb-benef__txt .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: var(--fw-light);
	line-height: 1.55;
}

.tb-benef.tb-benef {
	border-top: 1px solid var(--ink-200);
	padding-top: 18px;
}

/* ---------- Relacionadas ---------- */

.tb-card--rel .tb-card__body {
	padding-bottom: 22px;
}

.tb-card__meta.tb-card__meta .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: var(--fw-light);
	letter-spacing: 0.04em;
}

@media (max-width: 1024px) {
	.tb-aside.tb-aside {
		position: static;
	}
}

/* ---------- Animaciones: red de seguridad ---------- */

/*
 * Elementor oculta con `elementor-invisible` todo lo que tiene animación de
 * entrada y lo revela por JavaScript. Si el script no llega a ejecutarse, ese
 * contenido no se ve nunca. Para quien pide menos movimiento, además, la
 * animación sobra: aquí se muestra todo de golpe y sin depender de nada.
 */
@media (prefers-reduced-motion: reduce) {
	.elementor-invisible {
		visibility: visible !important;
		animation: none !important;
	}
}

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

.tb-pagehero__title.tb-pagehero__title .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: clamp(38px, 5vw, 72px);
	line-height: 1.02;
	letter-spacing: -0.025em;
	max-width: 18ch;
}

.tb-pagehero__title.tb-pagehero__title em {
	font-style: normal;
	font-family: var(--font-script);
	color: var(--tbl-teal);
}

.tb-pagehero__lead.tb-pagehero__lead p {
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: var(--fw-light);
	line-height: 1.7;
	max-width: 62ch;
	margin: 0;
}

/* ---------- Sobre mí ---------- */

.tb-bio__img.tb-bio__img img,
.tb-espacio__img.tb-espacio__img img {
	display: block;
	width: 100%;
	border-radius: var(--radius-2xl);
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.tb-espacio__img.tb-espacio__img img {
	aspect-ratio: 4 / 3;
}

.tb-hito.tb-hito {
	border-top: 2px solid var(--tbl-teal);
}

.tb-hito__anio.tb-hito__anio .elementor-heading-title {
	font-family: var(--font-display);
	font-size: 30px;
	line-height: 1;
}

.tb-hito__nombre.tb-hito__nombre .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: var(--fw-medium);
}

.tb-hito__txt.tb-hito__txt p {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-light);
	line-height: 1.6;
	margin: 0;
}

.tb-form.tb-form {
	border-radius: 16px;
	box-shadow: var(--shadow-xs);
	border: 1px solid var(--ink-100);
}

.tb-form__t.tb-form__t .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: var(--fw-medium);
	line-height: 1.35;
}

.tb-form__d.tb-form__d p {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--fw-light);
	line-height: 1.6;
	margin: 0;
}

/* La cita de Esther: es su voz, va en grande y centrada */
.tb-cita__txt.tb-cita__txt p {
	font-family: var(--font-display);
	font-size: clamp(21px, 2.4vw, 30px);
	font-weight: var(--fw-regular);
	line-height: 1.45;
	text-align: center;
	max-width: 26ch;
	margin: 0 auto;
}

.tb-cita__firma.tb-cita__firma .elementor-heading-title {
	font-family: var(--font-script);
	font-size: 24px;
	text-align: center;
}

/* ---------- Contacto ---------- */

.tb-via.tb-via {
	border-radius: 16px;
	border: 1px solid var(--ink-100);
	box-shadow: var(--shadow-xs);
}

.tb-via__label.tb-via__label .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 11.5px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.tb-via__valor.tb-via__valor p {
	font-family: var(--font-sans);
	font-size: 17px;
	font-weight: var(--fw-medium);
	line-height: 1.45;
	margin: 0;
	/* Un correo largo no debe desbordar la tarjeta en móvil. */
	overflow-wrap: anywhere;
}

.tb-via__valor.tb-via__valor a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}

.tb-via__valor.tb-via__valor a:hover {
	color: var(--teal-700);
}

.tb-contacto__sala.tb-contacto__sala img {
	display: block;
	width: 100%;
	border-radius: var(--radius-xl);
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.tb-horario.tb-horario {
	border-radius: 18px;
	box-shadow: var(--shadow-sm);
	position: sticky;
	top: 108px;
	flex: 0 0 auto;
}

.tb-horario__t.tb-horario__t .elementor-heading-title {
	font-family: var(--font-display);
	font-size: 26px;
	line-height: 1.2;
	margin-bottom: 6px;
}

.tb-hora.tb-hora {
	border-bottom: 1px solid var(--ink-100);
}

.tb-hora__dia.tb-hora__dia .elementor-heading-title,
.tb-hora__h.tb-hora__h .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 14.5px;
	font-weight: var(--fw-light);
}

.tb-hora__h.tb-hora__h .elementor-heading-title {
	font-weight: var(--fw-medium);
	white-space: nowrap;
}

.tb-horario__nota.tb-horario__nota p {
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: var(--fw-light);
	line-height: 1.6;
	margin: 14px 0 4px;
}

@media (max-width: 1024px) {
	.tb-horario.tb-horario {
		position: static;
	}
}

/* ---------- Recorrido de las animaciones de entrada ---------- */

/*
 * `fadeInUp` de Elementor desplaza el elemento el 100 % de su propia altura:
 * en una tarjeta de 450 px son 450 px de recorrido, y con eso la entrada se
 * arrastra y se nota aparatosa. El diseño mueve 30 px, lo justo para que se
 * perciba que algo entra. Se redefine el fotograma para todo el sitio, así
 * cualquier elemento que use esta animación se comporta igual.
 */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 30px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ---------- Precios especiales sin cifra ---------- */

.tb-promo--abierta.tb-promo--abierta {
	/* Se distinguen de las promociones con porcentaje: borde aqua en vez de la
	   cifra grande en rosa, para que no compitan visualmente. */
	border-color: var(--teal-200);
	background: var(--teal-50);
}

.tb-promo__consultar.tb-promo__consultar .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 11.5px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.tb-seccion__h3.tb-seccion__h3 .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* ---------- Redes en el pie ---------- */

.tb-pie__redes.tb-pie__redes .elementor-social-icon {
	background-color: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.72);
	width: 38px;
	height: 38px;
	transition: background-color var(--dur-base) var(--ease-out),
	            color var(--dur-base) var(--ease-out);
}

.tb-pie__redes.tb-pie__redes .elementor-social-icon:hover {
	background-color: var(--tbl-teal);
	color: var(--ink-900);
}

.tb-pie__redes.tb-pie__redes .elementor-social-icon svg {
	fill: currentColor;
}

/* ---------- Cinta de palabras ---------- */

/*
 * Cruza la pantalla bajo el hero. El JS duplica la fila de palabras para que el
 * bucle no tenga costura, así que en el editor solo hay que escribirlas una vez.
 */
.tb-cinta.tb-cinta {
	overflow: hidden;
	position: relative;
}

/* En esta versión de Elementor el widget de texto no siempre envuelve su
   contenido en `.elementor-widget-container`: la pista es el propio widget. */
.tb-cinta__track.tb-cinta__track {
	display: flex;
	width: max-content;
	white-space: nowrap;
	animation: tb-cinta-scroll 38s linear infinite;
}

.tb-cinta__track.tb-cinta__track p {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.tb-cinta__track.tb-cinta__track span {
	font-family: var(--font-display);
	font-size: 26px;
	line-height: 1.2;
	color: var(--ink-900);
	padding: 0 32px;
	display: inline-flex;
	align-items: center;
}

/* El rombo entre palabras, como en el diseño. */
.tb-cinta__track.tb-cinta__track span::after {
	content: "✦";
	font-size: 12px;
	color: var(--teal-700);
	margin-left: 64px;
}

@keyframes tb-cinta-scroll {
	to { transform: translateX(-50%); }
}

/* Una cinta en movimiento perpetuo marea a quien pide menos animación. */
@media (prefers-reduced-motion: reduce) {
	.tb-cinta__track.tb-cinta__track {
		animation: none;
		justify-content: center;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.tb-cinta__track.tb-cinta__track span {
		font-size: 20px;
		padding: 0 18px;
	}

	.tb-cinta__track.tb-cinta__track span::after {
		margin-left: 36px;
	}
}

/* ---------- Aparatología ---------- */

/* Sin foto al lado, el texto ocuparía todo el ancho y las líneas se harían
   incómodas de leer. */
.tb-aparato__texto.tb-aparato__texto {
	max-width: 760px;
}

.tb-aparato__nombre.tb-aparato__nombre .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.015em;
}

/* Los pares invierten el orden para que el ojo no baje siempre por el mismo
   lado; en móvil manda el orden natural: primero el nombre, luego la foto. */
.tb-aparato--par.tb-aparato--par {
	flex-direction: row-reverse;
}

/*
 * Fotos de producto con fondo blanco y proporciones muy distintas —la lámpara
 * de infrarrojos es vertical y la diatermia apaisada—. Sin proporción fija cada
 * una se ve a su tamaño, centrada, y ninguna queda flotando en un marco vacío.
 */
.tb-aparato__img.tb-aparato__img img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 340px;
	margin-inline: auto;
	border-radius: var(--radius-lg);
	background: var(--tbl-white);
	padding: 16px;
}

.tb-aparato__prosa.tb-aparato__prosa h3 {
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: var(--fw-medium);
	letter-spacing: 0.01em;
	margin: 22px 0 8px;
	color: var(--ink-900);
}

@media (max-width: 767px) {
	.tb-aparato--par.tb-aparato--par {
		flex-direction: column;
	}
}

/* ---------- Aparatología en la carta ---------- */

.tb-ap.tb-ap {
	border: 1px solid var(--ink-100);
	border-radius: 14px;
	background: var(--color-bg-card);
}

.tb-ap__nombre.tb-ap__nombre .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 15.5px;
	font-weight: var(--fw-medium);
	line-height: 1.3;
}

.tb-ap__nombre.tb-ap__nombre a {
	color: inherit;
	text-decoration: none;
}

.tb-ap__nombre.tb-ap__nombre a:hover {
	color: var(--teal-700);
}

.tb-ap__txt.tb-ap__txt .elementor-heading-title {
	font-family: var(--font-sans);
	font-size: 13.5px;
	font-weight: var(--fw-light);
	line-height: 1.5;
}