/* ============================================================
   Página TALLERES (Trade, #68 /trade/ · #67 /es/talleres/): lo que las
   clases V4 art-tal-* no expresan (talleres-classes.php). Prototipo:
   assets/css/trade.css y componentes.css (.cabeza-pag, .diseno--placa).
   Lo carga functions.php en todas las páginas: cada regla va enganchada
   a una clase art-tal-* o a un atributo data-art-* de esta página.
   ============================================================ */

/* héroe: el velo sobre Berrendo (.cabeza-pag::after); ≤899 sube en el
   medio para que la ceja Sky y la entrada se lean sobre el relieve */
.elementor [data-art-velo="talleres"]::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%);
}
@media (max-width: 899px) {
	.elementor [data-art-velo="talleres"]::after {
		background: linear-gradient(0deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 55%, rgba(0, 0, 0, .3) 100%);
	}
}

/* el nombre del diseño del fondo es el enlace a su muestra (.taller-pie):
   banda táctil de 44 px sin agrandar la placa; al pasar, subrayado (el
   color y el subrayado, en la variante hover de art-tal-pie) */
.elementor [data-art-tal-pie]::after {
	content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
}
.elementor [data-art-tal-pie]:hover { text-underline-offset: 3px; }
/* sin la transición de .e-con de Elementor (el anillo negro del foco entraba en .3 s; el prototipo, al instante) */
.elementor [data-art-tal-pie] { transition: none; }
/* la raya delante del nombre (style.css, .art-heroe__pie::before desde 900) entra en la fila: un
   e-flexbox con enlace lleva la clase e-con, cuyo :before de Elementor es absoluto (velo de fondo) */
@media (min-width: 900px) {
	.elementor [data-art-tal-pie]::before { position: static; flex: none; }
}

/* placa sobre la foto (.diseno--placa .taller-placa): la acción subrayada
   con degradado (un borde de 1,5 px se pinta de 1 px en pantallas 1x) y,
   desde 900, la placa negra al pasar el ratón o con el foco */
.elementor .art-tal-placa__ir { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; }
.elementor .art-tal-placa__pie { transition: background-color .3s var(--art-curva); }
@media (min-width: 900px) {
	.elementor .art-tal-placa:is(:hover, :focus-visible) .art-tal-placa__pie { background-color: var(--negro, #000); }
}

/* el enlace dentro del texto de un compromiso («How we test»), como el
   .enlace del prototipo: subrayado de 1,5 px, flecha que avanza y el
   color del texto que lo rodea. Se edita dentro del párrafo. */
.elementor .art-tal-compromiso__txt a {
	display: inline-flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box;
	font: 700 16px/1.2 var(--art-fuente); text-decoration: none;
	border-bottom: 1.5px solid currentColor;
}
.elementor .art-tal-compromiso__txt a::after {
	content: ""; flex: none; width: 1.1em; height: 1.1em; 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 .art-tal-compromiso__txt a:hover::after { transform: translateX(4px); }

/* ≤520 los botones del héroe y el del cierre a lo ancho de su fila (.acciones .btn) */
@media (max-width: 520px) {
	.elementor .art-tal-acciones > .art-btn, .elementor .art-tal-cotizar__acciones > .art-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.elementor .art-tal-placa__pie, .elementor .art-tal-compromiso__txt a::after { transition: none; }
}