/* =========================================================
   Tratamientos Aguas - Estilos del tema
   ========================================================= */

:root {
	--ta-primary: #0b57e0;
	--ta-primary-dark: #02247b;
	--ta-dark-navy: #001534;
	--ta-logo-blue: #5399d4;
	--ta-light-blue: #eaf2fc;
	--ta-green: #1da670;
	--ta-radius-lg: 1.5rem;
	--ta-radius-md: 1rem;
	--ta-header-height: 104px; /* fallback; se recalcula en custom.js según la altura real del header */
}

/* Tipografía y componentes más compactos (fuentes y botones más chicos) */
html {
	font-size: 13px;
	scroll-behavior: smooth;
}
@media (min-width: 992px) {
	html {
		font-size: 15.5px;
	}
}

/* Scroll suave al navegar por anclas del menú (Servicios, Proyectos, etc.)
   sin que el header sticky tape el inicio de la sección. */
section[id] {
	scroll-margin-top: calc(var(--ta-header-height, 86px) + 14px);
}

body {
	font-family: 'Akt', -apple-system, BlinkMacSystemFont, sans-serif;
	color: #1c2733;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Akt', sans-serif;
}

a {
	color: var(--ta-primary);
}

.btn {
	font-size: .875rem;
	padding: .5rem 1rem;
	border-radius: .55rem;
}
.btn-primary {
	background-color: var(--ta-primary-dark);
	border-color: var(--ta-primary-dark);
}
.btn-primary:hover,
.btn-primary:focus {
	background-color: var(--ta-primary);
	border-color: var(--ta-primary);
}
.btn-outline-primary {
	color: var(--ta-primary-dark);
	border-color: var(--ta-primary-dark);
}
.btn-outline-primary:hover {
	background-color: var(--ta-primary-dark);
	border-color: var(--ta-primary-dark);
}
.text-primary { color: var(--ta-primary) !important; }

/* ---------- Header ---------- */
.ta-header {
	z-index: 1030;
	box-shadow: none; /* sin sombra en reposo / arriba del todo */
}
.ta-logo-text {
	font-size: 1.25rem;
	color: var(--ta-primary-dark);
}
/* Bootstrap agrega padding-top/bottom (.3125rem) al navbar-brand por defecto,
   lo que infla el alto del header por encima del logo. Lo anulamos para que
   el header ocupe el menor alto posible, respetando solo el tamaño del logo. */
.ta-header .navbar-brand {
	padding-top: 0;
	padding-bottom: 0;
	line-height: 0;
}
/* Selector genérico: cubre tanto el logo personalizado del Customizer
   (.custom-logo) como la imagen de respaldo (.ta-logo-img-default). */
.ta-header .navbar-brand img {
	max-height: 98px; /* antes 108px: el logo.png ya no tiene margen transparente, se ve igual de grande con menos alto reservado */
	width: auto;
	display: block;
	transition: max-height .25s ease;
}
@media (max-width: 991.98px) {
	.ta-header .navbar-brand img {
		max-height: 66px; /* antes 66px, misma proporción */
	}
}
.ta-logo-img-footer {
	max-height: 60px;
	filter: brightness(0) invert(1);
}
.ta-btn-nav {
	border-radius: .6rem;
	align-self: center; /* excluido del stretch: mantiene su alto normal de botón */
}

/* Bootstrap centra verticalmente (align-items: center) el contenido de
   .navbar > .container-xl y de .navbar-collapse. Lo cambiamos a "stretch"
   para que los ítems del menú (y el botón de Whatsapp) ocupen toda la
   altura del header, no solo la altura de su texto. Esto solo aplica en
   desktop: en mobile el menú se despliega como panel vertical y este
   comportamiento no tiene efecto (el navbar-collapse deja de ser flex-row). */
.ta-header .navbar > .container-xl,
.ta-header .navbar-collapse {
	align-items: stretch;
}

.ta-header .navbar-nav .nav-link {
	position: relative;
	color: #1c2733;
}

/* ---- Desktop (≥992px): ítems a lo ancho, ocupando el alto del header ---- */
@media (min-width: 992px) {
	.ta-header .navbar-nav .nav-link {
		display: flex;
		align-items: center;
		height: 100%;
		padding-top: 0;
		padding-bottom: 0;
	}
	/* Subrayado que "desliza" de izquierda a derecha, pegado arriba */
	.ta-header .navbar-nav .nav-link::after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 2px;
		background: var(--ta-primary);
		border-radius: 2px;
		transform: scaleX(0);
		transform-origin: right;
		transition: transform .3s ease;
	}
	.ta-header .navbar-nav .nav-link:hover::after,
	.ta-header .navbar-nav .nav-link:focus::after,
	.ta-header .navbar-nav .nav-link.active::after {
		transform: scaleX(1);
		transform-origin: left;
	}
}
.ta-header .navbar-nav .nav-link:hover,
.ta-header .navbar-nav .nav-link:focus,
.ta-header .navbar-nav .nav-link.active {
	color: var(--ta-primary-dark);
}
.ta-header .navbar-nav .nav-link.active {
	font-weight: 600;
}

/* ---- Botón hamburguesa propio (3 barras) que se transforma en X ---- */
.ta-navbar-toggler {
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ta-toggler-icon {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 14px;
}
.ta-toggler-icon span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--ta-dark-navy);
	transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.ta-toggler-icon span:nth-child(1) { top: 0; }
.ta-toggler-icon span:nth-child(2) { top: 6px; }
.ta-toggler-icon span:nth-child(3) { top: 12px; }
/* Bootstrap actualiza aria-expanded en el botón automáticamente al abrir/cerrar */
.ta-navbar-toggler[aria-expanded="true"] .ta-toggler-icon span:nth-child(1) {
	top: 6px;
	transform: rotate(45deg);
}
.ta-navbar-toggler[aria-expanded="true"] .ta-toggler-icon span:nth-child(2) {
	opacity: 0;
}
.ta-navbar-toggler[aria-expanded="true"] .ta-toggler-icon span:nth-child(3) {
	top: 6px;
	transform: rotate(-45deg);
}

/* Botón Whatsapp compacto (solo ícono), usado en mobile cuando el header
   está en "modo volver" (sin hamburguesa, ver .ta-btn-nav-icon más abajo). */
.ta-btn-nav-icon {
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
	flex-shrink: 0;
}

/* ---- Mobile/tablet (<992px): panel desplegable prolijo ---- */
@media (max-width: 991.98px) {
	/* .navbar > .container-xl hereda align-items: stretch (ver regla de
	   desktop más arriba), pero en mobile el logo y el botón hamburguesa
	   tienen alturas fijas distintas: se centran verticalmente entre sí
	   en vez de quedar alineados arriba por el stretch. */
	.ta-header .navbar > .container-xl {
		align-items: center;
	}
	.ta-header .navbar-toggler {
		border: none;
		border-radius: .6rem;
	}
	.ta-header .navbar-toggler:hover {
		background: var(--ta-light-blue);
	}
	.ta-header .navbar-toggler:focus {
		box-shadow: 0 0 0 .2rem rgba(11, 87, 224, .15);
	}
	/* El panel se separa del header y se muestra como una tarjeta flotante,
	   con sombra propia, en vez de un listado pegado al borde de la pantalla. */
	.ta-header .navbar-collapse {
		margin-top: .75rem;
		padding: .5rem;
		background: #fff;
		border-radius: var(--ta-radius-md);
		box-shadow: 0 16px 32px rgba(16, 32, 64, .14);
	}
	.ta-header .navbar-nav .nav-link {
		padding: .85rem 1rem;
		border-radius: .6rem;
		font-weight: 500;
		transition: background-color .15s ease, color .15s ease;
	}
	.ta-header .navbar-nav .nav-item + .nav-item {
		border-top: 1px solid #eef1f5;
	}
	.ta-header .navbar-nav .nav-link:hover,
	.ta-header .navbar-nav .nav-link:focus,
	.ta-header .navbar-nav .nav-link.active {
		background: var(--ta-light-blue);
	}
}

/* Botón "Volver" que reemplaza al menú de anclas en single/page/cpt.
   Vive junto al botón de Whatsapp (a la derecha del header). */
.ta-back-link {
	font-weight: 600;
	padding-left: 1rem;
	padding-right: 1rem;
	border-radius: .6rem;
	transition: background-color .2s ease, color .2s ease;
}
.ta-back-link:hover,
.ta-back-link:focus {
	background: var(--ta-light-blue);
}
.ta-back-link i {
	transition: transform .2s ease;
}
.ta-back-link:hover i {
	transform: translateX(-3px);
}
.ta-back-link::after {
	display: none;
}
.ta-header .navbar {
	padding-top: 0;
	padding-bottom: 0;
}

/* Header fijo (siempre visible al hacer scroll) en todas las páginas.
   Transparente solo en la portada (desktop); el resto del tiempo es blanco.
   El fondo blanco + sombra al bajar se agregan vía JS con la clase .is-scrolled. */
.ta-header-fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
	transition: background-color .25s ease, box-shadow .25s ease;
}
@media (min-width: 992px) {
	.ta-header-fixed.ta-header-transparent {
		background: transparent;
	}
}
.ta-header-fixed.is-scrolled {
	background: #fff;
	box-shadow: 0 4px 18px rgba(0, 21, 52, .08);
}

/* El header ya no ocupa espacio en el flujo (position: fixed), así que
   hay que compensar con padding-top en el contenido para que no quede tapado. */
body:not(.home) {
	padding-top: var(--ta-header-height, 86px);
}

/* ---------- Hero de páginas internas (single/page/archivos) ---------- */
.ta-single-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, var(--ta-light-blue) 0%, #f7fafd 55%, #ffffff 100%);
	border-bottom: 1px solid #e7edf4;
}
.ta-single-hero::before,
.ta-single-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}
.ta-single-hero::before {
	width: 320px;
	height: 320px;
	top: -150px;
	right: -70px;
	background: radial-gradient(circle, rgba(11, 87, 224, .10) 0%, rgba(11, 87, 224, 0) 70%);
}
.ta-single-hero::after {
	width: 220px;
	height: 220px;
	bottom: -120px;
	left: -60px;
	background: radial-gradient(circle, rgba(29, 166, 112, .10) 0%, rgba(29, 166, 112, 0) 70%);
}
.ta-single-hero > .container-xl {
	position: relative;
	z-index: 1;
}
.ta-single-hero h1 {
	font-size: clamp(1.7rem, 3.2vw, 2.4rem);
	letter-spacing: -.01em;
	color: var(--ta-dark-navy);
}

/* ---------- Hero ---------- */
.ta-home-hero-wrap {
	position: relative;
}
.ta-hero {
	/* Alto total = 1 pantalla completa. Como el header es "fixed" y no
	   ocupa espacio en el flujo, el padding-top reserva su altura para
	   que el contenido de texto quede exactamente en (100vh - header). */
	padding-top: var(--ta-header-height, 86px);
	min-height: 100vh;
	display: flex;
	align-items: center;
}
.ta-hero-content {
	width: 100%;
	z-index: 2;
}
.ta-kicker {
	font-size: .8rem;
	letter-spacing: .1em;
}
.ta-hero-title {
	font-size: clamp(1.6rem, 4vw, 2.5rem);
	line-height: 1.18;
}
.ta-hero-desc {
	max-width: 480px;
	font-size: .95rem;
}

/* En mobile/tablet, clamp() con un mínimo de 1.6rem quedaba chico (la parte
   "preferida" en vw nunca llega a pisar el máximo en pantallas angostas).
   Acá se fija un tamaño más grande y estable para ese rango. */
@media (max-width: 991.98px) {
	.ta-hero-title {
		font-size: 2.15rem;
	}
	.ta-hero-desc {
		font-size: 1.05rem;
		max-width: 100%;
	}
}

/* Imagen/fondo del hero: capa base compartida por desktop y mobile.
   Siempre centrada horizontal y verticalmente (object-position: center). */
.ta-hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Fondo "esqueleto" visible mientras la imagen del hero todavía está
	   cargando (se tapa apenas termina de cargar, ver .ta-hero-img). */
	background: linear-gradient(135deg, var(--ta-light-blue), #cfe2fb);
}
.ta-hero-media img,
.ta-hero-media .ta-hero-image-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	border-radius: 0;
}
.ta-hero-img {
	opacity: 0;
	transition: opacity .5s ease;
}
.ta-hero-img.is-loaded {
	opacity: 1;
}
.ta-hero-image-placeholder {
	background: linear-gradient(135deg, var(--ta-light-blue), #cfe2fb);
	font-size: 4rem;
	color: var(--ta-primary);
}

/* Desktop (≥992px): panel pegado al borde derecho, a toda la altura de
   la sección. Se extiende bastante hacia la izquierda a propósito, para
   que quede parcialmente debajo del texto (con un fundido en su borde
   izquierdo que mantiene legible el texto por encima). */
@media (min-width: 992px) {
	.ta-hero-media {
		right: 0;
		left: auto;
		width: 66%;
	}
	.ta-hero-media::before {
		content: "";
		position: absolute;
		inset: 0;
		width: 32%;
		background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
		z-index: 1;
		pointer-events: none;
	}
}

/* Mobile/tablet (<992px): la imagen cubre TODA la sección como fondo
   (no un recuadro debajo del texto), con un velo claro para legibilidad.
   Puede ser una foto distinta (vertical) a la de desktop. */
@media (max-width: 991.98px) {
	.ta-hero-media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg,
			rgba(255, 255, 255, .96) 0%,
			rgba(255, 255, 255, .93) 55%,
			rgba(255, 255, 255, .8) 100%);
		z-index: 1;
		pointer-events: none;
	}
}

.ta-hero-values {
	border-top: 1px solid #e9edf2;
	margin-top: 1rem;
	position: relative;
	z-index: 1;
}
.ta-value-icon {
	font-size: 1.35rem;
}

/* ---------- Logos clientes ---------- */
.ta-logo-img {
	max-height: 50px;
	filter: grayscale(100%);
	opacity: .7;
	transition: opacity .2s ease, filter .2s ease;
}
.ta-logo-img:hover {
	filter: none;
	opacity: 1;
}

/* ---------- Íconos SVG propios (reemplazan a Bootstrap Icons cuando hay
   una ilustración disponible; ver ta_render_icon() en template-tags.php).
   El tamaño y el color se heredan del contexto (font-size / color) igual
   que con una fuente de íconos, para que ambos sistemas se comporten igual. ---------- */
.ta-icon-svg {
	line-height: 0;
}
.ta-icon-svg svg {
	width: 1em;
	height: 1em;
	display: block;
	margin: 0 auto;
}
.ta-icon-svg svg,
.ta-icon-svg svg * {
	fill: currentColor;
	stroke: none;
}
/* Logo/imagen propia en PNG (no se puede recolorear como el SVG: se ve tal
   cual el archivo subido, pero respeta el mismo tamaño 1em que el resto de
   los íconos para que quede prolijo al lado de un texto). */
.ta-icon-svg img {
	width: 1em;
	height: 1em;
	display: block;
	margin: 0 auto;
	object-fit: contain;
}

/* ---------- Estadísticas ---------- */
.ta-stat-card {
	background: var(--ta-light-blue);
}
.ta-stat-icon {
	font-size: 2.4rem;
}
.ta-stat-number {
	font-size: 1.5rem;
	line-height: 1;
}

/* ---------- Servicios ---------- */
.ta-servicios {
	background: linear-gradient(
		to bottom,
		#ffffff 0%,
		#ffffff 27%,
		#f2f6fb 27%,
		#f2f6fb 87%,
		#ffffff 87%,
		#ffffff 100%
	);
	/* Aísla el stacking de todo lo que hay adentro en su propio contexto:
	   así, aunque algo interno tenga position/z-index, nunca puede terminar
	   pintándose por encima del header ni de ninguna otra sección del sitio. */
	isolation: isolate;
}
/* La fila filtro+cards se sacó a propósito de .container-xl (ver front-page.php)
   para que la columna del filtro llegue de forma natural hasta el borde real
   del viewport en desktop, sin recurrir a margin negativo ni position/z-index. */
.ta-servicios-wheel {
	height: 460px;
}
.ta-servicios-wheel-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
	display: block;
}
.ta-servicios-cards {
	padding: 2rem 1.25rem;
}
@media (min-width: 992px) {
	.ta-servicios-row {
		display: flex;
	}
	.ta-servicios-wheel {
		height: 100%;
		min-height: 500px;
	}
	.ta-servicios-cards {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 2rem 1.5rem 2rem 3rem;
	}
}
/* A partir de acá el container-xl del tema deja de ser 100% fluido y pasa
   a tener un ancho máximo fijo (1140px / 1320px): reproducimos ese mismo
   ancho como padding-right de la columna de cards para que su borde derecho
   quede alineado con el título de arriba y con el resto de las secciones. */
@media (min-width: 1200px) {
	.ta-servicios-cards {
		padding-right: calc((100vw - 1140px) / 2 + 1rem);
	}
}
@media (min-width: 1400px) {
	.ta-servicios-cards {
		padding-right: calc((100vw - 1320px) / 2 + 1rem);
	}
}
.ta-servicio-card {
	box-shadow: 0 4px 18px rgba(16,32,64,.06);
	transition: transform .2s ease, box-shadow .2s ease;
}
.ta-servicio-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(16,32,64,.1);
}
.ta-servicio-title {
	font-size: .95rem;
	line-height: 1.25;
	margin-bottom: .4rem;
}
.ta-servicio-text {
	font-size: .78rem;
	line-height: 1.4;
}
.ta-link-arrow i {
	transition: transform .2s ease;
	display: inline-block;
}
.ta-link-arrow:hover i {
	transform: translateX(4px);
}

/* ---------- Problemas ---------- */
/* Caja única con borde azul; los ítems internos se separan con líneas
   grises verticales (sin caja/sombra individual por ítem). El título
   es una badge centrada que "flota" sobre el borde superior de la caja. */
.ta-problems {
	padding: 1em;
}
.ta-problems-box {
	position: relative;
	border: 1.5px solid var(--ta-primary);
	background: #fff;
	margin-top: 1.15rem;
}
.ta-problems-inner {
	overflow: hidden;
	padding: 1.5rem 0;
}
.ta-problems-badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: .55rem 1.5rem;
	background: #fff;
	border: 1.5px solid var(--ta-primary);
	border-radius: 50px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ta-dark-navy);
	white-space: nowrap;
	z-index: 2;
}
@media (max-width: 575.98px) {
	.ta-problems-badge {
		width: 88%;
		font-size: .62rem;
		padding: .45rem .75rem;
		white-space: normal;
		text-align: center;
		line-height: 1.25;
	}
}
.ta-problem-card {
	display: block;
	font: inherit;
	cursor: pointer;
	border-left: 1px solid #e3e7ec;
	transition: background-color .2s ease;
}
.ta-problem-card:hover,
.ta-problem-card:focus-visible {
	background: var(--ta-light-blue);
}
.ta-problem-card h3 {
	font-size: .82rem;
}
.ta-problem-card p {
	font-size: .72rem;
	line-height: 1.35;
}
/* Mobile (2 por fila): sin separador vertical en el 1º de cada fila
   (impares); separador horizontal en toda fila que no sea la primera. */
.ta-problem-col:nth-child(2n+1) .ta-problem-card {
	border-left: none;
}
.ta-problem-col:nth-child(n+3) .ta-problem-card {
	border-top: 1px solid #e3e7ec;
}
/* Tablet (3 por fila) */
@media (min-width: 768px) {
	.ta-problem-col:nth-child(2n+1) .ta-problem-card {
		border-left: 1px solid #e3e7ec;
	}
	.ta-problem-col:nth-child(3n+1) .ta-problem-card {
		border-left: none;
	}
	.ta-problem-col:nth-child(n+3) .ta-problem-card {
		border-top: none;
	}
	.ta-problem-col:nth-child(n+4) .ta-problem-card {
		border-top: 1px solid #e3e7ec;
	}
}
/* Desktop (6 por fila): una sola fila, sin separadores horizontales */
@media (min-width: 992px) {
	.ta-problem-col:nth-child(3n+1) .ta-problem-card {
		border-left: 1px solid #e3e7ec;
	}
	.ta-problem-col:nth-child(6n+1) .ta-problem-card {
		border-left: none;
	}
	.ta-problem-col .ta-problem-card {
		border-top: none;
	}
}
.ta-problem-icon {
	font-size: 1.5rem;
}

/* Modal de detalle (texto más grande) al clickear una card de "problema" */
.ta-problem-modal-content {
	border: none;
	border-radius: 1rem;
}
.ta-problem-modal-icon {
	font-size: 2.5rem;
}
.ta-problem-modal-title {
	font-size: 1.3rem;
}
.ta-problem-modal-text {
	font-size: 1rem;
}

/* ---------- Proyectos ---------- */
.ta-proyectos {
	background: #f2f6fb;
}
.ta-proyectos-track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: .5rem;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.ta-proyectos-track::-webkit-scrollbar {
	display: none;
}
.ta-proyecto-slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}
@media (min-width: 768px) {
	.ta-proyecto-slide {
		flex: 0 0 calc((100% - 1.5rem) / 2);
	}
}
@media (min-width: 992px) {
	.ta-proyecto-slide {
		flex: 0 0 calc((100% - 3rem) / 3);
	}
}
.ta-proyecto-card {
	box-shadow: 0 4px 18px rgba(16,32,64,.06);
}
.ta-proyecto-img {
	height: 220px;
	object-fit: cover;
}
.ta-img-placeholder {
	background: #e9edf2;
	color: #9aa7b5;
	font-size: 2.5rem;
}
.ta-badge-categoria {
	top: 14px;
	left: 14px;
	background: var(--ta-green);
	color: #fff;
	font-weight: 600;
	padding: .4em .8em;
	border-radius: .4rem;
	font-size: .7rem;
}
.ta-slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: #fff;
	box-shadow: 0 4px 14px rgba(16,32,64,.15);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
}
.ta-slider-prev { left: -10px; }
.ta-slider-next { right: -10px; }

.ta-slider-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 5px;
	background: #d3ddea;
	transition: background-color .25s ease, width .25s ease;
}
.ta-slider-dot.active {
	width: 22px;
	background: var(--ta-primary);
}

/* ---------- Sobre nosotros ---------- */
/* La foto de la gota va de fondo de toda la sección (no como recorte
   en una columna): a la izquierda queda oscuro (ahí va el texto) y a
   la derecha se ve la gota/las ondas, tal como en la foto original.
   Solo en desktop: en mobile/tablet el recorte de "cover" dejaría la
   parte oscura afuera y el texto quedaría sobre la parte clara de la
   imagen, así que ahí se mantiene el degradé navy de siempre. */
.ta-about {
	background: linear-gradient(135deg, var(--ta-dark-navy), #06305c);
	/* La tarjeta CTA del footer se monta mitad sobre esta sección (ver
	   ".ta-footer-cta-outer" en el bloque de Footer): le sumamos ese mismo
	   50% de su alto real (--ta-cta-h, medido por JS) como padding-bottom
	   extra, así el solapamiento siempre cae en espacio vacío y nunca tapa
	   el texto o las cards de "¿Por qué elegirnos?". El valor en rem es el
	   respaldo para el primer render, antes de que corra el JS. */
	padding-top:4em;
	padding-bottom: calc(7rem + var(--ta-cta-h, 11.5rem) / 2);
}
@media (min-width: 768px) {
	.ta-about {
		padding-bottom: calc(3rem + var(--ta-cta-h, 7.5rem) / 2);
	}
}
@media (min-width: 992px) {
	.ta-about {
		background-image: url(../img/gota-footer.jpg);
		background-size: cover;
		background-position: right center;
		background-repeat: no-repeat;
	}
}
.ta-about-kicker {
	color: #8fbdf0;
	font-size: .8rem;
	letter-spacing: .08em;
}

/* ---------- CTA (usada en páginas internas, ej. single de Proyectos) ----------
   La franja "¿Tenés un proyecto en mente?" de la portada vive dentro del
   footer (ver .ta-footer-cta más abajo) y ahí sí se monta con margen
   negativo sobre el límite con la sección anterior, porque esa sección
   (.ta-about) le reserva ese mismo espacio de más con padding-bottom.
   Esta clase (.ta-cta-box) es una sección propia e independiente, usada en
   single-proyectos.php justo antes del footer normal del sitio (que en
   páginas internas NO reserva ningún espacio extra): por eso NO lleva
   margen negativo — antes lo tenía "heredado" del mismo truco de la
   portada, y el resultado era que se comía la fila del footer (Enlaces
   rápidos, Servicios, etc.) que viene después. Con padding normal
   (py-5, ya puesto en el HTML) queda con el mismo aire de siempre y sin
   pisar nada. */
.ta-cta {
	position: relative;
	z-index: 1;
	background: var(--ta-dark-navy);
}
.ta-cta-box {
	position: relative;
	z-index: 2;
	background: linear-gradient(115deg, var(--ta-green) 0%, #0675c6 55%, #4fa7e0 100%);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
.ta-cta-box .btn {
	width: 100%;
}
@media (min-width: 768px) {
	.ta-cta-box .btn {
		width: auto;
	}
}

/* ---------- Footer ---------- */
.ta-footer {
	background: var(--ta-dark-navy);
	font-size:0.8em;
}
@media (min-width: 768px) {
	.ta-footer {
		font-size:0.7em;
	}
}

/* ---------- CTA del footer (vive DENTRO del footer) ----------
   La franja "¿Tenés un proyecto en mente?" es parte del footer, no una
   sección aparte. Queda montada justo en el borde de arriba del footer,
   mitad sobre la sección anterior y mitad sobre el footer.

   .ta-footer-cta-outer es el contenedor que reserva el espacio dentro del
   flujo normal del footer. Su alto se fija en la mitad de la altura real
   de la tarjeta (--ta-cta-h, medida por JS en custom.js con
   ResizeObserver; el valor en rem es solo el respaldo para el primer
   render antes de que corra el JS, o si JS estuviera desactivado).

   .ta-footer-cta se sube con transform: translateY(-50%): a diferencia de
   un margin en %, que siempre se calcula sobre el ANCHO del contenedor,
   translateY(-50%) sí se calcula sobre la altura propia del elemento, que
   es exactamente el "50% de ese div" pedido. Como el contenedor ya reservó
   la mitad de esa altura, la tarjeta queda perfectamente centrada sobre el
   límite entre secciones: la mitad de arriba se monta sobre la sección
   anterior y la mitad de abajo cae adentro del footer sin dejar hueco ni
   tapar nada de lo que viene después (.ta-footer-main). */
.ta-footer-cta-outer {
	position: relative;
	z-index: 2;
	height: calc(var(--ta-cta-h, 11.5rem) / 2);
}
@media (min-width: 768px) {
	.ta-footer-cta-outer {
		height: calc(var(--ta-cta-h, 7.5rem) / 2);
	}
}
.ta-footer-cta {
	transform: translateY(-50%);
	/* Degradé más rico: pasa por un verde-azulado intermedio en vez de saltar
	   directo del verde al azul, y suma un brillo suave arriba a la derecha
	   para dar sensación de profundidad/vidrio en vez de un plano parejo. */
	background:
		radial-gradient(120% 180% at 100% -20%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(120deg, var(--ta-green) 0%, #17a389 22%, #0d7fbd 60%, #4fa7e0 100%);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
.ta-footer-cta .btn {
	width: 100%;
}
@media (min-width: 768px) {
	.ta-footer-cta .btn {
		width: auto;
	}
}

/* Todo lo que vive con el footer después de la tarjeta (columnas, links,
   mapa, copyright) cuelga de .ta-footer-main: como el alto de
   .ta-footer-cta-outer ya reservó exactamente la mitad de la tarjeta, acá
   no hace falta padding-top extra — arranca justo debajo del borde de la
   tarjeta, sin espacios ocultos ni superposición. */
.ta-footer-main {
	padding-top: 1.5rem;
	position: relative;
	z-index: 1;
}
@media (min-width: 768px) {
	.ta-footer-main {
		padding-top: 2rem;
	}
}
.ta-footer h4 {
	font-size:0.95em;
	margin-top: 2em;
}
.ta-footer-links li {
	margin-bottom: .5rem;
}
.ta-footer-links a {
	display: block;
	color: rgba(255,255,255,.75);
	text-decoration: none;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ta-footer-links a:hover {
	color: #fff;
}
/* Cada línea de Contacto es un flex row: el ícono queda fijo y alineado
   arriba, y el texto (link o span) puede pasar a una segunda línea sin
   quedar cortado ni "flotando" debajo del ícono — antes, con
   white-space:nowrap + text-overflow:ellipsis, el email largo se recortaba
   con "...". Ahora se permite el salto de línea y el ícono no se mueve. */
.ta-footer-contact li {
	display: flex;
	align-items: flex-start;
	color: rgba(255,255,255,.75);
}
.ta-footer-contact li > i {
	flex-shrink: 0;
	margin-top: .2em;
}
/* Selector reforzado (".ta-footer-contact a", no solo la clase) para pisar
   ".ta-footer-links a" (mismo <ul> tiene ambas clases) que trae
   white-space:nowrap + ellipsis pensado para los links de Enlaces rápidos. */
.ta-footer-contact a.ta-footer-contact-link,
.ta-footer-contact-text {
	display: inline;
	min-width: 0;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.ta-footer-contact {
	position: relative;
	z-index: 1;
	/* Un poco de aire después del último dato (dirección) y antes del
	   separador (<hr>) que sigue a la fila de columnas del footer. */
	padding-bottom: 1rem;
}
/* Bio/descripción de la marca: se recorta a 2 líneas con "..." en vez
   de desbordar la columna angosta que queda en mobile (2 columnas). Antes
   heredaba el tamaño de Bootstrap ".small" (0.875em) además del tamaño ya
   reducido de ".ta-footer" (0.8em/0.7em), quedando muy chica comparada con
   el resto del footer — se sube a 1.1em (sobre la base de ".ta-footer")
   para que se lea mejor y quede más pareja con los links/contacto. */
.ta-footer-bio {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	font-size: 1.25em;
}
/* Mobile: footer en 2 columnas, un poco más compacto (menos separación
   vertical, títulos más chicos) para aligerar esa vista. */
@media (max-width: 767.98px) {
	.ta-footer .row.gy-4 {
		--bs-gutter-y: 1.75rem;
	}
	.ta-footer h4 {
		font-size: .85rem;
		margin-bottom: .75rem !important;
	}
	.ta-footer-links li {
		margin-bottom: .4rem;
	}

	/* Reordenar el footer en mobile: el logo queda a la par de Contacto
	   (1ª fila) y, debajo, Enlaces rápidos y Servicios (2ª fila), en vez
	   del orden del HTML (Logo, Enlaces, Servicios, Contacto). El .row de
	   Bootstrap ya es un flex container, así que alcanza con reordenar
	   por posición (nth-child) sin tocar el markup. */
	.ta-footer .row.gy-4 > div:nth-child(1) { order: 1; } /* Logo */
	.ta-footer .row.gy-4 > div:nth-child(2) { order: 3; } /* Enlaces rápidos */
	.ta-footer .row.gy-4 > div:nth-child(3) { order: 4; } /* Servicios */
	.ta-footer .row.gy-4 > div:nth-child(4) { order: 2; } /* Contacto */
}

/* Columna del mapa de Argentina: ahora es una columna propia del footer
   (antes vivía como marca de agua semi-invisible dentro de "Contacto").
   Se muestra bien visible, alineada al mismo alto que el resto de las
   columnas y con la insignia superpuesta en la esquina inferior derecha. */
.ta-footer-map-col {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
}

/* Ancho de columnas del footer en desktop (lg+): antes Enlaces rápidos y
   Servicios usaban el mismo ancho que Contacto (col-lg-2, ~16.6% cada una)
   aunque tienen mucho menos contenido. Acá se angostan esas dos y ese
   espacio se reparte entre Logo, Contacto (para que entre el email/horario
   en 2 líneas sin apretarse) y el Mapa. Los porcentajes sostienen el mismo
   total de 100% que las columnas Bootstrap que reemplazan. */
@media (min-width: 992px) {
	.ta-footer-col-logo {
		flex: 0 0 24%;
		max-width: 24%;
	}
	.ta-footer-col-links,
	.ta-footer-col-servicios {
		flex: 0 0 13%;
		max-width: 13%;
	}
	.ta-footer-col-contacto {
		flex: 0 0 22%;
		max-width: 22%;
	}
	.ta-footer-map-col {
		flex: 0 0 28%;
		max-width: 28%;
	}
}
.ta-footer-map-img {
	width: 100%;
	max-width: 260px;
	height: auto;
	display: block;
}

/* ---------- Aire antes del footer en páginas internas ----------
   page.php, single.php, single-servicios.php, archive-proyectos.php y
   archive-servicios.php ya traen "py-5" (3rem arriba y abajo), pero el
   contenido quedaba pegado al footer sin transición. Esta clase solo
   pisa el padding-bottom (el "!important" es porque compite con la
   utilidad "py-5" de Bootstrap, misma especificidad). No se toca
   single-proyectos.php: ese ya maneja su propia transición con la franja
   ".ta-cta" (ver más arriba). */
.ta-page-pad-bottom {
	padding-bottom: 5rem !important;
}
@media (min-width: 768px) {
	.ta-page-pad-bottom {
		padding-bottom: 6rem !important;
	}
}

/* ---------- Créditos del footer (Diseñado por / Desarrollado por) ----------
   Línea chica junto al copyright: en desktop, a la derecha (la fila de
   arriba ya es flex + justify-content-between); en mobile, debajo (esa
   misma fila pasa a flex-column). Todo en una sola línea, separado por "•".
   El ícono usa font-size para fijar su tamaño: tanto el bi-* (fuente de
   íconos) como el SVG propio (que ya se dibuja a 1em × 1em, ver
   ".ta-icon-svg svg" más arriba) quedan con la MISMA altura sin importar
   cuál de los dos haya elegido el administrador. */
.ta-footer-credits {
	font-size: 1.05em;
	gap: .5em;
	white-space: nowrap;
}
.ta-footer-credit {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	white-space: nowrap;
}
.ta-footer-credit-icon {
	font-size: 1.05em;
	line-height: 1;
	flex-shrink: 0;
}
.ta-footer-credit-sep {
	opacity: .5;
}
@media (max-width: 767.98px) {
	.ta-footer-credits {
		flex-wrap: wrap;
		justify-content: center;
	}
}

.ta-whatsapp-float {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 50px;
	height: 50px;
	background: var(--ta-green);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	box-shadow: 0 8px 24px rgba(0,0,0,.2);
	z-index: 1040;
}
.ta-whatsapp-float:hover {
	color: #fff;
	transform: scale(1.05);
}

/* ---------- Contenido genérico (single/páginas) ---------- */
.ta-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--ta-radius-md);
}
.ta-content {
	font-size: 1rem;
	line-height: 1.75;
	color: #33404d;
}
.ta-content h2 {
	margin-top: 2rem;
	margin-bottom: 1rem;
	font-weight: 700;
	font-size: 1.4rem;
}
.ta-content h3 {
	margin-top: 1.5rem;
	margin-bottom: .75rem;
	font-weight: 700;
	font-size: 1.15rem;
}
.ta-content p {
	margin-bottom: 1.1rem;
}
.ta-content ul,
.ta-content ol {
	margin-bottom: 1.1rem;
	padding-left: 1.3rem;
}
.ta-content li {
	margin-bottom: .4rem;
}
.ta-content blockquote {
	border-left: 3px solid var(--ta-primary);
	padding: .75rem 1.25rem;
	margin: 1.5rem 0;
	font-style: italic;
	color: #4b5a68;
	background: var(--ta-light-blue);
	border-radius: 0 .75rem .75rem 0;
}
.ta-content a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- Breadcrumb (single de cpt, posts y páginas) ---------- */
.ta-breadcrumb {
	--bs-breadcrumb-divider: '\203A'; /* › */
	font-size: .8rem;
}
.ta-breadcrumb .breadcrumb-item a {
	color: var(--ta-primary-dark);
	text-decoration: none;
	font-weight: 500;
}
.ta-breadcrumb .breadcrumb-item a:hover {
	text-decoration: underline;
}
.ta-breadcrumb .breadcrumb-item.active {
	color: #6b7684;
}
.ta-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
	color: #aab4c0;
}

/* ---------- Meta de posts (fecha / autor) ---------- */
.ta-post-meta i {
	color: var(--ta-primary);
}

/* ---------- Sidebar de single (CTA + relacionados) ---------- */
.ta-sidebar-cta {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, #ffffff 0%, var(--ta-light-blue) 140%);
	border: 1px solid #e3ecf8;
	box-shadow: 0 14px 34px rgba(16,32,64,.08);
}
.ta-sidebar-cta::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--ta-primary), var(--ta-green));
}
.ta-sidebar-cta h3 {
	color: var(--ta-dark-navy);
}
.ta-sidebar-cta-icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--ta-primary), var(--ta-primary-dark));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	box-shadow: 0 8px 18px rgba(11,87,224,.3);
}
@media (min-width: 992px) {
	.ta-sidebar-sticky {
		position: sticky;
		top: calc(var(--ta-header-height, 86px) + 24px);
	}
}
.ta-related-list li a {
	display: flex;
	align-items: center;
	padding: .5rem .5rem;
	border-radius: .5rem;
	color: #1c2733;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
}
.ta-related-list li a:hover {
	background: var(--ta-light-blue);
	color: var(--ta-primary-dark);
	padding-left: .75rem;
}

/* ---------- Franja "Seguí mirando" / "Otros servicios" (single) ---------- */
.ta-related-strip {
	background: var(--ta-light-blue);
}
.ta-related-strip-thumb {
	aspect-ratio: 3 / 4;
	background: #000;
}
.ta-related-strip-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ta-related-strip-card {
	color: #1c2733;
	transition: transform .15s ease;
}
.ta-related-strip-card:hover {
	transform: translateY(-4px);
}
.ta-related-strip-card:hover .ta-related-strip-title {
	color: var(--ta-primary);
}
.ta-related-strip-title {
	font-size: .95rem;
	line-height: 1.3;
	transition: color .15s ease;
}
.ta-related-strip-badge {
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: .7rem;
}

/* ---------- Tags de posts ---------- */
.ta-tag-badge {
	background: var(--ta-light-blue);
	color: var(--ta-primary-dark);
	font-weight: 500;
	padding: .45em 1em;
	transition: background-color .15s ease, color .15s ease;
}
.ta-tag-badge:hover {
	background: var(--ta-primary-dark);
	color: #fff;
}

/* ---------- Navegación anterior/siguiente entre posts ---------- */
.ta-post-nav-link {
	color: #1c2733;
	text-decoration: none;
	max-width: 260px;
}
.ta-post-nav-link .fw-bold {
	transition: color .15s ease;
}
.ta-post-nav-link:hover .fw-bold {
	color: var(--ta-primary-dark);
	text-decoration: underline;
}

/* ---------- Cards del listado de blog (index.php) ---------- */
.ta-post-card {
	box-shadow: 0 4px 18px rgba(16,32,64,.06);
	transition: transform .2s ease, box-shadow .2s ease;
}
.ta-post-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(16,32,64,.1);
}

/* ---------- Video de YouTube: ícono sobre la tarjeta + reproductor en el single ----------
   Se usa en cualquier "box" de imagen que pueda tener video: tarjetas de
   Proyectos (archivo, slider de portada, relacionados del sidebar) y el
   box grande del single de Proyectos/Servicios (ver ta_render_card_media()
   y ta_render_single_media() en inc/template-tags.php). */
.ta-video-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: rgba(0, 15, 40, .6);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	pointer-events: none;
}
.ta-video-badge i {
	margin-left: 2px; /* óptica del triángulo del ícono play, centrado a ojo */
}

.ta-video-box {
	position: relative;
	display: block;
	overflow: hidden;
	cursor: pointer;
	background: #000;
	border: 0;
	padding: 0;
	width: 100%;
}
.ta-video-box img {
	display: block;
	width: 100%;
}
.ta-video-play-btn {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 15, 40, .18);
	color: #fff;
	transition: background-color .2s ease;
}
.ta-video-play-btn i {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: rgba(0, 15, 40, .75);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	margin-left: 4px; /* óptica del triángulo, centrado a ojo */
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.ta-video-box:hover .ta-video-play-btn {
	background: rgba(0, 15, 40, .32);
}
.ta-video-box.ta-video-playing .ta-video-play-btn {
	display: none;
}
.ta-video-iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Los videos de los proyectos/servicios son siempre verticales (se filman
   con el celular en vertical), así que la caja usa 9:16 en vez de 16:9, con
   un ancho máximo para que no quede desproporcionadamente alta. */
.ta-video-box {
	max-width: 380px;
	margin: 0 auto;
	aspect-ratio: 9 / 16;
}
.ta-video-box img {
	height: 100%;
	object-fit: cover;
}

/* ---------- Compartir contenido (single de blog, Proyectos y Servicios) ---------- */
.ta-share-btn {
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--ta-light-blue);
	color: var(--ta-primary-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.ta-share-btn:hover {
	background: var(--ta-primary);
	color: #fff;
	transform: translateY(-2px);
}
.ta-share-copy.ta-share-copied {
	background: var(--ta-green);
	color: #fff;
}

/* ---------- Sidebar "Seguí mirando" (otros proyectos, single-proyectos.php) ---------- */
.ta-sidebar-related {
	background: #fff;
	border: 1px solid #e7ecf2;
	box-shadow: 0 14px 34px rgba(16,32,64,.06);
}
.ta-related-list-media li + li {
	margin-top: .5rem;
}
.ta-related-list-media li a {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .5rem;
}
.ta-related-thumb {
	position: relative;
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: .75rem;
	overflow: hidden;
	background: #e9edf2;
}
.ta-related-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ta-related-thumb .ta-video-badge {
	width: 1.4rem;
	height: 1.4rem;
	top: 6px;
	right: 6px;
	font-size: .65rem;
}
.ta-related-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.ta-related-title {
	font-weight: 600;
	font-size: .92em;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.ta-related-badge {
	font-size: .72em;
	color: var(--ta-green);
	font-weight: 600;
	margin-top: .15rem;
}