/* ============================================================
   Página NOSOTROS (About, #72 /about/ · #71 /es/nosotros/): lo que las
   clases V4 art-abt-* no expresan (nosotros-classes.php). Prototipo:
   assets/css/about.css y componentes.css (.cabeza-pag, .diseno--placa).
   about.css es «móvil primero» con cortes en 640 y 900; las clases van
   escritorio primero con los cortes del kit (1099, 899, 599): el tramo
   600–639 y el corte de 520 se completan aquí.
   Lo carga functions.php en todas las páginas: cada regla va enganchada
   a una clase art-abt-* o a un atributo data-art-* de esta página.
   ============================================================ */

/* héroe: el velo sobre Flam 0041 (.cabeza-pag::after) */
.elementor [data-art-velo="nosotros"]::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%);
}

/* «Visit Rugs n Home»: el icono de enlace externo detrás del texto; avanza al pasar, como .enlace .ico */
.elementor [data-art-abt-externo]::after {
	content: ""; flex: none; width: 1.1em; height: 1.1em; background: currentColor;
	-webkit-mask: url("../img/externo.svg") center / contain no-repeat;
	mask: url("../img/externo.svg") center / contain no-repeat;
	transition: transform .3s var(--art-curva);
}
.elementor a[data-art-abt-externo]:hover::after { transform: translateX(4px); }

/* la firma, en una sola línea; la norma de la frase, en Sky y sin cortar */
.elementor .art-abt-firma__nombre { white-space: nowrap; }
.elementor .art-abt-prueba__frase span { color: var(--sky, #A7CFEA); white-space: nowrap; }

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

/* la ruta: el cuadro de cada parada sobre la raya (::before). En fila,
   arriba a la izquierda; ≤639, en columna sobre la línea vertical */
.elementor .art-abt-ruta__paso::before {
	content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; background: var(--negro, #000);
}
@media (max-width: 639px) {
	.elementor .art-abt-ruta__paso::before { left: -5px; top: 9px; }
	.elementor .art-abt-ruta__paso:last-child { padding-bottom: 0; }
}

/* 600–639: el prototipo sigue en móvil (corta en 640) y el kit ya no (599) */
@media (min-width: 600px) and (max-width: 639px) {
	.elementor .art-abt-diptico { grid-template-columns: 1fr; gap: 32px; }
	.elementor .art-abt-ruta__pasos {
		grid-template-columns: 1fr; gap: 0; width: auto; margin-left: 4px;
		border-left: 1px solid var(--negro, #000);
	}
	.elementor .art-abt-ruta__paso { padding: 0 0 26px 26px; border-top-width: 0; }
}

/* ≤520 el botón de la prueba a lo ancho y el enlace debajo (.acciones .btn) */
@media (max-width: 520px) {
	.elementor .art-abt-prueba__acciones > .art-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.elementor .art-abt-placa__pie, .elementor [data-art-abt-externo]::after { transition: none; }
}