/* ============================================================
   Colecciones (colecciones-build.php; prototipo collections.css y
   componentes.css). El diseño vive en las clases V4 art-col-* y en las
   compartidas; aquí solo lo que V4 no expresa: el velo de la foto, rayas y
   franjas de toque con pseudo-elementos, subrayados animados, la flecha en
   línea de los datos, los botones del filtro (widget de Pro), la disposición
   de la rejilla según cuántos diseños quedan (el Loop Grid de Pro la vuelve
   a pintar al filtrar: por eso cuenta tarjetas, como el prototipo) y las
   transiciones. Este archivo se carga en todas las páginas: cada regla va
   acotada a una clase art-col-* o a un atributo data-art-col-*.
   ============================================================ */

/* ---------- 1. cabecera: el velo sobre la foto (base en style.css: [data-art-velo]::after) ---------- */
.elementor [data-art-velo="col"]::after {
	background: linear-gradient(0deg, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .2) 60%, rgba(0, 0, 0, .1) 100%),
	            linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 65%);
}
/* índice de las líneas: la raya que crece al pasar el ratón */
.elementor .art-col-indice__ir {
	background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1.5px no-repeat;
	transition: color .25s var(--art-curva), background-size .3s var(--art-curva);
}
.elementor .art-col-indice__ir:hover { background-size: 100% 1.5px; }
/* el nombre de la foto, que pide su muestra: la raya delante (≥900), 44 px de toque sin moverlo y
   la flecha que avanza */
.elementor [data-art-col-pie] { transition: color .25s var(--art-curva), background-color .25s var(--art-curva); }
.elementor [data-art-col-pie]::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.elementor [data-art-col-pie] .art-col-cabeza__ico { transition: transform .3s var(--art-curva); }
.elementor [data-art-col-pie]:hover .art-col-cabeza__ico { transform: translateX(3px); }
@media (min-width: 900px) {
	/* position: el ::before de todo contenedor de Elementor (.e-con) es la capa del fondo, absoluta */
	.elementor [data-art-col-pie]::before { content: ""; position: static; flex: none; width: 40px; height: 1px; background: currentColor; }
}

/* ---------- 2. biblioteca: los botones del filtro (widget Filtro por taxonomía de Pro) ---------- */
.elementor .art-col-tonos { width: 100%; }
.elementor .art-col-tonos .e-filter { gap: 8px; flex-wrap: nowrap; justify-content: flex-start; align-items: center; }
.elementor .art-col-tonos .e-filter .e-filter-item {
	display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 10px;
	box-sizing: border-box; min-height: 44px; max-width: none; padding: 0 16px; overflow: visible;
	background: var(--blanco, #fff); color: var(--negro, #000);
	border: 1px solid var(--n14, rgba(0, 0, 0, .14)); border-radius: 0;
	font: 400 16px/1 var(--art-fuente); letter-spacing: normal; white-space: nowrap; cursor: pointer;
	transition: background-color .25s var(--art-curva), color .25s var(--art-curva), border-color .25s var(--art-curva);
}
.elementor .art-col-tonos .e-filter .e-filter-item:hover { background: var(--blanco, #fff); color: var(--negro, #000); border-color: var(--negro, #000); }
.elementor .art-col-tonos .e-filter .e-filter-item[aria-pressed="true"] { background: var(--negro, #000); color: var(--blanco, #fff); border-color: var(--negro, #000); }
/* la muestra de cada tono es la foto de un diseño real de ese tono (inc/pagina-colecciones.php) */
.elementor .art-col-tonos .art-col-tono__muestra {
	flex: none; width: 18px; height: 18px;
	background-color: var(--n06, rgba(0, 0, 0, .06)); background-position: center; background-size: cover; background-repeat: no-repeat;
	box-shadow: inset 0 0 0 1px var(--n14, rgba(0, 0, 0, .14));
}
.elementor .art-col-tonos .e-filter-item[aria-pressed="true"] .art-col-tono__muestra { box-shadow: inset 0 0 0 1px var(--b22, rgba(255, 255, 255, .22)); }
/* ≤899: una fila que se desliza con el dedo, de borde a borde (la caja ya sale del margen: clase
   art-col-filtro__lista) */
@media (max-width: 899px) {
	.elementor .art-col-tonos .e-filter {
		overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
		padding-inline: clamp(20px, 4vw, 56px); scroll-padding-inline: clamp(20px, 4vw, 56px);
	}
	.elementor .art-col-tonos .e-filter::-webkit-scrollbar { display: none; }
	.elementor .art-col-tonos .e-filter .e-filter-item { scroll-snap-align: start; padding: 0 14px; }
}

/* ---------- 2. biblioteca: la rejilla (widget Loop Grid de Pro; la tarjeta es la plantilla
   «Tarjeta de diseño») ---------- */
.elementor .art-col-rejilla .elementor-loop-container > .e-loop-item { display: flex; min-width: 0; }
/* Pro corta las palabras de las tarjetas (.e-loop-item * {word-break: break-word}): el nombre de un
   diseño no se parte, como en el prototipo */
.elementor .art-col-rejilla .e-loop-item * { word-break: normal; }
/* Pro pone un pulso mientras filtra: fuera (las tarjetas viejas se quedan quietas hasta las nuevas) */
.elementor .art-col-rejilla.e-loading-overlay { animation: none; }
/* según cuántos diseños quedan tras el filtro, el primero crece para que ninguna fila quede coja
   (nunca 4 + 1). Se cuentan solo las tarjetas: Pro mete un <style> entre ellas */
@media (min-width: 900px) {
	/* 5, 9, 13…: el primero ocupa dos por dos */
	.elementor .art-col-rejilla .elementor-loop-container:has(> .e-loop-item:nth-last-child(1 of .e-loop-item):nth-child(4n+5 of .e-loop-item)) > .e-loop-item:nth-child(1 of .e-loop-item) { grid-column: span 2; grid-row: span 2; }
	.elementor .art-col-rejilla .elementor-loop-container:has(> .e-loop-item:nth-last-child(1 of .e-loop-item):nth-child(4n+5 of .e-loop-item)) > .e-loop-item:nth-child(1 of .e-loop-item) .art-diseno__foto { aspect-ratio: auto; flex: 1 1 0; min-height: 0; }
	.elementor .art-col-rejilla .elementor-loop-container:has(> .e-loop-item:nth-last-child(1 of .e-loop-item):nth-child(4n+5 of .e-loop-item)) > .e-loop-item:nth-child(1 of .e-loop-item) .art-diseno__nombre { font-size: 30px; }
	/* 2, 6, 10…: los dos primeros, a media fila y apaisados */
	.elementor .art-col-rejilla .elementor-loop-container:has(> .e-loop-item:nth-last-child(1 of .e-loop-item):nth-child(4n+2 of .e-loop-item)) > .e-loop-item:nth-child(-n+2 of .e-loop-item) { grid-column: span 2; }
	.elementor .art-col-rejilla .elementor-loop-container:has(> .e-loop-item:nth-last-child(1 of .e-loop-item):nth-child(4n+2 of .e-loop-item)) > .e-loop-item:nth-child(-n+2 of .e-loop-item) .art-diseno__foto { aspect-ratio: 3 / 2; }
	.elementor .art-col-rejilla .elementor-loop-container:has(> .e-loop-item:nth-last-child(1 of .e-loop-item):nth-child(4n+2 of .e-loop-item)) > .e-loop-item:nth-child(-n+2 of .e-loop-item) .art-diseno__nombre { font-size: 30px; }
	/* 3, 7, 11…: el primero, a media fila, con la altura de sus vecinos */
	.elementor .art-col-rejilla .elementor-loop-container:has(> .e-loop-item:nth-last-child(1 of .e-loop-item):nth-child(4n+3 of .e-loop-item)) > .e-loop-item:nth-child(1 of .e-loop-item) { grid-column: span 2; }
	.elementor .art-col-rejilla .elementor-loop-container:has(> .e-loop-item:nth-last-child(1 of .e-loop-item):nth-child(4n+3 of .e-loop-item)) > .e-loop-item:nth-child(1 of .e-loop-item) .art-diseno__foto { aspect-ratio: auto; flex: 1 1 0; min-height: 0; }
	/* uno solo: a lo ancho */
	.elementor .art-col-rejilla .elementor-loop-container > .e-loop-item:nth-child(1 of .e-loop-item):nth-last-child(1 of .e-loop-item) { grid-column: 1 / -1; }
	.elementor .art-col-rejilla .elementor-loop-container > .e-loop-item:nth-child(1 of .e-loop-item):nth-last-child(1 of .e-loop-item) .art-diseno__foto { aspect-ratio: 21 / 9; }
	.elementor .art-col-rejilla .elementor-loop-container > .e-loop-item:nth-child(1 of .e-loop-item):nth-last-child(1 of .e-loop-item) .art-diseno__nombre { font-size: 30px; }
}
@media (max-width: 899px) {
	/* impares: el primero a todo el ancho, para que la última fila no quede coja */
	.elementor .art-col-rejilla .elementor-loop-container:has(> .e-loop-item:nth-last-child(1 of .e-loop-item):nth-child(odd of .e-loop-item)) > .e-loop-item:nth-child(1 of .e-loop-item) { grid-column: 1 / -1; }
	.elementor .art-col-rejilla .elementor-loop-container:has(> .e-loop-item:nth-last-child(1 of .e-loop-item):nth-child(odd of .e-loop-item)) > .e-loop-item:nth-child(1 of .e-loop-item) .art-diseno__foto { aspect-ratio: 4 / 3; }
}
/* sin resultados (la regla FAR sin ningún aprobado, por ejemplo) */
.elementor .art-col-rejilla .e-loop-nothing-found-message { font: 400 18px/1.55 var(--art-fuente); color: var(--n62, rgba(0, 0, 0, .62)); }

/* ---------- 3. datos de cada línea: el enlace en línea (stock, documentos), subrayado, con la
   flecha pegada a la última palabra y 44 px de toque ---------- */
.elementor [data-art-col-ir] { position: relative; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.elementor [data-art-col-ir]::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.elementor [data-art-col-ir] span { white-space: nowrap; }
.elementor [data-art-col-ir] span::after {
	content: ""; display: inline-block; width: 1.1em; height: 1.1em; margin-left: 8px; vertical-align: -.2em;
	background: currentColor;
	-webkit-mask: url("../img/flecha.svg") center / contain no-repeat;
	mask: url("../img/flecha.svg") center / contain no-repeat;
	transition: transform .3s var(--art-curva);
}
.elementor [data-art-col-ir]:hover span::after { transform: translateX(4px); }

/* ---------- 4. el tapete en placa: la placa se oscurece al pasar el ratón (≥900) ---------- */
.elementor [data-art-col-placa] .art-col-tapete__pie { transition: background-color .3s var(--art-curva); }
@media (min-width: 900px) {
	.elementor [data-art-col-placa]:is(:hover, :focus-visible) .art-col-tapete__pie { background-color: var(--negro, #000); }
}

/* lo que se anuncia al filtrar (solo para lectores de pantalla) */
.art-col-estado { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
	.elementor .art-col-indice__ir, .elementor [data-art-col-pie], .elementor [data-art-col-pie] .art-col-cabeza__ico,
	.elementor .art-col-tonos .e-filter .e-filter-item, .elementor [data-art-col-ir] span::after, .elementor [data-art-col-placa] .art-col-tapete__pie { transition: none; }
	.elementor [data-art-col-pie]:hover .art-col-cabeza__ico, .elementor [data-art-col-ir]:hover span::after { transform: none; }
}