/* Cinta de «trabajamos con».
   ---------------------------------------------------------------------------
   Va justo debajo del hero y justo encima del carrusel de soluciones, y ahora
   se mueve, con el MISMO motor que el carrusel: `assets/js/carril.js`.

   (Aqui vivia una nota que decia que esta banda era «la unica de la portada que
   no se mueve, porque dos cosas moviendose serian ruido». El cliente pidio
   expresamente lo contrario, y visto en pantalla tenia razon: las dos cintas
   van a velocidades distintas —28 px/s la de logos, 45 el carrusel— y se leen
   como dos capas a distinta profundidad, no como ruido.)

   Ni fondo propio ni bordes. Pegada al hero, cualquier raya o cualquier cambio
   de tono devuelve la costura que costo quitar: una linea horizontal a un pixel
   del canto donde termina la ola. Se separa con aire, que no deja canto.
   -------------------------------------------------------------------------- */

/* El hero que va justo encima no lleva raya.
   Se apaga con `body .hero` y no con `.hero` a secas POR UN MOTIVO MEDIDO: las
   dos reglas tenian la misma especificidad (0,1,0) y entonces gana la ultima
   que cargue. Mientras `sitio.css` iba en `wp_enqueue_scripts` cargaba antes y
   ganaba la del bloque; al moverla a `enqueue_block_assets` —para que el editor
   la viera dentro de su iframe— paso a cargar DESPUES, y la costura volvio sin
   que nadie tocara una linea de esta hoja. Con 0,1,1 gana siempre. */
body .hero { border-bottom: 0 }

.sg-ali {
	position: relative;
	padding-block: 3.2rem 1.4rem;
}

/* --------------------------------------------------------------- el rotulo */

/* Arriba y centrado, no al lado. Con la cinta en movimiento, un rotulo a la
   izquierda se convierte en un obstaculo fijo por el que los logos tienen que
   pasar por detras; arriba se lee una vez y deja la banda entera libre. */
.sg-ali__rotulo {
	margin: 0 0 1.5rem;
	text-align: center;
	/* De 0,72rem a 1,05rem. Era la letra mas pequena de toda la portada
	   —11,5 px reales— y con la cinta al doble se perdia del todo. */
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	/* El gris `tenue` da 4,1:1 sobre el fondo. Un rotulo que presenta la
	   seccion tiene que leerse de lejos; este aclarado da 6,3:1. */
	color: var(--wp--preset--color--suave, #93a7c1);
}

/* ---------------------------------------------------------------- el carril */

.sg-ali__marco {
	/* Sin JS: un carril con scroll horizontal nativo, que se usa con el dedo.
	   Con JS, `carril.js` añade `.sg-ali--vivo` y pasa a mandar el transform. */
	overflow-x: auto;
	overflow-y: hidden;
	touch-action: pan-y;
	scrollbar-width: none;
}

.sg-ali__marco::-webkit-scrollbar {
	display: none;
}

.sg-ali--vivo .sg-ali__marco {
	overflow: hidden;
	/* No lleva `cursor: grab`: esta cinta NO se arrastra. Un cursor de agarre
	   sobre algo que no se puede agarrar es una promesa que no se cumple. */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
	mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
}

.sg-ali__pista {
	display: flex;
	align-items: center;
	/* Sube con el tamano: con las entradas al doble y el hueco de antes, la
	   cinta se lee como un bloque continuo en vez de como una lista. */
	gap: 4.4rem;
	margin: 0;
	padding: 0 clamp(1.25rem, 5vw, 2.5rem);
	list-style: none;
	width: max-content;
}

.sg-ali--vivo .sg-ali__pista {
	padding: 0;
	will-change: transform;
}

.sg-ali__item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex: none;
	margin: 0;
	color: var(--wp--preset--color--suave, #93a7c1);
	transition: color .2s ease;
}

.sg-ali__item:hover {
	color: var(--wp--preset--color--texto, #e9eff7);
}

/* El glifo hereda el color del `<li>`: por eso el SVG va incrustado y no dentro
   de un `<img>`, que no puede heredar nada. */
.sg-ali__glifo {
	display: block;
	flex: none;
	line-height: 0;
}

.sg-ali__glifo svg {
	display: block;
	/* AL DOBLE, pedido por el cliente. Va junto con la altura del `<img>`
	   del logo subido y con el `height="52"` que escribe `render.php`:
	   los tres tienen que decir lo mismo o la cinta salta al cargar. */
	width: 52px;
	height: 52px;
}

/* EL LOGOTIPO OFICIAL, PINTADO COMO MASCARA.

   Los archivos son PNG blancos sobre transparencia (los preparo
   `herramientas/preparar-logos-oficiales.py` a partir de los oficiales que
   aporto el cliente). Van de mascara y NO dentro de un `<img>` por lo mismo que
   el SVG va incrustado: dentro de un `<img>` no heredan nada, se quedarian
   blancos fijos y no seguirian el `hover` de la entrada. Aqui la forma la pone
   la mascara y la tinta `background: currentColor`, asi que hacen exactamente
   lo mismo que los glifos dibujados y conviven en la misma fila sin que se note
   cual es cual.

   `-webkit-` delante porque Safari todavia lo pide. Sin el prefijo ahi saldria
   un cuadrado macizo del color del texto — peor que no verlo, porque parece un
   fallo del contenido y no del navegador. */
.sg-ali__glifo--oficial {
	/* SE IGUALA LA ALTURA Y EL ANCHO LO PONE EL ARCHIVO, que es como se compone
	   una fila de marcas: los mismos 52 px que el `svg` de al lado y que el
	   `height` del `<img>` subido —los tres tienen que decir lo mismo o la cinta
	   salta al cargar— y el ancho que le toque a cada proporcion.

	   Con la caja cuadrada para todos, el wordmark de Odoo entraba de cinco por
	   uno y salia con 10 px de alto contra los 52 de un icono: un tercio de sus
	   vecinos, y se veia. `--sg-prop` la escribe `render.php` leyendo el propio
	   PNG, asi que no hay ninguna tabla que pueda quedarse vieja.

	   Va en `calc` y no en `aspect-ratio` porque este elemento es un hijo de un
	   flex sin contenido: `width:auto` con `aspect-ratio` depende de como el
	   navegador resuelva el tamano intrinseco, y `calc` no depende de nada. */
	height: 52px;
	width: calc(52px * var(--sg-prop, 1));
	background: currentColor;
	-webkit-mask-image: var(--sg-glifo);
	mask-image: var(--sg-glifo);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.sg-ali__nombre {
	/* Sube con el glifo. Al doblar solo el dibujo, el nombre —que es lo
	   que quita la ambiguedad de un glifo monocromo— quedaba de segundo. */
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* Cuando haya logotipos oficiales: se igualan por ALTURA y no por anchura, que
   es como se compone una fila de marcas — si no, un logo apaisado aplasta a los
   cuadrados. El desaturado los deja convivir con la paleta del sitio. */
.sg-ali__logo {
	display: block;
	flex: none;
	/* Al doble, como el glifo. El `max-width` tambien: un logotipo
	   apaisado con la altura doblada y el ancho al tope viejo saldria
	   aplastado por `object-fit`. */
	height: 52px;
	width: auto;
	max-width: 260px;
	object-fit: contain;
	opacity: 0.78;
	filter: grayscale(1);
	transition: opacity .2s ease, filter .2s ease;
}

.sg-ali__item:hover .sg-ali__logo {
	opacity: 1;
	filter: grayscale(0);
}

/* ---------------------------------------------------------------- pantallas */

@media (max-width: 700px) {
	.sg-ali {
		padding-block: 2rem 0.5rem;
	}
	.sg-ali__rotulo {
		margin-bottom: 1.1rem;
	}
	.sg-ali__pista {
		gap: 2.2rem;
	}
	.sg-ali__nombre {
		font-size: 0.94rem;
	}
	.sg-ali--vivo .sg-ali__marco {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
		mask-image: linear-gradient(to right, transparent, #000 2rem, #000 calc(100% - 2rem), transparent);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sg-ali__item,
	.sg-ali__logo {
		transition: none;
	}
}