/*
 * MultiAceros: CSS propio del tema, que se carga después del sistema de diseño
 * (tokens.css y components/bundle.css, que no se modifican).
 *
 * Solo lo que el sistema no trae:
 * 1. Clases de WordPress que usan el núcleo y los plugins.
 * 2. Botones flotantes (botonera lateral, WhatsApp y carrito), con los tokens del sistema.
 * 3. Megamenú: paneles de línea sin foto y tercer nivel en los paneles simples.
 * 4. Pie: logo de medios de pago y espacio para los flotantes.
 * 5. Fotos reales en los marcos del sistema (el prototipo usa marcadores .ma-foto), la foto de la
 *    declaración y el video con portada.
 *
 * Usa solo var(--…) del sistema. Excepción: el verde de WhatsApp, que es el color de su marca
 * y no un color de la interfaz.
 */

/* 1. Clases de WordPress ------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	clip: auto;
	width: auto;
	height: auto;
	margin: 0;
	z-index: 300;
}

/* La etiqueta oculta del buscador (Certificaciones de MultiFireNet): el CSS del bloque, que se
   carga después, le da width: 100% y desbordaba la página en móvil (etapa 5). */
.wp-block-search__label.screen-reader-text {
	width: 1px;
}

/* 2. Botones flotantes --------------------------------------------------- */
/* Por debajo del velo (90), del menú móvil (99) y de la cabecera (100). Con el menú móvil
   abierto (bundle.js pone .ma-sin-scroll en <html>) se ocultan.
   La pila de abajo a la derecha (WhatsApp y, encima, el carrito) llega hasta
   --ma-carrito-abajo + --ma-carrito-tamano: el pie deja ese espacio libre (sección 4). */
:root {
	--ma-carrito-abajo: 96px;
	--ma-carrito-tamano: 58px;
	--ma-flotante-borde: 28px; /* Distancia de WhatsApp (y de la botonera en móvil) a los bordes. */
}

@media (max-width: 480px), (orientation: landscape) and (max-height: 480px) {
	:root {
		--ma-flotante-borde: 14px;
	}
}

@media (max-width: 734px) {
	:root {
		--ma-carrito-abajo: 90px;
		--ma-carrito-tamano: 54px;
	}
}

.ma-botonera,
.ma-whatsapp,
.fst-floating-cart {
	z-index: 80;
}

html.ma-sin-scroll :is(.ma-botonera, .ma-whatsapp, .fst-floating-cart) {
	display: none;
}

/* Botonera lateral: centro derecha, vertical; botones de 40 px con el ícono de 21 px. En móvil va
   abajo a la izquierda (ver más abajo). */
.ma-botonera {
	position: fixed;
	top: 50%;
	right: 0;
	display: flex;
	flex-direction: column;
	gap: var(--espacio-1);
	transform: translateY(-50%);
}

.ma-botonera__boton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radio-sm) 0 0 var(--radio-sm);
	background: var(--gris-azulado);
	color: var(--tinta-inversa);
	text-decoration: none;
	box-shadow: var(--sombra-reposo);
	transition: background-color var(--ma-rapido) var(--ma-curva);
}

.ma-botonera__boton:hover {
	background: var(--rojo);
	color: var(--tinta-inversa);
}

.ma-botonera__boton:focus-visible {
	outline: none;
	background: var(--rojo);
	color: var(--tinta-inversa);
	box-shadow: var(--foco);
}

.ma-botonera__boton svg {
	width: 21px;
	height: 21px;
}

/* Móvil (hasta 734 px): a media altura tapaba el final de las líneas del contenido (División de
   Proyectos, 390 px). Va abajo a la izquierda, en fila y centrada con WhatsApp (60 px), con la misma
   distancia a los bordes: así solo ocupa la esquina, como WhatsApp en la otra. Botones de 48 px. */
@media (max-width: 734px) {
	.ma-botonera {
		top: auto;
		right: auto;
		bottom: calc(var(--ma-flotante-borde) + 6px);
		left: var(--ma-flotante-borde);
		flex-direction: row;
		gap: var(--espacio-2);
		transform: none;
	}

	/* Contorno de 1 px con --linea-inversa (la línea del sistema sobre fondo oscuro): sobre fondo
	   claro no se nota. */
	.ma-botonera__boton {
		width: 48px;
		height: 48px;
		border-radius: var(--radio-pildora);
		box-shadow: var(--sombra-elevada), 0 0 0 1px var(--linea-inversa);
	}

	/* Sobre el pie: desde el 15-10 el pie es gris claro y los círculos gris azulado se ven con su
	   contorno de siempre. El contorno claro del 9-10 (para el pie oscuro, con la clase
	   «is-sobre-pie» que pone assets/js/flotantes.js) ya no hace falta y no se aplica. */
}

/* WhatsApp: círculo de 60 px abajo a la derecha, a 28 px de los bordes (14 px en pantallas
   de hasta 480 px o apaisadas de poco alto, --ma-flotante-borde), como Joinchat. */
.ma-whatsapp {
	position: fixed;
	right: var(--ma-flotante-borde);
	bottom: var(--ma-flotante-borde);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: var(--radio-pildora);
	background: #25d366;
	color: var(--blanco);
	text-decoration: none;
	box-shadow: var(--sombra-elevada);
	transition: background-color var(--ma-rapido) var(--ma-curva), transform var(--ma-rapido) var(--ma-curva);
}

.ma-whatsapp:hover {
	background: #128c7e;
	color: var(--blanco);
}

.ma-whatsapp:active {
	transform: scale(.97);
}

.ma-whatsapp:focus-visible {
	outline: none;
	box-shadow: var(--foco);
}

.ma-whatsapp svg {
	width: 36px;
	height: 36px;
}

/* Carrito flotante (tienda): sobre el botón de WhatsApp. */
.fst-floating-cart {
	position: fixed;
	right: 24px;
	bottom: var(--ma-carrito-abajo);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ma-carrito-tamano);
	height: var(--ma-carrito-tamano);
	border-radius: var(--radio-pildora);
	background: var(--rojo);
	color: var(--blanco) !important;
	text-decoration: none !important;
	box-shadow: var(--sombra-elevada);
	transition: background-color var(--ma-rapido) var(--ma-curva), transform var(--ma-rapido) var(--ma-curva);
}

.fst-floating-cart:hover {
	background: var(--rojo-presionado);
	color: var(--blanco) !important;
	transform: translateY(-2px);
}

.fst-floating-cart:focus-visible {
	outline: none;
	box-shadow: var(--foco);
}

.fst-floating-cart__icon {
	display: block;
	width: 26px;
	height: 26px;
}

.fst-floating-cart__count {
	position: absolute;
	top: -4px;
	right: -4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 var(--espacio-1);
	border: 2px solid var(--blanco);
	border-radius: var(--radio-pildora);
	background: var(--tinta);
	color: var(--tinta-inversa);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

.fst-floating-cart__count:empty {
	display: none;
}

@media (max-width: 734px) {
	.fst-floating-cart {
		right: 16px;
	}
}

/* 3. Megamenú ------------------------------------------------------------ */

/* Línea sin foto (Productos, decisión de Diego del 20-10): sin tarjeta ni hueco; el nombre y las
   sublíneas usan todo el ancho. El panel conserva el alto que le da la caja de la foto (300 px,
   la de .ma-mega__foto del sistema), para que no salte al pasar de una línea con foto a otra sin
   ella: el nombre y las sublíneas quedan arriba (la rejilla del sistema estiraría sus filas) y el
   aire, abajo. */
.ma-mega__panel--sin-foto.is-activo {
	grid-template-columns: minmax(0, 1fr);
}

.ma-mega__panel--sin-foto > .ma-mega__texto {
	align-content: start;
	min-height: 300px;
}

/* Panel simple: los hijos de un enlace grande (p. ej. Accesorios bajo Rociadores) van debajo,
   en una columna, con el estilo de sublínea del sistema. Ese elemento ocupa una fila de la
   rejilla por cada enlace (--ocupa, desde menus.php). */
.ma-mega__grandes > li[style*="--ocupa"] {
	grid-row: span var(--ocupa);
}

.ma-mega__grandes .ma-mega__subs {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin-top: var(--espacio-1);
}

/* Ítem sin dirección propia («#»; menus.php lo pinta como <a> sin href): es texto, como en el
   megamenú de producción («Válvulas de Control, Ventosa y Medidores»). Al pasar el ratón no
   cambia de color como un enlace. */
.ma-mega__sub:not([href]):hover,
.ma-mega__grande:not([href]):hover {
	color: var(--tinta);
}

/* Foto y logos de un panel, como los megamenús de producción (regla de Diego del 14-10): la foto
   del ítem de primer nivel (MultiFireNet: el rociador) va entera, sin tarjeta, abajo a la derecha;
   no se agranda. Los logos (Potter, Reliable, Safe Signal) van al pie del panel, en una fila. */
.ma-mega__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: calc(var(--espacio-16) + var(--espacio-2));
	align-items: start;
}

/* Foto de una línea en el panel de Productos: llena su caja de 300 px del sistema, recortada al
   centro (regla de fotos de Diego, 16-10; antes del 15-10 se cortaba solo abajo y el 15-10 iba
   entera, con su proporción). */
.ma-mega__foto:not(.ma-mega__foto--panel) img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ma-mega__foto--panel {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	height: 300px;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.ma-mega__foto--panel img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

.ma-mega__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--espacio-6) var(--espacio-10);
	margin: var(--espacio-6) 0 0;
	padding: var(--espacio-6) 0 0;
	border-top: 1px solid var(--linea);
	list-style: none;
}

.ma-mega__logos img {
	display: block;
	width: auto;
	max-width: 180px;
	height: 40px;
	object-fit: contain;
}

/* 4. Pie ------------------------------------------------------------------ */

/* Pie en gris claro (ajuste de diseño de Diego, 15-10; pendiente de pasar al sistema de diseño):
   fondo --gris-claro (#F5F5F7) con borde superior --linea (#E3E5E8); títulos en --tinta (600);
   enlaces y textos en --tinta-suave (4,73:1 sobre el fondo; --tinta, 9,73:1); «Redes», en --tinta.
   La línea sobre la base («Redes» y el aviso legal), en --linea (#E3E5E8, como el borde superior;
   sistema 2.3.3, etapa 7, 19-10; antes, --tinta), y las de los grupos del acordeón móvil, también. */
.ma-pie {
	border-top: 1px solid var(--linea);
	background: var(--gris-claro);
	color: var(--tinta-suave);
}

.ma-pie a {
	color: var(--tinta-suave);
}

.ma-pie a:hover {
	color: var(--tinta);
}

.ma-pie__titulo,
.ma-pie__redes-rotulo {
	color: var(--tinta);
	font-weight: 600;
}

.ma-pie__base {
	border-top-color: var(--linea);
}

@media (max-width: 734px) {
	.ma-pie__grupo {
		border-bottom-color: var(--linea);
	}
}

/* Logo de Webpay: oscuro y transparente, va directo sobre el gris claro, sin la placa blanca que
   necesitaba sobre el pie oscuro. Tamaño del pie de producción (180 × 84). */
.ma-pie__pago {
	display: inline-block;
	line-height: 0;
	border-radius: var(--radio-sm);
}

.ma-pie__pago img {
	width: 180px;
	height: auto;
}

.ma-pie__pago:focus-visible {
	outline: none;
	box-shadow: var(--foco);
}

/* Las 2 columnas del pie en tableta y el corte de los correos largos están en bundle.css desde la
   2.3.2 (componente PieTableta). */

/* Espacio libre al final del pie para la pila de flotantes (WhatsApp y carrito): por debajo
   de unos 1380 px el carrito cae sobre el contenedor y tapaba «Sucursales ›» (medido; a 1400 px
   quedan 12 px de holgura). En móvil la pila tapaba las redes. */
@media (max-width: 1399px) {
	.ma-pie {
		padding-bottom: calc(var(--ma-carrito-abajo) + var(--ma-carrito-tamano) + var(--espacio-4));
	}
}

/* 5. Fotos reales en los marcos del sistema -------------------------------- */
/* Regla de fotos (ajustes de diseño 2 de Diego, 16-10; reemplaza a las fotos enteras del 15-10 y
   queda pendiente de pasar al sistema de diseño): «cada foto mantiene el tamaño de recuadro que
   tenía antes y lo llena; las tarjetas de un mismo grupo van del mismo porte; los productos con
   fondo blanco van enteros dentro del recuadro».
   - El recuadro es el que tenía antes del 15-10: el del sistema (su proporción en bundle.css o
     --aspecto). La foto lo llena: se recorta al centro, o con el encuadre elegido (--ma-encuadre,
     inc/bloques.php), y si es más chica que el recuadro se agranda (su sizes pide el ancho que se
     pinta: multiaceros_a_sizes()). El gris de fondo solo se ve mientras la foto carga.
   - Productos con fondo blanco, enteros (contain) y centrados sobre blanco: la foto de cada ficha y
     la del lateral cuando su borde es blanco (ma-fondo-blanco, inc/plantilla-b.php). Más abajo.
   - La foto al lado del texto y la de la intro de Servicios (ajustes 3 de Diego, 16-10): a todo el
     ancho de su columna, enteras y con su proporción, hasta un alto máximo (el del recuadro de antes);
     solo una foto más alta se recorta. Más abajo.
   - Enteros, con su proporción: los logos (marca representada, proveedores, el de la intro), los
     dibujos técnicos (ma-dibujo), el dibujo de cada perfil y el banner de Propósitos y Valores.
   Excepciones: el corte diagonal del carrusel (ma-anuncio__img) y la foto atenuada de la
   declaración, que es un fondo.
   Va con .ma-sitio-contenido para pesar más que el CSS de los bloques del núcleo (se imprime
   después). */
.ma-sitio-contenido :is(.ma-medio, .ma-proyectos__img, .ma-catalogo__portada, .ma-servicio__medio) {
	background: var(--gris-claro);
}

/* La foto se ubica en su marco: .ma-medio ya es relativo en el sistema y el corte diagonal de
   División de Proyectos (ma-proyectos__img) es absoluto dentro de su sección (bundle.css). */
.ma-sitio-contenido :is(.ma-catalogo__portada, .ma-servicio__medio) {
	position: relative;
}

.ma-sitio-contenido :is(.ma-medio, .ma-proyectos__img, .ma-catalogo__portada, .ma-servicio__medio) img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	object-fit: cover;
	object-position: var(--ma-encuadre, 50% 50%);
}

/* El logo de la intro (MultiFireNet): entero, en su marco con su propia proporción (--aspecto,
   inc/plantilla-a.php), sobre el blanco con borde fino del sistema. */
.ma-sitio-contenido .ma-intro__logo {
	background: var(--blanco);
}

/* El banner de Propósitos y Valores: entero, a lo ancho del contenedor, en su marco con su propia
   proporción (--aspecto, inc/plantilla-c.php). */
.ma-sitio-contenido .ma-banner-pagina img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Fichas (plantilla B): la foto del producto, entera (contain) y centrada, en el recuadro blanco
   cuadrado de antes del 15-10 (1:1; 4:3 en móvil, bundle.css). Las fichas de una fila, del mismo
   alto, como en el sistema (Diego, 16-10). */
.ma-sitio-contenido .ma-ficha__medio {
	background: var(--blanco);
}

.ma-sitio-contenido .ma-ficha__medio img {
	object-fit: contain;
	object-position: 50% 50%;
}

/* Foto al lado del texto (plantilla B) y foto de la intro de Servicios (regla de Diego, 16-10,
   ajustes 3): la foto va a todo el ancho de su columna, entera y con su propia proporción (--aspecto,
   que ponen inc/plantilla-b.php e inc/plantilla-a.php en la figura). Su alto máximo es el del recuadro
   de antes del 15-10 en cada ancho: en el lateral, 3:4 del ancho de la columna (4:5 y hasta 440 px en
   móvil); en la intro, 4:3. Solo una foto más alta que eso se recorta a ese alto (cover, centrada, o
   con el encuadre elegido). Los productos con fondo blanco (ma-fondo-blanco, inc/plantilla-b.php) y
   los dibujos técnicos (ma-dibujo) nunca se recortan: van enteros dentro de ese alto, centrados y lo
   más grandes posible (contain, sobre blanco). El ancho de la columna sale de las unidades de
   contenedor. La foto lleva width: 100%: el lateral es una rejilla y en ella un marco con
   aspect-ratio no se estira, así que una foto más alta que el máximo quedaba más angosta que la
   columna en lugar de recortarse. */
.ma-sitio-contenido :is(.ma-producto__lateral, .ma-intro__medio) {
	container-type: inline-size;
}

.ma-sitio-contenido .ma-producto__lateral .ma-producto__foto {
	width: 100%;
	height: auto;
	aspect-ratio: var(--aspecto, 3 / 4);
	max-height: calc(100cqw * 4 / 3);
}

@media (max-width: 734px) {
	.ma-sitio-contenido .ma-producto__lateral .ma-producto__foto {
		max-height: min(calc(100cqw * 5 / 4), 440px);
	}
}

.ma-sitio-contenido .ma-intro__imagen {
	width: 100%;
	height: auto;
	max-height: calc(100cqw * 3 / 4);
}

.ma-sitio-contenido .ma-producto__foto:is(.ma-fondo-blanco, .ma-dibujo) {
	background: var(--blanco);
}

.ma-sitio-contenido .ma-producto__foto:is(.ma-fondo-blanco, .ma-dibujo) img {
	object-fit: contain;
	object-position: 50% 50%;
}

/* El dibujo técnico del lateral lleva el borde fino del dibujo de cada perfil (decisión de Diego,
   14-10). En los demás marcos (atributo maDibujo; inc/bloques.php pone la clase ma-dibujo), un
   dibujo también va entero, sobre blanco. */
.ma-sitio-contenido .ma-producto__lateral .ma-producto__foto.ma-dibujo {
	border: 1px solid var(--linea);
	border-radius: var(--radio-md);
}

.ma-sitio-contenido :is(.ma-medio, .ma-proyectos__img, .ma-servicio__medio).ma-dibujo {
	background: var(--blanco);
}

.ma-sitio-contenido :is(.ma-medio, .ma-proyectos__img, .ma-servicio__medio).ma-dibujo img {
	object-fit: contain;
	object-position: 50% 50%;
}

/* El logo de la marca representada y el dibujo de cada perfil (plantilla B): enteros, a todo el ancho
   de su marco y con su proporción, que inc/plantilla-b.php (en el editor, assets/js/editor.js) pone en el
   marco como --aspecto. Así el marco guarda su lugar mientras la imagen carga en diferido: con el alto
   de la imagen en el flujo, al cargar los logos de Sensores y juntas corrían hacia abajo las fichas y
   su foto, el LCP, se pintaba hasta 0,6 s más tarde (15-10). */
.ma-sitio-contenido :is(.ma-perfil__foto, .ma-marca-socio__logo) {
	position: relative;
	height: auto;
	aspect-ratio: var(--aspecto, auto);
	border: 0;
	background: none;
}

.ma-sitio-contenido :is(.ma-perfil__foto, .ma-marca-socio__logo) img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	object-fit: fill;
}

/* Tarjetas de un mismo grupo, del mismo porte (regla de fotos, 16-10): sus fotos van en recuadros
   de la misma proporción y las tarjetas de una fila se estiran al alto de la más alta, como en el
   sistema (bundle.css). */

/* Servicios (la portada /servicios/, ma-servicios--centrada): las cinco fotos en un mismo recuadro
   3:2 que la foto llena, centrada (Diego, 16-10). Las demás tarjetas de servicio conservan el 4:3
   del sistema. */
.ma-sitio-contenido .ma-servicios--centrada .ma-servicio__medio {
	aspect-ratio: 3 / 2;
}

/* En móvil la tarjeta de servicio va en columna (desde el 15-10; Diego, 16-10: «se mantiene en
   columna»): la foto a todo el ancho de la tarjeta, en su recuadro (4:3; 3:2 en Servicios), y el
   nombre debajo. El sistema la pone en fila, con una miniatura cuadrada de 104 px. */
@media (max-width: 734px) {
	.ma-sitio-contenido .ma-servicio {
		flex-direction: column;
		align-items: stretch;
	}

	.ma-sitio-contenido .ma-servicio__medio {
		width: auto;
		margin: var(--espacio-2) var(--espacio-2) 0;
		aspect-ratio: 4 / 3;
	}

	.ma-sitio-contenido .ma-servicios--centrada .ma-servicio__medio {
		aspect-ratio: 3 / 2;
	}

	.ma-sitio-contenido .ma-servicio__titulo {
		align-items: baseline;
		padding: var(--espacio-4) var(--espacio-5) var(--espacio-5);
	}
}

/* Logo de marca bajo la lista de una ficha (Ayvaz en Sensores y juntas): 100 px de ancho y sin
   marco, como en producción (regla de Diego del 14-10; multiaceros_b_fichas()). */
.ma-sitio-contenido .ma-ficha__logo {
	margin: var(--espacio-2) 0 0;
}

.ma-sitio-contenido .ma-ficha__logo img {
	display: block;
	width: 100px;
	height: auto;
}

/* Imagen entera dentro de un texto (ma-figura: una tabla o un esquema en imagen): completa, a su
   tamaño o al ancho del texto, sin recorte. */
.ma-sitio-contenido .ma-figura img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--radio-md);
}

.ma-sitio-contenido .ma-figura > a:focus-visible {
	outline: none;
	box-shadow: var(--foco);
}

/* Foto de una tarjeta que abre su archivo (Productos: el «ojo» de producción, decisión de Diego
   del 9-10). El enlace llena el marco y va sobre el que cubre la tarjeta (z-index 1), como los
   enlaces extra de ma-tarjeta__accion en bundle.css; su foco se marca en el marco (--foco). */
.ma-sitio-contenido .ma-tarjeta__medio > a {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.ma-sitio-contenido .ma-tarjeta__medio > a:focus-visible {
	outline: none;
}

.ma-sitio-contenido .ma-tarjeta__medio:has(> a:focus-visible) {
	box-shadow: var(--foco);
}

/* Ventana de la foto ampliada (<dialog id="ma-ampliar">, inc/plantilla-a.php y
   assets/js/ampliar.js). El fondo es el velo del sistema (.ma-velo: --velo con desenfoque). La
   foto se ve a su tamaño, sin agrandarla, hasta el 92 % del ancho y el 88 % del alto de la
   ventana. */
.ma-ampliar {
	max-width: none;
	max-height: none;
	padding: 0;
	overflow: visible;
	border: 0;
	border-radius: var(--radio-md);
	background: var(--blanco);
	box-shadow: var(--sombra-elevada);
}

.ma-ampliar::backdrop {
	background: var(--velo);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ma-ampliar__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 92vw;
	max-height: 88vh;
	border-radius: inherit;
}

.ma-ampliar__cerrar {
	position: absolute;
	top: var(--espacio-2);
	right: var(--espacio-2);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--blanco);
	color: var(--tinta);
	box-shadow: var(--sombra-reposo);
	cursor: pointer;
}

.ma-ampliar__cerrar:focus-visible {
	outline: none;
	box-shadow: var(--foco);
}

/* Con recorte de tableta la foto va en un <picture>: no forma caja, el <img> sigue llenando el
   marco del anuncio. */
.ma-sitio-contenido .ma-anuncio__img picture {
	display: contents;
}

.ma-sitio-contenido .ma-anuncio__img img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ma-sitio-contenido .ma-anuncio__banner img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Declaración (plantilla A): la foto atenuada detrás de la frase, sobre el gris oscuro del panel y
   con la misma regla (no se agranda). Opacidad 0,3: aprobada por Diego el 9-10 (el texto blanco cumple 4,5:1). */
.ma-sitio-contenido .ma-declaracion__fondo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: var(--ma-archivo-ancho, 100%);
	max-height: var(--ma-archivo-alto, 100%);
	margin: auto;
	object-fit: cover;
	object-position: var(--ma-encuadre, 50% 50%);
	opacity: .3;
}

/* Video de YouTube con portada (inc/plantilla-a.php): la miniatura llena el marco 16:9 del
   sistema y, al pulsar, el reproductor ocupa su lugar (assets/js/video.js). */
.ma-video > img,
.ma-video > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.ma-medio img {
	transition: transform var(--ma-lento) var(--ma-curva-salida);
}

.ma-tarjeta:hover .ma-medio img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.ma-tarjeta:hover .ma-medio img {
		transform: none;
	}
}

/* Plantilla B (etapa 5): varias marcas representadas, una al lado de otra (Sensores y juntas:
   Potter y Safe-Signal), e imagen entera en su propia sección (Accesorios de MultiFireNet). */
.ma-marca-socio {
	flex-wrap: wrap;
	gap: var(--espacio-6);
}

.ma-imagen-seccion {
	display: flex;
	justify-content: center;
	padding-bottom: var(--espacio-12);
}

/* Plantilla B (etapa 5): un grupo de chips con muchos hijos o con grupos adentro (el menú de
   Perfiles Laminados) se parte en líneas en vez de salirse del contenedor. Donde cabe, no cambia.
   En móvil la fila de chips se desplaza de lado (bundle.css), como siempre. */
@media (min-width: 735px) {
	.ma-pag-cabeza__nav .ma-sublineas__grupo {
		flex-wrap: wrap;
		max-width: 100%;
	}

	.ma-pag-cabeza__nav .ma-sublineas__hijos {
		flex-wrap: wrap;
	}
}

/* Etapa 6 · Proyectos (plantilla B) ---------------------------------------- */
/* Rejilla de logos (multiaceros/logos, ProveedorLogo del sistema: ma-proveedores): Aliados
   Estratégicos, Clientes y las marcas de Válvulas Proyectos. Cada logo se ve entero, con su
   proporción y sin agrandarse (--ma-archivo-*, inc/plantilla-b.php), sobre blanco, en el marco 2:1
   del sistema, como el logo de la marca representada. */
.ma-sitio-contenido .ma-proveedor__logo {
	position: relative;
	background: var(--blanco);
}

.ma-sitio-contenido .ma-proveedor__logo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: var(--ma-archivo-ancho, 100%);
	max-height: var(--ma-archivo-alto, 100%);
	margin: auto;
	object-fit: contain;
}

/* Un logo sin enlace (Clientes, las marcas de Válvulas Proyectos) no es un enlace: al pasar el
   ratón no se levanta como la tarjeta que lleva al sitio del proveedor. */
.ma-sitio-contenido div.ma-proveedor:hover {
	transform: none;
	box-shadow: none;
}

/* Etapa 6 · Plantilla C (páginas únicas) ------------------------------------- */
/* Mapa de una sucursal (multiaceros/sucursal): el mapa de Google llena su caja del sistema
   (ma-sucursal__mapa: al menos 320 px de alto; 16:9 en tableta y 4:3 en móvil). */
.ma-sitio-contenido .ma-sucursal__mapa {
	position: relative;
}

.ma-sitio-contenido .ma-sucursal__mapa iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* La foto de una sucursal llena su recuadro, como en el sistema (height: 100% y object-fit: cover).
   El estilo del bloque Imagen de WordPress (.wp-block-image img { height: auto }) se carga después
   que el sistema y ganaba: la foto quedaba con su proporción (300 × 326 a 1440 px) y, cuando los
   datos de la sucursal alargan la fila (Cerrillos, Concón, Temuco…), el recuadro se veía cortado
   abajo, con las esquinas de abajo rectas (Diego, 22-10). En celular el recuadro es 4:3 y la foto,
   más alta, se recorta abajo con las esquinas redondeadas: queda como estaba. */
@media (min-width: 735px) {
	.ma-sitio-contenido .ma-sucursal__foto img {
		height: 100%;
	}
}

/* En escritorio, el mapa con menos de 400 px de ancho, como en producción (Diego, 15-10). Google
   Maps pinta arriba a la izquierda la ficha del lugar (nombre, dirección, nota y «Abrir en Maps»)
   cuando el mapa mide 400 px o más, y solo el botón «Abrir en Maps» cuando mide menos (comprobado
   en Edge: 399 px, botón; 400 px, ficha). En producción el mapa mide de 287 a 366 px en escritorio
   y se ve el botón. La columna del mapa del sistema (1,05fr) llegaba a 420 px desde unos 1240 px
   de ventana: se limita a 399 px y la columna de los datos toma el resto. Más angosto, la columna
   es la del sistema (calc: su parte de 1,05 de 2,05 del ancho que dejan la foto y los espacios). */
@media (min-width: 1069px) {
	.ma-sitio-contenido .ma-sucursal {
		grid-template-columns: 300px minmax(0, 1fr) minmax(0, min(399px, calc((100% - 300px - 2 * var(--espacio-10)) * 1.05 / 2.05)));
	}
}

/* Catálogos (página): la portada es el botón que abre el libro en DearFlip (en producción, la
   miniatura de DearFlip, sin enlace): sin los estilos de botón del navegador, con el foco del
   sistema. El nombre del libro aparece al pasar el ratón, en una franja al pie de la portada, como
   la miniatura de DearFlip (regla de Diego del 14-10); con el foco del teclado, también. */
.ma-sitio-contenido .ma-catalogos .ma-catalogo__portada {
	position: relative;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

.ma-sitio-contenido .ma-catalogos .ma-catalogo__portada:focus-visible {
	outline: none;
	box-shadow: var(--sombra-elevada), var(--foco);
}

.ma-sitio-contenido .ma-catalogo__libro {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: var(--espacio-2) var(--espacio-3);
	background: var(--blanco);
	color: var(--tinta);
	font-size: 13px;
	line-height: 18px;
	opacity: 0;
	transform: translateY(100%);
	transition: opacity var(--ma-rapido) var(--ma-curva), transform var(--ma-rapido) var(--ma-curva);
}

.ma-sitio-contenido .ma-catalogo:hover .ma-catalogo__libro,
.ma-sitio-contenido .ma-catalogo__portada:focus-visible .ma-catalogo__libro {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ma-sitio-contenido .ma-catalogo__libro {
		transition: none;
	}
}

/* Videos de Proyectos (BloquesProyectos). El de fondo del héroe llena su caja (es decorativo). Los
   de sección se ven enteros, con su proporción (--aspecto, que pone inc/plantilla-c.php desde el
   archivo; 16:9 si no se conoce): traen bandas negras y subtítulos dentro del cuadro, y el marco
   21:9 del prototipo los cortaría. Regla del componente, como la de los dibujos técnicos. */
.ma-sitio-contenido .ma-heroe__fondo video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ma-sitio-contenido .ma-video-ancho {
	aspect-ratio: var(--aspecto, 16 / 9);
	background: var(--gris-oscuro);
}

.ma-sitio-contenido .ma-video-ancho video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ma-sitio-contenido .ma-video-ancho__pie {
	z-index: 1;
}

/* Entrada (single.php): el texto en una columna con espacio entre sus bloques (sus párrafos, títulos
   y fotos no van en secciones, como los de TextoLargo); los títulos, con más aire arriba. La foto
   destacada, a su tamaño (no se agranda) y al ancho del texto como mucho. */
.ma-sitio-contenido .ma-entrada .ma-texto-largo {
	display: grid;
	gap: var(--espacio-4);
}

.ma-sitio-contenido .ma-entrada .ma-texto-largo > :is(h2, h3) {
	margin-top: var(--espacio-4);
}

.ma-sitio-contenido .ma-entrada__foto {
	margin: 0 0 var(--espacio-6);
}

/* Página no encontrada (404.php): la cabeza de página con el texto y, debajo, el buscador, centrado y
   de ancho de lectura. */
.ma-sitio-contenido .ma-error .ma-cuerpo {
	margin-top: var(--espacio-3);
	color: var(--tinta-suave);
}

.ma-sitio-contenido .ma-error__busqueda {
	max-width: var(--contenedor-texto);
	margin: var(--espacio-8) auto 0;
}

/* El título de la entrada es un enlace a la propia entrada, como en producción: se ve como título. */
.ma-sitio-contenido .ma-entrada__titulo {
	color: inherit;
	text-decoration: none;
}

/* «Previous Article» y «Next Article» (multiaceros_entrada_navegacion()): bajo el texto, separados por
   una línea; la anterior a la izquierda y la siguiente a la derecha (una sobre otra en móvil). */
.ma-sitio-contenido .ma-entrada__nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--espacio-6);
	padding-block: var(--espacio-10) var(--espacio-16);
	border-top: 1px solid var(--linea);
}

.ma-sitio-contenido .ma-entrada__nav a {
	display: grid;
	align-content: start;
	gap: var(--espacio-2);
	color: var(--tinta);
	text-decoration: none;
}

.ma-sitio-contenido .ma-entrada__nav a:hover .ma-t-4 {
	color: var(--rojo-texto);
}

.ma-sitio-contenido .ma-entrada__sig {
	grid-column: -2;
	text-align: right;
}

/* Una palabra más ancha que la columna (el correo dentro de un título de «Válvulas de Titanio para
   Minería») se parte antes de salirse de la pantalla en móvil. */
.ma-sitio-contenido .ma-entrada .ma-texto-largo {
	overflow-wrap: break-word;
}

/* Ajustes de diseño de Diego (15-10) ---------------------------------------- */
/* Solo diseño: no cambian textos, enlaces ni fotos. Van aquí, sin tocar bundle.css, y quedan
   pendientes de pasar al sistema de diseño (DECISIONES, «Ajustes de diseño de Diego»). El pie
   claro (6) está en la sección 4. Las fotos enteras (1) las reemplazó la regla de fotos del 16-10
   (sección 5). */

/* 2. Sin triángulos rojos: el del carrusel, la esquina de las fotos (lateral, Contacto, Proyectos),
   las marcas de Gracias, de la declaración, de los valores y de las capacidades, y las viñetas de
   las listas (3). */
.ma-anuncio__triangulo,
.ma-declaracion__marca,
.ma-gracias__marca {
	display: none;
}

.ma-producto__foto::after,
.ma-terreno__foto::after,
.ma-valor::before,
.ma-capacidad::before {
	content: none;
}

/* 3. Listas de la plantilla B y de las fichas (y las de los textos largos y de las plantas de
   Proyectos, que llevaban la misma viñeta): sin viñeta; cada ítem separado del siguiente por una
   línea fina --linea (#E3E5E8), con 10 px arriba y abajo, y el texto en --tinta. */
.ma-sitio-contenido :is(.ma-lista-tecnica, .ma-ficha__lista, .ma-planta__lista, .ma-texto-largo ul) {
	display: block;
	padding: 0;
	border: 0;
	list-style: none;
}

.ma-sitio-contenido :is(.ma-lista-tecnica, .ma-ficha__lista, .ma-planta__lista, .ma-texto-largo ul) > li {
	display: block;
	padding: 10px 0;
	border: 0;
	color: var(--tinta);
}

.ma-sitio-contenido :is(.ma-lista-tecnica, .ma-ficha__lista, .ma-planta__lista, .ma-texto-largo ul) > li + li {
	border-top: 1px solid var(--linea);
}

.ma-sitio-contenido :is(.ma-lista-tecnica, .ma-ficha__lista, .ma-planta__lista, .ma-texto-largo ul) > li::before {
	content: none;
}

/* 4. Subcategorías del panel de MultiFireNet (Accesorios bajo Rociadores; Válvulas de bronce y
   Válvulas generales y accesorios bajo Válvulas) y del menú móvil (menus.php les pone
   ma-menu-movil__subsub--panel): sangría de 16 px con una línea --linea de 2 px a la izquierda, en
   15 px y --tinta-suave. El ítem padre queda igual. */
.ma-mega__grandes .ma-mega__subs {
	padding-left: var(--espacio-4);
	border-left: 2px solid var(--linea);
}

.ma-mega__grandes .ma-mega__sub {
	font-size: 15px;
	line-height: 20px;
	color: var(--tinta-suave);
}

.ma-menu-movil__subsub--panel {
	margin-left: 0;
	padding-left: var(--espacio-4);
	border-left-width: 2px;
}

/* 5. Una tarjeta sola en su fila va centrada (Fabricación de Spools: la tarjeta «Spools»), con el
   ancho de una columna: servicios, 4 por fila en escritorio y 3 en tableta; fichas, 3 y 2 (bundle.css). La franja gris de las
   tarjetas de servicio de una línea no deja espacio vacío de más: 64 px arriba y abajo, como la
   franja de la tienda (ma-seccion--franja), en vez de 128 px. */
@media (min-width: 1069px) {
	.ma-sitio-contenido .ma-servicios:not(.ma-servicios--centrada) > li:nth-child(4n+1):last-child {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - 3 * var(--espacio-6)) / 4);
	}

	.ma-sitio-contenido .ma-fichas > :nth-child(3n+1):last-child {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - 2 * var(--espacio-6)) / 3);
	}
}

@media (min-width: 735px) and (max-width: 1068px) {
	.ma-sitio-contenido .ma-servicios:not(.ma-servicios--centrada) > li:nth-child(3n+1):last-child {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - 2 * var(--espacio-6)) / 3);
	}

	.ma-sitio-contenido .ma-fichas > :nth-child(2n+1):last-child {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc((100% - var(--espacio-6)) / 2);
	}
}

.ma-sitio-contenido .ma-linea .ma-seccion--gris:has(> .ma-contenedor > .ma-servicios:only-child) {
	padding-block: var(--espacio-16);
}

/* Ajustes de diseño 2 de Diego (16-10) -------------------------------------- */
/* Solo diseño, en el tema y sin tocar bundle.css; pendientes de pasar al sistema de diseño (DECISIONES,
   «Ajustes de diseño 2 de Diego»). La regla de fotos está en la sección 5 y los formularios de
   contacto, en formularios.css. */

/* Solicitud de Cotización (Contacto), opción C: sin la foto de la persona, que se quitó del contenido
   (decisión de Diego, 16-10). El lateral queda vacío y no se ve, y el formulario toma todo el
   contenedor, con la nota a la izquierda (formularios.css). Si el lateral tuviera algo, la rejilla
   sigue siendo la del sistema. */
.ma-sitio-contenido .ma-cotizar__rejilla:not(:has(> .ma-cotizar__lateral *)) {
	grid-template-columns: minmax(0, 1fr);
}

.ma-sitio-contenido .ma-cotizar__lateral:not(:has(*)) {
	display: none;
}

/* Gracias (Confirmacion), opción B: sin tarjeta, en una columna centrada de 760 px como máximo. Arriba,
   el check en un círculo --rojo-suave de 96 px (el del sistema, #FDECEE: Diego, ajustes 3; antes,
   #FDE8EA; inc/plantilla-c.php), que se dibuja en 0,6 s (quieto con «reducir movimiento»); el título
   en Inter Display 56/62 (36 px en móvil); el subtítulo en 22/30 y peso 500; una línea --rojo de
   48 × 2 px con 32 px arriba y abajo (entre el subtítulo, o el título si no hay, y el párrafo), y el
   párrafo en 17/27 y tinta-suave, de 560 px como máximo, con la parte en negrita en tinta 600. Los
   textos no cambian. */
.ma-sitio-contenido .ma-gracias__caja {
	gap: 0;
	max-width: 760px;
	padding: 0;
	border-radius: 0;
	background: none;
}

.ma-gracias__check {
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	margin-bottom: var(--espacio-8);
	border-radius: 50%;
	background: var(--rojo-suave);
}

.ma-gracias__check svg {
	display: block;
	width: 96px;
	height: 96px;
	fill: none;
	stroke: var(--rojo-texto);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ma-gracias__check path {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	animation: ma-gracias-check .6s var(--ma-curva-salida) .15s both;
}

@keyframes ma-gracias-check {
	from {
		stroke-dashoffset: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ma-gracias__check path {
		animation: none;
	}
}

.ma-sitio-contenido .ma-gracias__caja .ma-t-1 {
	font-family: var(--font-display);
	font-size: 56px;
	line-height: 62px;
}

.ma-sitio-contenido .ma-gracias__caja .ma-entradilla {
	margin-top: var(--espacio-4);
	color: var(--tinta);
	font-size: 22px;
	line-height: 30px;
	font-weight: 500;
}

.ma-sitio-contenido .ma-gracias__caja .ma-entradilla strong {
	font-weight: inherit;
}

.ma-sitio-contenido .ma-gracias__caja .ma-cuerpo {
	max-width: 560px;
	color: var(--tinta-suave);
	font-size: 17px;
	line-height: 27px;
}

.ma-sitio-contenido .ma-gracias__caja .ma-cuerpo strong {
	color: var(--tinta);
	font-weight: 600;
}

.ma-sitio-contenido .ma-gracias__caja .ma-cuerpo + .ma-cuerpo {
	margin-top: var(--espacio-4);
}

.ma-sitio-contenido .ma-gracias__caja :is(.ma-entradilla, .ma-t-1) + .ma-cuerpo::before {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	margin: var(--espacio-8) auto;
	background: var(--rojo);
}

@media (max-width: 734px) {
	.ma-sitio-contenido .ma-gracias__caja .ma-t-1 {
		font-size: 36px;
		line-height: 40px;
	}
}

/* Ajustes de diseño 3 de Diego (16-10) -------------------------------------- */
/* Solo diseño (salvo la foto quitada de Servicio al Cliente y de Trabaje con Nosotros), en el tema y
   sin tocar bundle.css; pendientes de pasar al sistema de diseño (DECISIONES, «Ajustes de diseño 3 de
   Diego»). La foto al lado del texto está en la sección 5. */

/* Formulario centrado (Servicio al Cliente y Trabaje con Nosotros, como Contacto: multiaceros_c_formulario()):
   el título y los chips arriba (ma-pag-cabeza) y el formulario, con el estilo de campos de Contacto
   (formularios.css), en una columna centrada de 760 px como máximo. */
.ma-sitio-contenido .ma-cotizar--centrada .ma-cotizar__formulario {
	max-width: 760px;
	margin-inline: auto;
}

/* Etapa 8b: decisiones de Diego sobre las pruebas de la 8a (19-10) ---------- */
/* En el tema, sin tocar bundle.css; para pasar al sistema de diseño (DECISIONES, «Etapa 8b»). */

/* Tablas anchas: en pantallas angostas, la tabla se desliza de lado dentro de su caja y la página no
   se ensancha. Las del sistema ya van en .ma-tabla-marco (bundle.css); esto es para la caja de
   cualquier otra tabla del contenido: el widget de Elementor (HTML, editor de texto, acordeón), la
   tabla del núcleo (figure.wp-block-table) o una tabla suelta en un bloque. Antes, en Revestimiento
   Tricapa la tabla de 6 columnas ensanchaba la página a 523 px en un teléfono de 390 (en producción,
   page-content-area la corta). El contenido no cambia. */
.ma-sitio-contenido :is(div, figure, section, article, aside, li):not(.ma-tabla-marco):has(> table) {
	max-width: 100%;
	overflow-x: auto;
}

/* Revisión de accesibilidad (etapa 8b) ---------------------------------------- */

/* El foco del teclado, a la vista sobre los flotantes: al moverse con Tab, la página se desplaza para
   que el elemento con el foco quede por encima de la pila de abajo (WhatsApp y el carrito; en móvil,
   también la botonera, a la misma altura). Antes, en un teléfono, «Facebook» del pie quedaba tapado
   por la botonera. El espacio de arriba (la barra fija) ya lo pone bundle.css (scroll-padding-top). */
html {
	scroll-padding-bottom: calc(var(--ma-carrito-abajo) + var(--ma-carrito-tamano) + var(--espacio-4));
}

/* Redes del pie: la zona que responde al toque mide unos 44 px de alto (antes, la del texto: 17 px),
   sin mover el texto ni cambiar el contorno de foco. */
.ma-pie__redes a {
	position: relative;
}

.ma-pie__redes a::after {
	content: "";
	position: absolute;
	inset: -13px -6px;
}

/* Inter de texto (400, 500 y 600) con contornos TrueType, en WOFF2. Las del sistema
   (assets/sistema/fonts, Inter 4.000 en WOFF con contornos CFF) pierden el punto de la «i» en Chrome y
   Edge de Windows con la pantalla al 100 % («Servlclos», «Dlvlsión» a 15 px en 500 y 600): el punto se
   pega al palo al ajustarse a los píxeles. Con contornos TrueType se ve en todos los tamaños (medido en
   la misma VM; a 200 % las dos se ven bien). Son la Inter del proyecto (OFL, assets/fonts/inter-OFL.txt)
   en el corte latino de @fontsource 5.0.18 (unos 22 KB cada una; las del sistema, 28). Van después de
   tokens.css: para los caracteres de su rango ganan a las del sistema, que quedan para el resto. Inter
   Display (titulares grandes) sigue siendo la del sistema. Pendiente de pasar al paquete del sistema.
   El editor de bloques las toma de editor-fuentes.css (etapa 8c): si cambian aquí, cambian allí. */
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}