/* ============================================================
   Home (portada): inicio-build.php e inicio-classes.php (clases art-ini-*).
   Réplica de prototipo/assets/css/inicio.css. El diseño vive en las clases
   V4; aquí solo lo que V4 no expresa: velos y degradados con ::after, el
   enlace estirado de las piezas, el carril del teléfono, hover entre
   elementos, text-wrap y white-space, el subrayado en degradado, las curvas
   de transición y los cortes del prototipo que el kit no tiene (520, 639/640
   y 719/720 px). Enganchado a data-art-* o a una clase art-ini- cuando solo
   completa su estilo. La carga el tema hijo sola (functions.php).
   ============================================================ */

/* la variable de fuente sale sin respaldo (como en style.css con las comunes) */
.elementor :is(.art-ini-muestra__tipo, .art-ini-muestra__nombre, .art-ini-muestra__ir, .art-ini-sector__nombre, .art-ini-sector__linea,
	.art-ini-alfombra__nombre, .art-ini-alfombra__linea, .art-ini-alfombra__ir, .art-ini-rotulo__nombre, .art-ini-rotulo__ir,
	.art-ini-pieza__nombre, .art-ini-pieza__linea, .art-ini-punto__num, .art-ini-punto__tit, .art-ini-punto__txt,
	.art-ini-cert__norma, .art-ini-doc__dt, .art-ini-doc__dd, .art-ini-feria__dias, .art-ini-feria__mes) { font-family: var(--art-fuente); }

/* ---------- 1. héroe: el velo oscurece la izquierda y el pie, donde va el texto ----------
   Contraste AA (medido el 12/10/2026 con wordpress/qa/inicio-contraste.*): con el velo del
   prototipo, el «ES» y «About» de la cabecera transparente quedaban en 4,2-4,6:1 sobre las
   ventanillas claras de la derecha, y la ceja Sky en el móvil en 3,4:1 (3,2:1 en español, donde
   el título es más largo y la ceja cae sobre el parabrisas). La banda de arriba pasa de .45 a .55
   y el velo del móvil de (.8, .55, .3) a (.8, .7, .65): todo ≥ 4,5:1 también en el peor píxel. El
   prototipo tiene el mismo defecto (inicio.css): conviene llevarle estos valores. */
.elementor [data-art-velo="inicio"]::after {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 24%),
		linear-gradient(90deg, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .5) 42%, rgba(0, 0, 0, 0) 78%),
		linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 55%);
}
@media (max-width: 899px) {
	.elementor [data-art-velo="inicio"]::after { background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .7) 55%, rgba(0, 0, 0, .65) 100%); }
}
/* la muestra: la foto se acerca al pasar el ratón (la flecha avanza con la regla común de style.css) */
.elementor .art-ini-muestra .art-img-cubre { transition: transform 1.2s var(--art-curva); }
.elementor .art-ini-muestra:hover .art-img-cubre { transform: scale(1.04); }

/* ---------- 2. sectores ---------- */
/* el degradado bajo el nombre (contraste AA medido el 12/10/2026: con el del prototipo, .66 → 0 al
   56 %, «Residential» quedaba en 2,9:1 y su línea en 3,5-4,1:1 sobre la sala clara, y «Aviation» a
   390 en 3:1; con este, todo ≥ 4,5:1, y ≥ 3:1 los nombres, también en el peor píxel. El prototipo
   tiene el mismo defecto: conviene llevarle este valor) */
.elementor [data-art-velo="ini-sector"]::after { background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .5) 35%, rgba(0, 0, 0, 0) 70%); }
.elementor .art-ini-sector .art-img-cubre { transition: transform 1.4s var(--art-curva); }
.elementor .art-ini-sector:hover .art-img-cubre { transform: scale(1.04); }
.elementor .art-ini-sector [data-art-sector-ir] { transition: background-color .3s var(--art-curva), color .3s var(--art-curva); }
.elementor .art-ini-sector:hover [data-art-sector-ir] { background-color: var(--blanco, #fff); color: var(--negro, #000); }

/* ---------- 3. qué hacemos: la banda de la alfombra, los rótulos y las piezas ---------- */
.elementor [data-art-velo="ini-alfombra"]::after { background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 75%); }
@media (max-width: 899px) {
	.elementor [data-art-velo="ini-alfombra"]::after { background: linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .6) 50%, rgba(0, 0, 0, 0) 85%); }
}
.elementor .art-ini-alfombra__enlace .art-img-cubre { transition: transform 1.4s var(--art-curva); }
.elementor .art-ini-alfombra:hover .art-ini-alfombra__enlace .art-img-cubre { transform: scale(1.03); }

/* el rótulo de un diseño (y la placa de las texturas con nombre): fondo negro al pasar el ratón,
   la acción subrayada con un degradado de 1,5 px (un borde de 1,5 px se pinta de 1 en pantallas 1x)
   y, sobre la foto, el anillo de foco de dos tonos de los héroes */
.elementor .art-ini-rotulo { transition: background-color .3s var(--art-curva); }
.elementor a.art-ini-rotulo:hover,
.elementor .art-ini-placa:is(:hover, :focus-visible) .art-ini-rotulo { background-color: var(--negro, #000); }
.elementor .art-ini-rotulo__ir { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; }
.elementor a.art-ini-rotulo:focus-visible { outline-color: var(--sky, #A7CFEA); box-shadow: 0 0 0 3px var(--negro, #000); }
.elementor .art-ini-placa:focus-visible [data-art-flecha]::after { transform: translateX(4px); }
.elementor .art-ini-placa .art-img-cubre { transition: transform 1.2s var(--art-curva); }
.elementor .art-ini-placa:is(:hover, :focus-visible) .art-img-cubre { transform: scale(1.04); }

/* las piezas: el enlace de cada tarjeta se estira a toda ella (::after) y el rótulo del diseño
   queda encima (z-index 2 en su clase) */
.elementor .art-ini-pieza__enlace::after { content: ""; position: absolute; z-index: 1; inset: 0; }
.elementor .art-ini-pieza__enlace:focus-visible { outline: none; }
.elementor .art-ini-pieza__enlace:focus-visible::after { outline: 2px solid var(--indigo, #252563); outline-offset: 2px; }
.elementor .art-ini-pieza__foto .art-img-cubre { transition: transform 1.2s var(--art-curva); }
.elementor .art-ini-pieza:hover .art-ini-pieza__foto .art-img-cubre { transform: scale(1.04); }

/* el carril del teléfono (≤639, como componentes.css [data-carril]): la siguiente pieza asoma */
@media (max-width: 639px) {
	.elementor .art-ini-hacemos[data-carril] {
		display: flex; gap: 16px; width: auto; overflow-x: auto; scroll-snap-type: x mandatory;
		margin-inline: calc(clamp(20px, 4vw, 56px) * -1); padding-inline: clamp(20px, 4vw, 56px);
		scroll-padding-inline: clamp(20px, 4vw, 56px); scrollbar-width: none;
	}
	.elementor .art-ini-hacemos[data-carril]::-webkit-scrollbar { display: none; }
	.elementor .art-ini-hacemos[data-carril] > .art-ini-pieza { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ---------- 4. por qué Artoria: las filas llevan a una sección de esta misma página (la flecha baja) ---------- */
.elementor .art-ini-porque__filas .art-fila__ico { transform: rotate(90deg); }
.elementor .art-ini-porque__filas .art-fila__tit { text-wrap: balance; }
.elementor .art-ini-porque__filas .art-fila__txt { text-wrap: pretty; }

/* ---------- 7. certificación y 9. la feria ---------- */
.elementor .art-ini-cert__txt .art-lead { text-wrap: balance; }
.elementor .art-ini-feria__dias { white-space: nowrap; }

/* ---------- cortes del prototipo que el kit no tiene (tablet 899 · mobile 599) ---------- */
/* 600-639: el prototipo ya está en su diseño de teléfono (≤639) */
@media (min-width: 600px) and (max-width: 639px) {
	.elementor .art-ini-muestra { width: 100%; }
	.elementor .art-ini-sectores { grid-template-columns: 1fr; }
	.elementor .art-ini-sectores__li--grande { grid-column: auto; }
	.elementor .art-ini-sector--grande { aspect-ratio: 4 / 3; }
	.elementor .art-ini-alfombra { aspect-ratio: 1 / 1; }
	.elementor .art-ini-rotulo--der { inset-block-start: 12px; inset-block-end: auto; }
	.elementor .art-ini-puntos { grid-template-columns: 1fr; }
}
/* 600-719: los ocho diseños, en dos columnas (en cuatro desde 720) */
@media (min-width: 600px) and (max-width: 719px) {
	.elementor .art-ini-disenos { grid-template-columns: 1fr 1fr; }
}
/* 521-599: las acciones siguen en fila (a todo el ancho solo ≤520, como .acciones .btn) */
@media (min-width: 521px) and (max-width: 599px) {
	.elementor [data-art-heroe] .art-acciones { flex-direction: row; align-items: normal; }
	.elementor .art-ini-btn--movil { width: auto; }
}
/* ≤520: los botones de la feria a todo el ancho de su fila (que mide lo que su contenido) */
@media (max-width: 520px) {
	.elementor .art-ini-feria__acciones .art-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.elementor :is(.art-ini-muestra, .art-ini-sector, .art-ini-alfombra, .art-ini-pieza, .art-ini-placa) .art-img-cubre,
	.elementor .art-ini-rotulo, .elementor .art-ini-sector [data-art-sector-ir] { transition: none; }
	.elementor :is(.art-ini-muestra, .art-ini-sector, .art-ini-alfombra, .art-ini-pieza, .art-ini-placa):is(:hover, :focus-visible) .art-img-cubre,
	.elementor .art-ini-alfombra:hover .art-ini-alfombra__enlace .art-img-cubre,
	.elementor .art-ini-pieza:hover .art-ini-pieza__foto .art-img-cubre { transform: none; }
	/* como inicio.css y componentes.css: la flecha de los rótulos, las texturas y la banda no avanza
	   (la de los botones y la de la muestra del héroe, sí) */
	.elementor :is(a.art-ini-rotulo, .art-ini-placa, .art-ini-alfombra__enlace):is(:hover, :focus-visible) [data-art-flecha]::after { transform: none; }
}