/* ============================================================
   Página SECTORES (sectores-build.php) y la cabecera de página interior que
   comparte con CERTIFICACIÓN (clases art-sec-pag*). Prototipo: sectors.css y
   .cabeza-pag de componentes.css.

   El diseño (tamaños, colores, rejillas, espacios) vive en las clases V4
   art-sec-* (sectores-classes.php), editables en Elementor. Aquí solo lo que
   V4 no expresa: el velo de la foto, la raya y la franja táctil del nombre del
   diseño, el subrayado del índice al pasar el ratón, el carril deslizable del
   móvil (y el corte de 639 px que el kit no tiene), las flechas girada y
   externa, y el texto solo para lectores de pantalla.

   El tema carga este archivo en TODAS las páginas: cada regla va enganchada a
   una clase art-sec-* o a un atributo data-art-sec-* / valor propio, para no
   tocar otras páginas. Selectores con .elementor delante (las clases V4 pesan
   0,2,0).
   ============================================================ */

/* ---------- texto solo para lectores de pantalla (.sr del prototipo) ----------
   data-art-sec-sr: el propio elemento; data-art-sec-sr-span: el <span> que el
   texto del botón lleva dentro («(se abre en una pestaña nueva)») */
.elementor [data-art-sec-sr],
.elementor [data-art-sec-sr-span] span {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- cabecera de página interior (Sectores y Certificación) ---------- */
/* el velo sobre la foto (.cabeza-pag::after); la capa ::after y el foco de dos
   tonos sobre foto ya los pone style.css para todo [data-art-velo] */
.elementor [data-art-velo="sec-pag"]::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%);
}
/* el nombre del diseño de la foto: raya delante desde 900 px (en el móvil va en placa). En un
   contenedor atómico (el enlace de Sectores) Elementor usa ::before como capa de fondo
   (.e-con:before: absoluta, opacidad y bordes por variable): se devuelve al flujo, como en el
   prototipo, donde es un elemento más de la fila */
@media (min-width: 900px) {
	.elementor .art-sec-pag__pie::before {
		content: ""; position: static; display: block; width: 40px; height: 1px; background: currentColor;
		border: 0; opacity: 1; mix-blend-mode: normal;
	}
}
/* cuando es enlace (Sectores: pide su muestra), 44 px de toque sin moverlo y la flecha que avanza */
.elementor a.art-sec-pag__pie { transition: color .25s var(--art-curva), background-color .25s var(--art-curva); }
.elementor a.art-sec-pag__pie::after {
	content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
}
.elementor a.art-sec-pag__pie .art-sec-pag__ico { transition: transform .3s var(--art-curva); }
.elementor a.art-sec-pag__pie:hover .art-sec-pag__ico { transform: translateX(3px); }

/* los enlaces de los perfiles parten línea si no caben en su columna, como .enlace del prototipo
   (style.css pone white-space: nowrap a todo .art-enlace) */
.elementor .art-sec-perfil__enlace { white-space: normal; }

/* índice de sectores: subrayado al pasar el ratón */
.elementor .art-sec-indice__ir:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }

/* ---------- residencial: las flechas de los dos botones ---------- */
/* «Visitar rugsnhome.mx»: el icono de enlace externo en lugar de la flecha */
.elementor [data-art-flecha="externo"]::after {
	-webkit-mask-image: url("../img/externo.svg"); mask-image: url("../img/externo.svg");
}
/* «Volver a aviación»: la flecha apunta arriba, a la aviación */
.elementor [data-art-flecha="arriba"]::after { transform: rotate(-90deg); }
.elementor a[data-art-flecha="arriba"]:hover::after { transform: rotate(-90deg) translateX(4px); }

/* ---------- para quién: el carril deslizable del móvil (≤639 en el prototipo) ----------
   ≤599 lo pone la clase (fila, hueco, sangrado y relleno); aquí el desplazamiento
   con imán y sin barra. 600-639: el kit corta en 599, así que el carril (y la
   rejilla residencial de dos columnas) se repiten aquí para ese tramo */
@media (max-width: 639px) {
	.elementor [data-art-sec-carril] {
		overflow-x: auto; scroll-snap-type: x mandatory;
		scroll-padding-inline: clamp(20px, 4vw, 56px); scrollbar-width: none;
	}
	.elementor [data-art-sec-carril]::-webkit-scrollbar { display: none; }
	.elementor [data-art-sec-carril] > .art-sec-perfil { scroll-snap-align: start; }
}
@media (min-width: 600px) and (max-width: 639px) {
	.elementor .art-sec-perfiles {
		display: flex; flex-direction: row; gap: 16px; width: auto;
		margin-inline: calc(clamp(20px, 4vw, 56px) * -1); padding-inline: clamp(20px, 4vw, 56px);
	}
	.elementor .art-sec-perfil { flex: 0 0 82%; }
	.elementor .art-sec-resi__disenos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
}

/* ---------- 521-599: botones a su medida ----------
   El prototipo pone los botones a todo el ancho solo hasta 520 px (.acciones .btn); el kit de
   Elementor corta en 599. En ese tramo, las acciones de Sectores y de la cabecera de página
   (Sectores y Certificación) vuelven a la fila con los botones a su medida, como el prototipo */
@media (min-width: 521px) and (max-width: 599px) {
	.elementor .art-sec-acciones, .elementor .art-sec-par__txt > .art-acciones { flex-direction: row; align-items: normal; }
	.elementor .art-sec-pag__btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.elementor a.art-sec-pag__pie, .elementor a.art-sec-pag__pie .art-sec-pag__ico { transition: none; }
	.elementor a.art-sec-pag__pie:hover .art-sec-pag__ico { transform: none; }
	.elementor a[data-art-flecha="arriba"]:hover::after { transform: rotate(-90deg); }
	/* las tarjetas de diseño no mueven su flecha con movimiento reducido (prototipo: .diseno__ir .ico) */
	.elementor .art-sec-resi__disenos .art-diseno:is(:hover, :focus-visible) [data-art-flecha]::after { transform: none; }
}