/*
Theme Name:   NeoTech Child
Template:     neotech
Description:  Child theme de NeoTech para alojar la plantilla del catálogo de productos
              (CPT "service") y sus estilos, sin modificar el tema padre.
Version:      1.0.0
Text Domain:  neotech
*/

/* ============================================================
   CSS variables corporativas — override del parent theme
   El parent theme (neotech/style.css) define :root con los colores de la demo original
   (violeta #6C38FF, gradiente #8236FB → #076EF4). El child theme los sobreescribe aquí
   para que en CUALQUIER estado de la caché de Elementor el color sea el rojo corporativo.
   Elementor también sobreescribe estas variables vía su propio CSS de kit, pero si ese
   CSS aún no se ha regenerado (tras flush_css), este bloque actúa como red de seguridad.
   ============================================================ */
:root {
	--e-global-color-primary:     #e2231a;
	--e-global-color-linearstart: #e2231a;
	--e-global-color-linearend:   #a31913;
}

/* ============================================================
   Archivo de categoría (Aplicaciones/Sectores/Materiales) — estilo "Services 01" de NeoTech
   ============================================================ */

/* Descripción real de la categoría: 8/12 columnas centrada (2 a cada lado), dentro de una banda
   tintada (.ts-band--tint, ya definida más abajo — el mismo rojo corporativo al 8% que separa secciones
   en Empresa/Home/fichas de producto) en vez de una simple línea separadora.
   Padding simétrico arriba/abajo para que el texto quede centrado dentro de su propia banda con
   fondo — antes era 8px arriba / 60px abajo (pensado para pegar la banda al page-title) y quedaba
   visiblemente descompensado dentro del propio bloque de color. */
.ts-cat-intro {
	max-width: 1290px;
	margin: 0 auto;
	padding: 22px 20px;
}

/* El banner de título global (plantilla HFE "Breadcrumb") tiene 131px de padding-bottom en
   desktop, compartido por todo el sitio — igual ajuste que ya hicimos en las fichas de producto
   (body.single-service). "tax-service-cat" ya no se ve nunca en producción (taxonomy-service-
   cat.php ahora es solo un shim de redirección a las páginas reales), pero se deja por si algo
   la renderiza directamente; "tsneotech-catalog-page" es la clase real que llevan las 3 páginas
   Elementor de Aplicaciones/Sectores/Materiales (ver el filtro body_class en functions.php). Sin
   tocar el valor base que usan Empresa/Contacto/etc. */
body.tax-service-cat .elementor-element-5aeb283,
body.tsneotech-catalog-page .elementor-element-5aeb283 {
	--padding-bottom: 50px;
}

@media (max-width: 1024px) {
	body.tax-service-cat .elementor-element-5aeb283,
	body.tsneotech-catalog-page .elementor-element-5aeb283 {
		--padding-bottom: 30px;
	}
}

@media (max-width: 767px) {
	body.tax-service-cat .elementor-element-5aeb283,
	body.tsneotech-catalog-page .elementor-element-5aeb283 {
		--padding-bottom: 20px;
	}
}

.ts-cat-intro__col {
	width: 66.666%;
	margin: 0 auto;
	text-align: center;
	color: #5C6672;
	font-size: 14px;
	line-height: 1.75;
}

.ts-cat-intro__col p {
	margin: 0 0 18px;
}

.ts-cat-intro__col p:last-child {
	margin-bottom: 0;
}

@media (max-width: 1024px) {
	.ts-cat-intro__col {
		width: 83.333%;
	}
}

@media (max-width: 600px) {
	.ts-cat-intro__col {
		width: 100%;
	}
}

/* 2-column intro: Aplicaciones y Materiales */
.ts-cat-intro--two-cols {
	gap: 48px;
}

.ts-cat-intro--two-cols .ts-cat-intro__col {
	width: auto;
	flex: 1;
	margin: 0;
	text-align: left;
}

@media (max-width: 767px) {
	.ts-cat-intro--two-cols {
		flex-direction: column !important;
		gap: 0;
	}

	.ts-cat-intro--two-cols .ts-cat-intro__col {
		width: 100%;
	}
}

/* Banda con fondo tintado — ancho completo aunque esté dentro del entry-content de Gutenberg */
.ts-cat-band {
	background: rgba(226, 35, 26, 0.08);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
}

/* Catálogos/Certificados (Gutenberg): quitar el padding-bottom del breadcrumb y el hueco superior */
body.page-id-1256 .elementor-element-5aeb283,
body.page-id-1246 .elementor-element-5aeb283 {
	--padding-bottom: 0px;
}

body.page-id-1256 article.hentry,
body.page-id-1246 article.hentry {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body.page-id-1256 .entry-content,
body.page-id-1246 .entry-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body.page-id-1256 #page .site-content,
body.page-id-1246 #page .site-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Igualar aire arriba y abajo dentro de la banda: anular margin-bottom del párrafo auto-generado */
.ts-cat-band .ts-cat-intro__col p {
	margin-bottom: 0;
}

/* ─── Grid de catálogos ─── */

/* Wrapper 70% para título + PDFs (centrado, sin tocar la banda de descripción) */
.ts-downloads-wrap {
	width: 70%;
	margin: 40px auto 0;
}

@media (max-width: 1024px) {
	.ts-downloads-wrap { width: 90%; }
}

@media (max-width: 600px) {
	.ts-downloads-wrap { width: 100%; padding: 0 20px; box-sizing: border-box; }
}

.ts-downloads-section {
	margin-top: 32px;
}

/* Dentro del wrap el heading ya separa: menos margen entre heading y grid */
.ts-downloads-wrap .ts-downloads-section {
	margin-top: 14px;
}

.ts-downloads-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.ts-download-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 14px 8px 12px;
	text-decoration: none;
	color: #162339;
	text-align: center;
	transition: color .2s;
}

.ts-download-card:hover {
	color: #e2231a;
	text-decoration: none;
}

.ts-download-card__icon {
	color: #e2231a;
	line-height: 1;
}

.ts-download-card__icon svg {
	width: 44px;
	height: 52px;
}

.ts-download-card__name {
	font-size: 14px;
	font-weight: 700;
	font-family: Manrope, sans-serif;
	line-height: 1.4;
	color: inherit;
}

/* ─── Certificados ─── */
.ts-certs-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 24px;
	row-gap: 20px;
	margin-top: 36px;
}

.ts-certs-heading {
	font-size: 11px;
	font-weight: 700;
	font-family: Manrope, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #e2231a;
	border-bottom: 1px solid rgba(226, 35, 26, .2);
	padding-bottom: 8px;
	margin: 0;
}

.ts-certs-span2 {
	grid-column: span 2;
}

.ts-cert-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	text-align: center;
}

.ts-cert-item img {
	max-height: 80px;
	max-width: 100%;
	object-fit: contain;
}

.ts-cert-item svg {
	width: 64px;
	height: 80px;
}

.ts-cert-item__title {
	font-size: 13px;
	font-weight: 700;
	font-family: Manrope, sans-serif;
	color: #162339;
	margin: 0;
}

a.ts-cert-download {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	font-family: Manrope, sans-serif;
	color: #fff;
	text-decoration: none;
	background: #e2231a;
	padding: 7px 18px;
	border-radius: 6px;
	transition: opacity .15s;
	margin-top: 8px;
}

a.ts-cert-download:hover {
	opacity: .85;
	text-decoration: none;
	color: #fff;
}

@media (max-width: 767px) {
	.ts-downloads-grid { grid-template-columns: repeat(2, 1fr); }
	.ts-certs-grid-3 { grid-template-columns: 1fr 1fr; }
	.ts-certs-span2 { grid-column: span 2; }
}

@media (max-width: 480px) {
	.ts-downloads-grid { grid-template-columns: 1fr 1fr; }
	.ts-certs-grid-3 { grid-template-columns: 1fr; }
	.ts-certs-span2 { grid-column: span 1; }
}

/* Layout: sidebar con el árbol de categorías a la izquierda + grid de productos a la derecha. */
.ts-cat-layout {
	max-width: 1290px;
	margin: 0 auto;
	padding: 70px 20px 100px;
	display: flex;
	gap: 50px;
	align-items: flex-start;
}

/* Árbol de categorías — el filtro vive en la misma página (JS, sin recargar), pero cada nodo
   sigue siendo un enlace real y compartible (?cat=slug sobre la URL de la raíz), así que se
   puede entrar directo a "Acolchado". Desplegable (acordeón), independiente del filtro: el
   botón de la izquierda solo enseña/oculta subcategorías, no cambia qué productos se ven —
   pulsar el NOMBRE es lo que filtra. El botón es ahora un círculo con fondo propio (antes era
   solo una flechita sin fondo, poco evidente de que fuera pulsable) y va ANTES del texto, como
   en cualquier explorador de archivos / árbol de carpetas, que es el patrón que la gente ya
   conoce de otros sitios. */
.ts-cat-sidebar {
	flex: 0 0 280px;
	width: 280px;
}

.ts-cat-sidebar__label {
	font-family: Manrope, sans-serif;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #162339;
	margin: 0 0 16px;
}

.ts-cat-tree ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ts-cat-tree > ul > li > ul {
	padding-left: 22px;
	margin-top: 4px;
	margin-left: 13px;
	border-left: 1px solid #E5E7EA;
}

.ts-cat-tree > ul > li > ul > li > ul {
	padding-left: 22px;
	margin-left: 13px;
	border-left: 1px solid #E5E7EA;
}

/* Plegado por defecto: solo se ve si el <li> de su categoría padre tiene "is-open". */
.ts-cat-tree li > ul {
	display: none;
}

.ts-cat-tree li.is-open > ul {
	display: block;
}

.ts-cat-tree li {
	margin-bottom: 2px;
}

.ts-cat-tree__row {
	display: flex;
	align-items: center;
	gap: 1px;
}

.ts-cat-tree a {
	display: block;
	flex: 1 1 auto;
	padding: 8px 10px;
	border-radius: 8px;
	color: #5C6672;
	font-size: 14px;
	text-decoration: none;
	transition: background .2s, color .2s;
}

.ts-cat-tree > ul > li > .ts-cat-tree__row > a {
	font-weight: 700;
	color: #162339;
	font-size: 15px;
}

.ts-cat-tree a:hover {
	background: #F2F5FA;
	color: #e2231a;
}

.ts-cat-tree li.is-active-path > .ts-cat-tree__row > a {
	color: #e2231a;
}

.ts-cat-tree li.is-current > .ts-cat-tree__row > a {
	background: #e2231a;
	color: #fff !important;
	font-weight: 700;
}

/* Espaciador en las hojas sin subcategorías, para que su texto quede alineado con el de las
   categorías vecinas que sí tienen botón de desplegar. */
.ts-cat-tree__spacer {
	flex: 0 0 18px;
	width: 18px;
}

/* Botón de desplegar/plegar: solo la flecha, sin fondo ni círculo — el cuadrado de antes se veía
   demasiado grande y pesado para lo que es.
   El tema pone a TODO <button> un reset global (style.css del tema, ~línea 5207) que incluye un
   ":before" con opacity:0/visibility:hidden/width:0 en reposo (y opacity:1/width:100% en hover)
   — el mismo mecanismo que ya nos rompió el botón de "×" del popup y el de "Enviar" antes en este
   proyecto. Como mi botón es un <button> de verdad, hereda ese reset, así que aunque mi propio
   ":before" tenga más especificidad para "content", esas otras propiedades (opacity, visibility,
   width, position) no las pisaba yo, y la flecha quedaba prácticamente invisible. Se anula todo
   con !important, igual que se hizo en los otros dos casos. */
.ts-cat-tree__toggle {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0;
	position: relative;
	overflow: visible;
}

/* Triángulo sólido (el truco de los "borders"). La vez anterior, al rotar 90° parecía "dar la
   vuelta" — no era por usar un triángulo en sí, era porque el estado cerrado y el abierto tenían
   un `translate` distinto. Aquí el `translate(-50%,-50%)` es IGUAL en los dos estados y solo
   cambia el `rotate`, así que gira limpio sobre su propio centro en los dos casos. */
.ts-cat-tree__toggle:before,
.ts-cat-tree__toggle:hover:before {
	content: "" !important;
	position: absolute !important;
	top: 50%;
	left: 50%;
	width: 0 !important;
	height: 0 !important;
	border-style: solid;
	border-width: 5px 0 5px 7px;
	border-color: transparent transparent transparent #5C6672;
	visibility: visible !important;
	opacity: 1 !important;
	background: none !important;
	transform: translate(-50%, -50%) rotate(0deg);
	transition: transform .2s;
}

.ts-cat-tree li.is-open > .ts-cat-tree__row > .ts-cat-tree__toggle:before {
	transform: translate(-50%, -50%) rotate(90deg) !important;
}

@media (max-width: 900px) {
	.ts-cat-layout {
		flex-direction: column;
	}
	.ts-cat-sidebar {
		width: 100%;
		flex-basis: auto;
	}
}

/* Grid de productos — mismas clases que usa el tema para el widget "Service" (style 3: foto a
   sangre + caption blanca superpuesta), reutilizando su CSS ya existente (elementor.css). Solo
   se define aquí lo que el tema deja a la configuración del widget: nº de columnas y la altura
   de imagen. */
.ts-services-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

.ts-services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 24px;
	row-gap: 50px;
}

/* Cuadradas (1:1), como la foto real de los productos (p.ej. Perfil-Pack, 500×500) — antes era
   una altura fija en px pensada para la fotografía panorámica de la demo, que con fotos de
   producto cuadradas dejaba mucho hueco vacío arriba/abajo dentro de la tarjeta. */
.ts-services-grid .service-transition {
	aspect-ratio: 1 / 1;
	height: auto;
}

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

@media (max-width: 480px) {
	.ts-services-grid {
		grid-template-columns: 1fr;
	}
}

/* Pastilla de aviso, igual de espíritu que un alert-warning de Bootstrap (fondo/borde/texto en
   ámbar) — antes era solo texto centrado, sin destacar como un aviso.
   IMPORTANTE: sin "display:block" aquí — un <p> ya es block por defecto, y declararlo explícito
   pisa la regla nativa del navegador "[hidden]{display:none}" (misma especificidad, pero esta
   hoja de estilos del tema va después que la del navegador), así que el atributo `hidden` que
   pone PHP/JS deja de esconder la pastilla y se ve siempre, aunque sí haya productos. */
.ts-services-empty {
	width: fit-content;
	margin: 40px auto 100px;
	background: #FFF3CD;
	border: 1px solid #FFE69C;
	color: #664D03;
	border-radius: 24px;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

/* Paginación — igual a la demo "Services 01" (el widget original trae paginación). Reutiliza
   ".pagination .page-numbers" (ya estilizado en el style.css del tema: círculos de 40px,
   relleno violeta en el actual/hover) y solo añade el layout en fila que ese CSS no incluye
   para el formato `type=>'list'` de paginate_links(). */
.service-pagination.pagination {
	margin-top: 50px;
}

.service-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	list-style: none;
	padding: 0;
}

.service-pagination ul.page-numbers li {
	margin: 0;
}

/* El estilo "style-3" del tema deja el color de icono/título/extracto a lo que configure cada
   instancia del widget (en la demo original van forzados a blanco vía ajustes de Elementor que
   aquí no existen, al no usar el widget) — sin eso, el texto hereda un color oscuro por defecto
   y queda ilegible superpuesto a la foto. Se fuerza blanco, y se refuerza el degradado oscuro de
   la base de la imagen (el del tema solo cubre el 50% inferior y es bastante sutil), porque
   nuestras fotos de producto son mayormente fondos claros/blancos, no fotografía oscura como la
   demo original. */
.ts-services-grid .service-loop-title a,
.ts-services-grid .service-loop-excerpt,
.ts-services-grid .service-loop-excerpt p {
	color: #FFFFFF !important;
}

.ts-services-grid .service-image:before {
	height: 75% !important;
	background-image: linear-gradient(180deg, rgba(16, 27, 49, 0) 0%, rgba(16, 27, 49, .94) 100%) !important;
}

/* ============================================================
   Single Service (catálogo de productos Tecno-Spuma)
   ============================================================ */

/* --- Banner de título global (plantilla HFE "Breadcrumb", compartida por todo el sitio) ---
   Su padding-bottom (131px desktop) es el grueso del hueco antes del contenido. No se toca el
   valor base (lo usan Empresa/Contacto/etc.), solo se reduce aquí, vía body class, cuando se
   está viendo una ficha de producto. */

body.single-service .breadcrumb-wrap {
	display: none;
}


/* --- Hero: foto + info al lado --- */

.ts-service {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 20px 100px;
	display: flex;
	gap: 50px;
	align-items: flex-start;
}

@media (max-width: 1024px) {
	.ts-service {
		padding: 0 20px 70px;
	}
}

@media (max-width: 480px) {
	.ts-service {
		padding: 0 20px 56px;
	}
}

.ts-service__image {
	flex: 0 0 460px;
	width: 460px;
	border-radius: 16px;
	overflow: hidden;
	background: #F2F5FA;
}

.ts-service__image img {
	width: 100%;
	height: auto;
	display: block;
}

.ts-service__info {
	flex: 1 1 auto;
	min-width: 0;
}

.ts-service__title {
	font-family: Manrope, sans-serif;
	font-weight: 700;
	color: #162339;
	font-size: 30px;
	margin: 0 0 14px;
}

.ts-service__desc {
	color: #5C6672;
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 26px;
}

.ts-service__attr-group {
	margin-bottom: 22px;
}

.ts-service__attr-label {
	font-family: Manrope, sans-serif;
	font-weight: 700;
	color: #162339;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin: 0 0 10px;
}

.ts-service__attr-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ts-service__attr-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #F2F5FA;
	border: 1px solid #E5E7EA;
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 13px;
	color: #162339;
	font-weight: 500;
}

.ts-service__attr-list img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.ts-service__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 26px 0;
	padding: 18px 0;
	border-top: 1px solid #E5E7EA;
	border-bottom: 1px solid #E5E7EA;
}

.ts-service__meta-item span {
	display: block;
}

.ts-service__meta-item span:first-child {
	font-size: 12px;
	color: #5C6672;
	margin-bottom: 2px;
}

.ts-service__meta-item span:last-child {
	font-size: 14px;
	color: #162339;
	font-weight: 600;
}

.ts-service__cta {
	display: inline-block;
	background: #e2231a;
	color: #fff !important;
	border: none;
	padding: 14px 34px;
	border-radius: 8px;
	font-weight: 600;
	font-family: Manrope, sans-serif;
	text-decoration: none;
	transition: opacity .2s;
}

.ts-service__cta:hover {
	opacity: .88;
}

/* --- Tira de 3 categorías principales (réplica del bloque "destacados" de la Home) ---
   Banda con fondo tintado rojo corporativo (8%), igual convención que las bandas alternas de
   Empresa/Home, para separar visualmente esta sección de la ficha de producto. */

.ts-band--tint {
	/* El ancestro `.col-full` del tema (header.php) limita el contenido a 1290px; esto "rompe"
	   esa caja para que el FONDO llegue a los bordes del viewport (igual técnica que ya usa el
	   propio NeoTech para el contenido de Elementor: width 100vw + recentrado con transform). El
	   contenido interno (.ts-cats-strip) ya tiene su propio max-width:1290px y queda centrado. */
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	background: transparent;
	position: relative;
	overflow: hidden;
}

/* Imagen de fondo difuminada (pseudo-element para no afectar a los hijos) */
.ts-band--tint::before {
	content: '';
	position: absolute;
	inset: -24px; /* extra para evitar bordes del blur */
	background: url('/wp-content/uploads/2026/09/slide_2_tmp.jpg') center / cover no-repeat;
	filter: blur(8px);
	z-index: 0;
}

/* Overlay oscuro semitransparente para legibilidad */
.ts-band--tint::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(12, 22, 40, 0.52);
	z-index: 1;
}

.ts-cats-strip {
	max-width: 860px;
	margin: 0 auto;
	padding: 100px 20px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	position: relative;
	z-index: 2;
}

@media (max-width: 1024px) {
	.ts-cats-strip {
		padding: 70px 20px;
	}
}

@media (max-width: 480px) {
	.ts-cats-strip {
		padding: 56px 20px;
	}
}

.ts-cats-strip__item {
	display: block;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 16px;
	padding: 36px 32px;
	text-decoration: none;
	text-align: center;
	background: rgba(255, 255, 255, 0.10);
	backdrop-filter: blur(4px);
	transition: border-color .2s, background .2s;
}

.ts-cats-strip__item:hover {
	border-color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.18);
}

.ts-cats-strip__icon {
	font-size: 40px;
	color: #fff;
	margin-bottom: 18px;
	display: block;
	text-align: center;
}

.ts-cats-strip__title {
	font-family: Manrope, sans-serif;
	font-weight: 700;
	color: #fff;
	font-size: 19px;
	margin: 0 0 10px;
}

.ts-cats-strip__desc {
	color: rgba(255, 255, 255, 0.75);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

/* --- Popup "Solicita información" (reutiliza .ts-modal del mu-plugin) --- */

.ts-modal__title {
	font-family: Manrope, sans-serif;
	font-weight: 700;
	color: #162339;
	font-size: 22px;
	margin: 0 0 22px;
	padding-right: 30px;
}

/* --- Servicios/aplicaciones/materiales/sectores relacionados (uno por categoría raíz) --- */

.ts-related {
	max-width: 1290px;
	margin: 0 auto;
	padding: 100px 20px 100px;
}

@media (max-width: 1024px) {
	.ts-related {
		padding: 70px 20px 70px;
	}
}

@media (max-width: 480px) {
	.ts-related {
		padding: 56px 20px 56px;
	}
}

.ts-related__title {
	font-family: Manrope, sans-serif;
	font-weight: 700;
	color: #162339;
	font-size: 22px;
	margin: 0 0 26px;
}

.ts-related__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.ts-related__card {
	display: block;
	border: 1px solid #E5E7EA;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow .2s;
}

.ts-related__card:hover {
	box-shadow: 0 10px 30px rgba(22, 35, 57, .08);
}

.ts-related__card img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	background: #F2F5FA;
	display: block;
}

.ts-related__card-title {
	display: block;
	padding: 14px 16px;
	font-family: Manrope, sans-serif;
	font-weight: 600;
	color: #162339;
	font-size: 14px;
}

@media (max-width: 900px) {
	.ts-service {
		flex-direction: column;
	}
	.ts-service__image {
		width: 100%;
		flex-basis: auto;
	}
	.ts-cats-strip {
		grid-template-columns: 1fr;
	}
	.ts-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.ts-related__grid {
		grid-template-columns: 1fr;
	}
}

/* Nota: el "BY <autor>" de Noticias se elimina redefiniendo neotech_post_meta() en functions.php
   (gana a la del tema padre, que usa function_exists) — el bloque del autor ya ni se genera, así
   que no hace falta CSS para escondernos nada aquí. */

/* ============================================================
   Revolution Slider — eliminar capas decorativas (franjas del demo original)
   Image-0 = h1-bg-slider02.png (franja diagonal lilas/violeta, la principal)
   Image-1 = h1-bg-slider01.png (patrón de triángulos oscuros, también decorativo)
   Se ocultan por data-alias dentro del wrapper del slider.
   ============================================================ */
.rev_slider_wrapper [data-alias="Image-0"],
.rev_slider_wrapper [data-alias="Image-1"] {
	display: none !important;
	visibility: hidden !important;
}

/* ============================================================
   Page title / breadcrumb — eliminar franjas decorativas del tema (post 9472)
   Los 4 widgets imagen son overlays del demo original (breacumb-linear-*.png,
   breacumb-border.png) con tonos violeta. Se ocultan: el fondo propio de la
   sección (imagen de portada de cada página) ya es suficiente.
   ============================================================ */
.elementor-element-c2f14d4,
.elementor-element-604523e,
.elementor-element-5d3894b,
.elementor-element-c4efe2a {
	display: none !important;
}

/* ============================================================
   Icon circle deco (.show-icon-deco-yes) — cambiar de #F5F9FD a rojo corporativo
   El tema usa #F5F9FD (azul muy pálido) para el círculo decorativo detrás del icono.
   Se sobreescribe con el rojo corporativo al 8% para mantener coherencia de marca.
   ============================================================ */
.show-icon-deco-yes .elementor-icon-box-icon .elementor-icon:after {
	background-color: rgba(226, 35, 26, 0.08) !important;
}

/* ============================================================
   Icon-box del header (teléfono) — layout horizontal garantizado
   Elementor solo carga el CSS del widget icon-box cuando lo detecta en el contenido de la página.
   En algunas vistas (taxonomías, páginas sin Elementor) no lo detecta, y tras vaciar la caché
   (elementor flush_css) el archivo generado desaparece temporalmente. Este bloque reproduce
   el layout mínimo para que el icono quede siempre a la izquierda del texto, independientemente
   del estado de la caché de Elementor.
   ============================================================ */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
	display: flex;
	align-items: center;
}
.elementor-widget-icon-box.elementor-position-left .elementor-icon-box-wrapper,
.elementor-widget-icon-box.elementor-position-right .elementor-icon-box-wrapper {
	flex-direction: row;
}
.elementor-widget-icon-box.elementor-position-left .elementor-icon-box-icon {
	flex-shrink: 0;
	margin-right: var(--icon-box-icon-margin, 15px);
	margin-bottom: 0;
}
.elementor-widget-icon-box.elementor-position-right .elementor-icon-box-icon {
	flex-shrink: 0;
	order: 1;
	margin-left: var(--icon-box-icon-margin, 15px);
	margin-bottom: 0;
}

/* ============================================================
   Single Service — nueva maquetació (ficha de producto)
   Substituïx l'antiga .ts-service per .ts-product-wrap.
   ============================================================ */

/* El tema padre posa margin-top:120px al #page .site-content per a totes les pàgines
   que no siguin Elementor. En la ficha de producte el títol ja proporciona tot l'espai
   visual necessari, així que es cancel·la aquí. */
body.single-service #page .site-content {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0;
	padding-right: 0;
}

.ts-product-wrap {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Línea separadora de lado a lado entre el header nav y el contenido del producto.
   Usa el mismo truco 100vw que .ts-band--tint para romper el max-width del contenedor. */
body.single-service .ts-product-wrap::before {
	content: '';
	display: block;
	position: relative;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	height: 0;
	border-top: 1px solid #E5E7EA;
}

/* --- Header: títol + descripció + botó CTA --- */

.ts-product__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	padding: 36px 0 28px;
}

.ts-product__headline {
	flex: 1 1 auto;
	min-width: 0;
}

.ts-product__title {
	font-family: Manrope, sans-serif;
	font-weight: 800;
	color: #162339;
	font-size: 38px;
	line-height: 1.15;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.ts-product__desc {
	color: #5C6672;
	font-size: 16px;
	line-height: 1.65;
	margin: 0;
}

.ts-product__desc p {
	margin: 0;
}

.ts-product__cta {
	flex-shrink: 0;
	margin-top: 8px;
	white-space: nowrap;
}

/* --- Línia separadora fina grisa --- */

.ts-product__divider {
	border: none;
	border-top: 1px solid #E5E7EA;
	margin: 0;
}

/* --- Categories: Aplicaciones / Sectores / Materiales --- */

.ts-product__cats {
	display: flex;
	gap: 0;
	padding: 28px 0;
}

.ts-product__cat-col {
	flex: 1 1 0;
	padding-right: 32px;
}

.ts-product__cat-col + .ts-product__cat-col {
	padding-left: 32px;
	padding-right: 32px;
	border-left: 1px solid #E5E7EA;
}

.ts-product__cat-col:last-child {
	padding-right: 0;
}

.ts-product__cat-label {
	font-family: Manrope, sans-serif;
	font-weight: 700;
	color: #162339;
	font-size: 15px;
	margin: 0 0 12px;
}

.ts-product__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ts-product__tag {
	display: inline-flex;
	align-items: center;
	background: #F2F5FA;
	border: 1px solid #E5E7EA;
	border-radius: 20px;
	padding: 5px 14px;
	font-size: 13px;
	color: #162339;
	font-weight: 500;
	text-decoration: none;
	transition: border-color .2s, color .2s;
}

.ts-product__tag:hover {
	border-color: #e2231a;
	color: #e2231a;
}

/* --- Cos: imatge (≈50%) + atributs (≈50%) --- */

.ts-product__body {
	display: flex;
	gap: 56px;
	align-items: flex-start;
	padding: 56px 0 100px;
}

.ts-product__image {
	flex: 0 0 48%;
	width: 48%;
	border-radius: 16px;
	overflow: hidden;
	background: #F2F5FA;
}

.ts-product__image img {
	width: 100%;
	height: auto;
	display: block;
}

.ts-product__image-placeholder {
	aspect-ratio: 1 / 1;
	background: #F2F5FA;
}

.ts-product__info {
	flex: 1 1 auto;
	min-width: 0;
}

.ts-product__attr-group {
	margin-bottom: 28px;
}

.ts-product__attr-label {
	font-family: Manrope, sans-serif;
	font-weight: 700;
	color: #162339;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin: 0 0 14px;
}

/* Atributs de la info: icona i text més grans que als cards */
.ts-product__info .ts-service__attr-list {
	gap: 12px;
}

.ts-product__info .ts-service__attr-list li {
	padding: 14px 22px;
	font-size: 15px;
	gap: 12px;
	border-radius: 10px;
}

/* Propiedades (43×50) y presentaciones (127×60) — altura fija, ancho libre para respetar ratio */
.ts-product__info .ts-service__attr-list img {
	height: 56px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
}

/* Colores (40×40) — swatches cuadrados pequeños, igual que antes */
.ts-product__attr-group--colores .ts-service__attr-list img {
	height: 28px;
	width: 28px;
	object-fit: cover;
	border-radius: 4px;
}

/* --- Responsive --- */

@media (max-width: 1024px) {
	.ts-product__header {
		padding: 44px 0 28px;
	}
	.ts-product__body {
		padding: 44px 0 70px;
		gap: 40px;
	}
	.ts-product__title {
		font-size: 30px;
	}
}

@media (max-width: 900px) {
	.ts-product__header {
		flex-direction: column;
		gap: 20px;
		padding: 36px 0 24px;
	}
	.ts-product__cta {
		margin-top: 0;
	}
	.ts-product__cats {
		flex-direction: column;
		gap: 0;
	}
	.ts-product__cat-col + .ts-product__cat-col {
		padding-left: 0;
		padding-right: 0;
		border-left: none;
		border-top: 1px solid #E5E7EA;
		padding-top: 20px;
		margin-top: 20px;
	}
	.ts-product__body {
		flex-direction: column;
		gap: 32px;
		padding: 36px 0 56px;
	}
	.ts-product__image {
		width: 100%;
		flex-basis: auto;
	}
}

@media (max-width: 480px) {
	.ts-product__title {
		font-size: 26px;
	}
	.ts-product__body {
		padding: 28px 0 44px;
	}
}

/* ============================================================
   Footer — fila de logos del grupo empresarial
   ============================================================ */
.ts-group-logos {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 48px;
	padding: 20px 0;
	position: relative;
}
.ts-group-logos::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: calc(-50vw + 50%);
	width: 100vw;
	height: 1px;
	background: rgba(255,255,255,0.12);
}
.ts-group-logos a {
	display: flex;
	align-items: center;
	opacity: 0.75;
	transition: opacity 0.2s;
}
.ts-group-logos a:hover { opacity: 1; }
.ts-group-logos img {
	height: 32px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}
@media (max-width: 767px) {
	.ts-group-logos { gap: 24px; flex-wrap: wrap; }
	.ts-group-logos img { height: 26px; max-width: 130px; }
}


/* ============================================================
   Footer — botones de descarga (primera columna)
   ============================================================ */
.ts-footer-btns {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-top: 4px;
}

a.ts-footer-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 10px 18px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 8px;
	color: #fff;
	font-family: Manrope, sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background .2s, border-color .2s;
	white-space: nowrap;
}

a.ts-footer-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: #fff;
	color: #fff;
	text-decoration: none;
}

a.ts-footer-btn i {
	font-size: 15px;
	flex-shrink: 0;
}

/* ============================================================
   Footer CTA — placeholder mockup (a sustituir por PNG)
   ============================================================ */
.ts-cta-mockup-placeholder {
	width: 100%;
	min-height: 200px;
	border: 2px dashed rgba(255, 255, 255, 0.25);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 768px) {
	.ts-cta-mockup-placeholder { min-height: 140px; }
}

/* ============================================================
   Home — icon-boxes Sectores / Materiales
   Normal: texto blanco sobre imagen | Hover: texto oscuro sobre blanco
   ============================================================ */

/* Transición de color suave */
.elementor-element-291a3de .elementor-icon-box-title,
.elementor-element-291a3de .elementor-icon-box-title a,
.elementor-element-291a3de .elementor-icon-box-description,
.elementor-element-291a3de .elementor-icon-box-icon,
.elementor-element-9c61176 .elementor-icon-box-title,
.elementor-element-9c61176 .elementor-icon-box-title a,
.elementor-element-9c61176 .elementor-icon-box-description,
.elementor-element-9c61176 .elementor-icon-box-icon {
	transition: color .3s;
}

/* Normal: texto blanco */
.elementor-element-291a3de .elementor-icon-box-title,
.elementor-element-291a3de .elementor-icon-box-title a,
.elementor-element-9c61176 .elementor-icon-box-title,
.elementor-element-9c61176 .elementor-icon-box-title a {
	color: #fff !important;
}

.elementor-element-291a3de .elementor-icon-box-description,
.elementor-element-9c61176 .elementor-icon-box-description {
	color: rgba(255, 255, 255, 0.82) !important;
}

.elementor-element-291a3de .elementor-icon-box-icon,
.elementor-element-9c61176 .elementor-icon-box-icon {
	color: #fff !important;
}

/* Hover: texto oscuro sobre blanco */
.elementor-element-291a3de:hover .elementor-icon-box-title,
.elementor-element-291a3de:hover .elementor-icon-box-title a,
.elementor-element-9c61176:hover .elementor-icon-box-title,
.elementor-element-9c61176:hover .elementor-icon-box-title a {
	color: #162339 !important;
}

.elementor-element-291a3de:hover .elementor-icon-box-description,
.elementor-element-9c61176:hover .elementor-icon-box-description {
	color: #5c6672 !important;
}

.elementor-element-291a3de:hover .elementor-icon-box-icon,
.elementor-element-9c61176:hover .elementor-icon-box-icon {
	color: #e2231a !important;
}

/* ── Empresa: Centros de producción — image fully visible ── */
.elementor-element-1eefbab .neotech-elementor-wrapper-image {
	height: auto !important;
	overflow: visible;
}
.elementor-element-1eefbab .neotech-elementor-wrapper-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* ── Page-title / breadcrumb: force background-size cover ──────────────────
   Elementor's CSS generator omits background-size even when set to "cover" in
   the JSON if the cached .css file predates the meta update. These rules act
   as a hard override and also remove background-attachment:fixed (which breaks
   cover sizing on short images like the 1340×350 Tecno Spuma slides). */
.elementor-9472 .elementor-element-5aeb283:not(.elementor-motion-effects-element-type-background),
.elementor-9472 .elementor-element-5aeb283 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-size: cover !important;
	background-position: center center !important;
	background-attachment: scroll !important;
}
.elementor-497 .elementor-element-dba7849:not(.elementor-motion-effects-element-type-background),
.elementor-497 .elementor-element-dba7849 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-size: cover !important;
	background-position: center center !important;
	background-attachment: scroll !important;
}
.elementor-829 .elementor-element-c7c9c2a:not(.elementor-motion-effects-element-type-background),
.elementor-829 .elementor-element-c7c9c2a > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-size: cover !important;
	background-position: center center !important;
	background-attachment: scroll !important;
}

/* ── RevSlider 6.7: darken background without z-index conflicts ──────────────
   filter:brightness applies to the full visual output of sr7-bg (canvas included)
   sr7-txt / buttons are siblings of sr7-bg, so they are unaffected. */
sr7-bg {
	filter: brightness(0.45) !important;
}

/* ── Empresa: Trabaja con nosotros — image border-radius ── */
.elementor-element-3fe70b8 {
	border-radius: 12px !important;
	overflow: hidden !important;
}
.elementor-element-8592019 .neotech-elementor-wrapper-image {
	border-radius: 12px !important;
	overflow: hidden !important;
}