/**
 * Secciones del Home (todo lo que no es el hero): qué resolvemos,
 * precisión clínica, categorías, productos destacados, marcas, FAQ,
 * cierre. Adaptado de techsalud-theme/assets/css/components.css
 * (líneas 513-1195, home viejo) al sistema de tokens de este tema —
 * NO se portan las declaraciones `animation:` de entrada del archivo
 * viejo: la entrada en scroll la controla home.js (GSAP ScrollTrigger),
 * mismo criterio ya establecido para el hero (ver
 * docs/superpowers/plans/2026-07-30-hero-hello-redesign.md, Task 2 —
 * CSS y GSAP nunca deben pelear por opacity/transform del mismo
 * elemento).
 *
 * Solo se enqueua en la plantilla Home (functions.php,
 * is_page_template).
 */

.techsalud-section {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 56px 1.25rem;
}

@media (min-width: 768px) {
	.techsalud-section {
		padding: 96px 2rem;
	}
}

.techsalud-section > * {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/*
 * Fuente única de verdad para TODO h2 DE TITULAR DE SECCIÓN del Home:
 * tamaño/peso/interlineado/tracking/color en un solo lugar — antes cada
 * sección (Qué resolvemos, Precisión clínica, FAQ) repetía el mismo
 * bloque de propiedades por separado y quedaban desincronizadas apenas
 * una cambiaba sola. Cada sección de abajo solo puede sobreescribir
 * layout (text-align/margin/max-width), nunca font-size/weight/
 * line-height/letter-spacing/color — si alguna sección necesita otro
 * tamaño (ver #destacados más abajo), sobreescribe SOLO font-size,
 * heredando el resto de acá.
 *
 * :not(.woocommerce-loop-product__title) es obligatorio: WooCommerce
 * también usa <h2> para el título de cada tarjeta de producto
 * (ul.products li.product h2.woocommerce-loop-product__title, ver
 * woocommerce.css) — sin esta exclusión, cualquier propiedad que este
 * selector declare y la regla de WooCommerce NO declare explícitamente
 * (ej. letter-spacing) se filtra igual a las tarjetas de producto por
 * cascada, aunque la regla de WooCommerce tenga mayor especificidad.
 * Bug real detectado en vivo (2026-08-01): las tarjetas de "Productos
 * destacados" se veían con el titular gigante de sección.
 */
.techsalud-section h2:not(.woocommerce-loop-product__title) {
	text-align: center;
	font-size: clamp(1.75rem, 3.5vw, 2.25rem);
	font-weight: var(--font-weight-semibold);
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: #18181b;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2rem;
}

.techsalud-section--alt {
	background: var(--color-background);
}

/*
 * Más peso tipográfico solo en Productos destacados (referencia:
 * hostinger.com — titulares grandes/bold). Selector de HIJO DIRECTO
 * (`>`), no descendiente: el propio titular de la sección
 * (`<h2>Productos destacados</h2>`) es hijo directo de `<section
 * id="destacados">`, pero el título de cada producto WooCommerce
 * (h2.woocommerce-loop-product__title) vive varios niveles más adentro
 * (ul.products > li.product > a > h2) — con el selector descendiente
 * anterior (`#destacados h2`, especificidad de ID), esa regla les ganaba
 * a los estilos propios de la tarjeta de producto y las inflaba al
 * tamaño del titular de sección (bug real ya corregido). El hijo directo
 * apunta solo al titular de la sección, nunca a componentes anidados —
 * mismo criterio a aplicar en cualquier regla nueva de este tipo.
 */
#destacados > h2 {
	font-size: var(--font-size-2xl);
}

.techsalud-que-resolvemos {
	background: var(--color-surface);
}

.techsalud-eyebrow {
	display: block;
	text-align: center;
	color: var(--color-cta);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 0.5rem;
}

.techsalud-eyebrow--left {
	text-align: left;
}

/* -------------------- Qué resolvemos -------------------- */

/*
 * Tamaño/peso/interlineado/tracking/color heredan de `.techsalud-section
 * h2` (fuente única de verdad, ver ese bloque más arriba) — acá solo se
 * sobreescribe layout (max-width/margin), que sí es propio de esta
 * sección.
 */
h2.techsalud-resolvemos-headline {
	/*
	 * Selector con la MISMA especificidad que `.techsalud-section h2`
	 * (0,1,1) — bug real ya encontrado antes en este proyecto (botones,
	 * ver components.css): una clase sola (0,1,0) pierde contra
	 * `.techsalud-section h2` para max-width/margin-bottom, sin importar
	 * el orden de archivo. Con la misma especificidad, esta regla gana
	 * por venir después en el mismo archivo.
	 */
	max-width: 800px;
	margin: 0 auto 1rem;
}

.techsalud-resolvemos-bajada {
	max-width: 60ch;
	margin: 0 auto;
	color: var(--color-text-muted);
	text-align: center;
}

/*
 * Categorías reales (mismas 4 de "Nuestras líneas") — tarjeta con foto
 * real + textura de olas (motivo ya usado en el fondo del hero, ver
 * hero.css) para diferenciarla del tratamiento de "Nuestras líneas"
 * (foto + degradado, sin olas) aunque comparten la misma foto/ícono por
 * categoría. Nombre y descripción vienen del término real de WordPress
 * (mismo dato que "Nuestras líneas"), nada inventado.
 */
.techsalud-resolvemos-categorias {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
	margin: 2.5rem auto 0;
	text-align: left;
}

@media (min-width: 900px) {
	.techsalud-resolvemos-categorias {
		grid-template-columns: repeat(4, 1fr);
	}
}

.techsalud-resolvemos-categoria {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 260px;
	border-radius: var(--radius-lg);
	padding: 1.5rem;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	background-size: cover;
	background-position: center;
	box-shadow: var(--shadow-md);
	transition: transform 250ms ease-out, box-shadow 250ms ease-out;
}

.techsalud-resolvemos-categoria::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(6, 43, 95, 0.15) 0%, rgba(6, 43, 95, 0.9) 100%);
}

.techsalud-resolvemos-categoria--solido {
	background: linear-gradient(150deg, var(--color-primary) 0%, var(--color-primary-active) 100%);
}

.techsalud-resolvemos-categoria-icono,
.techsalud-resolvemos-categoria-contenido {
	position: relative;
	z-index: 2;
}

.techsalud-resolvemos-categoria-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: 44px;
	height: 44px;
	margin-bottom: 1rem;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #fff;
	transition: background 200ms ease-out, color 200ms ease-out;
}

.techsalud-resolvemos-categoria h3 {
	margin: 0 0 0.35rem;
	font-size: var(--font-size-md);
	color: #fff;
}

.techsalud-resolvemos-categoria p {
	margin: 0 0 0.85rem;
	font-size: var(--font-size-xs);
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.82);
}

.techsalud-resolvemos-categoria-cta {
	display: inline-flex;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	color: #fff;
}

.techsalud-resolvemos-categoria:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.techsalud-resolvemos-categoria:hover .techsalud-resolvemos-categoria-icono {
	background: #fff;
	color: var(--color-primary);
}

/*
 * Carrusel infinito de logos: -50% del ancho total del track equivale
 * a exactamente una copia (el contenido está duplicado en el markup,
 * ver template-home.php) — técnica estándar de marquee sin salto
 * visible en el loop. La animación la corre home.js (GSAP); acá solo
 * layout/estética, nunca transform (para no pelear con el tween).
 */
.techsalud-marcas-marquee {
	overflow: hidden;
	margin: 2.5rem auto 0;
	max-width: 100%;
	mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.techsalud-marcas-track {
	display: flex;
	align-items: center;
	gap: 3rem;
	width: max-content;
}

.techsalud-marcas-track img {
	display: block;
	height: 28px;
	width: auto;
	max-width: 110px;
	object-fit: contain;
	flex-shrink: 0;
	/*
	 * Monocromo + opacidad baja: son 7 logos de marcas distintas con
	 * estilos/colores propios muy dispares — sin esto se ve una fila
	 * desordenada de logotipos peleando entre sí.
	 */
	filter: grayscale(1) opacity(0.6);
}

/* -------------------- Precisión clínica (imagen + texto) -------------------- */

/*
 * Full-bleed: la sección ya es 100vw (.techsalud-section), pero
 * .techsalud-section > * caps a max-width:1200px + centra CUALQUIER
 * hijo directo de la sección — como .techsalud-precision-media y
 * .techsalud-precision-content lo son (las clases de layout viven en
 * la propia <section>, no en un wrapper intermedio), ambas necesitan
 * su propio max-width:none/margin:0 para no quedar recentradas cada
 * una por separado. Así la foto toca el borde izquierdo del viewport y
 * el carrusel de productos toca el borde derecho, tal como pidió el
 * cliente.
 */
.techsalud-precision {
	max-width: none;
	margin: 0;
	/*
	 * `.techsalud-section` (base) trae `padding: ... 1.25rem` (mobile) /
	 * `... 2rem` (desktop) — sin anularlo acá, esos 32px de padding
	 * horizontal de la SECCIÓN quedaban por fuera de los `margin:0` que
	 * ya se les puso a `.techsalud-precision-media`/`-content`, dejando
	 * un espacio real (confirmado con getBoundingClientRect en vivo:
	 * media.left = 32px, no 0) aunque los hijos ya no tuvieran su propio
	 * margen. El padding vertical de la sección se conserva.
	 */
	padding-left: 0;
	padding-right: 0;
	display: grid;
	/*
	 * minmax(0, 1fr), NUNCA 1fr solo: bug real confirmado en vivo en
	 * mobile (2026-08-01) — un ítem de grid/flex tiene min-width:auto
	 * implícito, así que si su contenido interno se desborda (acá,
	 * .techsalud-precision-carousel con overflow-x:auto y cards de
	 * ancho fijo), el ítem NO se achica para contener el scroll: crece
	 * para caber todo el contenido intrínseco, empujando la columna del
	 * grid (y con ella la página entera) a un ancho mayor al viewport —
	 * el carrusel "se salía completamente de pantalla" porque nada lo
	 * estaba conteniendo. minmax(0, 1fr) permite que la columna se
	 * achique al ancho real del viewport, dejando que overflow-x:auto
	 * SÍ contenga y scrollee el carrusel en vez de expandir todo lo
	 * demás. Mismo problema ya resuelto para desktop (ver
	 * minmax(0, 1.4fr) más abajo) — acá faltaba aplicarlo también a la
	 * única columna de mobile.
	 */
	grid-template-columns: minmax(0, 1fr);
}

/*
 * La foto se oculta en mobile (pedido explícito del cliente,
 * 2026-08-01): en pantallas chicas compite por espacio con el
 * carrusel de productos, que es lo que realmente importa navegar ahí.
 * Vuelve a mostrarse en desktop (ver @media min-width:900px).
 */
.techsalud-precision-media {
	display: none;
}

.techsalud-precision-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.techsalud-precision-content {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	max-width: none;
	margin: 0;
	padding: 2.5rem 0 2.5rem 1.25rem;
}

.techsalud-precision-texto {
	max-width: 46ch;
	padding-right: 1.25rem;
}

/* Tamaño/peso/interlineado/tracking/color heredan de `.techsalud-section h2` — acá solo layout propio de esta sección. */
.techsalud-precision-texto h2 {
	text-align: left;
	margin: 0 0 1rem;
	max-width: none;
}

.techsalud-precision-texto p {
	color: var(--color-text-muted);
	margin: 0;
}

/*
 * El carrusel es scroll horizontal nativo (sin librería) — ver
 * lección de .techsalud-lineas-carousel más abajo: acá la card cortada
 * en el borde SÍ es la señal intencional de "hay más", reforzada con
 * las flechas .techsalud-precision-nav (ahora arriba del todo, sólidas
 * y grandes — el cliente reportó que las anteriores, chicas y de
 * borde fino sobre fondo claro, pasaban desapercibidas).
 */
/*
 * padding-right igual al padding-left de .techsalud-precision-content
 * (1.25rem): bug real reportado por el cliente (2026-08-02) — acá era
 * 0, así que el carrusel sangraba hasta el borde real de pantalla del
 * lado derecho mientras el izquierdo quedaba contenido por el padding
 * del bloque de texto, un "corte" asimétrico. Con este padding, las 2
 * cards que caben en mobile (ver .techsalud-precision-carousel.products
 * li.product) quedan
 * centradas y sin cortarse en ningún borde — la fórmula de su ancho ya
 * suma exactamente el 100% del espacio disponible, sea cual sea.
 */
.techsalud-precision-carousel-wrap {
	padding-right: 1.25rem;
}

.techsalud-precision-carousel-foot {
	display: flex;
	justify-content: flex-end;
	padding-right: 1.25rem;
	margin-top: 0.75rem;
}

.techsalud-precision-nav {
	display: flex;
	gap: 0.6rem;
}

.techsalud-precision-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: none;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: #fff;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: background 150ms ease-out, transform 150ms ease-out;
}

/*
 * :focus y :active explícitos: Hello Elementor define
 * button:focus, button:hover { color:#c36 } de forma global (mismo
 * bug de especificidad ya resuelto para los botones azules — ver
 * docs/ESTANDARES.md) — sin redeclarar acá, el botón se queda rojo
 * después del click (estado :focus persiste hasta perder el foco).
 */
.techsalud-precision-nav-btn:hover,
.techsalud-precision-nav-btn:focus,
.techsalud-precision-nav-btn:active {
	background: var(--color-primary-hover);
	color: #fff;
	transform: translateY(-2px);
}

.techsalud-precision-nav-prev {
	transform: scaleX(-1);
}

.techsalud-precision-nav-prev:hover,
.techsalud-precision-nav-prev:focus,
.techsalud-precision-nav-prev:active {
	transform: scaleX(-1) translateY(-2px);
}

.techsalud-precision-carousel {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

/*
 * flex-wrap:nowrap con especificidad reforzada (2 clases): bug real
 * detectado en vivo (2026-08-02), recién migrado a la card nativa de
 * WooCommerce — `ul.products` (woocommerce.css) trae flex-wrap:wrap
 * para su uso normal en grillas, y esa regla (elemento+clase) le gana
 * en especificidad a `.techsalud-precision-carousel` sola (1 clase), sin
 * importar el orden de carga. El carrusel envolvía en filas en vez de
 * scrollear horizontal — scrollWidth quedaba igual a clientWidth, cero
 * overflow que scrollear.
 */
.techsalud-precision-carousel.products {
	flex-wrap: nowrap;
	justify-content: flex-start;
	margin: 0;
}

.techsalud-precision-carousel::-webkit-scrollbar {
	display: none;
}

/*
 * La card en sí es el content-product.php nativo de WooCommerce, mismo
 * componente que Tienda/categorías/relacionados/Productos destacados
 * (pedido explícito del cliente, 2026-08-02: "utilizar las buenas
 * prácticas de la manera que mostramos el producto... en el home
 * tenemos un estilo muy distinto que otras páginas" — ver
 * woocommerce.css para el estilo compartido de `ul.products li.product`).
 * Acá solo se sobreescribe tamaño/snap para que funcione dentro de un
 * carrusel horizontal en vez de una grilla que envuelve — el `<ul>`
 * lleva ambas clases (.techsalud-precision-carousel.products) a
 * propósito, así hereda el estilo de card compartido y estas reglas le
 * ganan por especificidad (2 clases contra 1) sin duplicar nada.
 *
 * Ancho relativo (no un px fijo): 2 cards completas caben en el ancho
 * visible del carrusel en mobile (pedido explícito del cliente,
 * 2026-08-01, "lo máximo a mostrar en mobile son 2") — la fórmula
 * descuenta la mitad del gap entre cards para que 2 anchos + 1 gap den
 * exactamente 100%, cualquier card de más queda como el corte/pista de
 * scroll ya usado en el resto del carrusel. En desktop (≥900px) se
 * vuelve a un ancho fijo (240px, ver más abajo) — ahí ya no aplica
 * "máximo 2 visibles".
 */
.techsalud-precision-carousel.products li.product {
	flex: 0 0 auto;
	width: calc(50% - 0.625rem);
	scroll-snap-align: none;
	animation: none;
}

/*
 * Solo la 1ª de cada par recibe scroll-snap-align: bug real (2026-08-02)
 * — con TODAS las cards alineables, el reposo (tras flecha, arrastre o
 * rueda) podía quedar en cualquier card individual, mostrando una
 * completa + la siguiente cortada a la mitad. Alinear solo cada 2ª card
 * fuerza que cualquier reposo caiga siempre en un límite de par (2
 * cards completas). Cuenta children reales + decorativos combinados
 * (mismo <ul>, ver template-parts.php) — con cantidad de productos
 * impar (ej. Desechables, 17) la paridad se corre 1 card justo en la
 * costura hacia la copia decorativa; efecto acotado a ese instante del
 * loop infinito, no al uso normal del carrusel.
 */
.techsalud-precision-carousel.products li.product:nth-child(odd) {
	scroll-snap-align: start;
}

@media (min-width: 900px) {
	.techsalud-precision {
		grid-template-columns: minmax(320px, 1fr) minmax(0, 1.4fr);
		align-items: stretch;
	}

	.techsalud-precision-media {
		display: block;
		width: 100%;
		max-width: none;
		margin: 0;
		aspect-ratio: auto;
		height: 100%;
	}

	.techsalud-precision-content {
		justify-content: center;
		padding: 3.5rem 0 3.5rem 3rem;
	}

	.techsalud-precision-texto {
		padding-right: 3rem;
	}

	/*
	 * Una sola línea en desktop: hay ancho suficiente en la columna de
	 * texto (min-width:320px del grid + padding-right:3rem). En mobile
	 * NO se fuerza nowrap — la columna es angosta y el texto necesita
	 * poder envolver sin desbordar.
	 */
	.techsalud-precision-texto h2 {
		white-space: nowrap;
	}

	.techsalud-precision-carousel-foot {
		padding-right: 3rem;
	}

	.techsalud-precision-carousel.products li.product {
		width: 240px;
	}

	/*
	 * Desktop navega de a 1 card (no de a pares como mobile, ver JS): acá
	 * todas vuelven a ser puntos de snap válidos, no solo cada 2ª.
	 */
	.techsalud-precision-carousel.products li.product:nth-child(odd),
	.techsalud-precision-carousel.products li.product:nth-child(even) {
		scroll-snap-align: start;
	}

	/*
	 * Variante espejo (Desechables): mismo componente exacto
	 * (.techsalud-precision-*), solo se reordenan las 2 columnas del
	 * grid vía `order` — la media queda a la derecha, el
	 * carrusel/contenido a la izquierda. El DOM no cambia (media sigue
	 * primero en el markup, mobile se ve igual que la versión no
	 * reversa), evita duplicar toda la tarjeta/carrusel/nav para un
	 * layout que solo difiere en qué lado queda cada columna.
	 */
	.techsalud-precision--reversa {
		grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
	}

	.techsalud-precision--reversa .techsalud-precision-media {
		order: 2;
	}

	.techsalud-precision--reversa .techsalud-precision-content {
		order: 1;
		padding: 3.5rem 3rem 3.5rem 0;
	}

	.techsalud-precision--reversa .techsalud-precision-texto {
		padding-right: 0;
		padding-left: 3rem;
	}

	.techsalud-precision--reversa .techsalud-precision-carousel-foot {
		padding-right: 0;
		padding-left: 3rem;
	}

	/*
	 * --corte-izquierda (auto-aplicado junto con --reversa, ver
	 * techsalud_render_seccion_carrusel_producto): el corte/vista previa
	 * del carrusel debe quedar en el borde REAL de pantalla (izquierda,
	 * en esta variante), nunca contra la foto.
	 *
	 * scroll-snap-align:end (no start) en las cards de esta variante:
	 * bug real detectado en vivo (2026-08-02) — con align:start (el
	 * valor normal), CUALQUIER card puede quedar en reposo con su borde
	 * IZQUIERDO pegado al viewport, nunca al revés; el navegador
	 * corregía el scrollLeft fijado por JS hacia ese tipo de punto,
	 * dejando la última card cortada contra la foto en vez de completa
	 * (imposible de lograr con align:start, sin importar qué scrollLeft
	 * se asigne). Con align:end el snap ayuda en vez de estorbar: asienta
	 * el borde DERECHO de alguna card contra el borde derecho del
	 * viewport — que es justo contra la foto en este layout — dejando el
	 * corte del otro lado (izquierda, el borde real de pantalla) en
	 * cualquier estado de reposo, no solo en la carga inicial.
	 */
	.techsalud-precision--corte-izquierda .techsalud-precision-carousel.products li.product {
		scroll-snap-align: end;
	}

	/*
	 * --sin-corte: ninguna card se corta en ningún borde — se le da
	 * contención (padding) al lado que hoy no la tiene (el que en la
	 * variante normal queda pegado al borde real de pantalla).
	 */
	.techsalud-precision--sin-corte .techsalud-precision-carousel-wrap {
		padding-right: 3rem;
	}

	.techsalud-precision--reversa.techsalud-precision--sin-corte .techsalud-precision-carousel-wrap {
		padding-right: 0;
		padding-left: 3rem;
	}
}

/* -------------------- Recursos (papers / tutoriales) -------------------- */

.techsalud-recursos-bajada {
	max-width: 60ch;
	margin: 0 auto;
	color: var(--color-text-muted);
	text-align: center;
}

.techsalud-recursos-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-top: 2.5rem;
}

@media (min-width: 800px) {
	.techsalud-recursos-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.techsalud-recurso-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
	color: inherit;
	text-decoration: none;
	transition: transform 250ms ease-out, box-shadow 250ms ease-out;
}

.techsalud-recurso-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.techsalud-recurso-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.techsalud-recurso-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease-out;
}

.techsalud-recurso-card:hover .techsalud-recurso-media img {
	transform: scale(1.05);
}

/* Mismo patrón visual que .techsalud-badge (fondo/borde/texto azul de marca, Sección 7) — constancia entre componentes. */
.techsalud-recurso-badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-pill);
	background: var(--color-primary-light);
	color: var(--color-primary);
	font-size: 0.6875rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.techsalud-recurso-contenido {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.75rem;
}

.techsalud-recurso-icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 1rem;
	border-radius: var(--radius-md);
	background: var(--color-primary-light);
	color: var(--color-primary);
}

.techsalud-recurso-contenido h3 {
	margin: 0 0 0.5rem;
	font-size: var(--font-size-lg);
	color: var(--color-text);
}

.techsalud-recurso-contenido p {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	line-height: 1.5;
}

.techsalud-recurso-cta {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border);
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-sm);
}

.techsalud-recurso-cta .ts-icon {
	transition: transform 200ms ease-out;
}

.techsalud-recurso-card:hover .techsalud-recurso-cta .ts-icon {
	transform: translateX(3px);
}

/* -------------------- Productos destacados -------------------- */

.techsalud-featured-products {
	text-align: center;
}

.techsalud-featured-products p {
	color: var(--color-text-muted);
	margin-bottom: 1rem;
}

/* -------------------- FAQ -------------------- */

.techsalud-faqs {
	text-align: center;
}

.techsalud-faqs-layout {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.techsalud-faqs-media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.techsalud-faqs-media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Tamaño/peso/interlineado/tracking/color heredan de `.techsalud-section h2` — acá solo layout propio de esta sección. */
.techsalud-faqs-content h2 {
	text-align: left;
	max-width: none;
	margin-bottom: 1.5rem;
}

@media (min-width: 900px) {
	.techsalud-faqs-layout {
		flex-direction: row;
		align-items: flex-start;
		gap: 4rem;
	}

	.techsalud-faqs-media {
		flex: 0 0 42%;
	}

	.techsalud-faqs-content {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* Acordeón nativo (<details>/<summary>, sin JS) — el marcador por defecto
   del navegador se reemplaza por un ícono +/− propio que rota al abrir.
   Esto es un toggle de interacción, no una animación de entrada en
   scroll, por eso sí conserva su propia animación CSS (no compite con
   GSAP: home.js nunca selecciona estos elementos). */
.techsalud-faq-item {
	border-bottom: 1px solid var(--color-divider);
	padding: 1.1rem 0;
}

.techsalud-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	font-weight: var(--font-weight-semibold);
	color: var(--color-text);
	transition: color 160ms ease-out;
}

.techsalud-faq-item summary::-webkit-details-marker {
	display: none;
}

.techsalud-faq-item summary:hover {
	color: var(--color-primary);
}

.techsalud-faq-toggle {
	position: relative;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: var(--radius-pill);
	background: var(--color-primary-light);
}

.techsalud-faq-toggle::before,
.techsalud-faq-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--color-primary);
	transition: transform 200ms ease-out;
}

.techsalud-faq-toggle::before {
	width: 10px;
	height: 1.6px;
	transform: translate(-50%, -50%);
}

.techsalud-faq-toggle::after {
	width: 1.6px;
	height: 10px;
	transform: translate(-50%, -50%);
}

.techsalud-faq-item[open] .techsalud-faq-toggle::after {
	transform: translate(-50%, -50%) rotate(90deg) scale(0);
}

/*
 * text-align:left: bug real reportado por el cliente (2026-08-02) —
 * .techsalud-faqs (sección) trae text-align:center para el título, y
 * la respuesta nunca tenía su propio override (a diferencia de
 * .techsalud-faqs-content h2, que sí lo tiene), así que heredaba ese
 * centrado — párrafos largos centrados son difíciles de leer.
 */
.techsalud-faq-answer {
	padding-top: 0.75rem;
	color: var(--color-text-muted);
	text-align: left;
	animation: techsalud-fade-up 220ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
	.techsalud-faq-answer {
		animation: none;
	}
}

/* -------------------- Cierre / CTA final -------------------- */

/*
 * background:blanco (no --color-primary-soft): pedido explícito del
 * cliente (2026-08-02) — esta es la ÚLTIMA sección del Home antes del
 * footer, y la ola del footer (.techsalud-footer-waves) también es
 * blanca; con un tono celeste acá quedaba un salto de color justo en la
 * costura entre ambas.
 */
.techsalud-cierre {
	background: var(--color-surface);
	text-align: center;
}

.techsalud-cierre p {
	color: var(--color-text-muted);
	max-width: 620px;
	margin: 0 auto 1.5rem;
}

.techsalud-cierre .button-primary,
.techsalud-cierre .button-secondary {
	margin: 0 0.4rem;
}