/* =========================================================================
   PIMASA — estilos de los bloques
   =========================================================================
   Se carga en cualquier página construida con bloques (ver inc/enqueue.php).
   Mantener aquí lo que no se usa en las fichas de producto evita cargarlo
   donde no hace falta.

   Las medidas y los colores salen del kit original de Elementor, para que
   la portada se reconozca: titulares de 25.88px con peso 900 y espaciado
   -0.2px, papel #E6E6E6, velos negros al 33% y al 50%.
   ========================================================================= */

/* --- Bloque: Próximamente ------------------------------------------------ */

.proximamente {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 100svh;
	padding-block: var(--e-8);
	/* El rojo del archivo, mas vivo que el de marca: Elementor lo aplicaba
	   como capa sobre el video y es el que se ve en la portada original. */
	background: #f10f0f;
	color: var(--c-blanco);
	isolation: isolate;
	text-align: center;
}

.proximamente__fondo {
	position: absolute;
	inset: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.proximamente__velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: #f10f0f;
	opacity: 0.75;
	mix-blend-mode: color;
}

.proximamente__titulo {
	color: var(--c-blanco);
	font-size: var(--t-2xl);
	text-wrap: balance;
}

.proximamente__texto {
	margin-top: var(--e-5);
	color: rgb(255 255 255 / 85%);
	font-size: var(--t-md);
}

/*
  El vídeo de fondo de la portada. Misma técnica que el hero: el iframe
  tiene proporción fija, así que se escala desde el centro con mínimos en
  unidades de ventana para que cubra sin dejar franjas.
*/
.proximamente__video {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	pointer-events: none;
}

.proximamente__video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-width: 177.77lvh;
	min-height: 100lvh;
	transform: translate(-50%, -50%);
	border: 0;
}

/* Quien pide menos movimiento no deberia recibir un video en bucle. */
@media (prefers-reduced-motion: reduce) {
	.proximamente__video {
		display: none;
	}
}

/* --- Bloque: Portada principal (hero) ------------------------------------ */
/*
  El original ocupaba la ventana entera y se metía 80px por debajo de la
  cabecera. Aquí la cabecera es blanca y se queda pegada arriba, así que en
  vez de esconder los primeros 80px de vídeo se descuenta su altura: el
  resultado en pantalla es el mismo y no hay que teñir la cabecera.
*/

/*
  Sin color de fondo propio, como el original.

  El contenedor del archivo no declara ninguno: solo el velo negro al 33%
  (#00000054) cayendo sobre el blanco de la pagina, que da un gris #ABABAB.
  Eso es lo que se veia durante el segundo que tarda el video en pintar.

  Yo tenia aqui var(--c-azul), asi que ese momento salia azul marino en vez
  de gris. Es una fraccion de segundo, pero es la unica que se ve antes del
  video y no tenia por que inventarmela.
*/
/*
  Con la cabecera encima, el hero ocupa la ventana ENTERA y se mete debajo de
  la barra, que es lo que hacia el archivo con su margin-top:-80px. Sin el
  margen negativo la barra transparente dejaria ver el blanco de la pagina.
*/
body.con-portada .hero {
	min-height: 100svh;
	margin-top: calc(-1 * var(--alto-cabecera));
}

.hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: calc(100svh - var(--alto-cabecera));
	padding-block: var(--e-8);
	color: var(--c-blanco);
	isolation: isolate;
	overflow: hidden;
}

/*
  Sin foto ni video, en cambio, ese gris se queda para siempre y el texto va
  en blanco encima. Ahi si hace falta un fondo, y tampoco una pantalla
  entera de alto.
*/
.hero:not(.hero--con-fondo) {
	min-height: clamp(280px, 42svh, 420px);
	background: var(--c-azul);
}

.hero__fondo {
	position: absolute;
	inset: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Velo negro al 33%, el del original: oscurece lo justo para leer encima. */
.hero__velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(0 0 0 / 33%);
}

.hero__cuerpo {
	text-align: center;
}

/* La frase entera: «Comprometidos con la PRODUCTIVIDAD de su negocio». */
.hero__frase {
	max-width: 26ch;
	margin-inline: auto;
	color: var(--c-blanco);
	/*
	  Es el h1 de la portada, y los h1 del tema van en 900 y en mayusculas.
	  Se lee en redonda y en caja normal, como siempre: lo que cambia al
	  pasar de <p> a <h1> es lo que ese texto significa, no su aspecto.

	  El text-transform hay que devolverlo a mano. Sin esta linea la frase
	  salia como «COMPROMETIDOS CON LA PRODUCTIVIDAD DE SU NEGOCIO.», que no
	  es lo que decia la portada.
	*/
	font-weight: var(--p-normal);
	text-transform: none;
	font-size: clamp(1.25rem, 1rem + 1.4vw, 1.62rem);
	line-height: 1.35;
	letter-spacing: var(--interletra-titulo, -0.2px);
	text-shadow: 0 1px 12px rgb(0 0 0 / 35%);
	text-wrap: balance;
}

.hero__antes,
.hero__despues {
	font-weight: var(--p-normal);
}

/* --- La palabra que cambia ------------------------------------------------
  Va más marcada, como en el original.

  El ancho se reserva y no se mueve. Antes la palabra se escribía letra a
  letra, así que su caja pasaba de 60px a 169px y el punto de corte de la
  frase cambiaba con cada pulsación: «Comprometidos con la» cabía en una
  línea a medio escribir y no cabía con la palabra entera, de modo que «la»
  se pasaba el día subiendo y bajando de renglón.

  --hero-palabra lo pone main.js midiendo la palabra más larga con la
  tipografía de verdad. Sin JS no hay variable y el inline-flex se ajusta al
  contenido, que es la lista separada por comas: se ve, y no se mueve nada.
*/
.hero__palabra {
	display: inline-flex;
	justify-content: center;
	min-width: var(--hero-palabra, auto);
	position: relative;
	font-weight: 600;
	white-space: nowrap;
}

/* Cada letra entra y sale por su cuenta, escalonada. */
.hero__letra {
	display: inline-block;
	white-space: pre;
	transform: translateY(0.55em);
	opacity: 0;
	animation: pimasa-letra-entra 440ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: calc(var(--i, 0) * 34ms);
}

.hero__palabra--saliendo .hero__letra {
	transform: none;
	opacity: 1;
	animation: pimasa-letra-sale 260ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
	animation-delay: calc(var(--i, 0) * 18ms);
}

@keyframes pimasa-letra-entra {
	from { transform: translateY(0.55em); opacity: 0; }
	to   { transform: none;               opacity: 1; }
}

@keyframes pimasa-letra-sale {
	from { transform: none;                opacity: 1; }
	to   { transform: translateY(-0.5em);  opacity: 0; }
}

/*
  El subrayado de marca, que barre de izquierda a derecha con la palabra y se
  recoge al irse. Es lo que le da el golpe de vista sin recargar la frase.
*/
.hero__palabra--animada::after {
	position: absolute;
	right: 0;
	bottom: -0.16em;
	left: 0;
	height: 3px;
	border-radius: 3px;
	background: var(--c-rojo);
	content: "";
	transform-origin: left center;
	animation: pimasa-raya-entra 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero__palabra--saliendo::after {
	transform-origin: right center;
	animation: pimasa-raya-sale 240ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

/*
  La raya va con animacion, no con transicion.
  
  Con transicion habia que ponerle una clase desde JS en el fotograma
  siguiente, y requestAnimationFrame no corre en una pestaña de fondo: la
  raya se quedaba sin salir. Como animacion arranca sola en cuanto cambia la
  clase que la elige, y el navegador se encarga del resto.
*/
@keyframes pimasa-raya-entra {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@keyframes pimasa-raya-sale {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

/*
  Sin movimiento: la palabra cambia y punto. El subrayado se queda quieto y
  entero, que sigue marcando cual es la palabra que cambia.
*/
@media (prefers-reduced-motion: reduce) {
	.hero__letra,
	.hero__palabra--saliendo .hero__letra {
		animation: none;
		transform: none;
		opacity: 1;
	}

	.hero__palabra--animada::after,
	.hero__palabra--saliendo::after {
		animation: none;
		transform: scaleX(1);
	}
}

.hero__acciones {
	margin-top: var(--e-6);
}

/* --- Vídeo de fondo del hero --------------------------------------------- */
/*
  El iframe de Vimeo/YouTube tiene proporción fija, así que para que cubra la
  sección se escala desde el centro con un tamaño mínimo calculado en vh y vw.
  Es la técnica habitual: el vídeo se recorta por los lados o por arriba,
  nunca deja franjas.

  Los mínimos van en unidades de ventana y se pasan un poco: la sección mide
  una pantalla menos la cabecera, así que sobra vídeo por todos lados. Mejor
  eso que quedarse corto y ver una franja negra.
*/

.hero__video {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	pointer-events: none;
}

.hero__video iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;        /* 16:9 respecto al ancho */
	min-width: 177.77lvh;   /* 16:9 respecto al alto */
	min-height: 100lvh;
	transform: translate(-50%, -50%);
	border: 0;
}

/* Quien pide menos movimiento no debería recibir un vídeo en bucle. */
@media (prefers-reduced-motion: reduce) {
	.hero__video {
		display: none;
	}
}

/* --- Bloque: Líneas de negocio (paneles) --------------------------------- */
/*
  De canto a canto y sin contenedor: tres paneles que se reparten el ancho y
  crecen al pasar por encima, como el acordeón del original.
*/

.bloque-lineas {
	padding-block: 0;
}

/*
  Era la unica altura fija de todo el sistema: 500px clavados, mientras el
  resto de la hoja es fluido. En un portatil de 1366x768 se comian dos
  tercios de la ventana; en un monitor grande se quedaban cortos.
*/
.paneles {
	display: flex;
	height: clamp(380px, 52svh, 560px);
	overflow: hidden;
}

.paneles--con-titulo {
	margin-top: var(--e-6);
}

.panel {
	position: relative;
	display: grid;
	flex: 1 1 0%;
	place-items: center;
	min-width: 0;
	padding: var(--e-5);
	background-position: center;
	background-size: cover;
	color: var(--c-blanco);
	text-decoration: none;
	transition: flex-grow 0.4s ease;
}

/*
  El velo negro sobre la foto, que en el archivo estaba y aqui faltaba.

  El acordeon original lo llevaba: negro al 30%, y al 50% cuando el panel
  se abria. Sin el, el rotulo blanco cae directamente sobre la fotografia y
  el 31-40% de su superficie se queda por debajo de 3:1, con los peores
  puntos en 1.01. Medido muestreando el pixel de la foto detras de cada
  rotulo, no estimado.

  Va en ::before y no como sombra del texto porque el problema no es el
  borde de la letra: es que hay nubes blancas detras de una palabra blanca.
*/
.panel::before {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 30%);
	content: "";
	transition: background 0.4s ease;
}

/*
  El cristal cubre el panel ENTERO, no un recuadro detras del texto.

  En el archivo iba en .overlay, que es el div que tapa todo el panel, y solo
  en el que esta abierto: fondo blanco al 12%, desenfoque de 24, borde claro
  de 1px, esquinas de 24 y una sombra larga. Yo lo habia encogido a una
  pildora alrededor del rotulo, que es lo unico que se veia con cristal.

  El desenfoque tiene que ir en un hijo, no en el panel: backdrop-filter
  difumina lo que hay DETRAS del elemento, y la fotografia esta en el propio
  panel. Desde ::after si la alcanza.
*/
.panel::after {
	position: absolute;
	inset: 0;
	border: 1px solid rgb(255 255 255 / 12%);
	/* Como todo lo demas: el tema redondea a 8 como mucho. Estaba en 24 y
	   era la unica esquina asi de blanda del sitio. */
	border-radius: var(--r-lg);
	background: rgb(255 255 255 / 12%);
	box-shadow: 0 19px 26px 1px rgb(0 0 0 / 78%);
	content: "";
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
}

/* El panel activo se lleva tres partes de las cinco. */
@media (hover: hover) and (min-width: 721px) {
	.panel:hover::before,
	.panel:focus-visible::before {
		background: rgb(0 0 0 / 50%);
	}

	.panel:hover::after,
	.panel:focus-visible::after {
		opacity: 1;
	}

	.panel:hover,
	.panel:focus-visible {
		flex-grow: 3;
	}
}

.panel__velo {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 30%);
	transition: background 0.3s ease;
}

.panel:hover .panel__velo,
.panel:focus-visible .panel__velo {
	background: rgb(0 0 0 / 50%);
}

/*
  El rotulo es solo texto: el cristal es del panel, no suyo.

  Estuvo un rato con su propia pildora de cristal —un recuadro con
  desenfoque alrededor de la palabra—, que no es lo que hacia el archivo.
  Alli el cristal cubre el panel entero y el rotulo va encima, limpio.

  La sombra sustituye a lo que daba la pildora: sobre el velo del 30% de un
  panel en reposo, el peor punto de la fotografia deja el blanco en 2.13, y
  una palabra de 26px sobre foto necesita ayuda. No cuenta para la norma,
  pero es lo que hace que se lea.
*/
.panel__rotulo {
	position: relative;
	/*
	  Por encima del cristal.
	
	  Sin esto el rotulo se desenfoca con el resto: ::after esta posicionado
	  igual que el, y entre dos elementos posicionados sin z-index gana el
	  ultimo del arbol, que es el pseudoelemento. En el archivo no pasaba
	  porque el titulo colgaba DENTRO de la capa de cristal, y backdrop-filter
	  difumina lo de detras, nunca el contenido propio.
	*/
	z-index: 1;
	text-align: center;
	text-shadow: 0 2px 10px rgb(0 0 0 / 70%), 0 0 24px rgb(0 0 0 / 45%);
}

.panel__titulo {
	color: var(--c-blanco);
	font-size: var(--t-lg);
	font-weight: var(--p-titulo);
	letter-spacing: var(--interletra-titulo, -0.2px);
	line-height: 1.15;
	text-transform: uppercase;
	text-wrap: balance;
}

/* Con el dedo no hay «encima»: los paneles se apilan y el rótulo se ve
   siempre, en vez de esconderse esperando un ratón que no existe. */
@media (max-width: 720px) {
	.paneles {
		display: grid;
		height: auto;
		grid-auto-rows: 220px;
	}
}

/* --- Bloque: Texto con imagen -------------------------------------------- */

.duo {
	display: grid;
	gap: var(--e-6) var(--e-7);
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

/* Con la imagen a la izquierda se invierte el orden visual, pero NO el del
   marcado: quien usa lector de pantalla sigue oyendo antes el texto. */
.duo--izquierda .duo__media {
	order: -1;
}

.duo__media {
	margin: 0;
}

.duo__media img {
	width: 100%;
}

.duo__texto .prosa {
	max-width: none;
}

.duo__acciones {
	margin-top: var(--e-6);
}

/*
  La foto que llena su mitad de la seccion.

  Es lo que hacian once de las doce secciones de texto con imagen del
  archivo: no un widget de foto, sino una columna con la fotografia de fondo,
  ocupando su mitad de borde a borde y recortandose. Aqui salian centradas y
  a su proporcion, con el color de la seccion asomando por arriba y por abajo.

  Se estira con align-self y se recorta con object-fit, asi que sigue siendo
  un <img> con su srcset y su alt: la foto la sirve WordPress, no el CSS.

  Solo a partir de dos columnas: apiladas en movil, una foto recortada a la
  altura del texto no tiene sentido.
*/
@media (min-width: 860px) {
	.duo--al-borde {
		align-items: stretch;
	}

	.duo--al-borde .duo__media {
		align-self: stretch;
		min-height: 100%;
	}

	.duo--al-borde .duo__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/*
  Texto que se despliega con un boton.

  Es un <details> con el <summary> vestido de boton, sin una linea de
  JavaScript: el navegador lo abre y lo cierra, avisa a los lectores de
  pantalla de si esta abierto, y el buscador de la propia pagina (Ctrl+F)
  encuentra el texto aunque este plegado.

  El marcador triangular se quita por tres sitios porque cada navegador lo
  pone a su manera: list-style para Firefox, ::marker para los modernos y
  ::-webkit-details-marker para Safari viejo.
*/
.ampliable {
	margin-top: var(--e-6);
}

.ampliable__mando {
	cursor: pointer;
	list-style: none;
}

.ampliable__mando::marker,
.ampliable__mando::-webkit-details-marker {
	display: none;
	content: "";
}

.ampliable__cerrar {
	display: none;
}

.ampliable[open] .ampliable__abrir {
	display: none;
}

.ampliable[open] .ampliable__cerrar {
	display: inline;
}

.ampliable__cuerpo {
	margin-top: var(--e-4);
}

/* --- Bloque: Marcas (cinta que corre) ------------------------------------ */
/*
  Dos copias de la misma lista puestas en fila. La pista se desplaza justo la
  mitad de su ancho y vuelve a empezar: como la segunda copia es idéntica a
  la primera, el salto no se ve y el bucle parece infinito.
*/

.bloque-marcas {
	overflow: hidden;
}

.cinta {
	margin-top: var(--e-6);
	overflow: hidden;
	/* Difumina los bordes para que los logos no aparezcan de golpe.
	   Safari lo pide con prefijo hasta la 15.4. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.cinta__pista {
	display: flex;
	width: max-content;
	animation: pimasa-cinta var(--cinta-duracion, 40s) linear infinite;
}

.cinta:hover .cinta__pista,
.cinta:focus-within .cinta__pista {
	animation-play-state: paused;
}

.cinta__grupo {
	display: flex;
	align-items: center;
	gap: var(--e-7);
	padding-right: var(--e-7);
}

/*
  El hueco de cada logotipo: 148x92, la misma proporcion que el archivo.

  El original los llevaba en un carrusel de cinco visibles: en un contenedor
  de 1120px eso son ~224px por hueco. Yo daba 150, y encima los archivos eran
  mesas de trabajo de 1250x1250 con el logotipo dentro y mucho aire alrededor,
  asi que la marca visible salia mas pequeña todavia: 36 px de alto de media.
  De ahi se subio a un hueco de 200x124.

  Con los logotipos que entrego el cliente el limite es otro, y no es el
  hueco: son los archivos. Vienen entre 57x76 y 257x55 y a 124 px de alto
  cinco de los diecinueve se estiraban mas del doble —Tomocorp x2.88, Hudbay
  x2.61—, que es donde el pixel empieza a verse. Bajando el hueco a 92 solo
  queda uno por encima de x2.

  Y no se ven pequeños: como estos archivos llevan el logotipo al 86% del
  lienzo, a 92 px la mancha de tinta sigue siendo mas del doble de alta que
  la que habia antes a 124.

  El hueco guarda la proporcion del lienzo (400x248), asi que la imagen lo
  llena justo y los espacios entre marcas quedan iguales.
*/
.cinta__item {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 148px;
}

.cinta__item img {
	width: auto;
	max-width: 100%;
	height: 92px;
	object-fit: contain;
	/*
	  Gris de serie, a color al pasar por encima: unifica logos muy dispares.

	  Estaba en 0.75 de opacidad y gris del todo, y a 72px de alto no se
	  distinguia ninguno. Subido lo justo para poder leerlos sin romper la
	  unidad que da el gris.
	*/
	filter: grayscale(1) contrast(1.15);
	opacity: 0.92;
	transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

.cinta__item:hover img {
	filter: grayscale(0) contrast(1);
	opacity: 1;
	transform: scale(1.06);
}

.cinta__nombre {
	color: var(--c-texto-suave);
	font-size: var(--t-sm);
	font-weight: var(--p-fuerte);
	text-align: center;
}

@keyframes pimasa-cinta {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Sin movimiento: la cinta se queda quieta y se puede arrastrar a mano. */
@media (prefers-reduced-motion: reduce) {
	.cinta {
		overflow-x: auto;
	}

	.cinta__pista {
		animation: none;
	}

	/* La copia sobra si no hay bucle que disimular. */
	.cinta__grupo[aria-hidden="true"] {
		display: none;
	}
}

/* --- Bloque: Cifras ------------------------------------------------------ */
/*
  Banda a media altura sobre una foto. El original medía 45vh.
*/

.banda-cifras {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(280px, 45svh, 460px);
	padding-block: var(--e-7);
	background: var(--c-azul);
	color: var(--c-blanco);
	isolation: isolate;
	text-align: center;
}

.banda-cifras__fondo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.banda-cifras__velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(0 0 0 / 40%);
}

.banda-cifras h2 {
	color: var(--c-blanco);
}

.cifras {
	display: grid;
	gap: var(--e-6);
	margin: 0;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.cifras--con-titulo {
	margin-top: var(--e-6);
}

/* La cifra y su texto forman una sola frase, como en el original
   («Presencia en +300 proyectos»), no un número con pie. */
.cifra__valor {
	display: grid;
	gap: var(--e-2);
	justify-items: center;
	color: var(--c-blanco);
	font-size: clamp(1.25rem, 1rem + 1.4vw, 1.62rem);
	font-weight: var(--p-titulo);
	letter-spacing: var(--interletra-titulo, -0.2px);
	line-height: 1.2;
	text-transform: uppercase;
	text-shadow: 0 1px 12px rgb(0 0 0 / 35%);
	text-wrap: balance;
}

/*
  El numero manda.

  Toda la banda medía 369px de alto para una sola linea de 26px: el dato se
  perdia en la foto. Ahora el numero va grande y la frase queda a su
  alrededor, que es como se lee un dato: primero la cifra, luego que es.

  tabular-nums para que no baile de ancho mientras cuenta.
*/
.cifra__numero {
	display: block;
	font-size: clamp(2.6rem, 1.4rem + 5vw, 5rem);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	letter-spacing: -0.02em;
}

/* --- Bloque: Contacto ---------------------------------------------------- */

.bloque-contacto__intro {
	margin-top: var(--e-4);
	color: var(--c-texto-suave);
}

.contacto-duo {
	display: grid;
	gap: var(--e-6) var(--e-7);
	align-items: start;
	margin-top: var(--e-6);
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

.contacto-duo--solo {
	max-width: 46rem;
	margin-inline: auto;
	grid-template-columns: 1fr;
}

.contacto-duo__mapa {
	overflow: hidden;
	border-radius: var(--r-lg);
	box-shadow: var(--sombra-1);
}

.contacto-duo__mapa iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 360px;
	border: 0;
}

/* --- Formulario ---------------------------------------------------------- */

.formulario__campos {
	display: grid;
	gap: var(--e-4);
	grid-template-columns: repeat(2, 1fr);
}

.campo {
	margin: 0;
}

.campo--ancho {
	grid-column: 1 / -1;
}

/*
  El tamano no puede bajar de 16px: Safari en iPhone amplia la pagina en
  cuanto enfocas un campo mas pequeno, y luego no vuelve sola. --t-sm da
  14.1px en un movil, justo por debajo.
*/
.campo input,
.campo textarea {
	width: 100%;
	padding: var(--e-3) var(--e-4);
	border: 1px solid var(--c-borde);
	border-radius: var(--r-md);
	background: var(--c-blanco);
	color: var(--c-texto);
	font: inherit;
	font-size: max(16px, var(--t-sm));
}

.campo textarea {
	resize: vertical;
}

.campo input::placeholder,
.campo textarea::placeholder {
	color: var(--c-texto-suave);
	opacity: 1;
}

.campo input:focus-visible,
.campo textarea:focus-visible {
	border-color: var(--c-enlace);
	outline: 2px solid var(--c-cian-osc);
	outline-offset: 1px;
}

.formulario__acciones {
	margin-top: var(--e-5);
}

.formulario__acciones .boton {
	width: 100%;
	justify-content: center;
}

/*
  La casilla de consentimiento, delante del boton.

  Pequena y en gris: informa, no compite con el «Enviar». Pero ni por debajo
  de 13px ni por debajo del minimo de contraste —es un texto legal y tiene
  que poder leerse de verdad, no estar para cubrir el expediente—.

  El cuadrito por defecto mide unos 13px, por debajo del minimo tactil de 24
  (WCAG 2.2, 2.5.8). Se agranda a 24, y como el <label> envuelve al cuadrito
  Y al texto, lo pulsable es el renglon entero.

  El width:100% de .campo input hay que deshacerlo aqui: esa regla es para
  las cajas de texto, y a una casilla la estiraria de lado a lado.
*/
.campo--acepto {
	margin-top: var(--e-4);
}

.campo--acepto label {
	display: flex;
	align-items: start;
	gap: var(--e-3);
	color: var(--c-texto-suave);
	font-size: var(--t-xs);
	line-height: var(--i-normal);
	cursor: pointer;
}

.campo--acepto input {
	flex: none;
	width: 24px;
	height: 24px;
	padding: 0;
	accent-color: var(--c-linea-fuerte);
}

/* El señuelo no se oculta con display:none: hay robots que se saltan lo que
   no se pinta. Se saca de la pantalla, donde sí lo encuentran. */
.senuelo {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.aviso {
	margin-bottom: var(--e-5);
	padding: var(--e-3) var(--e-4);
	border-left: 4px solid;
	border-radius: var(--r-md);
	font-size: var(--t-sm);
}

.aviso--bien {
	border-color: var(--c-cian);
	background: rgb(0 163 188 / 10%);
	color: var(--c-azul);
}

.aviso--mal {
	border-color: var(--c-rojo);
	background: rgb(202 20 42 / 8%);
	color: var(--c-rojo-osc);
}

@media (max-width: 520px) {
	.formulario__campos {
		grid-template-columns: 1fr;
	}
}

/* --- Sedes --------------------------------------------------------------- */

.sedes {
	display: grid;
	gap: var(--e-5);
	margin-top: var(--e-8);
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.sede__titulo {
	margin-bottom: var(--e-2);
	color: var(--c-azul);
	font-size: var(--t-md);
	font-weight: var(--p-titulo);
}

.sede__direccion,
.sede__web {
	color: var(--c-texto-suave);
	font-size: var(--t-sm);
}

/*
  Con el texto a secas, el enlace medía 119x18: por debajo de los 24 que
  pide la WCAG 2.2 para un objetivo tactil (2.5.8). No es un enlace dentro
  de una frase —va solo en su linea—, asi que la excepcion de texto en
  linea no le vale. Con el relleno llega a 26 sin moverse de sitio.
*/
.sede__web a {
	display: inline-block;
	padding-block: 4px;
	color: var(--c-enlace);
	font-weight: var(--p-fuerte);
	text-decoration: none;
}

.sede__web a:hover {
	color: var(--c-rojo);
	text-decoration: underline;
}

/* --- Fondos de seccion ---------------------------------------------------- */
/*
  Cada linea de negocio pintaba sus bandas con sus colores. El bloque elige
  el papel, el color de su linea o un oscuro, y los tokens de arriba se
  encargan de que en Metalurgia salga marron y en Lorbrand naranja.
*/

.seccion--linea {
	background: var(--c-linea-fuerte);
	color: var(--c-blanco);
}

.seccion--oscuro {
	background: var(--c-linea-banda);
	color: var(--c-blanco);
}

/*
  La banda clara de la linea.

  No hace falta tocarle el color al texto: al ser clara, todo lo que va
  encima se lee con la tinta de siempre. Por eso no lleva la lista de
  reglas que arrastran «linea» y «oscuro», que existen solo para volver
  blanco lo que iria oscuro.

  Sin --c-linea-clara declarada se queda en papel, que es lo que habia.
*/
.seccion--claro,
.seccion--papel {
	background: var(--c-linea-clara, var(--c-papel));
}

/*
  La banda neutra toma el tono claro de su linea.
  
  Era el mismo gris en las tres areas: el unico sitio del sitio donde no se
  distinguian. Ahora es bruma en Ambiental, ocre en Transporte y arena en
  Metalurgia —el mismo peldaño de luz, distinto matiz—, y donde no hay
  linea declarada, como en /inicio/ y el blog, se queda en papel.
  
  --c-papel no se toca: sigue siendo el gris de los bordes y de las fichas
  con caja. Lo que cambia es el fondo de la seccion, nada mas.
*/

/*
  Lo unico que si hay que bajar: el tono suave de las bajadas.

  Ese gris esta calculado contra el papel —4.53:1— y sobre un fondo mas
  oscuro que el papel se queda corto: sobre arena da 3.78. Aqui pasa a la
  tinta normal, que da 11.47.

  Va tanto en las fichas como en la prosa: la primera version solo cubria
  las fichas y el parrafo de cierre de /metalurgia/ se quedaba en ese 3.78.
*/
.seccion--claro .tarjetas__bajada,
.seccion--claro .tarjetas__texto,
.seccion--claro .prosa,
.seccion--claro .prosa > *,
.seccion--papel .tarjetas__bajada,
.seccion--papel .tarjetas__texto,
.seccion--papel .prosa,
.seccion--papel .prosa > * {
	color: var(--c-texto);
}

/*
  El titular sobre banda clara va en el tono OSCURO de la linea, no en el
  fuerte. El fuerte es de media luz —cian, naranja— y sobre un fondo claro
  no llega: eran dos de los doce limites que el sitio asumia, 2.42 el cian
  sobre papel y 2.85 el naranja. Con el oscuro pasan a 6.76 y 6.32.
  
  En Metalurgia los dos son el mismo marron, asi que no cambia nada.
*/
.seccion--claro h2,
.seccion--claro h3,
.seccion--papel h2,
.seccion--papel h3 {
	color: var(--c-linea-banda, var(--c-titulo));
}

.seccion--linea h2,
.seccion--linea h3,
.seccion--oscuro h2,
.seccion--oscuro h3 {
	color: var(--c-blanco);
}

.seccion--linea .prosa,
.seccion--oscuro .prosa {
	color: rgb(255 255 255 / 90%);
}

/* Secciones con foto de fondo. */
.seccion--con-foto {
	position: relative;
	isolation: isolate;
	color: var(--c-blanco);
}

.seccion__fondo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
  La capa sobre la foto va del color de su linea, no en negro.

  En el archivo hay seis capas y solo dos son neutras: la del hero de
  /inicio/ (negro al 33%) y la de la portada (rojo). Las otras cuatro llevan
  el color de su linea al 75%: dos en #00A3BC y dos en #E75B0D.

  Yo las pintaba todas de negro al 45%, asi que la seccion «Optimiza tu
  sistema de transporte» tapaba con negro el naranja que debia verse.
*/
.seccion__velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--c-linea-fuerte);
	opacity: 0.75;
}

.seccion--con-foto h2,
.seccion--con-foto h3 {
	color: var(--c-blanco);
}

.seccion--con-foto .prosa {
	color: rgb(255 255 255 / 92%);
}

/*
  Una ficha con caja clara es una superficie propia.

  Lo de arriba tiñe de blanco todo titular que caiga en una seccion con foto
  o con color, y eso alcanzaba tambien a los que viven DENTRO de una ficha de
  caja blanca. En «Weathersolve» los cuatro titulares —Diseño personalizado,
  Resiliencia probada, Cobertura global y Casos de exito— salian en blanco
  sobre blanco: contraste 1:1, invisibles, aunque estaban en el HTML.

  Lo que va dentro de una caja se pinta contra LA CAJA, no contra la seccion
  que hay detras.
*/
.seccion--linea .tarjetas__item--blanco .tarjetas__titulo,
.seccion--oscuro .tarjetas__item--blanco .tarjetas__titulo,
.seccion--con-foto .tarjetas__item--blanco .tarjetas__titulo,
.seccion--linea .tarjetas__item--papel .tarjetas__titulo,
.seccion--oscuro .tarjetas__item--papel .tarjetas__titulo,
.seccion--con-foto .tarjetas__item--papel .tarjetas__titulo {
	color: var(--c-linea-fuerte);
}

/* --- Bloque: Tarjetas ----------------------------------------------------- */
/*
  La rejilla de fichas que se repite en todas las paginas de linea. El
  numero de columnas viene del bloque, pero nunca se estrecha por debajo de
  240px: antes se reparten en menos columnas.
*/

.tarjetas {
	display: grid;
	gap: var(--e-5);
	margin-top: var(--e-6);
	grid-template-columns: repeat(var(--tarjetas-columnas, 3), minmax(0, 1fr));
}

/*
  Los cortes son los de Elementor, que guardaba dos columnas en tableta y una
  en movil. Van sobre grid-template-columns y no sobre la variable porque el
  numero de columnas llega en el atributo style y una regla no puede con el.
*/
@media (max-width: 1024px) {
	.tarjetas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.tarjetas {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
  Sin caja por defecto. En el archivo, 120 de las 143 fichas no tenian
  ninguna y en todo el sitio hay un solo box-shadow: la caja blanca con
  sombra que habia aqui era un añadido mio, no del original.
*/
.tarjetas__item {
	display: flex;
	overflow: hidden;
	flex-direction: column;
	color: var(--c-texto);
}

/* Las 23 fichas que si llevaban fondo, con el que llevaban. */
.tarjetas__item--blanco {
	background: var(--c-blanco);
}

.tarjetas__item--papel {
	background: var(--c-papel);
}

/*
  Texto en blanco, que es lo que decia el archivo.

  Estuve a punto de dejar aqui un tono oscuro para que pasara el contraste,
  apoyandome en que estas fichas «alternaban blanco y #13475F». Alternaban,
  si, pero no como yo lo lei: mirando widget a widget, el titular
  («Válvulas Diafragma») y los tres parrafos van en blanco, y el #13475F es
  solo el de la bajada. Lo pone .tarjetas__bajada, que ya usa el tono suave
  de la linea y en Ambiental resuelve exactamente a ese valor.

  El blanco sobre el cian se queda en 3.02:1, por debajo del 4.5 de la norma.
  Es el color de la marca y asi estaba el original: no hay texto claro que
  llegue a 4.5 sobre ese fondo, y oscurecer el cian es una decision que no me
  toca tomar a mi. Queda anotado en comprobar-css.py, con los demas limites
  que se asumen a proposito.
*/
.tarjetas__item--linea {
	background: var(--c-linea-fuerte);
	color: var(--c-blanco);
}

.tarjetas__item--oscuro {
	background: var(--c-linea-banda);
	color: var(--c-blanco);
}

.tarjetas__item--linea .tarjetas__titulo,
.tarjetas__item--oscuro .tarjetas__titulo,
.tarjetas__item--linea .tarjetas__texto,
.tarjetas__item--oscuro .tarjetas__texto,
.tarjetas__item--linea .tarjetas__bajada,
.tarjetas__item--oscuro .tarjetas__bajada,
.tarjetas__item--linea .tarjetas__icono,
.tarjetas__item--oscuro .tarjetas__icono {
	color: inherit;
}

/*
  Y una ficha SIN caja sobre una seccion de color va en blanco.

  Solo estaba contemplado el caso de la ficha con caja. La de sin caja se
  quedaba con el gris del texto corrido, y medido sobre el naranja de
  «Ventajas que impulsan tu operacion» eso son 1.59:1: practicamente no se
  leia. Sobre el cian da 1.88 y sobre el marron 1.71.

  Blanco y no «inherit»: heredando se coge el color del propio
  .tarjetas__item, que es la tinta oscura del texto corrido. Daba 4.79:1
  sobre el naranja —mejor numero que el blanco, que da 3.56— pero no es lo
  que hacia el original: contando los widgets del archivo, el cuerpo sobre
  fondo de color es #FFFFFF en treinta de treinta y un casos.

  El titular no estaba afectado porque es un <h3> y .seccion--linea h3 ya lo
  pone en blanco, que tambien esta en el archivo.

  La ficha CON caja se salta esto: su caja puede ser de papel sobre una
  seccion de color, y ahi el gris es el que toca.
*/
.seccion--linea .tarjetas__item:not([class*="tarjetas__item--"]) .tarjetas__texto,
.seccion--linea .tarjetas__item:not([class*="tarjetas__item--"]) .tarjetas__bajada,
.seccion--oscuro .tarjetas__item:not([class*="tarjetas__item--"]) .tarjetas__texto,
.seccion--oscuro .tarjetas__item:not([class*="tarjetas__item--"]) .tarjetas__bajada,
.seccion--azul .tarjetas__item:not([class*="tarjetas__item--"]) .tarjetas__texto,
.seccion--azul .tarjetas__item:not([class*="tarjetas__item--"]) .tarjetas__bajada,
.seccion--con-foto .tarjetas__item:not([class*="tarjetas__item--"]) .tarjetas__texto,
.seccion--con-foto .tarjetas__item:not([class*="tarjetas__item--"]) .tarjetas__bajada {
	color: var(--c-blanco);
}

.tarjetas__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.tarjetas__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
}

/* El relleno va con la caja: sin caja no hay margen interior que valga. */
.tarjetas__item--blanco .tarjetas__cuerpo,
.tarjetas__item--papel .tarjetas__cuerpo,
.tarjetas__item--linea .tarjetas__cuerpo,
.tarjetas__item--oscuro .tarjetas__cuerpo {
	padding: var(--e-5);
}

.tarjetas__media + .tarjetas__cuerpo {
	margin-top: var(--e-3);
}

/*
  25.88px en el archivo (preset 2c6bdba, 96 usos). Estaban a 21.6: un 17%
  por debajo.
*/
.tarjetas__titulo {
	color: var(--c-linea-fuerte);
	font-size: var(--t-lg);
	font-weight: var(--p-titulo);
	line-height: var(--i-apretado);
	text-wrap: balance;
}

.tarjetas__bajada {
	margin-top: var(--e-2);
	color: var(--c-linea-suave);
	font-size: var(--t-sm);
	font-weight: var(--p-fuerte);
}

.tarjetas__texto {
	margin-top: var(--e-3);
	color: var(--c-texto-suave);
	font-size: var(--t-sm);
}

.tarjetas__texto > * + * {
	margin-top: var(--e-3);
}

/* El boton al pie, alineado entre tarjetas de distinto alto. */
.tarjetas__acciones {
	margin-top: auto;
	padding-top: var(--e-4);
}

.boton--fino {
	padding: var(--e-2) var(--e-4);
	font-size: var(--t-xs);
}

/*
  Pasos: las tarjetas que en el original eran solo un icono y una linea de
  texto. Sin caja ni sombra, que ahi no habia ninguna.
*/
.tarjetas--pasos .tarjetas__item {
	color: inherit;
	text-align: center;
}

.tarjetas--pasos .tarjetas__texto {
	margin-top: 0;
	color: inherit;
	font-size: var(--t-sm);
}

/* --- Bloque: Texto -------------------------------------------------------- */

.bloque-texto .prosa {
	margin-inline: auto;
}

/* La bajada del duo se alinea con su titular, no centrada como en la prosa. */
.duo__bajada {
	margin-top: var(--e-3);
	color: var(--c-linea-suave);
	font-size: var(--t-md);
}

/* --- Tarjetas en modo galeria --------------------------------------------- */
/*
  Solo fotos. Sin caja, sin sombra y sin relleno: la foto es el contenido,
  no el adorno de una ficha.
*/

.tarjetas--galeria .tarjetas__item {
	overflow: hidden;
}

.tarjetas--galeria .tarjetas__cuerpo {
	display: none;
}

/*
  Una galeria se reparte en las columnas que pidio el original y punto: nada
  de un minimo de 240px que decida por su cuenta. A media pagina, ese minimo
  convertia una galeria de tres en una de dos.

  Los cortes son los de Elementor, que guardaba columns_tablet: 2 y
  columns_mobile: 1 en cada una de las cinco galerias del sitio.
*/
.tarjetas--galeria {
	gap: 10px;
	grid-template-columns: repeat(var(--tarjetas-columnas, 3), minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.tarjetas--galeria {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.tarjetas--galeria {
		grid-template-columns: minmax(0, 1fr);
	}
}

.tarjetas--galeria .tarjetas__media img {
	aspect-ratio: 3 / 2;
	transition: transform var(--trans);
}

.tarjetas--galeria .tarjetas__item:hover .tarjetas__media img {
	transform: scale(1.04);
}


/* --- Iconos ---------------------------------------------------------------

  Los dibuja pimasa_icono() en linea, con los mismos trazos que traia el
  archivo. Heredan el color del texto, asi que basta con tenir el contenedor.

  .icono se define una sola vez, en main.css, y alli solo se mide. Aqui habia
  una segunda definicion que ademas ponia fill:currentColor, al reves que la
  otra: como esta hoja carga despues, en las paginas con bloques rellenaba
  los iconos de trazo. El relleno lo declara ahora cada SVG.
*/

/*
  50px, que es el tamano que traian.

  Yo daba 36. El archivo no los dimensiona widget a widget: los deja en el
  tamano que Elementor pone por defecto, 50px, y asi salen 34 de los 39.
  Nunca se noto el desajuste porque hasta ahora los iconos no llegaban a
  pintarse; con el hueco vacio no hay nada que medir.

  Los pasos tenian aqui una regla propia de 3rem. En el archivo van al mismo
  50 que los demas, asi que sobra.

  El color es el tono suave de la linea, tambien en los pasos: los 39 iconos
  del sitio son de ese color, ninguno hereda el del texto. Sobre el fondo
  fuerte de su propia linea eso da 2.64:1, y es lo que hacia el original
  —#7A2F07 sobre #E75B0D—, no una eleccion mia. Van al lado de su titular,
  que si se lee, asi que no son el unico portador de nada.
*/
.tarjetas__icono {
	margin-bottom: var(--e-3);
	color: var(--c-linea-suave);
	font-size: 3.125rem;
	line-height: 1;
}

/*
  Sobre la banda de color, blanco.

  El tono suave de la linea sobre su propia banda daba 2.64 con el naranja
  del kit, y al oscurecer la banda para que el texto blanco llegase a 4.5 se
  quedo en 2.08. Un icono no puede ir mas oscuro que eso sin volverse negro,
  asi que va al otro lado: blanco, que sobre la banda nueva da 4.50 y 4.53.

  En las secciones claras sigue con el color de su linea, que ahi contrasta
  de sobra: 7.52 sobre el papel.
*/
.seccion--linea .tarjetas__icono,
.seccion--oscuro .tarjetas__icono,
.seccion--con-foto .tarjetas__icono {
	color: var(--c-blanco);
}

/*
  Los cinco dibujados a medida van mas grandes: 80px en el archivo.

  Son los de «Gestion ambiental integral», los unicos iconos propios de
  PIMASA que van dentro de una ficha; los otros treinta y cuatro son de
  Font Awesome. Tienen menos trazo dentro de la misma caja, y por eso
  pedian mas tamano.
*/
.tarjetas__icono--propio {
	font-size: 5rem;
}

/* La alineacion la traia cada widget; no todas las rejillas iban centradas. */
.tarjetas--al-inicio .tarjetas__item {
	text-align: left;
}

.tarjetas--al-final .tarjetas__item {
	text-align: right;
}

/*
  Pasos encadenados: en el archivo habia un icono de flecha suelto entre
  cada par de columnas. Aqui lo dibuja el CSS, que es lo que era: un
  separador, no contenido de ninguna ficha.
*/
.tarjetas--encadenadas .tarjetas__item {
	position: relative;
	overflow: visible;
}

@media (min-width: 720px) {
	.tarjetas--encadenadas .tarjetas__item + .tarjetas__item::before {
		position: absolute;
		top: 50%;
		left: calc(var(--e-5) / -2);
		width: 0.85rem;
		height: 0.85rem;
		border-top: 3px solid currentColor;
		border-right: 3px solid currentColor;
		content: "";
		opacity: 0.5;
		transform: translate(-50%, -50%) rotate(45deg);
	}
}

/* --- Galeria al lado de su texto -------------------------------------------

  No todas las galerias iban a todo ancho con el titular encima: en rodillos
  y en poleas van a media pagina, con su texto en la otra mitad. Aplanarlas
  a una columna era lo que hacia que la seccion no se pareciese al original.
*/

.duo-galeria {
	display: grid;
	margin-top: var(--e-6);
	gap: var(--e-6);
	align-items: center;
}

.duo-galeria .tarjetas {
	margin-top: 0;
}

.duo-galeria__texto > * + * {
	margin-top: var(--e-4);
}

@media (min-width: 860px) {
	.duo-galeria {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--e-7);
	}

	/* «lado» dice donde va la galeria; el texto ocupa la otra mitad. */
	.duo-galeria--derecha .tarjetas {
		order: 2;
	}
}

/* --- Galeria que se desliza ------------------------------------------------

  En el archivo hay dos widgets de fotos distintos: cinco «gallery», que son
  rejillas quietas, y dos «image-carousel», que se deslizan. Salian los siete
  iguales porque el extractor solo leia de ellos cuantas columnas mostraban.

  El original usaba un carrusel por pasos, con flechas y puntos, y asi se hizo
  primero. Se cambio a cinta en bucle continuo —la misma que la banda de
  marcas— a peticion: corre sola, no obliga a pulsar nada y no tiene extremos
  donde el bucle de un salto.

  Es CSS puro, sin una linea de JavaScript. Aqui solo se le da tamano a las
  fotos, que son mas grandes que un logotipo.
*/

.cinta--fotos .cinta__grupo {
	gap: 10px;
	align-items: stretch;
	padding-right: 10px;
}

/*
  Cada foto ocupa la fraccion que pedia el widget del original, descontando
  los huecos. Se mide contra el contenedor y no contra la pista, que es el
  doble de ancha por llevar la tira repetida.
*/
.cinta--fotos .tarjetas__item {
	flex: 0 0 auto;
	width: calc(
		(min(100vw, var(--ancho-max)) - 2 * var(--gutter)
			- (var(--tarjetas-columnas, 5) - 1) * 10px)
		/ var(--tarjetas-columnas, 5)
	);
}

.cinta--fotos .tarjetas__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform var(--trans);
}

.cinta--fotos .tarjetas__item:hover .tarjetas__media img {
	transform: scale(1.04);
}


/* --- Aparecer al llegar ----------------------------------------------------

  Las secciones entraban de golpe: bajabas y ya estaban. Esto las deja
  asomarse.

  La clase la pone main.js, no el marcado, y solo a lo que queda por debajo
  del pliegue: lo que ya se ve al cargar se muestra sin animar. Asi no hay
  parpadeo —aparecer, esconderse y volver a aparecer— ni depende de meter un
  script en el <head> para adelantarse al primer pintado.

  Sin JavaScript no se añade nada y todo se ve, que es como tiene que ser.
*/

/*
  Esconderse es instantaneo; asomarse es lo que se anima.

  La transicion va en .revelado y no en .revelable a proposito. Con la
  transicion en el estado escondido, al añadir la clase desde JS el elemento
  —que el navegador YA habia pintado— se ponia a desvanecerse de 1 a 0 y
  luego volvia: el parpadeo que esto queria evitar. Puesta solo en la
  entrada, esconderse es un salto que nadie llega a ver y asomarse es lo
  unico que se anima.
*/
.revelable {
	opacity: 0;
	transform: translateY(1.5rem);
}

.revelado {
	opacity: 1;
	transform: none;
	transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--i, 0) * 90ms);
}

/* Los paneles de linea llegan desde abajo, como una persiana. */
.revelable.panel {
	transform: translateY(2.5rem);
}

/* La foto del duo entra desde su lado, no desde abajo. */
.duo--derecha > .revelable.duo__media,
.duo--izquierda > .revelable.duo__media {
	transform: translateY(1rem) scale(0.985);
}

.duo--derecha > .revelado.duo__media,
.duo--izquierda > .revelado.duo__media {
	transform: none;
}

/*
  Quien pide menos movimiento lo ve todo puesto desde el principio. No basta
  con quitar la transicion: sin esto el elemento se quedaria en opacity:0
  esperando una animacion que no va a ocurrir.
*/
@media (prefers-reduced-motion: reduce) {
	.revelable {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --- Bloque de texto: como iba alineado ------------------------------------

  La alineacion la trae el bloque, leida del archivo. De los 159 bloques de
  texto del sitio 131 van a la izquierda y 22 centrados, asi que no hay un
  valor por defecto que sirva: «Especialistas en transporte eficiente de
  materiales» y «Optimiza tu sistema de transporte» iban centrados y salian
  a la izquierda.
*/

.bloque-texto--centrado .prosa,
.bloque-texto--centrado .prosa > * {
	text-align: center;
	margin-inline: auto;
}

.bloque-texto--a-la-derecha .prosa,
.bloque-texto--a-la-derecha .prosa > * {
	text-align: right;
	margin-inline: 0 0;
}

/* --- Bloque: Video -------------------------------------------------------- */
/*
  El hueco se reserva con aspect-ratio, no con el truco del padding-top del
  100%: el marco tiene el alto que le toca desde el primer pintado y la
  pagina no da el salto cuando carga el iframe.

  Ancho de lectura, no de contenedor: un video a 1200px al lado de un texto
  a 572 es el mismo descuadre que tenian las entradas del blog.
*/
.video__marco {
	position: relative;
	max-width: 900px;
	margin: var(--e-6) auto 0;
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--c-azul-osc);
	aspect-ratio: 16 / 9;
}

.video__marco iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* --- El ritmo: las figuras de una seccion de tarjetas ---------------------

  El sitio tenia una sola: titular centrado, entradilla centrada y rejilla
  de cajas iguales, repetida 38 veces. Lo unico que cambiaba de una seccion
  a la siguiente era si el fondo salia gris o blanco, asi que paginas
  enteras eran la misma pantalla tres veces seguidas.

  Aqui estan las cinco figuras que reparte inc/ritmo.php. Ninguna es
  decorado: cada una responde a lo que la seccion tiene dentro.

    par         dos fichas — una explica y la otra resume en puntos
    lista       fichas con icono y texto — renglones, no cajas
    aparte      el titular en su columna, a la izquierda de la rejilla
    escalonada  fotos — se desplaza una columna entera
    destacada   la primera ficha ocupa el doble y va tumbada

  Lo que no recibe ninguna se queda como estaba, que para eso es la figura
  de la casa.
*/

/* El titular deja de ir centrado en las figuras que mandan a la izquierda,
   y estrena un filete: asi lo primero que se ve de una seccion ya no es
   identico a lo de la anterior.

   El filete va en currentColor, no en --c-titulo. Son lo mismo casi siempre
   —el titular hereda el color de la linea—, pero no sobre las secciones con
   foto de fondo, donde el titular es blanco: alli el filete salia cian y
   parecia una raya suelta encima del texto en vez de parte de el. Se vio en
   «Weathersolve». */
.seccion--v-par .contenedor > h2.centrado,
.seccion--v-lista .contenedor > h2.centrado,
.seccion--v-destacada .contenedor > h2.centrado,
.seccion--v-par .contenedor > h3.centrado,
.seccion--v-lista .contenedor > h3.centrado,
.seccion--v-destacada .contenedor > h3.centrado,
.tarjetas-aparte__cabecera h2.centrado,
.tarjetas-aparte__cabecera h3.centrado {
	text-align: start;
}

.seccion--v-par .contenedor > .prosa.centrado,
.seccion--v-lista .contenedor > .prosa.centrado,
.seccion--v-destacada .contenedor > .prosa.centrado,
.tarjetas-aparte__cabecera .prosa.centrado {
	margin-inline: 0;
	text-align: start;
}

.seccion--v-par .contenedor > .prosa.centrado > *,
.seccion--v-lista .contenedor > .prosa.centrado > *,
.seccion--v-destacada .contenedor > .prosa.centrado > *,
.tarjetas-aparte__cabecera .prosa.centrado > * {
	margin-inline: 0;
}

.seccion--v-par .contenedor > h2.centrado::before,
.seccion--v-lista .contenedor > h2.centrado::before,
.seccion--v-destacada .contenedor > h2.centrado::before,
.tarjetas-aparte__cabecera h2.centrado::before {
	display: block;
	width: 3rem;
	height: 3px;
	margin-bottom: var(--e-4);
	background: currentColor;
	/* Se dibuja de izquierda a derecha al asomar; el origen lo fija aqui
	   para no declarar la misma regla dos veces. */
	transform-origin: left center;
	content: "";
}

/* En las escalonadas el titular sigue centrado, pero el filete va debajo:
   misma familia, distinta cara. */
.seccion--v-escalonada .contenedor > h2.centrado::after {
	display: block;
	width: 3rem;
	height: 3px;
	margin: var(--e-4) auto 0;
	background: currentColor;
	/* Este se abre desde el centro, que es donde esta el titular. */
	transform-origin: center center;
	content: "";
}


/* --- par: una explica, la otra resume ------------------------------------

  Once secciones del sitio son dos fichas y salian como dos columnas iguales
  con un hueco en medio y ningun peso a ningun lado. Mirando lo que hay
  dentro casi siempre son lo mismo: un parrafo que explica y una lista de
  puntos que resume. No son dos cosas iguales, y pintarlas iguales era el
  error.
*/

.tarjetas--par {
	gap: var(--e-6);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 861px) {
	.tarjetas--par {
		gap: var(--e-8);
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	}
}

@media (max-width: 640px) {
	.tarjetas--par {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
  La prosa de la pareja se lee mas holgada que la de una ficha suelta: es
  el texto principal de su seccion, no el pie de una tarjeta. Pero holgada
  es el cuerpo base, no --t-md.

  Con --t-md iba a 21.6px, y eso es tamano de entradilla, no de parrafo:
  contra el titular de la ficha, a 25.88, quedaban casi iguales. Donde se
  veia de verdad era en /transporte-de-materiales/poleas/, cuya primera
  seccion es una pareja y cae justo debajo del hero: dos parrafos
  seguidos, uno a 16.96 y el otro a 21.6.

  Al base, los dos miden lo mismo y el escalon del titular vuelve a 1.5.
  Son las diez secciones en pareja del sitio.
*/
.tarjetas--par .tarjetas__item:not(.tarjetas__item--puntos) .tarjetas__texto {
	font-size: var(--t-base);
}


/* --- Los puntos: una ficha que es solo una lista -------------------------

  Se pintaban como texto corrido con vinetas. Son resumenes —emoji, negrita
  y una linea— y leen mejor como renglones separados, en un panel propio.

  El panel solo se pone si la ficha no traia ya un color del archivo: esas
  23 tienen el suyo y no se les toca.
*/

.tarjetas__item--puntos:not(.tarjetas__item--blanco):not(.tarjetas__item--papel):not(.tarjetas__item--linea):not(.tarjetas__item--oscuro) {
	padding: var(--e-5);
	border-radius: var(--r-lg);
	background: var(--c-papel);
}

.seccion--papel .tarjetas__item--puntos:not(.tarjetas__item--blanco):not(.tarjetas__item--papel):not(.tarjetas__item--linea):not(.tarjetas__item--oscuro),
.seccion--claro .tarjetas__item--puntos:not(.tarjetas__item--blanco):not(.tarjetas__item--papel):not(.tarjetas__item--linea):not(.tarjetas__item--oscuro) {
	background: var(--c-blanco);
}

.tarjetas__item--puntos .tarjetas__texto ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tarjetas__item--puntos .tarjetas__texto li {
	padding-block: var(--e-3);
}

.tarjetas__item--puntos .tarjetas__texto li + li {
	border-top: 1px solid rgb(0 0 0 / 0.08);
}

/* El emoji y la negrita que abren cada punto son su titular: se separan de
   la linea que los explica en vez de correr seguidos. */
.tarjetas__item--puntos .tarjetas__texto li strong {
	display: block;
	margin-bottom: var(--e-1);
	color: var(--c-titulo);
	font-weight: 700;
}

.tarjetas__item--puntos .tarjetas__texto li br {
	display: none;
}


/* --- lista: renglones, no cajas -------------------------------------------

  Fichas con icono y texto de verdad. En rejilla de cuatro el icono queda
  flotando encima de un parrafo estrecho; en renglon, el icono ocupa el
  margen y el texto corre a su lado.
*/

.tarjetas--lista {
	gap: 0 var(--e-8);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 860px) {
	.tarjetas--lista {
		grid-template-columns: minmax(0, 1fr);
	}
}

.tarjetas--lista .tarjetas__item {
	padding-block: var(--e-5);
	border-top: 1px solid var(--c-borde);
}

/*
  El icono no es hermano del texto: los dos viven dentro de .tarjetas__cuerpo.
  Convirtiendo ese cuerpo en rejilla, el icono se pasa a la primera columna y
  ocupa todo el alto sin tocar el HTML.
*/
.tarjetas--lista .tarjetas__cuerpo {
	display: grid;
	align-items: start;
	column-gap: var(--e-5);
	grid-template-columns: auto minmax(0, 1fr);
}

.tarjetas--lista .tarjetas__icono {
	margin: 0;
	grid-row: 1 / -1;
}

.tarjetas--lista .tarjetas__titulo,
.tarjetas--lista .tarjetas__bajada,
.tarjetas--lista .tarjetas__texto,
.tarjetas--lista .tarjetas__acciones {
	grid-column: 2;
}

.tarjetas--lista .tarjetas__titulo {
	margin-top: 0;
}


/* --- aparte: el titular en su columna -------------------------------------

  La figura que mas cambia la silueta. El titular y la entradilla se van a
  una columna propia a la izquierda y se quedan pegados al hacer scroll,
  mientras las fichas pasan al lado.
*/

.tarjetas-aparte {
	display: grid;
	gap: var(--e-6);
}

@media (min-width: 900px) {
	.tarjetas-aparte {
		gap: var(--e-8);
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.tarjetas-aparte__cabecera {
		position: sticky;
		top: calc(var(--alto-cabecera) + var(--e-6));
		align-self: start;
	}
}

.tarjetas-aparte__cabecera > :first-child {
	margin-top: 0;
}

/* Dentro de la columna estrecha no caben las columnas que pedia el bloque:
   dos, y una en pantalla pequena. Va sobre grid-template-columns y no sobre
   la variable porque el numero llega en el atributo style. */
.tarjetas-aparte__rejilla .tarjetas {
	margin-top: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
	.tarjetas-aparte__rejilla .tarjetas {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* La pareja dentro de «aparte» ya no reparte pesos: la columna entera es
   estrecha y las dos fichas van iguales. */
.tarjetas-aparte__rejilla .tarjetas--par {
	gap: var(--e-6);
}


/* --- escalonada: se desplaza una columna entera --------------------------

  Para las rejillas de fotos, que eran tres pantallas casi iguales en
  Metalurgia y cinco galerias identicas en Transporte. Se desplaza una
  columna completa, no fichas sueltas repartidas al tuntun: por eso hace
  falta saber cuantas hay, y por eso el numero viaja como clase.

  Solo por encima de 1024, que es donde la rejilla conserva sus columnas;
  mas abajo se reparte en dos o en una y el escalon no significaria nada.
*/

@media (min-width: 1025px) {
	.tarjetas--escalonada.tarjetas--c2 .tarjetas__item:nth-child(2n),
	.tarjetas--escalonada.tarjetas--c3 .tarjetas__item:nth-child(3n + 2),
	.tarjetas--escalonada.tarjetas--c4 .tarjetas__item:nth-child(4n + 2),
	.tarjetas--escalonada.tarjetas--c4 .tarjetas__item:nth-child(4n + 4),
	.tarjetas--escalonada.tarjetas--c5 .tarjetas__item:nth-child(5n + 2),
	.tarjetas--escalonada.tarjetas--c5 .tarjetas__item:nth-child(5n + 4) {
		/*
		 * Con top y no con transform, a proposito.
		 *
		 * El revelado al asomar tambien usa transform, y el suyo es mas
		 * flojo que este: en las columnas desplazadas la ficha se quedaba
		 * con el escalon y sin entrada, asi que media galeria aparecia de
		 * golpe y la otra media con calma. Separandolos, cada uno hace lo
		 * suyo y se componen.
		 *
		 * top sobre una ficha de rejilla la corre sin tocar la maqueta,
		 * igual que hacia translateY.
		 */
		position: relative;
		top: var(--e-7);
	}

	/* Lo que baja la columna desplazada sobresale por abajo: se le devuelve
	   a la seccion, o se come el aire de debajo. */
	.tarjetas--escalonada {
		margin-bottom: var(--e-7);
	}
}


/* --- destacada: la primera ficha ocupa el doble --------------------------- */

@media (min-width: 641px) {
	.tarjetas--destacada .tarjetas__item:first-child {
		grid-column: span 2;
	}

	/* Tumbada: el icono al margen y el texto al lado, como en la lista. */
	.tarjetas--destacada .tarjetas__item:first-child .tarjetas__cuerpo {
		display: grid;
		align-items: start;
		column-gap: var(--e-6);
		grid-template-columns: auto minmax(0, 1fr);
	}

	.tarjetas--destacada .tarjetas__item:first-child .tarjetas__icono {
		margin: 0;
		grid-row: 1 / -1;
	}

	.tarjetas--destacada .tarjetas__item:first-child .tarjetas__titulo {
		margin-top: 0;
		font-size: var(--t-lg);
	}

	.tarjetas--destacada .tarjetas__item:first-child .tarjetas__titulo,
	.tarjetas--destacada .tarjetas__item:first-child .tarjetas__bajada,
	.tarjetas--destacada .tarjetas__item:first-child .tarjetas__texto,
	.tarjetas--destacada .tarjetas__item:first-child .tarjetas__acciones {
		grid-column: 2;
	}
}


/* --- Remiendos del ritmo -------------------------------------------------- */

/*
  Los «pasos» centran su texto, y con razon: en su figura son un icono y una
  linea sueltos bajo un titular centrado. Pero en cuanto reciben otra figura
  ese centrado deja de tener sentido y se nota: en /soporte-postventa/ la
  pareja salia con los dos parrafos centrados, uno enfrente del otro, que es
  justo lo dificil de leer.

  Se cancela solo cuando hay variante; sin ella, la figura de la casa sigue
  igual que estaba.
*/
.tarjetas--pasos.tarjetas--par .tarjetas__item,
.tarjetas--pasos.tarjetas--lista .tarjetas__item,
.tarjetas--pasos.tarjetas--aparte .tarjetas__item,
.tarjetas--pasos.tarjetas--destacada .tarjetas__item,
.tarjetas--pasos.tarjetas--escalonada .tarjetas__item {
	text-align: start;
}


/*
  Las tres maneras de escribir una lista de puntos, cada una con su
  separacion. La que las reconoce es la plantilla; aqui solo se las trata
  como lo que son.
*/

/* 2. Un parrafo de renglones cortos separados por <br>. No hay donde poner
      un filete, asi que lo que se les da es aire: el ✔ ya delimita. */
.tarjetas__item--puntos .tarjetas__texto p {
	line-height: 2;
}

/* 3. Un parrafo por punto, con su rotulo en negrita al frente. */
.tarjetas__item--puntos .tarjetas__texto p + p {
	margin-top: 0;
	padding-top: var(--e-3);
	border-top: 1px solid rgb(0 0 0 / 0.08);
}

.tarjetas__item--puntos .tarjetas__texto p > strong:first-child {
	display: block;
	margin-bottom: var(--e-1);
	color: var(--c-titulo);
	line-height: 1.4;
}

/* Con el rotulo ya en su renglon, el salto que lo separaba sobra. El de los
   renglones cortos NO se toca: ahi el <br> es la separacion. */
.tarjetas__item--puntos .tarjetas__texto p > strong:first-child + br {
	display: none;
}

.tarjetas__item--puntos .tarjetas__texto p:has(> strong:first-child) {
	line-height: 1.6;
}


/* --- Movimiento: la entrada de cada cosa ----------------------------------

  El sitio ya revelaba al asomar, pero solo en /inicio/: las otras diecinueve
  paginas se ponian de golpe. La lista de lo que asoma vive en main.js y
  ahora las cubre todas; aqui esta lo que cada figura hace al entrar.

  Tres reglas que no se saltan:

    · Solo opacity y transform. Nada que obligue al navegador a recalcular
      la maqueta mientras se desplaza la pagina.
    · Una sola vez. Al volver a pasar por encima no se repite: un sitio que
      reanima cada vez que subes y bajas marea.
    · Quien pide menos movimiento no ve ninguna. No se atenuan: no existen.
      El contenido esta en el HTML y se ve entero sin nada de esto.

  Y son cortas y sin rebote a proposito. Esto es una web industrial, no una
  presentacion: el movimiento esta para ordenar la lectura, no para que se
  note que hay movimiento.
*/

/*
  La columna pegajosa de «aparte» entra solo con opacidad.

  Moverla seria moverle el suelo a algo que justamente esta ahi para
  quedarse quieto mientras las fichas pasan al lado; y un transform sobre un
  position:sticky es pedirle al navegador dos cosas a la vez.
*/
.tarjetas-aparte__cabecera.revelable {
	transform: none;
}

/*
  El filete del titular se dibuja de izquierda a derecha, y llega tarde a
  proposito: primero se lee el titular y despues se subraya. Al reves parece
  que la raya esperaba al texto.
*/
.revelable h2::before,
h2.revelable::before,
.revelable h2::after,
h2.revelable::after {
	transform: scaleX(0);
}

.revelado h2::before,
h2.revelado::before,
.revelado h2::after,
h2.revelado::after {
	transform: scaleX(1);
	transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1) 220ms;
}

/*
  Las fotos se asientan: entran un pelin grandes y se posan.

  Va como animacion y no como transicion para no pisarle el hover a la
  galeria, que amplia en 180ms. Si esto fuera una transicion sobre el mismo
  transform, ese hover heredaria el segundo largo de aqui y se volveria
  pastoso.
*/
@keyframes pimasa-asienta-foto {
	from {
		transform: scale(1.05);
	}
}

.tarjetas__item.revelado .tarjetas__media img,
.revelado.duo__media img {
	animation: pimasa-asienta-foto 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* --- La entrada de la cabecera de pagina ----------------------------------

  Lo primero que se ve, asi que lo hace el CSS y no el JavaScript: una
  animacion con from se pinta ya en el primer fotograma, mientras que
  esconder algo con JS y volver a enseñarlo parpadea.

  Va dentro de «no-preference» en vez de apagarse despues: quien pide menos
  movimiento no es que la vea atenuada, es que no llega a existir.
*/

@keyframes pimasa-sube {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
}

@keyframes pimasa-aparece {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.cabecera-pagina__cuerpo > * {
		animation: pimasa-sube 680ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
	}

	/* Migas, titular, bajada y entradilla, en ese orden y de 80 en 80. */
	.cabecera-pagina__cuerpo > :nth-child(1) {
		animation-delay: 80ms;
	}

	.cabecera-pagina__cuerpo > :nth-child(2) {
		animation-delay: 160ms;
	}

	.cabecera-pagina__cuerpo > :nth-child(3) {
		animation-delay: 240ms;
	}

	.cabecera-pagina__cuerpo > :nth-child(n + 4) {
		animation-delay: 320ms;
	}

	/* La foto se posa, como las de las fichas. */
	.cabecera-pagina__media {
		overflow: hidden;
	}

	.cabecera-pagina__media img {
		animation: pimasa-asienta-foto 1100ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	/* El isologo de la linea no se mueve: solo aparece, y sin prisa. */
	.cabecera-pagina__icono {
		animation: pimasa-aparece 1400ms ease-out 240ms backwards;
	}
}


/* --- Arreglos ------------------------------------------------------------- */

/*
  La ficha impar que se quedaba sola.

  «Aparte» y «lista» reparten sus fichas en dos columnas, asi que una
  seccion de tres dejaba la tercera sola con media fila vacia al lado. Pasa
  en nueve secciones del sitio y no es del archivo: lo trajeron estas dos
  figuras.

  La ultima, cuando es impar, ocupa el ancho entero. En una sola columna la
  regla no hace nada, asi que no necesita punto de corte.

  Salvo si lleva foto. Una ficha de texto estirada queda bien; una con foto
  se vuelve el doble de grande que sus hermanas y parece la importante sin
  serlo. Pasaba en «Opciones flexibles de suministro» de /metalurgia/: dos
  fichas de 296 y una de 616. Esas se quedan a su tamano y el hueco se
  asume, que es lo honesto cuando son tres iguales.
*/
.tarjetas-aparte__rejilla .tarjetas > .tarjetas__item:last-child:nth-child(odd):not(.tarjetas__item--con-foto),
.tarjetas--lista > .tarjetas__item:last-child:nth-child(odd):not(.tarjetas__item--con-foto) {
	grid-column: 1 / -1;
}


/*
  La foto de reserva del hero, cuando hay video encima.

  Solo se ve si el video no llega: tarda, va bloqueado por un bloqueador de
  rastreo o por el proxy de una empresa. Hasta ahora no habia ninguna y
  quedaba un bloque plano con el texto blanco flotando.

  La que hay es una composicion sobre fondo BLANCO, y el texto del hero es
  blanco: tal cual no se leeria. Se oscurece aqui, no con el velo, porque
  el velo tambien cubre el video y ahi no hace falta. Mientras el video se
  ve, esta foto esta detras y esto no cambia nada de nada.
*/
.hero--con-video .hero__fondo {
	filter: brightness(0.6);
}


/* --- Dos secciones seguidas del mismo color no son una sola --------------

  Cuando se tocan, la de abajo no repite el aire de arriba —eso ya estaba, y
  esta bien: dos veces el mismo relleno dejaba franjas muertas—. Pero sin
  aire Y sin color que cambie tampoco queda NADA que marque donde acaba una
  y empieza la otra.

  En /ambiental/ eran 969 pixeles de cian corrido: «Gestion ambiental
  integral» y «Ingenieria y equipos tecnologicos» se leian como una sola
  seccion larga, y el segundo titular parecia un subapartado del primero.

  Un filete del ancho del contenido, y aire debajo. No es una linea de
  adorno: es el unico corte que hay.
*/

.seccion--linea + .seccion--linea > .contenedor,
.seccion--oscuro + .seccion--oscuro > .contenedor,
.seccion--azul + .seccion--azul > .contenedor {
	padding-top: var(--e-7);
	border-top: 1px solid rgb(255 255 255 / 0.25);
}

/*
  Las blancas se nombran por lo que NO llevan, y hay que enumerarlo.

  Aqui ponia :not([class*="seccion--"]), que parecia lo mismo y no lo es:
  excluia tambien las clases de FIGURA. El ritmo le pone a una seccion
  «seccion--v-escalonada» —una forma, no un fondo— y con eso dejaba de
  casar. En /rodillos/, «Disenados para condiciones exigentes» y
  «Aplicaciones reales» quedaban pegadas, las dos en blanco y las dos
  llenas de fotos, leyendose como un bloque unico.

  Lo mismo pasaba con «seccion--blanco», que es un fondo que no pinta
  nada y por tanto tambien es blanco.

  Asi que se enumeran las seis clases que SI pintan fondo. Lo que no
  lleve ninguna es blanco, venga con figura, con «blanco» o sin nada. Si
  algun dia se anade un fondo nuevo, hay que anadirlo a las dos listas.
*/
.seccion--papel + .seccion--papel > .contenedor,
.seccion--claro + .seccion--claro > .contenedor,
.seccion:not(.seccion--papel, .seccion--claro, .seccion--linea, .seccion--oscuro, .seccion--azul, .seccion--con-foto)
	+ .seccion:not(.seccion--papel, .seccion--claro, .seccion--linea, .seccion--oscuro, .seccion--azul, .seccion--con-foto) > .contenedor {
	padding-top: var(--e-7);
	border-top: 1px solid rgb(0 0 0 / 0.1);
}


/* --- Una ficha que es solo una foto --------------------------------------

  «Repuestos y consumibles de alta calidad» son dos columnas de texto y un
  diagrama: «Colectores de polvo», con sus llamadas a valvulas de limpieza,
  tarjetas controladoras, canastillos, filtros de mangas, sensores y
  ventiladores.

  Compartia trato con las fotos de ficha, y para un diagrama ese trato es el
  peor posible: recortado a 16/10 con object-fit cover —que se lleva por
  delante las llamadas de arriba y abajo— y encogido a un tercio del ancho,
  donde los rotulos miden menos de dos pixeles. Estaba puesto y no se podia
  leer, que para un diagrama es no estar.

  Asi que ocupa el ancho entero, debajo de las dos columnas de texto, y a su
  proporcion. Pasa de 357 pixeles a 1120: por tres. El filete lo separa del
  blanco de la pagina, que si no el fondo del diagrama y el de la seccion
  son el mismo y la imagen no tiene bordes.
*/

.tarjetas > .tarjetas__item--solo-foto {
	grid-column: 1 / -1;
	border: 1px solid var(--c-borde);
	border-radius: var(--r-lg);
}

/*
  Sin recorte y a su proporcion: un diagrama no se encuadra, se lee entero.

  La proporcion no se pone aqui: la escribe la plantilla en el propio
  <img>, que es donde se sabe cuanto mide el adjunto. Con «aspect-ratio:
  auto» no basta —probado en el sitio: la caja se quedaba en 1118x1500 en
  vez de los 1118x620 que le tocan—, y una medida real ademas reserva el
  hueco antes de que la foto llegue.
*/
.tarjetas__item--solo-foto .tarjetas__media img {
	height: auto;
}


/* --- realce: un conjunto de iguales ---------------------------------------

  La misma rejilla, con las fichas en panel y el icono sobre una placa.

  Es la figura para cuando las fichas son pares y ninguna manda. «Ventajas
  de integrar Mecair-Goyen» y «Ventajas que impulsan tu operacion» son
  cuatro iconos con una linea cada uno: no dan para renglones —el texto es
  corto y la fila se queda vacia por la derecha— y destacar la primera
  seria afirmar algo que el contenido no dice.

  Cambia el tratamiento y no el reparto, que es justo lo que se puede
  cambiar sin mentir.

  Radio y relleno salen de los tokens, como todo lo demas. Los puse a pelo
  —12px aqui, 10 en el panel de puntos, 14 en la placa— y no solo no
  coincidian entre si: el tema entero usa 2, 4 y 8, que son los del kit.
  Tres esquinas distintas en la misma pagina se notan aunque nadie sepa
  decir por que.
*/

.tarjetas--realce > .tarjetas__item:not(.tarjetas__item--blanco):not(.tarjetas__item--papel):not(.tarjetas__item--linea):not(.tarjetas__item--oscuro) {
	padding: var(--e-5);
	border: 1px solid var(--c-borde);
	border-radius: var(--r-lg);
	background: var(--c-blanco);
}

/* Sobre papel, el borde se afina: el blanco del panel ya lo separa. */
.seccion--papel .tarjetas--realce > .tarjetas__item:not(.tarjetas__item--blanco):not(.tarjetas__item--papel):not(.tarjetas__item--linea):not(.tarjetas__item--oscuro) {
	border-color: rgb(0 0 0 / 0.06);
}

/*
  Sobre banda de color, el panel va en tinta, no en luz.

  Parece al reves y no lo es: el texto encima es blanco, asi que aclarar el
  fondo le quita contraste. Medido sobre el naranja de la linea, un panel
  de blanco al 8% baja el blanco a 3.25:1, peor que el 3.56 de la banda
  pelada; el mismo panel en negro al 10% lo sube a 4.29. Se lee mejor
  dentro del panel que fuera, que es como debe ser.

  El borde si va en claro: es lo que dibuja la caja.

  Y con la misma cadena de :not que la regla de arriba. Sin ella pesaba
  menos, perdia, y las fichas salian en panel blanco con su texto blanco
  encima: invisibles.
*/
.seccion--linea .tarjetas--realce > .tarjetas__item:not(.tarjetas__item--blanco):not(.tarjetas__item--papel):not(.tarjetas__item--linea):not(.tarjetas__item--oscuro),
.seccion--oscuro .tarjetas--realce > .tarjetas__item:not(.tarjetas__item--blanco):not(.tarjetas__item--papel):not(.tarjetas__item--linea):not(.tarjetas__item--oscuro),
.seccion--azul .tarjetas--realce > .tarjetas__item:not(.tarjetas__item--blanco):not(.tarjetas__item--papel):not(.tarjetas__item--linea):not(.tarjetas__item--oscuro),
.seccion--con-foto .tarjetas--realce > .tarjetas__item:not(.tarjetas__item--blanco):not(.tarjetas__item--papel):not(.tarjetas__item--linea):not(.tarjetas__item--oscuro) {
	border-color: rgb(255 255 255 / 0.22);
	background: rgb(0 0 0 / 0.10);
}

/*
  El icono, sobre una placa.

  Sin ella el icono flota encima del texto y la ficha sigue leyendose como
  la de siempre; con ella hay una figura que reconocer de un vistazo, que
  es de lo que se trata.
*/
.tarjetas--realce .tarjetas__icono {
	display: grid;
	width: 4rem;
	height: 4rem;
	margin-bottom: var(--e-4);
	border-radius: var(--r-lg);
	background: color-mix(in srgb, var(--c-titulo) 12%, transparent);
	place-items: center;
}

.seccion--linea .tarjetas--realce .tarjetas__icono,
.seccion--oscuro .tarjetas--realce .tarjetas__icono,
.seccion--azul .tarjetas--realce .tarjetas__icono,
.seccion--con-foto .tarjetas--realce .tarjetas__icono {
	background: rgb(255 255 255 / 0.14);
}

/* La placa manda sobre el tamano: dentro, el icono va a su medida normal. */
.tarjetas--realce .tarjetas__icono .icono {
	width: 2rem;
	height: 2rem;
}

.tarjetas--realce .tarjetas__icono--propio .icono {
	width: 2.75rem;
	height: 2.75rem;
}

/* Centradas cuando la seccion centra sus iconos, igual que las demas. */
.tarjetas--realce.tarjetas--al-inicio .tarjetas__icono {
	margin-inline-end: auto;
}


/* --- Fotos enteras: planos y renders --------------------------------------

  Una fotografia se recorta sin perder nada: el encuadre sobra por los
  bordes y 16:10 es una ventana comoda. Un plano no. En «Cerramientos
  WeatherSolve» son seis vistas de barreras cortaviento —stockpiles,
  descarga de camiones, hoppers, trippers— y el encuadre entero ES el
  contenido: medido, recortarlas a 16:10 se llevaba entre 56 y 220 pixeles
  de cada una.

  La celda pasa a cuadrada, que es la proporcion en la que vienen las seis,
  y la foto se contiene en vez de cubrir. Asi la rejilla sigue pareja y no
  se corta nada; si alguien mete luego una apaisada, se vera entera con sus
  margenes en vez de cortada.
*/

.tarjetas--fotos-enteras .tarjetas__media img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--c-papel);
}

/* Sobre papel, el hueco de la foto va en blanco: si no, el margen de la
   foto y el fondo de la seccion son el mismo tono y la imagen no tiene
   bordes. */
.seccion--papel .tarjetas--fotos-enteras .tarjetas__media img,
.seccion--claro .tarjetas--fotos-enteras .tarjetas__media img {
	background: var(--c-blanco);
}