/**
 * Hello Elementor trae `color: #c36` para <a> en su propio reset
 * (wp-content/themes/hello-elementor/assets/css/reset.css) — sin esto,
 * todos los links del sitio se ven rosado/rojo por defecto del tema
 * padre. Se sobreescribe con el azul de marca real.
 */
a {
	color: var(--color-secondary);
}

a:hover {
	color: var(--color-secondary-hover);
}

/*
 * Mismo problema que el `<a>` de arriba, pero para botones: Hello
 * Elementor define color/border rosado (#c36) en `button`,
 * `[type="button"]` y `[type="submit"]` — en su estado base Y en
 * :hover/:focus (confirmado en vivo vía document.styleSheets, no
 * adivinado). Sin este reset a la misma altura de especificidad, CADA
 * botón/input nuevo del sitio (aunque no tenga ninguna clase nuestra,
 * como los botones nativos <button type="button"> de un carrusel)
 * hereda ese rosado en vez del azul de marca — de raíz acá, para no
 * tener que parchar color en cada componente nuevo uno por uno.
 */
button,
[type="button"],
[type="submit"] {
	color: var(--color-cta);
	border-color: var(--color-cta);
}

button:hover,
button:focus,
button:active,
[type="button"]:hover,
[type="button"]:focus,
[type="button"]:active,
[type="submit"]:hover,
[type="submit"]:focus,
[type="submit"]:active {
	color: var(--color-cta-hover);
	border-color: var(--color-cta-hover);
}

/*
 * Sticky footer sin tocar ningún otro template: <body> abre directo
 * (Hello Elementor no envuelve header+contenido+footer en un div común,
 * confirmado leyendo su header.php/footer.php reales), y el contenido
 * real varía por plantilla (a veces <main id="content">, a veces
 * <section> sueltas como en Home) — no hay un único elemento "contenido"
 * al que ponerle flex:1. `margin-top: auto` en el footer, dentro de un
 * body en flex-column, consume TODO el espacio sobrante por sí solo y
 * empuja el footer al fondo, sin importar cuántos hermanos tenga antes
 * ni qué plantilla los genere (pedido explícito del cliente, 2026-08-02:
 * "que siempre esté pegado de la parte de abajo... sin importar si hay
 * poco contenido").
 */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#site-footer.site-footer {
	flex-shrink: 0;
	margin-top: auto;
}

/*
 * Header: full-width, efecto glass (blanco con baja opacidad + blur),
 * sticky. Grid de 3 columnas (logo | menú | acciones) para que el menú
 * quede realmente centrado — carrito y buscador se agrupan en
 * .techsalud-header-actions (template-parts/header.php) para contar
 * como una sola columna, no dos ítems sueltos que romperían el centrado.
 * No existe equivalente Storefront de esto para portar — es CSS nuevo
 * apuntando al markup real de este tema.
 */
#site-header.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	box-shadow: var(--shadow-sm);
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	padding: 0.75rem 1.5rem;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	color: var(--color-primary);
}

.site-branding {
	grid-column: 1;
	justify-self: start;
	margin-left: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.site-branding .site-title,
.site-branding .site-title a {
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
}

.site-branding .site-description {
	margin: 0;
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);
}

.site-branding img {
	display: block;
	max-height: 34px;
	width: auto;
}

nav.site-navigation {
	grid-column: 2;
	justify-self: center;
}

nav.site-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
}

nav.site-navigation a {
	color: var(--color-primary);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-sm);
	text-decoration: none;
}

nav.site-navigation a:hover {
	color: var(--color-secondary);
}

.techsalud-header-actions {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.techsalud-cart-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--color-primary);
	text-decoration: none;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}

.techsalud-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	padding: 0 0.3em;
	border-radius: var(--radius-pill);
	background: var(--color-cta);
	color: #fff;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
}

/*
 * .techsalud-search-trigger trae color:#fff por defecto en
 * search-modal.css (pensado para un header navy) — se sobreescribe acá
 * porque este archivo carga después (ver enqueue en functions.php).
 */
.techsalud-search-trigger {
	color: var(--color-primary);
}

.techsalud-search-trigger:hover {
	background: var(--color-primary-light);
	color: var(--color-primary);
}

@media (max-width: 767px) {
	#site-header.site-header {
		grid-template-columns: 1fr auto;
	}

	nav.site-navigation {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: stretch;
	}

	nav.site-navigation ul {
		justify-content: flex-start;
		gap: 1rem;
	}

	.techsalud-header-actions {
		grid-column: 2;
		grid-row: 1;
	}
}

/* -------------------- Footer -------------------- */

/*
 * max-width:none + margin:0: Hello Elementor (tema padre) trae
 * `.site-footer:not(.dynamic-footer) { max-width:1140px; margin:auto }`
 * desde 1200px de ancho (theme.css) — sin este reset el footer quedaba
 * centrado con un ancho fijo de 1140px en vez de ocupar el 100% real de
 * la pantalla (bug real reportado por el cliente, 2026-08-02). Mismo
 * fix ya aplicado al header (#site-header.site-header, arriba).
 *
 * padding:0: el mismo tema padre trae `.site-footer{padding-block-start:
 * 1rem}` (header-footer.css) — esos 16px de padding quedaban ANTES de
 * .techsalud-footer-waves (primer hijo), mostrando una franja sólida del
 * fondo oscuro del footer sin la ola encima — bug real reportado por el
 * cliente ("línea azul entre el contenido y el footer").
 */
#site-footer.site-footer {
	position: relative;
	max-width: none;
	margin: 0;
	padding: 0;
	background: var(--color-primary);
	color: rgba(255, 255, 255, 0.75);
}

/*
 * Olas decorativas: mismo lenguaje visual que .techsalud-hero-wave
 * (Home), acá como 2 formas RELLENAS (no solo trazo) que hacen de
 * transición entre el fondo claro de cualquier página y el footer
 * oscuro — pedido explícito del cliente (2026-08-02, "basado en las
 * olas de la parte superior").
 *
 * Contenida DENTRO de la caja del footer (bug real reportado por el
 * cliente, 2026-08-02): la versión anterior usaba
 * transform:translateY(-100%) para sacarla arriba del footer, pero eso
 * la monta literalmente sobre lo que sea que venga antes en el flujo
 * normal — en Tienda, encima de la paginación. Acá el contenedor vive
 * EN el footer (nunca se superpone a nada externo), con su propio
 * fondo claro (--color-background, el fondo típico de cualquier
 * página) detrás de la parte de la ola que "flota" — así igual se ve
 * la transición claro→oscuro sin invadir el contenido anterior.
 *
 * inset con overshoot de 2px en el SVG (no 0): bug real visto en vivo
 * ("línea horrible de separación" entre la ola y el resto del footer)
 * — un <svg> a height:100% dentro de un contenedor de alto fijo puede
 * quedar una fracción de píxel corto por redondeo del navegador, dejando
 * asomar el fondo claro del contenedor justo en el borde inferior. El
 * SVG se dibuja 2px más grande que el contenedor en cada borde y
 * overflow:hidden recorta el sobrante — nunca puede quedar corto.
 *
 * Animación en CSS puro (no GSAP): el footer se carga en TODAS las
 * páginas, no solo Home (que ya paga el costo de GSAP para el hero) —
 * sumar esa dependencia sitewide por un detalle decorativo no es buena
 * práctica. Oscilación sutil (±2%, ease-in-out, alternate) imita el
 * mismo movimiento continuo lento del hero sin necesitar JS.
 */
/*
 * background:blanco (no --color-background): pedido explícito del
 * cliente (2026-08-02) — el fondo real de cualquier página (body) es
 * blanco puro, no el celeste de --color-background; con ese celeste acá
 * quedaba un salto de color entre el contenido real y la ola.
 */
.techsalud-footer-waves {
	position: relative;
	height: 90px;
	overflow: hidden;
	background: var(--color-surface);
	line-height: 0;
}

.techsalud-footer-waves svg {
	position: absolute;
	inset: -2px -15%;
	width: 130%;
	height: calc(100% + 4px);
	display: block;
}

.techsalud-footer-wave--back {
	fill: var(--color-primary);
	opacity: 0.5;
	animation: techsalud-footer-wave-drift 22s ease-in-out infinite alternate;
}

.techsalud-footer-wave--front {
	fill: var(--color-primary);
	animation: techsalud-footer-wave-drift 16s ease-in-out infinite alternate-reverse;
}

@keyframes techsalud-footer-wave-drift {
	from {
		transform: translateX(-2%);
	}

	to {
		transform: translateX(2%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.techsalud-footer-wave--back,
	.techsalud-footer-wave--front {
		animation: none;
	}
}

.techsalud-footer-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 2rem;
}

.techsalud-footer-top {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
	.techsalud-footer-top {
		grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
		gap: 2rem;
	}
}

.techsalud-footer-brand {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.techsalud-footer-logo {
	display: block;
	width: auto;
	max-width: 220px;
	height: auto;
}

.techsalud-footer-tagline {
	margin: 0;
	max-width: 32ch;
	font-size: var(--font-size-sm);
	color: rgba(255, 255, 255, 0.6);
}

.techsalud-footer-social {
	display: flex;
	gap: 0.6rem;
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.techsalud-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	transition: background 150ms ease-out, transform 150ms ease-out;
}

.techsalud-footer-social a:hover {
	background: var(--color-secondary);
	transform: translateY(-2px);
}

.techsalud-footer-col h2 {
	margin: 0 0 1rem;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
}

.techsalud-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.techsalud-footer-col a {
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--font-size-sm);
	text-decoration: none;
	transition: color 150ms ease-out;
}

.techsalud-footer-col a:hover {
	color: #fff;
}

.techsalud-footer-contacto li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: rgba(255, 255, 255, 0.75);
}

.techsalud-footer-contacto li .ts-icon {
	flex-shrink: 0;
	margin-top: 0.1rem;
	color: var(--color-secondary);
}

.techsalud-footer-bottom {
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	text-align: center;
}

.techsalud-footer-bottom p {
	margin: 0;
	font-size: var(--font-size-xs);
	color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 992px) {
	nav.site-navigation {
		margin-left: 1.5rem;
	}
}

/*
 * Bug real encontrado en producción: el grid de productos (ul.products,
 * display:grid, definido en woocommerce.css) armaba las columnas bien
 * (270px cada una, confirmado con getComputedStyle) pero cada
 * ul.products li.product se achicaba a 83px. Causa: WooCommerce core
 * (woocommerce-layout.css/woocommerce-smallscreen.css, del PLUGIN, no
 * del tema) trae reglas legacy de layout con float+width en porcentaje
 * (`.columns-3 li.product{width:30.75%}`, `[class*="columns-"] li.product
 * {width:48%}`) con MÁS especificidad que nuestra regla plana
 * `ul.products li.product` (3 clases vs 1) — ganan sin importar el orden
 * de carga. Storefront neutralizaba esto con su propio CSS de producto;
 * Hello Elementor no trae nada equivalente, así que hay que hacerlo acá.
 * Selector igualado a la especificidad real de WooCommerce (verificada
 * contra el CSS real del plugin, no adivinada) para ganar el empate sin
 * usar !important.
 */
.woocommerce ul.products.columns-3 li.product,
.woocommerce-page ul.products.columns-3 li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: 100%;
	float: none;
}