/* =========================================================
   COMPONENTE: barra de filtros del catálogo `.ti-filtros` — te-invito
   (SPEC 0021 §2.5/§2.6; diseño Fase 1 §2.1–§2.3)
   Lo comparten la vitrina (.ti-gal) y el constructor (#ti-constructor).
   Sin valores propios: consume SOLO los alias `--ti-flt-*`, que cada
   superficie mapea a sus tokens (galeria.css → .ti-gal; constructor/ui.css
   → :root). Mobile-first · BEM · UI de producto azul/blanco/negro.

   Cascada del sitio (verificada contra el reset.css INSTALADO de
   hello-elementor en dev, 2026-09-24):
     - `[type=button]:focus, [type=button]:hover, button:focus, button:hover
       { background-color:#c36; color:#fff }` ⇒ especificidad 0-2-0;
     - `[type=button],[type=submit],button { border:1px solid #c36; color:#c36;
       padding; font-size; white-space:nowrap; transition:all .3s }` ⇒ 0-1-0;
     - `input[type=search] {border;padding;width} / :focus {border-color}`
       ⇒ 0-1-1 / 0-2-1.
   Por eso TODO control de la barra se estiliza a ≥ 0-3-0 (tres clases, o
   dos clases + [type="button"]) y declara background, color, border,
   padding y transition explícitos: ninguna de esas reglas del tema gana en
   reposo, hover ni foco.
   Constructor: `#ti-constructor label, span, p { margin:0 }` (1-0-1) anula
   cualquier margin en esos elementos ⇒ el layout usa SOLO `gap`.
   ========================================================= */

.ti-filtros[hidden],
.ti-filtros [hidden] {
	display: none !important;
}

.ti-filtros {
	box-sizing: border-box;
	display: grid;
	gap: var(--ti-flt-s4);
	min-width: 0;
	padding: var(--ti-flt-s4);
	background: var(--ti-flt-sup);
	border: 1px solid var(--ti-flt-line);
	border-radius: var(--ti-flt-r);
	box-shadow: var(--ti-flt-sombra);
	font-family: var(--ti-flt-font);
	color: var(--ti-flt-ink);
	text-align: left;
}

.ti-filtros *,
.ti-filtros *::before,
.ti-filtros *::after {
	box-sizing: border-box;
}

/* ---- Cabeza: etiqueta del buscador + contador ---- */
.ti-filtros__cabeza {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ti-flt-s2);
	min-width: 0;
}

.ti-filtros__label {
	font-size: var(--ti-flt-fs-meta);
	font-weight: 700;
	line-height: 1.3;
	color: var(--ti-flt-azul-d);
}

.ti-filtros__conteo {
	font-size: var(--ti-flt-fs-chip);
	font-weight: 700;
	line-height: 1.3;
	color: var(--ti-flt-ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Foco PROGRAMÁTICO tras "Limpiar" (tabindex=-1): sin anillo; con teclado sí. */
.ti-filtros .ti-filtros__cabeza .ti-filtros__conteo:focus {
	outline: none;
}

.ti-filtros .ti-filtros__cabeza .ti-filtros__conteo:focus-visible {
	outline: 3px solid var(--ti-flt-foco);
	outline-offset: 2px;
}

/* ---- Buscador: 52px de alto, píldora, borde AZUL (1.4.11: 7.65:1 vs blanco) ---- */
.ti-filtros__campo {
	position: relative;
	display: flex;
	align-items: center;
	min-width: 0;
}

.ti-filtros .ti-filtros__campo .ti-filtros__input {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 0 48px 0 44px;
	font: 500 var(--ti-flt-fs-input)/1.3 var(--ti-flt-font);
	color: var(--ti-flt-ink);
	background: var(--ti-flt-sup);
	border: 1.5px solid var(--ti-flt-azul);
	border-radius: var(--ti-flt-r-chip);
	box-shadow: none;
	outline-offset: 2px;
	transition: none;
}

.ti-filtros .ti-filtros__campo .ti-filtros__input:focus {
	border-color: var(--ti-flt-azul);
}

.ti-filtros .ti-filtros__campo .ti-filtros__input:focus-visible {
	outline: 3px solid var(--ti-flt-foco);
	outline-offset: 2px;
}

.ti-filtros__input::placeholder {
	color: var(--ti-flt-ink-2);
	opacity: 1;
}

/* × nativo de type=search (~16px, no estilizable) fuera: hay uno de 44×44. */
.ti-filtros__input::-webkit-search-cancel-button,
.ti-filtros__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.ti-filtros__lupa {
	position: absolute;
	left: 14px;
	width: 18px;
	height: 18px;
	color: var(--ti-flt-ink-2);
	pointer-events: none;
}

.ti-filtros .ti-filtros__campo .ti-filtros__borrar {
	position: absolute;
	right: 4px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--ti-flt-ink-2);
	cursor: pointer;
	transition: none;
}

.ti-filtros .ti-filtros__campo .ti-filtros__borrar:focus-visible {
	outline: 3px solid var(--ti-flt-foco);
	outline-offset: -2px;
}

.ti-filtros__borrar svg {
	width: 18px;
	height: 18px;
}

/* Sin texto no hay nada que borrar. 0-5-0: gana al display:grid (0-3-0) de arriba. */
.ti-filtros .ti-filtros__campo .ti-filtros__input:placeholder-shown ~ .ti-filtros__borrar {
	display: none;
}

/* ---- Grupos de chips ---- */
.ti-filtros__grupos,
.ti-filtros__extra {
	display: grid;
	gap: var(--ti-flt-s3);
	min-width: 0;
}

.ti-filtros__grupo {
	display: grid;
	gap: var(--ti-flt-s2);
	min-width: 0;
}

.ti-filtros__grupo-tit {
	font-size: var(--ti-flt-fs-meta);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ti-flt-ink-2);
}

/* Móvil: fila con scroll horizontal PROPIO que sangra hasta el borde de la
   tarjeta (margin negativo = padding de .ti-filtros). 6px de padding vertical:
   caben el outline de 3px + offset 2px del foco sin recortarse. */
.ti-filtros__chips {
	display: flex;
	gap: var(--ti-flt-s2);
	min-width: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--ti-flt-s4);
	scrollbar-width: none;
	margin-inline: calc(var(--ti-flt-s4) * -1);
	padding: 6px var(--ti-flt-s4);
}

.ti-filtros__chips::-webkit-scrollbar {
	display: none;
}

/* ---- Chip (0-3-0 en todos sus estados) ---- */
.ti-filtros .ti-filtros__chips .ti-filtros__chip {
	flex: 0 0 auto;
	scroll-snap-align: start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	min-width: 44px;
	margin: 0;
	padding: 0 16px 0 12px;
	font: 600 var(--ti-flt-fs-chip)/1.2 var(--ti-flt-font);
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
	cursor: pointer;
	color: var(--ti-flt-azul-d);
	background: var(--ti-flt-sup);
	border: 1.5px solid var(--ti-flt-line);
	border-radius: var(--ti-flt-r-chip);
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 150ms var(--ti-flt-ease), border-color 150ms var(--ti-flt-ease),
		color 150ms var(--ti-flt-ease), transform 120ms var(--ti-flt-ease);
}

/* Foco del reset del tema (`button:focus` 0-1-1 / `[type=button]:focus` 0-2-0)
   neutralizado: el chip enfocado conserva su color de reposo. */
.ti-filtros .ti-filtros__chips .ti-filtros__chip:focus {
	color: var(--ti-flt-azul-d);
	background: var(--ti-flt-sup);
}

.ti-filtros__ico {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--ti-flt-azul);
}

.ti-filtros__ico-si {
	display: none;
}

.ti-filtros .ti-filtros__chips .ti-filtros__chip[aria-pressed="true"],
.ti-filtros .ti-filtros__chips .ti-filtros__chip[aria-pressed="true"]:focus {
	color: var(--ti-flt-en-azul);
	background: var(--ti-flt-azul);
	border-color: var(--ti-flt-azul);
}

.ti-filtros__chip[aria-pressed="true"] .ti-filtros__ico {
	color: var(--ti-flt-en-azul);
}

.ti-filtros__chip[aria-pressed="true"] .ti-filtros__ico-mas {
	display: none;
}

.ti-filtros__chip[aria-pressed="true"] .ti-filtros__ico-si {
	display: inline;
}

/* Hover solo con puntero real: en iOS el chip tocado no queda "resaltado". */
@media (hover: hover) {
	.ti-filtros .ti-filtros__chips .ti-filtros__chip:hover:not([aria-pressed="true"]) {
		color: var(--ti-flt-azul-d);
		background: var(--ti-flt-sel);
		border-color: var(--ti-flt-azul);
	}

	.ti-filtros .ti-filtros__chips .ti-filtros__chip[aria-pressed="true"]:hover {
		color: var(--ti-flt-en-azul);
		background: var(--ti-flt-azul-d);
		border-color: var(--ti-flt-azul-d);
	}
}

.ti-filtros .ti-filtros__chips .ti-filtros__chip:active {
	transform: scale(.97);
}

.ti-filtros .ti-filtros__chips .ti-filtros__chip:focus-visible {
	outline: 3px solid var(--ti-flt-foco);
	outline-offset: 2px;
}

/* ---- "Más filtros" (disclosure; distinto de un chip: fondo tinte + chevron) ----
   `[type="button"]` sube la especificidad a 0-3-0 (el markup lo trae siempre). */
.ti-filtros .ti-filtros__mas[type="button"] {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: var(--ti-flt-s2);
	min-height: 44px;
	margin: 0;
	padding: 0 14px 0 16px;
	font: 700 var(--ti-flt-fs-chip)/1.2 var(--ti-flt-font);
	text-transform: none;
	letter-spacing: 0;
	color: var(--ti-flt-azul-d);
	background: var(--ti-flt-tint);
	border: 1.5px solid transparent;
	border-radius: var(--ti-flt-r-chip);
	box-shadow: none;
	cursor: pointer;
	transition: border-color 150ms var(--ti-flt-ease);
}

.ti-filtros .ti-filtros__mas[type="button"]:focus {
	color: var(--ti-flt-azul-d);
	background: var(--ti-flt-tint);
}

.ti-filtros .ti-filtros__mas[type="button"]:focus-visible {
	outline: 3px solid var(--ti-flt-foco);
	outline-offset: 2px;
}

@media (hover: hover) {
	.ti-filtros .ti-filtros__mas[type="button"]:hover {
		color: var(--ti-flt-azul-d);
		background: var(--ti-flt-tint);
		border-color: var(--ti-flt-azul);
	}
}

.ti-filtros__chevron {
	width: 16px;
	height: 16px;
	transition: transform 180ms var(--ti-flt-ease);
}

.ti-filtros__mas[aria-expanded="true"] .ti-filtros__chevron {
	transform: rotate(180deg);
}

.ti-filtros__mas-n {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--ti-flt-azul);
	color: var(--ti-flt-en-azul);
	font-size: var(--ti-flt-fs-insignia);
	font-weight: 800;
	line-height: 1;
}

.ti-filtros__extra:not([hidden]) {
	animation: ti-flt-aparece 160ms var(--ti-flt-ease) backwards;
}

/* ---- Pie: "Limpiar filtros" (secundario, contorno) ---- */
.ti-filtros__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ti-flt-s2);
	min-width: 0;
}

.ti-filtros .ti-filtros__pie .ti-filtros__limpiar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: 0;
	padding: 0 16px;
	font: 700 var(--ti-flt-fs-chip)/1.2 var(--ti-flt-font);
	text-transform: none;
	color: var(--ti-flt-azul);
	background: var(--ti-flt-sup);
	border: 1.5px solid var(--ti-flt-line);
	border-radius: var(--ti-flt-r-chip);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 150ms var(--ti-flt-ease), border-color 150ms var(--ti-flt-ease);
}

.ti-filtros .ti-filtros__pie .ti-filtros__limpiar:focus {
	color: var(--ti-flt-azul);
	background: var(--ti-flt-sup);
}

@media (hover: hover) {
	.ti-filtros .ti-filtros__pie .ti-filtros__limpiar:hover {
		color: var(--ti-flt-azul-d);
		background: var(--ti-flt-sel);
		border-color: var(--ti-flt-azul);
	}
}

.ti-filtros .ti-filtros__pie .ti-filtros__limpiar:focus-visible {
	outline: 3px solid var(--ti-flt-foco);
	outline-offset: 2px;
}

.ti-filtros__limpiar svg,
.ti-filtros__vacio-btn svg {
	width: 16px;
	height: 16px;
}

/* Con el estado vacío visible, su botón es la única acción "Limpiar" (sin
   :has() se ven los dos: inocuo). */
.ti-filtros:has(.ti-filtros__vacio:not([hidden])) .ti-filtros__pie {
	display: none;
}

/* Aviso del constructor (propuesta B): "Tu diseño elegido (…) no aparece…".
   Vive en el pie, junto a "Limpiar": se envuelve a su propia línea si no cabe.
   Enmienda U-M4: fila flex con el texto + el botón "Ver mi diseño", que se
   envuelve a su propia línea SIN romper la línea del pie (el aviso entero ya
   tenía flex-basis 16rem: eso no cambia). */
.ti-filtros__aviso {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ti-flt-s2);
	flex: 1 1 16rem;
	font-size: var(--ti-flt-fs-meta);
	font-weight: 600;
	line-height: 1.4;
	color: var(--ti-flt-azul-d);
	background: var(--ti-flt-sel);
	border-radius: var(--ti-flt-r);
	padding: var(--ti-flt-s2) var(--ti-flt-s3);
}

.ti-filtros__aviso-txt {
	flex: 1 1 auto;
	min-width: 0;
}

.ti-filtros .ti-filtros__aviso .ti-filtros__aviso-ver[type="button"] {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 14px;
	margin: 0;
	font: 700 var(--ti-flt-fs-meta)/1.2 var(--ti-flt-font);
	color: var(--ti-flt-azul);
	background: var(--ti-flt-sup);
	border: 1.5px solid var(--ti-flt-azul);
	border-radius: var(--ti-flt-r-chip);
	cursor: pointer;
}

@media (hover: hover) {
	.ti-filtros .ti-filtros__aviso .ti-filtros__aviso-ver[type="button"]:hover {
		background: var(--ti-flt-sel);
	}
}

.ti-filtros .ti-filtros__aviso .ti-filtros__aviso-ver[type="button"]:focus-visible {
	outline: 3px solid var(--ti-flt-foco);
	outline-offset: 2px;
}

/* ---- Estado vacío (acción primaria) ---- */
.ti-filtros__vacio {
	display: grid;
	justify-items: center;
	gap: var(--ti-flt-s2);
	text-align: center;
	padding: var(--ti-flt-s5) var(--ti-flt-s4) var(--ti-flt-s4);
	border-top: 1px dashed var(--ti-flt-line);
}

.ti-filtros__vacio-ico {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--ti-flt-tint);
	color: var(--ti-flt-azul);
}

.ti-filtros__vacio-ico svg {
	width: 22px;
	height: 22px;
}

.ti-filtros__vacio-tit {
	font-size: var(--ti-flt-fs-tit);
	font-weight: 800;
	line-height: 1.25;
	color: var(--ti-flt-azul-d);
}

.ti-filtros__vacio-txt {
	font-size: var(--ti-flt-fs-chip);
	line-height: 1.4;
	color: var(--ti-flt-ink-2);
	max-width: 36ch;
}

.ti-filtros .ti-filtros__vacio .ti-filtros__vacio-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: 0;
	padding: 0 22px;
	font: 800 var(--ti-flt-fs-chip)/1.2 var(--ti-flt-font);
	text-transform: none;
	color: var(--ti-flt-en-azul);
	background: var(--ti-flt-azul);
	border: 1.5px solid var(--ti-flt-azul);
	border-radius: var(--ti-flt-r-chip);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 150ms var(--ti-flt-ease), border-color 150ms var(--ti-flt-ease);
}

.ti-filtros .ti-filtros__vacio .ti-filtros__vacio-btn:focus {
	color: var(--ti-flt-en-azul);
	background: var(--ti-flt-azul);
}

@media (hover: hover) {
	.ti-filtros .ti-filtros__vacio .ti-filtros__vacio-btn:hover {
		color: var(--ti-flt-en-azul);
		background: var(--ti-flt-azul-d);
		border-color: var(--ti-flt-azul-d);
	}
}

.ti-filtros .ti-filtros__vacio .ti-filtros__vacio-btn:focus-visible {
	outline: 3px solid var(--ti-flt-foco);
	outline-offset: 2px;
}

/* ---- CTA de WhatsApp del vacío (U-H3): SECUNDARIO respecto al botón de
   arriba (contorno verde WhatsApp, no relleno) — "Limpiar filtros" sigue
   siendo la acción primaria. */
.ti-filtros .ti-filtros__vacio .ti-filtros__vacio-wa {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 16px;
	margin-top: 2px;
	font: 700 var(--ti-flt-fs-meta)/1.2 var(--ti-flt-font); /* .82rem: un paso bajo el botón primario (.95rem) */
	text-decoration: none;
	color: var(--ti-flt-wa);
	background: transparent;
	border: 1.5px solid var(--ti-flt-wa);
	border-radius: var(--ti-flt-r-chip);
}

.ti-filtros__vacio-wa-ico {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

@media (hover: hover) {
	.ti-filtros .ti-filtros__vacio .ti-filtros__vacio-wa:hover {
		background: var(--ti-flt-wa-tint);
		border-color: var(--ti-flt-wa-d);
		color: var(--ti-flt-wa-d);
	}
}

.ti-filtros .ti-filtros__vacio .ti-filtros__vacio-wa:focus-visible {
	outline: 3px solid var(--ti-flt-foco);
	outline-offset: 2px;
}

/* ---- Solo para lector de pantalla (región aria-live, "activos") ---- */
.ti-filtros__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ≥600: los chips se envuelven (sin scroll propio ni sangrado). */
@media (min-width: 600px) {
	.ti-filtros__chips {
		flex-wrap: wrap;
		overflow: visible;
		margin-inline: 0;
		padding: 2px 0;
	}
}

/* ---- U-H2: pista de que la fila de chips se puede desplazar (< 600px) ----
   `filtro.js` mide `scrollLeft + clientWidth < scrollWidth - 1` en cada
   operación/scroll/resize y alterna el atributo `data-ti-desliza` en el
   propio `.ti-filtros__chips` — la máscara desvanece el borde derecho
   mientras quede contenido a la derecha, y desaparece al llegar al final
   (mask-image vuelve a `none`, regla de §2.5). El chip parcial que asoma es
   una propiedad emergente del layout (padding 16px < ancho de cualquier
   chip, min. 44px): no necesita CSS aparte. */
@media (max-width: 599.98px) {
	.ti-gal .ti-filtros__chips[data-ti-desliza],
	#ti-constructor .ti-filtros__chips[data-ti-desliza] {
		-webkit-mask-image: linear-gradient(to right, var(--ti-flt-mascara) calc(100% - var(--ti-flt-desliza-w)), transparent 100%);
		mask-image: linear-gradient(to right, var(--ti-flt-mascara) calc(100% - var(--ti-flt-desliza-w)), transparent 100%);
	}
}

/* ≥900: título de grupo en columna de --ti-flt-col-tit (128px) a la izquierda;
   buscador y contador acotados a 560px. */
@media (min-width: 900px) {
	.ti-filtros {
		padding: var(--ti-flt-s5);
	}

	/* U-M2: SOLO el buscador se acota a 560px. `.ti-filtros__cabeza` (label +
	   contador) NO comparte el tope: con su `display:flex;
	   justify-content:space-between` ya existente, el contador cae solo en
	   el borde derecho REAL de `.ti-filtros` en vez de a mitad de la barra
	   (medido en `barra-1280.png`, la enmienda U-M2). */
	.ti-filtros__campo {
		max-width: 560px;
	}

	.ti-filtros__grupo {
		grid-template-columns: var(--ti-flt-col-tit) minmax(0, 1fr);
		column-gap: var(--ti-flt-s4);
		align-items: start;
	}

	/* 14px = (44px de alto del chip − ~16px de línea del título) / 2. */
	.ti-filtros__grupo-tit {
		padding-top: 14px;
	}

	.ti-filtros .ti-filtros__mas[type="button"],
	.ti-filtros__pie {
		margin-left: calc(var(--ti-flt-col-tit) + var(--ti-flt-s4));
	}
}

/* ---- U-H4: "Ver N diseños" — solo vitrina, solo < 900px (§2.5).
   FIX ronda 2 (hallazgo crítico de QA post-v0.55.0, no promovido a prod):
   era `position: sticky` dentro de `.ti-filtros`. Un elemento sticky solo
   puede "viajar" hasta donde se lo permite el ALTO de su propio contenedor
   (no puede clavarse más allá del borde inferior de `.ti-filtros`); con la
   barra de filtros apenas más alta que el viewport, ese recorrido es casi
   nulo, así que el botón nunca llegaba a fijarse en `bottom:
   var(--ti-flt-safe-wa)` MIENTRAS la barra seguía visible — quedaba, de
   hecho, en la posición de flujo normal (última fila de la rejilla), que en
   un rango real de scroll cae encima del widget flotante de WhatsApp del
   sitio (medido: solape de ~47×50px). Con `position: fixed` el botón deja de
   depender del alto de `.ti-filtros`: su `bottom` es SIEMPRE relativo al
   viewport, así que cuando está visible (los 5 estados de la invariante de
   más abajo) queda SIEMPRE por encima de `--ti-flt-safe-wa`, sin importar en
   qué punto del documento esté `.ti-filtros`. `left`/`right` reproducen el
   ancho que tenía como hijo de `.ti-filtros` (`--ti-flt-gutter`, el padding
   de `.ti-gal`, + `--ti-flt-s4`, el propio padding de `.ti-filtros`) sin
   heredar un token `--ti-gal-*` directo (alias-only, cabecera del archivo).
   `.ti-gal` trae `overflow-x: clip` (guard de full-bleed, SPEC 0009 §8.5);
   ninguna regla de la cascada le pone además `transform`/`filter`/
   `perspective` a `.ti-gal` ni a `.ti-filtros`, así que ninguno de los dos
   se vuelve containing block de un `position: fixed` (solo lo haría con
   alguna de esas tres propiedades). Sin eso, el containing block del botón
   sigue siendo el viewport y su pintado NO se recorta al `overflow-x: clip`
   del ancestro: comprobado con un caso mínimo por CDP (ancestro
   `overflow-x: clip` de 100px de alto, scrolleado 1400px fuera de su propio
   rango, con un hijo `position: fixed` — `elementFromPoint` sobre su rect
   sigue devolviendo el hijo, no el fondo). */
@media (max-width: 899.98px) {
	.ti-filtros .ti-filtros__ver:not([hidden]) {
		position: fixed;
		left: calc(var(--ti-flt-gutter, 0px) + var(--ti-flt-s4));
		right: calc(var(--ti-flt-gutter, 0px) + var(--ti-flt-s4));
		bottom: calc(var(--ti-flt-safe-wa) + env(safe-area-inset-bottom, 0px));
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 52px;
		padding: 0 20px;
		font: 800 var(--ti-flt-fs-tit)/1.2 var(--ti-flt-font);
		color: var(--ti-flt-en-azul);
		background: var(--ti-flt-azul);
		border: 1.5px solid var(--ti-flt-azul-d);
		border-radius: var(--ti-flt-r-chip);
		box-shadow: 0 10px 24px rgba(11, 27, 58, .28);
		cursor: pointer;
	}

	.ti-filtros .ti-filtros__ver:focus-visible {
		outline: 3px solid var(--ti-flt-foco);
		outline-offset: 2px;
	}

	@media (hover: hover) {
		.ti-filtros .ti-filtros__ver:hover {
			background: var(--ti-flt-azul-d);
		}
	}

	.ti-filtros .ti-filtros__ver:active {
		transform: scale(.98);
	}

	.ti-filtros__ver-ico {
		width: 16px;
		height: 16px;
		animation: ti-flt-rebota 1.6s ease-in-out infinite;
	}
}

@keyframes ti-flt-rebota {
	0%, 100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(3px);
	}
}

@keyframes ti-flt-aparece {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ti-filtros *,
	.ti-filtros *::before,
	.ti-filtros *::after {
		animation: none !important;
		transition: none !important;
	}
}